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 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){			//사용자가 입력한 값와 answerResult 값이 같으면
			quizView.classList.add("like");		//quizView에 like 추가
			quizResult.style.display = "none";	//quizResult 보이지 않게
	}	else {									//사용자가 입력한 값과 answerResult 같지 않으면 
			quizView.classList.add("dislike");	//quizView에 dislike 추가
			quizInput.style.display = "none";	//quizInput 보이지 않게
		}
      });

 

퀴즈 이펙트