quizEffect05 - JS로 퀴즈 내기

JS 구성

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 입니다."
    },
    {
        answerType : "react",
        answerNum : 4 + ". ",
        answerAsk : "이때까지 나오지 않은 정답은 무엇인가요?",
        answerChoice : {1: "html",
                        2: "css",
                        3: "javascript",
                        4: "react"},
        answerResult : "4",
        answerEx : "이때까지 나오지 않은 것은 react 입니다."
    }
];

//문제 출력
function updateQuiz(){
    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" name="select${number}" id="select1${number}" value="1">
                            <span class="choice">${question.answerChoice[1]}</span>
                        </label>
                        <label for="select2${number}">
                            <input class="select" type="radio" name="select${number}" id="select2${number}" value="2">
                            <span class="choice">${question.answerChoice[2]}</span>
                        </label>
                        <label for="select3${number}">
                            <input class="select" type="radio" name="select${number}" id="select3${number}" value="3">
                            <span class="choice">${question.answerChoice[3]}</span>
                        </label>
                        <label for="select4${number}">
                            <input class="select" type="radio" name="select${number}" id="select4${number}" value="4">
                            <span class="choice">${question.answerChoice[4]}</span>
                        </label>
                    </div>
                </div>
            </div>
        `)
    }); //html을 자바스크립트 처리

    html.push(`
        <div class="quiz__btn">
            <button class="quiz__confirm">정답 확인하기</button>
            <div class="quiz__result"></div>
        </div>
    `); // 정답 확인하기를 따로 빼기

    quizWrap.innerHTML = html.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){
            // console.log("정답");
            quizView[number].classList.add("like"); // 정답 표정
            scoreCurrent++; //정답 갯수 +1 처리
        } 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://sungilryuu.github.io/webs_class/javascript/effect/quizEffect05.html