퀴즈 이펙트 1

퀴즈 이펙트

퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다.

정답 확인하기 유형

버튼을 누르면 정답을 보여주는 유형의 문제에 활용가능한 이펙트입니다.

원본 소스 보기

해당 이펙트의 자바스크립트는 다음과 같습니다. 먼저 선택자를 지정한 후, 각각의 선택자로 지정한 구역에 알맞은 정보를 대입합니다.

//선택자
const quizType = document.querySelector(".quiz__type");                  //퀴즈 종류
const quizNumber = document.querySelector(".quiz__question .number");    //퀴즈 번호
const quizAsk = document.querySelector(".quiz__question .ask");          //퀴즈 질문
const quizConfilm = document.querySelector(".quiz__answer .confilm");    //정답 확인 버튼
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;        //innerText는 자바스크립트에서 만들어 놓은 요소객체입니다.
quizNumber.innerText = answerNum + "."; //해당하는 구역에 텍스트를 출력합니다.
quizAsk.innerText = answerAsk;
quizResult.innerText = answerResult;

//정답 숨기기
quizResult.style.display = "none";

//정답 확인
//정답 버튼을 클릭하면 확인 버튼이 안보이게, 숨겨진 정답은 보이게 합니다.
quizConfilm.addEventListener("click", function(){    //버튼을 클릭하면 실행하라는 의미입니다.
    quizConfilm.style.display = "none";
    quizResult.style.display = "block";
});