Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스 보기
Javascript 

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

        // 문제 정보
        const quizInfo = [
            {
                infoDate: "17년 상시",
                infoType: "정보처리기능사",
                infoQuestion: "피변조파로부터 원래의 신호파를 만드는 것을 무엇이라 하는가?",
                infoChoice: ["발진", "정류", "증폭", "복조"],
                infoAnswer: "4",
                infoDesc: "피변조파는 변조된 신호를 의미합니다. 변조된 신호를 원래의 신호로 만드는 것을 복조라고 합니다.",
            },
            {
                infoDate: "17년 상시",
                infoType: "정보처리기능사",
                infoQuestion: "변,복조기의 역할과 거리가 먼 것은?",
                infoChoice: [
                    "통신 신호의 변환기라고 볼 수 있다.",
                    "디지털 신호를 아날로그 신호로 변환한다.",
                    "공중 전화 통신망에 적합한 통신 신호로 변환한다.",
                    "컴퓨터 신호를 광 케이블에 적합한 광 신호로 변환한다."
                ],
                infoAnswer: "4",
                infoDesc: "모뎀의 역할은 디지털 데이터를 아날로그 신호로 변조하고, 아날로그 신호를 디지털 데이터로 복조하는 역할을 한다. ",
            },
            {
                infoDate: "20년 2월",
                infoType: "정보처리기능사",
                infoQuestion: "인터넷 도메인 네임을 IP Address로 바꿔주는 시스템을 무엇이라 하는가?",
                infoChoice: [
                    "HTTP",
                    "TCP/IP",
                    "URL",
                    "DNS"
                ],
                infoAnswer: "4",
                infoDesc: "사람이 인식할 수 있는 도메인 네임을 컴퓨터가 이해할 수 있도록 숫자로 된 IP 주소로 변환할 때 사용하는 시스템은 DNS이다.",
            },
        ];

        let currentIndex = 0;   // 현재 문제 변수 값

        // 문제 출력
        const undataQuiz = (index) => {
            let quizWrapTag = `
                

                    
${quizInfo[index].infoDate} ${quizInfo[index].infoType}

                    

                        
${index +1}. ${quizInfo[index].infoQuestion}

                        

                            
                            
                            
                            
                        

                        
${quizInfo[index].infoAnswer}

                        
${quizInfo[index].infoDesc}

                    

                    

                        
                        
                    

                

            `;

            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++
                    undataQuiz(currentIndex);
                } else {
                    alret("퀴즈가 종료되었습니다.");
                } 
            });
        }
        
        // 정답확인 
        const checkAnswer = () => {
            const selectedChoice = quizWrap.querySelector("input[name = 'choice']:checked");

            if (!selectedChoice) {
                alert("보기를 선택하세요.");
            }

            const userAnswer = selectedChoice.value;           // 사용자가 클릭한 정답
            const corretAnswer = quizInfo[currentIndex].infoAnswer;     // 정답지의 정답
            const quizElement = quizWrap.querySelector(".quiz");
            const descElement = quizWrap.querySelector(".quiz__desc");
            const answerElement = quizWrap.querySelector(".quiz__answer");
            
            if(userAnswer === corretAnswer){
            quizElement.classList.add("good");
            } else {
                quizElement.classList.add("bad");
                answerElement.classList.remove("none");
            }
            descElement.classList.remove("none");
            
        }
        // 페이지가 로드 된 후 실행

        document.addEventListener("DOMContentLoaded", () => {
            undataQuiz(currentIndex);
        })
ooooo0516@naver.com