티스토리 뷰


//설명. 참고사항.

   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(".dog");                     //강아지
        const quizTrue = document.querySelector(".true");                    //정답입니다
        const quizFalse = document.querySelector(".false");                  //틀렸습니다.

        //문제 정보
        const answerType = "javascript"
        const answerNum = 1;                                                    
        const answerAsk = "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?";
        const answerResult = "javascript";

        //문제 출력
        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");
        })
        quizResult.addEventListener("click", ()=>{
            quizConfirm.style.display = "block";
            quizResult.style.display = "none";
            quizDog.classList.remove("like");
        })
       
        //정답이 맞으면 정답입니다~, 아니면 틀렸습니다~ 강아지도 웃고 울고 나오게
        const inputBox = document.querySelector(".quiz__input");
        const quizData = inputBox.value                         //인풋 박스에 입력한 값
        quizConfirm.addEventListener("click", ()=>{
         
          factCheck();                                      // 팩트체크 함수를 만들어서 실행.
        })
        function factCheck(){           
            if(answerResult==inputBox.value){               // 만약 결과(정답)이 입력한 값과 같으면
                quizDog.classList.remove("dislike");        //dislike 클래스 삭제
                quizDog.classList.add("like");              //like 클래스 추가
                quizFalse.style.display = "none"            //틀렸습니다 안보이게
                quizTrue.style.display = "block"            //정답 입니다 보이게
            } if(answerResult!=inputBox.value){             // 입력한 값과 정답이 틀리면
                quizDog.classList.remove("like");           //like 클래스 삭제 
                quizDog.classList.add("dislike");           //dislike 클래스 추가
                quizTrue.style.display = "none"             //정답입니다 안보이게
                quizFalse.style.display = "block"           //틀렸습니다가 보이게
            }            
        };

 

 

댓글
© 2018 webstoryboy