퀴즈 이펙트 - 정답 확인하기

QUIZ 이펙트 만들기

퀴즈 이펙트로 웹디자인기능사 시험 문제 퀴즈를 만들어보았습니다. 열심히 공부하세요!

---

정답 확인하기 유형

원본 소스 보기

자바스크립트

1. 선택자를 설정합니다.
2. 문제 정보 데이터를 저장합니다.
3. 문제 데이터를 출력합니다.
  (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.)
4. 정답 버튼을 클릭하기 전까진 답을 확인할 수 없도록 정답을 숨깁니다. -> quizResult.style.display = "none";
5. 버튼을 클릭하면 숨겨진 정답이 보이게 합니다. ->addEventListener()메서드를 사용하여 버튼을 클릭했을 때 함수를 실행하게 합니다.
  (※addEventListener()는 특정 이벤트가 발생되었을 때, 특정 함수를 실행할 수 있게 해줍니다.)
6. 클래스 like를 추가하여 정답을 확인하면 강아지가 웃는 모습이 보이게 합니다. -> quizDog.classList.add("like");

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

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