Quiz Effect 01 - 주관식 : 정답확인

{
    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(".quiz__view .dog");
        const quizsource = document.querySelector(".source_btn")
        

        //문제정보
        const answerType = "HTML"
        const answerNum = 1;                                            //정답 번호
        const answerAsk = "컨텐츠 구조를 정의하는 마크업 언어는 무엇일까요?"    //질문
        const answerResult = "HTML"                                         //정답 

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

        quizConfirm.addEventListener("click",() =>{         //quizConfirm를 클릭하면 
            quizConfirm.style.display = "none";             //quizConfirm의 display=none 시키고
            quizResult.style.display = "block";             //quizResult의 display는 block
            quizDog.classList.add("like")               //강아지는 웃게
        })

        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";
            })
        })
}