문제 06

퀴즈

이번 유형은 객관식(여러문제)-슬라이드형식이며 점수 확인이 가능합니다.

---

문제 06

Math.floor를 이용하여 점수를 문제수에 따라 소수점 없이 나오게 해줍니다.
틀린 문제를 모아서 빠르게 정리해봅시다.

원본 사이트 보기 원본 소스 보기

HTML 코드

{
    <main id="main">
    <div class="quiz__wrap">
        <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">
                    
                </div>
                <div class="result"></div>
                <button class="confirm">다음 문제 보기 🫠</button>
            </div>
        </div>

    </div>
</main>
}   

Javascript 코드

매개변수를 이용해 HTML요소를 반복해서 적어야 하는 고생을 없애줍니다.
0부터 카운트하니 quizInfo.length-1을 해주고 Math.floor와 quizCount, quizScore를 이용해 합격여부(60%)와 맞춘 문제수, 점수를 나타내줍니다.

{
    // 문제정보
    const quizInfo = [...];
    const quizQuestion = document.querySelector(".quiz__question");                 //문제 번호, 질문
        const quizSelects = document.querySelector(".quiz__selects")                    //객관식 보기
        const quizType = document.querySelector(".quiz__type")                  //객관식보기
        const quizResult = document.querySelector(".quiz__answer .result")      //해설
        const quizConfirm = document.querySelector(".quiz__answer .confirm")     //정답확인버튼
        const quizView = document.querySelector(".quiz__view")                  //강아지

        let quizCount = 0;
        let quizScore = "";
        let qs = Math.floor(100/quizInfo.length*quizScore)

        //문제 출력
        const updateQuiz = (index) => {
            const questionTag = `
            <span class="number">${quizInfo[index].answerNum}</span>
            <div class="ask">${quizInfo[index].answerAsk}</div>`;

        const choiceTag = `
        <label for="select1">
            <input type="radio" id="select1" class="select" name="select" value="1">
            <span class="choice">${quizInfo[index].answerChoice[0]}</span>
        </label>
        <label for="select2">
            <input type="radio" id="select2" class="select" name="select" value="2">
            <span class="choice">${quizInfo[index].answerChoice[1]}</span>
        </label>
        <label for="select3">
            <input type="radio" id="select3" class="select" name="select" value="3">
            <span class="choice">${quizInfo[index].answerChoice[2]}</span>
        </label>
        <label for="select4">
            <input type="radio" id="select4" class="select" name="select" value="4">
            <span class="choice">${quizInfo[index].answerChoice[3]}</span>
        </label>`;

            //문제출력

            quizType.innerHTML = quizInfo[index].answerType;    //퀴즈 유형
            quizQuestion.innerHTML = questionTag;           //번호 질문
            quizSelects.innerHTML = choiceTag;              //객관식
            quizResult.innerHTML = quizInfo[index].answerEx;    //해설

            const quizChoice = quizSelects.querySelectorAll(".choice")

            for(let i=0; i<quizChoice.length; i++){
                quizChoice[i].setAttribute("onclick", "choiceSelected(this)")
            }

            // 문제, 해설 숨기기
            quizResult.style.display="none";
            quizConfirm.style.display="none";

            // document.querySelector(".quiz__type").innerHTML=quizInfo[0].answerType
        }
        updateQuiz(quizCount);

        const choiceSelected = (answer) => {
            let userAnswer = answer.textContent;
            let currentAnswer = quizInfo[quizCount].answerResult;
            
            if(userAnswer == currentAnswer){
                console.log("정답");
                quizView.classList.add("like")
                quizScore++
            } else {
                console.log("오답");
                quizView.classList.add("dislike")
                quizResult.style.display="block";
            }
            quizConfirm.style.display = "block"
        }
        

        // 정답 확인 버튼
        const answerQuiz = () => {
            if(quizCount === quizInfo.length-1){
                if(Math.floor(100/quizInfo.length*quizScore)>=60){
                    quizConfirm.textContent = `총 ${quizInfo.length} 문제 중에 ${quizScore} 문제를 맞추었으며 총점 ${Math.floor(100/quizInfo.length*quizScore)} 점 합격 입니다.`
                } else {
                    quizConfirm.textContent = `총 ${quizInfo.length} 문제 중에 ${quizScore} 문제를 맞추었으며 총점 ${Math.floor(100/quizInfo.length*quizScore)} 점 불합격 입니다.`
                }
            }
            quizCount++
            updateQuiz(quizCount);
            quizView.classList.remove("like", "dislike");

            // quizConfirm.textContent = "총"+quizInfo.length+"문제 중에"+quizScore+"문제를 맞추었습니다."
            //마지막 문제
        }

        quizConfirm.addEventListener("click", answerQuiz)
}