퀴즈 유형 01

01. 퀴즈 유형

퀴즈를 스크립트로 퀴즈 질문와 번호, 확인 버튼,결과를 도출해보았습니다.

아래는 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="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">
                    <button class="confirm">정답 확인하기</button>
                    <div class="result"></div>
                </div>
            </div>
        </div> 

아래는 자바스크립트입니다. const로 데이터를 저장하고, innerText로 출력하여, 함수로 반응할 수 있게 만들었습니다.

       //선택자
        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 quizDog = document.querySelector(".quiz_view .dog");                       //강아지
        
        //문제 정보
        const answerType = "웹디자인기능사";
        const answerNum = 1;
        const answerAsk = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 
        대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
        const answerResult = "연변대비";
    
        //문제 출력
        quizType.innerText = answerType;
        quizNumber.innerText = answerNum + ". ";
        quizAsk.innerText = answerAsk;
        quizResult.innerText = answerResult;
    
        //정답 확인
        //정답 버튼을 클릭하면 확인버튼을 안보이게 .. 숨겨진 정답은 보이게 ..
        quizResult.style.display = "none";
    
        quizConfirm.addEventListener("click", function(){ 
            quizConfirm.style.display = "none";  //스타일을 스크립트에서 부여해 , 안보이게 만듦.
            quizResult.style.display = "block";    //그 뒤 가려져 있던 정답을 공개한다.
        });  

원본 소스 보여주기