Quiz 01

Quiz 01

웹디자인기능사 필기 시험에 나오는 객관식 문제를 코딩으로 만들어 풀어보세요.
자바스크립트를 이용해 퀴즈 형태 방식을 코딩

원본 사이트 보기

자바스크립트

데이터 값의 입력과 상수를 사용

    // 선택자
    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");
    });