-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
406 lines (375 loc) · 17.5 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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="keywords" content="Money game, coin game, game, reception kids, kids game" />
<meta name="author" content="Neringa Bickmore" />
<meta name="Description" content="Maths game for children age 4-6" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<!-- Favicons-->
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png" />
<title>Game: Money Pot</title>
</head>
<body>
<!-- Logo-->
<header class="container">
<div class="row pt-1">
<div class="col-12 text-md-left mx-3">
<h1>money pot</h1>
</div>
</div>
</header>
<!-- Game console-->
<section class="container">
<div class="row">
<!-- Dashboard-->
<div class="col-12 col-lg-5" id="game-dashboard">
<div class="row align-items-center">
<!-- Game stages-->
<div class="col-12 mb-lg-4 px-0">
<div class="row">
<!-- Game Level-->
<div class="col-6 col-lg-12 text-right text-lg-center px-2" id="gameLevel">
<!--Game Level is displayed here from JS-->
</div>
<!-- Game Task-->
<div class="col-6 col-lg-12 text-left text-lg-center px-2" id="gameTask">
<!--Game Task is displayed here from JS-->
</div>
</div>
</div>
<!-- Star reward display-->
<div class="col-12 mb-lg-4">
<div class="row py-2">
<div class="col-12 d-flex justify-content-center px-0">
<div class="no-star" id="star1">
<i class="fas fa-star" aria-hidden="true" title="no star"></i>
</div>
<div class="no-star" id="star2">
<i class="fas fa-star" aria-hidden="true" title="no star"></i>
</div>
<div class="no-star" id="star3">
<i class="fas fa-star" aria-hidden="true" title="no star"></i>
</div>
<div class="no-star" id="star4">
<i class="fas fa-star" aria-hidden="true" title="no star"></i>
</div>
<div class="no-star" id="star5">
<i class="fas fa-star" aria-hidden="true" title="no star"></i>
</div>
<div class="no-star" id="star6">
<i class="fas fa-star" aria-hidden="true" title="no star"></i>
</div>
</div>
</div>
</div>
<!-- Game navigation-->
<div class="col-12">
<div class="row">
<div class="col-12 d-flex justify-content-center" id="gameNavBtn">
<!-- Restart the game-->
<button type="button" class="btn-round btn-all" title="Reset the Game" data-toggle="tooltip"
data-placement="top">
<i class="fas fa-sync" aria-hidden="true" id="resetGame"></i>
</button>
<!-- Reset the sum-->
<button type="button" class="btn-round btn-all" title="Reset the Sum" data-toggle="tooltip"
data-placement="top">
<i class="fas fa-redo" aria-hidden="true" id="resetSum"></i>
</button>
<!-- How to play-->
<button type="button" class="btn-round btn-all" data-toggle="modal" data-target="#gameRulesModal">
<i class="fas fa-question" aria-hidden="true" title="Rules of the Game" data-toggle="tooltip"
data-placement="top"></i>
</button>
<!-- 1. How to play: Modal box-->
<div class="modal fade" id="gameRulesModal" tabindex="-1" role="dialog"
aria-labelledby="game-rules-main" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- 1.1 How to play: Header-->
<div class="modal-header">
<div class="modal-title col-12" id="gameRulesHeader">
<h2>
How to play Money Pot!
</h2>
</div>
</div>
<!-- 1.2 How to play: Main body-->
<div class="container pt-3">
<div class="row" id="game-rules-main">
<div class="col text-left">
<ul>
<li>
Show your child some real coins. Let them
identify the number on the price tag. Help
your child to recognise the coins on the
screen.
</li>
<li>
To start, click on the chosen coins until
below sum display is equal to the price tag.
Please encourage your child to use a variety
of coins. Every time they play the game they
can choose alternative coins to come up with
the sum.
</li>
<li>
There are 3 levels to complete with 6 tasks in
each. Every correct task is rewarded with a
star. The task will restart if the sum is
greater than the price tag.
</li>
<li>
Have fun playing the game with your child and
please remember to leave us your feedback!
</li>
</ul>
</div>
</div>
</div>
<!-- 1.3 How to play: exit button-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn-round btn-all" data-dismiss="modal" title="Close and Play"
data-toggle="tooltip" data-placement="top">
<i class="fas fa-times-circle" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<!-- How to play: End-->
<!-- Sound off-->
<button type="button" class="btn-round btn-all" title="Sound Off" data-toggle="tooltip"
data-placement="top">
<i class="fas fa-volume-mute" aria-hidden="true" id="soundOff"></i>
</button>
<!-- Sound on-->
<button type="button" class="btn-round btn-all" title="Sound On" data-toggle="tooltip"
data-placement="top">
<i class="fas fa-volume-up" aria-hidden="true" id="soundOn"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Game card-->
<div class="col-12 col-lg-7" id="game-card">
<div class="row align-items-center justify-content-center">
<!-- 1.0 Price tag-->
<div class="col-12" id="price">
<!-- 1.1 Price tag display is imported in here from JS file-->
</div>
<!-- 2.0 Coin display-->
<div class="col-12">
<div class="row justify-content-center align-items-center" id="coin">
<!-- 2.1 Coins display is imported here from JS file-->
</div>
</div>
<!-- 3.0 Money pot image and sum display-->
<div class="col-12" id="game-display-end">
<div class="row align-items-center justify-content-center">
<div class="col-6" id="moneyPot">
<img src="assets/images/money-pot.png" alt="money pot" class="img h-100 w-100" />
</div>
<div class="col-6" id="sum">
<!-- 3.1 Sum display is imported here from JS file-->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="container">
<div class="row">
<ul class="col-12 d-flex justify-content-center mb-1">
<!-- Facebook-->
<li class="p-2">
<a target="_blank" href="https://en-gb.facebook.com/" rel="noopener" aria-label="Find us on Facebook">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
</li>
<!-- Twitter-->
<li class="p-2">
<a target="_blank" href="https://www.twitter.com/" rel="noopener" aria-label="Find us on Twitter">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
</li>
<!-- Instagram-->
<li class="p-2">
<a target="_blank" href="https://www.instagram.com/" rel="noopener" aria-label="Find us on Instagram">
<i class="fab fa-instagram" aria-hidden="true"></i>
</a>
</li>
<!-- 1. Contact-->
<li class="p-2 " data-toggle="modal" data-target="#contactForm" title="Contact us directly">
<i class="fas fa-envelope" aria-hidden="true"></i>
</li>
</ul>
<!-- 1. Contact form: Modal box-->
<div class="modal fade" tabindex="-1" id="contactForm" role="dialog" aria-labelledby="contactFormHeader"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" id="contact-form-box">
<!-- 1.1 Contact form: Header-->
<div class="modal-header">
<div class="modal-title col-12" id="contactFormHeader">
<button type="button" class="close p-1" data-dismiss="modal" aria-label="Close">x</button>
<h2 class="pt-4 pb-2">
Help us improve! </h2>
<p class="pb-2">We value every customer and your feedback matters to us.</p>
<small>We would love to hear from you <br>if you have any suggestions or general
enquiries.</small>
</div>
</div>
<!-- 1.2 Contact form: Main body-->
<form class="container pt-1" action="feedback.html">
<div class="row justify-content-center">
<div class="col-12 col-lg-7">
<!-- 1.1.1 name input-->
<div class="form-group mb-0">
<label for="name"></label>
<input name="name" type="text" class="form-control" id="name" placeholder="Your Name" required />
</div>
<!-- 1.1.2 email address input-->
<div class="form-group">
<label for="email"></label>
<input name="email" type="email" class="form-control" id="email" placeholder="Your email address"
required />
</div>
<!-- 1.1.3 question one-->
<div class="form-group">
<div class="px-0">
<label for="formQ1">
How challenging were the tasks for your
child?
</label>
</div>
<div class="px-0">
<select name="formQ1" class="form-control" id="formQ1">
<option value="">Select</option>
<option value="too challenging">Too challenging</option>
<option value="very challenging">Very challenging</option>
<option value="at the right level">At the right level</option>
<option value="could be more challenging">Could be more challening</option>
<option value="not challenging at all">Not challenging at all</option>
</select>
</div>
</div>
<!-- 1.1.4 question two-->
<div class="form-group">
<div class="px-0">
<label for="formQ2">
Did your child find the game entertaining?
</label>
</div>
<div class="px-0">
<select name="formQ2" class="form-control" id="formQ2">
<option value="">Select</option>
<option value="very entertaining">Very entertaining</option>
<option value="entertaining">Entertaining</option>
<option value="not entertaining">Not entertaining</option>
<option value="boring">Boring</option>
</select>
</div>
</div>
<!-- 1.1.5 question three-->
<div class="form-group">
<div class="px-0">
<label for="interestedInMore">
Would you like to hear about similar games?
</label>
</div>
<div class="px-0">
<select name="interestedInMore" class="form-control" id="interestedInMore">
<option value="">Select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
<!-- 1.1.6 suggestions-->
<div class="form-group">
<label for="otherinfo">
Your suggestions
</label>
<textarea class="form-control" id="otherinfo" rows="3"></textarea>
</div>
<!-- 1.1.7 legal/consent information-->
<div class="from-group">
<div class="form-legal-info">
<small class="form-text">
We'll never share your personal details with anyone
else.</small>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck" required />
<label class="form-check-label" for="gridCheck">
<small class="form-text pl-2">
I consent to Money Pot collecting my details
through this form.</small>
</label>
</div>
</div>
</div>
<!-- 1.3 Contact form: Send button-->
<div class="modal-footer justify-content-center">
<button type="submit" class="btn-round btn-all" data-dismiss="#contactForm" aria-label="Send!">
<i class="fas fa-paper-plane" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Contact form: End-->
<div class="row">
<div class="col">
<small>© 2020 | Neringa Bickmore | All Rights Reserved </small>
</div>
</div>
</footer>
<!-- GAME CARD: POP UP MODAL (inserted with JS)-->
<div class="modal fade" id="modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"
aria-labelledby="modalBody" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header justify-content-center" id="modalHeader">
<!--Modal Header Info comes in from game.js-->
</div>
<div id="modalBody" class="modal-body">
<!--Modal Body Info comes in from game.js-->
</div>
<div class="modal-footer" id="modalFooter">
<!-- Modal Footer Info comes in from game.js-->
</div>
</div>
</div>
</div>
<!-- GAME CARD: POP UP MODAL/END-->
<!-- Audio-->
<audio id="buttonClickAudio" src="assets/audio/button.wav"></audio>
<audio id="coinClickAudio" src="assets/audio/addCoin.ogg"></audio>
<audio id="tryAgainAudio" src="assets/audio/tryAgain.wav"></audio>
<audio id="yippeeAudio" src="assets/audio/yippee.ogg"></audio>
<audio id="nextLevelAudio" src="assets/audio/nextLevel.wav"></audio>
<audio id="winnerAudio" src="assets/audio/winner.mp3"></audio>
<!-- JS scripts-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- My JS path-->
<script src="assets/js/main.js"></script>
</body>
</html>