퀴즈만들기 - 객관식(여러문제)슬라이드 유형

퀴즈 효과

객관식(여러문제) 확인하기 : 슬라이드 형식

오늘은 화면에 한문제씩 나오면서 문제를 풀면 다음문제로 넘어가는 스크립트를 만들어보겠습니다.

---

결과

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

---

HTML 작성

문제번호와 문제, 보기는 공통요소이므로 HTML에서 지우고 스크립트로 넣어주겠습니다.

<main id="main">
<div class="quiz__wrap">
    <div class="quiz">
        <span class="quiz__type"></span>
        <h2 class="quiz__question">
            <span class="number"></span>
            <div class="ask"></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>

CSS 작성

기존과 딱히 변화 없습니다.

JS 작성

문제 번호를 클릭하면 문제의 정답 유무를 파악하고 다음문제로 넘어갈 수 있는 버튼을 보이게 설정하였으며, 마지막 문제를 풀었을 때 총 문제 수 중에 맞은 문제를 출력할 수 있도록 제작하였습니다.

펼쳐 보기

//선택자
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>
    `;
    //문제 출력
    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";
}
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)