퀴즈 만들기01/ 정답 확인 유형

퀴즈 만들기_정답 확인하기 유형

오늘은 자바 스크립트를 이용해서 퀴즈를 만들어 보겠습니다. 스크립트를 이용해 문제를 입력 후, 정답확인을 눌렀을 때
정답 확인하기 버튼을 눌렀을 때 정답을 보여줍니다.

원본 소스 보기

Javascript

innerHTML/innerText : html은 태그를 인식하고, text 는 말그대로 텍스트로 출력합니다.
textContent()를 사용할 수 도 있지만 이 메서드는 브라우저 호환문제로 잘 쓰지 않습니다.

// 선택자            // querySelector를 이용해 각 class이름에 연결시킴
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;

// 정답 숨기기      //↓ 스크립트로도 css속성을 부여할 수 있다 
quizResult.style.display = "none";

// 정답 확인
// 정답 버튼 클릭 > 확인버튼 안보이게, 숨겨진 정답은 보이게, 정답을 확인하면 댕댕이가 웃고 있어야 함.
// quizConfirm.addEventListener("click", function(){}); > 버튼을 클릭하면 함수 실행
quizconfirm.addEventListener("click", function(){
    quizconfirm.style.display = "none";             //정답 버튼 클릭시 정답확인버튼 숨김
    quizResult.style.display = "block";             // 정답 표시
    quizDog.classList.add("like");                  // dog에 클래스"like" 부여
});