Quiz Effect - 주관식 정답 확인

const quizType = document.querySelector(".quiz__type"); //퀴즈 종류
const quizNumber = document.querySelector(".quiz__number"); //퀴즈 번호
const quizAsk = document.querySelector(".quiz__ask"); //퀴즈 질문
const quizConfirm = document.querySelector(".quiz__confirm"); //정답 확인 버튼
const quizResult = document.querySelector(".quiz__result"); //정답 결과
const quizDog = document.querySelector(".dog");     //강아지 애니메이션
//문제 정보 저장
const answerType = "HTML"
const answerNum = 1;
const answerAsk = "컨텐츠의 구조를 정의하는 마크업 언어는 무엇일까요?";
const answerResult = "HTML";
//문제 출력, querySelector로 받은 태그들에 하나씩 입력해준다.
quizType.textContent = answerType;
quizNumber.textContent = answerNum + ". ";
quizAsk.textContent = answerAsk;
quizResult.textContent = answerResult;
//정답 확인버튼 클릭 이벤트
quizConfirm.addEventListener("click", () => {
    quizConfirm.style.display = "none";     //클릭하면 확인 버튼 사라지게한다.
    quizResult.style.display = "block";     //클릭하면 정답이 보이게 한다.
    quizDog.classList.add("like");          //클래스 like 추가로 애니메이션을 입힌다.
})

 

퀴즈 이펙트 정답확인 사이트