Quiz 06

728x90

quiz06

답을 누르면 설명과 함께 다음 문제 보기 박스? 가 나오는 구조이다. 누르면 다음 문제로 넘어간다. 마지막 문제에서는 총 갯수가 나온다.

선택자

// 선택자
    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("정답");
        quizScore++;
        quizView.classList.add("like");
    } else {
        console.log("오답")
        quizView.classList.add("dislike");
        quizResult.style.display = "block";
    }
    quizConfirm.style.display = "block";
}
// 전체 문제수
        console.log(quizInfo.length)
        // 내가 맞힌 수
        console.log(quizScore)

        // 정답 확인 버튼
        const answerQuiz = () => {
            quizCount++;
            updateQuiz(quizCount);
            quizView.classList.remove("like", "dislike");

            // 마지막 문제
            if(quizInfo.length -1 == quizCount){
        quizConfirm.textContent = `총 ${quizCount} 문제 중에 ${quizScore} 문제를 맞추었습니다.`

정답 확인 버튼

const answerQuiz = () => {
    quizCount++;
    updateQuiz(quizCount);
    quizView.classList.remove("like", "dislike");

    quizConfirm.addEventListener("click", answerQuiz);

원본 소스 보기

728x90