Petualangan Sains & Sosial<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @keyframes bounce {\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\n 40% { transform: translateY(-10px); }\n 60% { transform: translateY(-5px); }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .bounce { animation: bounce 2s infinite; }\n .pulse { animation: pulse 2s infinite; }\n .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }\n .card-hover { transition: transform 0.3s ease; }\n .card-hover:hover { transform: translateY(-5px); }\n <\/style>\n<\/head>\n<body class=\"gradient-bg min-h-screen\">\n \n <div class=\"bg-white shadow-lg\">\n <div class=\"container mx-auto px-4 py-4\">\n <div class=\"flex justify-between items-center\">\n <h1 class=\"text-3xl font-bold text-purple-800\">\ud83c\udf1f Petualangan Sains & Sosial<\/h1>\n <div class=\"flex items-center space-x-4\">\n <div class=\"bg-yellow-400 px-4 py-2 rounded-full\">\n <span class=\"font-bold\">\u2b50 Poin: <span id=\"totalPoints\">0<\/span><\/span>\n <\/div>\n <div class=\"bg-blue-400 px-4 py-2 rounded-full text-white\">\n <span class=\"font-bold\">\u23f0 Sesi: <span id=\"currentSession\">1<\/span>\/3<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"container mx-auto px-4 py-8\">\n \n <div id=\"welcomeScreen\" class=\"text-center\">\n <div class=\"bg-white rounded-3xl shadow-2xl p-8 max-w-4xl mx-auto\">\n <div class=\"bounce text-6xl mb-4\">\ud83d\ude80<\/div>\n <h2 class=\"text-4xl font-bold text-purple-800 mb-4\">Selamat Datang, Penjelajah Muda!<\/h2>\n <p class=\"text-xl text-gray-600 mb-8\">Bersiaplah untuk petualangan seru mempelajari IPA dan IPS selama 3 sesi pembelajaran!<\/p>\n \n <div class=\"grid md:grid-cols-3 gap-6 mb-8\">\n <div class=\"bg-gradient-to-br from-blue-400 to-blue-600 text-white p-6 rounded-2xl\">\n <div class=\"text-3xl mb-2\">\ud83d\udd2c<\/div>\n <h3 class=\"font-bold text-lg\">Sesi 1: Lab Sains<\/h3>\n <p class=\"text-sm\">Eksperimen virtual & kuis IPA<\/p>\n <\/div>\n <div class=\"bg-gradient-to-br from-green-400 to-green-600 text-white p-6 rounded-2xl\">\n <div class=\"text-3xl mb-2\">\ud83c\udf0d<\/div>\n <h3 class=\"font-bold text-lg\">Sesi 2: Jelajah Dunia<\/h3>\n <p class=\"text-sm\">Geografi & budaya nusantara<\/p>\n <\/div>\n <div class=\"bg-gradient-to-br from-purple-400 to-purple-600 text-white p-6 rounded-2xl\">\n <div class=\"text-3xl mb-2\">\ud83c\udfc6<\/div>\n <h3 class=\"font-bold text-lg\">Sesi 3: Tantangan Final<\/h3>\n <p class=\"text-sm\">Quiz gabungan & sertifikat<\/p>\n <\/div>\n <\/div>\n \n <button onclick=\"startGame()\" class=\"bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-full text-xl font-bold hover:from-purple-600 hover:to-pink-600 transform hover:scale-105 transition-all duration-300 shadow-lg\">\n \ud83c\udfae Mulai Petualangan!\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"gameScreen\" class=\"hidden\">\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 mb-6\">\n <div class=\"flex justify-center space-x-4\">\n <button onclick=\"switchSession(1)\" id=\"session1Btn\" class=\"session-btn bg-blue-500 text-white px-6 py-3 rounded-full font-bold hover:bg-blue-600 transition-colors\">\n \ud83d\udd2c Sesi 1: Lab Sains\n <\/button>\n <button onclick=\"switchSession(2)\" id=\"session2Btn\" class=\"session-btn bg-gray-300 text-gray-600 px-6 py-3 rounded-full font-bold hover:bg-gray-400 transition-colors\">\n \ud83c\udf0d Sesi 2: Jelajah Dunia\n <\/button>\n <button onclick=\"switchSession(3)\" id=\"session3Btn\" class=\"session-btn bg-gray-300 text-gray-600 px-6 py-3 rounded-full font-bold hover:bg-gray-400 transition-colors\">\n \ud83c\udfc6 Sesi 3: Tantangan Final\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"session1\" class=\"session-content\">\n <div class=\"grid lg:grid-cols-2 gap-6\">\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 card-hover\">\n <h3 class=\"text-2xl font-bold text-blue-600 mb-4\">\ud83e\uddea Lab Eksperimen Virtual<\/h3>\n <div id=\"experiment\" class=\"text-center\">\n <div class=\"bg-blue-50 p-6 rounded-xl mb-4\">\n <div class=\"text-4xl mb-2\" id=\"experimentIcon\">\u2697\ufe0f<\/div>\n <h4 class=\"font-bold text-lg mb-2\" id=\"experimentTitle\">Reaksi Asam-Basa<\/h4>\n <p class=\"text-gray-600 mb-4\" id=\"experimentDesc\">Campurkan cuka dengan baking soda dan lihat apa yang terjadi!<\/p>\n <button onclick=\"runExperiment()\" class=\"bg-blue-500 text-white px-6 py-2 rounded-full hover:bg-blue-600 transition-colors\">\n \ud83d\udd2c Jalankan Eksperimen\n <\/button>\n <\/div>\n <div id=\"experimentResult\" class=\"hidden bg-green-50 p-4 rounded-xl\">\n <div class=\"text-3xl mb-2\">\ud83d\udca5<\/div>\n <p class=\"font-bold text-green-600\">Berhasil! Terjadi reaksi kimia yang menghasilkan gas CO2!<\/p>\n <p class=\"text-sm text-gray-600 mt-2\">+50 poin untuk eksperimen yang berhasil!<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 card-hover\">\n <h3 class=\"text-2xl font-bold text-green-600 mb-4\">\u2753 Kuis Sains Cepat<\/h3>\n <div id=\"scienceQuiz\">\n <div class=\"bg-green-50 p-4 rounded-xl mb-4\">\n <p class=\"font-bold mb-3\" id=\"scienceQuestion\">Planet mana yang paling dekat dengan Matahari?<\/p>\n <div class=\"space-y-2\">\n <button onclick=\"answerScience('A')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-green-100 transition-colors border\">\n A. Venus\n <\/button>\n <button onclick=\"answerScience('B')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-green-100 transition-colors border\">\n B. Merkurius\n <\/button>\n <button onclick=\"answerScience('C')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-green-100 transition-colors border\">\n C. Mars\n <\/button>\n <\/div>\n <\/div>\n <div id=\"scienceResult\" class=\"hidden\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 mt-6\">\n <h4 class=\"font-bold text-lg mb-3\">\ud83d\udcca Progress Sesi 1<\/h4>\n <div class=\"bg-gray-200 rounded-full h-4 mb-2\">\n <div id=\"session1Progress\" class=\"bg-blue-500 h-4 rounded-full transition-all duration-500\" style=\"width: 0%\"><\/div>\n <\/div>\n <p class=\"text-sm text-gray-600\">Selesaikan eksperimen dan kuis untuk melanjut ke sesi berikutnya!<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"session2\" class=\"session-content hidden\">\n <div class=\"grid lg:grid-cols-2 gap-6\">\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 card-hover\">\n <h3 class=\"text-2xl font-bold text-green-600 mb-4\">\ud83d\uddfa\ufe0f Jelajahi Nusantara<\/h3>\n <div class=\"bg-green-50 p-6 rounded-xl text-center\">\n <div class=\"text-6xl mb-4\">\ud83c\udfdd\ufe0f<\/div>\n <h4 class=\"font-bold text-lg mb-2\" id=\"regionName\">Pulau Jawa<\/h4>\n <p class=\"text-gray-600 mb-4\" id=\"regionInfo\">Pulau terpadat di Indonesia dengan ibu kota Jakarta<\/p>\n <div class=\"grid grid-cols-2 gap-2 mb-4\">\n <button onclick=\"exploreRegion('jawa')\" class=\"region-btn bg-green-500 text-white p-2 rounded-lg hover:bg-green-600 transition-colors\">Jawa<\/button>\n <button onclick=\"exploreRegion('sumatra')\" class=\"region-btn bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition-colors\">Sumatra<\/button>\n <button onclick=\"exploreRegion('kalimantan')\" class=\"region-btn bg-yellow-500 text-white p-2 rounded-lg hover:bg-yellow-600 transition-colors\">Kalimantan<\/button>\n <button onclick=\"exploreRegion('sulawesi')\" class=\"region-btn bg-purple-500 text-white p-2 rounded-lg hover:bg-purple-600 transition-colors\">Sulawesi<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 card-hover\">\n <h3 class=\"text-2xl font-bold text-purple-600 mb-4\">\ud83c\udfad Kuis Budaya Indonesia<\/h3>\n <div id=\"cultureQuiz\">\n <div class=\"bg-purple-50 p-4 rounded-xl mb-4\">\n <p class=\"font-bold mb-3\" id=\"cultureQuestion\">Tari tradisional dari Bali adalah?<\/p>\n <div class=\"space-y-2\">\n <button onclick=\"answerCulture('A')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-purple-100 transition-colors border\">\n A. Tari Kecak\n <\/button>\n <button onclick=\"answerCulture('B')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-purple-100 transition-colors border\">\n B. Tari Saman\n <\/button>\n <button onclick=\"answerCulture('C')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-purple-100 transition-colors border\">\n C. Tari Jaipong\n <\/button>\n <\/div>\n <\/div>\n <div id=\"cultureResult\" class=\"hidden\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 mt-6\">\n <h4 class=\"font-bold text-lg mb-3\">\ud83d\udcca Progress Sesi 2<\/h4>\n <div class=\"bg-gray-200 rounded-full h-4 mb-2\">\n <div id=\"session2Progress\" class=\"bg-green-500 h-4 rounded-full transition-all duration-500\" style=\"width: 0%\"><\/div>\n <\/div>\n <p class=\"text-sm text-gray-600\">Jelajahi semua pulau dan jawab kuis budaya!<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"session3\" class=\"session-content hidden\">\n <div class=\"bg-white rounded-2xl shadow-lg p-8 text-center\">\n <h3 class=\"text-3xl font-bold text-purple-600 mb-6\">\ud83c\udfc6 Tantangan Final<\/h3>\n \n <div id=\"finalChallenge\">\n <div class=\"bg-gradient-to-br from-purple-100 to-pink-100 p-6 rounded-xl mb-6\">\n <div class=\"text-4xl mb-4\">\ud83e\udde0<\/div>\n <h4 class=\"font-bold text-xl mb-4\" id=\"finalQuestion\">Proses fotosintesis pada tumbuhan menghasilkan?<\/h4>\n <div class=\"grid md:grid-cols-2 gap-3\">\n <button onclick=\"answerFinal('A')\" class=\"final-option p-4 bg-white rounded-lg hover:bg-purple-100 transition-colors border-2 border-transparent hover:border-purple-300\">\n A. Oksigen dan Glukosa\n <\/button>\n <button onclick=\"answerFinal('B')\" class=\"final-option p-4 bg-white rounded-lg hover:bg-purple-100 transition-colors border-2 border-transparent hover:border-purple-300\">\n B. Karbon Dioksida\n <\/button>\n <button onclick=\"answerFinal('C')\" class=\"final-option p-4 bg-white rounded-lg hover:bg-purple-100 transition-colors border-2 border-transparent hover:border-purple-300\">\n C. Nitrogen\n <\/button>\n <button onclick=\"answerFinal('D')\" class=\"final-option p-4 bg-white rounded-lg hover:bg-purple-100 transition-colors border-2 border-transparent hover:border-purple-300\">\n D. Hidrogen\n <\/button>\n <\/div>\n <\/div>\n <div id=\"finalResult\" class=\"hidden\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"certificate\" class=\"hidden bg-gradient-to-br from-yellow-100 to-orange-100 rounded-2xl shadow-lg p-8 mt-6 text-center border-4 border-yellow-400\">\n <div class=\"text-6xl mb-4\">\ud83c\udfc5<\/div>\n <h3 class=\"text-3xl font-bold text-yellow-800 mb-2\">Selamat!<\/h3>\n <h4 class=\"text-xl font-bold text-yellow-700 mb-4\">Sertifikat Penjelajah Sains & Sosial<\/h4>\n <p class=\"text-lg text-yellow-600 mb-4\">Kamu telah menyelesaikan semua tantangan dengan luar biasa!<\/p>\n <div class=\"bg-white p-4 rounded-xl inline-block\">\n <p class=\"font-bold text-2xl text-purple-600\">Total Poin: <span id=\"finalScore\">0<\/span><\/p>\n <p class=\"text-gray-600\">Tingkat: <span id=\"achievement\">Penjelajah Hebat!<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let gameState = {\n currentSession: 1,\n totalPoints: 0,\n session1Complete: false,\n session2Complete: false,\n session3Complete: false,\n experimentsCompleted: 0,\n regionsExplored: 0,\n quizzesAnswered: 0\n };\n\n const scienceQuestions = [\n {\n question: \"Planet mana yang paling dekat dengan Matahari?\",\n options: [\"A. Venus\", \"B. Merkurius\", \"C. Mars\"],\n correct: \"B\",\n explanation: \"Merkurius adalah planet terdekat dengan Matahari!\"\n },\n {\n question: \"Apa yang terjadi saat air dipanaskan?\",\n options: [\"A. Membeku\", \"B. Menguap\", \"C. Mengkristal\"],\n correct: \"B\",\n explanation: \"Air berubah menjadi uap saat dipanaskan!\"\n },\n {\n question: \"Organ manusia yang berfungsi memompa darah adalah?\",\n options: [\"A. Paru-paru\", \"B. Jantung\", \"C. Ginjal\"],\n correct: \"B\",\n explanation: \"Jantung memompa darah ke seluruh tubuh!\"\n }\n ];\n\n const cultureQuestions = [\n {\n question: \"Tari tradisional dari Bali adalah?\",\n options: [\"A. Tari Kecak\", \"B. Tari Saman\", \"C. Tari Jaipong\"],\n correct: \"A\",\n explanation: \"Tari Kecak adalah tari tradisional khas Bali!\"\n },\n {\n question: \"Rumah adat Joglo berasal dari daerah?\",\n options: [\"A. Sumatra\", \"B. Jawa\", \"C. Sulawesi\"],\n correct: \"B\",\n explanation: \"Rumah Joglo adalah rumah adat dari Jawa!\"\n },\n {\n question: \"Alat musik tradisional Angklung berasal dari?\",\n options: [\"A. Jawa Barat\", \"B. Jawa Timur\", \"C. Bali\"],\n correct: \"A\",\n explanation: \"Angklung adalah alat musik tradisional dari Jawa Barat!\"\n }\n ];\n\n const finalQuestions = [\n {\n question: \"Proses fotosintesis pada tumbuhan menghasilkan?\",\n options: [\"A. Oksigen dan Glukosa\", \"B. Karbon Dioksida\", \"C. Nitrogen\", \"D. Hidrogen\"],\n correct: \"A\",\n explanation: \"Fotosintesis menghasilkan oksigen dan glukosa!\"\n },\n {\n question: \"Ibu kota Indonesia sebelum Jakarta adalah?\",\n options: [\"A. Bandung\", \"B. Yogyakarta\", \"C. Surabaya\", \"D. Bogor\"],\n correct: \"B\",\n explanation: \"Yogyakarta pernah menjadi ibu kota Indonesia!\"\n }\n ];\n\n const regions = {\n jawa: {\n name: \"Pulau Jawa\",\n info: \"Pulau terpadat di Indonesia dengan ibu kota Jakarta\",\n icon: \"\ud83c\udfd9\ufe0f\"\n },\n sumatra: {\n name: \"Pulau Sumatra\",\n info: \"Pulau terbesar keenam di dunia, kaya akan sumber daya alam\",\n icon: \"\ud83c\udf34\"\n },\n kalimantan: {\n name: \"Pulau Kalimantan\",\n info: \"Pulau terbesar ketiga di dunia, terkenal dengan hutan hujannya\",\n icon: \"\ud83c\udf33\"\n },\n sulawesi: {\n name: \"Pulau Sulawesi\",\n info: \"Pulau dengan bentuk unik seperti anggrek, kaya budaya\",\n icon: \"\ud83e\udd8b\"\n }\n };\n\n let currentScienceQ = 0;\n let currentCultureQ = 0;\n let currentFinalQ = 0;\n\n function startGame() {\n document.getElementById('welcomeScreen').classList.add('hidden');\n document.getElementById('gameScreen').classList.remove('hidden');\n updateUI();\n }\n\n function switchSession(sessionNum) {\n \/\/ Update session buttons\n document.querySelectorAll('.session-btn').forEach(btn => {\n btn.classList.remove('bg-blue-500', 'bg-green-500', 'bg-purple-500');\n btn.classList.add('bg-gray-300', 'text-gray-600');\n });\n\n \/\/ Hide all sessions\n document.querySelectorAll('.session-content').forEach(content => {\n content.classList.add('hidden');\n });\n\n \/\/ Show selected session\n document.getElementById(`session${sessionNum}`).classList.remove('hidden');\n \n \/\/ Update button color\n const activeBtn = document.getElementById(`session${sessionNum}Btn`);\n activeBtn.classList.remove('bg-gray-300', 'text-gray-600');\n \n if (sessionNum === 1) {\n activeBtn.classList.add('bg-blue-500', 'text-white');\n } else if (sessionNum === 2) {\n activeBtn.classList.add('bg-green-500', 'text-white');\n } else {\n activeBtn.classList.add('bg-purple-500', 'text-white');\n }\n\n gameState.currentSession = sessionNum;\n updateUI();\n }\n\n function runExperiment() {\n document.getElementById('experimentResult').classList.remove('hidden');\n gameState.experimentsCompleted++;\n addPoints(50);\n updateProgress();\n \n \/\/ Change experiment after completion\n setTimeout(() => {\n const experiments = [\n {\n icon: \"\ud83c\udf31\",\n title: \"Pertumbuhan Tanaman\",\n desc: \"Amati bagaimana tanaman tumbuh dengan cahaya dan air!\"\n },\n {\n icon: \"\ud83d\udd25\",\n title: \"Reaksi Pembakaran\",\n desc: \"Lihat bagaimana oksigen membantu proses pembakaran!\"\n }\n ];\n \n const exp = experiments[gameState.experimentsCompleted % experiments.length];\n document.getElementById('experimentIcon').textContent = exp.icon;\n document.getElementById('experimentTitle').textContent = exp.title;\n document.getElementById('experimentDesc').textContent = exp.desc;\n document.getElementById('experimentResult').classList.add('hidden');\n }, 3000);\n }\n\n function answerScience(answer) {\n const question = scienceQuestions[currentScienceQ];\n const resultDiv = document.getElementById('scienceResult');\n \n if (answer === question.correct) {\n resultDiv.innerHTML = `\n <div class=\"bg-green-100 p-4 rounded-xl\">\n <div class=\"text-2xl mb-2\">\u2705<\/div>\n <p class=\"font-bold text-green-600\">Benar!<\/p>\n <p class=\"text-sm text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-sm text-green-600 mt-2\">+30 poin!<\/p>\n <\/div>\n `;\n addPoints(30);\n } else {\n resultDiv.innerHTML = `\n <div class=\"bg-red-100 p-4 rounded-xl\">\n <div class=\"text-2xl mb-2\">\u274c<\/div>\n <p class=\"font-bold text-red-600\">Kurang tepat!<\/p>\n <p class=\"text-sm text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-sm text-red-600 mt-2\">+10 poin untuk usaha!<\/p>\n <\/div>\n `;\n addPoints(10);\n }\n \n resultDiv.classList.remove('hidden');\n gameState.quizzesAnswered++;\n updateProgress();\n \n \/\/ Next question after 3 seconds\n setTimeout(() => {\n currentScienceQ = (currentScienceQ + 1) % scienceQuestions.length;\n const nextQ = scienceQuestions[currentScienceQ];\n document.getElementById('scienceQuestion').textContent = nextQ.question;\n \n const options = document.querySelectorAll('#scienceQuiz .quiz-option');\n options.forEach((option, index) => {\n option.textContent = nextQ.options[index];\n });\n \n resultDiv.classList.add('hidden');\n }, 3000);\n }\n\n function exploreRegion(regionKey) {\n const region = regions[regionKey];\n document.getElementById('regionName').textContent = region.name;\n document.getElementById('regionInfo').textContent = region.info;\n \n \/\/ Add visual feedback\n const regionBtns = document.querySelectorAll('.region-btn');\n regionBtns.forEach(btn => btn.classList.remove('ring-4', 'ring-yellow-400'));\n event.target.classList.add('ring-4', 'ring-yellow-400');\n \n gameState.regionsExplored++;\n addPoints(25);\n updateProgress();\n }\n\n function answerCulture(answer) {\n const question = cultureQuestions[currentCultureQ];\n const resultDiv = document.getElementById('cultureResult');\n \n if (answer === question.correct) {\n resultDiv.innerHTML = `\n <div class=\"bg-green-100 p-4 rounded-xl\">\n <div class=\"text-2xl mb-2\">\u2705<\/div>\n <p class=\"font-bold text-green-600\">Hebat!<\/p>\n <p class=\"text-sm text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-sm text-green-600 mt-2\">+40 poin!<\/p>\n <\/div>\n `;\n addPoints(40);\n } else {\n resultDiv.innerHTML = `\n <div class=\"bg-red-100 p-4 rounded-xl\">\n <div class=\"text-2xl mb-2\">\u274c<\/div>\n <p class=\"font-bold text-red-600\">Belum tepat!<\/p>\n <p class=\"text-sm text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-sm text-red-600 mt-2\">+15 poin untuk usaha!<\/p>\n <\/div>\n `;\n addPoints(15);\n }\n \n resultDiv.classList.remove('hidden');\n updateProgress();\n \n \/\/ Next question after 3 seconds\n setTimeout(() => {\n currentCultureQ = (currentCultureQ + 1) % cultureQuestions.length;\n const nextQ = cultureQuestions[currentCultureQ];\n document.getElementById('cultureQuestion').textContent = nextQ.question;\n \n const options = document.querySelectorAll('#cultureQuiz .quiz-option');\n options.forEach((option, index) => {\n option.textContent = nextQ.options[index];\n });\n \n resultDiv.classList.add('hidden');\n }, 3000);\n }\n\n function answerFinal(answer) {\n const question = finalQuestions[currentFinalQ];\n const resultDiv = document.getElementById('finalResult');\n \n if (answer === question.correct) {\n resultDiv.innerHTML = `\n <div class=\"bg-green-100 p-6 rounded-xl\">\n <div class=\"text-4xl mb-2\">\ud83c\udf89<\/div>\n <p class=\"font-bold text-green-600 text-xl\">Luar Biasa!<\/p>\n <p class=\"text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-green-600 font-bold mt-2\">+100 poin!<\/p>\n <\/div>\n `;\n addPoints(100);\n } else {\n resultDiv.innerHTML = `\n <div class=\"bg-yellow-100 p-6 rounded-xl\">\n <div class=\"text-4xl mb-2\">\ud83d\udcaa<\/div>\n <p class=\"font-bold text-yellow-600 text-xl\">Tetap Semangat!<\/p>\n <p class=\"text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-yellow-600 font-bold mt-2\">+50 poin untuk usaha!<\/p>\n <\/div>\n `;\n addPoints(50);\n }\n \n resultDiv.classList.remove('hidden');\n \n \/\/ Show certificate after 2 seconds\n setTimeout(() => {\n showCertificate();\n }, 2000);\n }\n\n function showCertificate() {\n document.getElementById('certificate').classList.remove('hidden');\n document.getElementById('finalScore').textContent = gameState.totalPoints;\n \n let achievement = \"Penjelajah Pemula\";\n if (gameState.totalPoints >= 500) achievement = \"Penjelajah Hebat!\";\n if (gameState.totalPoints >= 800) achievement = \"Master Sains & Sosial!\";\n if (gameState.totalPoints >= 1000) achievement = \"Genius Muda!\";\n \n document.getElementById('achievement').textContent = achievement;\n }\n\n function addPoints(points) {\n gameState.totalPoints += points;\n updateUI();\n }\n\n function updateProgress() {\n \/\/ Session 1 progress\n const session1Progress = Math.min(100, (gameState.experimentsCompleted * 30 + gameState.quizzesAnswered * 20));\n document.getElementById('session1Progress').style.width = session1Progress + '%';\n \n \/\/ Session 2 progress \n const session2Progress = Math.min(100, (gameState.regionsExplored * 25));\n document.getElementById('session2Progress').style.width = session2Progress + '%';\n \n \/\/ Unlock sessions based on progress\n if (session1Progress >= 60) {\n document.getElementById('session2Btn').classList.remove('bg-gray-300', 'text-gray-600');\n document.getElementById('session2Btn').classList.add('hover:bg-green-600');\n }\n \n if (session2Progress >= 80) {\n document.getElementById('session3Btn').classList.remove('bg-gray-300', 'text-gray-600');\n document.getElementById('session3Btn').classList.add('hover:bg-purple-600');\n }\n }\n\n function updateUI() {\n document.getElementById('totalPoints').textContent = gameState.totalPoints;\n document.getElementById('currentSession').textContent = gameState.currentSession;\n }\n\n \/\/ Initialize the game\n updateUI();\n <\/script>\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'966b2e7e95ffff96',t:'MTc1Mzc3NzA2NS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Petualangan Sains & Sosial \ud83c\udf1f Petualangan Sains & Sosial \u2b50 Poin: 0 \u23f0 Sesi: 1\/3 \ud83d\ude80 Selamat Datang, Penjelajah Muda! Bersiaplah untuk petualangan seru mempelajari IPA dan IPS selama 3 sesi pembelajaran! \ud83d\udd2c Sesi 1: Lab Sains Eksperimen virtual & kuis IPA \ud83c\udf0d Sesi 2: Jelajah Dunia Geografi & budaya nusantara \ud83c\udfc6 Sesi 3: Tantangan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8538","post","type-post","status-publish","format-standard","hentry","category-informasi"],"_links":{"self":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts\/8538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8538"}],"version-history":[{"count":3,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts\/8538\/revisions"}],"predecessor-version":[{"id":8542,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts\/8538\/revisions\/8542"}],"wp:attachment":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8538,"date":"2025-07-29T15:19:23","date_gmt":"2025-07-29T08:19:23","guid":{"rendered":"https:\/\/smkmuh1cilacap.com\/?p=8538"},"modified":"2025-07-29T15:20:35","modified_gmt":"2025-07-29T08:20:35","slug":"game-pipas","status":"publish","type":"post","link":"https:\/\/smkmuh1cilacap.com\/?p=8538","title":{"rendered":"game pipas"},"content":{"rendered":"\n\n\n\n \n \n Petualangan Sains & Sosial<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @keyframes bounce {\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\n 40% { transform: translateY(-10px); }\n 60% { transform: translateY(-5px); }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .bounce { animation: bounce 2s infinite; }\n .pulse { animation: pulse 2s infinite; }\n .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }\n .card-hover { transition: transform 0.3s ease; }\n .card-hover:hover { transform: translateY(-5px); }\n <\/style>\n<\/head>\n<body class=\"gradient-bg min-h-screen\">\n \n <div class=\"bg-white shadow-lg\">\n <div class=\"container mx-auto px-4 py-4\">\n <div class=\"flex justify-between items-center\">\n <h1 class=\"text-3xl font-bold text-purple-800\">\ud83c\udf1f Petualangan Sains & Sosial<\/h1>\n <div class=\"flex items-center space-x-4\">\n <div class=\"bg-yellow-400 px-4 py-2 rounded-full\">\n <span class=\"font-bold\">\u2b50 Poin: <span id=\"totalPoints\">0<\/span><\/span>\n <\/div>\n <div class=\"bg-blue-400 px-4 py-2 rounded-full text-white\">\n <span class=\"font-bold\">\u23f0 Sesi: <span id=\"currentSession\">1<\/span>\/3<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"container mx-auto px-4 py-8\">\n \n <div id=\"welcomeScreen\" class=\"text-center\">\n <div class=\"bg-white rounded-3xl shadow-2xl p-8 max-w-4xl mx-auto\">\n <div class=\"bounce text-6xl mb-4\">\ud83d\ude80<\/div>\n <h2 class=\"text-4xl font-bold text-purple-800 mb-4\">Selamat Datang, Penjelajah Muda!<\/h2>\n <p class=\"text-xl text-gray-600 mb-8\">Bersiaplah untuk petualangan seru mempelajari IPA dan IPS selama 3 sesi pembelajaran!<\/p>\n \n <div class=\"grid md:grid-cols-3 gap-6 mb-8\">\n <div class=\"bg-gradient-to-br from-blue-400 to-blue-600 text-white p-6 rounded-2xl\">\n <div class=\"text-3xl mb-2\">\ud83d\udd2c<\/div>\n <h3 class=\"font-bold text-lg\">Sesi 1: Lab Sains<\/h3>\n <p class=\"text-sm\">Eksperimen virtual & kuis IPA<\/p>\n <\/div>\n <div class=\"bg-gradient-to-br from-green-400 to-green-600 text-white p-6 rounded-2xl\">\n <div class=\"text-3xl mb-2\">\ud83c\udf0d<\/div>\n <h3 class=\"font-bold text-lg\">Sesi 2: Jelajah Dunia<\/h3>\n <p class=\"text-sm\">Geografi & budaya nusantara<\/p>\n <\/div>\n <div class=\"bg-gradient-to-br from-purple-400 to-purple-600 text-white p-6 rounded-2xl\">\n <div class=\"text-3xl mb-2\">\ud83c\udfc6<\/div>\n <h3 class=\"font-bold text-lg\">Sesi 3: Tantangan Final<\/h3>\n <p class=\"text-sm\">Quiz gabungan & sertifikat<\/p>\n <\/div>\n <\/div>\n \n <button onclick=\"startGame()\" class=\"bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-full text-xl font-bold hover:from-purple-600 hover:to-pink-600 transform hover:scale-105 transition-all duration-300 shadow-lg\">\n \ud83c\udfae Mulai Petualangan!\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"gameScreen\" class=\"hidden\">\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 mb-6\">\n <div class=\"flex justify-center space-x-4\">\n <button onclick=\"switchSession(1)\" id=\"session1Btn\" class=\"session-btn bg-blue-500 text-white px-6 py-3 rounded-full font-bold hover:bg-blue-600 transition-colors\">\n \ud83d\udd2c Sesi 1: Lab Sains\n <\/button>\n <button onclick=\"switchSession(2)\" id=\"session2Btn\" class=\"session-btn bg-gray-300 text-gray-600 px-6 py-3 rounded-full font-bold hover:bg-gray-400 transition-colors\">\n \ud83c\udf0d Sesi 2: Jelajah Dunia\n <\/button>\n <button onclick=\"switchSession(3)\" id=\"session3Btn\" class=\"session-btn bg-gray-300 text-gray-600 px-6 py-3 rounded-full font-bold hover:bg-gray-400 transition-colors\">\n \ud83c\udfc6 Sesi 3: Tantangan Final\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"session1\" class=\"session-content\">\n <div class=\"grid lg:grid-cols-2 gap-6\">\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 card-hover\">\n <h3 class=\"text-2xl font-bold text-blue-600 mb-4\">\ud83e\uddea Lab Eksperimen Virtual<\/h3>\n <div id=\"experiment\" class=\"text-center\">\n <div class=\"bg-blue-50 p-6 rounded-xl mb-4\">\n <div class=\"text-4xl mb-2\" id=\"experimentIcon\">\u2697\ufe0f<\/div>\n <h4 class=\"font-bold text-lg mb-2\" id=\"experimentTitle\">Reaksi Asam-Basa<\/h4>\n <p class=\"text-gray-600 mb-4\" id=\"experimentDesc\">Campurkan cuka dengan baking soda dan lihat apa yang terjadi!<\/p>\n <button onclick=\"runExperiment()\" class=\"bg-blue-500 text-white px-6 py-2 rounded-full hover:bg-blue-600 transition-colors\">\n \ud83d\udd2c Jalankan Eksperimen\n <\/button>\n <\/div>\n <div id=\"experimentResult\" class=\"hidden bg-green-50 p-4 rounded-xl\">\n <div class=\"text-3xl mb-2\">\ud83d\udca5<\/div>\n <p class=\"font-bold text-green-600\">Berhasil! Terjadi reaksi kimia yang menghasilkan gas CO2!<\/p>\n <p class=\"text-sm text-gray-600 mt-2\">+50 poin untuk eksperimen yang berhasil!<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 card-hover\">\n <h3 class=\"text-2xl font-bold text-green-600 mb-4\">\u2753 Kuis Sains Cepat<\/h3>\n <div id=\"scienceQuiz\">\n <div class=\"bg-green-50 p-4 rounded-xl mb-4\">\n <p class=\"font-bold mb-3\" id=\"scienceQuestion\">Planet mana yang paling dekat dengan Matahari?<\/p>\n <div class=\"space-y-2\">\n <button onclick=\"answerScience('A')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-green-100 transition-colors border\">\n A. Venus\n <\/button>\n <button onclick=\"answerScience('B')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-green-100 transition-colors border\">\n B. Merkurius\n <\/button>\n <button onclick=\"answerScience('C')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-green-100 transition-colors border\">\n C. Mars\n <\/button>\n <\/div>\n <\/div>\n <div id=\"scienceResult\" class=\"hidden\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 mt-6\">\n <h4 class=\"font-bold text-lg mb-3\">\ud83d\udcca Progress Sesi 1<\/h4>\n <div class=\"bg-gray-200 rounded-full h-4 mb-2\">\n <div id=\"session1Progress\" class=\"bg-blue-500 h-4 rounded-full transition-all duration-500\" style=\"width: 0%\"><\/div>\n <\/div>\n <p class=\"text-sm text-gray-600\">Selesaikan eksperimen dan kuis untuk melanjut ke sesi berikutnya!<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"session2\" class=\"session-content hidden\">\n <div class=\"grid lg:grid-cols-2 gap-6\">\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 card-hover\">\n <h3 class=\"text-2xl font-bold text-green-600 mb-4\">\ud83d\uddfa\ufe0f Jelajahi Nusantara<\/h3>\n <div class=\"bg-green-50 p-6 rounded-xl text-center\">\n <div class=\"text-6xl mb-4\">\ud83c\udfdd\ufe0f<\/div>\n <h4 class=\"font-bold text-lg mb-2\" id=\"regionName\">Pulau Jawa<\/h4>\n <p class=\"text-gray-600 mb-4\" id=\"regionInfo\">Pulau terpadat di Indonesia dengan ibu kota Jakarta<\/p>\n <div class=\"grid grid-cols-2 gap-2 mb-4\">\n <button onclick=\"exploreRegion('jawa')\" class=\"region-btn bg-green-500 text-white p-2 rounded-lg hover:bg-green-600 transition-colors\">Jawa<\/button>\n <button onclick=\"exploreRegion('sumatra')\" class=\"region-btn bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition-colors\">Sumatra<\/button>\n <button onclick=\"exploreRegion('kalimantan')\" class=\"region-btn bg-yellow-500 text-white p-2 rounded-lg hover:bg-yellow-600 transition-colors\">Kalimantan<\/button>\n <button onclick=\"exploreRegion('sulawesi')\" class=\"region-btn bg-purple-500 text-white p-2 rounded-lg hover:bg-purple-600 transition-colors\">Sulawesi<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 card-hover\">\n <h3 class=\"text-2xl font-bold text-purple-600 mb-4\">\ud83c\udfad Kuis Budaya Indonesia<\/h3>\n <div id=\"cultureQuiz\">\n <div class=\"bg-purple-50 p-4 rounded-xl mb-4\">\n <p class=\"font-bold mb-3\" id=\"cultureQuestion\">Tari tradisional dari Bali adalah?<\/p>\n <div class=\"space-y-2\">\n <button onclick=\"answerCulture('A')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-purple-100 transition-colors border\">\n A. Tari Kecak\n <\/button>\n <button onclick=\"answerCulture('B')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-purple-100 transition-colors border\">\n B. Tari Saman\n <\/button>\n <button onclick=\"answerCulture('C')\" class=\"quiz-option w-full text-left p-3 bg-white rounded-lg hover:bg-purple-100 transition-colors border\">\n C. Tari Jaipong\n <\/button>\n <\/div>\n <\/div>\n <div id=\"cultureResult\" class=\"hidden\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-lg p-6 mt-6\">\n <h4 class=\"font-bold text-lg mb-3\">\ud83d\udcca Progress Sesi 2<\/h4>\n <div class=\"bg-gray-200 rounded-full h-4 mb-2\">\n <div id=\"session2Progress\" class=\"bg-green-500 h-4 rounded-full transition-all duration-500\" style=\"width: 0%\"><\/div>\n <\/div>\n <p class=\"text-sm text-gray-600\">Jelajahi semua pulau dan jawab kuis budaya!<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"session3\" class=\"session-content hidden\">\n <div class=\"bg-white rounded-2xl shadow-lg p-8 text-center\">\n <h3 class=\"text-3xl font-bold text-purple-600 mb-6\">\ud83c\udfc6 Tantangan Final<\/h3>\n \n <div id=\"finalChallenge\">\n <div class=\"bg-gradient-to-br from-purple-100 to-pink-100 p-6 rounded-xl mb-6\">\n <div class=\"text-4xl mb-4\">\ud83e\udde0<\/div>\n <h4 class=\"font-bold text-xl mb-4\" id=\"finalQuestion\">Proses fotosintesis pada tumbuhan menghasilkan?<\/h4>\n <div class=\"grid md:grid-cols-2 gap-3\">\n <button onclick=\"answerFinal('A')\" class=\"final-option p-4 bg-white rounded-lg hover:bg-purple-100 transition-colors border-2 border-transparent hover:border-purple-300\">\n A. Oksigen dan Glukosa\n <\/button>\n <button onclick=\"answerFinal('B')\" class=\"final-option p-4 bg-white rounded-lg hover:bg-purple-100 transition-colors border-2 border-transparent hover:border-purple-300\">\n B. Karbon Dioksida\n <\/button>\n <button onclick=\"answerFinal('C')\" class=\"final-option p-4 bg-white rounded-lg hover:bg-purple-100 transition-colors border-2 border-transparent hover:border-purple-300\">\n C. Nitrogen\n <\/button>\n <button onclick=\"answerFinal('D')\" class=\"final-option p-4 bg-white rounded-lg hover:bg-purple-100 transition-colors border-2 border-transparent hover:border-purple-300\">\n D. Hidrogen\n <\/button>\n <\/div>\n <\/div>\n <div id=\"finalResult\" class=\"hidden\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"certificate\" class=\"hidden bg-gradient-to-br from-yellow-100 to-orange-100 rounded-2xl shadow-lg p-8 mt-6 text-center border-4 border-yellow-400\">\n <div class=\"text-6xl mb-4\">\ud83c\udfc5<\/div>\n <h3 class=\"text-3xl font-bold text-yellow-800 mb-2\">Selamat!<\/h3>\n <h4 class=\"text-xl font-bold text-yellow-700 mb-4\">Sertifikat Penjelajah Sains & Sosial<\/h4>\n <p class=\"text-lg text-yellow-600 mb-4\">Kamu telah menyelesaikan semua tantangan dengan luar biasa!<\/p>\n <div class=\"bg-white p-4 rounded-xl inline-block\">\n <p class=\"font-bold text-2xl text-purple-600\">Total Poin: <span id=\"finalScore\">0<\/span><\/p>\n <p class=\"text-gray-600\">Tingkat: <span id=\"achievement\">Penjelajah Hebat!<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let gameState = {\n currentSession: 1,\n totalPoints: 0,\n session1Complete: false,\n session2Complete: false,\n session3Complete: false,\n experimentsCompleted: 0,\n regionsExplored: 0,\n quizzesAnswered: 0\n };\n\n const scienceQuestions = [\n {\n question: \"Planet mana yang paling dekat dengan Matahari?\",\n options: [\"A. Venus\", \"B. Merkurius\", \"C. Mars\"],\n correct: \"B\",\n explanation: \"Merkurius adalah planet terdekat dengan Matahari!\"\n },\n {\n question: \"Apa yang terjadi saat air dipanaskan?\",\n options: [\"A. Membeku\", \"B. Menguap\", \"C. Mengkristal\"],\n correct: \"B\",\n explanation: \"Air berubah menjadi uap saat dipanaskan!\"\n },\n {\n question: \"Organ manusia yang berfungsi memompa darah adalah?\",\n options: [\"A. Paru-paru\", \"B. Jantung\", \"C. Ginjal\"],\n correct: \"B\",\n explanation: \"Jantung memompa darah ke seluruh tubuh!\"\n }\n ];\n\n const cultureQuestions = [\n {\n question: \"Tari tradisional dari Bali adalah?\",\n options: [\"A. Tari Kecak\", \"B. Tari Saman\", \"C. Tari Jaipong\"],\n correct: \"A\",\n explanation: \"Tari Kecak adalah tari tradisional khas Bali!\"\n },\n {\n question: \"Rumah adat Joglo berasal dari daerah?\",\n options: [\"A. Sumatra\", \"B. Jawa\", \"C. Sulawesi\"],\n correct: \"B\",\n explanation: \"Rumah Joglo adalah rumah adat dari Jawa!\"\n },\n {\n question: \"Alat musik tradisional Angklung berasal dari?\",\n options: [\"A. Jawa Barat\", \"B. Jawa Timur\", \"C. Bali\"],\n correct: \"A\",\n explanation: \"Angklung adalah alat musik tradisional dari Jawa Barat!\"\n }\n ];\n\n const finalQuestions = [\n {\n question: \"Proses fotosintesis pada tumbuhan menghasilkan?\",\n options: [\"A. Oksigen dan Glukosa\", \"B. Karbon Dioksida\", \"C. Nitrogen\", \"D. Hidrogen\"],\n correct: \"A\",\n explanation: \"Fotosintesis menghasilkan oksigen dan glukosa!\"\n },\n {\n question: \"Ibu kota Indonesia sebelum Jakarta adalah?\",\n options: [\"A. Bandung\", \"B. Yogyakarta\", \"C. Surabaya\", \"D. Bogor\"],\n correct: \"B\",\n explanation: \"Yogyakarta pernah menjadi ibu kota Indonesia!\"\n }\n ];\n\n const regions = {\n jawa: {\n name: \"Pulau Jawa\",\n info: \"Pulau terpadat di Indonesia dengan ibu kota Jakarta\",\n icon: \"\ud83c\udfd9\ufe0f\"\n },\n sumatra: {\n name: \"Pulau Sumatra\",\n info: \"Pulau terbesar keenam di dunia, kaya akan sumber daya alam\",\n icon: \"\ud83c\udf34\"\n },\n kalimantan: {\n name: \"Pulau Kalimantan\",\n info: \"Pulau terbesar ketiga di dunia, terkenal dengan hutan hujannya\",\n icon: \"\ud83c\udf33\"\n },\n sulawesi: {\n name: \"Pulau Sulawesi\",\n info: \"Pulau dengan bentuk unik seperti anggrek, kaya budaya\",\n icon: \"\ud83e\udd8b\"\n }\n };\n\n let currentScienceQ = 0;\n let currentCultureQ = 0;\n let currentFinalQ = 0;\n\n function startGame() {\n document.getElementById('welcomeScreen').classList.add('hidden');\n document.getElementById('gameScreen').classList.remove('hidden');\n updateUI();\n }\n\n function switchSession(sessionNum) {\n \/\/ Update session buttons\n document.querySelectorAll('.session-btn').forEach(btn => {\n btn.classList.remove('bg-blue-500', 'bg-green-500', 'bg-purple-500');\n btn.classList.add('bg-gray-300', 'text-gray-600');\n });\n\n \/\/ Hide all sessions\n document.querySelectorAll('.session-content').forEach(content => {\n content.classList.add('hidden');\n });\n\n \/\/ Show selected session\n document.getElementById(`session${sessionNum}`).classList.remove('hidden');\n \n \/\/ Update button color\n const activeBtn = document.getElementById(`session${sessionNum}Btn`);\n activeBtn.classList.remove('bg-gray-300', 'text-gray-600');\n \n if (sessionNum === 1) {\n activeBtn.classList.add('bg-blue-500', 'text-white');\n } else if (sessionNum === 2) {\n activeBtn.classList.add('bg-green-500', 'text-white');\n } else {\n activeBtn.classList.add('bg-purple-500', 'text-white');\n }\n\n gameState.currentSession = sessionNum;\n updateUI();\n }\n\n function runExperiment() {\n document.getElementById('experimentResult').classList.remove('hidden');\n gameState.experimentsCompleted++;\n addPoints(50);\n updateProgress();\n \n \/\/ Change experiment after completion\n setTimeout(() => {\n const experiments = [\n {\n icon: \"\ud83c\udf31\",\n title: \"Pertumbuhan Tanaman\",\n desc: \"Amati bagaimana tanaman tumbuh dengan cahaya dan air!\"\n },\n {\n icon: \"\ud83d\udd25\",\n title: \"Reaksi Pembakaran\",\n desc: \"Lihat bagaimana oksigen membantu proses pembakaran!\"\n }\n ];\n \n const exp = experiments[gameState.experimentsCompleted % experiments.length];\n document.getElementById('experimentIcon').textContent = exp.icon;\n document.getElementById('experimentTitle').textContent = exp.title;\n document.getElementById('experimentDesc').textContent = exp.desc;\n document.getElementById('experimentResult').classList.add('hidden');\n }, 3000);\n }\n\n function answerScience(answer) {\n const question = scienceQuestions[currentScienceQ];\n const resultDiv = document.getElementById('scienceResult');\n \n if (answer === question.correct) {\n resultDiv.innerHTML = `\n <div class=\"bg-green-100 p-4 rounded-xl\">\n <div class=\"text-2xl mb-2\">\u2705<\/div>\n <p class=\"font-bold text-green-600\">Benar!<\/p>\n <p class=\"text-sm text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-sm text-green-600 mt-2\">+30 poin!<\/p>\n <\/div>\n `;\n addPoints(30);\n } else {\n resultDiv.innerHTML = `\n <div class=\"bg-red-100 p-4 rounded-xl\">\n <div class=\"text-2xl mb-2\">\u274c<\/div>\n <p class=\"font-bold text-red-600\">Kurang tepat!<\/p>\n <p class=\"text-sm text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-sm text-red-600 mt-2\">+10 poin untuk usaha!<\/p>\n <\/div>\n `;\n addPoints(10);\n }\n \n resultDiv.classList.remove('hidden');\n gameState.quizzesAnswered++;\n updateProgress();\n \n \/\/ Next question after 3 seconds\n setTimeout(() => {\n currentScienceQ = (currentScienceQ + 1) % scienceQuestions.length;\n const nextQ = scienceQuestions[currentScienceQ];\n document.getElementById('scienceQuestion').textContent = nextQ.question;\n \n const options = document.querySelectorAll('#scienceQuiz .quiz-option');\n options.forEach((option, index) => {\n option.textContent = nextQ.options[index];\n });\n \n resultDiv.classList.add('hidden');\n }, 3000);\n }\n\n function exploreRegion(regionKey) {\n const region = regions[regionKey];\n document.getElementById('regionName').textContent = region.name;\n document.getElementById('regionInfo').textContent = region.info;\n \n \/\/ Add visual feedback\n const regionBtns = document.querySelectorAll('.region-btn');\n regionBtns.forEach(btn => btn.classList.remove('ring-4', 'ring-yellow-400'));\n event.target.classList.add('ring-4', 'ring-yellow-400');\n \n gameState.regionsExplored++;\n addPoints(25);\n updateProgress();\n }\n\n function answerCulture(answer) {\n const question = cultureQuestions[currentCultureQ];\n const resultDiv = document.getElementById('cultureResult');\n \n if (answer === question.correct) {\n resultDiv.innerHTML = `\n <div class=\"bg-green-100 p-4 rounded-xl\">\n <div class=\"text-2xl mb-2\">\u2705<\/div>\n <p class=\"font-bold text-green-600\">Hebat!<\/p>\n <p class=\"text-sm text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-sm text-green-600 mt-2\">+40 poin!<\/p>\n <\/div>\n `;\n addPoints(40);\n } else {\n resultDiv.innerHTML = `\n <div class=\"bg-red-100 p-4 rounded-xl\">\n <div class=\"text-2xl mb-2\">\u274c<\/div>\n <p class=\"font-bold text-red-600\">Belum tepat!<\/p>\n <p class=\"text-sm text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-sm text-red-600 mt-2\">+15 poin untuk usaha!<\/p>\n <\/div>\n `;\n addPoints(15);\n }\n \n resultDiv.classList.remove('hidden');\n updateProgress();\n \n \/\/ Next question after 3 seconds\n setTimeout(() => {\n currentCultureQ = (currentCultureQ + 1) % cultureQuestions.length;\n const nextQ = cultureQuestions[currentCultureQ];\n document.getElementById('cultureQuestion').textContent = nextQ.question;\n \n const options = document.querySelectorAll('#cultureQuiz .quiz-option');\n options.forEach((option, index) => {\n option.textContent = nextQ.options[index];\n });\n \n resultDiv.classList.add('hidden');\n }, 3000);\n }\n\n function answerFinal(answer) {\n const question = finalQuestions[currentFinalQ];\n const resultDiv = document.getElementById('finalResult');\n \n if (answer === question.correct) {\n resultDiv.innerHTML = `\n <div class=\"bg-green-100 p-6 rounded-xl\">\n <div class=\"text-4xl mb-2\">\ud83c\udf89<\/div>\n <p class=\"font-bold text-green-600 text-xl\">Luar Biasa!<\/p>\n <p class=\"text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-green-600 font-bold mt-2\">+100 poin!<\/p>\n <\/div>\n `;\n addPoints(100);\n } else {\n resultDiv.innerHTML = `\n <div class=\"bg-yellow-100 p-6 rounded-xl\">\n <div class=\"text-4xl mb-2\">\ud83d\udcaa<\/div>\n <p class=\"font-bold text-yellow-600 text-xl\">Tetap Semangat!<\/p>\n <p class=\"text-gray-600\">${question.explanation}<\/p>\n <p class=\"text-yellow-600 font-bold mt-2\">+50 poin untuk usaha!<\/p>\n <\/div>\n `;\n addPoints(50);\n }\n \n resultDiv.classList.remove('hidden');\n \n \/\/ Show certificate after 2 seconds\n setTimeout(() => {\n showCertificate();\n }, 2000);\n }\n\n function showCertificate() {\n document.getElementById('certificate').classList.remove('hidden');\n document.getElementById('finalScore').textContent = gameState.totalPoints;\n \n let achievement = \"Penjelajah Pemula\";\n if (gameState.totalPoints >= 500) achievement = \"Penjelajah Hebat!\";\n if (gameState.totalPoints >= 800) achievement = \"Master Sains & Sosial!\";\n if (gameState.totalPoints >= 1000) achievement = \"Genius Muda!\";\n \n document.getElementById('achievement').textContent = achievement;\n }\n\n function addPoints(points) {\n gameState.totalPoints += points;\n updateUI();\n }\n\n function updateProgress() {\n \/\/ Session 1 progress\n const session1Progress = Math.min(100, (gameState.experimentsCompleted * 30 + gameState.quizzesAnswered * 20));\n document.getElementById('session1Progress').style.width = session1Progress + '%';\n \n \/\/ Session 2 progress \n const session2Progress = Math.min(100, (gameState.regionsExplored * 25));\n document.getElementById('session2Progress').style.width = session2Progress + '%';\n \n \/\/ Unlock sessions based on progress\n if (session1Progress >= 60) {\n document.getElementById('session2Btn').classList.remove('bg-gray-300', 'text-gray-600');\n document.getElementById('session2Btn').classList.add('hover:bg-green-600');\n }\n \n if (session2Progress >= 80) {\n document.getElementById('session3Btn').classList.remove('bg-gray-300', 'text-gray-600');\n document.getElementById('session3Btn').classList.add('hover:bg-purple-600');\n }\n }\n\n function updateUI() {\n document.getElementById('totalPoints').textContent = gameState.totalPoints;\n document.getElementById('currentSession').textContent = gameState.currentSession;\n }\n\n \/\/ Initialize the game\n updateUI();\n <\/script>\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'966b2e7e95ffff96',t:'MTc1Mzc3NzA2NS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Petualangan Sains & Sosial \ud83c\udf1f Petualangan Sains & Sosial \u2b50 Poin: 0 \u23f0 Sesi: 1\/3 \ud83d\ude80 Selamat Datang, Penjelajah Muda! Bersiaplah untuk petualangan seru mempelajari IPA dan IPS selama 3 sesi pembelajaran! \ud83d\udd2c Sesi 1: Lab Sains Eksperimen virtual & kuis IPA \ud83c\udf0d Sesi 2: Jelajah Dunia Geografi & budaya nusantara \ud83c\udfc6 Sesi 3: Tantangan […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8538","post","type-post","status-publish","format-standard","hentry","category-informasi"],"_links":{"self":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts\/8538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8538"}],"version-history":[{"count":3,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts\/8538\/revisions"}],"predecessor-version":[{"id":8542,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=\/wp\/v2\/posts\/8538\/revisions\/8542"}],"wp:attachment":[{"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smkmuh1cilacap.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}