-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (83 loc) · 7.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/styles.css">
<title>Simple Quiz</title>
</head>
<body>
<div id="quiz-app">
<section class="center-card quiz-details" id="quiz-details">
<div class="quiz-details__question-icon">
<svg viewBox="-10 -10 540 540" width="85px" height="85px">
<path d="m437.019531 74.980469c-48.351562-48.351563-112.640625-74.980469-181.019531-74.980469-61.554688 0-121.039062 22.160156-167.5 62.402344-3.175781 2.75-3.519531 7.554687-.769531 10.726562 2.75 3.175782 7.550781 3.519532 10.726562.769532 43.695313-37.847657 99.644531-58.691407 157.542969-58.691407 64.316406 0 124.785156 25.046875 170.265625 70.527344s70.527344 105.949219 70.527344 170.265625-25.046875 124.785156-70.527344 170.265625-105.949219 70.527344-170.265625 70.527344-124.785156-25.046875-170.265625-70.527344-70.527344-105.949219-70.527344-170.265625c0-59.824219 22.082031-117.175781 62.183594-161.484375 2.816406-3.113281 2.574219-7.921875-.539063-10.742187-3.113281-2.816407-7.921874-2.578126-10.738281.539062-42.632812 47.109375-66.113281 108.082031-66.113281 171.6875 0 68.378906 26.628906 132.667969 74.980469 181.019531 48.351562 48.351563 112.640625 74.980469 181.019531 74.980469s132.667969-26.628906 181.019531-74.980469c48.351563-48.351562 74.980469-112.640625 74.980469-181.019531s-26.628906-132.667969-74.980469-181.019531zm0 0"/>
<path d="m246.332031 347.125c-23.480469 0-42.585937 19.3125-42.585937 43.046875s19.105468 43.046875 42.585937 43.046875c11.527344 0 22.382813-4.585938 30.566407-12.917969 7.929687-8.074219 12.480468-19.054687 12.480468-30.128906 0-11.378906-4.511718-22.15625-12.699218-30.347656-8.191407-8.1875-18.96875-12.699219-30.347657-12.699219zm0 70.886719c-15.097656 0-27.378906-12.488281-27.378906-27.839844s12.28125-27.839844 27.378906-27.839844c15.089844 0 27.835938 12.75 27.835938 27.839844s-12.746094 27.839844-27.835938 27.839844zm0 0"/>
<path d="m319.605469 228.371094c3.167969 2.765625 7.96875 2.4375 10.730469-.726563 18.324218-20.992187 27.617187-42.96875 27.617187-65.316406 0-23.566406-10.585937-44.929687-29.804687-60.152344-19.320313-15.300781-45.539063-23.386719-75.828126-23.386719-37.46875 0-60.644531 12.648438-73.484374 23.257813-15.527344 12.828125-24.800782 30.03125-24.800782 46.015625 0 10.390625 4.253906 19.542969 11.980469 25.773438 6.359375 5.128906 14.828125 8.070312 23.242187 8.070312 14.496094 0 20.851563-9.371094 25.957032-16.902344 6.46875-9.535156 12.574218-18.542968 35.71875-18.542968 7.933594 0 33.820312 1.710937 33.820312 23.695312 0 16.59375-15.339844 28.371094-28.875 38.761719-3.34375 2.5625-6.5 4.988281-9.445312 7.488281-15.585938 13.433594-33.480469 34.183594-33.480469 75.726562 0 23.074219 5.597656 38.445313 32.921875 38.445313 12.101562 0 21.238281-2.742187 27.15625-8.148437 4.96875-4.539063 7.597656-10.878907 7.597656-18.335938 0-22.414062 0-33.664062 22.859375-51.542969l.390625-.304687c1.007813-.785156 2.171875-1.695313 3.453125-2.730469 3.269531-2.636719 3.78125-7.421875 1.144531-10.691406-2.636718-3.269531-7.421874-3.78125-10.691406-1.144531-1.214844.980468-2.3125 1.835937-3.261718 2.578124l-.402344.3125c-27.367188 21.40625-28.699219 37.292969-28.699219 63.527344 0 3.371094 0 11.273438-19.546875 11.273438-9.546875 0-12.453125-1.996094-13.917969-3.738282-2.554687-3.035156-3.796875-9.414062-3.796875-19.5 0-35.160156 14.257813-52.1875 28.15625-64.167968 2.621094-2.222656 5.632813-4.535156 8.824219-6.984375 15.511719-11.910157 34.824219-26.734375 34.824219-50.824219 0-23.632812-19.246094-38.902344-49.03125-38.902344-31.203125 0-41.085938 14.574219-48.304688 25.214844-4.933594 7.277344-7.183594 10.230469-13.371094 10.230469-8.042968 0-20.011718-4.964844-20.011718-18.636719 0-8.878906 5.0625-22.550781 19.277344-34.292969 10.921874-9.019531 30.851562-19.777343 63.800781-19.777343 53.242187 0 90.421875 28.101562 90.421875 68.335937 0 18.5625-8.027344 37.171875-23.863282 55.316406-2.765624 3.164063-2.4375 7.964844.722657 10.726563zm0 0"/>
</svg>
</div>
<h2 class="quiz-details__title"></h2>
<p class="quiz-details__description"></p>
<div class="quiz-details__meta --qc">
<span>Question Count:</span><strong>--</strong>
</div>
<div class="quiz-details__meta --t">
<span>Time:</span><strong>--</strong>
</div>
<div class="quiz-details__start-btn-wrapper">
<button class="default-btn quiz-details__start-btn">
Start
</button>
</div>
</section>
<section class="center-card questions-card" id="questions-card">
<div class="questions-card__progress-wrapper">
<span class="questions-card__q-count">Question 0/0</span>
<span class="questions-card__remaining-time">00:00</span>
<div class="questions-card__progress"><span class="--value"></span></div>
</div>
<p class="questions-card__q-title" id="question-title" data-qn="Q 1:"></p>
<div class="question-card__options">
<div class="question-card__option __one">
<input type="radio" name="question-option" id="option-one" value="0"/>
<label class="question-card__option__value" for="option-one"></label>
</div>
<div class="question-card__option __two">
<input type="radio" name="question-option" id="option-two" value="1"/>
<label class="question-card__option__value"
for="option-two"></label>
</div>
<div class="question-card__option __three">
<input type="radio" name="question-option" id="option-three" value="2"/>
<label class="question-card__option__value"
for="option-three"></label>
</div>
<div class="question-card__option __four">
<input type="radio" name="question-option" id="option-four" value="3"/>
<label class="question-card__option__value"
for="option-four"></label>
</div>
</div>
<div class="question-card-buttons">
<button class="default-btn question-card-buttons__stop"
id="stop-btn">STOP
</button>
<button class="default-btn question-card-buttons__next"
id="next-btn">NEXT
</button>
</div>
</section>
<section class="center-card result-card" id="result-card">
<h2 class="result-card__score" id="score">0</h2>
<strong class="result-card__score__lbl">Your Score</strong>
<div class="result-card-buttons">
<button class="default-btn" id="go-to-home">Go to Home</button>
</div>
</section>
</div>
<script src="scripts/quiz.js"></script>
<script src="scripts/elements-helper.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>