Script Sample/Quiz Effect
quizEffect01
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 추가
});