Quiz 05

Quiz 05

이번 시간에는 총 60문제를 코딩하면서 만들어봤습니다.

원본 사이트 보기

자바스크립트

데이터 값의 입력과 함수와 forEach문을 사용했습니다.
이번에는 정답 확인 시에 모든 문제에 대한 풀이와 해설이 나오도록 설정했으며,
마지막에는 맞춘 갯수가 나오도록 설정했습니다.

코드 보기

    // 선택자
    const quizWrap = document.querySelector(".quiz__wrap");
    let quizScore = "";

    // 문체 출력
    const updateQuiz = () => {
        const exam = [];
        quizInfo.forEach((question, number) => {
            exam.push(`
                <div class="quiz">
                    <span class="quiz__type">${question.answerType}</span>
                    <h2 class="quiz__question">
                        <span class="number">${question.answerNum}. </span>
                        <div class="ask">${question.answerAsk}</div>
                    </h2>
                    <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 type="radio" id="select1${number}" class="select" name="select${number}" value="1">
                                <span class="choice">${question.answerChoice[1]}</span>
                            </label>
                            <label for="select2${number}">
                                <input type="radio" id="select2${number}" class="select" name="select${number}" value="2">
                                <span class="choice">${question.answerChoice[2]}</span>
                            </label>
                            <label for="select3${number}">
                                <input type="radio" id="select3${number}" class="select" name="select${number}" value="3">
                                <span class="choice">${question.answerChoice[3]}</span>
                            </label>
                            <label for="select4${number}">
                                <input type="radio" id="select4${number}" class="select" name="select${number}" value="4">
                                <span class="choice">${question.answerChoice[4]}</span>
                            </label>
                        </div>
                    </div>
                </div>
            `);
        });

        exam.push(`
                <div class="quiz__confirm">
                    <button class="check">정답 확인하기</button>
                    <div class="ex"></div>
                </div>
        `);
        quizWrap.innerHTML = exam.join('');
    }
    updateQuiz();

    // 정답 확인
    const answerQuiz = () => {
        const quizSelects = document.querySelectorAll(".quiz__selects");    // 객관식

        // 사용자가 체크한 보기 == 문제 정답
        quizInfo.forEach((question, number) => {
            const quizSelectsWrap = quizSelects[number];                    
            const userSelector = `input[name=select${number}]:checked`;         // 사용자가 체크한 것
            const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value    // 정답 체크를 안했어도 or를 이용해 출력한다.
            const quizView = document.querySelectorAll(".quiz__view");     // 강아지
            
            console.log(userAnswer)

            if(userAnswer == question.answerResult) {
                console.log("정답");
                quizView[number].classList.add("like");
                quizScore++;

            } else {
                console.log("오답");
                quizView[number].classList.add("dislike");
                const divBox = document.createElement("div");
                quizSelectsWrap.appendChild(divBox).innerHTML = `<p class="result">${question.answerEx}<p>`
            }
        });

        // 전체 문제 수
        console.log(quizInfo.length)

        // 내가 맞힌 수
        console.log(quizScore)

        document.querySelector(".quiz__confirm .ex").innerHTML = `${quizScore} / ${quizInfo.length} 화이팅`;
        
    }

    // 정답 클릭
    document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz);