개발냄새

제작

사이트제작 : 퀴즈 유형 4

IC 2023. 3. 18. 

<!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>퀴즈 이펙트04</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 class="active"><a href="quizEffect04.html">4</a></li>
            <li><a href="quizEffect05.html">5</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">
                            <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="confirm">정답 확인하기</button>
                    </div>
                    <div class="quiz__desc"></div>
                </div>
            </div>
        </div>
    </main>
    <!-- //main -->
    <footer id="footer">
        <a href="mailto:dlscks0930@gmail.com">dlscks0930@gmail.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: 개 다리 부분을 스타일링합니다.
<script>
        // 선택자
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizTitle = quizWrap.querySelector(".quiz__title");
        const quizQuestion= quizWrap.querySelector(".quiz__question");
        const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
        const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");
        const quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizAnswer = quizWrap.querySelector(".quiz__answer");
        const quizConfirm = quizWrap.querySelector(".quiz__answer .confirm");
        const dogWrap = quizWrap.querySelector(".dog__wrap");
        // 문제 정보
        const quizInfo = [
            {
                infoType: "웹디자인 기능사",
                infoTime: "2016년 4회",
                infoNumber: "1",
                infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?",
                infoChoice: ["선, 색채, 공간, 수량", "점, 선, 면, 질감", "시간, 수량, 구조, 공간", "면, 구조, 공간, 수량"],
                infoAnswer: "2",
                infoDesc: "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다."
            }
        ];
        // 문제 출력
        function updateQuiz(){
            quizTitle.innerHTML = quizInfo[0].infoType +" "+ quizInfo[0].infoTime;
            quizQuestion.innerHTML = "<em>"+quizInfo[0].infoNumber+"</em>."+ quizInfo[0].infoQuestion;
            quizDesc.innerHTML = quizInfo[0].infoDesc;
            for(let i=0; i<4; i++){
                quizChoice[i].textContent = quizInfo[0].infoChoice[i];
            }
            // 해설 숨기기
            quizDesc.style.display = "none";
        }
        // 정답 확인
        function answerQuiz(){
            // 사용자가 선택한 인풋박스(checked) == 문제 정답(quizInfo[0].infoAnswer)
            for(let i=0; i<quizChoice.length; i++){
                if(quizSelect[i].checked == true){  //사용자가 보기를 체크한 상태
                    if(quizSelect[i].value == quizInfo[0].infoAnswer){
                        // alert("정답입니다.");
                        dogWrap.classList.add("like");
                    } else {
                        // alert("오답입니다.")
                        dogWrap.classList.add("dislike");
                    }
                }
            }
            //해설 보이기
            quizDesc.style.display = "block";
            //정답 숨기기
            quizAnswer.style.display = "none";
        }
        // 정답 클릭
        quizConfirm.addEventListener("click", answerQuiz);
        //문제 출력
        updateQuiz();
    </script>

javascript

이 코드는 JavaScript로 작성된 문제 풀이 웹 페이지의 일부분입니다.
이 페이지는 문제를 출력하고, 사용자가 보기 중 하나를 선택하여 제출할 수 있으며, 그 결과를 확인할 수 있습니다.

우선 코드의 첫 부분에서는 문제 웹 페이지에서 사용되는 HTML 요소들을 선택하기 위해 선택자를 정의합니다. 이 페이지에서는

.quiz__wrap,

.quiz__title,

.quiz__question,

.quiz__choice span,

.quiz__choice input,

.quiz__desc,

.quiz__answer,

.quiz__answer .confirm,

.dog__wrap 클래스를 가진 요소들이 선택됩니다.

다음으로, quizInfo 변수에 문제 정보가 저장되어 있습니다. 이 정보는 문제 유형, 출제 시험 연도, 문제 번호, 문제 내용, 보기, 정답, 해설 등을 포함합니다.

updateQuiz() 함수는 quizInfo의 첫 번째 요소를 기반으로 문제, 보기, 해설 등을 출력합니다.

보기와 해설의 경우, quizChoice와 quizDesc 변수를 사용하여 각각의 요소를 선택하고, quizInfo에서 해당 내용을 가져와서 출력합니다. 해설은 기본적으로 숨겨져 있습니다.

answerQuiz() 함수는 사용자가 선택한 보기와 정답을 비교하여 결과를 출력합니다.

사용자가 보기를 체크한 경우, quizSelect 변수를 사용하여 해당 요소가 선택되었는지 확인합니다.

그러면 dogWrap 요소에 like 또는 dislike 클래스가 추가됩니다.

이 클래스는 CSS에서 처리되어 정답/오답에 따라 다른 이미지가 표시됩니다.

또한, 해설이 보이도록 quizDesc를 나타내며, 정답은 숨깁니다.

마지막으로, quizConfirm 버튼에 대한 click 이벤트가 추가되어 answerQuiz() 함수가 실행됩니다.

updateQuiz() 함수는 페이지가 로드될 때 한 번만 호출됩니다.

 

저작자표시

댓글

티스토리툴바