[Quiz Effect] 퀴즈 이펙트 01 - 정답 확인하기 유형

퀴즈 만들기 01

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다.
이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다!
변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다!

---

정답 확인하기 유형

첫번째 정답 확인하기 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다.
HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것.

// 선택자 : 상수 const를 필요한 만큼 선언한 다음 HTML 영역의 div, 시맨틱 태그 등의 Class명과 연결시킨다.
//const 적절한 상수 이름 = document.querySelector("Class명");
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");             // 강아지

// 문제 정보
// HTML 부분은 비워두고 이곳에다가 출력하고자 하는 값을 입력한다. 업데이트 시 이곳에서 수정할 것.
const answerType = "웹디자인기능사";
const answerNum = "1";
const answerAsk = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const answerResult = "연변대비";

// 문제 출력
// 위의 '문제 정보'에서 상수에 저장해두었던 값을 출력시키는 방법임
// TMI) innerText 대신 textContent를 사용하면 익스플로어까지 호환 가능.
quizType.innerText = answerType;
quizNumber.innerText = "0" + answerNum + ". ";
quizAsk.innerText = answerAsk;
quizResult.innerText = answerResult;

// 정답 숨기기
// '정답 확인' 버튼을 누르기 전까지는 정답을 숨겨야 함
quizResult.style.display = "none";

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

원본 소스 보기