QUIZ | 문제 만들기 | 방법 01

QUIZ를 만들어보자 !

QUIZ의 여러 형태 중 정답 확인하기 형식으로 만들어봅시다.

원본 소스 보기

_ script를 살펴봅시다 !

<script>
    //선택자
    const quizType = document.querySelector(".quiz__type");                               //퀴즈 종류
    const quizNumber = document.querySelector(".quiz__question .number");       //퀴즈 번호
    const quizAsk = document.querySelector(".quiz__question .ask");                    //퀴즈 질문
    const quizConfirm = document.querySelector(".quiz__answer .confirm");         //정답 확인 버튼
    const quizResult = document.querySelector(".quiz__answer .result");               //퀴즈 정답
    const quizDog = document.querySelector(".quiz__view .dog");                       //강아지

    //문제 정보 (데이터 저장)
    const answerType = "웹디자인기능사";
    const answerNum = 1;
    const answerAsk = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
    const answerResult = "연변대비";

    //문제 출력 (데이터 출력)
    quizType.innerText = answerType;        //innerText 자바스크립트에서 만들어 놓은 객체
    quizNumber.innerText = answerNum;
    quizAsk.innerText = answerAsk;
    quizResult.innerText = answerResult;

    //정답 숨기기
    quizResult.style.display = "none";

    //정답 확인
    //정답 버튼을 클릭하면 확인 버튼은 안보이고 숨겨진 버튼이 보이도록
    //정답을 확인하면 강아지가 웃고 있어야 함, class like 추가
    quizConfirm.addEventListener("click", function(){        //버튼을 클릭하면 함수를실행해라
        quizConfirm.style.display = "none";
        quizResult.style.display = "block";
        quizDog.classList.add("like");
    });
</script>

속성값	의미
innerText	Element 속성으로 사용자에게 보여지는 텍스트 값을 불러오는 속성입니다.
addEventListener	document의 특정요소에 event를 등록하는 속성으로 이번 퀴즈에서는 click 이벤트를 사용했습니다.
El.classList.add	클래스를 추가하는 속성입니다.