“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
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/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"><span></span> <em></em></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="chioce" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="chioce" value="2">
<span> </span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="chioce" value="3">
<span> </span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="chioce" 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:jo0132@naver.com">jo0132@naver.com</a>
</footer>
<!-- // footer -->
</body>
</html>우선 지금까지 만들었던 퀴즈 이펙트에서 여러 가지 보기중 하나를 선택하면 선택한 답이 정답과 동일한지 비교하는 객관식입니다. 우선 label로 보기를 만드는데 for이라는 속성으로 이름들 지정합니다. 또한 value로 값을 주어 번호를 매깁니다.
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 < 4; i++){
quizChoice[i].textContent = quizInfo[0].infoChoice[i];
}
// textcontent는 텍스트만 출력 , innerHTML은 HTML요소까지 적용되어 출력합니다
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");
}
}
}
quizDesc.style.display = "block";
quizAnswer.style.display = "none";
}
//정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
updateQuiz();
</script>
우선 늘 그랬듯이 문제 정보에 키값과 원하는 정보를 객체에 저장합니다.
이때 우리는 객관식 문제를 만들기때문에 정답 선택지를 저장하기 위해 infoChoice라는 키값에 배열로 선택지를 저장합니다.
그 후 문제 출력부분에서
updateQuiz함수를 만들어 문제를 불러오는데 이때 innerHTML을 사용하여 html속성까지 불러옵니다. 하지만 문제에서 문제번호에 색상까지 넣기 위해서는 중간에 em태그를 넣어야합니다.
이번에는 다른 것이있다면 선택지를 한번에 불러 오기 위해서for문을 사용하여 값을 불러오는 것입니다. 이때 forEach문으로도 사용이 가능한데 이때 선택자를 저장한 변수인 quizChoice를 반복해서 돌리기를 원합니다. 그것을 힌트로 forEach문을 만들 수 있습니다. 한가지 실수할 수도 있는 부분이 forEach문에 el과 i를 둘다 사용하엿는데 el은 선택자들이고 i는 인덱스로 받고자하는 선택지의 값인 객체안에 배열의 값을 불러오기위한 인덱스에 넣어 값을 불러올수 있습니다.
quizChoice.forEach(function(el,i){
el.textContent = quizInfo[0].infoChoice[i];
});
// quizchoce라는 배열(위에 html에 있는 span)을 직접 지정하여 반복함
// 여기서 el은 span들 입니다.
정답확인도 저번과 동일하지만 한가지 다르다면 비교하고자하는 user의 답을 value로 받아 비교한다는 것입니다.
quizSelect[i].value == quizInfo[0].infoAnswer그 후 정답클릭이벤트를 실행하는 메서드를 사용하여 만들고
함수를 실행하고자 하는 실행문을 만들면 됩니다.