퀴즈 유형 04

04. 퀴즈 유형

객관식 문제로 답을 선택하고 정답을 확인했을 때에 true인지 false인지 구별하였습니다..

자바스크립트입니다. 객체 안에 객체를 넣어, 여러가지 보기를 보여줄 수 있게 하였습니다.

    	//선택자
        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 : "웹 디자인 기능사",
                answerNum : "1. ",
                answerAsk : "컴퓨터 그래픽스 시스템의 입력 장치로 옳지 않은 것은?",
                answerChoice : [ "빔 프로젝터" , "키보드", "마우스", "스캐너"],
                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];
        // }

        quizInfo[0].answerChoice.forEach( (e,i) => {
            quizChoice[i].textContent = quizInfo[0].answerChoice[i];
        });

        //해설 숨기기
        quizResult.style.display = "none"

        //정답확인
        function answerQuiz(){
            //사용자 선택한 정답 == 문제 정답
            //사용자가 클릭한 input --> checked

            for(let i =0; i<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) //answerQuiz를 넣어 클릭했을 때에 함수를 만들 수 있다.

       }
       updateQuiz(); 

원본 소스 보여주기