Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스보기
quizEffect04 
{
// 선택자 
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 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", () => {
        updateQuiz();

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