문제 04

객관식 퀴즈

웹디자인기능사 대비 퀴즈 프로그램을 만들어 풀어보려 합니다.
이번에는 객관식 문제입니다.
querySelector와 querySelectorAll을 통해 저장된 값들을 선택하며 for문이나 forEach문을 이용하여 편리하게 출력합니다.
+ updateQuiz 함수를 만들어서 문제출력과 해설숨기기를 묶어놓고 실행 시킵니다.
+ answerQuiz 함수를 만들어서 정답확인에 대한 값을 묶어 담습니다.
+ addEventListener함수 안에 answerQuiz함수를 넣어주어 정답 확인하기를 클릭할때 실행시켜줍니다.

---

문제 04

정답을 맞출 경우 강아지가 웃으며 정답입니다 문구가 나옵니다.
오답의 경우 강아지가 울며 틀렸습니다 문구가 나옵니다.
맞출 경우 해설이 나오지 않으며, 틀릴경우 해설을 보여줍니다.

원본 소스 보기

Javascript 코드

선택자, 문제정보, 문제출력, 보기출력, 정답확인 및 맞춰보기 단계로 구성되어 있습니다.

{
    //선택자
    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 quizInput = document.querySelector(".quiz__answer .input");           //사용자 정답
    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 : "웹디자인기능사 2016년 01회",
            answerNum : "1",
            answerAsk : "디자인 원리 중 리듬(rhythm)의 요소와 거리가 먼 것은?",
            answerChoice : ["대칭", "점증", "반복", "강조"],
            answerResult : "1",
            answerEx : "디자인 원리 리듬의 요소에는 점증, 반복, 강조가 있다."
        }   
    ]
    //문제 출력
    // 문제 출력, 해설숨기기 묶어서updateQuiz에 담기
    function updateQuiz(){
        quizType.textContent =quizInfo[0].answerType;
        quizNumber.textContent = quizInfo[0].answerNum + ". ";
        quizAsk.textContent = quizInfo[0].answerAsk;
        quizResult.textContent = quizInfo[0].answerEx;
        // quizInfo객체 하나밖에 없으니 배열0번
        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){
                   // alert("정답");
                   quizView.classList.add("like"); // 강아지 웃음
                } else {
                   // alert("오답");
                    quizView.classList.add("dislike");   // 강아지 슬픔
                    quizResult.style.display = "block";  // 정답 보여주기
                    quizConfirm.style.display = "none";  // 정답 확인하기 박스제거
                }
            } 
        }
    }

    //정답 클릭
    quizConfirm.addEventListener("click", answerQuiz); //만들어둔 함수실행