자바스크립트 퀴즈사이트 만들기
저번시간은 여러개의 주관식 문제를 만들었지만 이번 시간은 radio 버튼을 이용한 객관식 퀴즈 사이트를 만들었습니다.
html 코드 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>퀴즈 이펙트04</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz</a> <em>객관식 확인하기 유형</em></h1>
<ul>
<li><a href="quizEffect01.html">1</a></li>
<li><a href="quizEffect02.html">2</a></li>
<li><a href="quizEffect03.html">3</a></li>
<li class="active"><a href="quizEffect04.html">4</a></li>
<li><a href="quizEffect05.html">5</a></li>
<li><a href="quizEffect06.html">웹디자인 기출</a></li>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="quiz__wrap">
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"></h2>
</div>
<div class="quiz__main">
<div class="quiz__question"></div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="true">정답입니다!</div>
<div class="false">틀렸습니다!</div>
<div class="card-container">
<div class="dog">
<div class="head">
<div class="ears"></div>
<div class="face"></div>
<div class="eyes">
<div class="teardrop"></div>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
<div class="chin"></div>
</div>
<div class="body">
<div class="tail"></div>
<div class="legs"></div>
</div>
</div>
</div>
</div>
</div>
<div class="quiz__choice">
<label for="choice1">
<input type="radio" id="choice1" name="choice" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" value="2">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" value="3">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" value="4">
<span></span>
</label>
</div>
<div class="quiz__answer">
<button class="confirm">정답 확인하기</button>
</div>
<div class="quiz__desc"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:ebmdols@naver.com">ebmdols@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>quiz__choice 클래스를 만들어 주었습니다.
input type = "radio"는 여러 개의 선택지 중에서 하나를 선택할 수 있도록 하는 라디오 버튼을 생성합니다.
각 라디오 버튼은 고유한 값을 가지고 있으며, 사용자는 이 중 하나를 선택할 수 있습니다. 라디오 버튼은 하나의 그룹으로 묶여 있으며, 그룹 내에서는 한 번에 하나의 버튼만 선택할 수 있습니다.
id="choice1" : 라디오 버튼에 대한 고유한 식별자를 설정합니다. 이는 CSS와 JavaScript에서 해당 라디오 버튼을 조작할 때 사용될 수 있습니다.
name="choice" : 라디오 버튼이 속한 그룹을 지정하는 속성입니다. 라디오 버튼 그룹에서는 같은 name 속성 값을 가진 버튼들이 하나의 그룹으로 인식됩니다.
value="1" : 라디오 버튼이 선택되었을 때 전송될 값을 지정합니다. 여러 개의 라디오 버튼이 있을 때, 이 속성을 통해 각 버튼에 대한 고유한 값을 설정할 수 있습니다.
스크립트 코드 입니다.
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title");
const quizQuestion = quizWrap.querySelector(".quiz__question");
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const dogWrap = quizWrap.querySelector(".dog__wrap")
// 문제 정보
const quizInfo = [
{
infoType: "웹디자인 기능사",
infoTime: "2016년 4회",
infoNumber: "1",
infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?",
infoChoice: ["선,색채,공간,수량", "점,선,면,질감", "시간,수량,구조,공간", "면,구조,공간,수량"],
infoAnswer: "2",
infoDesc: "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다.[점선면]"
}
]
// 문제 출력
function updateQuiz(){
quizTitle.innerHTML = quizInfo[0].infoType +' '+ quizInfo[0].infoTime;
quizQuestion.innerHTML = "<em>"+quizInfo[0].infoNumber+"</em>. "+ quizInfo[0].infoQuestion;
quizDesc.innerHTML = quizInfo[0].infoDesc;
for(let i=0; i<4; i++){
quizChoice[i].textContent = quizInfo[0].infoChoice[i]
}
// 해설 숨기기
quizDesc.style.display = "block"
}
updateQuiz();
// 정답 확인
function answerQuiz(){
// 사용자가 선택한 인풋박스(checked) == 문제 정답(quizInfo[0].infoAnswer)
for(let i=0; i<quizChoice.length; i++){
if(quizSelect[i].checked == true){ // 사용자가 보기를 체크한 상태
if(quizSelect[i].value == quizInfo[0].infoAnswer){
dogWrap.classList.add("like");
} else {
dogWrap.classList.add("dislike");
}
}
}
// 해설 보이기
quizDesc.style.display = "block"
// 정답 버튼 숨기기
quizConfirm.style.display ="none"
}
// 정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
//문제 출력
updateQuiz();
</script>querySelector는 문서 내에서 특정 CSS 선택자에 해당하는 첫 번째 요소를 반환하는 JavaScript의 메서드입니다.
이 메서드는 document 객체를 통해 호출됩니다. document.querySelector(selector)와 같은 형태로 사용할 수 있습니다. 이 때, selector는 CSS 선택자를 나타내는 문자열입니다.
querySelectorAll은 Document 객체의 메서드 중 하나로, 특정 CSS 선택자를 사용하여 문서 내에서 일치하는 모든 요소를 선택하는 데 사용됩니다.
이 메서드는 주어진 CSS 선택자를 사용하여 문서 내에서 일치하는 모든 요소를 선택하고 NodeList라는 정적인(non-live) NodeList 객체를 반환합니다. 반환된 NodeList 객체는 선택한 요소의 배열과 유사하지만, 배열과는 다르게 forEach()나 map()과 같은 일부 배열 메서드가 없습니다.
addEventListener()는 특정 이벤트 유형(여기서는 "click")을 감지하고, 해당 이벤트가 발생할 때 실행할 콜백 함수(여기서는 answerQuiz)를 등록하는 데 사용됩니다.