GYChoi 2022. 2. 21. 09:09

https://garenchoi.github.io/webs_class/javascript/effect/quizEffect01.html

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(".quiz__view .dog");     //강아지

// 문제 정보
const answerType = "html";
const answerNum = 1;
const answerAsk = "컨텐츠의 구조를 정의하는 마크업 언어는 무엇일까요?";
const answerResult = "html";

// 문제 출력
quizType.textContent = answerType;			//quizType에 answerType(html)출력
quizNumber.textContent = answerNum + ".";	//quizNumber에 answerNum + "."(1.) 출력
quizAsk.textContent = answerAsk;			//quizAsk에 answerAsk(컨텐츠의 구조를 정의하는 마크업 언어는 무엇일까요?) 출력
quizResult.textContent = answerResult		//quizResult에 answerResult(html) 출력

//정답 확인
quizConfirm.addEventListener("click", () => {	//quizConfirm(정답 확인 버튼)을 클릭 했을 때 이벤트 설정
    quizConfirm.style.display = "none";			//quizConfirm에 스타일 display none 추가
    quizResult.style.display = "block";			//quizResult(정답 결과 창)에 스타일 display block 추가
    quizDog.classList.add("like");				//quizDog(강아지)에 클래스 like 추가
});