퀴즈 유형 02

02. 퀴즈 유형

퀴즈를 스크립트로 퀴즈 질문와 번호, 확인 버튼,결과를 도출해보았다. 이번에는 답을 주관식으로 적어 if문을 사용해 참인지 거짓인지 구별할 수 있습니다.

아래는 HTML입니다. 가지고 있는 애니메이션을 가져와 문제를 맞추면 반응할 수 있도록 제재작 하였으며 따로 구형으로 애니메이션을 넣었습니다.

     <div class="quiz_wrap">
    <div class="quiz">
        <span class="quiz_type"></span>
        <h2 class="quiz_question">
            <span class="number"></span>
            <div class="ask"></div>
        </h2>
        <div class="quiz_view">
            <div class="true">정답입니다.</div>
            <div class="false">틀렸습니다.</div>
            <div class="dog">
                <div class="head">
                    <div class="ears"></div>
                    <div class="face"></div>
                    <div class="eyes">
                        <div class="teardrop"></div>
                    </div>
                    <div class="nose"></div>
                    <div class="mouth">
                        <div class="tongue"></div>
                    </div>
                    <div class="chin"></div>
                </div>
                <div class="body">
                    <div class="tail"></div>
                    <div class="legs"></div>
                </div>
            </div>
        </div>
        <div class="quiz_answer">
            <input type="text" class="input" placeholder="정답을 적어주세요.">
            <button class="confirm">정답 확인하기</button>
            <div class="result"></div>
        </div>
    </div>
</div> 

아래는 자바스크립트입니다. function을 화살표 함수로 생략하였으며, toLowerCase().trim()을 사용하여 소문자로도 정답이라고 나올 수 있게 하였습니다.

     //선택자
    const quizType = document.querySelector(".quiz_type");                              //퀴즈 종류
    const quizNumber = document.querySelector(".quiz_question .number");     //퀴즈 번호
    const quizAsk = document.querySelector(".quiz_question .ask");                  //퀴즈 질문
    const quizConfirm = document.querySelector(".quiz_answer .confirm");       //정답 확인 버튼
    const quizResult = document.querySelector(".quiz_answer .result ");            //정답 결과
    const quizInput = document.querySelector(".quiz_answer .input");              //사용자 정답
    const quizView = document.querySelector(".quiz_view");                            //강아지
    
    //문제 정보
    const answerType = "웹디자인기능사";
    const answerNum = "2";
    const answerAsk = "기업의 새로운 이념 구축에 필요한 이미지와 커뮤니케이션 시스템을 의도적,계획적으로 만들어내는 기업 이미지 통합 전략은 무엇입니까?";
    let answerResult = "CIP";  

    //문제 출력
    quizType.textContent = answerType;
    quizNumber.textContent = answerNum + ". ";
    quizAsk.textContent = answerAsk;
    quizResult.textContent = "정답은 : " + answerResult + " 입니다.";

    //정답 숨기기
    quizResult.style.display = "none"
    
    //정답 확인
    //정답 버튼을 클릭했을 때.
    //정답이 맞는지 비교해야한다.
    quizConfirm.addEventListener("click", () => {       //function을 화살표 함수로 줄였다.
        quizInput.style.display = "none"
        quizResult.style.display = "block"
        quizConfirm.style.display = "none"
      
        //사용자 정답
        const userWord = quizInput.value.toLowerCase().trim();      //소문자,여백
        answerResult = answerResult.toLowerCase().trim();            //우변을 좌변으로 대입 (상수여서 변경x, 변수로 바꿔줌)

        // console.log(userWord) 
        // console.log(answerResult) 

        //사용자 정답 == 문제 정답
        if(userWord == answerResult){
            //정답
            quizView.classList.add("like");
            //alert("정답입니다.")
        } else {
            //오답
            quizView.classList.add("dislike");
            //alert("오답입니다.")
        }
    }); 

원본 소스 보여주기