퀴즈 이펙트06

정답 확인
소스 보기
Javascript

// 선택자 
const quizWrap = document.querySelector(".quiz__wrap");
const quizCheck = document.querySelector(".quiz__check");

// 문제 정보
let quizInfo = [];
let quizScore = 0;

// 문제 가져오기
const fetchQuiz = () => {
    
    fetch("https://ojs104.github.io/webs2024/json/gineungsaJC2005_02.json")
        .then(res => res.json())
        .then(items => {

            quizInfo = items.map((item, index) => {
                const formattedQuiz = {
                    infoDate: "2011년 5회",
                    infoType: item.subject,
                    infoQuestion: item.question,
                    infoDesc: item.desc,
                    infoAnswer: item.correct_answer
                }

                // 보기 가져오기
                const choices = [...item.incorrect_answers, item.correct_answer];
                // 보기 랜덤 섞기
                for (let i = choices.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1)); // 0에서 i까지의 무작위 인덱스 선택
                    // 배열 요소 i와 j를 교환
                    [choices[i], choices[j]] = [choices[j], choices[i]];
                }

                formattedQuiz.infoChoice = choices;
                return formattedQuiz;
            });
            console.log(quizInfo);
            updataQuiz();
        });

        // 문제 출력
        const updataQuiz = () => {
            const quizArray = [];

            quizInfo.forEach((quiz, number) => {
                quizArray.push(`
                
                    ${quiz.infoDate}. ${quiz.infoType}
                    
                        
                            ${number + 1}. ${quiz.infoQuestion}
                        
                        
                            
                                
                                ${quiz.infoChoice[0]}
                            
                            
                                
                                ${quiz.infoChoice[1]}
                            
                            
                                
                                ${quiz.infoChoice[2]}
                            
                            
                                
                                ${quiz.infoChoice[3]}
                                                        
                        
                        ${quiz.infoAnswer}
                        ${quiz.infoDesc}
                    
                
                `);
            });

            quizWrap.innerHTML = quizArray.join("");
        }

        // 정답 확인
        quizCheck.addEventListener("click", () => {
            const quizElements = document.querySelectorAll(".quiz");

            quizElements.forEach((quizElement, index) => {
                const selectedChoice = quizElement.querySelector(`input[name="choice-${index}"]:checked`); //체크한 정답
                const quizAnswer = quizElement.querySelector(".quiz__answer");
                const quizDesc = quizElement.querySelector(".quiz__desc");

                if (selectedChoice) {
                    const userAnswer = selectedChoice.value;
                    const correctAnswer = quizAnswer.textContent;

                    if (userAnswer === correctAnswer) {
                        console.log("정답입니다.");
                        quizElement.classList.add("good");
                        quizScore++;
                    } else {
                        console.log("오답입니다.");
                        quizElement.classList.add("bad");
                        quizAnswer.classList.remove("none")
                        quizDesc.classList.remove("none")
                    }
                }
            });
            alert("총 맞은 갯수는 : " + quizScore + "개 입니다.");
        });
        // 페이지가 로드된 후 실행
        document.addEventListener("DOMContentLoaded", () => {
            fetchQuiz();
        })