Quiz Effect 2 - 주관식 : 사용자 정답 확인

{
 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 quiztrue = document.querySelector(".quiz__view .true")
        // const quizfalse = document.querySelector(".quiz__view .false")



        //문제정보
        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";         //정답 결과만 나오게 처리
            const userWord = quizInput.value.toLowerCase().trim();  //사용자 데이터 체인기능으로 연결해서 사용 

            //사용자 데이터 == 정답 
            if(userWord==answerResult){     //사용자가 작성한 데이터와 정답이 같다면
                quizView.classList.add("like")      //강아지한테 like를 추가
                quizResult.style.display="none";    //정답 결과는 none
            }else {
                quizView.classList.add("dislike")       //틀렸다면 강아지는 dislike 추가
                quizInput.style.display = "none";       //사용자가 작성한 값 none처리
            }
        })

        let windowWrapper = document.querySelector('#modal');                   //#modal을 windowWrapper에 저장
            document.querySelector(".source_btn").addEventListener("click",()=>{ //source_btn을 클릭하면
                document.querySelector("#modal").classList.add("show")          //modal에 show를 추가하고
                document.querySelector("#modal").classList.remove("hide")        //hide를 삭제
            })
            document.querySelector("#modal-close").addEventListener("click", ()=>{      //modal-close를 클릭하면
                document.querySelector("#modal").classList.add('hide');          //hide를 추가
            })


        var tabBtn = document.querySelectorAll(".menu-bar > ul > li");
        var tabCont = document.querySelectorAll(".content > div");

        tabBtn.forEach((btn, index)=>{
            btn.addEventListener("click", ()=>{
                 //모든 클래스 active 삭제
            tabBtn.forEach((el)=>{
                el.classList.remove("active");
            })
            //내가 클릭한건 active 추가
            btn.classList.add("active");

            //모든 컨텐츠 박스 안보이게
            tabCont.forEach((el)=>{
                el.style.display = "none";
            })
            //내가 클릭한 콘텐츠 박스를 보이게
            tabCont[index].style.display ="block";
            })
        })
}