generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
203 lines (157 loc) · 7.44 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
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<!-- metadata tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta tags for search engines -->
<meta name="description" content="A game for practicing the order of mathematical operations">
<meta name="keywords" content="order of operations, mathematics, maths, math, PEMDAS, BIDMAS, BEDMAS, addition, subtraction, multiplication, division, add, subtract, divide, multiply, plus, minus, times">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<!-- Stylesheet -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Madimi+One&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<!-- title -->
<title>Operator Game</title>
</head>
<body>
<!-- the Welcome screen explaining the gameplay and the scoring rules -->
<section id="welcome-section" class="popup" aria-label="The welcome screen with the explanation of the gameplay and scoring">
<!-- the section explaining the gameplay -->
<section id="gameplay-rules-section" aria-label="The section explaining how to play the game">
<p>
With this game, you can practice the <a href="https://en.wikipedia.org/wiki/Order_of_operations"
target="_blank" rel="noopener" aria-label="Wikipedia article on the order of mathematical operations (opens in a new tab)">
mathematical order of operations</a>.
</p>
<p>
Select the correct operator(s) from the drop-down menu(s)to get the equation to work out,
then click Check Answer to see if your guess was correct.
</p>
<p>
You can change how many numbers are included in the equation with the drop-down menu on the bottom.
</p>
<p>
You can choose between these operators:
</p>
<ul>
<li><span class="operator">+</span> addition</li>
<li><span class="operator">−</span> subtraction</li>
<li><span class="operator">×</span> multiplication</li>
<li><span class="operator">÷</span> division</li>
</ul>
<!-- button taking the user to the Score Rules screen -->
<button data-type="submit" id="score-button" class="small-button">See how scoring works</button>
</section><!-- end of `gameplay-rules-section` -->
<!-- the section displaying how scoring works, hidden by default -->
<section id="score-rules-section" aria-label="The section explaining scoring in the game">
<p>
We all need less stress and more positive reinforcement in our lives,
so this game only counts your correct guesses in a row –
who cares how many times you got it wrong, let's celebrate the wins! 🎉
</p>
<p>
Keep an eye out for special surprises at certain milestones 👀
</p>
<br>
<p>
Just can't get your head around a puzzle? 😩
</p>
<p>
Don't worry, you can skip it without ruining your streak: just press the New Puzzle button,
or adjust how many numbers you want to play with using the drop-down menu at the bottom.
</p>
<p>
Both of those give you a new puzzle while keeping your streak 🤗
</p>
<p>
But if you have the spoons to challenge yourself and don't mind getting it wrong sometimes,
go for it – that's how you'll learn even more! 💪
</p>
<!-- button taking the user back to the Gameplay Rules screen -->
<button data-type="submit" id="gameplay-rules-button" class="small-button">See how gameplay works</button>
</section><!-- end of `score-rules-section` -->
<!-- the Start Game button -->
<button data-type="submit" id="start-game-button" class="big-button">Let's Play!</button>
</section><!-- end of `welcome-section` -->
<!-- "popup" for certain milestones – hidden by default -->
<section id="milestone-section" class="popup" aria-label="A congratulatory message that pops up at certain streak milestones">
<div id="milestone-text">
Wow, <span>X</span> in a row!
</div>
<!-- the Continue Game button -->
<button data-type="submit" id="continue-game-button" class="big-button">Continue</button>
</section><!-- end of `milestone-section` -->
<!-- the main title of the game -->
<h1 class="heading">Operator Game</h1>
<!-- game area including the instuctions, the question to be solved and the submit button -->
<section id="game-area" aria-label="The area for playing the game">
<p>Choose the correct operators to make the equation true</p>
<!-- contains the operands, operators and the expected result -->
<div id="question-area">
<!-- an operand -->
<span class="operand">1</span>
<!-- operator drop-down menu -->
<form action="/action_page.php">
<select class="operator-selector" name="operator" aria-label="Operator selector drop-down">
<option value="+">+</option>
<option value="-">−</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
</form>
<!-- an operand -->
<span class="operand">1</span>
<!-- operator drop-down menu -->
<form action="/action_page.php">
<select class="operator-selector" name="operator" aria-label="Operator selector drop-down">
<option value="+">+</option>
<option value="-">−</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
</form>
<!-- an operand -->
<span class="operand">1</span>
<!-- equal sign -->
<span id="equal-sign">=</span>
<!-- the correct result -->
<span id="result">1</span>
</div> <!-- end of `question-area` -->
<!-- this is where the evaluation message appears after checking the answer -->
<div id="solution"></div>
<!-- Submit button -->
<button data-type="submit" id="submit-button">Check Answer</button>
</section><!-- end of `game-area` -->
<!-- New Puzzle/New Game button -->
<button data-type="submit" id="new-game-button" class="big-button">New Puzzle</button>
<!-- perfect streak counter -->
<div id="streak-div">
Your perfect streak:
<span id="streak-counter">0</span>
</div>
<!-- number selector: how many numbers should the game include -->
<div id="number-selector-div">
<label for="number-selector">Select the number of operands:</label>
<form action="/action_page.php">
<select id="number-selector" name="number-selector">
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</form>
</div>
<!-- button to show the Welcome screen again -->
<button data-type="submit" id="welcome-screen-button" class="small-button" aria-label="Click to show the rules again">Show the rules again</button>
<!-- load JavaScrip file -->
<script src="assets/js/script.js"></script>
</body>
</html>