728x90
반응형
객관식 유형(여러개)
지난 포스팅에 이어서 객관식 유형을 여러개 추가해보도록 하겠습니다.
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/quiz.css">
<link rel="stylesheet" href="css/reset.css">
<link href="https://unpkg.com/pattern.css" rel="stylesheet">
</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><a href="quizEffect04.html">4</a></li>
<li class="active"><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 -->
<footer id="footer">
<a href="mailto:dripidea77@gmail.com">dripidea77@gmail.com</a>
</footer>
<!-- //footer -->
구조
기본적인 HTML을 띄고 있습니다. main 안의 구조를 살펴보겠습니다.
- quiz__wrap : 퀴즈 창 전체를 뜻합니다. 가장 상위에 있는 박스입니다.
- quiz__header : 퀴즈의 머리 부분을 뜻합니다.
- quiz__title : 제목을 의미하는 것으로 이 스크립트 내에서는 '정보처리기능사'와 '시험 날짜'를 의미합니다.
- quiz__question : 퀴즈의 질문입니다.
- dog__wrap : 정답에 따라 달라지는 개의 얼굴입니다.
- quiz__choice : 사용자가 선택하게 되는 객관식의 목록입니다.
- quiz__desc : 문제에 대한 설명입니다.
퀴즈의 핵심이 되는 것들이 포함되어 있습니다. 이것들을 선택자로 바꾸어, 함수를 사용해 다중의 문제를 출력합니다.
Script
<script>
// 문제 정보 choice를 객체 안의 객체로 작성한 경우
const quizInfo = [
{
infoType : "정보처리기능사",
infoTime : "2008년 2회",
infoNumber : "20080201",
infoQuestion : "다음 논리회로에서 출력 f의 값은? <img style ='width:200px' src='../assets/data img/image_01.jpg' alt='image_01.jpg'>",
infoChoice : {
1:"-1",
2:"0",
3:"1/2",
4:"1",
},
infoAnswer : "4",
infoDesc : "1 AND 1 = 1<br>1 AND 0 = 0<br>1 OR 0 = 1이므로 최종 출력은 1그리고 게이트 문제에서 출력은 무조건 0 아니면 1입니다. 1/2 또는 -1, -2 등은 답이 될수 없습니다."
},
// 문제 정보 입력
const updateQuiz =() => {
const exam = [];
quizInfo.forEach((qusestion, number) => {
exam.push(`
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title">${qusestion.infoType} ${qusestion.infoTime}</h2>
</div>
<div class="quiz__main">
<div class="quiz__question"><em>${number+1}</em>. ${qusestion.infoQuestion}</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${number}">
<input type="radio" id="choice1${number}" name="choice${number}" value="1">
<span>${qusestion.infoChoice[1]}</span>
</label>
<label for="choice2${number}">
<input type="radio" id="choice2${number}" name="choice${number}" value="2">
<span>${qusestion.infoChoice[2]}</span>
</label>
<label for="choice3${number}">
<input type="radio" id="choice3${number}" name="choice${number}" value="3">
<span>${qusestion.infoChoice[3]}</span>
</label>
<label for="choice4${number}">
<input type="radio" id="choice4${number}" name="choice${number}" value="4">
<span>${qusestion.infoChoice[4]}</span>
</label>
</div>
<div class="quiz__desc">정답은<em>${qusestion.infoAnswer}</em>번 입니다.<br>${qusestion.infoDesc}</div>
</div>
</div>
`);
});
exam.push(`
<div class="quiz__info">??점</div>
<div class="quiz__check">정답 확인</div>
`);
quizWrap.innerHTML = exam.join("");
// 설명 숨기기
// #1
// document.querySelectorALL(".quiz__desc").forEach((el) => {
// el.style.display = "none";
// });
// #2
document.querySelectorAll(".quiz__desc").forEach(el => el.style.display = "none");
}
updateQuiz();
// 정답 확인 *화살표 함수
const answerQuiz = () => {
const quizChoices = document.querySelectorAll(".quiz__choice");
//사용자가 체크한 정답 == 문제 정답 *화살표 함수
quizInfo.forEach((qusestion, number) => {
const userSelector = `input[name = choice${number}]:checked`;//``안의 내용은 사용자가 체크한 목록
const quizSelectorWrap = quizChoices[number];
const userAnswer = (quizSelectorWrap.querySelector(userSelector)||{}).value;
const dogWrap = quizWrap.querySelectorAll(".dog__wrap");
if(userAnswer == qusestion.infoAnswer){
console.log("정답");
dogWrap[number].classList.add("like");
quizScore++;
} else {
console.log("오답");
dogWrap[number].classList.add("dislike");
}
});
// 설명 보이기
document.querySelectorAll(".quiz__desc").forEach(el => el.style.display = "block");
// 점수 보이기
document.querySelector(".quiz__info").innerHTML = Math.ceil((quizScore / quizInfo.length) * 100) + "점";
}
// 정답 클릭
document.querySelector(".quiz__check").addEventListener("click", answerQuiz);
</script>- quizInfo라는 배열 변수에 퀴즈 정보를 저장합니다. 각 퀴즈 정보는 객체 형태로 저장되며, 객체에는 문제, 선택지 및 정답이 포함됩니다.
- updateQuiz() 함수는 quizInfo 배열 변수를 참조하여 HTML 요소를 생성하여 브라우저에 출력합니다. 이 함수는 exam 배열 변수를 사용하여 문제, 선택지 및 설명을 생성하고, 이를 quizWrap이라는 HTML 요소에 삽입합니다. 또한, document.querySelectorAll(".quiz__desc")를 사용하여 모든 설명을 숨깁니다.
- answerQuiz() 함수는 사용자가 선택한 답안과 정답을 비교하여 점수를 계산합니다. 또한, 사용자가 선택한 답안이 정답인 경우 like 클래스를 추가하여 특정 이미지를 보여주고, 그렇지 않은 경우 dislike 클래스를 추가하여 다른 이미지를 보여줍니다. 마지막으로, 모든 설명을 보여주고 점수를 계산하여 quiz__info 클래스를 가진 HTML 요소에 출력합니다.
- document.querySelector(".quiz__check").addEventListener("click", answerQuiz)는 HTML 요소에서 quiz__check 클래스를 가진 요소를 찾아 클릭 이벤트가 발생하면 answerQuiz() 함수가 실행되도록 합니다. 이것은 정답 확인 버튼을 누르면 answerQuiz() 함수가 호출되어 퀴즈 결과가 표시되도록 합니다.