Quiz Effect 03 - 주관식 : 여러문제 정답 확인하기

     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 quizInfo = [
          {
              answerType : "javascript",
              answerNum : 1,
              answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
              answerResult : "javascript"
          },
          {
              answerType : "html",
              answerNum : 2,
              answerAsk : "다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의하는 태그는 무엇입니까?",
              answerResult : "a"
          },
          {
              answerType : "css",
              answerNum : 3,
              answerAsk : "CSS에서 바깥쪽 여백을 설정할때 사용하는 속성은 무엇입니까?",
              answerResult : "margin"
          }
      ]

      
      // 문제 출력
   
      quizInfo.forEach((el, index) => {
          quizType[index].textContent = quizInfo[index].answerType;
          quizNumber[index].textContent = quizInfo[index].answerNum + ". ";
          quizAsk[index].textContent = quizInfo[index].answerAsk;
          quizResult[index].textContent = "정답 : " + quizInfo[index].answerResult;
      })


      // 정답 숨기기
      quizResult.forEach(el => {
          el.style.display = "none"
      });


      // 정답 확인
      quizConfirm.forEach((btn,num) => {			// 정답 확인 버튼이 여러개라 forEach
        btn.addEventListener("click", ()=>{			// 정답 확인 버튼을 클릭했을 때

            const userWord = quizInput[num].value.toLowerCase().trim();	// 사용자 정답값 가져오기
            if (userWord == quizInfo[num].answerResult) {				// 사용자 정답==진짜 정답 비교
                quizView[num].classList.add("like");						// 맞으면 like 클래스 추가, 정답확인버튼 안보이게
                quizConfirm[num].style.display = "none"
            } else {
                quizView[num].classList.add("dislike");			// 틀리면 dislkie 클래스 추가
                quizConfirm[num].style.display = "none"		// 정답 확인 버튼 안보이게
                quizResult[num].style.display = "block"			// 정답 보이게
                quizInput[num].style.display = "none"			// 정답 입력 창 안보이게
            }
        })
      });

전체 사이트 보기