Animated Turtle

Javascript

퀴즈 화면 만들기

훙구 2023. 3. 8. 14:07

...

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>퀴즈 이펙트01</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">
          <a href="../javascript14.html"><h1>Quiz</a><em> 정답 확인하기 유형</em></h1>
     </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">
                              <button class="confirm">정답 확인하기</button>
                              <div class="result"></div>
                         </div>
                    </div>
                    <div class="quiz__footer"></div>
               </div>
          </div>
     </main>
     <!-- //main -->

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

 

HTML 정리해보기

  • 기본적으로 페이지의 헤더와 메인, 푸터 영역을 만들어주고 메인영역에 다시 퀴즈에 대한 헤더, 메인, 푸터 영역을 만들어줍니다.
  • quiz__header 에는 quiz__title 하나를 넣어주었습니다.
  • quiz__main 에는 quiz__question(문제 부분), quiz__view(캐릭터 부분), quiz_answer(정답 부분) 세 부분으로 나누어 넣어주었습니다.

CSS 문서 작성

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
*, *::before, *::after {
     box-sizing: border-box;
}
a {
     text-decoration: none;
     color: #222;
}
h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
}
li, ul, ol {
     list-style: none;
}
img {
     vertical-align: top;
     width: 100%;
}
em {
     font-style: normal;
}
body {
     background:
          radial-gradient(#a4a4a4 3px, transparent 4px),
          radial-gradient(#a4a4a4 3px, transparent 4px),
          linear-gradient(#fff 4px, transparent 0),
          linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
          linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
          #fff;
     background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
     background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

기본 속성을 리셋 시켜주기 위한 속성들을 넣어주었습니다.

/* header */
#header {
     position: fixed;
     left: 0;
     top: 0;
     background-color: #262626;
     color: #fff;
     padding: 10px;
     width: 100%;
     z-index: 1000;
}

#header::before {
     content: '';
     border: 4px ridge #a3a3a3;
     position: absolute;
     left: 5px;
     top: 5px;
     width: calc(100% - 10px);
     height: calc(100% - 10px);
}

#header h1 {
     font-size: 28px;
     padding: 0px 5px 5px 10px;
     font-family: 'DungGeunMo';
     z-index: 10;
     position: relative;
}

#header h1 a {
     color: #fff;
}

#header h1 em {
     font-size: 0.5em;
}

/* footer */
#footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     background-color: #262626;
     text-align: center;
}

#footer a {
     color: #fff;
     padding: 20px;
     display: block;
     font-family: 'DungGeunMo';
     z-index: 10;
     position: relative;
}

#footer::before {
     content: '';
     border: 4px ridge #a3a3a3;
     position: absolute;
     left: 5px;
     top: 5px;
     width: calc(100% - 10px);
     height: calc(100% - 10px);
}

/* main */
#main {
     padding: 100px 0;
}
.quiz__wrap {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
}

.quiz__wrap .quiz {
     max-width: 500px;
     background-color: #fff;
     border: 8px ridge #cacaca;
     width: 500px;
}


.quiz__title {
     background-color: #cacaca;
     border: 3px ridge #cacaca;
     border-bottom-width: 6px;
     padding: 5px;
     font-family: 'DungGeunMo';
     font-size: 16px;
     color: #3b3b3b;
     text-align: center;
}


.quiz__question {
     padding: 20px;
     font-size: 24px;
     font-family: HealthsetGothic;
     font-weight: bold;
     line-height: 1.4;
     border-bottom: 6px ridge #cacaca;
}

.quiz__question em {
     color: #678e69;
}

.quiz__answer {
     font-family: HealthsetGothic;
     padding: 20px;
     text-align: center;
     font-size: 24px;
     /* border-bottom: 6px ridge #cacaca; */
}

.quiz__answer .confirm {
     background-color: #d9ffd1;
     border: 6px ridge #cacaca;
     width: 100%;
     font-family: HealthsetGothic;
     padding: 10px 20px;
     font-size: 22px;
     cursor: pointer;
     transition: all 0.3s;
     font-weight: bold;
}

.quiz__answer .confirm:hover {
     background-color: #72fc92;
}

.quiz__answer .result {
     background-color: #fff;
     border: 6px ridge #cacaca;
     width: 100%;
     font-family: HealthsetGothic;
     padding: 10px 20px;
     font-size: 22px;
     /* display: none; */
}

.quiz__view {
     border-bottom: 6px ridge #cacaca;
     overflow: hidden;
}

기본 속성 외에 모든 디자인의 속성을 넣어주었습니다. (캐릭터 부분 제외)

생소한 CSS속성

  • width: calc(100% - 10px);    : %값에서 px값을 빼는 계산을 가능하게 합니다.
  • z-index: 10;    : 속성을 부여하는 대상의 순서를 변경합니다.

JAVASCRIPT 문서 작성

          // 선택자
          const quizWrap = document.querySelector(".quiz__wrap");
          const quizTitle = quizWrap.querySelector(".quiz__title span");
          const quizTime = quizWrap.querySelector(".quiz__title em");
          const quizQuestion = quizWrap.querySelector(".quiz__question span");
          const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
          const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
          const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");

          // 문제 정보
          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";
          })
 

JAVASRIPT 정리해보기

  • 문제종류, 문제시기, 문제번호, 문제내용, 문제정답을 모두 변수에 저장해주어 변수를 이용해 불러오는 방법을 사용했습니다.
  • 정답 버튼에 스크립트에서 스타일 넣는 방법으로 display: "none"의 효과를 주고,
    정답확인 버튼을 누를 시 다시 display:"block"의 속성을 주고 이번엔 버튼에게 display:"none"의 효과를 주도록 하는 함수를 넣어주었습니다.

 

완성된 페이지 확인

https://dlgnsrb227.github.io/web2023/javascript/quiz/quizEffect01.html

 

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

728x90
반응형

'Javascript'의 다른글

  • 현재글퀴즈 화면 만들기

관련글

댓글

티스토리툴바