JS 응용하기 - 퀴즈 01

1번 정답 확인하는 페이지 만들기

result를 숨긴 상태에서 confirm 버튼을 누르면 confirm을 숨기고 result를 출력합니다.

---

---

자바스크립트

//선택자
const quizType = document.querySelector(".quiz__type");                 //퀴즈 종류 : .quiz__type 클래스 선택
const quizNumber = document.querySelector(".quiz__question .number")    //퀴즈 번호 ; .quiz__question 에서 .number 클래스 선택
const quizAsk = document.querySelector(".quiz__question .ask")          //퀴즈 질문 : .quiz__question 에서 .confirm 클래스 선택
const quizConfirm = document.querySelector(".quiz__answer .confirm")    //정답 확인 버튼 : .quiz__answer 에서 .result 클래스 선택
const quizResult = document.querySelector(".quiz__answer .result")      //정답 결과 : .quiz__answer 에서 .result 클래스 선택
const quizDog = document.querySelector(".quiz__view .dog")              //강아지 : .quiz__view에서 .dog클래스 선택

//문제 정보
const answerType = "웹디자인기능사";
const answerNumber = 1+".";
const answerAsk = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?"
const answerResult = "연변대비"

//문제 출력 :: innerHTML은 태그도 인식하고, innerText는 텍스트만 인식합니다.
quizType.innerText = answerType         //answerType의 텍스트만 인식해 대입
quizNumber.innerText = answerNumber     //answerNumber의 텍스트만 인식해 대입
quizAsk.innerText = answerAsk           //answerAsk의 텍스트만 인식해 대입
quizResult.innerText = answerResult     //answerResult의 텍스트만 인식해 대

//정답 숨기기
quizResult.style.display="none"; // quizResult의 스타일에 display "none"을 선언해서 정답을 먼저 숨겨놓

//정답 확인
//정답 버튼을 클릭하면 -> 확인버튼 안보이게... 숨겨진 정답은 보이게...
//정답을 확인하면 강아지가 웃고 있어야 함 // 클래스 like를 추가함
quizConfirm.addEventListener("click", function(){   //quizConfirm에 상황이 발생(대상은 클릭, 실행시킬 함수의 내용은
    quizConfirm.style.display = "none";             //quizConfirm(정답확인하기)를 숨기고
    quizResult.style.display = "block";             //위에서 숨겨놨던 quizResult(연변대비)를 표시
    quizDog.classList.add("like");                  //클릭이 발생하면 like 클래스를 추가해 강아지를 웃게 만듬 //클래스를 추가하는 방식
})                                                  //무언가 상황이 발생했을때를 의미하는 "클릭"이 발생하면 function을 실행하라

---

원본 소스 보기