Quiz 05

quiz05

문제를 맞추면 갯수가 나오는 구조이다.

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

    const updateQuiz = () => {
        const exam = [];

        quizInfo.forEach((question, number) => {
            exam.push(`
            <div class="quiz">
                <pan 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[0]}</span>
                        </label>
                        <label for="select2${number}">
                            <input type="radio" id="select2${number}" class="select" name="select${number}" value="2">
                            <span class="choice">${question.answerChoice[1]}</span>
                        </label>
                        <label for="select3${number}">
                            <input type="radio" id="select3${number}" class="select" name="select${number}" value="3">
                            <span class="choice">${question.answerChoice[2]}</span>
                        </label>
                        <label for="select4${number}">
                            <input type="radio" id="select4${number}" class="select" name="select${number}" value="4">
                            <span class="choice">${question.answerChoice[3]}</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 userSelector = `input[name=select${number}]:checked`;  //사용자가 체크한 것
        const quizSelectsWrap = quizSelects[number];
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;
        const quizView = document.querySelectorAll(".quiz__view"); //강아지

        console.log(userAnswer)
        if (userAnswer == question.answerResult) {
            console.log("정답");
            quizScore++;
            quizView[number].classList.add("like");
        } 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(".ex").innerHTML = `${quizInfo.length} 문제 중 ${quizScore}문제가 맞았습니다.`

    if (quizScore == 36) {
        console.log("합격입니다.")
    } else
        console.log("불합격입니다.")

}

정답 클릭

document.querySelector(".quiz__confirm .check").addEventListener("click", ansWerQuiz);

원본 소스 보기

원본 사이트 보기