객관식 확인하기
HTML
주관식을 해보았으니 이번에는 객관식 유형을 작성해보도록 하겠습니다.
<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>
</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 --> * div 태그에는 "quiz__choice" 클래스가 지정되어 있습니다.
이는 CSS나 JavaScript에서 해당 영역을 조작하기 위한 식별자로 사용됩니다.
* label 태그는 각각의 선택지를 나타내는데, 이는 input 태그와 함께 사용됩니다.
* input 태그는 라디오 버튼을 생성합니다.
"type" 속성이 "radio"로 설정되어 있으며, "id", "name", "value" 속성이 지정되어 있습니다.
* "id" 속성은 각각의 라디오 버튼을 식별하기 위한 고유한 식별자입니다.
* "name" 속성은 라디오 버튼들이 그룹으로 묶이기 위한 이름입니다.
* 이 속성 값이 같은 라디오 버튼들은 같은 그룹으로 묶이며, 이 중 하나만 선택할 수 있습니다.
"value" 속성은 선택지의 값입니다.
* span 태그는 각 선택지에 대한 텍스트 또는 그림 등을 표시할 수 있습니다. 하지만 이 코드에서는 아무런 내용이 없습니다.
* 위 코드에서는 4개의 라디오 버튼이 각각 "choice1", "choice2", "choice3", "choice4"의 id 값을 갖습니다.
이러한 id 값은 label 태그의 "for" 속성에 지정됩니다. 따라서 label 태그를 클릭하면 해당 id 값을 가진 input 태그가 선택되도록 구현됩니다.
script
상단에 작성된 HTML 코드를 동적으로 제어하는 JavaScript 코드로 천천히 살펴보겠습니다.
<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<quizChoice.length; i++){
quizChoice[i].textContent = quizInfo[0].infoChoice[i];
};
};
// 해설 숨기기
quizDesc.style.display = "none";
// 정답 확인
function answerQuiz(){
// 사용자가 선택한 인풋박스(checked) == 문제 정답(quizInfo[0].infoAnswer)
for(let i=0; i<quizChoice.length; i++){
if(quizSelect[i].checked == true){ //사용자가 보기를 체크했는지 확인 (true)
if(quizSelect[i].value == quizInfo[0].infoAnswer){
// 정답
dogWrap.classList.add("like");
} else {
// 오답
dogWrap.classList.add("dislike");
}
}
}
// 해설 보이기
quizDesc.style.display = "block";
// 정답버튼 숨기기
quizAnswer.style.display = "none";
};
quizConfirm.addEventListener("click", answerQuiz);
updateQuiz(); // 문제 출력querySelector와 querySelectorAll 메서드를 사용하여 HTML 요소를 선택하고,
해당 요소의 내용을 변경하거나 이벤트 리스너를 등록합니다.
이 코드에서는 다음과 같은 요소들이 선택됩니다.
- .quiz__wrap: 퀴즈 전체 영역
- .quiz__title: 퀴즈 제목
- .quiz__question: 퀴즈 문제
- .quiz__choice span: 보기 내용
- .quiz__choice input: 보기 선택지
- .quiz__desc: 퀴즈 해설
- .quiz__answer: 정답 확인 영역
- .quiz__answer .confirm: 정답 확인 버튼
여기서 qurerySelector와 querySelecotrAll을 사용할 때 중요한 포인트가 있습니다.
qurerySelector는 인자로 전달된 CSS 선택자를 사용하여 문서에서 첫 번째로 일치하는 요소를 선택합니다.
이 말인 즉 1개만 선택한다는 이야기입니다.
querySelectorAll은 CSS 선택자와 일치하는 모든 요소를 선택합니다.
그러므로 다중으로 선택해야할 때는 반드시 querySelectorAll을 사용해야합니다.
그리고 quizInfo라는 객체 배열에 퀴즈 정보가 저장되어 있으며, updateQuiz() 함수를 호출하여 퀴즈 정보를 HTML 요소에 출력합니다.사용자가 보기를 선택하고 정답 확인 버튼을 누르면, answerQuiz() 함수가 호출되어 정답 여부를 판단하고, 해설과 함께 결과를 출력합니다.
<코드 구조>
- HTML 요소 선택
- 퀴즈 정보 저장
- 퀴즈 출력 함수 updateQuiz() 정의
- 정답 확인 함수 answerQuiz() 정의
- 해설 숨기기
- 정답 확인 버튼에 이벤트 리스너 등록
- 퀴즈 출력 함수 호출