quizeffect02 - 주관식 : 사용자 정답 확인하기

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 quizView = document.querySelector(".quiz__view"); // 강아지 애니메이션
const quizInput = document.querySelector(".quiz__input");	//사용자 정답
const True = document.querySelector(".quiz__view .true")	//결과창

//문제 정보
const answerType = "JAVASCRIPT";		//문제유형
const answerNum = 1;					//문제 번호
const answerAsk = "객체 기반의 프로그래밍 언어는 무엇일까요?"	//문제 질문
const answerResult = "javascript"		//정답

//문제 출력
quizType.textContent = answerType;			//quizType에 문제유형
quizNumber.textContent = answerNum + ".";	//quizNumber에 문제번호
quizAsk.textContent = answerAsk;			//quizAsk에 문제질문
quizResult.textContent = answerResult;		//quizResult에 결과창

//정답확인
quizConfirm.addEventListener("click", ()=>{		//정답확인을 클릭했을 때
    quizConfirm.style.display = "none"				//정답확인은 안보이게
    quizResult.style.display = "block"				//정답은 보이게

    const userWord = quizInput.value.toLowerCase().trim();	//사용자가 적은 정답

    if(userWord==answerResult){				//사용자가 적은 정답과 정답이 같을 때
        quizView.classList.add("like")		//quizView에 class="like"를 적용
        quizResult.style.display = "none"	//정답은 안보이게
    } else {								//사용자가 적은 정답과 정답이 다를 때
        quizView.classList.add("dislike")	//quizView에 class="dislike"를 적용
        quizInput.style.display = "none"	//사용자 정답은 안보이게
    }
})