문제 01

퀴즈

웹디자인기능사 대비 퀴즈 프로그램을 만들어 풀어보려 합니다.
querySelector를 통해 저장된 값들을 불러오며, addEventListener 함수로 클릭 했을때 정답을 출력하도록 합니다.
여기에 if함수를 더해 정답과 오답에 대한 결과를 나눕니다.

---

문제01

정답 확인하기를 누르면 답이 나옵니다.

원본 소스 보기

Javascript 코드

선택자, 문제정보, 문제출력, 정답 숨기기, 정답확인 단계로 구성되어 있습니다.

{
    //선택자
    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;
    quizNumber.innerText = answerNum + ". ";
    quizAsk.innerText = answerAsk;
    quizResult.innerText = answerResult;

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

    //정답 확인
    //정답 버튼을 클릭하면 // 확인버튼 안보이게... 숨겨진 정답은 보이게...
    //정답을 확인하면 강아지가 웃고 있어야 함 //클래스 like 추가함
    quizConfirm.addEventListener("click", function(){
        quizConfirm.style.display = "none";
        quizResult.style.display = "block";
        quizDog.classList.add("like");
    });
}