AptlyDigital commited on
Commit
9fcc717
·
verified ·
1 Parent(s): fd8b6fb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +573 -1
index.html CHANGED
@@ -1 +1,573 @@
1
- 6bf0a5db74af9bcbfe8e1b370af09287fe04640c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Phonics Word Builder - Single Continuous Line</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #6a11cb;
11
+ --secondary: #2575fc;
12
+ --accent: #ff416c;
13
+ --success: #38ef7d;
14
+ --warning: #ffb347;
15
+ --light: #f8f9fa;
16
+ --dark: #212529;
17
+ --border-radius: 20px;
18
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
19
+ --transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
+ }
28
+
29
+ body {
30
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
31
+ color: white;
32
+ min-height: 100vh;
33
+ padding: 20px;
34
+ }
35
+
36
+ .container {
37
+ max-width: 1400px;
38
+ margin: 0 auto;
39
+ }
40
+
41
+ header {
42
+ text-align: center;
43
+ margin-bottom: 30px;
44
+ padding: 25px;
45
+ background: rgba(255, 255, 255, 0.1);
46
+ backdrop-filter: blur(10px);
47
+ border-radius: var(--border-radius);
48
+ box-shadow: var(--shadow);
49
+ border: 1px solid rgba(255, 255, 255, 0.2);
50
+ }
51
+
52
+ .game-container {
53
+ display: grid;
54
+ grid-template-columns: 1fr 350px;
55
+ gap: 30px;
56
+ margin-bottom: 40px;
57
+ }
58
+
59
+ @media (max-width: 1024px) {
60
+ .game-container {
61
+ grid-template-columns: 1fr;
62
+ }
63
+ }
64
+
65
+ .main-game-area {
66
+ background: rgba(255, 255, 255, 0.1);
67
+ backdrop-filter: blur(10px);
68
+ border-radius: var(--border-radius);
69
+ padding: 40px;
70
+ box-shadow: var(--shadow);
71
+ border: 1px solid rgba(255, 255, 255, 0.2);
72
+ }
73
+
74
+ .word-display {
75
+ text-align: center;
76
+ margin-bottom: 50px;
77
+ padding: 30px;
78
+ background: rgba(0, 0, 0, 0.2);
79
+ border-radius: var(--border-radius);
80
+ }
81
+
82
+ .target-word {
83
+ font-size: 4rem;
84
+ font-weight: bold;
85
+ margin-bottom: 20px;
86
+ font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
87
+ text-shadow: 0 5px 15px rgba(0,0,0,0.3);
88
+ line-height: 1.5;
89
+ display: flex;
90
+ justify-content: center;
91
+ align-items: center;
92
+ flex-wrap: wrap;
93
+ gap: 10px;
94
+ }
95
+
96
+ .word-part {
97
+ font-size: 4rem;
98
+ display: inline-block;
99
+ }
100
+
101
+ .continuous-blank {
102
+ display: inline-block;
103
+ min-width: 180px;
104
+ height: 70px;
105
+ margin: 0 10px;
106
+ position: relative;
107
+ vertical-align: middle;
108
+ }
109
+
110
+ .blank-line {
111
+ position: absolute;
112
+ top: 50%;
113
+ left: 0;
114
+ right: 0;
115
+ height: 8px;
116
+ background: linear-gradient(90deg, #ffd166, #ff9a00);
117
+ border-radius: 4px;
118
+ transform: translateY(-50%);
119
+ box-shadow: 0 4px 10px rgba(0,0,0,0.2);
120
+ }
121
+
122
+ .blank-line::after {
123
+ content: '';
124
+ position: absolute;
125
+ top: -5px;
126
+ bottom: -5px;
127
+ left: 0;
128
+ right: 0;
129
+ background: rgba(255, 209, 102, 0.1);
130
+ border-radius: 8px;
131
+ }
132
+
133
+ .pattern-options {
134
+ display: grid;
135
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
136
+ gap: 20px;
137
+ margin-bottom: 40px;
138
+ }
139
+
140
+ .pattern-option {
141
+ background: rgba(255, 255, 255, 0.2);
142
+ padding: 25px;
143
+ border-radius: 15px;
144
+ text-align: center;
145
+ font-size: 2rem;
146
+ font-weight: bold;
147
+ cursor: pointer;
148
+ transition: var(--transition);
149
+ border: 2px solid transparent;
150
+ font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
151
+ }
152
+
153
+ .pattern-option:hover {
154
+ background: rgba(255, 255, 255, 0.3);
155
+ transform: translateY(-5px);
156
+ border-color: rgba(255, 255, 255, 0.5);
157
+ }
158
+
159
+ .pattern-option.selected {
160
+ background: var(--success);
161
+ color: white;
162
+ transform: scale(1.05);
163
+ border-color: white;
164
+ }
165
+
166
+ .pattern-option.wrong {
167
+ background: var(--accent);
168
+ color: white;
169
+ }
170
+
171
+ .game-controls {
172
+ display: flex;
173
+ justify-content: center;
174
+ gap: 20px;
175
+ margin-top: 30px;
176
+ flex-wrap: wrap;
177
+ }
178
+
179
+ .btn {
180
+ padding: 15px 30px;
181
+ border: none;
182
+ border-radius: 50px;
183
+ font-weight: bold;
184
+ font-size: 1.1rem;
185
+ cursor: pointer;
186
+ transition: var(--transition);
187
+ display: flex;
188
+ align-items: center;
189
+ gap: 10px;
190
+ background: white;
191
+ color: var(--dark);
192
+ }
193
+
194
+ .btn-primary {
195
+ background: linear-gradient(90deg, var(--success), #2ecc71);
196
+ color: white;
197
+ }
198
+
199
+ .btn-secondary {
200
+ background: rgba(255, 255, 255, 0.2);
201
+ color: white;
202
+ backdrop-filter: blur(10px);
203
+ }
204
+
205
+ .feedback {
206
+ text-align: center;
207
+ padding: 20px;
208
+ margin: 20px 0;
209
+ border-radius: var(--border-radius);
210
+ font-size: 1.2rem;
211
+ font-weight: bold;
212
+ display: none;
213
+ animation: fadeIn 0.3s ease;
214
+ }
215
+
216
+ @keyframes fadeIn {
217
+ from { opacity: 0; transform: translateY(-10px); }
218
+ to { opacity: 1; transform: translateY(0); }
219
+ }
220
+
221
+ .feedback.correct {
222
+ background: rgba(56, 239, 125, 0.2);
223
+ border: 2px solid var(--success);
224
+ color: var(--success);
225
+ }
226
+
227
+ .feedback.incorrect {
228
+ background: rgba(255, 65, 108, 0.2);
229
+ border: 2px solid var(--accent);
230
+ color: var(--accent);
231
+ }
232
+
233
+ .sidebar {
234
+ background: rgba(255, 255, 255, 0.1);
235
+ backdrop-filter: blur(10px);
236
+ border-radius: var(--border-radius);
237
+ padding: 25px;
238
+ box-shadow: var(--shadow);
239
+ border: 1px solid rgba(255, 255, 255, 0.2);
240
+ display: flex;
241
+ flex-direction: column;
242
+ }
243
+
244
+ .stat-box {
245
+ background: rgba(255, 255, 255, 0.15);
246
+ padding: 20px;
247
+ border-radius: 15px;
248
+ text-align: center;
249
+ margin-bottom: 25px;
250
+ border: 1px solid rgba(255, 255, 255, 0.1);
251
+ }
252
+
253
+ .stat-value {
254
+ font-size: 2.5rem;
255
+ font-weight: bold;
256
+ color: white;
257
+ text-shadow: 0 2px 10px rgba(0,0,0,0.2);
258
+ }
259
+
260
+ .stat-label {
261
+ font-size: 0.9rem;
262
+ opacity: 0.9;
263
+ }
264
+
265
+ .progress-bar {
266
+ height: 10px;
267
+ background: rgba(255, 255, 255, 0.2);
268
+ border-radius: 5px;
269
+ overflow: hidden;
270
+ margin: 15px 0;
271
+ }
272
+
273
+ .progress-fill {
274
+ height: 100%;
275
+ background: linear-gradient(90deg, var(--success), #2ecc71);
276
+ width: 0%;
277
+ transition: width 0.5s ease;
278
+ }
279
+
280
+ .history-container {
281
+ flex: 1;
282
+ display: flex;
283
+ flex-direction: column;
284
+ overflow: hidden;
285
+ }
286
+
287
+ .history-header {
288
+ display: flex;
289
+ justify-content: space-between;
290
+ align-items: center;
291
+ margin-bottom: 15px;
292
+ }
293
+
294
+ .history-list {
295
+ flex: 1;
296
+ overflow-y: auto;
297
+ background: rgba(0, 0, 0, 0.1);
298
+ border-radius: 10px;
299
+ padding: 15px;
300
+ }
301
+
302
+ .history-item {
303
+ display: flex;
304
+ justify-content: space-between;
305
+ align-items: center;
306
+ padding: 12px 15px;
307
+ margin-bottom: 8px;
308
+ background: rgba(255, 255, 255, 0.1);
309
+ border-radius: 8px;
310
+ font-size: 0.9rem;
311
+ border-left: 4px solid transparent;
312
+ }
313
+
314
+ .history-item.correct {
315
+ border-left-color: var(--success);
316
+ }
317
+
318
+ .history-item.incorrect {
319
+ border-left-color: var(--accent);
320
+ }
321
+
322
+ .history-word {
323
+ font-weight: bold;
324
+ max-width: 100px;
325
+ overflow: hidden;
326
+ text-overflow: ellipsis;
327
+ white-space: nowrap;
328
+ }
329
+
330
+ .history-pattern {
331
+ font-family: 'Comic Sans MS', cursive;
332
+ }
333
+
334
+ .history-result {
335
+ display: flex;
336
+ align-items: center;
337
+ gap: 5px;
338
+ }
339
+
340
+ .completed-word {
341
+ font-size: 1.5rem;
342
+ color: var(--success);
343
+ margin-top: 10px;
344
+ font-weight: bold;
345
+ }
346
+
347
+ .timer {
348
+ font-size: 1.5rem;
349
+ color: #ffd166;
350
+ font-weight: bold;
351
+ text-align: center;
352
+ margin-top: 20px;
353
+ }
354
+
355
+ .streak-display {
356
+ background: linear-gradient(45deg, #ff9a00, #ff0080);
357
+ padding: 10px 20px;
358
+ border-radius: 50px;
359
+ display: inline-flex;
360
+ align-items: center;
361
+ gap: 10px;
362
+ font-weight: bold;
363
+ margin: 10px auto;
364
+ }
365
+
366
+ .clear-history-btn {
367
+ padding: 8px 15px;
368
+ background: rgba(255, 65, 108, 0.2);
369
+ border: 1px solid rgba(255, 65, 108, 0.5);
370
+ border-radius: 20px;
371
+ color: white;
372
+ cursor: pointer;
373
+ font-size: 0.8rem;
374
+ transition: var(--transition);
375
+ }
376
+
377
+ .clear-history-btn:hover {
378
+ background: rgba(255, 65, 108, 0.4);
379
+ }
380
+
381
+ .export-btn {
382
+ padding: 8px 15px;
383
+ background: rgba(56, 239, 125, 0.2);
384
+ border: 1px solid rgba(56, 239, 125, 0.5);
385
+ border-radius: 20px;
386
+ color: white;
387
+ cursor: pointer;
388
+ font-size: 0.8rem;
389
+ transition: var(--transition);
390
+ margin-left: 10px;
391
+ }
392
+
393
+ .export-btn:hover {
394
+ background: rgba(56, 239, 125, 0.4);
395
+ }
396
+
397
+ .stats-grid {
398
+ display: grid;
399
+ grid-template-columns: repeat(2, 1fr);
400
+ gap: 15px;
401
+ margin-top: 20px;
402
+ }
403
+
404
+ .mini-stat {
405
+ background: rgba(0, 0, 0, 0.1);
406
+ padding: 15px;
407
+ border-radius: 10px;
408
+ text-align: center;
409
+ }
410
+
411
+ .mini-value {
412
+ font-size: 1.8rem;
413
+ font-weight: bold;
414
+ color: #ffd166;
415
+ }
416
+
417
+ .mini-label {
418
+ font-size: 0.8rem;
419
+ opacity: 0.8;
420
+ }
421
+
422
+ .word-hint {
423
+ font-size: 1.2rem;
424
+ margin-top: 15px;
425
+ opacity: 0.8;
426
+ font-style: italic;
427
+ }
428
+
429
+ .pattern-categories {
430
+ display: flex;
431
+ gap: 10px;
432
+ margin-bottom: 20px;
433
+ flex-wrap: wrap;
434
+ justify-content: center;
435
+ }
436
+
437
+ .category-tag {
438
+ padding: 10px 20px;
439
+ background: rgba(255, 255, 255, 0.15);
440
+ border-radius: 50px;
441
+ cursor: pointer;
442
+ transition: var(--transition);
443
+ font-weight: 500;
444
+ }
445
+
446
+ .category-tag.active {
447
+ background: rgba(255, 255, 255, 0.3);
448
+ font-weight: bold;
449
+ border: 2px solid white;
450
+ }
451
+
452
+ .category-tag:hover {
453
+ background: rgba(255, 255, 255, 0.25);
454
+ }
455
+ </style>
456
+ </head>
457
+ <body>
458
+ <div class="container">
459
+ <header>
460
+ <h1><i class="fas fa-puzzle-piece"></i> Phonics Word Builder</h1>
461
+ <p>Complete the word by selecting the missing phonics pattern</p>
462
+ </header>
463
+
464
+ <div class="pattern-categories" id="patternCategories">
465
+ <!-- Category filters will be added here -->
466
+ </div>
467
+
468
+ <div class="game-container">
469
+ <div class="main-game-area">
470
+ <div class="word-display">
471
+ <div class="target-word" id="wordDisplay">
472
+ <!-- Word parts and continuous blank line will appear here -->
473
+ </div>
474
+ <div class="word-hint" id="wordHint">
475
+ Find the phonics pattern that completes this word
476
+ </div>
477
+ <div class="completed-word" id="completedWord"></div>
478
+ <div class="timer" id="timer">Time: 30s</div>
479
+ </div>
480
+
481
+ <div class="feedback" id="feedback"></div>
482
+
483
+ <div class="pattern-options" id="patternOptions">
484
+ <!-- Pattern options will appear here -->
485
+ </div>
486
+
487
+ <div class="game-controls">
488
+ <button class="btn btn-primary" id="submitBtn">
489
+ <i class="fas fa-check-circle"></i> Submit Answer
490
+ </button>
491
+ <button class="btn btn-secondary" id="nextBtn">
492
+ <i class="fas fa-forward"></i> Next Word
493
+ </button>
494
+ <button class="btn btn-secondary" id="hintBtn">
495
+ <i class="fas fa-lightbulb"></i> Show Hint
496
+ </button>
497
+ <button class="btn btn-secondary" id="resetBtn">
498
+ <i class="fas fa-redo"></i> New Game
499
+ </button>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="sidebar">
504
+ <div class="stat-box">
505
+ <div class="stat-value" id="score">0</div>
506
+ <div class="stat-label">Score</div>
507
+ <div class="progress-bar">
508
+ <div class="progress-fill" id="progressFill"></div>
509
+ </div>
510
+ <div id="progressText">0% Complete</div>
511
+ </div>
512
+
513
+ <div class="stats-grid">
514
+ <div class="mini-stat">
515
+ <div class="mini-value" id="streak">0</div>
516
+ <div class="mini-label">Current Streak</div>
517
+ </div>
518
+ <div class="mini-stat">
519
+ <div class="mini-value" id="correctCount">0</div>
520
+ <div class="mini-label">Correct</div>
521
+ </div>
522
+ <div class="mini-stat">
523
+ <div class="mini-value" id="totalQuestions">0</div>
524
+ <div class="mini-label">Attempted</div>
525
+ </div>
526
+ <div class="mini-stat">
527
+ <div class="mini-value" id="accuracy">0%</div>
528
+ <div class="mini-label">Accuracy</div>
529
+ </div>
530
+ </div>
531
+
532
+ <div class="history-container">
533
+ <div class="history-header">
534
+ <h3><i class="fas fa-history"></i> Attempt History</h3>
535
+ <div>
536
+ <button class="clear-history-btn" id="clearHistoryBtn">Clear</button>
537
+ <button class="export-btn" id="exportBtn">Export</button>
538
+ </div>
539
+ </div>
540
+ <div class="history-list" id="historyList">
541
+ <!-- Word history will appear here -->
542
+ </div>
543
+ <div style="text-align: center; margin-top: 10px; font-size: 0.8rem; opacity: 0.7;">
544
+ <span id="historyCount">0</span> attempts recorded
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+
551
+ <script>
552
+ // Word Bank - Updated with more words for each pattern
553
+ const wordBuilderData = [
554
+ // Consonant Digraphs (15 patterns)
555
+ { pattern: "sh", pronunciation: "shh", category: "Consonant", words: ["ship", "wish", "shell", "fish", "brush", "crash", "flash", "trash", "splash", "shout"] },
556
+ { pattern: "ch", pronunciation: "ch", category: "Consonant", words: ["chat", "chip", "lunch", "bench", "chest", "chop", "chick", "church", "cheer", "chase"] },
557
+ { pattern: "th", pronunciation: "th (soft)", category: "Consonant", words: ["thin", "think", "bath", "math", "path", "thick", "thumb", "thunder", "thirsty", "thirteen"] },
558
+ { pattern: "th", pronunciation: "th (hard)", category: "Consonant", words: ["this", "that", "mother", "father", "brother", "weather", "feather", "leather", "together", "other"] },
559
+ { pattern: "wh", pronunciation: "wh", category: "Consonant", words: ["when", "whale", "whisper", "wheel", "whistle", "white", "what", "where", "why", "which"] },
560
+ { pattern: "ph", pronunciation: "f", category: "Consonant", words: ["phone", "graph", "elephant", "alphabet", "photo", "phrase", "sphere", "dolphin", "orphan", "phantom"] },
561
+ { pattern: "ng", pronunciation: "ng", category: "Consonant", words: ["song", "king", "ring", "long", "strong", "thing", "spring", "string", "wing", "sing"] },
562
+ { pattern: "ck", pronunciation: "k", category: "Consonant", words: ["duck", "clock", "sock", "black", "stick", "chicken", "pocket", "rocket", "truck", "slick"] },
563
+ { pattern: "tch", pronunciation: "ch", category: "Consonant", words: ["catch", "watch", "patch", "match", "hatch", "scratch", "stitch", "ditch", "witch", "kitchen"] },
564
+ { pattern: "dge", pronunciation: "j", category: "Consonant", words: ["bridge", "fudge", "badge", "edge", "judge", "ledge", "dodge", "hedge", "pledge", "ridge"] },
565
+ { pattern: "gh", pronunciation: "f", category: "Consonant", words: ["enough", "laugh", "rough", "tough", "cough", "trough", "laughter", "roughly", "toughen", "coughed"] },
566
+ { pattern: "gn", pronunciation: "n", category: "Consonant", words: ["gnaw", "sign", "gnome", "design", "align", "foreign", "reign", "campaign", "gnat", "gnarl"] },
567
+ { pattern: "kn", pronunciation: "n", category: "Consonant", words: ["knee", "know", "knock", "knife", "knot", "knit", "knight", "knob", "knowledge", "knock"] },
568
+ { pattern: "wr", pronunciation: "r", category: "Consonant", words: ["write", "wrong", "wrap", "wrist", "wreath", "wreck", "wrench", "wrinkle", "wrote", "wrestle"] },
569
+ { pattern: "mb", pronunciation: "m", category: "Consonant", words: ["comb", "thumb", "climb", "lamb", "dumb", "numb", "plumber", "crumb", "tomb", "womb"] },
570
+
571
+ // Vowel Teams (30 patterns)
572
+ { pattern: "ai", pronunciation: "ay", category: "Vowels", words: ["rain", "train", "wait", "mail", "pain", "brain", "chain", "sail", "tail", "frail"] },
573
+ { pattern: "ay", pronunciation: "ay", catego