QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
자바스크립트 퀴즈(Quiz) 사이트 만들기
이번에 만들어 본 퀴즈 사이트는 전에 만든 사이트와 달리 객관식 확인하기 퀴즈 유형입니다.
퀴즈 사이트 코드
<!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">
<style>
</style>
</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="webd05-1.html">5-1</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">
<em></em>. <span></span>
</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 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>
quiz__choice 부분이 생겼습니다.
input type="radio"는 HTML에서 라디오 버튼을 나타내는 요소입니다.
라디오 버튼은 다중 선택이 가능한 체크 박스와 달리, 하나의 그룹에서 오직 하나의 선택만 가능합니다.
라디오 버튼은 input 요소 중 하나로, type 속성 값으로 "radio"를 가지며, name 속성으로 같은 그룹의 라디오 버튼들을 식별합니다. 그리고 각 라디오 버튼은 고유한 id 속성 값을 가질 수 있습니다.
객관식 선택지 4개를 만들어주기 위해서 id를 choice1부터 choice4까지 만들어줬습니다.
script 코드
<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){ //사용자가 보기를 체크한 상태
if(quizSelect[i].value == quizInfo[0].infoAnswer){
//정답
dogWrap.classList.remove("dislike");
dogWrap.classList.add("like");
quizAnswer.style.display = "none";
} else {
//오답
dogWrap.classList.remove("like");
dogWrap.classList.add("dislike");
}
}
}
//해설 보이기
quizDesc.style.display = "block";
//정답 버튼 숨기기
// quizAnswer.style.display = "none";
}
// 정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
//문제 출력
updateQuiz();
</script>
querySelector
DOM(Document Object Model)에서 특정 요소를 선택하는 메소드 중 하나입니다. CSS 선택자를 사용하여 선택된 요소를 반환합니다.
querySelectorAll
JavaScript에서 제공하는 DOM API 중 하나로, 문서 내에서 특정한 CSS 선택자를 이용하여 요소들을 찾는 메소드입니다querySelectorAll을 사용하면 CSS 선택자를 이용하여 여러 요소들을 선택할 수 있습니다.
이제 완성된 객관식 확인하기 유형 사이트를 보여드리겠습니다!
정답이 틀려도 정답을 맞힐 때까지 선택할 수 있게 해줬습니다.
강아지가 넘 귀엽죵
반응형
