개발냄새

javascript

사이트 제작 : 퀴즈 유형 6

IC 2023. 3. 27.

 

<!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>퀴즈 이펙트05</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/quiz.css">
</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><a href="quizEffect02.html">2</a></li>
            <li><a href="quizEffect03.html">3</a></li>
            <li><a href="quizEffect04.html">4</a></li>
            <li><a href="quizEffect05.html">5</a></li>
            <li class="active"><a href="quizEffect06.html">6</a></li>
        </ul>
    </header>
    <!-- //header-->
    <main id="main">
        <div class="quiz__wrap">
            <div class="quiz">
                <div class="quiz__header">
                    <h2 class="quiz__title"></h2>
                </div>
                <div class="quiz__main">
                    <div class="quiz__question"></div>
                    <div class="quiz__view">
                        <div class="dog__wrap">
                            <h4 class="h4"></h4>
                            <div class="true">정답입니다</div>
                            <div class="false">오답입니다</div>
                            <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__choice">
                        <!-- <label for="choice1">
                            <input type="radio" id="choice1" name="choice" value="1">
                            <span></span>
                        </label>
                        <label for="choice2">
                            <input type="radio" id="choice2" name="choice" value="2">
                            <span></span>
                        </label>
                        <label for="choice3">
                            <input type="radio" id="choice3" name="choice" value="3">
                            <span></span>
                        </label>
                        <label for="choice4">
                            <input type="radio" id="choice4" name="choice" value="4">
                            <span></span>
                        </label> -->
                    </div>
                    <div class="quiz__answer">
                        <button class="next">다음 문제보기</button>
                    </div>
                    <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 -->

HTML:

  • <head>: 문서의 메타데이터, 스타일시트, 스크립트 등의 정보를 담습니다.
  • <meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Internet Explorer와 호환성을 유지합니다.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹 디자인을 위한 viewport 설정입니다.
  • <title>퀴즈 이펙트 01</title>: 문서 제목을 설정합니다.
  • <link rel="stylesheet" href="css/reset.css">: 외부 스타일시트 파일을 불러옵니다.
  • <link rel="stylesheet" href="css/quiz.css">: 외부 스타일시트 파일을 불러옵니다.
  • <body>: 문서의 본문을 담습니다.
  • <header>: 문서의 머리말을 담습니다.
  • <main>: 문서의 주요 내용을 담습니다.
  • <footer>: 문서의 꼬리말을 담습니다.
  • <script>: JavaScript 코드를 작성할 수 있습니다.

 

헤더에는 퀴즈 제목과 em 태그가 포함되어 있습니다. em 태그는 강조된 텍스트를 나타냅니다.

메인 콘텐츠에는 퀴즈 질문, 선택 항목, 정답 확인 버튼 등이 포함되어 있습니다. 선택 항목은 라디오 버튼으로 표시되며, 정답 확인 버튼을 클릭하면 정답 여부가 나타납니다.


이 페이지는 "css/reset.css"와 "css/quiz.css"라는 스타일 시트를 사용합니다. 이 코드는 HTML 파일과 같은 폴더에 있는 "css" 폴더에서 이러한 파일을 찾아 불러옵니다. 아래 코드를 참조하세요.

 

CSS코드보기

