quiz04

quiz04

문제의 답<보기>가 4개가 있는 객관식 구조이다.

 

●답<보기>가 4개 여서 quiz__answer 밑에 quiz__selects 추가한다.

&ltdiv class="quiz__selects">&lt/div>
&ltdiv class="quiz__selects">
&ltlabel for="select1">
&ltinput type="radio" id="select1" class="select" name="select" value="1">
&ltspan class="choice">&lt/span>
&lt/label>
&ltlabel>
&ltinput type="radio" id="select2" class="select" name="select" value="2">
&ltspan class="choice">&lt/span>
&lt/label>
&ltlabel>
&ltinput type="radio" id="select3" class="select" name="select" value="3">
&ltspan class="choice">&lt/span>
&lt/label>
&ltlabel>
&ltinput type="radio" id="select4" class="select" name="select" value="4">
&ltspan class="choice">&lt/span>
&lt/label>
&lt/div>

선택자

 

const quizType = document.querySelector(".quiz__type");   //퀴즈종류
const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈번호
const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문
const quizConfirm = document.querySelector(".quiz__answer .confirm"); //정답확인버튼
const quizResult = document.querySelector(".quiz__answer .result"); //정답결과
const quizview = document.querySelector(".quiz__view"); //강아지
const quizSelects = document.querySelector(".quiz__selects"); //객관식보기
const quizChoice = quizSelects.querySelectorAll(".choice"); //객관식보기
const quizSelect = quizSelects.querySelectorAll(".select"); //객관식보기

문제정보

 const quizInfo = [
{
answerType: "웹디자인기능사 2022년 01회",
ansWerNum: "1",
answerAsk: "분신, 화신이라는 의미로 채팅, 온라인 게임 등 네트워크 환경에서 자신을 대신하여 커뮤니케이션에 참여하는 가상의 그림 또는 아이콘을 뜻하는 인터넷 용어는?",
answerChoice: ["아바타", "쿠키", "포털", "허브"],
answerResult: "1",
answerEx: "분신, 화신이라는 의미로 채팅, 온라인 게임 등 네트워크 환경에서 자신을 대신하여 커뮤니케이션에 참여하는 가상의 그림 또는 아이콘을 뜻하는 인터넷 용어는 아바타라고 한다."
}
];

문제출력

for이 충돌할수도 있어서... function updateQuiz 를 써서 한덩어리로 묶어준다.

function updateQuiz() {
quizType.textContent = quizInfo[0].answerType;
quizNumber.textContent = quizInfo[0].ansWerNum + ". ";
quizAsk.textContent = quizInfo[0].answerAsk;
quizResult.textContent = quizInfo[0].answerEx;
//보기출력
for (let i = 0; i &lt 4; i++) {
quizChoice[i].textContent = quizInfo[0].answerChoice[i];
}
//해설 숨기기
quizResult.style.display = "none";
}
updateQuiz();

정답 확인 버튼

 

function answerQuiz() {
//사용자 선택한 정답 == 문제정답
//사용자가 클릭한 iuput --> checked
for (let i = 0; i &lt quizSelect.length; i++) {
if (quizSelect[i].checked == true) { //보기에 체크가 된 상태
//체크된 번호 == 문제번호가 일치하는지..
if (quizSelect[i].value == quizInfo[0].answerResult) {
// alert("정답")
quizview.classList.add("like");
} else {
// alert("오답")
quizview.classList.add("dislike");
quizResult.style.display = "block";
quizConfirm.style.display = "none";
}
}
}
}

정답 클릭

quizConfirm.addEventListener("click", answerQuiz);

원본 소스 보기