728x90
반응형
여러 문제 확인하기 유형에 대해 알아 봅시다
<!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>퀴즈 이펙트05</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><a href="quizeffect04.html">4</a></li>
<li class="active"><a href="quizeffect05.html">5</a></li>
<li><a href="quizeffect06.html">6</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:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>
<script>
// 문제 정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2008년 1회",
infoNumber: "20080101",
infoQuestion: "101101<small>(2)</small>의 2의 보수는 얼마인가?",
infoChoice: {
1: "110111<small>(2)</small>",
2: "110001<small>(2)</small>",
3: "111000<small>(2)</small>",
4: "010011<small>(2)</small>"
},
infoAnswer: "4",
infoDesc: "2의 보수로 바로 바꾸는 방법은 오른쪽 끝에서부터 처음 1을만날때까지는 똑같이 적고 나머지는 1의보수 바꾸는 방식대로 0은 1로 1은 0으로 바꾸어 주면 됩니다."
},{
infoType: "정보처리 기능사",
infoTime: "2008년 1회",
infoNumber: "20080102",
infoQuestion: "불 대수의 정리 중 옳지 않은 것은?",
infoChoice: {
1: "A + A = 1",
2: "A· A = A",
3: "1 + A = 1",
4: "A· 1 = A"
},
infoAnswer: "1",
infoDesc: "A + A = A 입니다."
},{
infoType: "정보처리 기능사",
infoTime: "2008년 1회",
infoNumber: "20080103",
infoQuestion: "명령어 구성에서 연산자의 기능에 해당하지 않는 것은?",
infoChoice: {
1: "입· 출력기능",
2: "주소지정기능",
3: "제어기능",
4: "함수연산기능"
},
infoAnswer: "2",
infoDesc: "명령어 = 명령어 코드부 + 명령어 주소부 Instruction = Op_Code + Operand 연산자란 명령어 코드부를 이야기 하므로 주소지정 기능은 없 습니다. 주소지정 기능은 명령어 주소부에 해당 합니다.",
}
]
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
let quizScore = 0;
//문제출력
const updateQuiz = () => {
const exam = [];
quizInfo.forEach((question, number) =>{
exam.push(
`<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title">${question.infoType} ${question.infoTime}</h2>
</div>
<div class="quiz__main">
<div class="quiz__question"><em>${number+1}</em>. ${question.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>${question.infoChoice[1]}</span>
</label>
<label for="choice2${number}">
<input type="radio" id="choice2${number}" name="choice${number}" value="2">
<span>${question.infoChoice[2]}</span>
</label>
<label for="choice3${number}">
<input type="radio" id="choice3${number}" name="choice${number}" value="3">
<span>${question.infoChoice[3]}</span>
</label>
<label for="choice4${number}">
<input type="radio" id="choice4${number}" name="choice${number}" value="4">
<span>${question.infoChoice[4]}</span>
</label>
</div>
<div class="quiz__desc">정답은 <em>${question.infoAnswer}</em>번 입니다.<br>${question.infoDesc}</div>
</div>
</div>`)
});
exam.push(`
<div class="quiz__info">??점</div>
<div class="quiz__check">정답 확인</div>
`)
quizWrap.innerHTML = exam.join('');
//설명 숨기기
document.querySelectorAll(".quiz__desc").forEach(el => el.style.display = "none");
}
updateQuiz();
//정답 확인
const answerQuiz = () => {
const quizChoices = document.querySelectorAll(".quiz__choice");
//시용자가 체크한 정답 == 문제 정답
quizInfo.forEach((question, 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 == question.infoAnswer){
// alert("정답")
dogWrap[number].classList.add("like");
quizScore++;
} else {
// alert("오답")
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>
</body>
</html>이제는 body에 직접 html에 적는게 아닌 문제를 push()를 이용해 html을 넣어 줄거기 때문에 body부분은 다 주석처리를 해주었습니다.
우선 quiz__wrap에 html에 적었던 문자열을 넣어주기 위해 quiz__wrap의 선택자를 만들어 줍니다.
그후 익명함수 updateQuiz를 실행시킨후 그안에 상수를 만들어 exam에 배열안에 객체를 저장한 quizinfo를 넣은 quizWrap을 반복하기 위해 forEach문을 사용하였고 push를 와 (`) 키를 이용해 html에 주석으로 표시한 곳을 복사해 가져와 배열안에 객체인 quizinfo를 넣어야 할 곳에 "${}"를 하여 넣어주면 저장했던 quizinfo들의 값(question)을 가져와 반복합니다.그
그후 정답 체크에 사용자가 체크한 정답과 실제 정답을 비교 하기위해 사용자가 체크한 것을 number로 가져오고 value 값으로 해줍니다. 그러면 info에 있는 실제값과 value갑이 같으면 정답 아니면 오답을 출력합니다.
그리고 클릭을 할때 정답을 체크 할수 있게 해줍니다.
※템플릿 리터럴
백틱(` `)으로 문자열을 감싸고, 변수 또는 표현식을 ${ } 안에 삽입하여 문자열을 편리하게 작성할 수 있습니다.
※정리
| push() | 자바스크립트 배열 객체의 메서드 중 하나로, 배열의 끝에 하나 이상의 요소를 추가합니다. |
| join() | javaScript 배열 객체의 메서드 중 하나로, 배열의 모든 요소를 하나의 문자열로 결합합니다. |
| Math.ceil() | 주어진 숫자를 소수점 이하에서 가장 가까운 큰 정수로 올림하는 함수입니다. |
| checked | HTML의 `input` 요소에서 사용되는 속성 중 하나로, 해당 `input` 요소가 체크되어 있는지 여부를 나타냅니다. |