Quiz Effect - 객관식 정답 확인

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");     //객관식 보기(input)
const quizSelect = quizSelects.querySelectorAll(".select");     //객관식 보기(4개의 제시 답안)

//문제 정보
const quizInfo = [
    {
        answerType : "javascript",
        answerNum : 1,
        answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
        answerChoice : ["javascript", "html", "css", "jquery"], //4개의 제시 답안, 배열 안 객체 안 배열로 저장되어있다.
        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;

    //4개의 제시 답안을 입력한다.
    for(let i=0; i<quizInfo[0].answerChoice.length; 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){    // value(번호)와 문제정보의 답안번호와 일치하면
                //정답
                quizView.classList.add("like");     //강아지 like애니메이션
                quizConfirm.style.display = "none"; //확인 버튼 감추기
            } else {         // value(번호)와 문제정보의 답안번호와 불일치하면
                //오답
                quizView.classList.add("dislike");  //강아지 dislike애니메이션
                quizResult.style.display = "block"; //문제 설명 보이기
                quizConfirm.style.display = "none"; //확인 버튼 감추기
            }
        }
    }
}
quizConfirm.addEventListener("click", answerQuiz)   //quizConfirm에 클릭이벤트가 발생하면 answerQuiz 함수 실행

 

퀴즈 이펙트 객관식 정답 확인 사이트