퀴즈 문제 만들기01

퀴즈 정답확인하기 유형

자바스크립트를 이용하여 웹디자인기능사 필기문제를 버튼 형식 퀴즈로 제작해보기!

---

정답확인하기 유형으로 제작한 자바스크립트 소스

퀴즈박스의 번호, 퀴즈 문제, 답 등을 모두 자바스크립트를 통해 보여준다.
정답확인버튼을 눌렀을 경우 깔끔하게 답만 보일 수 있게 정답확인 버튼을 없애준다.

//선택자
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 quizView = document.querySelector(".quiz__view"); //강아지

//문제정보
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"; //css 스타일
    quizResult.style.display = "block";
    quizView.classList.add("like");
});

!기억해야 할 문법!

버튼을 클릭할 때 정답을 보이게 해준다.

quizResult.style.display = "block";

버튼을 클릭했을 때 이벤트를 실행해준다.

quizConfirm.addEventListener("click", function(){}    

버튼을 클릭했을 때 정답확인버튼을 숨겨준다. (자바스크립트로 CSS스타일 선언하는 방법)

quizResult.style.display = "none" 

요소에 텍스트 설정하기

innerText()

---

결과보기

원본 사이트 보기