Quiz

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

        // 선택자 
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizDate = quizWrap.querySelectorAll(".quiz__date");
        const quizType = quizWrap.querySelectorAll(".quiz__type");
        const quizNum = quizWrap.querySelectorAll(".quiz__question em");
        const quizQuestion = quizWrap.querySelectorAll(".quiz__question span");
        const quizAnswer = quizWrap.querySelectorAll(".quiz__answer");
        const quizDesc = quizWrap.querySelectorAll(".quiz__desc");
        const quizConfirm = quizWrap.querySelectorAll(".quiz__confirm");
        const quizInput = quizWrap.querySelectorAll(".quiz__input input");
        const quizAnimation = quizWrap.querySelectorAll(".quiz__animation");

        // 문제 정보
        const quizInfo = [
            {
                infoDate : "2019년 상시",
                infoType : "정보처리기능사",
                infoNum : "1.",
                infoQuestion : "어떤 릴레이션 R의 정의에서 애트리뷰트의 수를 무엇이라 하는가?",
                infoAnswer : "차수",
                infoDesc : "속성(Attribute)의 개수를 차수, 튜플(Tuple)의 개수를 기수라고 합니다.",
            }, 
            {
                infoDate : "2021년 10월",
                infoType : "정보처리기능사",
                infoNum : "2.",
                infoQuestion : "시스템의 날짜를 변경하거나 확인할 수 있는 DOS 명령어는?",
                infoAnswer : "2",
                infoDesc : "'시스템 날짜 변경' 명령어는 DATE입니다.",
            }, 
            {
                infoDate : "2021년 6월",
                infoType : "정보처리기능사",
                infoNum : "3.",
                infoQuestion : "2개의 조건을 동시에 만족해야 출력하는 논리 연산자는?",
                infoAnswer : "AND",
                infoDesc : "2개의 조건을 동시에 만족한다는 것은 2개의 조건이 모두 참이라는 의미입니다. 즉 모든 조건이 참일 때만 참을 출력하는 논리 연산자는 AND입니다",
            }
        ];

        // 문제 출력

        // for()
        // for(let i=0; i<quizInfo.length; i++){
        //     quizDate[i].textContent = quizInfo[i].infoDate;
        //     quizType[i].textContent = quizInfo[i].infoType;
        //     quizNum[i].textContent = quizInfo[i].infoNum;
        //     quizQuestion[i].textContent = quizInfo[i].infoQuestion;
        //     quizAnswer[i].textContent = quizInfo[i].infoAnswer;
        //     quizDesc[i].textContent = quizInfo[i].infoDesc;
        // }

        // forEach()
        quizInfo.forEach((el, i) => {
            quizDate[i].textContent = quizInfo[i].infoDate;
            quizType[i].textContent = quizInfo[i].infoType;
            quizNum[i].textContent = quizInfo[i].infoNum;
            quizQuestion[i].textContent = quizInfo[i].infoQuestion;
            quizAnswer[i].textContent = quizInfo[i].infoAnswer;
            quizDesc[i].textContent = quizInfo[i].infoDesc;
        });

        // 정답 해설 숨기기
        // quizAnswer[0].style.display = "none";
        // quizAnswer[1].style.display = "none";
        // quizAnswer[2].style.display = "none";

        // quizDesc[0].style.display = "none";
        // quizDesc[1].style.display = "none";
        // quizDesc[2].style.display = "none";

        // for()
        // for(i=0; i<quizInfo.length; i++){
        //     quizAnswer[i].style.display = "none";
        //     quizDesc[i].style.display = "none";
        // }

        // forEach()
        quizInfo.forEach((el, i) => {
            quizAnswer[i].style.display = "none";
            quizDesc[i].style.display = "none";
        });

        // 정답확인
        quizConfirm.forEach(function(btn, num){
            btn.addEventListener("click", function(){
                const userAnswer = quizInput[num].value.trim().toLowerCase();
                const correctAnswer = quizInfo[num].infoAnswer.trim().toLowerCase();

                if(userAnswer == correctAnswer){
                    quizAnimation[num].classList.add("like");
                } else {
                    quizAnimation[num].classList.add("dislike");
                }

                quizAnswer[num].style.display = "block";
                quizDesc[num].style.display = "block";
                quizConfirm[num].style.display = "none";
                quizInput[num].style.display = "none";
            });
        });
X
rlanrider77@gmail.com