Quiz Effect 05.객관식 : 여러 문제 정답 확인하기

//설명. 참고사항.

  const quizWrap = document.querySelector(".quiz__wrap");

        //문제 정보
        const quizInfo = [
            {
                answerType : "html",
                answerNum : 1,                                                   
                answerAsk : "컨텐츠의 구조를 정의하는 마크업 언어는 무엇인가요?",
                answerChoice : {
                    1: "html",
                    2: "css",
                    3: "javascript",
                    4: "react"
                },
                answerResult : "1",
                answerEx : "컨텐츠의 구조를 정의하는 마크업 언어는 HTML 입니다."
            },
            {
                answerType : "css",
                answerNum : 2,                                                   
                answerAsk : "웹 페이지를 꾸미기위해서 사용하는 언어는 무엇입니까?",
                answerChoice : {
                    1: "html",
                    2: "css",
                    3: "javascript",
                    4: "react"
                },
                answerResult : "2",
                answerEx : "웹 페이지를 꾸미기위해서 사용하는 언어는 CSS 입니다."
            },
            {
                answerType : "javascript",
                answerNum : 3,                                                   
                answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
                answerChoice : {
                    1: "html",
                    2: "css",
                    3: "javascript",
                    4: "react"
                },
                answerResult : "3",
                answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다."
            },
                              
        ];

        //문제 출력
        function updataQuiz(){
            const html = [];
            quizInfo.forEach((question, number)=>{          //객체화 된 문제 데이터에 push기능을 써서 html 태그(뼈대)를 추가.
                html.push(`
           <div class="quiz">
                <h2 class="quiz__type">${question.answerType}</h2>
                <h3 class="quiz__question">
                    <span class="quiz__number">${question.answerNum}.</span>
                    <span class="quiz__ask">${question.answerAsk}</span>
                </h3>
                <div class="quiz__view">
                    <div class="true">정답입니다!</div>
                    <div class="false">틀렸습니다!</div>
                    <div class="dog">
                        <div class="head">
                            <div class="ears"></div>
                            <div class="face"></div>
                            <div class="eyes">
                                    <div class="teardrop"></div>
                            </div>
                            <div class="nose"></div>
                            <div class="mouth">
                                    <div class="tongue"></div>
                            </div>
                            <div class="chin"></div>
                        </div>
                        <div class="body">
                            <div class="tail"></div>
                            <div class="legs"></div>
                        </div>
                      </div>
                </div>
                <div class="quiz__answer">
                    <div class="quiz__selects">
                        <label for="select1${number}">
                            <input class="select" type="radio" id="select1${number}" name="select${number}" value="1">
                            <span class="choice">${question.answerChoice[1]}</span>
                        </label>
                        <label for="select2${number}">
                            <input class="select" type="radio" id="select2${number}" name="select${number}" value="2">
                            <span class="choice">${question.answerChoice[2]}</span>
                        </label>
                        <label for="select3${number}">
                            <input class="select" type="radio" id="select3${number}" name="select${number}" value="3">
                            <span class="choice">${question.answerChoice[3]}</span>
                        </label>
                        <label for="select4${number}">
                            <input class="select" type="radio" id="select4${number}" name="select${number}" value="4">
                            <span class="choice">${question.answerChoice[4]}</span>
                        </label>                       
                    </div>                                
                </div>
            </div>
           `)
            });

            html.push(`                                
                <div class="quiz_btn">
                <button class="quiz__confirm">정답 확인하기</button>
                <div class="quiz__result"></div>
                </div>
            `)                  
           quizWrap.innerHTML = html.join(''); //배열화 된 데이터의 나열 중에 있는 쉼표,공백을 join으로 제거.
        }
        updataQuiz();

        function answerQuiz(){
            const quizSelects = document.querySelectorAll(".quiz__selects");    //보기 선택 박스
            const quizView = document.querySelectorAll(".quiz__view");          //보기 선택 박스
            const quizResult = document.querySelector(".quiz__result");         //퀴즈 정답 박스

            let scoreCurrent = 0;
            
            quizInfo.forEach((question, number) => {
                const quizSelectsWrap = quizSelects[number];                                  //전체 보기 박스 
                const userSelector = `input[name=select${number}]:checked`;                   //사용자가 클릭한것
                const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value  //클릭한 값의 속성 값을 가져옮

                if(userAnswer == question.answerResult){                                    //클릭한 값의 속성과 문제의 답 번호가 같으면
                    //console.log("정답입니다.")
                    quizView[number].classList.add("like");                                 //quizView에 like 클래스 추가
                    scoreCurrent++;                                                         //현재 정답 갯수에 ++;
                } else {
                    //console.log("오답입니다.")
                    quizView[number].classList.add("dislike");                      //속성과 문제의 답이 다르면 dislike 추가
                    const div = document.createElement("div");                      //div 박스 생성 변수화.
                    quizSelectsWrap.appendChild(div).innerHTML = `<p class="quiz__ex">${question.answerEx}</p>`;    //문제 박스에 div 박스를 추가, 설명을 출력.
                }
            });
            quizResult.innerHTML = `${quizInfo.length} 문제 중에 ${scoreCurrent} 문제를 맞추었습니다.`;     //맞춘 정답의 갯수도 출력.
        }

        document.querySelector(".quiz__confirm").addEventListener("click", answerQuiz);     //정답 확인 버튼을 클릭하는 함수 실행.

 

이번 예제는 여러문제 객관식 맞추기 예제 입니다. 

html 내에서의 태그를 최소화 하기위해서 

문제의 기본틀이 되는 html 요소를 객체화 시켜서 변수로 작업합니다. 이 과정에서 백틱 기호를 사용해서 좀 더 작업하기 수월하게 해줍니다. 여기서는 push() 메서드를 사용합니다. 

그리고 quizInfo에 데이터를 순서에 맞게 대입해줍니다. 

 

핵심은 배열화 된 데이터를 파악 후 순서를 신경쓰며 작업해야 합니다.