quiz01

728x90

quiz01

정답 확인 버튼을 누르면 답이 나오는 구조이다.

선택자

const quizType = document.querySelector(".quiz__type");   //퀴즈종류
const quizNum = 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 answeType = "웹디자인기능사";
const answerNum = 1;
const answerask = " 인접하는 두 색의 경계 부분에 색상, 명도, 채도의대비가 더욱 강하게 일어나는 현상은?"
const answerResult = "연변대비";

문제출력

 quizType.innerText = answeType;
quizNum.innerText = answerNum + ".";
quizask.innerText = answerask;
quizResult.innerText = answerResult;

정답 숨기기

quizResult.style.display = "none";

정답 확인 버튼

toLowerCase 소문자로 바꿔줌 trim 여백

quizconfirm.addEventListener("click", function () {
quizconfirm.style.display = "none";
quizResult.style.display = "block";
quizDog.classList.add("like");

원본 소스 보기

728x90