{"id":169,"date":"2026-04-19T09:30:29","date_gmt":"2026-04-19T09:30:29","guid":{"rendered":"https:\/\/lab.rwb.my.id\/paud\/?page_id=169"},"modified":"2026-04-19T10:42:06","modified_gmt":"2026-04-19T10:42:06","slug":"game-2-fun-learning","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/paud\/game-2-fun-learning\/","title":{"rendered":"Game 2 – Fun Learning"},"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 Fun Learning - Belajar Seru untuk Anak<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;\n background: linear-gradient(135deg, #FFB6C1 0%, #87CEEB 50%, #98FB98 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.9);\n backdrop-filter: blur(10px);\n padding: 1rem;\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, #FF69B4, #87CEEB);\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 font-weight: bold;\n }\n\n .stats {\n display: flex;\n gap: 1.5rem;\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(255, 182, 193, 0.3);\n border-radius: 15px;\n min-width: 80px;\n }\n\n .stat-label {\n font-size: 0.9rem;\n color: #333;\n font-weight: bold;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #FF69B4;\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: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;\n }\n\n .btn-primary {\n background: linear-gradient(135deg, #FF69B4, #FFB6C1);\n color: white;\n }\n\n .btn-success {\n background: linear-gradient(135deg, #98FB98, #90EE90);\n color: white;\n }\n\n .btn-warning {\n background: linear-gradient(135deg, #FFD700, #FFA500);\n color: white;\n }\n\n button:hover {\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n button:active {\n transform: translateY(-1px) scale(1.02);\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: 30px;\n padding: 2rem;\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);\n max-width: 900px;\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: 6rem;\n margin-bottom: 1rem;\n animation: bounce 2s ease-in-out infinite;\n }\n\n @keyframes bounce {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 25% { transform: translateY(-20px) rotate(-5deg); }\n 75% { transform: translateY(-20px) rotate(5deg); }\n }\n\n .game-modes {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n margin: 2rem 0;\n }\n\n .mode-card {\n padding: 2rem;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 4px solid transparent;\n background: white;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\n }\n\n .mode-card:hover {\n transform: translateY(-8px) scale(1.05);\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);\n }\n\n .mode-card.selected {\n border-color: #FF69B4;\n background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(135, 206, 235, 0.3));\n }\n\n .mode-icon {\n font-size: 4rem;\n margin-bottom: 1rem;\n }\n\n .mode-title {\n font-size: 1.5rem;\n font-weight: bold;\n color: #333;\n margin-bottom: 0.5rem;\n }\n\n .mode-desc {\n color: #666;\n font-size: 1rem;\n }\n\n .game-area {\n display: none;\n }\n\n .progress-bar {\n width: 100%;\n height: 40px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 20px;\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #98FB98, #90EE90);\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 font-size: 1.2rem;\n }\n\n .question-area {\n background: linear-gradient(135deg, #FFB6C1, #87CEEB);\n color: white;\n padding: 3rem;\n border-radius: 20px;\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 .question {\n font-size: 4rem;\n font-weight: bold;\n margin-bottom: 1rem;\n text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);\n }\n\n .hint {\n font-size: 1.3rem;\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: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .option-btn {\n padding: 2rem;\n font-size: 1.5rem;\n font-weight: bold;\n border: none;\n border-radius: 15px;\n cursor: pointer;\n transition: all 0.3s ease;\n background: white;\n color: #333;\n border: 3px solid #FFB6C1;\n font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;\n }\n\n .option-btn:hover {\n transform: scale(1.08);\n border-color: #FF69B4;\n box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3);\n }\n\n .option-btn.correct {\n background: linear-gradient(135deg, #98FB98, #90EE90);\n color: white;\n animation: correctPulse 0.6s ease;\n }\n\n .option-btn.wrong {\n background: linear-gradient(135deg, #FFB6C1, #FF69B4);\n color: white;\n animation: wrongShake 0.6s ease;\n }\n\n @keyframes correctPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n }\n\n @keyframes wrongShake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-15px); }\n 75% { transform: translateX(15px); }\n }\n\n .color-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .color-card {\n width: 120px;\n height: 120px;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 4px solid white;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2rem;\n font-weight: bold;\n color: white;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n }\n\n .color-card:hover {\n transform: scale(1.1) rotate(5deg);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\n }\n\n .color-card.selected {\n transform: scale(1.15);\n border-color: #FFD700;\n box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\n }\n\n .shape-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n margin-bottom: 2rem;\n }\n\n .shape-card {\n width: 120px;\n height: 120px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 4rem;\n }\n\n .shape-card:hover {\n transform: scale(1.2) rotate(10deg);\n }\n\n .shape-card.selected {\n transform: scale(1.3);\n filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));\n }\n\n .number-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .number-card {\n width: 120px;\n height: 120px;\n background: linear-gradient(135deg, #87CEEB, #98FB98);\n border-radius: 15px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 3rem;\n font-weight: bold;\n color: white;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\n border: 3px solid white;\n }\n\n .number-card:hover {\n transform: scale(1.15);\n background: linear-gradient(135deg, #FFB6C1, #FF69B4);\n }\n\n .number-card.selected {\n transform: scale(1.2);\n background: linear-gradient(135deg, #FFD700, #FFA500);\n border-color: #FFD700;\n }\n\n .animal-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .animal-card {\n background: white;\n border-radius: 20px;\n padding: 1.5rem;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 3px solid #87CEEB;\n text-align: center;\n }\n\n .animal-card:hover {\n transform: scale(1.08);\n border-color: #FF69B4;\n box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3);\n }\n\n .animal-card.selected {\n background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(135, 206, 235, 0.3));\n border-color: #FFD700;\n }\n\n .animal-emoji {\n font-size: 3rem;\n margin-bottom: 0.5rem;\n }\n\n .animal-name {\n font-size: 1.2rem;\n font-weight: bold;\n color: #333;\n }\n\n .streak-indicator {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 4rem;\n font-weight: bold;\n color: #FFD700;\n text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);\n pointer-events: none;\n opacity: 0;\n animation: streakAnimation 1.5s 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.3);\n }\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(1);\n }\n }\n\n .achievement {\n position: fixed;\n top: 20px;\n right: -400px;\n background: white;\n padding: 2rem;\n border-radius: 20px;\n box-shadow: 0 10px 30px 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: #FF69B4;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 1.3rem;\n }\n\n .achievement-desc {\n color: #666;\n font-size: 1rem;\n }\n\n .timer {\n font-size: 1.8rem;\n font-weight: bold;\n color: #FF69B4;\n margin-bottom: 1rem;\n }\n\n .stars {\n font-size: 2rem;\n margin: 1rem 0;\n }\n\n .star {\n color: #FFD700;\n display: inline-block;\n animation: starPulse 1s ease-in-out infinite;\n }\n\n .star:nth-child(2) {\n animation-delay: 0.3s;\n }\n\n .star:nth-child(3) {\n animation-delay: 0.6s;\n }\n\n @keyframes starPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\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: #FF69B4;\n font-size: 0.85rem;\n font-weight: bold;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;\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: 70px;\n padding: 0.4rem 0.6rem;\n }\n\n .stat-label {\n font-size: 0.75rem;\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: 20px;\n }\n\n .welcome-screen {\n padding: 1rem 0;\n }\n\n .character {\n font-size: 4rem;\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: 2.5rem;\n }\n\n .mode-title {\n font-size: 1.2rem;\n }\n\n .mode-desc {\n font-size: 0.9rem;\n }\n\n .progress-bar {\n height: 30px;\n margin-bottom: 1rem;\n }\n\n .progress-fill {\n font-size: 1rem;\n }\n\n .question-area {\n padding: 1.5rem 1rem;\n min-height: 150px;\n }\n\n .question {\n font-size: 3rem;\n }\n\n .hint {\n font-size: 1rem;\n }\n\n .timer {\n font-size: 1.2rem;\n }\n\n .options-grid {\n grid-template-columns: 1fr;\n gap: 0.8rem;\n }\n\n .option-btn {\n padding: 1.2rem;\n font-size: 1.2rem;\n }\n\n .color-grid,\n .shape-grid,\n .number-grid,\n .animal-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n\n .color-card,\n .shape-card,\n .number-card {\n width: 100%;\n height: 90px;\n }\n\n .color-card {\n font-size: 1.5rem;\n }\n\n .shape-card {\n font-size: 3rem;\n }\n\n .number-card {\n font-size: 2.5rem;\n }\n\n .animal-card {\n padding: 1rem;\n }\n\n .animal-emoji {\n font-size: 2rem;\n }\n\n .animal-name {\n font-size: 1rem;\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: 60px;\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 .question {\n font-size: 2.5rem;\n }\n\n .color-card,\n .shape-card,\n .number-card {\n height: 80px;\n }\n \n .number-card {\n font-size: 2rem;\n }\n \n .shape-card {\n font-size: 2.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"header-content\">\n <h1>\n <span>\ud83c\udf08<\/span>\n Fun Learning\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\">Bintang<\/span>\n <span class=\"stat-value\" id=\"stars\">\u2b50<\/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=\"playCheer()\">Semangat!<\/button>\n <button class=\"btn-warning\" onclick=\"resetGame()\">Ulang<\/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\udd84<\/div>\n <h2 style=\"color: #FF69B4; font-size: 2.5rem; margin-bottom: 1rem;\">Belajar Seru!<\/h2>\n <p style=\"color: #666; font-size: 1.3rem; margin-bottom: 2rem;\">Pilih permainan favoritmu!<\/p>\n \n <div class=\"game-modes\">\n <div class=\"mode-card\" onclick=\"selectMode('colors')\">\n <div class=\"mode-icon\">\ud83c\udfa8<\/div>\n <div class=\"mode-title\">Warna<\/div>\n <div class=\"mode-desc\">Kenali warna-warna indah!<\/div>\n <\/div>\n <div class=\"mode-card\" onclick=\"selectMode('shapes')\">\n <div class=\"mode-icon\">\u2b50<\/div>\n <div class=\"mode-title\">Bentuk<\/div>\n <div class=\"mode-desc\">Pelajari bentuk-bentuk!<\/div>\n <\/div>\n <div class=\"mode-card\" onclick=\"selectMode('numbers')\">\n <div class=\"mode-icon\">\ud83d\udd22<\/div>\n <div class=\"mode-title\">Angka<\/div>\n <div class=\"mode-desc\">Tebak angka yang benar!<\/div>\n <\/div>\n <div class=\"mode-card\" onclick=\"selectMode('animals')\">\n <div class=\"mode-icon\">\ud83d\udc3e<\/div>\n <div class=\"mode-title\">Hewan<\/div>\n <div class=\"mode-desc\">Kenali hewan lucu!<\/div>\n <\/div>\n <\/div>\n \n <button class=\"btn-primary\" onclick=\"startGame()\" style=\"margin-top: 2rem; font-size: 1.3rem; padding: 1rem 2rem;\">Mulai Bermain!<\/button>\n <\/div>\n \n <div class=\"game-area\" id=\"gameArea\">\n <div class=\"timer\" id=\"timer\">\u23f0 Waktu Bermain: 0s<\/div>\n \n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progressFill\" style=\"width: 0%\">\n <span id=\"progressText\">0\/5<\/span>\n <\/div>\n <\/div>\n \n <div class=\"question-area\">\n <div class=\"question\" id=\"question\">\ud83c\udf08<\/div>\n <div class=\"hint\" id=\"hint\">Pilih jawaban yang benar!<\/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 \/\/ Simple data for kids\n const colorsData = [\n { name: 'Merah', emoji: '\ud83c\udf4e', color: '#FF0000' },\n { name: 'Biru', emoji: '\ud83c\udf0a', color: '#0000FF' },\n { name: 'Kuning', emoji: '\ud83c\udf3b', color: '#FFFF00' },\n { name: 'Hijau', emoji: '\ud83c\udf33', color: '#00FF00' },\n { name: 'Ungu', emoji: '\ud83c\udf47', color: '#800080' },\n { name: 'Orange', emoji: '\ud83c\udf4a', color: '#FFA500' }\n ];\n\n const shapesData = [\n { name: 'Lingkaran', emoji: '\u2b55' },\n { name: 'Kotak', emoji: '\u2b1c' },\n { name: 'Segitiga', emoji: '\ud83d\udd3a' },\n { name: 'Bintang', emoji: '\u2b50' },\n { name: 'Hati', emoji: '\u2764\ufe0f' },\n { name: 'Wajah', emoji: '\ud83d\ude0a' }\n ];\n\n const numbersData = [\n { number: 1, emoji: '\ud83c\udf4e' },\n { number: 2, emoji: '\ud83c\udf4c' },\n { number: 3, emoji: '\ud83c\udf53' },\n { number: 4, emoji: '\ud83c\udf47' },\n { number: 5, emoji: '\ud83c\udf4a' }\n ];\n\n const animalsData = [\n { name: 'Kucing', emoji: '\ud83d\udc31', sound: 'meong' },\n { name: 'Anjing', emoji: '\ud83d\udc36', sound: 'guk guk' },\n { name: 'Bebek', emoji: '\ud83e\udd86', sound: 'kwek kwek' },\n { name: 'Sapi', emoji: '\ud83d\udc04', sound: 'mooo' },\n { name: 'Ayam', emoji: '\ud83d\udc14', sound: 'kukuruyuk' },\n { name: 'Gajah', emoji: '\ud83d\udc18', sound: 'pruuut' }\n ];\n\n \/\/ Game state\n let gameState = {\n score: 0,\n stars: 1,\n level: 1,\n currentMode: null,\n currentQuestion: null,\n questionsAnswered: 0,\n totalQuestions: 5,\n startTime: null,\n timerInterval: null,\n correctAnswers: 0,\n usedItems: []\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 happy sound\n function playHappySound() {\n if (!audioContext) return;\n\n const notes = [523, 659, 784, 1047]; \/\/ C, E, G, High C\n notes.forEach((freq, index) => {\n setTimeout(() => {\n const oscillator = audioContext.createOscillator();\n const gainNode = audioContext.createGain();\n \n oscillator.connect(gainNode);\n gainNode.connect(audioContext.destination);\n \n oscillator.frequency.value = freq;\n oscillator.type = 'sine';\n gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);\n \n oscillator.start(audioContext.currentTime);\n oscillator.stop(audioContext.currentTime + 0.3);\n }, index * 100);\n });\n }\n\n \/\/ Play sad sound\n function playSadSound() {\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 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.5);\n \n oscillator.start(audioContext.currentTime);\n oscillator.stop(audioContext.currentTime + 0.5);\n }\n\n \/\/ Play cheer sound\n function playCheer() {\n if (!audioContext) return;\n\n const notes = [523, 659, 784, 1047, 1319]; \/\/ C, E, G, High C, High E\n notes.forEach((freq, index) => {\n setTimeout(() => {\n const oscillator = audioContext.createOscillator();\n const gainNode = audioContext.createGain();\n \n oscillator.connect(gainNode);\n gainNode.connect(audioContext.destination);\n \n oscillator.frequency.value = freq;\n oscillator.type = 'sine';\n gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);\n \n oscillator.start(audioContext.currentTime);\n oscillator.stop(audioContext.currentTime + 0.2);\n }, index * 50);\n });\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 playHappySound();\n }\n\n \/\/ Start game\n function startGame() {\n if (!gameState.currentMode) {\n showNotification('Pilih permainan dulu!', 'warning');\n return;\n }\n \n \/\/ Reset game state\n gameState.score = 0;\n gameState.questionsAnswered = 0;\n gameState.correctAnswers = 0;\n gameState.startTime = Date.now();\n gameState.usedItems = [];\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\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 'colors':\n generateColorQuestion();\n break;\n case 'shapes':\n generateShapeQuestion();\n break;\n case 'numbers':\n generateNumberQuestion();\n break;\n case 'animals':\n generateAnimalQuestion();\n break;\n }\n }\n\n \/\/ Generate color question\n function generateColorQuestion() {\n const availableColors = colorsData.filter(c => !gameState.usedItems.includes(c.name));\n \n if (availableColors.length === 0) {\n gameState.usedItems = [];\n generateColorQuestion();\n return;\n }\n \n const randomColor = availableColors[Math.floor(Math.random() * availableColors.length)];\n gameState.usedItems.push(randomColor.name);\n gameState.currentQuestion = randomColor;\n \n \/\/ Update question\n document.getElementById('question').textContent = randomColor.emoji;\n document.getElementById('hint').textContent = `Warna apa ini?`;\n \n \/\/ Create color options\n const gameContent = document.getElementById('gameContent');\n gameContent.innerHTML = `\n <div class=\"color-grid\">\n ${colorsData.map(color => `\n <div class=\"color-card\" style=\"background: ${color.color};\" \n onclick=\"checkColorAnswer('${color.name}', this)\">\n ${color.emoji}\n <\/div>\n `).join('')}\n <\/div>\n `;\n }\n\n \/\/ Generate shape question\n function generateShapeQuestion() {\n const availableShapes = shapesData.filter(s => !gameState.usedItems.includes(s.name));\n \n if (availableShapes.length === 0) {\n gameState.usedItems = [];\n generateShapeQuestion();\n return;\n }\n \n const randomShape = availableShapes[Math.floor(Math.random() * availableShapes.length)];\n gameState.usedItems.push(randomShape.name);\n gameState.currentQuestion = randomShape;\n \n \/\/ Update question\n document.getElementById('question').textContent = randomShape.emoji;\n document.getElementById('hint').textContent = `Bentuk apa ini?`;\n \n \/\/ Create shape options\n const gameContent = document.getElementById('gameContent');\n gameContent.innerHTML = `\n <div class=\"shape-grid\">\n ${shapesData.map(shape => `\n <div class=\"shape-card\" onclick=\"checkShapeAnswer('${shape.name}', this)\">\n ${shape.emoji}\n <\/div>\n `).join('')}\n <\/div>\n `;\n }\n\n \/\/ Generate number question - NEW LOGIC: Guess the number\n function generateNumberQuestion() {\n const availableNumbers = numbersData.filter(n => !gameState.usedItems.includes(n.number));\n \n if (availableNumbers.length === 0) {\n gameState.usedItems = [];\n generateNumberQuestion();\n return;\n }\n \n const randomNumber = availableNumbers[Math.floor(Math.random() * availableNumbers.length)];\n gameState.usedItems.push(randomNumber.number);\n gameState.currentQuestion = randomNumber;\n \n \/\/ Update question - Show the number and ask to find it\n document.getElementById('question').textContent = randomNumber.number;\n document.getElementById('hint').textContent = `Tebak angka ini! Pilih yang sama!`;\n \n \/\/ Create number options\n const gameContent = document.getElementById('gameContent');\n gameContent.innerHTML = `\n <div class=\"number-grid\">\n ${numbersData.map(number => `\n <div class=\"number-card\" onclick=\"checkNumberAnswer(${number.number}, this)\">\n ${number.number}\n <\/div>\n `).join('')}\n <\/div>\n `;\n }\n\n \/\/ Generate animal question\n function generateAnimalQuestion() {\n const availableAnimals = animalsData.filter(a => !gameState.usedItems.includes(a.name));\n \n if (availableAnimals.length === 0) {\n gameState.usedItems = [];\n generateAnimalQuestion();\n return;\n }\n \n const randomAnimal = availableAnimals[Math.floor(Math.random() * availableAnimals.length)];\n gameState.usedItems.push(randomAnimal.name);\n gameState.currentQuestion = randomAnimal;\n \n \/\/ Update question\n document.getElementById('question').textContent = randomAnimal.emoji;\n document.getElementById('hint').textContent = `Hewan apa ini? Suaranya \"${randomAnimal.sound}\"`;\n \n \/\/ Create animal options\n const gameContent = document.getElementById('gameContent');\n gameContent.innerHTML = `\n <div class=\"animal-grid\">\n ${animalsData.map(animal => `\n <div class=\"animal-card\" onclick=\"checkAnimalAnswer('${animal.name}', this)\">\n <div class=\"animal-emoji\">${animal.emoji}<\/div>\n <div class=\"animal-name\">${animal.name}<\/div>\n <\/div>\n `).join('')}\n <\/div>\n `;\n }\n\n \/\/ Check color answer\n function checkColorAnswer(answer, element) {\n if (answer === gameState.currentQuestion.name) {\n element.classList.add('selected');\n playHappySound();\n gameState.correctAnswers++;\n gameState.score += 10;\n \n showStreakIndicator('Benar! \ud83c\udf89');\n checkAchievements();\n \n } else {\n playSadSound();\n showStreakIndicator('Coba lagi! \ud83d\ude0a');\n }\n \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 }, 2000);\n }\n\n \/\/ Check shape answer\n function checkShapeAnswer(answer, element) {\n if (answer === gameState.currentQuestion.name) {\n element.classList.add('selected');\n playHappySound();\n gameState.correctAnswers++;\n gameState.score += 10;\n \n showStreakIndicator('Hebat! \u2b50');\n checkAchievements();\n \n } else {\n playSadSound();\n showStreakIndicator('Coba lagi! \ud83d\ude0a');\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 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 number answer - NEW LOGIC: Match the displayed number\n function checkNumberAnswer(answer, element) {\n if (answer === gameState.currentQuestion.number) {\n element.classList.add('selected');\n playHappySound();\n gameState.correctAnswers++;\n gameState.score += 10;\n \n showStreakIndicator('Pintar! \ud83c\udf1f');\n checkAchievements();\n \n } else {\n playSadSound();\n showStreakIndicator('Coba lagi! \ud83d\ude0a');\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 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 animal answer\n function checkAnimalAnswer(answer, element) {\n if (answer === gameState.currentQuestion.name) {\n element.classList.add('selected');\n playHappySound();\n gameState.correctAnswers++;\n gameState.score += 10;\n \n showStreakIndicator('Cerdas! \ud83c\udf8a');\n checkAchievements();\n \n } else {\n playSadSound();\n showStreakIndicator('Coba lagi! \ud83d\ude0a');\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 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 \/\/ Start timer\n function startTimer() {\n gameState.timerInterval = setInterval(() => {\n const elapsed = Math.floor((Date.now() - gameState.startTime) \/ 1000);\n document.getElementById('timer').textContent = `\u23f0 Waktu Bermain: ${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 stars\n let stars = 1;\n if (accuracy === 100) stars = 3;\n else if (accuracy >= 80) stars = 2;\n \n gameState.stars = stars;\n \n \/\/ Show results\n showGameResults(stars, accuracy, timeTaken);\n }\n\n \/\/ Show game results\n function showGameResults(stars, accuracy, time) {\n const mainGame = document.getElementById('mainGame');\n \n mainGame.innerHTML = `\n <div style=\"text-align: center; padding: 2rem;\">\n <h2 style=\"color: #FF69B4; font-size: 3rem; margin-bottom: 2rem;\">\ud83c\udf89 Selesai!<\/h2>\n \n <div class=\"stars\">\n ${Array(stars).fill('\u2b50').join('')}\n <\/div>\n \n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 2rem 0;\">\n <div style=\"background: rgba(255, 182, 193, 0.3); padding: 1.5rem; border-radius: 15px;\">\n <div style=\"font-size: 2rem; font-weight: bold; color: #FF69B4;\">${gameState.score}<\/div>\n <div style=\"color: #666;\">Skor<\/div>\n <\/div>\n <div style=\"background: rgba(152, 251, 152, 0.3); padding: 1.5rem; border-radius: 15px;\">\n <div style=\"font-size: 2rem; font-weight: bold; color: #90EE90;\">${accuracy}%<\/div>\n <div style=\"color: #666;\">Benar<\/div>\n <\/div>\n <div style=\"background: rgba(255, 215, 0, 0.3); padding: 1.5rem; border-radius: 15px;\">\n <div style=\"font-size: 2rem; font-weight: bold; color: #FFD700;\">${time}s<\/div>\n <div style=\"color: #666;\">Waktu<\/div>\n <\/div>\n <\/div>\n \n <div style=\"margin: 2rem 0;\">\n ${accuracy === 100 ? '<div style=\"background: linear-gradient(135deg, #FFD700, #FFA500); color: white; padding: 1rem 2rem; border-radius: 25px; display: inline-block; font-size: 1.3rem; font-weight: bold;\">\ud83c\udfc6 Sempurna!<\/div>' : ''}\n ${accuracy >= 80 ? '<div style=\"background: linear-gradient(135deg, #98FB98, #90EE90); color: white; padding: 1rem 2rem; border-radius: 25px; display: inline-block; font-size: 1.3rem; font-weight: bold;\">\ud83c\udf1f Hebat!<\/div>' : ''}\n ${accuracy < 80 ? '<div style=\"background: linear-gradient(135deg, #87CEEB, #FFB6C1); color: white; padding: 1rem 2rem; border-radius: 25px; display: inline-block; font-size: 1.3rem; font-weight: bold;\">\ud83d\udcaa Terus Belajar!<\/div>' : ''}\n <\/div>\n \n <button class=\"btn-primary\" onclick=\"location.reload()\" style=\"font-size: 1.3rem; padding: 1rem 2rem;\">Main Lagi!<\/button>\n <\/div>\n `;\n \n \/\/ Play celebration sound\n if (stars >= 2) {\n playCheer();\n }\n }\n\n \/\/ Show streak indicator\n function showStreakIndicator(message) {\n const indicator = document.getElementById('streakIndicator');\n indicator.textContent = message;\n indicator.style.opacity = '1';\n indicator.style.animation = 'none';\n \n setTimeout(() => {\n indicator.style.animation = 'streakAnimation 1.5s ease-out';\n }, 10);\n }\n\n \/\/ Check achievements\n function checkAchievements() {\n if (gameState.correctAnswers === 3) {\n showAchievement('\u2b50 3 Benar!', 'Kamu hebat!');\n } else if (gameState.correctAnswers === 5) {\n showAchievement('\ud83c\udfc6 Sempurna!', 'Semua 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 playHappySound();\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('stars').textContent = '\u2b50'.repeat(gameState.stars);\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 \/\/ Play cheer\n function playCheer() {\n playCheer();\n showStreakIndicator('Semangat! \ud83d\udcaa');\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, #FFB6C1, #FF69B4)' : 'linear-gradient(135deg, #98FB98, #90EE90)'};\n color: white;\n padding: 2rem 3rem;\n border-radius: 20px;\n font-size: 1.5rem;\n font-weight: bold;\n z-index: 2000;\n animation: slideIn 0.5s ease-out;\n font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;\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>Fun Learning – Belajar Seru untuk Anak \ud83c\udf08 Fun Learning Skor 0 Bintang \u2b50 Level 1 Menu Semangat! Ulang \ud83e\udd84 Belajar Seru! Pilih permainan favoritmu! \ud83c\udfa8 Warna Kenali warna-warna indah! \u2b50 Bentuk Pelajari bentuk-bentuk! \ud83d\udd22 Angka Tebak angka yang benar! \ud83d\udc3e Hewan Kenali hewan lucu! Mulai Bermain! \u23f0 Waktu Bermain: 0s 0\/5 \ud83c\udf08 Pilih jawaban […]<\/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-169","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/169","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=169"}],"version-history":[{"count":7,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/169\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/169\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/media?parent=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}