퀴즈 만들기 - 정답 확인 유형

 

퀴즈 효과

정답 확인하기 유형

---

결과

원본 사이트 보기

---

JavaScript

각각의 선택자를 상수로 선언한뒤에 innerText를 이용해 출력하고, 정답 확인하기 버튼을 클릭했을 때 event를 걸어줍니다.

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