Quiz Effect - 여러개의 객관식 정답 확인

const quizWrap = document.querySelector(".quiz__wrap"); //quizWrap(퀴즈박스전체)를 읽어옴
        

//문제 정보를 배열 안 객체 형태로 저장(3문제)
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의 길이만큼 문자열로 문제박스 생성
    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태그에 해당 문자열 삽입, join 메서드로 배열 출력 시 생기는 반점 제거
    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`;         //사용자가 클릭한 것, name속성 값이 select${number}인 input이 checked된 것
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;   //보기 박스에서 사용자가 클릭한 input의 value(숫자) 혹은 아무것도 클릭 안했을때의 value

        if(userAnswer == question.answerResult){    //클릭한 제시 답안의 value와 quizInfo의 answerResult값이 같으면
            //console.log("정답입니다.");
            quizView[number].classList.add("like"); //해당 퀴즈 박스의 강아지 애니메이션을 like로 변경
            scoreCurrent++;     //점수 1점 증가
        }else{      //클릭한 제시 답안의 value와 quizInfo의 answerResult값이 다르면
            //console.log("오답니다.");
            quizView[number].classList.add("dislike");  //해당 퀴즈 박스의 강아지 애니메이션을 dislike로 변경
            const div = document.createElement("div");  //<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);     //확인 박스 클릭 시 answerQuiz 함수 실행

 

퀴즈 이펙트 여러문제 객관식 정답확인 사이트