Quiz Effect 04 - 객관식 : 정답 확인하기

    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 quizView = document.querySelector(".quiz__view");          	   // 문제 화면
    const quizSelects = document.querySelector(".quiz__selects");      // 객관식 보기전체
    const quizChoice = quizSelects.querySelectorAll(".choice");             // 각각 보기들(1번,2번..)
    const quizSelect = quizSelects.querySelectorAll(".select");    	   // 인풋박스 보기들(1번,2번..)

    // 문제 정보
    const quizInfo = [
        {
            answerType : "javascript",
            answerNum : 1,
            answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
            answerChoice : ["javascript", "html", "css", "jquery"],
            answerResult : "1",
            answerEx : "객체 기반의 스크립트 프로그맹 언어는 자바스크립트입니다."
        }
    ];
    // 문제 출력
    function updataQuiz() {
        quizType.textContent = quizInfo[0].answerType;
        quizNumber.textContent = quizInfo[0].answerNum + ". "
        quizAsk.textContent = quizInfo[0].answerAsk;
        quizResult.textContent = quizInfo[0].answerEx;

        const quizLength = quizInfo[0].answerChoice.length;

        for(let i=0; i<quizLength; i++){
            quizChoice[i].textContent = quizInfo[0].answerChoice[i];
        }

        //설명 감추기
        quizResult.style.display = "none"
    }
    updataQuiz();
    
    // 정답 확인
    function answerQuiz() {
        for(let i=0; i<quizSelect.length; i++){
            if(quizSelect[i].checked == true){		// 사용자가 클릭한 input --> checked : 사용자가 선택한 정답 == 객체 안에 정답
                if(quizSelect[i].value == quizInfo[0].answerResult){		// 문제 정답과 사용자선택값이 같으면
                    quizView.classList.add("like")		// like 추가
                    quizView.classList.remove("dislike")	// dislike 제거(여러번 반복 할 수 있도록)
                    quizResult.style.display = "none"		// 해설 안보이게
                } else {
                    quizView.classList.remove("like")		// like 제거 (여러번 반복 할 수 있도록)
                    quizView.classList.add("dislike")		// dislike 추가
                    quizResult.style.display = "block"		// 해설 보이게
                }
            }
        }
    }
    quizConfirm.addEventListener("click", answerQuiz)

전체 사이트 보기