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

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

    //문제 정보
    const quizInfo = [
        {
            answerType : "javascript",
            answerNum : 1,
            answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
            answerChoice : {
                1: "html",
                2: "css",
                3: "javascript",
                4: "react"
            },
            answerResult : "3",
            answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다."
        },
        {
            answerType : "html",
            answerNum : 2,
            answerAsk : "웹 페이지를 다른 페이지로 연결하는 링크는 무엇입니까?",
            answerChoice : {
                1: "html",
                2: "css",
                3: "javascript",
                4: "Hypertext"
            },
            answerResult : "4",
            answerEx : "웹 페이지를 다른 페이지로 연결하는 링크는 Hypertext입니다."
        },
        {
            answerType : "css",
            answerNum : 3,
            answerAsk : "모든 형태의 모든 요소를 선택하는 선택자는?",
            answerChoice : {
                1: ">",
                2: "*",
                3: "all",
                4: "~"
            },
            answerResult : "2",
            answerEx : "모든 형태의 모든 요소를 선택하는 선택자는 *입니다."
        }
    ];

    //문제 출력
    function updataQuiz(){
        const html = [];

        quizInfo.forEach((question, number) => {
                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('');
        }
        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, nuber) =>  {
                const quizSelectWrap = quizSelects[number];                     //전체 보기 박스
                const userSelector = 'input[name=select${number}]:checked'; //사용자가 클릭한 것
                const userAnswer =  (quizSelectWrap.querySelector(userSelector) || {}).vlaue //클릭한 값의 속성을 가져올 수 있다
    
                if(userAnswer == question.answerResult) {
                    // console.log("정답입니다")
                    quizView[number].classList.add("like");
                    scoreCurrent++;
                }else {
                    // console.log("오답입니다")
                    quizView[number].classList.add("dislike");
                    const div = document.createElement("div");
                    quizSelectWrap.app
                }
            });
            quizResult.innerHTML = `${quizInfo.length} 문제 중에 ${scoreCurrent} 문제를 맞추었습니다`
        }

        document.querySelector(".quiz_confirm").addEventListener("click",answerQuiz);

퀴즈05 사이트