더보기
더보기 
/* header */
#header {
  position: fixed;
  left: 0;
  top: 0  ;
  background-color: #262626;
  color: #fff;
  padding: 10px;
  margin-bottom: 100px;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
}
#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: 5px 5px 5px 10px;
  font-family: 'NeoDunggeunmo';
  z-index: 10;
  position: relative;
}
#header h1 a {
  color: #fff;
}
#header h1 em {
  font-size: 0.5em;
}
#header ul {
  padding: 5px;
}
#header li {
  display: inline;
  z-index: 10;
  position: relative;
}
#header li a {
  color: #fff;
  font-family:'NeoDunggeunmo';
  border: 1px dashed #fff;
  display: inline-block;
  padding: 5px;
}
#header li.active a,
#header li a:hover {
  background-color: #fff;
  color: #000;
}
/* 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: 'NeoDunggeunmo';
  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 {
  padding: 100px 0;
}
/* quiz__wrap */
.quiz__wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
}
.quiz__wrap .quiz {
  width: 500px;
  background-color: #fff;
  border: 8px ridge #cacaca;
  margin:10px;
}
.quiz__title {
  background-color: #262626;
  border: 3px ridge #cacaca;
  border-bottom-width: 6px;
  padding: 5px;
  font-family: 'NeoDunggeunmo';
  font-size: 16px;
  color: #fff;
  text-align: center;
}
.quiz__question {
  padding: 20px;
  font-size: 24px;
  font-family: 'MYArirangGothic';
  font-weight: bold;
  line-height: 1.5;
  border-bottom: 6px ridge #cacaca;;
  background-color: whitesmoke; width:100%; height:100%;
}
.quiz__question em {
  color: rgb(246, 5, 5);
}
.quiz__answer {
  font-family: 'MYArirangGothic';
  /* border-bottom: 6px ridge #cacaca; */
  padding: 20px;
  text-align: center;
  font-size: 24px;
}
.quiz__answer .confirm {
  background-color: #dbffd8;
  border: 6px ridge #6d6a6a;
  width: 100%;
  font-family: 'MYArirangGothic';
  padding: 10px 20px;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.3s;
  text-shadow: 2px 2px 0px #ffffff;
  font-weight: bold;
}
.quiz__answer .confirm:hover{
  background-color: #74b3eb;
}
.quiz__answer .result {
  background-color: #fff;
  border: 6px ridge #cacaca;
  width: 100%;
  font-family: 'MYArirangGothic';
  padding: 10px 20px;
  font-size: 22px;
}
.quiz__answer .input {
  background-color: #fff;
  border: 6px groove #cacaca;
  width: 100%;
  font-family: 'MYArirangGothic';
  padding: 10px 20px;
  font-size: 22px;
  margin-bottom: 10px;
}
.quiz__view {
  border-bottom: 6px ridge #cacaca;
  overflow: hidden;
}

.quiz__desc {
  border-top: 6px ridge #cacaca;
  padding: 20px;
  font-family: 'MYArirangGothic';
  background-color: #f5f5f5;
}
.quiz__desc::before {
  content: "💋Tip ";
  color: #F5534F;
  font-weight: bold;
}
.quiz__choice {
  padding: 20px;
  border-bottom: 6px ridge #cacaca;
  font-family:"MYArirangGothic";
}
.quiz__choice label {
  display: flex;
}
.quiz__choice label input {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}
.quiz__choice label span{
  font-size: 20px;
  line-height: 1.1;
  padding: 6px;
  display: flex;
  cursor: pointer;
  margin: 2px 0;
}
.quiz__choice label span::before {
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-right: 15px;
  background: #fff;
  box-shadow: inset 0 0 0 4px #59e84c;
  transition: all 0.2s;
  flex-shrink: 0;
}
.quiz__choice label input:checked + span {
  background-color: #ffffff;
}
.quiz__choice label input:checked + span::before {
  box-shadow: inset 0 0 0 8px #0000ff;
}
.quiz__check {
  position: fixed;
  right: 20px;
  bottom: 20px;
  line-height: 130px;
  border-radius: 30%;
  z-index: 1000;
  text-align: center;
  color: #000000;
  font-family: 'MYArirangGothic';
  font-size: 25px;
  cursor: pointer
}
.linear_gradient {
  width: 130px;
  height: 130px;
  background: linear-gradient(to right, gold 0%, aqua 50%, pink 100%);
}
.quiz__info {
  position: fixed;
  right: 20px;
  bottom: 170px;
  background-color: #ff3c3c;
  text-align: center;
  width: 130px;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  font-family: 'MYArirangGothic';
  color: #fff;
}
.quiz__info::after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -10px;
  bottom: -10px;
  border-top: 10px solid #ff3c3c;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
