Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스 보기
Javascript 
        // 선택자 
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizHeader = quizWrap.querySelector(".quiz__header")
        const quizQuestion = quizWrap.querySelector(".quiz__question");
        const quizAnswer = quizWrap.querySelector(".quiz__answer");
        const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
        const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");
        const quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizConfirm = quizWrap.querySelector(".quiz__confirm");

        // 문제 정보
        const quizInfo = [
            {
                infoDate : "2017년 07월",
                infoType : "정보처리 기능사",
                infoNum : "01",
                infoQuestion : "2개의 조건을 동시에 만족해야 출력하는 논리 연산자는?",
                infoChoice :["AND", "OR", "SECOND", "MULTI"],
                infoAnswer : "1",
                infoDesc : "2개의 조건을 동시에 만족한다는 것은 2개의 조건이 모두 참이라는 의미입니다.",
            }
        ];

        // 문제 출력

        for(let i=0; i< quizInfo.length; i++){
            quizHeader.innerHTML = quizInfo[i].infoDate + " " + quizInfo[i].infoType;
            quizQuestion.innerHTML = quizInfo[i].infoNum + ". " + quizInfo[i].infoQuestion;
            quizAnswer.innerText = quizInfo[i].infoAnswer;
            quizDesc.innerText = quizInfo[i].infoDesc;

            for(let j=0; j< quizChoice.length; j++){
                quizChoice[j].innerText = quizInfo[i].infoChoice[j];
            }
        }

        // 정답 확인 

        quizConfirm.addEventListener("click", () => {
            let selectedChoice = null;

            for(let i=0; i< quizSelect.length; i++){
                if(quizSelect[i].checked){
                    selectedChoice = quizSelect[i].value;
                    break;
                }
            }

            if(selectedChoice !== null){
                if(selectedChoice == quizInfo[0].infoAnswer){
                    quizDesc.classList.remove("none");
                    alert("정답");
                } else {
                    quizAnswer.classList.remove("none");
                    quizDesc.classList.remove("none");
                    alert("오답");
                } 
            } else {
                alert("보기를 선택하세요! ㅡㅡ");
            }
        });
ooooo0516@naver.com