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 undataQuiz = () => {
            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>
                        // quiz main

                        < 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 descElement = quizWrap.querySelectorAll(".quiz__desc")[index];
            const AnswerElement = quizWrap.querySelectorAll(".quiz__answer")[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표시
                    descElement.classList.remove("none");   // 해설보기
                } else {
                    quizElement.classList.add("bad");       // X표시
                    descElement.classList.remove("none");   // 해설보기
                    AnswerElement.classList.remove("none"); // 정답보기
                }

                confirmElement.classList.add("none");       // 정답 확인버튼 삭제
            } else {
                alert("보기를 선택해주세요!");
            }
        }

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

            const quizConfirm = document.querySelectorAll(".quiz__confirm");
            quizConfirm.forEach((button, index) => {
                button.addEventListener("click", () => {
                    answerQuiz(index);
                });
            })
        })
ooooo0516@naver.com