"퀴즈이펙트" Quiz 01 : 정답 확인하기 유형

Quiz 01.

자바스크립트를 활용하여 퀴즈를 만들어 봅시다.

원본 소스보기

자바스크립트 활용

1. 선택자를 먼저 지정해주고 문제 정보를 정리해준 후 문제 출력을 위해 선택자와 문제 정보를 innerText를 이용하여 문제를 출력해줍니다.
2. 정답을 확인하기 위한 버튼과 정답을 확인한 후의 화면을 디자인해줍니다. 이 때 정답을 확인하기 위해서 클릭하는 효과로 이벤트 객체인 addEventListener()메서드를 활용해 줍니다.

//선택자
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";

//정답 확인
//정답 버튼을 클릭하면 확인버튼 안보이게... 숨겨진 정답은 보이게...
//정답을 확인하면 강아지가 웃고 있어야 함 //class like를 추가함!
quizConfirm.addEventListener("click", function(){
    quizConfirm.style.display = "none";
    quizResult.style.display = "block";
    quizDog.classList.add("like")
}); //addEventListener = 버튼을 클릭하면 사건이 일어나게 하는 것

'Effect(자바스크립트 활용) > Quiz Effect 퀴즈이펙트' 카테고리의 다른 글

"퀴즈이펙트" Quiz 06 : 객관식(여러문제) 확인하기 : 슬라이드 형식  (3)	2022.08.24
"퀴즈이펙트" Quiz 05 : 객관식 60문제 유형  (8)	2022.08.24
"퀴즈이펙트" Quiz 04 : 객관식(한문제) 유형  (7)	2022.08.08
"퀴즈이펙트" Quiz 03 : 여러 개의 주관식 유형  (6)	2022.08.05
"퀴즈이펙트" Quiz 02 : 주관식 유형  (9)	2022.08.04