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

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

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

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

    quizInfo.forEach((question, number) => {		//배열에 객체를 사용한 변수 quizInfo에 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(' ')을 사용하여 공백으로 변경
}
updateQuiz()

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) {			//사용자가 체크한 속성의 값과 문제의 답이 같으면 실행
            quizView[number].classList.add("like");
            quizView[number].classList.remove("dislike");
            scoreCurrent++;
       } else {												//사용자가 체크한 속성의 값과 문제의 답이 같지 않으면 실행
            quizView[number].classList.add("dislike");
            quizView[number].classList.remove("like");
            const div = document.createElement("div");
            //문제 박스에 div를 추가하여 설명을 출력할수 있게 해줌
            quizSelectsWrap.appendChild(div).innerHTML = `<p class="quiz__ex">${question.answerEx}</p>`;	
       }
   });
   quizResult.innerHTML = `${quizInfo.length} 문제 중에 ${scoreCurrent} 문제를 맞추었습니다.` 		//맞춘 정답 개수 출력
}
document.querySelector(".quiz__confirm").addEventListener("click", answerQuiz);	//클릭하면 함수 answerQuiz 실행

 

퀴즈 이펙트