Quiz Effect - 주관식 : 정답 쓰고 확인하기

 

설명

사용자가 입력한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다.

const quizType = document.querySelector(".quiz__Type")          //퀴즈 종류
const quizNumber = document.querySelector(".quiz__number")      //퀴즈 번호
const quizAsk = document.querySelector(".quiz__ask")            //퀴즈 질문
const quizConfirm = document.querySelector(".quiz__confirm")    //정답 확인 버튼
const quizResult = document.querySelector(".quiz__result")      //정답 결과
const quizDog = document.querySelector(".dog")                  //강아지
const quizInput = document.querySelector(".quiz__input")        //input박스
const quizView = document.querySelector(".quiz__view")

//문제 정보
const answerType = "javascript"
const answerNum = 1;
const answerAsk = "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?";
const answerResult = "javascript";

//문제 출력
quizType.textContent = answerType;
quizNumber.textContent = answerNum + ". ";
quizAsk.textContent = answerAsk;
quizResult.textContent = "정답은 : " + answerResult + " 입니다.";

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

//정답확인
quizConfirm.addEventListener("click", () => {
	quizConfirm.style.display = "none";
    quizResult.style.display = "block";
});

quizConfirm.addEventListener("click", () => {
	const answerWord = quizInput.value.toLowerCase().trim();    //사용자가 입력한 데이터
    if(answerWord == answerResult){
    	quizView.classList.add("like");
        quizResult.style.display = "none";
    } else {
    quizView.classList.add("dislike");
    quizInput.style.display = "none";
    }
});