/* dog__wrap */
.dog .tail,
.dog .chin,
.dog .tongue::before, 
.dog .tongue::after, 
.dog .mouth, 
.dog .nose, 
.dog .teardrop, 
.dog .eyes, 
.dog .face::before, 
.dog .face::after, 
.dog .ears::before, 
.dog .ears::after, 
.dog__wrap {
  position: relative;
}
.dog__wrap .true {
  width: 120px;
  height: 120px;
  line-height: 120px;
  background-color: #3300ffd9;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  position: absolute;
  left: 70%;
  top: 100px;
  font-family: 'MYArirangGothic';
  z-index: 2;
  opacity: 0;
}
.dog__wrap .false {
  width: 120px;
  height: 120px;
  line-height: 120px;
  background-color: #ff0000b9;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  position: absolute;
  right: 70%;
  top: 100px;
  font-family: 'MYArirangGothic';
  z-index: 2;
  opacity: 0;
}
.dog__wrap.like .true {
  opacity: 1;
  animation: wobble 0.6s;
}
.dog__wrap.dislike .false {
  opacity: 1;
  animation: wobble 0.6s;
}
@keyframes wobble {
  0% {transform: translateX(0) rotate(0deg);}
  15% {transform: translateX(-25%) rotate(-5deg);}
  30% {transform: translateX(20%) rotate(3deg);}
  45% {transform: translateX(-15%) rotate(-3deg);}
  60% {transform: translateX(-5%) rotate(-1deg);}
  100% {transform: translateX(0) rotate(0deg);}




}
.card-container {
  position: relative;
  width: 360px;
  height: 378px;
  margin: auto;
  padding-top: 125px;
  border-radius: 3%;
  z-index: 0;
}
.card-container::before, .card-container::after {
  content: "";
  position: absolute;
  height: 100%;
  margin: auto;
  left: 0;
  right: 0;
  border-radius: 3%;
  z-index: -1;
}
.card-container::before {
  top: 3%;
  width: 93%;
}
.card-container::after {
  top: 5.5%;
  width: 85%;
  background-image: url(https://image.utoimage.com/preview/cp872655/2017/08/201708004472_500.jpg); width:100%; height:100%;
}
/* dog */
.dog .head,
.dog .body {
  position: relative;
  width: 115px;
}
.dog .head {
  height: 115px;
  border-radius: 50% 50% 0 0;
  margin: 0 auto;
}
.dog .ears {
  position: relative;
  top: -14%;
  width: 100%;
}
.dog .ears::before, .dog .ears::after {
  content: "";
  position: absolute;
  top: 0;
  width: 35px;
  height: 70px;
  background: #eb8987;
  border-top: 11px solid #999999;
  border-left: 7px solid #999999;
  border-right: 7px solid #999999;
}
.dog .ears::before {
  left: 0;
  border-radius: 50% 45% 0 0;
}
.dog .ears::after {
  right: 0;
  border-radius: 45% 50% 0 0;
}
.dog .face {
  position: absolute;
  background: #a4a4a4;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
}
.dog .face::before, .dog .face::after {
  content: "";
  display: block;
  margin: auto;
  background: #FEFEFE;
}
.dog .face::before {
  width: 15px;
  height: 35px;
  margin-top: 24px;
  border-radius: 20px 20px 0 0;
}
.dog .face::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 60px;
  height: 65px;
  border-radius: 45% 45% 0 0;
}
.dog .eyes {
  position: relative;
  top: 29%;
  text-align: center;
}
.dog .eyes::before, .dog .eyes::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #451d1c;
  margin: 0 14.5%;
}
.dog .teardrop {
  position: absolute;
  top: 125%;
  left: 19%;
  width: 6px;
  height: 6px;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  background: #FEFEFE;
  visibility: hidden;
}
.dog .nose {
  position: relative;
  top: 35%;
  width: 16px;
  height: 8px;
  border-radius: 35px 35px 65px 65px;
  background: #451d1c;
  margin: auto;
}
.dog .mouth {
  position: relative;
  top: 34.5%;
  width: 4px;
  height: 6px;
  margin: 0 auto;
  text-align: center;
  background: #451d1c;
}
.dog .mouth::before, .dog .mouth::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 4px solid #451d1c;
  border-left-color: transparent;
  border-top-color: transparent;
  z-index: 2;
}
.dog .mouth::before {
  transform: translateX(-89%) rotate(45deg);
}
.dog .mouth::after {
  transform: translateX(-2px) rotate(45deg);
}
.dog .tongue {
  position: relative;
  z-index: 1;
}
.dog .tongue::before, .dog .tongue::after {
  content: "";
  position: absolute;
}
.dog .tongue::before {
  top: 6px;
  left: -7px;
  width: 18px;
  height: 0;
  border-radius: 50%;
  background: #451d1c;
  z-index: -1;
}
.dog .tongue::after {
  top: 14px;
  left: -4px;
  width: 12px;
  height: 0;
  border-radius: 20px;
  background: #F5534F;
  z-index: 5;
}
.dog .chin {
  position: relative;
  top: 47.5%;
  margin: 0 auto;
  width: 12px;
  height: 12px;
  border-top: 10px solid #e8e7ec;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 2px;
  z-index: 0;
}
.dog .body {
  position: relative;
  height: 139px;
  margin: auto;
  z-index: 0;
}
.dog .body::before, .dog .body::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  margin: auto;
  background: #999999;
}
.dog .body::after {
  top: -2px;
  bottom: -1px;
  width: 60px;
  background: #FEFEFE;
}
.dog .tail {
  position: absolute;
  left: -60%;
  bottom: 1px;
  background: #555555;
  width: 93px;
  height: 15px;
  transform: rotate(45deg);
  transform-origin: 100% 50%;
  border-radius: 25px 0 0 25px;
  z-index: -2;
}
.dog .legs {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 15%;
  background: #777777;
  border-radius: 10px 10px 0 0;
}
.dog .legs::before, .dog .legs::after {
  content: "";
  position: absolute;
  bottom: 1px;
  background: #666666;
  z-index: -1;
}
.dog .legs::before {
  left: -7.5%;
  width: 115%;
  height: 55%;
  border-radius: 5px 5px 0 0;
}
.dog .legs::after {
  left: -3.5%;
  width: 107%;
  height: 250%;
  border-radius: 20px 20px 35px 35px;
}
@keyframes movetongue {
  100% {
      height: 27px;
  }
}
@keyframes movetail {
  0% {
      transform: rotate(37deg);
  }
  100% {
      transform: rotate(52deg);
  }
}
@keyframes cry {
  100% {
      visibility: visible;
  }
}
.like {
  background: #ffffff;
}
.like .face::before {
  margin-top: 10px;
}
.like .face::after {
  height: 85px;
}
.like .eyes {
  top: 13%;
}
.like .eyes::before,
.like .eyes::after {
  width: 18px;
  height: 5px;
  margin: 0px 12.5%;
  transform: rotate(-37.5deg);
  border-radius: 20px;
}
.like .eyes::after {
  transform: rotate(37.5deg);
}
.like .nose {
  top: 18%;
}
.like .mouth {
  top: 16.5%;
}
.like .tongue::before {
  height: 12px;
}
.like .tongue::after {
  height: 24px;
  animation: movetongue 0.1s linear 0.35s infinite alternate forwards;
}
.like .chin {
  top: 34%;
}
.tail {
  animation: movetail 0.1s linear infinite alternate forwards;
}
.dislike {
  
}
.dislike .ears::before {
  transform: rotate(-50deg) translate(-7px, 2px);
}
.dislike .ears::after {
  transform: rotate(50deg) translate(7px, 2px);
}
.dislike .face::before {
  margin-top: 28px;
}
.dislike .face::after {
  height: 55px;
}
.dislike .eyes {
  top: 38%;
}
.dislike .eyes::before,
.dislike .eyes::after {
  width: 18px;
  height: 5px;
  margin: 0px 14.5%;
  transform: rotate(-37.5deg);
  border-radius: 20px;
}
.dislike .eyes::after {
  transform: rotate(37.5deg);
}
.dislike .teardrop {
  animation: cry 0.1s ease-in 0.25s forwards;
}
.dislike .nose {
  top: 44%;
}
.dislike .mouth {
  top: 42%;
}
.dislike .chin {
  top: 52%;
}
.dislike .tail {
  transform: rotate(0);
}

