Quiz Effect02 - 주관식 : 정답 쓰고 확인

//설명. 참고사항.

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 quizTrue = document.querySelector(".true");                    //정답입니다
const quizFalse = document.querySelector(".false");                  //틀렸습니다.

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

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

//정답 확인
//정답 버튼을 클릭하면 정답확인은 안보이게, 숨겨진 정답은 보이게
quizConfirm.addEventListener("click", ()=>{
	quizConfirm.style.display = "none";
    quizResult.style.display = "block";           
    quizDog.classList.add("like");
})
quizResult.addEventListener("click", ()=>{
	quizConfirm.style.display = "block";
    quizResult.style.display = "none";
    quizDog.classList.remove("like");
})
       
//정답이 맞으면 정답입니다~, 아니면 틀렸습니다~ 강아지도 웃고 울고 나오게
const inputBox = document.querySelector(".quiz__input");
const quizData = inputBox.value                         //인풋 박스에 입력한 값
quizConfirm.addEventListener("click", ()=>{
         
	factCheck();                                      // 팩트체크 함수를 만들어서 실행.
})
function factCheck(){           
	if(answerResult==inputBox.value){               // 만약 결과(정답)이 입력한 값과 같으면
    	quizDog.classList.remove("dislike");        //dislike 클래스 삭제
        quizDog.classList.add("like");              //like 클래스 추가
        quizFalse.style.display = "none"            //틀렸습니다 안보이게
        quizTrue.style.display = "block"            //정답 입니다 보이게
    } if(answerResult!=inputBox.value){             // 입력한 값과 정답이 틀리면
    	quizDog.classList.remove("like");           //like 클래스 삭제 
        quizDog.classList.add("dislike");           //dislike 클래스 추가
        quizTrue.style.display = "none"             //정답입니다 안보이게
        quizFalse.style.display = "block"           //틀렸습니다가 보이게
    }            
};

https://jiseonpack.github.io/webs_class/javascript/effect/quizEffect02.html

퀴즈 이펙트