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>퀴즈 이펙트04</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 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 -->
<footer id="footer">
<a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>
<!-- //footer -->
<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"); //All 다중
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input"); //All 다중
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 < 4; 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){
//alert("정답")
dogWrap.classList.add("like")
} else {
//alert("오답")
dogWrap.classList.add("dislike")
}
} else {
// alert("체크를 해주세요!")
}
}
//해설 보이기
quizDesc.style.display = "block";
//정답 숨기기
quizAnswer.style.display = "none";
}
// 정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
//문제출력
updateQuiz();
</script>
</body>
</html>우선 css에 quiz__choice 에있는 radio타입의 버튼을 없애주고, 새로운 버튼 만들어 주었습니다.
.quiz__choice {
padding: 20px;
border-bottom: 6px ridge #cacaca;
font-family: "SCoreDream";
}
.quiz__choice label {
display: flex;
}
.quiz__choice label input {
position: absolute; //블라인드 처리
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden
}
.quiz__choice label span {
font-size: 20px;
line-height: 1.4;
padding: 6px;
display: flex;
cursor: pointer;
margin: 2px 0;
}
.quiz__choice label span::before {
content: '';
width: 26px;
height: 26px;
border-radius: 50%;
margin-right: 15px;
background: #fff;
box-shadow: inset 0 0 0 4px #fe6a00;
transition: all 0.2s;
flex-shrink: 0;
}
.quiz__choice label input:checked + span {
background-color: #f5f5f5;
}
.quiz__choice label input:checked + span::before {
box-shadow: inset 0 0 0 8px #fe6a00;;
저번에 했던 퀴즈 이펙트와 같이 선택자를 만들어 줍니다.
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"); //All 다중
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input"); //All 다중
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 < 4; i++){
quizChoice[i].textContent = quizInfo[0].infoChoice[i];
}
//해설 숨기기
quizDesc.style.display = "none";
}문제 출력은 저번과 동일하게 선택자에 넣어야 할 내용을 문제 정보에서 가져오고 있습니다.
객관식 문제를 풀기 위한 선택지는 for문을 이용해 반복하여 넣어 주고 있습니다.
그리고 해설을 숨기기 위해 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){
//alert("정답")
dogWrap.classList.add("like")
} else {
//alert("오답")
dogWrap.classList.add("dislike")
}
} else {
// alert("체크를 해주세요!")
}
}
//해설 보이기
quizDesc.style.display = "block";
//정답 숨기기
quizAnswer.style.display = "none";
}
// 정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
//문제출력
updateQuiz();정답 확인을 위해 for문을 이용해 선택지를 읽고 if문을 이용해 선택지가 체크 되어있는지 확인하기 위해 "checked"를 이용 합니다.
체크가 되어있을때, 다중if문을 이용해 사용자가 선택한 문제의 답과 진짜 답을 비교 하여 정답과 오답을 나눕니다.
그후 해설은 보이게 해주시고 정답확인 버튼은 사라지게 해주고
문제 출력을 위해 updateQuiz();를 이용해 updateQuiz의 함수를 출력하고, 정답 확인하기를 눌렀을때 answerQuiz의 함수가 실행 될수 있게 해줍니다.
| checked | 폼(form)에서 체크박스(checkbox), 라디오버튼(radio button), 옵션(option) 요소(element)가 선택되었는지 여부를 나타내는 부울(Boolean) 속성입니다. "checked" 속성이 있고 true로 설정되면 해당 요소는 선택되거나 선택 상태가 됩니다. 반대로 false로 설정되거나 없으면 해당 요소는 선택되지 않거나 선택 상태가 아닙니다. |
강아지 이미지 출처: 좋아요! 싫어요!가 분명한 강아지 애니메이션