QuizEffect06

 

quizEffect06

퀴즈 이펙트 06번은 타년도 웹디자인 기능사 오답노트로 구성하였습니다.
한 문제씩 풀고 다음 문제로 넘어가는 기능을 구현하였습니다.
오답노트는 꾸준히 업데이트 될 예정이니 참고하세요!

---

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

자바스크립트

한 문제를 완료할때마다 다음 문제로 자동으로 넘어가도록 문제 출력 함수에 index값을 주고 정답 입력시 정답/오답을 확인하여 해설출력과 다음문제로 넘어가도록 하였습니다.
마지막 문제를 완료하면 총 갯수 / 맞은 갯수로 전체 결과를 확인할 수 있도록 하였습니다.

//선택자
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)