CSS:

  • .quiz__wrap: 문제를 담는 영역을 스타일링합니다.
  • .quiz__title: 문제 제목을 스타일링합니다.
  • .quiz__question: 문제 내용을 스타일링합니다.
  • .dog__wrap: 개 이미지를 담는 영역을 스타일링합니다.
  • .card-container: 개 이미지를 담는 영역을 스타일링합니다.
  • .dog: 개 이미지를 스타일링합니다.
  • .head: 개 머리 부분을 스타일링합니다.
  • .ears: 개 귀 부분을 스타일링합니다.
  • .face: 개 얼굴 부분을 스타일링합니다.
  • .eyes: 개 눈 부분을 스타일링합니다.
  • .teardrop: 개 눈물 부분을 스타일링합니다.
  • .nose: 개 코 부분을 스타일링합니다.
  • .mouth: 개 입 부분을 스타일링합니다.
  • .tongue: 개 혀 부분을 스타일링합니다.
  • .chin: 개 턱 부분을 스타일링합니다.
  • .body: 개 몸통 부분을 스타일링합니다.
  • .tail: 개 꼬리 부분을 스타일링합니다.
  • .legs: 개 다리 부분을 스타일링합니다.

javascript

// 다음 버튼, 해설 숨기기
quizAnswer.style.display = "none";
quizDesc.style.display = "none";

