{"id":180,"date":"2026-04-19T09:35:04","date_gmt":"2026-04-19T09:35:04","guid":{"rendered":"https:\/\/lab.rwb.my.id\/paud\/?page_id=180"},"modified":"2026-04-19T10:53:44","modified_gmt":"2026-04-19T10:53:44","slug":"game-4-math","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/paud\/game-4-math\/","title":{"rendered":"Game 4 Math"},"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 Math Adventure - Petualangan Matematika<\/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: 600px;\n width: 100%;\n text-align: center;\n }\n\n .level-selector {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n margin-bottom: 2rem;\n }\n\n .level-card {\n padding: 1.5rem;\n border-radius: 15px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n\n .level-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n\n .level-card.selected {\n border-color: #667eea;\n background: rgba(102, 126, 234, 0.1);\n }\n\n .level-easy {\n background: linear-gradient(135deg, #84fab0, #8fd3f4);\n }\n\n .level-medium {\n background: linear-gradient(135deg, #ffecd2, #fcb69f);\n }\n\n .level-hard {\n background: linear-gradient(135deg, #ff9a9e, #fecfef);\n }\n\n .level-expert {\n background: linear-gradient(135deg, #f093fb, #f5576c);\n color: white;\n }\n\n .operation-selector {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 2rem;\n flex-wrap: wrap;\n }\n\n .operation-btn {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 3px solid transparent;\n }\n\n .operation-btn:hover {\n transform: scale(1.1);\n }\n\n .operation-btn.selected {\n border-color: #667eea;\n box-shadow: 0 0 15px rgba(102, 126, 234, 0.3);\n }\n\n .op-add {\n background: linear-gradient(135deg, #89f7fe, #66a6ff);\n }\n\n .op-subtract {\n background: linear-gradient(135deg, #fddb92, #d1fdff);\n }\n\n .op-multiply {\n background: linear-gradient(135deg, #9890e3, #b1f4cf);\n }\n\n .op-mixed {\n background: linear-gradient(135deg, #fa709a, #fee140);\n }\n\n .question-area {\n background: linear-gradient(135deg, #667eea, #764ba2);\n color: white;\n padding: 2rem;\n border-radius: 15px;\n margin-bottom: 2rem;\n min-height: 150px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n\n .question {\n font-size: 2.5rem;\n font-weight: bold;\n margin-bottom: 1rem;\n }\n\n .hint {\n font-size: 1rem;\n opacity: 0.8;\n font-style: italic;\n }\n\n .answer-options {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n margin-bottom: 2rem;\n }\n\n .answer-btn {\n padding: 1.5rem;\n font-size: 1.5rem;\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 .answer-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 .answer-btn.correct {\n background: linear-gradient(135deg, #11998e, #38ef7d);\n color: white;\n animation: correctPulse 0.5s ease;\n }\n\n .answer-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 .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: 1rem;\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 .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 .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 .welcome-screen {\n text-align: center;\n padding: 2rem;\n }\n\n .welcome-title {\n font-size: 2.5rem;\n color: #667eea;\n margin-bottom: 1rem;\n }\n\n .welcome-desc {\n font-size: 1.2rem;\n color: #666;\n margin-bottom: 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 .timer {\n font-size: 1.5rem;\n font-weight: bold;\n color: #f5576c;\n margin-bottom: 1rem;\n }\n\n .slider-container {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n input[type=\"range\"] {\n width: 100px;\n height: 6px;\n border-radius: 3px;\n background: #ddd;\n outline: none;\n -webkit-appearance: none;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #667eea;\n cursor: pointer;\n }\n\n input[type=\"range\"]::-moz-range-thumb {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #667eea;\n cursor: pointer;\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 border-radius: 15px;\n }\n\n .welcome-screen {\n padding: 1rem 0;\n }\n\n .character {\n font-size: 3.5rem;\n }\n\n .welcome-title {\n font-size: 1.8rem;\n }\n\n .welcome-desc {\n font-size: 1rem;\n }\n\n .level-selector {\n grid-template-columns: repeat(2, 1fr);\n gap: 0.8rem;\n margin-bottom: 1.5rem;\n }\n\n .level-card {\n padding: 1rem;\n }\n\n .level-card h3 {\n font-size: 1rem;\n }\n\n .level-card p {\n font-size: 0.8rem;\n }\n\n .operation-selector {\n gap: 0.8rem;\n margin-bottom: 1.5rem;\n }\n\n .operation-btn {\n width: 50px;\n height: 50px;\n font-size: 1.2rem;\n }\n\n .question-area {\n padding: 1.5rem 1rem;\n min-height: 120px;\n margin-bottom: 1.5rem;\n }\n\n .question {\n font-size: 2rem;\n }\n\n .hint {\n font-size: 0.9rem;\n }\n\n .timer {\n font-size: 1.2rem;\n margin-bottom: 0.8rem;\n }\n\n .progress-bar {\n height: 25px;\n margin-bottom: 0.8rem;\n }\n\n .answer-options {\n grid-template-columns: 1fr;\n gap: 0.8rem;\n }\n\n .answer-btn {\n padding: 1rem;\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 .question {\n font-size: 1.8rem;\n }\n\n .operation-btn {\n width: 45px;\n height: 45px;\n font-size: 1rem;\n }\n \n .answer-btn {\n font-size: 1.1rem;\n padding: 0.8rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"header-content\">\n <h1>\n <span>\ud83e\uddee<\/span>\n Math 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=\"currentLevel\">-<\/span>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <button class=\"btn-primary\" onclick=\"startGame()\">Mulai<\/button>\n <button class=\"btn-success\" onclick=\"showHint()\">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 class=\"welcome-title\">Selamat Datang di Math Adventure!<\/h2>\n <p class=\"welcome-desc\">Pilih level dan operasi matematika untuk memulai petualanganmu!<\/p>\n \n <h3 style=\"margin-bottom: 1rem; color: #667eea;\">Pilih Level Kesulitan:<\/h3>\n <div class=\"level-selector\">\n <div class=\"level-card level-easy\" onclick=\"selectLevel('easy')\">\n <h3>\ud83c\udf1f Mudah<\/h3>\n <p>Angka 1-10<\/p>\n <\/div>\n <div class=\"level-card level-medium\" onclick=\"selectLevel('medium')\">\n <h3>\u2b50 Sedang<\/h3>\n <p>Angka 1-50<\/p>\n <\/div>\n <div class=\"level-card level-hard\" onclick=\"selectLevel('hard')\">\n <h3>\ud83c\udf1f Sulit<\/h3>\n <p>Angka 1-100<\/p>\n <\/div>\n <div class=\"level-card level-expert\" onclick=\"selectLevel('expert')\">\n <h3>\u26a1 Expert<\/h3>\n <p>Angka 1-500<\/p>\n <\/div>\n <\/div>\n \n <h3 style=\"margin: 2rem 0 1rem; color: #667eea;\">Pilih Operasi:<\/h3>\n <div class=\"operation-selector\">\n <div class=\"operation-btn op-add\" onclick=\"selectOperation('add')\">+<\/div>\n <div class=\"operation-btn op-subtract\" onclick=\"selectOperation('subtract')\">\u2212<\/div>\n <div class=\"operation-btn op-multiply\" onclick=\"selectOperation('multiply')\">\u00d7<\/div>\n <div class=\"operation-btn op-mixed\" onclick=\"selectOperation('mixed')\">?<\/div>\n <\/div>\n <\/div>\n \n <div id=\"gameArea\" style=\"display: none;\">\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 class=\"question-area\">\n <div class=\"question\" id=\"question\">?<\/div>\n <div class=\"hint\" id=\"hint\"><\/div>\n <\/div>\n \n <div class=\"answer-options\" id=\"answerOptions\">\n <!-- Answer buttons will be generated 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 \/\/ Game state\n let gameState = {\n score: 0,\n streak: 0,\n maxStreak: 0,\n currentLevel: null,\n currentOperation: null,\n currentQuestion: null,\n correctAnswer: null,\n questionsAnswered: 0,\n totalQuestions: 10,\n startTime: null,\n timerInterval: null,\n hintsUsed: 0,\n correctAnswers: 0\n };\n\n \/\/ Level configurations\n const levelConfigs = {\n easy: { min: 1, max: 10, name: 'Mudah', multiplier: 1 },\n medium: { min: 1, max: 50, name: 'Sedang', multiplier: 2 },\n hard: { min: 1, max: 100, name: 'Sulit', multiplier: 3 },\n expert: { min: 1, max: 500, name: 'Expert', multiplier: 5 }\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 level\n function selectLevel(level) {\n gameState.currentLevel = level;\n \n \/\/ Update UI\n document.querySelectorAll('.level-card').forEach(card => {\n card.classList.remove('selected');\n });\n event.target.closest('.level-card').classList.add('selected');\n \n playSound('click');\n \n \/\/ Check if both level and operation are selected\n if (gameState.currentOperation) {\n document.getElementById('startBtn').disabled = false;\n }\n }\n\n \/\/ Select operation\n function selectOperation(operation) {\n gameState.currentOperation = operation;\n \n \/\/ Update UI\n document.querySelectorAll('.operation-btn').forEach(btn => {\n btn.classList.remove('selected');\n });\n event.target.closest('.operation-btn').classList.add('selected');\n \n playSound('click');\n \n \/\/ Check if both level and operation are selected\n if (gameState.currentLevel) {\n document.getElementById('startBtn').disabled = false;\n }\n }\n\n \/\/ Start game\n function startGame() {\n if (!gameState.currentLevel || !gameState.currentOperation) {\n showNotification('Pilih level dan operasi 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 \n \/\/ Update UI\n document.getElementById('welcomeScreen').style.display = 'none';\n document.getElementById('gameArea').style.display = 'block';\n document.getElementById('currentLevel').textContent = levelConfigs[gameState.currentLevel].name;\n \n \/\/ Start timer\n startTimer();\n \n \/\/ Generate first question\n generateQuestion();\n \n \/\/ Update display\n updateDisplay();\n }\n\n \/\/ Generate question\n function generateQuestion() {\n const config = levelConfigs[gameState.currentLevel];\n let num1, num2, operation, answer;\n \n \/\/ Choose operation\n if (gameState.currentOperation === 'mixed') {\n const operations = ['add', 'subtract', 'multiply'];\n operation = operations[Math.floor(Math.random() * operations.length)];\n } else {\n operation = gameState.currentOperation;\n }\n \n \/\/ Generate numbers based on operation\n switch(operation) {\n case 'add':\n num1 = Math.floor(Math.random() * config.max) + config.min;\n num2 = Math.floor(Math.random() * config.max) + config.min;\n answer = num1 + num2;\n gameState.currentQuestion = `${num1} + ${num2} = ?`;\n break;\n case 'subtract':\n num1 = Math.floor(Math.random() * config.max) + config.min;\n num2 = Math.floor(Math.random() * num1) + 1; \/\/ Ensure positive result\n answer = num1 - num2;\n gameState.currentQuestion = `${num1} \u2212 ${num2} = ?`;\n break;\n case 'multiply':\n num1 = Math.floor(Math.random() * Math.min(config.max, 20)) + config.min;\n num2 = Math.floor(Math.random() * Math.min(config.max, 20)) + config.min;\n answer = num1 * num2;\n gameState.currentQuestion = `${num1} \u00d7 ${num2} = ?`;\n break;\n }\n \n gameState.correctAnswer = answer;\n \n \/\/ Generate answer options\n generateAnswerOptions(answer);\n \n \/\/ Update question display\n document.getElementById('question').textContent = gameState.currentQuestion;\n document.getElementById('hint').textContent = '';\n }\n\n \/\/ Generate answer options\n function generateAnswerOptions(correctAnswer) {\n const options = [correctAnswer];\n const optionCount = 4;\n \n \/\/ Generate wrong answers\n while (options.length < optionCount) {\n let wrongAnswer;\n const variance = Math.max(10, Math.floor(correctAnswer * 0.3));\n \n if (Math.random() > 0.5) {\n wrongAnswer = correctAnswer + Math.floor(Math.random() * variance) + 1;\n } else {\n wrongAnswer = Math.max(0, correctAnswer - Math.floor(Math.random() * variance) - 1);\n }\n \n if (!options.includes(wrongAnswer)) {\n options.push(wrongAnswer);\n }\n }\n \n \/\/ Shuffle options\n options.sort(() => Math.random() - 0.5);\n \n \/\/ Create buttons\n const container = document.getElementById('answerOptions');\n container.innerHTML = '';\n \n options.forEach(option => {\n const button = document.createElement('button');\n button.className = 'answer-btn';\n button.textContent = option;\n button.onclick = () => checkAnswer(option, button);\n container.appendChild(button);\n });\n }\n\n \/\/ Check answer\n function checkAnswer(selectedAnswer, buttonElement) {\n \/\/ Disable all buttons\n document.querySelectorAll('.answer-btn').forEach(btn => {\n btn.disabled = true;\n });\n \n if (selectedAnswer === gameState.correctAnswer) {\n \/\/ Correct answer\n buttonElement.classList.add('correct');\n playSound('correct');\n \n \/\/ Update score and streak\n gameState.correctAnswers++;\n gameState.streak++;\n const points = 10 * levelConfigs[gameState.currentLevel].multiplier * (gameState.streak > 5 ? 2 : 1);\n gameState.score += points;\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('.answer-btn').forEach(btn => {\n if (parseInt(btn.textContent) === gameState.correctAnswer) {\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 \/\/ Show hint\n function showHint() {\n if (!gameState.currentQuestion) return;\n \n gameState.hintsUsed++;\n gameState.score = Math.max(0, gameState.score - 5);\n \n let hint = '';\n const answer = gameState.correctAnswer;\n \n if (answer < 10) {\n hint = 'Jawabannya adalah angka satu digit';\n } else if (answer < 100) {\n hint = `Jawabannya dimulai dengan ${answer.toString()[0]}`;\n } else {\n hint = `Jawabannya adalah angka ${answer.toString().length} digit`;\n }\n \n document.getElementById('hint').textContent = `\ud83d\udca1 ${hint}`;\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 < 30 ? '<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!', 'Jawaban benar 5 kali 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 }\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 \/\/ Create notification element\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, #667eea, #764ba2)'};\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>Math Adventure – Petualangan Matematika \ud83e\uddee Math Adventure Skor 0 Streak 0 Level – Mulai Petunjuk Reset \ud83e\uddd9\u200d\u2642\ufe0f Selamat Datang di Math Adventure! Pilih level dan operasi matematika untuk memulai petualanganmu! Pilih Level Kesulitan: \ud83c\udf1f Mudah Angka 1-10 \u2b50 Sedang Angka 1-50 \ud83c\udf1f Sulit Angka 1-100 \u26a1 Expert Angka 1-500 Pilih Operasi: + \u2212 \u00d7 […]<\/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-180","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/180","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=180"}],"version-history":[{"count":7,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/180\/revisions"}],"predecessor-version":[{"id":204,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/180\/revisions\/204"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/media?parent=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}