QuizEffect01

quizEffect01

웹디자인기능사 필기를 대비하여 js를 이용해 기출문제를 만들어봤습니다.
1번 문제의 답을 확인하며 사용된 js코드를 해석해봅니다.

---

원본 소스 보기

자바스크립트

html, css로 구성한 레이아웃에 javascript를 사용하여 데이터 값을 삽입합니다.
이벤트 메서드를 통해 클릭했을 때 저장된 코드를 실행하게 합니다.

//선택자
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.textContent = answerType;
quizNumber.textContent = answerNum + ".";       //innerText와 동일하나 호환성 문제로 사용하기도 합니다.
quizAsk.innerText = answerAsk;
quizResult.innerText = answerResult;

//정답 숨기기
quizResult.style.display = "none";

//정답 확인
//정답 버튼을 클릭하면 확인 버튼 안보이게 함
//숨겨진 정답은 보이게 함
quizConfirm.addEventListener("click", function () {
    quizConfirm.style.display = "none";     
    quizResult.style.display = "block";
});