이 코드는 사용자가 다음 버튼을 클릭했을 때, 현재 문제에 대한 해설과 정답을 숨기는 역할을 합니다.

quizAnswer와 quizDesc는 각각 HTML 요소입니다. quizAnswer.style.display = "none" 코드는 quizAnswer 요소의 CSS display 속성을 "none"으로 설정하여 해당 요소를 화면에서 숨깁니다. 마찬가지로 quizDesc.style.display = "none" 코드는 quizDesc 요소를 숨깁니다.

이렇게 하면 사용자가 다음 문제를 푸는 동안 이전 문제의 정답과 해설이 화면에서 사라져서, 새로운 문제를 풀 때 혼동되지 않도록 도와줍니다.

function choiceSelected(answer){
            let userAnswer = answer.textContent;                    // 사용자 정답
            let currentAnswer = quizInfo[quizCount].infoAnswer;      // 문제 정답

            if(userAnswer == currentAnswer){
                dogWrap.classList.add("like");
                quizScore++;
            } else {
                dogWrap.classList.add("dislike");
            }

            quizAnswer.style.display = "block";
            quizDesc.style.display = "block";

            if(quizInfo.length - quizCount == 1){
                alert(quizScore + "개 맞았어요! 점수는" + Math.ceil((quizScore/quizInfo.length)*100) + "점 입니다.");
            };
        };

이 코드는 JavaScript로 작성된 함수입니다. 다음은 이 코드의 기능을 간략히 설명해드리겠습니다.

이 함수는 사용자가 선택한 답안과 문제의 정답을 비교하여, 사용자가 맞춘 문제의 수를 기록하고, 화면에 표시해주는 역할을 합니다. 이 함수의 인자로는 사용자가 선택한 답안을 나타내는 answer가 전달됩니다.

이 함수에서는 먼저 answer 객체의 textContent를 통해 사용자가 선택한 정답을 가져옵니다. 그리고 quizInfo[quizCount].infoAnswer를 통해 현재 문제의 정답을 가져옵니다. 이 두 값을 비교하여 사용자가 정답을 맞췄는지 확인합니다.

만약 사용자가 정답을 맞춘 경우, quizScore 변수를 1 증가시키고, dogWrap 클래스에 like 클래스를 추가합니다. 이렇게 하면 사용자가 선택한 답안이 올바른지 여부에 따라 화면에 표시되는 이미지가 달라집니다.

그리고 quizAnswer와 quizDesc 요소의 display 속성을 "block"으로 변경하여, 문제 해설과 다음 문제로 넘어가기 위한 버튼을 화면에 표시합니다.

마지막으로, 현재 문제가 마지막 문제인 경우, alert 함수를 사용하여 사용자의 점수를 알려줍니다. 이때, Math.ceil 함수를 사용하여 점수를 올림하여 표시합니다.

 // 정답 확인
        quizNext.addEventListener("click", () => {
            quizCount++;
            dogWrap.classList.remove("like", "dislike");
            updateQuiz(quizCount);
        });

해당 코드는 다음 문제로 넘어가는 버튼(quizNext)을 클릭하면 실행되는 함수입니다.

먼저, quizCount 변수를 1 증가시켜 다음 문제로 이동합니다.

그리고 dogWrap 요소에 추가되었던 like 또는 dislike 클래스를 모두 제거하여 다음 문제에 대한 평가를 시작할 수 있도록 합니다.

마지막으로, updateQuiz 함수를 호출하여 다음 문제를 보여줍니다.

저작자표시

댓글

티스토리툴바