728x90
퀴즈 효과01
자바스크립트를 이용하여 퀴즈를 만들 수 있습니다. 이번 퀴즈는 정답확인하기를 클릭하면 정답을 확인할 수 있습니다.
자바스크립트
퀴즈를 만들기 위한 자바스크립트 작성법입니다. 변수선언을 통해 선택자와 문제 정보를 저장합니다. innerText를 이용하여 문제정보를 출력할 수 있는데, innerText외에 textContent도 사용할 수 있습니다.
//선택자
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.innerText = answerType;
quizNumber.innerText = answerNum + ". ";
quizAsk.innerText = answerAsk;
quizResult.innerText = answerResult;
//정답 숨기기
quizResult.style.display = "none";
//정답 확인
//정답 버튼을 클릭하면 확인버튼 안 보이게, 숨겨진 정답은 보이게
//정답을 확인하면 강아지가 웃고 있어야함 // 클래스 like 추가함
quizConfirm.addEventListener("click", function(){ //정답 버튼을 클릭했을 때
quizConfirm.style.display = "none";
quizResult.style.display = "block";
quizDog.classList.add("like");
});
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| SEARCH Effect 02 (3) | 2022.08.17 |
|---|---|
| SEARCH Effect 01 (3) | 2022.08.16 |
| QUIZ Effect 04 (7) | 2022.08.08 |
| QUIZ Effect 03 (11) | 2022.08.05 |
| QUIZ Effect 02 (9) | 2022.08.04 |
댓글