-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
185 lines (159 loc) · 9.04 KB
/
test.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Quiz App</title>
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<main class="container">
<!-- 01 -->
<div class="quiz" id="quiz">
<div class="quiz__description">
<h1 class="title title-2">JavaScript Quiz</h1>
<p>Évaluez vos connaissances en JavaScript en répondant aux questions que nous avons spécialement
sélectionnées
pour vous.
C'est fun et c'est gratuit. </p>
</div>
<div class="quiz__container">
<form action="" class="form" id="form-login">
<div class="input-container">
<label for="name">Nom</label>
<div class="input-group">
<input type="text" class="input" name="name" id="name" placeholder="Entrer votre nom"
required>
</div>
<!-- Validation -->
<div class="input-error" id="name-errors">N’oubliez pas de renseigner votre nom avant de
commencer le Quiz.
</div>
</div>
<div class="input-container">
<label for="name">Email </label>
<div class="input-group invalid">
<input type="text" class="input" name="name" id="name" placeholder="Entrer votre email"
required>
</div>
<!-- Validation -->
<div class="input-error" id="email-errors">N’oubliez pas de renseigner votre email avant de
commencer le
Quiz
</div>
</div>
<div class="btn-container">
<button type="submit" class="btn btn-green">Commencer</button>
</div>
</form>
</div>
</div>
<!-- End 01 -->
<!-- 02 -->
<div class="quiz">
<div class="quiz__description">
<p id="question">Quel est le type d'un fichier javascript ? </p>
<div class="progression">
<div class="progression__details">
<p class="questions-report">Question <span id="progress">1/15</span></p>
<p class="questions_count" id="timer">30</p>
</div>
<div class="progression__bar">
<div class="bar"></div>
</div>
</div>
</div>
<div class="quiz__container">
<form action="" class="form form-question">
<div class="input-container">
<div class="input-group input-group-question" id="guess0">
<input type="radio" class="input input-question" name="question"
placeholder="Entrer votre nom" required>
<label for="question" class="question-name"></label>
<span class="question-tag" id="choice0">.td</span>
</div>
</div>
<div class="input-container">
<div class="input-group input-group-question" id="guess1">
<input type="radio" class="input input-question" name="question" id="question2"
placeholder="Entrer votre nom" required>
<label for="question2" class="question-name"></label>
<span class="question-tag" id="choice1">.jsx</span>
</div>
</div>
<div class="input-container">
<div class="input-group input-group-question" id="guess2">
<input type="radio" class="input input-question" name="question" id="question3"
placeholder="Entrer votre nom" required>
<label for="question3" class="question-name"></label>
<span class="question-tag" id="choice2">.js</span>
</div>
</div>
<div class="input-container">
<div class="input-group input-group-question" id="guess3">
<input type="radio" class="input input-question" name="question4" id="question2"
placeholder="Entrer votre nom" required>
<label for="question4" class="question-name"></label>
<span class="question-tag" id="choice3">.j</span>
</div>
</div>
<div class="btn-container">
<button class="btn btn-warning prev" type="submit">Quitter</button>
<button class="btn btn-green-min next" type="submit">Suivant</button>
</div>
</form>
</div>
</div>
<!-- End 02 -->
<!-- 03 -->
<div class="quiz">
<div class="quiz__description">
<h2 class="title title-2">Joseph </h2>
<p>joseph@kinshasadigital.com</p>
<svg width="174" height="174" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M118.776 59.9844H110.806C109.073 59.9844 107.425 60.817 106.405 62.2443L79.6936 99.2873L67.5951 82.499C66.5756 81.0887 64.9443 80.2391 63.1941 80.2391H55.2248C54.1203 80.2391 53.4746 81.4965 54.1203 82.3971L75.2926 111.76C75.7927 112.458 76.4521 113.026 77.216 113.419C77.9799 113.811 78.8263 114.016 79.6851 114.016C80.5438 114.016 81.3903 113.811 82.1541 113.419C82.918 113.026 83.5774 112.458 84.0775 111.76L119.863 62.1424C120.526 61.2418 119.88 59.9844 118.776 59.9844V59.9844Z"
fill="#028A3D" />
<path
d="M87 10.875C44.9613 10.875 10.875 44.9613 10.875 87C10.875 129.039 44.9613 163.125 87 163.125C129.039 163.125 163.125 129.039 163.125 87C163.125 44.9613 129.039 10.875 87 10.875ZM87 150.211C52.098 150.211 23.7891 121.902 23.7891 87C23.7891 52.098 52.098 23.7891 87 23.7891C121.902 23.7891 150.211 52.098 150.211 87C150.211 121.902 121.902 150.211 87 150.211Z"
fill="#028A3D" />
</svg>
<p class="title title-2">14/15</p>
</div>
<div class="quiz__container">
<form action="" class="form form-result">
<div class="btn-container">
<button class="btn btn-info" type="submit">Acceuil</button>
</div>
</form>
</div>
</div>
<!-- end 03 -->
<!-- 04 -->
<div class="quiz">
<div class="quiz__description">
<h2 class="title title-2">Joseph </h2>
<p>joseph@kinshasadigital.com</p>
<svg width="174" height="174" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M116.464 60.2891C116.464 59.5414 115.852 58.9297 115.105 58.9297L103.89 58.9807L86.9996 79.1164L70.1264 58.9977L58.8945 58.9467C58.1469 58.9467 57.5352 59.5414 57.5352 60.3061C57.5352 60.6289 57.6541 60.9348 57.858 61.1897L79.9648 87.5275L57.858 113.848C57.6527 114.097 57.5388 114.409 57.5352 114.732C57.5352 115.48 58.1469 116.091 58.8945 116.091L70.1264 116.04L86.9996 95.9047L103.873 116.023L115.088 116.074C115.835 116.074 116.447 115.48 116.447 114.715C116.447 114.392 116.328 114.086 116.124 113.831L94.0514 87.5105L116.158 61.1727C116.362 60.9348 116.464 60.6119 116.464 60.2891Z"
fill="#FF3838" />
<path
d="M87 11.0469C44.9613 11.0469 10.875 45.1332 10.875 87.1719C10.875 129.211 44.9613 163.297 87 163.297C129.039 163.297 163.125 129.211 163.125 87.1719C163.125 45.1332 129.039 11.0469 87 11.0469ZM87 150.383C52.098 150.383 23.7891 122.074 23.7891 87.1719C23.7891 52.2699 52.098 23.9609 87 23.9609C121.902 23.9609 150.211 52.2699 150.211 87.1719C150.211 122.074 121.902 150.383 87 150.383Z"
fill="#FF3838" />
</svg>
<p class="title title-2">1/15</p>
</div>
<div class="quiz__container">
<form action="" class="form form-result">
<div class="btn-container">
<button class="btn btn-info" type="submit">Acceuil</button>
</div>
</form>
</div>
</div>
<!-- End 04 -->
</main>
<script src="/assets/js/script.js" type="module"></script>
</body>
</html>