정답에 따라 표정이 변하는 강아지 퀴즈 만들기! - 2

오늘은 주관식 유형을 추가해보도록 하겠습니다.

 

 

HTML 작성

<main id="main">
        <div class="quiz__wrap">
            <div class="quiz">
                <div class="quiz__header">
                    <h2 class="quiz__title"><span></span> <em></em></h2>
                </div>
                <div class="quiz__main">
                    <div class="quiz__question">
                        <em></em>. <span></span> 
                    </div>
                    <div class="quiz__view">
                        <div class="dog__wrap">
                            <div class="card-container">
                                <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>
                    </div>
                    <div class="quiz__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요!">
                        <button class="confirm"></button>
                        <div class="result"></div>
                    </div>
                </div>
                    <div class="quiz__desc">
                    </div>
                </div>
            </div>
        </div>
    </main>

script

<script>
        // 선택자
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizTitle = quizWrap.querySelector(".quiz__title span");
        const quizTime = quizWrap.querySelector(".quiz__title em");
        const quizQusetionNum = quizWrap.querySelector(".quiz__question em");
        const quizQuestion = quizWrap.querySelector(".quiz__question span");
        const quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizAnswerCofirm = quizWrap.querySelector(".quiz__answer .confirm");     
        const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
        const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
        const dogWrap = quizWrap.querySelector(".dog__wrap");

        // 문제 정보
        const infoType = "정보처리 기능사";
        const infoTime = "2011년 5회";
        const infoNumber = "2";
        const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는 것은?";
        const infoCofirm = "정답 확인하기";
        const infoAnswer = "슬라이드";
        const infoDesc = "슬라이드는 프레젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다.";

        // 문제 출력
        quizTitle.textContent = infoType;
        quizTime.textContent = infoTime;
        quizQusetionNum.textContent = infoNumber;
        quizQuestion.textContent = infoQuestion;
        quizDesc.textContent = infoDesc;
        quizAnswerCofirm.textContent = infoCofirm;
        quizAnswerResult.textContent = infoAnswer;

        // 정답,해설 숨기기
        quizAnswerResult.style.display = "none";        
        quizDesc.style.display = "none";              

        // 사용자 정답
        quizAnswerCofirm.addEventListener("click", function(){
        const userAnswer = quizAnswerInput.value.trim();
        quizAnswerCofirm.style.display = "none";    
        quizAnswerResult.style.display = "block";   
        quizDesc.style.display = "block";         
            if(infoAnswer == userAnswer){
                quizAnswerInput.style.display = "none"; 
                dogWrap.classList.add("like");
            } else {
                
                dogWrap.classList.add("dislike");
            };
    });