Quiz Effect04 - 객관식 : 정답 확인

const quiz = document.querySelector(".quiz");
const quizType = document.querySelector(".quiz__type");         //문제 유형
const quizNumber = document.querySelector(".quiz__number");     //문제 번호
const quizAsk = document.querySelector(".quiz__ask");           //문제 질문
const quizConfirm = document.querySelector(".quiz__confirm");   //문제 정답 버튼
const quizResult = document.querySelector(".quiz__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 : "javascript",
        answerNum : 1,
        answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
        answerChoice : ["javascript", "html", "css", "jquery"],
        answerResult : "1",
        answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다."
    }
];
//문제 출력
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<4; i++){
        quizChoice[i].textContent = quizInfo[0].answerChoice[i];
    }
    //설명 감추기
    quizResult.style.display = "none";
}
updateQuiz();
//정답 확인
function answerQuiz() {
    //사용자가 클릭한 input --> checked : 사용자가 선택한 정답
    //객체 안에 정답
    for(let i = 0; i <quizSelect.length; i++){
        if(quizSelect[i].checked == true){
            if(quizSelect[i].value == quizInfo[0].answerResult){
                //정답
                quizView.classList.add("like");
                quizResult.style.display = "none";
                quizConfirm.style.display = "none";
            } else {
                //오답
                quizView.classList.add("dislike");
                quizResult.style.display = "block";
                quizConfirm.style.display = "none";
            }
        }
    }
}
quizConfirm.addEventListener("click", answerQuiz)

https://jiseonpack.github.io/webs_class/javascript/effect/quizEffect04.html

퀴즈 이펙트