Script effect/quiz effect

javascript - quiz effect04 : 객관식 : 정답 확인하기

개발자가되고싶은자 2022. 2. 22. 18:53

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 quizInput = document.querySelector(".quiz__input"); //사용자 정답
        const quizSelects = document.querySelector(".quiz__selects"); //객관식 보기 //사용자 정답
        const quizChoice = document.querySelectorAll(".choice"); //객관식 보기 //사용자 정답
        const quizSelect = document.querySelectorAll(".select"); //객관식 보기 //사용자 정답
   
        const quizInfo = [{
                answerType: "Javascript",
                answerNum: 1,
                answerAsk: "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
                answerChoice: ["javscript", "html", "css", "jquery"],
                answerResult: "1",
                answerEx: "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트 입니다."
            }
            ];

            //문제 출력
            function updataQuiz(){
                //타입, 문제, 정답, 보기
             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";
            }
            updataQuiz();

            //정답 확인
            function answerQuiz(){
                //사용자가 클릭한 input --> checked : 사용자가 성택한 정답 == 정답
                for( let i=0; i