객관식 유형 여러문제

객관식 여러문제

원본 소스 보기

자바스크립트

const quizWrap = document.querySelector(".quiz__wrap");
const quizScore = 0;
const quizConfirm = document.querySelector(".quiz__confirm .check")



//문제 출력
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");    //객관식 보기
    const quizConfirm = document.querySelector(".quiz__confirm .check");


    //사용자가 체크한 보기 == 문제 정답
    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"); // 강아지


        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>`

        }

    });

    document.querySelector(".quiz__confirm .check").innerHTML = `${quizScore < 36 ? quizInfo.length + "/" + quizScore + " 불합격입니다. 더 공부하세요!" : quizInfo.lenght + "/" + quizScore + "축하합니다 합격입니다!"}`;

    // //점수와 합불합
    // document.querySelector("quiz__confirm.ex").innerHTML = `${quizScore < 36 ? quizInfo.length + "/" + quizScore +" 불합격입니다. 더 공부하세요!" : quizInfo.lenght + "/" + quizScore + "축하합니다 합격입니다!"}`;
    // quizConfirm.textContent = `총 ${quizInfo.length} 문제 중에 ${quizScore} 문제를 맞추었습니다.`

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

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

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

---