Quiz Effect 01 - 정답 확인하기 유형에 대해서 알아보자

함수로 퀴즈를 풀 수 있는 사이트를 만들어 보겠습니다.

링크: 퀴즈 이펙트 01 

body의 main 과 script 부분을 나눠서 설명하겠습니다.

<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">
                    <button class="confirm">정답 확인하기</button>                        
                    <div class="result">연변대비</div>
                </div>
            </div>
            <div class="quiz__footer"></div>
        </div>
    </div>
</main>

 main 부분에서는 사이트의 틀을 만들어 준다고 생각하면 됩니다.

우선, quiz__wrap으로 class를 지정해서 묶어주었습니다. 

 

script 에서 보면, quizWrap을 document.querySelector()로 선택자를 만들어 줬는데요, 

이 querySelector()는 Element 인터페이스의 메소드 입니다.

 

querySelector() 메소드는 CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해줍니다. 

그렇기 때문에 그 다음부터는 wrap안에서 값을 찾으면 된다는 의미입니다.

 

그 다음은, 제목 부분입니다. 

title (infoType) 과 time (infoTime) 으로 나눠서 지정해줬습니다.

title은 보이는 것처럼 "웹디자인 기능사" 그리고 time은 "2012년 1회"를 값으로 가지고 있습니다.

 

이런 식으로 자리를 나눠서 정해준다면, 다음에 같은 형식을 사용할 때 헷갈리지 않고 유용하게 쓸 수 있습니다.

 

중간에 위치한 quiz__view부분은 가운데에 위치한 강아지 캐릭터 부분입니다.

 

그리고 정답 부분은 quiz__answer로 묶었습니다. 

 

이 부분에서는 "정답 확인하기"를 누르면, 답이 나오도록 설정했습니다.

지정해준 class 명칭들을 나열하며, display = "none";을 설정해주면 됩니다.

<script>
    //선택자
    const quizWrap = document.querySelector(".quiz__wrap");
    const quizTitle = quizWrap.querySelector(".quiz__title span"); // quizWrap는 wrap안에서 찾으라는 의미
    const quizTime = quizWrap.querySelector(".quiz__title em");
    const quizQuestion = quizWrap.querySelector(".quiz__question span");
    const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
    const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
    const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");

    //문제 정보
    const infoType = "웹디자인 기능사";
    const infoTime = "2012년 1회";
    const infoNumber = "1";
    const infoQuestion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
    const infoAnswer = "연변대비";

    quizTitle.innerText = infoType;
    quizTime.innerText = infoTime;
    quizQuestion.innerText = infoQuestion;
    quizQuestionNum.innerText = infoNumber;
    quizAnswerResult.innerText = infoAnswer;        

    //정답 숨기기
    quizAnswerResult.style.display = "none";

    //정답 확인
    quizAnswerConfirm.addEventListener("click",function(){ // 버튼을 클릭하면 함수 실행
        quizAnswerResult.style.display = "block";
        quizAnswerConfirm.style.display = "none"; // 정답 누르면 정답확인하기 버튼 없앰
    });
</script>

마지막으로, addEventListener를 써서, 

정답을 확인하면 즉, 클릭을 하면 정답 확인하기(confirm)는 display= "none";,

그리고 답 즉, 결과(result)는 display= "block"; 처리를 해줌으로써 답만 보이게 했습니다.

 

여기서 쓰인 함수 addEventListener() 메서드는,

지정한 이벤트 유형의EventTarget 수신기 리스트에 EventListener를 구현한 함수 또는 객체를 추가하는 방식으로 동작합니다.

추가하려는 함수 또는 객체가 이미 수신기 리스트에 포함되어 있는 경우에는 추가하지 않으므로 수신기는 중복으로 등록되지 않습니다.