04. 객관식 : 정답 확인하기

    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", "react"],
                answerResult : "1",
                answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다."
            }
        ];

        //문제 출력
        function updateQuiz() {
            //타입, 문제, 정답, 보기 채워주기
            for(i in quizInfo){
                quizType.textContent = quizInfo[i].answerType;
                quizNumber.textContent = quizInfo[i].answerNum;
                quizAsk.textContent = quizInfo[i].answerAsk;
                quizResult.textContent = quizInfo[i].answerEx;

                for (let j = 0; j < 4; j ++){
                    quizChoice[j].textContent = quizInfo[0].answerChoice[j];
                }
            }
            //해설 감추기
            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");
                        quizConfirm.style.display = "none";
                    } else {
                        //오답
                        quizView.classList.add("dislike");
                        quizConfirm.style.display = "none";
                        quizResult.style.display = "block";
                }
            }
        }
    }
        quizConfirm.addEventListener("click", answerQuiz);

퀴즈04 사이트