-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
178 lines (160 loc) · 6.5 KB
/
index.html
File metadata and controls
178 lines (160 loc) · 6.5 KB
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
<!DOCTYPE html>
<html lang="en">
<head charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/chatbot.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="scripts/main.js" defer></script>
<title>Frontend quiz app</title>
</head>
<body class="dark">
<header>
<div class="subject hide" id="selected-subject">
<picture class="subject__icon access-icon">
<img src="images/icon-accessibility.svg" id="subject-icon" alt="">
</picture>
<p class="subject__text">Accessibility</p>
</div>
<div class="theme">
<img src="images/icon-sun-light.svg" alt="" id="theme__sun--dark" class="theme__icon">
<label class="theme__toggle">
<p class="slider--light hide" id="slider-light"></p>
<input type="checkbox" id="theme__switch" />
<p class="slider--dark" id="slider-dark"></p>
</label>
<img src="images/icon-moon-light.svg" alt="" id="theme__moon--dark" class="theme__icon">
</div>
</header> <!--closes theme-toggle-->
<!-- Quiz menu start -->
<main>
<section class="menu" id="menu-page">
<div class="menu__welcome">
<div class="menu__title">
<h1>Welcome to the</h1>
<h2>Frontend Quiz!</h2>
</div>
<p class="menu__text">Pick a subject to get started.</p>
</div>
<div class="menu__options">
<button class="menu__option dark" id="html-btn">
<picture class="menu__option-icon html-icon">
<img src="images/icon-html.svg" alt="">
</picture>
<p >HTML</p>
</button>
<button class="menu__option dark" id="css-btn">
<picture class="menu__option-icon css-icon">
<img src="images/icon-css.svg" alt="">
</picture>
<p >CSS</p>
</button>
<button class="menu__option dark" id="js-btn">
<picture class="menu__option-icon js-icon">
<img src="images/icon-js.svg" alt="">
</picture>
<p >JavaScript</p>
</button>
<button class="menu__option dark" id="access-btn">
<picture class="menu__option-icon access-icon">
<img src="images/icon-accessibility.svg" alt="">
</picture>
<p >Accessibility</p>
</button>
</div><!--closes menu__options-->
</section>
<!-- Quiz menu end -->
<!-- Quiz question start -->
<section class="question hide" id="question-page">
<div class="question__content">
<div class="question__card-wrapper">
<div class="question__card">
<p class="question__number">Question <span id="question__index">6</span> of 10</p>
<p class="question__text">Which of these color contrast ratios defines the minimum WCAG 2.1 Level AA requirement for normal text?</p>
</div>
<div class="question__progress">
<div class="question__progress-bar"></div>
</div>
</div><!--closes question__card-->
<div class="question__options">
<button class="question__option dark" id="a">
<p class="question__button">A</p>
<div class="option-text-wrapper">
<p class="question__opt-txt" id="a-text">4.5 : 1</p>
<picture ><img class="validation-icon hide" src="images/icon-correct.svg" alt=""></picture>
</div>
</button>
<button class="question__option dark" id="b">
<p class="question__button">B</p>
<div class="option-text-wrapper">
<p class="question__opt-txt" id="b-text">3 : 1</p>
<picture ><img class="validation-icon hide" src="images/icon-correct.svg" alt=""></picture>
</div>
</button>
<button class="question__option dark" id="c">
<p class="question__button">C</p>
<div class="option-text-wrapper">
<p class="question__opt-txt" id="c-text">2.5 : 1</p>
<picture ><img class="validation-icon hide" src="images/icon-correct.svg" alt=""></picture>
</div>
</button>
<button class="question__option dark" id="d">
<p class="question__button">D</p>
<div class="option-text-wrapper">
<p class="question__opt-txt" id="d-text">5 : 1</p>
<picture><img class="validation-icon hide" src="images/icon-correct.svg" alt=""></picture>
</div>
</button>
</div><!--closes question__options-->
</div><!--closes qustion__content-->
<div class="question__submit">
<button class="question__submit-btn">Next Question</button>
<p id="question__submit-error" class="submit-error hide"><img src="images/icon-error.svg" alt="">Please select an answer</p>
</div>
</section>
<!-- Quiz question end -->
<!-- Quiz completed start -->
<section class="complete hide" id="complete-page">
<div class="complete__content">
<div class="complete__text">
<p class="complete__text-a">Quiz completed</p>
<p class="complete__text-b">You scored...</p>
</div>
<div class="complete__summary dark">
<div class="complete__subject">
<picture class="complete__subject-icon">
<img class="access-icon" src="images/icon-accessibility.svg" alt="">
</picture>
<p class="subject__text">Accessibility</p>
</div>
<div class="complete__numbers">
<p class="complete__score">
<span id="final-score">8</span>
</p>
<p class="complete__goal dark">out of 10</p>
</div>
</div><!--closes complete__summary-->
</div><!--closes complete__content-->
<div class="complete__again">
<button class="complete__again-btn">Play Again</button>
</div>
</section> <!--closes complete-->
<div class="" id="show-chatbot-wrapper">
<button id="show-chatbot">Ask A.I. for help</button>
</div>
<div class="hide" id="chatbot-container">
<div class="chatbot-title-wrapper">
<h3 class="chatbot-title">Quiz Helper Bot</h3>
<button id="exit-chatbot">X</button>
</div>
<div id="chat-history"></div>
<textarea type="text" id="chat-input" placeholder="Ask about the quiz..." rows="3"></textarea>
<button id="send-chat-btn">Ask</button>
</div>
<!-- Quiz completed end -->
</main>
</body>
</html>