퀴즈 사이트 만들기
지난번에 이어 퀴즈 이펙트 4번을 만들어 보겠습니다.
VS코드로 HTML, CSS, JAVASCRIPT를 이용해 사이트를 만들었습니다.
HTML
<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="quizEffect03.html">4</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="quiz__wrap">
<div class="quiz">
<div class="quize__header">
<h2 class="quiz__title"></h2>
</div>
<div class="quize__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" class="select" 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 -->
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 updateQuize(){
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<=3; 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){ //사용자가 보기를 체크한 상태
if(quizSelect[i].value == quizInfo[0].infoAnswer){
dogWrap.classList.add("like");
// alert("정답입니다.")
} else {
dogWrap.classList.add("dislike");
// alert("오답입니다.")
}
}
}
//해설 보이기
quizDesc.style.display = "block";
//정답 숨기기
quizAnswer.style.display = "none";
}
// 정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
// 문제 출력
updateQuize();
</script>
자바스크립트 설명
선택자
document.querySelector(".quiz__wrap")은 querySelector 메서드를 이용하여 HTML 문서에서 CSS 선택자 .quiz__wrap을 가진 첫 번째 요소를 선택하고, 그 요소를 quizWrap 변수에 할당합니다. 이렇게 변수에 할당된 요소는 JavaScript를 이용하여 조작할 수 있습니다.
quizWrap.querySelector(".quiz__title")은 querySelector 메서드를 이용하여 quizWrap 요소에서 CSS 선택자 .quiz__title을 가진 첫 번째 요소를 선택하고, 그 요소를 quizTitle 변수에 할당합니다. 이렇게 변수에 할당된 요소도 JavaScript를 이용하여 조작할 수 있습니다.
이 코드는 일반적으로 웹페이지에서 퀴즈와 같은 컨텐츠를 구현할 때 사용될 수 있습니다. 이를 통해, 퀴즈 영역의 타이틀 요소와 같이 필요한 요소를 JavaScript를 이용하여 조작할 수 있습니다.
문제 정보
quizInfo 변수에 배열과 배열 안에 객체를 넣어 키(infoType, infoTime...)와 인덱스 값(웹디자인 기능사, 2016년 4회)들을 저장해 주는 코드입니다.
문제 출력 데이터
퀴즈에서 선택한 답안을 확인하고, 그에 따라서 결과를 표시하고 해설을 보여주는 함수 answerQuiz()의 구현 코드입니다.
for 반복문을 이용하여 quizChoice에 담긴 모든 보기에 대해서 처리합니다. 반복문 내부에서 if 조건문을 이용하여, 사용자가 해당 보기를 선택한 경우를 확인합니다. quizSelect[i]는 quizChoice의 i번째 요소에서 선택한 input 요소를 선택합니다. checked 프로퍼티가 true인 경우, 해당 보기를 선택한 것으로 판단합니다.
그리고, 사용자가 선택한 보기가 정답인지 여부를 quizSelect[i].value == quizInfo[0].infoAnswer 조건문을 이용하여 확인합니다. quizInfo[0].infoAnswer는 HTML 문서에서 선택한 퀴즈의 정답을 가지고 있는 변수입니다.
정답 여부에 따라서, if 문과 else 문 내부에서 각각 다른 동작을 수행합니다. 정답인 경우, dogWrap 요소에 like 클래스를 추가하여 "좋아요" 이미지를 표시하고, 오답인 경우에는 dislike 클래스를 추가하여 "싫어요" 이미지를 표시합니다.
반복문 처리 이후, quizDesc 요소를 보이도록(display = "block") 설정하여, 해설을 표시하고, quizAnswer 요소는 숨기도록(display = "none") 설정하여, 정답을 가리는 기능을 수행합니다.
이 코드는 일반적으로 퀴즈나 설문조사와 같은 컨텐츠에서, 사용자가 선택한 답안을 처리하고 그에 따른 결과를 표시하고 해설을 보여주는 데에 사용될 수 있습니다.
정답 클릭
"퀴즈 확인" 버튼(quizConfirm)을 클릭했을 때, answerQuiz() 함수가 호출되도록 이벤트를 등록하는 코드입니다.
이벤트 리스너를 등록하기 위해 addEventListener() 함수를 사용합니다. 첫 번째 매개변수로는 이벤트 유형(click)을 지정하고, 두 번째 매개변수로는 이벤트가 발생했을 때 호출할 함수(answerQuiz)를 전달합니다.
따라서, 사용자가 "퀴즈 확인" 버튼을 클릭하면 answerQuiz() 함수가 호출되어, 선택한 답안에 따른 결과가 표시되고 해설이 보여지게 됩니다. 이벤트 리스너를 등록하는 것은 자바스크립트에서 매우 일반적인 패턴 중 하나입니다.
문제 출력
문제 출력 데이터부분에 저장된 데이터들을 실행하는 실행문입니다.