퀴즈 이펙트 만들기 01

퀴즈 만들기

자바스크립트 함수를 활용하여 퀴즈 만들기입니다.

---

퀴즈 만들기 01

이번 퀴즈는 정답 확인하기 유형으로 정답 확인 클릭 시 정답을 보여주는 간단한 형태입니다.

HTML과 CSS로 만들어놓은 틀에 스크립트로 문제와 정답을 출력하기 위해서 우선 선택자를 지정해놓아야 하며, 요소 매서드와 이벤트 매서드를 활용해 지정한 선택자에 출력할 수 있습니다.

○ 선택자

//선택자
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 = "01";
const answerAsk = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const answerResult = "연변대비";

배너, 문제, 답안에 각각 출력하기 위한 주소를 지정해주기 위해 querySelector를 사용하여 변수를 지정하며, 각 주소에 출력할 내용 역시 새 변수에 값을 저장합니다.

○ 요소 매서드

//문제 출력
quizType.innerText = answerType;
quizNumber.innerText = answerNum + ". ";
quizAsk.innerText = answerAsk;
quizResult.innerText = answerResult;

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

각 주소 출력하기 위해 요소 매서드를 사용하여 주소와 출력값을 매치합니다. 출력해주기 위한 매서드는 여러개 있으며 이번엔 innerText를 사용하였습니다.
또한, 정답을 확인하기 전에 정답 출력값을 숨기기 위해 스크립트 내에서 style을 사용하여 출력값을 숨겼습니다.

○ 이벤트 매서드

//정답 확인
//정답 버튼을 클릭하면 확인버튼 안보이게, 숨겨진 정답은 보이게 만들기
quizConfirm.addEventListener("click", function(){
    quizConfirm.style.display = "none";     //자바스크립트에 css를 넣는 방법
    quizResult.style.display = "block";
    quizDog.classList.add("like");
});

마지막으로 클릭시 확인 버튼을 숨기고 정답을 출력시키기 위해 addEventlistenr을 사용합니다. 클릭으로 발동하기 위해 "click"를 넣으며 클릭 후 발생할 실행문을 function 안에 넣어줌으로서 퀴즈 만들기가 완성되었습니다.

원본 소스 보기