Quiz Effect05 - 객관식 : 여러문제 정답 확인

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: "react"
        },
        answerResult : "1",
        answerEx : "웹 페이지를 표현하기 위한 마크업 언어는 HTML입니다."
    },
    {
        answerType : "css",
        answerNum : 3,
        answerAsk : "웹 페이지를 꾸미기 위해서 사용하는 언어는 무엇인가요?",
        answerChoice : {
            1: "html",
            2: "css",
            3: "javascript",
            4: "react"
        },
        answerResult : "2",
        answerEx : "웹 페이지를 꾸미기 위해서 사용하는 언어는 css입니다."
    }
];

//문제 출력
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, 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");
            scoreCurrent++;
        } else {
            // console.log("오답입니다.")
            quizView[number].classList.add("dislike");
            const div = document.createElement("div");
            quizSelectsWrap.appendChild(div).innerHTML = `<p class="quiz__ex">${question.answerEx}</p>`;
        }
    });
    quizResult.innerHTML = `${quizInfo.length} 문제 중에 ${scoreCurrent} 문제를 맞추었습니다.`
}

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

https://jiseonpack.github.io/webs_class/javascript/effect/quizEffect05.html

퀴즈 이펙트