02. 주관식 : 사용자 정답 확인하기

        const quizCategory = document.querySelector(".quiz__category") //퀴즈 종류
        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")          //input박스

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

        //문제 출력
        quizCategory.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";
            const userWord = quizInput.value.toLowerCase().trim();  //사용자 데이터

            //사용자 데이터 == 정답
            if(userWord == answerResult){
                quizView.classList.add("like");
                quizResult.style.display = "none";
               
            } else {
                quizView.classList.add("dislike");
                quizInput.style.display = "none";
            }
        });

퀴즈02 사이트