Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스 보기
quizEffect02 
{
    // 선택자
        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 : "2016년 4회",
                infoType : "웹디자인 기능사",
                infoNum : "01",
                infoQuestion : "다음 중 디자인의 기본 요소들로 옳은 것은?",
                infoChoice : ["선, 색채, 공간, 수량", "점, 선, 면, 질감", "시간, 수량, 구조, 공간", "면, 구조, 공간, 수량"],
                infoAnswer : "2",
                infoDesc : "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다."
            }
        ];
        // 문제출력
        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){
                    alert("정답입니다.");
                    quizDesc.classList.remove("none");
                } else {
                    alert("오답입니다.");
                    quizAnswer.classList.remove("none");
                    quizDesc.classList.remove("none");
                }
            } else {
                alert("보기를 선택하세요!😂");
            }
        });
    }