퀴즈 이펙트05

소스 보기

Javascript

HTML

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

// 문제 정보
const quizInfo = [
    {
        infoDate : "2006년 5회",
        infoType : "정보처리 기능사",
        infoQuestion : "이항(binary) 연산에 해당하는 것은?",
        infoChoice : ["COMPLEMENT", "AND", "ROTATE", "SHIFT"],
        infoAnswer : "2",
        infoDesc : "단항연산 : ROTATE, SHIFT, MOVE, NOT(COMPLEMENT)"
    },{
        infoDate : "2006년 5회",
        infoType : "정보처리 기능사",
        infoQuestion : "프로그램이 컴퓨터의 기종에 관계없이 수행될 수 있는 성질을 의미하는 것은?",
        infoChoice : ["가용성", "신뢰성", "호환성", "안전성"],
        infoAnswer : "3",
        infoDesc : "컴퓨터의 기종에 관계없이 동작하므로 호환성입니다. 호환성이란 까스활명수, 까스명수, 베아제등 이름은 틀리지만 소화제의 기능을 하는것처럼 기종에 관계없이 동작할수 있는 것들을 말합니다."
    },{
        infoDate : "2006년 5회",
        infoType : "정보처리 기능사",
        infoQuestion : "제어장치가 앞의 명령 실행을 완료한 후, 다음에 실행 할 명령을 기억장치로부터 가져오는 동작을 완료할 때까지의 주기를 무엇이라고 하는가?",
        infoChoice : ["fetch cycle", "transfer cycle", "search time", "run time"],
        infoAnswer : "1",
        infoDesc : "명령어를 가지고 오는것을 fetch cycle 이라고 합니다."
    }
];

let currentIndex = 0;   // 현재 문제 변수 값(현재 풀고 있는 문제)

// 문제 출력
const updataQuiz = (index) => {
    let quizWrapTag = `
        <div class="quiz">
            <div class="quiz__header">${quizInfo[index].infoDate} ${quizInfo[index].infoType}</div>
            <div class="quiz__main">
                <div class="quiz__question">${index+1}. ${quizInfo[index].infoQuestion}</div>
                <div class="quiz__choice">
                    <label for="choice1">
                        <input type="radio" id="choice1" name="choice" value="1">
                        <span>${quizInfo[index].infoChoice[0]}</span>
                    </label>
                    <label for="choice2">
                        <input type="radio" id="choice2" name="choice" value="2">
                        <span>${quizInfo[index].infoChoice[1]}</span>
                    </label>
                    <label for="choice3">
                        <input type="radio" id="choice3" name="choice" value="3">
                        <span>${quizInfo[index].infoChoice[2]}</span>
                    </label>
                    <label for="choice4">
                        <input type="radio" id="choice4" name="choice" value="4">
                        <span>${quizInfo[index].infoChoice[3]}</span>
                    </label>
                </div>
                <div class="quiz__answer none">${quizInfo[index].infoAnswer}</div>
                <div class="quiz__desc none">${quizInfo[index].infoDesc}</div>
            </div>
            <div class="quiz__footer">
                <button class="quiz__confirm">정답 확인하기</button>
                <button class="quiz__next none">다음 문제</button>
            </div>
        </div>
    `;
    quizWrap.innerHTML = quizWrapTag;

    // 선택자
    const quizConfirm = quizWrap.querySelector(".quiz__confirm");
    const quizNext = quizWrap.querySelector(".quiz__next");
    
    // 정답 확인 버튼
    quizConfirm.addEventListener("click",() => {
        checkAnswer();
        quizConfirm.classList.add("none");  // 정답 버튼 삭제
        quizNext.classList.remove("none");  // 다음 버튼 추가
    });

    // 다음 문제 버튼
    quizNext.addEventListener("click", () => {
        if(currentIndex < quizInfo.length -1){
            quizNext.classList.add("none");  // 다음 버튼 삭제
            quizConfirm.classList.remove("none");  // 정답 버튼 추가
            currentIndex++;             // 문제 번호 추가
            updataQuiz(currentIndex);   // 퀴즈 반영
        } else {
            alert("퀴즈가 종료되었습니다.");
        }
    });
}

// 정답 확인
const checkAnswer = () => {
    const selectedChoice = quizWrap.querySelector("input[name='choice']:checked");

    if (!selectedChoice) {
        alert("답을 선택하세요.");
    }

    // const userAnswer = selectedChoice ? selectedChoice.value : null;
    const userAnswer = selectedChoice.value; // 사용자가 클릭한 정답
    const correctAnswer = quizInfo[currentIndex].infoAnswer;    // 정답지의 정답
    const quizElement = quizWrap.querySelector(".quiz");
    const descElement = quizWrap.querySelector(".quiz__desc");
    const answerElement = quizWrap.querySelector(".quiz__answer");

    if(userAnswer === correctAnswer){
        quizElement.classList.add("good");
    } else {
        quizElement.classList.add("bad");
        answerElement.classList.remove("none");
    }
    descElement.classList.remove("none");    
}

// 페이지가 로드된 후 실행
document.addEventListener("DOMContentLoaded", () => {
    updataQuiz(currentIndex);
});

<main id="main">
    <div class="quiz__wrap"></div>
</main>