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

    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 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.style.display = "none"
        quizResult.style.display= "block"
        quizDog.classList.add("like");
    })

전체 사이트 보기