Quiz Effect 02 - 주관식 : 사용자 정답 확인하기

     hljs.highlightAll();						// 코드 나타낼때 쓰는 스크립트
    const modal = function(){				// modal 창 띄우는 함수 만들기.
        document.querySelector(".source-btn").addEventListener("click", () => {		// 소스보기 버튼을 클릭하면
            document.querySelector("#modal").classList.add("show");					// 모달창 보여주기
            document.querySelector("#modal").classList.remove("hide");				// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거
        })
        document.querySelector(".close").addEventListener("click", () => {				// 닫기 버튼을 클릭하면
            document.querySelector("#modal").classList.add("hide");					// 모달창 숨김
        })
    }
    modal();
    
    const tabMenu = function(){							// 탭메뉴 함수 만들기.
        const tabBtn = document.querySelectorAll(".menu-bar > ul > li");		// 탭메뉴 버튼들 (html,css,javascript)
        const tabCont = document.querySelectorAll(".content > .main > div");	// 코드보이는 박스
            
        tabBtn.forEach((el, index) => {				// 요소가 여러개라 forEach로 작업
            el.addEventListener("click", ()=>{			// 버튼을 클릭하면
                tabBtn.forEach(btn => {				// 요소가 여러개라 forEach로 작업
                    btn.classList.remove("active");		// 버튼 모두에서 active 제거
                });
                el.classList.add("active");				// 클릭한 버튼만 active 추가

                
                tabCont.forEach(hide => {				// 우선 모든 컨텐츠 박스 안보이게 작업한 뒤 하나씩 보이게 설정. 
                    hide.style.display = "none"
                })
                tabCont[index].style.display = "block"
            })
        })
    }
    tabMenu();
    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 quizAnswer = document.querySelector("input")             	   // input박스
    
    // 문제 정보
    const answerType = "javascript";
    const answerNum = 2;
    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 = quizAnswer.value.toLowerCase().trim(); // 사용자 정답
        if (userWord == answerResult) {			// 사용자정답 == 정답 비교했을때 
            quizDog.classList.add("like")				// 맞으면 like 클래스 추가, 정답입니다 띄우기
            quizResult.style.display = "none"
        } else {
            quizDog.classList.add("dislike")			// 틀리면 dislike 클래스 추가, 틀렸습니다 띄우기
            quizAnswer.style.display = "none";
        }
    });

    
    

전체 사이트 보기