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 quizDesc = quizWrap.querySelector(".quiz__desc");
    const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
    const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");

    const quizConfirm = quizWrap.querySelector(".quiz__confirm");

    // 문제 정보
    const quizInfo = [
        {
            infoDate : "2019년 상시",
            infoType : "정보처리기능사",
            infoNum : "01",
            infoQuestion : "어떤 릴레이션 R의 정의에서 애트리뷰트의 수를 무엇이라 하는가?",
            infoChoice : ["차수", "기수", "도메인", "튜플"],
            infoAnswer : "1",
            infoDesc : "속성(Attribute)의 개수를 차수, 튜플(Tuple)의 개수를 기수라고 합니다.",
        }
    ];

    // 문제 출력

    quizHeader.innerHTML = quizInfo[0].infoDate + " " +quizInfo[0].infoType;
    quizQuestion.innerHTML = quizInfo[0].infoNum + ". " + quizInfo[0].infoQuestion;
    quizAnswer.innerText = quizInfo[0].infoAnswer;
    quizDesc.innerText = quizInfo[0].infoDesc;

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

    // 정답 확인
    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){
                // alert("정답");
                alert("정답입니다.");
                quizDesc.classList.remove("none");
            } else {
                // alert("오답");
                alert("오답입니다.");
                quizAnswer.classList.remove("none");
                quizDesc.classList.remove("none");
            }
        } else {
            alert("보기를 선택해주세요!! 😊");
        }
    });
X
rlanrider77@gmail.com