“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
자바스크립트 퀴즈 이펙트 6 슬라이드 형식
오늘은 퀴즈 이펙트 6번째 유형을 정리해보겠습니다!
💜 퀴즈 6번째
완성화면입니다.
이번엔 슬라이드 형식으로
한문제를 풀면 다음 문제로 넘어가는 형식입니다.
우선 head 에 css링크를 넣어줍니다.
head
<!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>슬라이드 형식</title>
<meta charset="ISO-8859-4">
<title>Example Page</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
reset.css
@import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css');
@import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.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;
}quiz.css
더보기
/* header */
#header {
position: fixed;
left: 0;
top: 0;
background-color: #f191ac;
color: #fff;
padding: 10px;
width: 100%;
z-index: 1000;
display: flex;
justify-content: space-between;
}
#header::before {
content: '';
border: 4px ridge #fff;
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: 'DungGeunMo';
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: 'DungGeunMo';
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: #f191ac;
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 #fff;
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: #ffffff;
border: 8px ridge #f4bbc9;
margin: 10px;
}
.quiz__title {
background-color: #f4bbc9;
border: 3px ridge #f4bbc9;
border-bottom-width: 6px;
padding: 5px;
font-family: 'DungGeunMo';
font-size: 16px;
color: #ffffff;
text-align: center;
}
.search__info span {
background-color: #f4bbc9;
border: 5px ridge #f4bbc9;
border-bottom-width: 10px;
padding: 10px;
font-family: 'DungGeunMo';
font-size: 20px;
color: #ffffff;
text-align: center;
}
.quiz__question {
padding: 20px;
font-size: 24px;
font-family: 'NanumBarunGothic';
font-weight: bold;
line-height: 1.5;
border-bottom: 6px ridge #f4bbc9;
}
.quiz__question em {
color: #ff3c3c;
}
.quiz__answer {
font-family: 'NanumBarunGothic';
padding: 20px;
text-align: center;
font-size: 24px;
/* border-bottom: 6px ridge #cacaca; */
}
.quiz__answer .confirm {
background-color: #f5ff9b;
border: 6px ridge #f4bbc9;
width: 100%;
font-family: 'NanumBarunGothic';
font-weight: bold;
padding: 10px 20px;
font-size: 22px;
cursor: pointer;
transition: all 0.3s;
}
.quiz__answer .confirm:hover {
background-color: #f5ff9b;
}
.quiz__answer .next {
background-color: #eceed7;
border: 6px ridge #f4bbc9;
width: 100%;
font-family: 'NanumBarunGothic';
font-weight: bold;
padding: 10px 20px;
font-size: 22px;
cursor: pointer;
transition: all 0.3s;
}
.quiz__answer .next:hover {
background-color: #eceed791;
}
.quiz__answer .result {
background-color: #fff;
border: 6px ridge #f4bbc9;
width: 100%;
font-family: 'NanumBarunGothic';
padding: 10px 20px;
font-size: 22px;
/* display: none; */
}
.quiz__answer .input {
background-color: #fff;
border: 6px ridge #f4bbc9;
width: 100%;
font-family: 'NanumBarunGothic';
padding: 10px 20px;
font-size: 22px;
margin-bottom: 10px;
}
.quiz__view {
border-bottom: 6px ridge #f4bbc9;
overflow: hidden;
}
.quiz__desc {
border-top: 6px ridge #f4bbc9;
padding: 20px;
font-family: 'NanumBarunGothic';
/* background-color: #e4e4e4; */
}
.quiz__desc::before {
content: "✨Tip ";
color: #F5534F;
font-weight: bold;
}
.quiz__choice {
padding: 20px;
border-bottom: 6px ridge #f4bbc9;
font-family: 'NanumBarunGothic';
}
.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.4;
padding: 6px;
display: flex;
cursor: pointer;
margin: 2px 0;
}
.quiz__choice label span::before {
content: '';
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 4px #caadff;
margin-right: 15px;
transition: all 0.2s;
flex-shrink: 0;
}
.quiz__choice label input:checked + span {
background-color: #f7eeed;
border-radius: 10px;
}
.quiz__choice label input:checked + span::before {
box-shadow: inset 0 0 0 8px #caadff;
}
.quiz__check {
position: fixed;
right: 20px;
bottom: 20px;
width: 130px;
height: 130px;
line-height: 130px;
border-radius: 50% ;
z-index: 1000;
text-align: center;
background-color: #caadff;
color: #fff;
font-family: 'NanumBarunGothic';
cursor: pointer;
}
.quiz__info {
position: fixed;
right: 20px;
bottom: 170px;
background-color: #caadff;
text-align: center;
width: 130px;
border-radius: 10px;
height: 50px;
line-height: 50px;
font-family: 'NanumBarunGothic';
color: #fff;
}
.quiz__info::after {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
bottom: -10px;
border-top: 10px solid #caadff;
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 {
transition: 0.2s ease-in;
}
.dog__wrap {
position: relative;
}
.dog__wrap .true {
width: 120px;
height: 120px;
line-height: 120px;
background-color: #caadff;
border-radius: 50%;
text-align: center;
color: #fff;
position: absolute;
left: 70%;
top: 100px;
font-family: 'NanumBarunGothic';
opacity: 0;
}
.dog__wrap .false {
width: 120px;
height: 120px;
line-height: 120px;
background-color: #caadff;
border-radius: 50%;
text-align: center;
color: #fff;
position: absolute;
right: 70%;
top: 100px;
font-family: 'NanumBarunGothic';
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(10%) rotate(2deg);}
75% {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%;
/* background: #fff; */
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;
}
.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: #CB7A1D;
border-top: 11px solid #F7AA2B;
border-left: 7px solid #F7AA2B;
border-right: 7px solid #F7AA2B;
}
.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: #F7AA2B;
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: 18px;
height: 18px;
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: 10px;
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: #F7AA2B;
}
.dog .body::after {
top: -2px;
bottom: -1px;
width: 60px;
background: #FEFEFE;
}
.dog .tail {
position: absolute;
left: -60%;
bottom: 1px;
background: #F7AA2B;
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: #F7AA2B;
border-radius: 10px 10px 0 0;
}
.dog .legs::before,
.dog .legs::after {
content: "";
position: absolute;
bottom: 1px;
background: #CB7A1D;
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 {
background: #363636;
}
.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는 이렇게 따로 작업해줍니다.
header
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz <em>객관식 확인하기(여러문제) 슬라이드 유형</em></h1></a>
<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>
<li><a href="webd.html">web</a></li>
</ul>
</header>
<!-- //header -->다음은 body안에 header영역 작업을 해줍니다.
숫자별로 링크를 넣어 유형별로 나눠줬습니다.
main
<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="search__info">
<span></span>
</div>
<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 class="quiz__info">??점</div>
<div class="quiz__check"><span>?</span>개</div>
</div>
</div>
</div>
</main>
<!-- //main -->메인 영역 작업을 해줍니다.
퀴즈 타이틀과, 문제, 정답, 설명, 다음문제, 점수 등에 대한 설정을 해줍니다.
footer
<footer id="footer">
<a href="mailto.hunmi961119@gmail.com">hunmi961119@gmail.com</a>
</footer>
<!-- //footer -->
script
<script>
//문제 정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2009년 1회",
infoNumber: "20090101",
infoQuestion: "현재 수행중에 있는 명령어 코드(code)를 저장하고 있는 임시 저장 장치는?",
infoChoice: ["인덱스 레지스터(Index register)","명령 레지스터(Instruction register)","누산기(Accumulator)","메모리 레지스터(Memory register)"],
infoAnswer: "명령 레지스터(Instruction register)",
infoDesc: "MAR:번지(주소)기억<br>MBR:버퍼(임시기억)<br>IR:명령어레지스터(명령어를 읽어서 저장)<br>PC:프로그램카운터(다음수행 명령번지 기억)<br>명령어해독기:IR 내용 해독<br>ACC:누산기(연산결과 일시(임시)저장)<br>데이터레지스터:데이터 임시저장<br>상태 레지스터:CPU상태 저장(PSW)<br>보수기:보수로 바꾸는 장치"
}, {
infoType: "정보처리 기능사",
infoTime: "2009년 1회",
infoNumber: "20090202",
infoQuestion: "반가산기(half-adder)에서 두개의 입력 비트가 모두 1 일 때 합(sum)은?",
infoChoice: ["0","1","10","11"],
infoAnswer: "0",
infoDesc: "반가산기는 XOR(합)+AND(자리올림)으로 구성합은?(=XOR회로)를 이야기하므로, XOR은 입력신호가 서로 다를때(1,0 또는 0,1) 1이고, 같을때(0,0 또는 1,1)는 0이다..그래서 결과는(두개의 입력 비트가 모두1) 0"
}, {
infoType: "정보처리 기능사",
infoTime: "2009년 1회",
infoNumber: "20090103",
infoQuestion: "EBCDIC 코드의 존(zone) 코드는 몇 비트로 구성되어 있는가?",
infoChoice: ["8","7","6","4"],
infoAnswer: "4",
infoDesc: "모든 코드의 디지트 비트는 4. <br>따라서 각 코드의 존비트 = 코드총비트 - 4."
}, {
infoType: "정보처리 기능사",
infoTime: "2009년 1회",
infoNumber: "20090104",
infoQuestion: "주기억장치에서 기억장치의 지정은 무엇을 따라 행하여 지는가?",
infoChoice: ["레코드(Record)","블록(Block)","어드레스(Address)","필드(Field)"],
infoAnswer: "어드레스(Address)",
infoDesc: "주기억 장치에서 기억장치의 지정은 번지(Address)로 합니다.1바이트 마다 1개씩 번지가 부여 됩니다."
}, {
infoType: "정보처리 기능사",
infoTime: "2009년 1회",
infoNumber: "20090105",
infoQuestion: "레지스터에 새로운 데이터를 전송하면 먼저 있던 내용은 어떻게 되는가?",
infoChoice: ["기억된 내용에 아무런 변화가 없다.","먼저 내용은 지워지고 새로운 내용은 기억된다.","먼저 내용은 다른 곳으로 전송되고 새로운 내용만 기억된다.","누산기(Accumulator)에서는 덧셈이 이루어 진다."],
infoAnswer: "먼저 내용은 지워지고 새로운 내용은 기억된다.",
infoDesc: "레지스터는 기억장치의 일종으로 새로운 데이터가 들어오면 먼저 기억하고있던 내용은 사라 집니다.자주 출제되는 문제입니다.꼭 암기 하세요"
}, {
infoType: "정보처리 기능사",
infoTime: "2009년 1회",
infoNumber: "20090106",
infoQuestion: "2진수 '101111110'을 8진수로 변환하면?",
infoChoice: ["(576)₈","(567)₈","(558)₈","(557)₈"],
infoAnswer: "(576)₈",
infoDesc: "2^3은 8이므로 2진수를 8진수로 변환시 3자리씩 끊어서 계산해 줍니다."
}
];스크립트 안에 문제를 넣어줍니다.
객관식 답은 배열안에 넣어줍니다.
//선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title");
const quizQuestion = quizWrap.querySelector(".quiz__question")
const quizChoice = quizWrap.querySelector(".quiz__choice");
const dogWrap = quizWrap.querySelector(".dog__wrap");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizNext = quizWrap.querySelector(".quiz__answer .next");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizLength = quizWrap.querySelector(".search__info span");
const quizCheck = quizWrap.querySelector(".quiz__check span");
let quizCount = 0;
let quizScore = 0;
quizTitle.textContent = quizInfo[0].infoType;선택자도 넣어줍니다.
querySelector() : 주어진 css 선택자에 해당하는 첫 번째 요소를 반환
//문제출력
const updateQuiz = (index) => {
let typeTag = `
<span>${quizInfo[index].infoType}</sapn>
<em>${quizInfo[index].infoTime}</em>
`;
let questionTag = `
<em>${index+1}</em>.
<span>${quizInfo[index].infoQuestion}</span>
`;
let choiceTag = `
<label for="choice1">
<input type="radio" id="choice1" name="choice" value="1">
<span>${quizInfo[index].infoChoice[0]}</span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" value="2">
<span>${quizInfo[index].infoChoice[1]}</span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" value="3">
<span>${quizInfo[index].infoChoice[2]}</span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" value="4">
<span>${quizInfo[index].infoChoice[3]}</span>
</label>
`;
let descTag = `
정답은 ${quizInfo[index].infoAnswer}입니다.<br>
${quizInfo[index].infoDesc}
`;
let lengthTag = `
총 ${quizInfo.length}문제 /${quizInfo.length - index-1} 문제 남았습니다.
`;
quizTitle.innerHTML = typeTag;
quizQuestion.innerHTML = questionTag;
quizChoice.innerHTML = choiceTag;
quizDesc.innerHTML = descTag;
quizLength.innerHTML = lengthTag;다음 문제 출력에 대한 정의도 해줍니다.
typeTag 문제 유형과 제한 시간을 포함하는 HTML 코드
questionTag 문제 번호와 질문을 포함하는 HTML코드
choiceTag 선택지를 포함하는 HTML코드
descTag 정답과 해설을 포함하는 HTML 코드
lengthTag 남은 문제 수를 표시하는 HTML 코드
//보기 선택자
const quizChoiceSpan = quizWrap.querySelectorAll(".quiz__choice span");
const quizChoiceInput = quizWrap.querySelectorAll(".quiz__choice input");
// quizChoiceSpan.forEach((span, num) => {
// span.setAttribute("onclick", "choiceSelected(this)");
// });
for(let i=0; i<quizChoiceSpan.length; i++){
quizChoiceSpan[i].setAttribute("onclick", "choiceSelected(this)");
// quizChoiceInput[i].disabled = "true";
}
//다음 버튼, 해설 숨기기
quizAnswer.style.display = "none";
quizDesc.style.display = "none";
};
updateQuiz(quizCount);
//객관식 선택
function choiceSelected(answer){
let userAnswer = answer.textContent;//사용자 정답
let currentAnswer = quizInfo[quizCount].infoAnswer;//문제 정답
if(userAnswer == currentAnswer){
console.log("정답입니다.");
dogWrap.classList.add("like");
quizScore++;
} else {
console.log("오답입니다.");
dogWrap.classList.add("dislike");
};
quizAnswer.style.display = "block";
quizDesc.style.display = "block";
if(quizInfo.length - quizCount == 1){
document.querySelector(".quiz__info").innerHTML = Math.ceil((quizScore / quizInfo.length)*100)+"점";
quizCheck.innerHTML = quizScore;
}
};
//정답 확인
quizNext.addEventListener("click", () => {
quizCount++;
updateQuiz(quizCount);
dogWrap.classList.remove("like", "dislike");
});
</script>
</body>
</html>보기 선택자, 다음 버튼, 해설, 정답확인 등에 대한 정의를 해줍니다.
updateQuiz()함수가 호출되어 현재 퀴즈에 대한 정보가 화면에 출력.
그 후 사용자가 보기 중 하나를 클릭하면 choiceSelected() 함수가 호출되어 사용자가 선택한 정답과 정답을 비교하여, 해당 퀴즈에 대한 사용자의 성적을 계산.
마지막 문제를 푸는 순간, 사용자의 최종 성적을 출력하게끔 만들었습니다.
반응형