Quiz 06

Quiz 06

이번 시간에는 스크롤 형식이 아닌 슬라이드 형식으로 퀴즈 문제를 만들어 봤습니다.

원본 사이트 보기

자바스크립트

데이터 값의 입력과 함수와 for문을 사용했습니다.
이번에는 문제를 풀 시 슬라이드 형식으로 넘어가는 걸로 바꿨으며,
틀린 답을 체크하고 정답 확인 시 정답에 대한 해설이 나오도록 설정했습니다.

코드 보기

    // 선택자
    const quizType = document.querySelector(".quiz__type");                           // 시험 날짜
    const quizQuestion = document.querySelector(".quiz__question");              // 문제 번호, 질문
    const quizSelects = document.querySelector(".quiz__selects");                   // 객관식 보기
    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 = 0;

    // 문제 출력
    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>
        `;

        // 문제 출력
        quizQuestion.innerHTML = questionTag;          // 번호, 질문
        quizSelects.innerHTML = choiceTag;                // 객관식
        quizType.innerHTML = quizInfo[index].answerType     // 시험 날짜
        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";

    }
    
    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 (quizInfo.length - 1 == quizCount) {
            quizConfirm.textContent = `총 ${quizInfo.length} 문제 중에 ${quizScore} 문제를 맞추었습니다.`;
        }       //마지막 문제 완료 후 정답 갯수 확인
        quizCount++;
        updateQuiz(quizCount);
        quizView.classList.remove("like", "dislike");
    }
    quizConfirm.addEventListener("click", answerQuiz);