{"id":161,"date":"2026-04-19T09:22:34","date_gmt":"2026-04-19T09:22:34","guid":{"rendered":"https:\/\/lab.rwb.my.id\/paud\/?page_id=161"},"modified":"2026-04-19T10:24:37","modified_gmt":"2026-04-19T10:24:37","slug":"game-1-word-master-adventure","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/paud\/game-1-word-master-adventure\/","title":{"rendered":"Game 1 – Word Master Adventure"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Word Master Adventure - Petualangan Bahasa<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n position: relative;\n }\n\n header {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n padding: 1rem 2rem;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n z-index: 100;\n position: relative;\n }\n\n .header-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n h1 {\n font-size: 2rem;\n background: linear-gradient(135deg, #667eea, #764ba2);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .stats {\n display: flex;\n gap: 2rem;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .stat-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0.5rem 1rem;\n background: rgba(102, 126, 234, 0.1);\n border-radius: 10px;\n min-width: 100px;\n }\n\n .stat-label {\n font-size: 0.75rem;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #667eea;\n }\n\n .controls {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n }\n\n button {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .btn-primary {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n }\n\n .btn-success {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n }\n\n .btn-warning {\n background: linear-gradient(135deg, #f093fb, #f5576c);\n color: white;\n }\n\n button:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .game-container {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2rem;\n position: relative;\n }\n\n .main-game {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 20px;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n max-width: 800px;\n width: 100%;\n text-align: center;\n min-height: 500px;\n }\n\n .welcome-screen {\n text-align: center;\n padding: 2rem;\n }\n\n .character {\n font-size: 5rem;\n margin-bottom: 1rem;\n animation: bounce 2s ease-in-out infinite;\n }\n\n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n }\n\n .game-modes {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin: 2rem 0;\n }\n\n .mode-card {\n padding: 2rem;\n border-radius: 15px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 3px solid transparent;\n background: white;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n\n .mode-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n }\n\n .mode-card.selected {\n border-color: #667eea;\n background: rgba(102, 126, 234, 0.1);\n }\n\n .mode-icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n }\n\n .mode-title {\n font-size: 1.3rem;\n font-weight: bold;\n color: #333;\n margin-bottom: 0.5rem;\n }\n\n .mode-desc {\n color: #666;\n font-size: 0.9rem;\n }\n\n .categories {\n display: flex;\n justify-content: center;\n gap: 1rem;\n flex-wrap: wrap;\n margin: 2rem 0;\n }\n\n .category-btn {\n padding: 0.75rem 1.5rem;\n border-radius: 20px;\n background: white;\n border: 2px solid #ddd;\n cursor: pointer;\n transition: all 0.3s ease;\n font-weight: 600;\n }\n\n .category-btn:hover {\n border-color: #667eea;\n transform: scale(1.05);\n }\n\n .category-btn.selected {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n border-color: transparent;\n }\n\n .game-area {\n display: none;\n }\n\n .progress-bar {\n width: 100%;\n height: 30px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 15px;\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #11998e, #38ef7d);\n transition: width 0.5s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: bold;\n }\n\n .word-display {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n padding: 3rem;\n border-radius: 15px;\n margin-bottom: 2rem;\n min-height: 200px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n\n .word-main {\n font-size: 3rem;\n font-weight: bold;\n margin-bottom: 1rem;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\n }\n\n .word-hint {\n font-size: 1.2rem;\n opacity: 0.9;\n font-style: italic;\n }\n\n .options-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n margin-bottom: 2rem;\n }\n\n .option-btn {\n padding: 1.5rem;\n font-size: 1.2rem;\n font-weight: bold;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s ease;\n background: white;\n color: #333;\n border: 2px solid #ddd;\n }\n\n .option-btn:hover {\n transform: scale(1.05);\n border-color: #667eea;\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);\n }\n\n .option-btn.correct {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n animation: correctPulse 0.5s ease;\n }\n\n .option-btn.wrong {\n background: linear-gradient(135deg, #f093fb, #f5576c);\n color: white;\n animation: wrongShake 0.5s ease;\n }\n\n @keyframes correctPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n\n @keyframes wrongShake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-10px); }\n 75% { transform: translateX(10px); }\n }\n\n .sentence-builder {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n margin-bottom: 2rem;\n min-height: 150px;\n }\n\n .word-bank {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n justify-content: center;\n margin-bottom: 2rem;\n min-height: 100px;\n padding: 1rem;\n background: rgba(102, 126, 234, 0.1);\n border-radius: 10px;\n }\n\n .word-tile {\n padding: 0.75rem 1.25rem;\n background: white;\n border: 2px solid #667eea;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-weight: 600;\n user-select: none;\n }\n\n .word-tile:hover {\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);\n }\n\n .word-tile.selected {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n }\n\n .sentence-area {\n min-height: 80px;\n padding: 1rem;\n background: rgba(0, 0, 0, 0.05);\n border-radius: 10px;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 0.5rem;\n }\n\n .matching-game {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n margin-bottom: 2rem;\n }\n\n .word-column {\n background: white;\n padding: 1.5rem;\n border-radius: 15px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n\n .column-title {\n font-size: 1.3rem;\n font-weight: bold;\n color: #667eea;\n margin-bottom: 1rem;\n text-align: center;\n }\n\n .match-item {\n padding: 1rem;\n margin-bottom: 0.5rem;\n background: rgba(102, 126, 234, 0.1);\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-weight: 600;\n }\n\n .match-item:hover {\n background: rgba(102, 126, 234, 0.2);\n transform: translateX(5px);\n }\n\n .match-item.selected {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n }\n\n .match-item.matched {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n cursor: default;\n }\n\n .achievement {\n position: fixed;\n top: 20px;\n right: -400px;\n background: white;\n padding: 1.5rem;\n border-radius: 15px;\n box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);\n transition: right 0.5s ease;\n z-index: 1000;\n max-width: 350px;\n }\n\n .achievement.show {\n right: 20px;\n }\n\n .achievement-title {\n font-weight: bold;\n color: #667eea;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .achievement-desc {\n color: #666;\n font-size: 0.9rem;\n }\n\n .streak-indicator {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 3rem;\n font-weight: bold;\n color: #38ef7d;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\n pointer-events: none;\n opacity: 0;\n animation: streakAnimation 1s ease-out;\n z-index: 1000;\n }\n\n @keyframes streakAnimation {\n 0% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.5);\n }\n 50% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.2);\n }\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(1);\n }\n }\n\n .timer {\n font-size: 1.5rem;\n font-weight: bold;\n color: #f5576c;\n margin-bottom: 1rem;\n }\n\n \/* Credit Footer Styles *\/\n .credit-footer {\n position: fixed;\n bottom: 10px;\n right: 15px;\n z-index: 50;\n opacity: 0.8;\n transition: all 0.3s ease;\n }\n\n .credit-footer:hover {\n opacity: 1;\n transform: translateY(-2px);\n }\n\n .credit-link {\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n padding: 0.5rem 1rem;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n text-decoration: none;\n color: #667eea;\n font-size: 0.85rem;\n font-weight: 600;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n }\n\n .credit-link:hover {\n background: rgba(255, 255, 255, 1);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);\n transform: translateY(-2px);\n }\n\n .credit-link:active {\n transform: translateY(0);\n }\n\n \/* --- MOBILE RESPONSIVE --- *\/\n @media (max-width: 768px) {\n header {\n padding: 0.8rem 1rem;\n }\n\n .header-content {\n justify-content: center;\n text-align: center;\n gap: 0.8rem;\n }\n\n h1 {\n font-size: 1.3rem;\n width: 100%;\n justify-content: center;\n }\n\n .stats {\n gap: 0.5rem;\n width: 100%;\n justify-content: center;\n }\n\n .stat-item {\n min-width: 80px;\n padding: 0.4rem 0.8rem;\n }\n\n .stat-label {\n font-size: 0.65rem;\n }\n\n .stat-value {\n font-size: 1.2rem;\n }\n\n .controls {\n width: 100%;\n justify-content: center;\n }\n\n button {\n padding: 0.6rem 1rem;\n font-size: 0.85rem;\n }\n\n .game-container {\n padding: 1rem;\n }\n\n .main-game {\n padding: 1.5rem 1rem;\n min-height: auto;\n border-radius: 15px;\n }\n\n .welcome-screen {\n padding: 1rem 0;\n }\n\n .character {\n font-size: 3.5rem;\n }\n\n .game-modes {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n\n .mode-card {\n padding: 1.2rem;\n }\n\n .mode-icon {\n font-size: 2rem;\n }\n\n .mode-title {\n font-size: 1.1rem;\n }\n\n .mode-desc {\n font-size: 0.8rem;\n }\n\n .categories {\n gap: 0.5rem;\n }\n\n .category-btn {\n padding: 0.6rem 1rem;\n font-size: 0.85rem;\n }\n\n .word-display {\n padding: 1.5rem 1rem;\n min-height: 150px;\n }\n\n .word-main {\n font-size: 2rem;\n }\n\n .word-hint {\n font-size: 1rem;\n }\n\n .options-grid {\n grid-template-columns: 1fr;\n gap: 0.8rem;\n }\n\n .option-btn {\n padding: 1rem;\n font-size: 1rem;\n }\n\n .sentence-builder {\n padding: 1rem;\n margin-bottom: 1rem;\n }\n\n .word-bank {\n gap: 0.5rem;\n padding: 0.8rem;\n min-height: auto;\n }\n\n .word-tile {\n padding: 0.6rem 1rem;\n font-size: 0.9rem;\n }\n\n .sentence-area {\n min-height: 60px;\n padding: 0.8rem;\n }\n\n .matching-game {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n\n .word-column {\n padding: 1rem;\n }\n\n .match-item {\n padding: 0.8rem;\n font-size: 0.95rem;\n }\n\n .timer {\n font-size: 1.2rem;\n }\n\n .achievement {\n max-width: 90%;\n left: 5%;\n right: auto;\n top: -150px;\n }\n\n .achievement.show {\n top: 20px;\n right: auto;\n }\n\n .credit-footer {\n bottom: 5px;\n right: 10px;\n }\n\n .credit-link {\n font-size: 0.7rem;\n padding: 0.3rem 0.7rem;\n }\n\n \/* Override inline style grid pada hasil akhir game *\/\n .main-game div[style*=\"grid-template-columns\"] {\n grid-template-columns: 1fr !important;\n }\n }\n\n \/* --- EXTRA SMALL SCREENS --- *\/\n @media (max-width: 400px) {\n h1 {\n font-size: 1.1rem;\n }\n\n .stat-item {\n min-width: 70px;\n }\n\n .stat-value {\n font-size: 1rem;\n }\n\n button {\n padding: 0.5rem 0.8rem;\n font-size: 0.8rem;\n }\n\n .word-main {\n font-size: 1.8rem;\n }\n\n .mode-title {\n font-size: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"header-content\">\n <h1>\n <span>\ud83d\udcda<\/span>\n Word Master Adventure\n <\/h1>\n <div class=\"stats\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Skor<\/span>\n <span class=\"stat-value\" id=\"score\">0<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Streak<\/span>\n <span class=\"stat-value\" id=\"streak\">0<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Level<\/span>\n <span class=\"stat-value\" id=\"level\">1<\/span>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <button class=\"btn-primary\" onclick=\"showMainMenu()\">Menu<\/button>\n <button class=\"btn-success\" onclick=\"getHint()\">Petunjuk<\/button>\n <button class=\"btn-warning\" onclick=\"resetGame()\">Reset<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"game-container\">\n <div class=\"main-game\" id=\"mainGame\">\n <div class=\"welcome-screen\" id=\"welcomeScreen\">\n <div class=\"character\">\ud83e\uddd9\u200d\u2642\ufe0f<\/div>\n <h2 style=\"color: #667eea; font-size: 2.5rem; margin-bottom: 1rem;\">Word Master Adventure<\/h2>\n <p style=\"color: #666; font-size: 1.2rem; margin-bottom: 2rem;\">Pilih mode permainan untuk memulai petualangan bahasa!<\/p>\n \n <h3 style=\"color: #667eea; margin-bottom: 1rem;\">Mode Permainan:<\/h3>\n <div class=\"game-modes\">\n <div class=\"mode-card\" onclick=\"selectMode('vocabulary')\">\n <div class=\"mode-icon\">\ud83d\udcd6<\/div>\n <div class=\"mode-title\">Vocabulary<\/div>\n <div class=\"mode-desc\">Pelajari kosakata baru dengan tebak kata<\/div>\n <\/div>\n <div class=\"mode-card\" onclick=\"selectMode('sentence')\">\n <div class=\"mode-icon\">\ud83d\udcdd<\/div>\n <div class=\"mode-title\">Sentence Builder<\/div>\n <div class=\"mode-desc\">Susun kata menjadi kalimat yang benar<\/div>\n <\/div>\n <div class=\"mode-card\" onclick=\"selectMode('matching')\">\n <div class=\"mode-icon\">\ud83d\udd17<\/div>\n <div class=\"mode-title\">Word Matching<\/div>\n <div class=\"mode-desc\">Cocokkan kata dengan terjemahannya<\/div>\n <\/div>\n <div class=\"mode-card\" onclick=\"selectMode('listening')\">\n <div class=\"mode-icon\">\ud83c\udfa7<\/div>\n <div class=\"mode-title\">Listening<\/div>\n <div class=\"mode-desc\">Dengarkan dan tulis kata yang benar<\/div>\n <\/div>\n <\/div>\n \n <h3 style=\"color: #667eea; margin: 2rem 0 1rem;\">Pilih Kategori:<\/h3>\n <div class=\"categories\">\n <div class=\"category-btn selected\" onclick=\"selectCategory('animals')\">\ud83e\udd81 Animals<\/div>\n <div class=\"category-btn\" onclick=\"selectCategory('food')\">\ud83c\udf55 Food<\/div>\n <div class=\"category-btn\" onclick=\"selectCategory('family')\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67 Family<\/div>\n <div class=\"category-btn\" onclick=\"selectCategory('colors')\">\ud83c\udfa8 Colors<\/div>\n <div class=\"category-btn\" onclick=\"selectCategory('numbers')\">\ud83d\udd22 Numbers<\/div>\n <div class=\"category-btn\" onclick=\"selectCategory('daily')\">\ud83c\udfe0 Daily Life<\/div>\n <\/div>\n \n <button class=\"btn-primary\" onclick=\"startGame()\" style=\"margin-top: 2rem; font-size: 1.2rem; padding: 1rem 2rem;\">Mulai Bermain<\/button>\n <\/div>\n \n <div class=\"game-area\" id=\"gameArea\">\n <div class=\"timer\" id=\"timer\">\u23f1\ufe0f Waktu: 0s<\/div>\n \n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progressFill\" style=\"width: 0%\">\n <span id=\"progressText\">0\/10<\/span>\n <\/div>\n <\/div>\n \n <div id=\"gameContent\">\n <!-- Game content will be dynamically loaded here -->\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <!-- Credit Footer -->\n <footer class=\"credit-footer\">\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"credit-link\" title=\"Visit Rudi Web Builder\">\n \ud83d\udca1Created\ud83d\udc23Rudi Web Builder\n <\/a>\n <\/footer>\n\n <div class=\"streak-indicator\" id=\"streakIndicator\"><\/div>\n <div class=\"achievement\" id=\"achievement\">\n <div class=\"achievement-title\" id=\"achievementTitle\"><\/div>\n <div class=\"achievement-desc\" id=\"achievementDesc\"><\/div>\n <\/div>\n\n <script>\n \/\/ Word database\n const wordDatabase = {\n animals: [\n { en: 'cat', id: 'kucing', hint: 'Hewan peliharaan yang suka mengeong' },\n { en: 'dog', id: 'anjing', hint: 'Sahabat setia manusia' },\n { en: 'elephant', id: 'gajah', hint: 'Hewan terbesar di darat' },\n { en: 'lion', id: 'singa', hint: 'Raja hutan' },\n { en: 'tiger', id: 'harimau', hint: 'Kucing besar bergaris' },\n { en: 'bird', id: 'burung', hint: 'Hewan yang bisa terbang' },\n { en: 'fish', id: 'ikan', hint: 'Hewan yang hidup di air' },\n { en: 'rabbit', id: 'kelinci', hint: 'Hewan dengan telinga panjang' }\n ],\n food: [\n { en: 'rice', id: 'nasi', hint: 'Makanan pokok orang Indonesia' },\n { en: 'pizza', id: 'pizza', hint: 'Makanan Italia dengan topping' },\n { en: 'burger', id: 'burger', hint: 'Makanan cepat saji dengan daging' },\n { en: 'apple', id: 'apel', hint: 'Buah berwarna merah atau hijau' },\n { en: 'banana', id: 'pisang', hint: 'Buah berwarna kuning melengkung' },\n { en: 'water', id: 'air', hint: 'Minuman yang paling penting' },\n { en: 'bread', id: 'roti', hint: 'Makanan dari tepung' },\n { en: 'milk', id: 'susu', hint: 'Minuman dari sapi' }\n ],\n family: [\n { en: 'father', id: 'ayah', hint: 'Pria tua dalam keluarga' },\n { en: 'mother', id: 'ibu', hint: 'Wanita tua dalam keluarga' },\n { en: 'brother', id: 'saudara laki-laki', hint: 'Laki-laki yang punya orang tua sama' },\n { en: 'sister', id: 'saudara perempuan', hint: 'Perempuan yang punya orang tua sama' },\n { en: 'grandfather', id: 'kakek', hint: 'Ayah dari ayah atau ibu' },\n { en: 'grandmother', id: 'nenek', hint: 'Ibu dari ayah atau ibu' },\n { en: 'son', id: 'anak laki-laki', hint: 'Laki-laki yang menjadi keturunan' },\n { en: 'daughter', id: 'anak perempuan', hint: 'Perempuan yang menjadi keturunan' }\n ],\n colors: [\n { en: 'red', id: 'merah', hint: 'Warna darah' },\n { en: 'blue', id: 'biru', hint: 'Warna langit' },\n { en: 'green', id: 'hijau', hint: 'Warna daun' },\n { en: 'yellow', id: 'kuning', hint: 'Warna matahari' },\n { en: 'black', id: 'hitam', hint: 'Warna malam' },\n { en: 'white', id: 'putih', hint: 'Warna salju' },\n { en: 'orange', id: 'orange', hint: 'Warna jeruk' },\n { en: 'purple', id: 'ungu', hint: 'Warna campuran merah dan biru' }\n ],\n numbers: [\n { en: 'one', id: 'satu', hint: 'Angka pertama' },\n { en: 'two', id: 'dua', hint: 'Angka kedua' },\n { en: 'three', id: 'tiga', hint: 'Angka ketiga' },\n { en: 'four', id: 'empat', hint: 'Angka keempat' },\n { en: 'five', id: 'lima', hint: 'Angka kelima' },\n { en: 'six', id: 'enam', hint: 'Angka keenam' },\n { en: 'seven', id: 'tujuh', hint: 'Angka ketujuh' },\n { en: 'eight', id: 'delapan', hint: 'Angka kedelapan' }\n ],\n daily: [\n { en: 'house', id: 'rumah', hint: 'Tempat tinggal' },\n { en: 'school', id: 'sekolah', hint: 'Tempat belajar' },\n { en: 'book', id: 'buku', hint: 'Bahan bacaan' },\n { en: 'pen', id: 'pulpen', hint: 'Alat tulis' },\n { en: 'phone', id: 'telepon', hint: 'Alat komunikasi' },\n { en: 'car', id: 'mobil', hint: 'Kendaraan roda empat' },\n { en: 'bicycle', id: 'sepeda', hint: 'Kendaraan roda dua' },\n { en: 'computer', id: 'komputer', hint: 'Alat elektronik untuk kerja' }\n ]\n };\n\n \/\/ Sentence database\n const sentenceDatabase = [\n { \n words: ['I', 'love', 'you'], \n correct: ['I', 'love', 'you'],\n translation: 'Saya mencintaimu'\n },\n { \n words: ['The', 'cat', 'sleeps'], \n correct: ['The', 'cat', 'sleeps'],\n translation: 'Kucing itu tidur'\n },\n { \n words: ['She', 'reads', 'a', 'book'], \n correct: ['She', 'reads', 'a', 'book'],\n translation: 'Dia membaca buku'\n },\n { \n words: ['We', 'go', 'to', 'school'], \n correct: ['We', 'go', 'to', 'school'],\n translation: 'Kami pergi ke sekolah'\n },\n { \n words: ['He', 'plays', 'football'], \n correct: ['He', 'plays', 'football'],\n translation: 'Dia bermain sepak bola'\n }\n ];\n\n \/\/ Game state\n let gameState = {\n score: 0,\n streak: 0,\n level: 1,\n currentMode: null,\n currentCategory: 'animals',\n currentQuestion: null,\n questionsAnswered: 0,\n totalQuestions: 10,\n startTime: null,\n timerInterval: null,\n hintsUsed: 0,\n correctAnswers: 0,\n usedWords: [],\n selectedMatchLeft: null,\n selectedMatchRight: null,\n sentenceWords: []\n };\n\n \/\/ Audio context\n let audioContext;\n\n \/\/ Initialize audio\n function initAudio() {\n if (!audioContext) {\n audioContext = new (window.AudioContext || window.webkitAudioContext)();\n }\n }\n\n \/\/ Play sound\n function playSound(type) {\n if (!audioContext) return;\n\n const oscillator = audioContext.createOscillator();\n const gainNode = audioContext.createGain();\n \n oscillator.connect(gainNode);\n gainNode.connect(audioContext.destination);\n \n switch(type) {\n case 'correct':\n oscillator.frequency.value = 800;\n oscillator.type = 'sine';\n gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);\n break;\n case 'wrong':\n oscillator.frequency.value = 300;\n oscillator.type = 'sawtooth';\n gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);\n break;\n case 'click':\n oscillator.frequency.value = 600;\n oscillator.type = 'sine';\n gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);\n break;\n case 'achievement':\n oscillator.frequency.value = 1000;\n oscillator.type = 'sine';\n gainNode.gain.setValueAtTime(0.4, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);\n break;\n }\n \n oscillator.start(audioContext.currentTime);\n oscillator.stop(audioContext.currentTime + 0.5);\n }\n\n \/\/ Select game mode\n function selectMode(mode) {\n gameState.currentMode = mode;\n \n \/\/ Update UI\n document.querySelectorAll('.mode-card').forEach(card => {\n card.classList.remove('selected');\n });\n event.target.closest('.mode-card').classList.add('selected');\n \n playSound('click');\n }\n\n \/\/ Select category\n function selectCategory(category) {\n gameState.currentCategory = category;\n \n \/\/ Update UI\n document.querySelectorAll('.category-btn').forEach(btn => {\n btn.classList.remove('selected');\n });\n event.target.classList.add('selected');\n \n playSound('click');\n }\n\n \/\/ Start game\n function startGame() {\n if (!gameState.currentMode) {\n showNotification('Pilih mode permainan terlebih dahulu!', 'warning');\n return;\n }\n \n \/\/ Reset game state\n gameState.score = 0;\n gameState.streak = 0;\n gameState.questionsAnswered = 0;\n gameState.correctAnswers = 0;\n gameState.hintsUsed = 0;\n gameState.startTime = Date.now();\n gameState.usedWords = [];\n \n \/\/ Update UI\n document.getElementById('welcomeScreen').style.display = 'none';\n document.getElementById('gameArea').style.display = 'block';\n \n \/\/ Start timer\n startTimer();\n \n \/\/ Generate first question based on mode\n generateQuestion();\n \n \/\/ Update display\n updateDisplay();\n }\n\n \/\/ Generate question based on game mode\n function generateQuestion() {\n const gameContent = document.getElementById('gameContent');\n \n switch(gameState.currentMode) {\n case 'vocabulary':\n generateVocabularyQuestion();\n break;\n case 'sentence':\n generateSentenceQuestion();\n break;\n case 'matching':\n generateMatchingQuestion();\n break;\n case 'listening':\n generateListeningQuestion();\n break;\n }\n }\n\n \/\/ Generate vocabulary question\n function generateVocabularyQuestion() {\n const words = wordDatabase[gameState.currentCategory];\n const availableWords = words.filter(word => !gameState.usedWords.includes(word.en));\n \n if (availableWords.length === 0) {\n gameState.usedWords = [];\n generateVocabularyQuestion();\n return;\n }\n \n const randomWord = availableWords[Math.floor(Math.random() * availableWords.length)];\n gameState.usedWords.push(randomWord.en);\n gameState.currentQuestion = randomWord;\n \n \/\/ Generate options\n const options = [randomWord.id];\n const allTranslations = words.map(w => w.id);\n \n while (options.length < 4) {\n const randomTranslation = allTranslations[Math.floor(Math.random() * allTranslations.length)];\n if (!options.includes(randomTranslation)) {\n options.push(randomTranslation);\n }\n }\n \n \/\/ Shuffle options\n options.sort(() => Math.random() - 0.5);\n \n \/\/ Create HTML\n const gameContent = document.getElementById('gameContent');\n gameContent.innerHTML = `\n <div class=\"word-display\">\n <div class=\"word-main\">${randomWord.en}<\/div>\n <div class=\"word-hint\">Apa terjemahan dari kata ini?<\/div>\n <\/div>\n <div class=\"options-grid\">\n ${options.map(option => `\n <button class=\"option-btn\" onclick=\"checkVocabularyAnswer('${option}', this)\">${option}<\/button>\n `).join('')}\n <\/div>\n `;\n }\n\n \/\/ Generate sentence question\n function generateSentenceQuestion() {\n const sentence = sentenceDatabase[Math.floor(Math.random() * sentenceDatabase.length)];\n gameState.currentQuestion = sentence;\n \n \/\/ Shuffle words\n const shuffledWords = [...sentence.words].sort(() => Math.random() - 0.5);\n gameState.sentenceWords = [];\n \n const gameContent = document.getElementById('gameContent');\n gameContent.innerHTML = `\n <div class=\"sentence-builder\">\n <div class=\"word-hint\" style=\"text-align: center; margin-bottom: 1rem;\">\n Susun kata-kata di bawah menjadi kalimat yang benar!\n <\/div>\n <div class=\"sentence-area\" id=\"sentenceArea\">\n <p style=\"color: #999;\">Klik kata di bawah untuk menyusun kalimat...<\/p>\n <\/div>\n <button class=\"btn-success\" onclick=\"checkSentenceAnswer()\" style=\"margin-top: 1rem;\">Periksa Jawaban<\/button>\n <\/div>\n <div class=\"word-bank\" id=\"wordBank\">\n ${shuffledWords.map((word, index) => `\n <div class=\"word-tile\" onclick=\"addWordToSentence('${word}', ${index})\">${word}<\/div>\n `).join('')}\n <\/div>\n `;\n }\n\n \/\/ Generate matching question\n function generateMatchingQuestion() {\n const words = wordDatabase[gameState.currentCategory];\n const selectedWords = [];\n \n \/\/ Select 5 random words\n while (selectedWords.length < 5) {\n const randomWord = words[Math.floor(Math.random() * words.length)];\n if (!selectedWords.find(w => w.en === randomWord.en)) {\n selectedWords.push(randomWord);\n }\n }\n \n gameState.currentQuestion = selectedWords;\n gameState.selectedMatchLeft = null;\n gameState.selectedMatchRight = null;\n \n \/\/ Shuffle right column\n const shuffledTranslations = [...selectedWords].sort(() => Math.random() - 0.5);\n \n const gameContent = document.getElementById('gameContent');\n gameContent.innerHTML = `\n <div class=\"matching-game\">\n <div class=\"word-column\">\n <div class=\"column-title\">English<\/div>\n ${selectedWords.map((word, index) => `\n <div class=\"match-item\" onclick=\"selectMatchLeft('${word.en}', ${index})\">${word.en}<\/div>\n `).join('')}\n <\/div>\n <div class=\"word-column\">\n <div class=\"column-title\">Indonesia<\/div>\n ${shuffledTranslations.map((word, index) => `\n <div class=\"match-item\" onclick=\"selectMatchRight('${word.id}', ${index})\">${word.id}<\/div>\n `).join('')}\n <\/div>\n <\/div>\n <button class=\"btn-success\" onclick=\"checkMatchingAnswer()\" style=\"margin-top: 1rem;\">Periksa Jawaban<\/button>\n `;\n }\n\n \/\/ Generate listening question\n function generateListeningQuestion() {\n const words = wordDatabase[gameState.currentCategory];\n const randomWord = words[Math.floor(Math.random() * words.length)];\n gameState.currentQuestion = randomWord;\n \n const gameContent = document.getElementById('gameContent');\n gameContent.innerHTML = `\n <div class=\"word-display\">\n <div class=\"word-main\">\ud83c\udfa7<\/div>\n <div class=\"word-hint\">Dengarkan dan ketik kata yang benar!<\/div>\n <button class=\"btn-primary\" onclick=\"speakWord('${randomWord.en}')\" style=\"margin-top: 1rem;\">\n \ud83d\udd0a Putar Ulang\n <\/button>\n <\/div>\n <div style=\"margin-bottom: 2rem;\">\n <input type=\"text\" id=\"listeningAnswer\" placeholder=\"Ketik jawaban Anda...\" \n style=\"padding: 1rem; font-size: 1.2rem; border: 2px solid #ddd; border-radius: 10px; width: 100%; max-width: 400px;\">\n <\/div>\n <button class=\"btn-success\" onclick=\"checkListeningAnswer()\">Periksa Jawaban<\/button>\n `;\n \n \/\/ Auto-play the word\n setTimeout(() => speakWord(randomWord.en), 500);\n }\n\n \/\/ Speak word using text-to-speech\n function speakWord(word) {\n if ('speechSynthesis' in window) {\n const utterance = new SpeechSynthesisUtterance(word);\n utterance.lang = 'en-US';\n utterance.rate = 0.8;\n speechSynthesis.speak(utterance);\n }\n }\n\n \/\/ Check vocabulary answer\n function checkVocabularyAnswer(answer, buttonElement) {\n \/\/ Disable all buttons\n document.querySelectorAll('.option-btn').forEach(btn => {\n btn.disabled = true;\n });\n \n if (answer === gameState.currentQuestion.id) {\n \/\/ Correct answer\n buttonElement.classList.add('correct');\n playSound('correct');\n gameState.correctAnswers++;\n gameState.streak++;\n gameState.score += 10;\n \n \/\/ Show streak indicator\n if (gameState.streak >= 5) {\n showStreakIndicator(gameState.streak);\n }\n \n \/\/ Check achievements\n checkAchievements();\n \n } else {\n \/\/ Wrong answer\n buttonElement.classList.add('wrong');\n playSound('wrong');\n gameState.streak = 0;\n \n \/\/ Show correct answer\n document.querySelectorAll('.option-btn').forEach(btn => {\n if (btn.textContent === gameState.currentQuestion.id) {\n btn.classList.add('correct');\n }\n });\n }\n \n \/\/ Update display\n updateDisplay();\n \n \/\/ Next question after delay\n setTimeout(() => {\n gameState.questionsAnswered++;\n \n if (gameState.questionsAnswered >= gameState.totalQuestions) {\n endGame();\n } else {\n generateQuestion();\n }\n \n \/\/ Update progress\n const progress = (gameState.questionsAnswered \/ gameState.totalQuestions) * 100;\n document.getElementById('progressFill').style.width = progress + '%';\n document.getElementById('progressText').textContent = `${gameState.questionsAnswered}\/${gameState.totalQuestions}`;\n }, 1500);\n }\n\n \/\/ Add word to sentence\n function addWordToSentence(word, index) {\n gameState.sentenceWords.push(word);\n \n const sentenceArea = document.getElementById('sentenceArea');\n sentenceArea.innerHTML = gameState.sentenceWords.map((w, i) => \n `<span class=\"word-tile selected\">${w}<\/span>`\n ).join(' ');\n \n \/\/ Remove word from bank\n event.target.style.display = 'none';\n \n playSound('click');\n }\n\n \/\/ Check sentence answer\n function checkSentenceAnswer() {\n const correct = gameState.sentenceWords.join(' ') === gameState.currentQuestion.correct.join(' ');\n \n if (correct) {\n playSound('correct');\n gameState.correctAnswers++;\n gameState.streak++;\n gameState.score += 15;\n \n showStreakIndicator(gameState.streak);\n checkAchievements();\n \n showNotification('Benar! \ud83c\udf89', 'success');\n } else {\n playSound('wrong');\n gameState.streak = 0;\n \n showNotification('Coba lagi! Jawaban yang benar: ' + gameState.currentQuestion.correct.join(' '), 'warning');\n }\n \n updateDisplay();\n \n setTimeout(() => {\n gameState.questionsAnswered++;\n \n if (gameState.questionsAnswered >= gameState.totalQuestions) {\n endGame();\n } else {\n generateQuestion();\n }\n \n \/\/ Update progress\n const progress = (gameState.questionsAnswered \/ gameState.totalQuestions) * 100;\n document.getElementById('progressFill').style.width = progress + '%';\n document.getElementById('progressText').textContent = `${gameState.questionsAnswered}\/${gameState.totalQuestions}`;\n }, 2000);\n }\n\n \/\/ Select match left\n function selectMatchLeft(word, index) {\n gameState.selectedMatchLeft = { word, index };\n \n \/\/ Update UI\n document.querySelectorAll('.word-column:first-child .match-item').forEach((item, i) => {\n item.classList.toggle('selected', i === index);\n });\n \n playSound('click');\n \n \/\/ Check if both selected\n if (gameState.selectedMatchRight) {\n checkMatch();\n }\n }\n\n \/\/ Select match right\n function selectMatchRight(word, index) {\n gameState.selectedMatchRight = { word, index };\n \n \/\/ Update UI\n document.querySelectorAll('.word-column:last-child .match-item').forEach((item, i) => {\n item.classList.toggle('selected', i === index);\n });\n \n playSound('click');\n \n \/\/ Check if both selected\n if (gameState.selectedMatchLeft) {\n checkMatch();\n }\n }\n\n \/\/ Check match\n function checkMatch() {\n const leftWord = gameState.currentQuestion.find(w => w.en === gameState.selectedMatchLeft.word);\n const isCorrect = leftWord && leftWord.id === gameState.selectedMatchRight.word;\n \n if (isCorrect) {\n \/\/ Mark as matched\n const leftItems = document.querySelectorAll('.word-column:first-child .match-item');\n const rightItems = document.querySelectorAll('.word-column:last-child .match-item');\n \n leftItems[gameState.selectedMatchLeft.index].classList.add('matched');\n rightItems[gameState.selectedMatchRight.index].classList.add('matched');\n \n playSound('correct');\n gameState.score += 12;\n } else {\n playSound('wrong');\n \n \/\/ Remove selection\n document.querySelectorAll('.match-item').forEach(item => {\n item.classList.remove('selected');\n });\n }\n \n gameState.selectedMatchLeft = null;\n gameState.selectedMatchRight = null;\n \n updateDisplay();\n }\n\n \/\/ Check matching answer\n function checkMatchingAnswer() {\n const matchedItems = document.querySelectorAll('.match-item.matched');\n const allCorrect = matchedItems.length === gameState.currentQuestion.length;\n \n if (allCorrect) {\n playSound('correct');\n gameState.correctAnswers++;\n gameState.streak++;\n gameState.score += 20;\n \n showStreakIndicator(gameState.streak);\n checkAchievements();\n \n showNotification('Semua benar! \ud83c\udf89', 'success');\n } else {\n playSound('wrong');\n gameState.streak = 0;\n \n showNotification(`Benar: ${matchedItems.length}\/${gameState.currentQuestion.length}`, 'warning');\n }\n \n updateDisplay();\n \n setTimeout(() => {\n gameState.questionsAnswered++;\n \n if (gameState.questionsAnswered >= gameState.totalQuestions) {\n endGame();\n } else {\n generateQuestion();\n }\n \n \/\/ Update progress\n const progress = (gameState.questionsAnswered \/ gameState.totalQuestions) * 100;\n document.getElementById('progressFill').style.width = progress + '%';\n document.getElementById('progressText').textContent = `${gameState.questionsAnswered}\/${gameState.totalQuestions}`;\n }, 2000);\n }\n\n \/\/ Check listening answer\n function checkListeningAnswer() {\n const userAnswer = document.getElementById('listeningAnswer').value.toLowerCase().trim();\n const correctAnswer = gameState.currentQuestion.en.toLowerCase();\n \n if (userAnswer === correctAnswer) {\n playSound('correct');\n gameState.correctAnswers++;\n gameState.streak++;\n gameState.score += 15;\n \n showStreakIndicator(gameState.streak);\n checkAchievements();\n \n showNotification('Benar! \ud83c\udf89', 'success');\n } else {\n playSound('wrong');\n gameState.streak = 0;\n \n showNotification(`Salah! Jawaban yang benar: ${gameState.currentQuestion.en}`, 'warning');\n }\n \n updateDisplay();\n \n setTimeout(() => {\n gameState.questionsAnswered++;\n \n if (gameState.questionsAnswered >= gameState.totalQuestions) {\n endGame();\n } else {\n generateQuestion();\n }\n \n \/\/ Update progress\n const progress = (gameState.questionsAnswered \/ gameState.totalQuestions) * 100;\n document.getElementById('progressFill').style.width = progress + '%';\n document.getElementById('progressText').textContent = `${gameState.questionsAnswered}\/${gameState.totalQuestions}`;\n }, 2000);\n }\n\n \/\/ Get hint\n function getHint() {\n if (!gameState.currentQuestion) return;\n \n gameState.hintsUsed++;\n gameState.score = Math.max(0, gameState.score - 5);\n \n if (gameState.currentMode === 'vocabulary') {\n const hintDiv = document.querySelector('.word-hint');\n if (hintDiv) {\n hintDiv.textContent = `\ud83d\udca1 ${gameState.currentQuestion.hint}`;\n }\n }\n \n updateDisplay();\n }\n\n \/\/ Start timer\n function startTimer() {\n gameState.timerInterval = setInterval(() => {\n const elapsed = Math.floor((Date.now() - gameState.startTime) \/ 1000);\n document.getElementById('timer').textContent = `\u23f1\ufe0f Waktu: ${elapsed}s`;\n }, 1000);\n }\n\n \/\/ End game\n function endGame() {\n clearInterval(gameState.timerInterval);\n \n const accuracy = Math.round((gameState.correctAnswers \/ gameState.totalQuestions) * 100);\n const timeTaken = Math.floor((Date.now() - gameState.startTime) \/ 1000);\n \n \/\/ Calculate final score\n const timeBonus = Math.max(0, 100 - timeTaken);\n const accuracyBonus = accuracy * 2;\n const finalScore = gameState.score + timeBonus + accuracyBonus;\n \n \/\/ Show results\n showGameResults(finalScore, accuracy, timeTaken);\n }\n\n \/\/ Show game results\n function showGameResults(score, accuracy, time) {\n const mainGame = document.getElementById('mainGame');\n \n mainGame.innerHTML = `\n <div style=\"text-align: center; padding: 2rem;\">\n <h2 style=\"color: #667eea; font-size: 2.5rem; margin-bottom: 2rem;\">\ud83c\udf89 Game Selesai!<\/h2>\n \n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem;\">\n <div style=\"background: rgba(102, 126, 234, 0.1); padding: 1rem; border-radius: 10px;\">\n <div style=\"font-size: 2rem; font-weight: bold; color: #667eea;\">${score}<\/div>\n <div style=\"color: #666;\">Skor Akhir<\/div>\n <\/div>\n <div style=\"background: rgba(56, 239, 125, 0.1); padding: 1rem; border-radius: 10px;\">\n <div style=\"font-size: 2rem; font-weight: bold; color: #38ef7d;\">${accuracy}%<\/div>\n <div style=\"color: #666;\">Akurasi<\/div>\n <\/div>\n <div style=\"background: rgba(245, 87, 108, 0.1); padding: 1rem; border-radius: 10px;\">\n <div style=\"font-size: 2rem; font-weight: bold; color: #f5576c;\">${time}s<\/div>\n <div style=\"color: #666;\">Waktu<\/div>\n <\/div>\n <\/div>\n \n <div style=\"margin-bottom: 2rem;\">\n <h3 style=\"color: #667eea; margin-bottom: 1rem;\">Pencapaian:<\/h3>\n ${gameState.streak >= 10 ? '<div style=\"background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 0.5rem 1rem; border-radius: 20px; display: inline-block; margin: 0.5rem;\">\ud83d\udd25 Streak Master<\/div>' : ''}\n ${accuracy === 100 ? '<div style=\"background: linear-gradient(135deg, #11998e, #38ef7d); color: white; padding: 0.5rem 1rem; border-radius: 20px; display: inline-block; margin: 0.5rem;\">\u2b50 Sempurna<\/div>' : ''}\n ${time < 60 ? '<div style=\"background: linear-gradient(135deg, #f093fb, #f5576c); color: white; padding: 0.5rem 1rem; border-radius: 20px; display: inline-block; margin: 0.5rem;\">\u26a1 Cepat<\/div>' : ''}\n <\/div>\n \n <button class=\"btn-primary\" onclick=\"location.reload()\">Main Lagi<\/button>\n <\/div>\n `;\n }\n\n \/\/ Show streak indicator\n function showStreakIndicator(streak) {\n const indicator = document.getElementById('streakIndicator');\n indicator.textContent = `${streak} Streak! \ud83d\udd25`;\n indicator.style.opacity = '1';\n indicator.style.animation = 'none';\n \n setTimeout(() => {\n indicator.style.animation = 'streakAnimation 1s ease-out';\n }, 10);\n }\n\n \/\/ Check achievements\n function checkAchievements() {\n if (gameState.streak === 5) {\n showAchievement('\ud83d\udd25 5 Streak!', '5 jawaban benar berturut-turut!');\n } else if (gameState.streak === 10) {\n showAchievement('\ud83d\udd25\ud83d\udd25 10 Streak!', 'Luar biasa! 10 jawaban benar berturut-turut!');\n } else if (gameState.correctAnswers === 10) {\n showAchievement('\u2b50 Perfect!', 'Semua jawaban benar!');\n }\n }\n\n \/\/ Show achievement\n function showAchievement(title, description) {\n const achievement = document.getElementById('achievement');\n document.getElementById('achievementTitle').innerHTML = title;\n document.getElementById('achievementDesc').textContent = description;\n \n achievement.classList.add('show');\n playSound('achievement');\n \n setTimeout(() => {\n achievement.classList.remove('show');\n }, 3000);\n }\n\n \/\/ Update display\n function updateDisplay() {\n document.getElementById('score').textContent = gameState.score;\n document.getElementById('streak').textContent = gameState.streak;\n document.getElementById('level').textContent = gameState.level;\n }\n\n \/\/ Show main menu\n function showMainMenu() {\n document.getElementById('welcomeScreen').style.display = 'block';\n document.getElementById('gameArea').style.display = 'none';\n clearInterval(gameState.timerInterval);\n }\n\n \/\/ Reset game\n function resetGame() {\n clearInterval(gameState.timerInterval);\n location.reload();\n }\n\n \/\/ Show notification\n function showNotification(message, type) {\n const notification = document.createElement('div');\n notification.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: ${type === 'warning' ? 'linear-gradient(135deg, #f093fb, #f5576c)' : 'linear-gradient(135deg, #11998e, #38ef7d)'};\n color: white;\n padding: 1.5rem 2rem;\n border-radius: 15px;\n font-size: 1.2rem;\n font-weight: bold;\n z-index: 2000;\n animation: slideIn 0.3s ease-out;\n `;\n notification.textContent = message;\n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.remove();\n }, 2000);\n }\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Enable audio on first interaction\n document.addEventListener('click', function initAudioOnFirstClick() {\n initAudio();\n document.removeEventListener('click', initAudioOnFirstClick);\n }, { once: true });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Word Master Adventure – Petualangan Bahasa \ud83d\udcda Word Master Adventure Skor 0 Streak 0 Level 1 Menu Petunjuk Reset \ud83e\uddd9\u200d\u2642\ufe0f Word Master Adventure Pilih mode permainan untuk memulai petualangan bahasa! Mode Permainan: \ud83d\udcd6 Vocabulary Pelajari kosakata baru dengan tebak kata \ud83d\udcdd Sentence Builder Susun kata menjadi kalimat yang benar \ud83d\udd17 Word Matching Cocokkan kata dengan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-161","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":10,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/161\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/161\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/media?parent=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}