-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (137 loc) · 5.43 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en" translate="no">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="/css/style.min.css">
<title>Naruto Quiz</title>
</head>
<body>
<main>
<!-- Start Quiz -->
<div class="start-quiz center">
<button class="start-quiz-btn pushable">
<span class="front">
Start Quiz!
</span>
</button>
</div>
<!-- Info Box -->
<div class="wrapper-infoBox">
<div class="info-box center">
<div class="info-box-title">
<h3>Some Rules of this Quiz *</h3>
</div>
<ul class="info-box-list">
<li class="info-items">1. You will have only <span>15 seconds</span> to answer each question.</li>
<li class="info-items">2. Once you select your answer, it can't be undone.</li>
<li class="info-items">3. You can't select any option once time goes off.</li>
<li class="info-items">4. You can't quit from the quiz while playing.</li>
<li class="info-items">5. You will get points on the basis of your correct answers.</li>
</ul>
<div class="buttons flex-row my-1">
<button class="btn outlined-btn exit">Exit Quiz</button>
<button class="btn primary-btn continue">Continue</button>
</div>
<div class="kurama">
<img src="/images/kurama.png" alt="">
</div>
</div>
</div>
<!-- Quiz Box -->
<div class="wrapper-quizBox">
<div class="quiz-box center">
<div class="quiz-box-header flex-between">
<div class="quiz-box-header-text">
Naruto Quiz
</div>
<div class="quiz-box-header-timer flex-row">
<div class="timer-text">
Time Left
</div>
<div class="timer-secs flex-center">
15
</div>
</div>
</div>
<div class="quiz-box-body">
<div class="question-title">
</div>
<ul class="options-list">
<li class="option">
Gyuuki
</li>
<li class="option">
Kurama
</li>
<li class="option">Choumei</li>
<li class="option">Kyuubi</li>
</ul>
</div>
<div class="quiz-box-footer flex-between">
<div class="total-questions">
</div>
<button class="btn primary-btn next">Next Question</button>
</div>
<div class="kurama">
<img src="/images/kurama.png" alt="">
</div>
</div>
</div>
<!-- Result Box -->
<div class="result-box center">
<div class="result-box-icon">
<i class="fas fa-crown"></i>
</div>
<div class="result-box-text">
You've completed the Quiz! and...
</div>
<div class="result-box-score">
sorry 😐, you got only <span>2</span> out of <span>10</span>...
</div>
<div class="buttons flex-center">
<button class="btn primary-btn restart">Restart Quiz</button>
<button class="btn outlined-btn quit">Quit Quiz</button>
</div>
<div class="kurama">
<img src="/images/kurama.png" alt="">
</div>
</div>
</main>
<!-- Language Switcher -->
<div class="language-menu">
<div class="selected-lang my-1">
<i class="fas fa-globe"></i>
<span>Language</span>
</div>
<ul class="language-list">
<li class="language" onclick="changeLanguage('eng')">
<img src="/images/english.png" alt="">
<span>English</span>
</li>
<li class="language" onclick="changeLanguage('ptBr')">
<img src="/images/portuguese.png" alt="">
<span>Portuguese</span>
</li>
</ul>
</div>
<!-- Github code -->
<div class="github">
<div class="code">
<a href="https://github.com/thaua-engelmann/naruto-quiiz">
<i class="fas fa-code"></i>
<span>github</span>
</a>
</div>
</div>
<!-- Scripts -->
<script src="/javascript/questions.js"></script>
<script src="/javascript/main.js"></script>
<script src="/javascript//language/language.js"></script>
</body>
</html>