Quiz 정답 확인하기 유형

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

hjkang306@naver.com
소스 보기
Javascript
HTML
//선택자
const quizType = document.querySelector(".quiz__type");                  //퀴즈 종류
const quizNumber = document.querySelector(".quiz__question .number");    //퀴즈 번호
const quizAsk = document.querySelector(".quiz__question .ask");          //퀴즈 질문
const quizConfilm = document.querySelector(".quiz__answer .confilm");    //정답 확인 버튼
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";

//정답 확인
//정답 버튼을 클릭하면 확인 버튼이 안보이게, 숨겨진 정답은 보이게
quizConfilm.addEventListener("click", function(){    //버튼을 클릭하면 실행해라~ 이런 뜻
    quizConfilm.style.display = "none";
    quizResult.style.display = "block";
});

<div class="quiz__wrap">
    <div class="quiz">
        <span class="quiz__type"></span>
        <h2 class="quiz__question">
            <span class="number"></span>
            <div class="ask"></div>
        </h2>
        <div class="quiz__view">
            <div class="dog">
                <div class="head">
                    <div class="ears"></div>
                    <div class="face"></div>
                    <div class="eyes">
                        <div class="teardrop"></div>
                    </div>
                    <div class="nose"></div>
                    <div class="mouth">
                        <div class="tongue"></div>
                    </div>
                    <div class="chin"></div>
                </div>
                <div class="body">
                    <div class="tail"></div>
                    <div class="legs"></div>
                </div>
            </div>
        </div>
        <div class="quiz__answer">
            <button class="confilm">정답 확인하기</button>
            <div class="result"></div>
        </div>
    </div>
</div>