(2) 자바스크립트 퀴즈 사이트 만들기 !

두번째 퀴즈 만들기 

 

 

 

 

 

첫번째 퀴즈 만들기에 이어 두번째로 만들게 된 퀴즈 사이트입니다.

문제를 맞추면 위처럼 나오는 화면을 

 

 

문제를 틀리면 위처럼 나오는 화면을 출력합니다.

 

 

 

코드

<script>
    // 선택자
    const quizWrap = document.querySelector(".quiz__wrap");
    const quizTitle = quizWrap.querySelector(".quiz__title span");
    const quizTime = quizWrap.querySelector(".quiz__title em");
    const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
    const quizQuestion = quizWrap.querySelector(".quiz__question span");
    const quizDesc = quizWrap.querySelector(".quiz__desc");
    const quizAnswerConfirm = 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 quizFooter = quizWrap.querySelector(".quiz__footer")


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

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

    // 정답 & 해설 숨기기
    quizAnswerResult.style.display = "none";
    quizFooter.style.display = "none";

    // 사용자 정답
    quizAnswerConfirm.addEventListener("click", function(){
        const userAnswer = quizAnswerInput.value.trim();        // trim은 내장객체
        quizAnswerInput.style.display = "none"      // 인풋 박스 숨김
        quizAnswerConfirm.style.display = "none";   // 정답 확인 버튼 숨김
        quizAnswerResult.style.display = "block";   // 정답 나타내기
        quizFooter.style.display = "block";         // 해설 보이기
        if(infoAnswer == userAnswer){
            dogWrap.classList.add("like");
        } else {
            dogWrap.classList.add("dislike");
        }
    });

</script>

 

 

코드 설명

선택자 부분

const quizWrap = document.querySelector(".quiz__wrap");

이 코드는 class가 "quiz__wrap"인 첫번째 DOM 요소를 찾아 quizWrap 변수에 할당합니다.

querySelector 메소드는 주어진 선택자와 일치하는 첫 번째 요소를 반환합니다.

 

 

const quizTitle = quizWrap.querySelector(".quiz__title span"); 

이 코드는 quizWrap 내부에서 class가 "quiz__title"인 요소를 찾고

그 하위의 span 요소를 찾아 quizTitle 변수에 할당합니다.

 

 

문제 정보 부분

const infoType = "정보처리 기능사";
const infoTime = "2011년 5회";....

변수에 저장된 문제 정보를 HTML 요소에 출력하기 위해 textContent와 innerText 속성을 사용한다.

textContent 속성은 텍스트 노드의 내용을 가져오거나 설정하고,

innerText 속성은 HTML 요소의 내용을 가져오거나 설정합니다.

이를 이용하여 quizTitle, quizTime, quizQuestionNum, quizQuestion, quizDesc, quizAnswerResult 등의 HTML 요소에 변수에 저장된 문제 정보를 출력합니다.

 

정답 & 해설 숨기기

quizAnswerResult.style.display = "none";
quizFooter.style.display = "none";

quizAnswerResult, quizFooter를 display를 none으로 설정해 보이지 않게 합니다.

 

사용자 정답

quizAnswerConfirm.addEventListener("click", function(){
const userAnswer = quizAnswerInput.value.trim(); 
quizAnswerInput.style.display = "none".....

 

addEventListener : DOM 요소에 이벤트를 등록하는 메서드로, 요소에 발생하는 이벤트에 대한 콜백 함수를 등록하여

                             이벤트가 발생할 때마다 콜백 함수를 실행합니다.

 

display를 'none'으로 설정하여 인풋 박스와 정답 확인 버튼을 숨기고,

display를 "block"으로 설정하여 정답과 해설이 보이게 합니다.

그리고 위 속성들을 addEventListener의 함수 안에 넣어 실행되게 하고, if..else문을 사용해 문제를 맞출때와 못맞출때를 구분해 웃는 표정과 슬픈 표정을 나눠 실행 시켜줍니다.