Animated Turtle

Javascript

퀴즈 화면 만들기2

훙구 2023. 3. 9. 13:19

...

728x90
반응형

문제와 정답을 적을 수 있는 화면 만들기

퀴즈화면 예시

 

HTML 문서 작성

<!DOCTYPE html>
<html lang="ko">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>퀴즈 이펙트02</title>

     <link rel="stylesheet" href="css/quiz.css">
     <link rel="stylesheet" href="css/reset.css">
     <link href="https://unpkg.com/pattern.css" rel="stylesheet">

</head>
<body>
     <header id="header">
          <h1><a href="../javascript14.html">Quiz</a> <em>주관식 확인하기 유형</em></h1>
          <ul>
               <li><a href="quizEffect01.html">1</a></li>
               <li class="active"><a href="quizEffect02.html">2</a></li>
          </ul>
     </header>
     <!-- //header -->

     <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__footer">
                         <div class="quiz__desc">설명</div>
                    </div>
               </div>
          </div>
     </main>
     <!-- //main -->

     <footer id="footer">
          <a href="mailto:gnsrbdi@naver.com">gnsrdbi@naver.com</a>
     </footer>
     <!-- //footer -->
 </body>
 </html>

HTML 정리해보기

앞서 게시한 퀴즈화면 만들기 1번과 같은 형식으로 구조를 짰습니다.

CSS 문서 작성

.quiz__answer .input {
     background-color: #fff;
     border: 6px groove #cacaca;
     width: 100%;
     font-family: HealthsetGothic;
     padding: 10px 20px;
     font-size: 22px;
     margin-bottom: 10px;
}
.quiz__footer::before {
     content: "✔Tip";
     color: #F5534F;
     font-weight: bold;
}

CSS 정리해보기

나머지 부분은 앞에 만들었던 1번 페이지와 동일합니다. 2번 페이지에서는 사용자가 입력하는 값을 받아 정답 확인 하는 기능을 추가하고, 아래에 해설을 적어주는 Tip영역을 만들어 주었습니다.

JAVASCRIPT 문서 작성

          // 선택자
          const quizWrap = document.querySelector(".quiz__wrap");
          const quizTitle = quizWrap.querySelector(".quiz__title span");
          const quizTime = quizWrap.querySelector(".quiz__title em");
          const quizQuetionNum = 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 dog__wrap = quizWrap.querySelector(".dog__wrap");
          const quizFooter = quizWrap.querySelector(".quiz__footer");
          const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");


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

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

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

          // 사용자 답 
          quizAnswerConfirm.addEventListener("click", function(){
               const userAnswer = quizAnswerInput.value.trim();
               quizAnswerConfirm.style.display = "none";
               quizAnswerInput.style.display = "none";
               quizAnswerResult.style.display = "block";
               quizFooter.style.display = "block";
               if(infoAnswer == userAnswer){
                    // alert("정답");
                    // 정답 버튼 제거
                    quizAnswerResult.style.color = "green";
                    dog__wrap.classList.add("like");
               } else {
                    // alert("오답");
                    quizAnswerResult.style.color = "red";
                    dog__wrap.classList.add("dislike");
               }
          });

JAVASCRIPT 정리해보기

javascript 역시 1번 페이지와 동일한 형식에 사용자 값을 받아와 정답과 비교하는 속성을 추가해 주었습니다.

추가한 부분에 대한 설명으로는

  • trim() : 문자열의 양쪽 끝에 있는 공백을 제거한 후, 결과 문자열을 반환합니다.
  • value : HTML 폼 요소의 현재 값을 나타내거나 값을 변경할 수 있도록 하는 속성입니다.
  • textContent : HTML 요소의 모든 자식 노드의 텍스트 콘텐츠를 반환하거나, 텍스트 콘텐츠를 수정할 수 있도록 하는 속성으로 innerText와 같은 역할입니다.
  • classlist : HTML 요소의 클래스를 조작하는 데 사용되는 속성입니다.

1번 페이지와 동일하게 quizAnswerConfirm.addEventListner("click") 부분에 함수를 넣었습니다.

추가된 내용으로는 사용자에게 받아온 결과 값이 정답과 같으면 'like'를 dog__wrap부분의 클래스로 추가하고, 정답을 초록색 글씨로 나타나게 하고 정답과 다르면 'dislike'를 추가하고 정답을 빨간색 글씨로 나타나게 하는 조건문을 넣었습니다.

 

 

 

 

이상으로 두 번째 퀴즈페이지를 만들어보았습니다 !

 

728x90
반응형