Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스보기
Javascript 
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");

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

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

    quizInfo.forEach((quiz, index) => {
        quizArray.push(`
            <div class="quiz">
                <div class="quiz__header">${quiz.infoDate}${quiz.infoType}</div>
                
                <div class="quiz__main">
                    <div class="quiz__question">
                        ${index+1}.${quiz.infoQuestion}
                    </div>
                    <div class="quiz__choice">
                        <label for="choice1-${index}">
                            <input type="radio" id="choice1-${index}" name="choice-${index}" value="1">
                            <span>${quiz.infoChoice[1]}</span>
                        </label>
                        <label for="choice2-${index}">
                            <input type="radio" id="choice2-${index}" name="choice-${index}" value="2">
                            <span>${quiz.infoChoice[2]}</span>
                        </label>
                        <label for="choice3-${index}">
                            <input type="radio" id="choice3-${index}" name="choice-${index}" value="3">
                            <span>${quiz.infoChoice[3]}</span>
                        </label>
                        <label for="choice4-${index}">
                            <input type="radio" id="choice4-${index}" name="choice-${index}" value="4">
                            <span>${quiz.infoChoice[4]}</span>
                        </label>
                    </div>
                    <div class="quiz__answer none">
                        ${quiz.infoAnswer}
                    </div>
                    <div class="quiz__desc none">
                        ${quiz.infoDesc}
                    </div>
                </div>
                
                <div class="quiz__footer">
                    <button class="quiz__confirm" data-index="${index}">정답 확인하기</button>
                </div>
                
            </div>
        `)
    
    });
    quizWrap.innerHTML = quizArray.join("");
}
// 정답 확인
const answerQuiz = (index) => {
    const quizChoices = quizWrap.querySelectorAll(`.quiz__choice input[name="choice-${index}"]:checked`);
    const quizElement = quizWrap.querySelectorAll(".quiz")[index];
    const answerElement = quizWrap.querySelectorAll(".quiz__answer")[index];
    const descElement = quizWrap.querySelectorAll(".quiz__desc")[index];
    const confirmElement = quizWrap.querySelectorAll(".quiz__confirm")[index];

    if (quizChoices.length > 0) {
        const userAnswer = quizChoices[0].value; // 사용자가 체크한 정답

        if(userAnswer == quizInfo[index].infoAnswer){
            quizElement.classList.add("good"); // O표시
            answerElement.classList.remove("none"); // 해설 보기
            descElement.classList.remove("none"); // 정답 보기

        } else {
            quizElement.classList.add("bad"); // X표시
            answerElement.classList.remove("none"); // 해설 보기
            descElement.classList.remove("none"); // 정답 보기
        }
        confirmElement.classList.add("none"); // 정답 보기
    } else {
        alert("보기를 선택해주세요!");
    }
    
};


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

    const quizConfirm = document.querySelectorAll(".quiz__confirm"); //문제출력에 있는 .quiz__confirm이 로딩된 후 변수를 선언해야 해서 문제출력보다 위로 갈 수 없음
    quizConfirm.forEach((button, index) => {
        button.addEventListener("click", () => {
            answerQuiz(index);
        });
    });
});
yunyoungsik91@gmail.com