Ruang Belajar Siswa - SMPN 72 MALUKU TENGAH

Pilih Berdasarkan Kelas:

Pilih Berdasarkan Mata Pelajaran:

Semua Mapel Bahasa Indonesia Games IPA Matematika MPLS PPKN SSK

📂 Pilih Materi Pelajaran Belajar

Kelas 8 Matematika

Statistika : Misi Puncak Statistika & Keputusan Data

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matematika Kelas 8: Misi Puncak Statistika & Keputusan Data 📊</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <style> body { font-family: 'Nunito', sans-serif; background-color: #fafaf9; background-image: radial-gradient(#e7e5e4 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #d97706 !important; color: white !important; border-bottom-color: #b45309 !important; pointer-events: none; } .btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; } .math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; } .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } .ifp-col { border-right: 3px dashed #cbd5e1; } .ifp-col:last-child { border-right: none; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-amber-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-amber-600 p-2 rounded-xl shadow-sm text-white"> <i data-lucide="award" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-amber-800 uppercase tracking-widest">Matematika Kelas 8 - Misi Puncak Statistika</span> <span id="progress-text" class="text-xs font-black text-white bg-amber-600 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-yellow-400 via-amber-500 to-orange-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-4xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-900 text-sm font-black uppercase tracking-widest shadow-sm"> Fase D - Kurikulum Merdeka (Misi Puncak) </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Analisis, Prediksi & <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600">Pengambilan Keputusan</span> 🎯 </h1> <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=800&q=80" alt="Keputusan Bisnis" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80'"> <div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md text-left mt-6"> <h3 class="font-black text-xl text-amber-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-amber-500"></i> Tujuan Pembelajaran:</h3> <ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4"> <li>Peserta didik dapat <span class="text-amber-600">memecahkan masalah kontekstual</span> yang berkaitan dengan ukuran pemusatan dan penyebaran data.</li> <li>Peserta didik dapat <span class="text-amber-600">memprediksi dampak perubahan data</span> terhadap ukuran pemusatan dan penyebaran data.</li> <li>Peserta didik dapat <span class="text-amber-600">membuat keputusan yang tepat</span> berdasarkan hasil analisis data dalam konteks kehidupan sehari-hari.</li> </ol> </div> <p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menjadi analis data handal? Let's go! 👇</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Kasus Nyata 👁️‍🗨️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Perhatikan situasi dilema manajer toko sepatu berikut!</p> </div> <div class="bg-white p-8 rounded-3xl border-2 border-amber-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center"> <div class="flex-1 space-y-4"> <div class="bg-amber-50 p-6 rounded-2xl border-2 border-amber-200 space-y-3"> <p class="text-lg font-bold text-slate-700">🔍 <b>Kasus Toko Sepatu:</b></p> <p class="text-slate-600 font-bold text-sm"> Sebuah toko ingin memesan stok sepatu baru ukuran remaja. Jika data penjualan bulan lalu menunjukkan angka ukuran sepatu yang paling banyak dicari adalah <b>ukuran 39</b>, manakah ukuran pemusatan yang harus dipakai pemilik toko untuk memesan stok terbanyak: Mean, Median, atau Modus? </p> </div> <p class="text-xl font-black text-amber-700 text-center">Jawabannya adalah <b>Modus</b>! Karena pemilik toko wajib menyediakan ukuran sepatu yang paling sering dibeli pembeli.</p> </div> <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-lg border-4 border-white" alt="Retail Sepatu" onerror="this.src='https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=500&q=80'"> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="inline-block px-5 py-2 rounded-2xl bg-orange-100 text-orange-800 text-sm font-black uppercase tracking-widest shadow-sm"> Pertanyaan Pemantik 🤔 </div> <h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight"> "Jika data gaji karyawan di sebuah perusahaan kecil tiba-tiba dimasukkan gaji sang Direktur Utama yang nilainya 10 kali lipat lebih besar, ukuran pemusatan mana yang akan langsung rusak atau melonjak naik secara tidak wajar?" </h2> <div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm max-w-xl text-left mt-2"> <p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p> <p class="text-slate-700 font-bold mt-1">Mari kita selidiki sensitivitas Mean vs Median terhadap data ekstrem (outlier)!</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Pengambilan Keputusan Berbasis Analisis Data</p> </div> <div class="grid md:grid-cols-3 gap-6 mt-4"> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">🗳️</span> <h4 class="font-black text-xl text-indigo-800">Polhukam & Survei</h4> <p class="text-slate-600 font-bold text-sm">Lembaga survei pemilu mengambil sampel data untuk memprediksi hasil akhir pemungutan suara secara akurat.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">📦</span> <h4 class="font-black text-xl text-indigo-800">Manajemen Logistik</h4> <p class="text-slate-600 font-bold text-sm">Perusahaan ekspedisi menganalisis simpangan dan jangkauan waktu pengiriman paket agar tepat waktu.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">🎓</span> <h4 class="font-black text-xl text-indigo-800">Kebijakan Sekolah</h4> <p class="text-slate-600 font-bold text-sm">Kepala sekolah mengevaluasi penyebaran nilai ujian nasional untuk memutuskan program bimbingan belajar tambahan.</p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Strategi Pengambilan Keputusan 🎯</h2> </div> <div class="bg-white p-8 rounded-3xl border-2 border-amber-200 shadow-md mt-2 space-y-5"> <div class="grid md:grid-cols-3 gap-4"> <div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-200"> <h4 class="font-black text-amber-900 mb-1">Kapan Pakai Mean?</h4> <p class="text-xs font-bold text-slate-700">Cocok untuk data homogen yang tidak memiliki nilai ekstrem (outlier) yang terlalu jauh.</p> </div> <div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-200"> <h4 class="font-black text-amber-900 mb-1">Kapan Pakai Median?</h4> <p class="text-xs font-bold text-slate-700">Cocok jika data memiliki nilai ekstrem yang sangat tinggi atau rendah (misal: data gaji / pendapatan).</p> </div> <div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-200"> <h4 class="font-black text-amber-900 mb-1">Kapan Pakai Modus?</h4> <p class="text-xs font-bold text-slate-700">Cocok untuk menentukan preferensi massal, ukuran pakaian, atau tren barang terlaris.</p> </div> </div> <div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2"> <h4 class="font-black text-slate-800">Contoh Kasus & Latihan Keputusan:</h4> <p class="text-slate-700 font-bold text-sm">Suatu kompleks perumahan berisi 9 keluarga berpenghasilan 4 juta rupiah, dan 1 orang pengusaha kaya berpenghasilan 100 juta rupiah. Ukuran pemusatan mana yang paling adil mewakili kesejahteraan warga di sana?</p> <div class="flex gap-3"> <button onclick="alert('Kurang tepat, Mean akan melonjak tinggi karena gaji pengusaha kaya (bias).')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">Mean (Rata-rata)</button> <button onclick="alert('Hebat! Benar, Median sangat stabil dan tidak terpengaruh oleh nilai ekstrem pengusaha kaya.')" class="px-4 py-2 bg-amber-600 text-white font-bold rounded-xl">Median (Tengah) ✅</button> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Dampak Perubahan Skala Menyeluruh 📈</h2> </div> <div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-2 space-y-5"> <p class="text-lg font-bold text-slate-700">Jika setiap nilai data pada suatu kelompok <b>dikalikan $k$ lalu ditambah $m$</b>:</p> <div class="grid md:grid-cols-2 gap-6"> <div class="bg-orange-50 p-5 rounded-2xl border-2 border-orange-200 space-y-3"> <h4 class="font-black text-orange-900 text-lg">1. Ukuran Pemusatan (Mean, Median, Modus)</h4> <p class="text-slate-700 font-bold text-sm">Ikut <b>berubah</b> terkena kedua operasi tersebut ($k$ dan $m$).</p> <p class="math-box text-xs bg-white p-2 rounded border border-orange-200 text-orange-800">$\text{Baru} = (\text{Lama} \times k) + m$</p> <p class="text-xs font-bold text-slate-600"><b>Contoh:</b> Jika rata-rata awal $10$, lalu tiap data dikali $2$ dan ditambah $3$, maka rata-rata baru $= (10 \times 2) + 3 = 23$.</p> </div> <div class="bg-amber-50 p-5 rounded-2xl border-2 border-amber-200 space-y-3"> <h4 class="font-black text-amber-900 text-lg">2. Ukuran Penyebaran (Jangkauan, Simpangan)</h4> <p class="text-slate-700 font-bold text-sm">Hanya dipengaruhi oleh <b>perkalian ($k$) saja</b>, dan <b>tidak terpengaruh</b> oleh penjumlahan ($m$).</p> <p class="math-box text-xs bg-white p-2 rounded border border-amber-200 text-amber-800">$\text{Baru} = \text{Lama} \times |k|$</p> <p class="text-xs font-bold text-slate-600"><b>Contoh:</b> Jika jangkauan awal $8$, lalu tiap data dikali $-2$ dan ditambah $5$, jangkauan baru $= 8 \times |-2| = 16$ (penambahan $+5$ diabaikan).</p> </div> </div> <div class="bg-slate-50 p-3 rounded-2xl border-2 border-slate-200 text-center font-bold text-slate-700 text-xs"> 💡 <i>Catatan: Ukuran penyebaran tidak berubah saat ditambah $m$ karena jika seluruh titik data digeser bersamaan, jarak antar data (rentangnya) tidak berubah! Gunakan nilai mutlak ($|k|$) karena sebaran tidak pernah negatif.</i> </div> </div> </div>  <div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]"> <div class="text-center"> <h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2> <p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab masing-masing 5 soal pemecahan masalah & keputusan data secara serentak.</p> </div>  <div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">  <div class="bg-white p-6 rounded-[2rem] border-4 border-amber-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-amber-600 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🏎️ KELOMPOK 1</span> <span id="ifp-score-1" class="bg-amber-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center"> <p id="ifp-q-1" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-1" class="space-y-2"></div> <div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-orange-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-orange-600 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🚓 KELOMPOK 2</span> <span id="ifp-score-2" class="bg-orange-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-orange-50 p-4 rounded-2xl border-2 border-orange-100 text-center"> <p id="ifp-q-2" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-2" class="space-y-2"></div> <div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-yellow-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-yellow-600 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🚙 KELOMPOK 3</span> <span id="ifp-score-3" class="bg-yellow-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-yellow-50 p-4 rounded-2xl border-2 border-yellow-100 text-center"> <p id="ifp-q-3" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-3" class="space-y-2"></div> <div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> </div> </div>  <div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl"> <div class="text-9xl mb-4 animate-bounce">👑</div> <h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2> <button onclick="resetIFPGame()" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#92400e] active:shadow-none active:translate-y-2 transition"> Mainkan Lagi 🔄 </button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div id="evaluasi-section" class="w-full text-center"> <h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi Puncak</h2> <p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal mandiri ini untuk menguji kemampuan analisis akhirmu.</p> <div class="bg-white p-8 rounded-[2rem] border-4 border-amber-200 shadow-md text-left"> <div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4"> <span class="font-black text-amber-700 bg-amber-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span> </div> <p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p> <div id="eval-options" class="space-y-3"></div> <div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div> </div> </div>  <div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center"> <div class="text-7xl mb-4 animate-bounce">🥇</div> <h2 class="text-4xl font-black text-amber-900 mb-2">Misi Puncak Selesai!</h2> <p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p> <div class="bg-white border-4 border-amber-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden"> <div class="absolute top-0 right-0 w-32 h-32 bg-amber-100 rounded-bl-full -z-10"></div> <p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label> <input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-amber-500 bg-slate-50"> </div> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label> <select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-amber-500"> <option value="100">100% - Sangat Paham!</option> <option value="75">75% - Paham Sebagian Besar</option> <option value="50">50% - Butuh Latihan Lagi</option> <option value="25">25% - Masih Bingung</option> </select> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-amber-500 to-orange-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10"> Kirim Nilai ke Guru 🚀 </button> </div> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2> <p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah menyelesaikan Misi Puncak Statistika hari ini?</p> </div> <div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl"> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center"> <div class="text-6xl mb-2">😎</div> <h3 class="font-black text-xl text-slate-700">Gampang!</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center"> <div class="text-6xl mb-2">🤔</div> <h3 class="font-black text-xl text-slate-700">Lumayan</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center"> <div class="text-6xl mb-2">🤯</div> <h3 class="font-black text-xl text-slate-700">Susah Banget</h3> </button> </div> <div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-700 mb-2">Tuliskan kesan atau bagian paling menantang dari Misi Puncak ini:</label> <textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-amber-50 border-2 border-amber-200 focus:border-amber-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-amber-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-amber-700 shadow-[0_4px_0px_#b45309]"> <span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.classList.add('hidden'); } else { nextBtn.disabled = false; nextBtn.classList.remove('hidden'); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); if (window.MathJax) { MathJax.typesetPromise(); } } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // ========================================== // MULTI-USER IFP GAME (3 Kelompok, @5 Soal) // ========================================== let ifpProgress = { 1: 0, 2: 0, 3: 0 }; const TOTAL_IFP_QUESTIONS = 5; const multiUserBank = [ { q: "Jika rata-rata \$4\$ data adalah \$10\$, lalu masuk \$1\$ data bernilai \$15\$, rata-rata baru adalah...", opts: ["\$11\$", "\$12\$", "\$13\$"], ans: 0 }, { q: "Toko sepatu ingin stok ukuran terbanyak. Ukuran pemusatan yang dipakai adalah...", opts: ["Mean", "Median", "Modus"], ans: 2 }, { q: "Jika seluruh nilai ulangan ditambah \$10\$, maka jangkauan data akan...", opts: ["Bertambah 10", "Tetap", "Berkurang 10"], ans: 1 }, { q: "Untuk data gaji karyawan yang jomplang akibat gaji direktur, ukuran pemusatan terbaik adalah...", opts: ["Median", "Mean", "Jumlah"], ans: 0 }, { q: "Jika rata-rata data \$20\$ dikali \$2\$, maka nilai rata-rata baru menjadi...", opts: ["\$20\$", "\$22\$", "\$40\$"], ans: 2 }, { q: "Jika jangkauan data awal adalah \$15\$, lalu setiap nilai dikali \$2\$, jangkauan baru adalah...", opts: ["\$15\$", "\$30\$", "\$17\$"], ans: 1 }, { q: "Manakah ukuran yang paling peka terhadap nilai ekstrem (pencilan)?", opts: ["Mean", "Median", "Modus"], ans: 0 }, { q: "Sebuah keputusan tepat dalam analisis data dibuat berdasarkan...", opts: ["Perkiraan saja", "Hasil analisis fakta data", "Kata orang"], ans: 1 } ]; function initIFPQuestion(group) { document.getElementById(`ifp-feedback-${group}`).classList.add('hidden'); if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) { document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`; document.getElementById(`ifp-opts-${group}`).innerHTML = ""; checkWinnerIFP(group); return; } document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`; let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)]; document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q; let optsContainer = document.getElementById(`ifp-opts-${group}`); optsContainer.innerHTML = ""; randQ.opts.forEach((opt, idx) => { let btn = document.createElement('button'); btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn); optsContainer.appendChild(btn); }); if (window.MathJax) MathJax.typesetPromise(); } let winnerDeclared = false; function checkIFPAnswer(group, selected, correctIdx, btn) { let optsContainer = document.getElementById(`ifp-opts-${group}`); let btns = optsContainer.querySelectorAll('button'); btns.forEach(b => b.disabled = true); let fb = document.getElementById(`ifp-feedback-${group}`); fb.classList.remove('hidden'); if(selected === correctIdx) { btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "✅ Benar! Lanjut..."; ifpProgress[group]++; setTimeout(() => { initIFPQuestion(group); }, 800); } else { btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700"; btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block"; fb.innerHTML = "❌ Salah! Coba lagi."; setTimeout(() => { initIFPQuestion(group); }, 1200); } } function checkWinnerIFP(group) { if(!winnerDeclared) { winnerDeclared = true; setTimeout(() => { document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`; document.getElementById('ifp-winner-modal').classList.remove('hidden'); document.getElementById('ifp-winner-modal').classList.add('flex'); }, 300); } } function resetIFPGame() { ifpProgress = { 1: 0, 2: 0, 3: 0 }; winnerDeclared = false; document.getElementById('ifp-winner-modal').classList.add('hidden'); document.getElementById('ifp-winner-modal').classList.remove('flex'); for(let i=1; i<=3; i++) { initIFPQuestion(i); } } for(let i=1; i<=3; i++) { initIFPQuestion(i); } // Refleksi function pilihRefleksi(btn) { const btns = document.querySelectorAll('.refleksi-btn'); btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); }); btn.classList.remove('border-slate-200'); if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50'); else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50'); else btn.classList.add('border-red-400', 'bg-red-50'); } // Evaluasi Individu const evaluasiBank = [ { q: "Pemilik toko pakaian ingin memesan ukuran baju yang paling banyak dibeli pembeli untuk stok utama. Ukuran pemusatan data yang paling tepat digunakan adalah...", options: ["Mean", "Median", "Modus", "Jangkauan"], a: 2, exp: "Modus sangat tepat digunakan untuk mengetahui frekuensi terbanyak (item yang paling sering diminati/terlaris)." }, { q: "Jika rata-rata \$5\$ orang siswa adalah \$70\$, kemudian bergabung \$1\$ siswa baru dengan nilai \$82\$, berapakah rata-rata nilai gabungan mereka sekarang?", options: ["\$72\$", "\$74\$", "\$76\$", "\$78\$"], a: 0, exp: "Total nilai lama \$= 5 \\times 70 = 350\$. Total nilai baru \$= 350 + 82 = 432\$. Banyak siswa \$= 6\$. Rata-rata \$= \\frac{432}{6} = 72\$." }, { q: "Manakah ukuran pemusatan data yang paling sensitif (mudah berubah drastis) apabila terdapat satu data ekstrem yang sangat besar?", options: ["Modus", "Median", "Mean (Rata-rata)", "Simpangan kuartil"], a: 2, exp: "Mean sangat dipengaruhi oleh nilai ekstrem karena melibatkan proses penjumlahan seluruh nilai data." }, { q: "Jika seluruh data dalam suatu penelitian dikalikan \$4\$ dan kemudian dikurangi \$5\$, apa dampak perubahan tersebut terhadap nilai jangkauan data?", options: ["Jangkauan dikali 4 lalu dikurangi 5", "Jangkauan hanya dikali 4 saja (tanpa dipengaruhi pengurangan)", "Jangkauan bertambah 5", "Jangkauan bernilai tetap"], a: 1, exp: "Operasi penambahan/pengurangan tidak mengubah ukuran penyebaran. Jangkauan hanya ikut berubah jika dikali/dibagi (dikali \$4\$)." }, { q: "Sebuah perusahaan ingin menaikkan seluruh gaji karyawan sebesar \$10\\%\$ ditambah bonus tetap \$200\$ ribu rupiah. Bagaimana dampak kebijakan ini terhadap median gaji karyawan?", options: ["Median ikut dikali 10% lalu ditambah 200 ribu", "Median tidak berubah", "Median hanya ditambah bonus saja", "Median dikali 2"], a: 0, exp: "Ukuran pemusatan (termasuk median) patuh mengikuti seluruh operasi matematika yang diberikan pada data." } ]; let evalIndex = 0; let evalSkor = 0; function loadEvaluasi() { if(evalIndex >= evaluasiBank.length) { document.getElementById('evaluasi-section').classList.add('hidden'); document.getElementById('lms-section').classList.remove('hidden'); document.getElementById('lms-section').classList.add('flex'); document.getElementById('final-score-display').innerText = evalSkor; return; } document.getElementById('eval-feedback').classList.add('hidden'); const current = evaluasiBank[evalIndex]; document.getElementById('eval-q-num').innerText = evalIndex + 1; document.getElementById('eval-q-text').innerHTML = current.q; const optsContainer = document.getElementById('eval-options'); optsContainer.innerHTML = ""; current.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-amber-50 hover:border-amber-300 transition flex items-center cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp); optsContainer.appendChild(btn); }); if (window.MathJax) MathJax.typesetPromise(); } function checkEvaluasi(selected, correct, btn, explanation) { const btns = document.getElementById('eval-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('eval-feedback'); fb.classList.remove('hidden'); if(selected === correct) { btn.classList.replace('bg-slate-50', 'bg-green-500'); btn.classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`; evalSkor += 20; } else { btn.classList.replace('bg-slate-50', 'bg-red-500'); btn.classList.replace('text-slate-700', 'text-white'); btns[correct].classList.replace('bg-slate-50', 'bg-green-500'); btns[correct].classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`; } if (window.MathJax) MathJax.typesetPromise(); setTimeout(() => { evalIndex++; loadEvaluasi(); }, 4000); } loadEvaluasi(); function kirimNilaiKeLMS() { const nama = document.getElementById('input-nama').value.trim(); if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const refleksi = document.getElementById('refleksi-teks').value || "Misi Puncak Selesai!"; if (window.parent && window.parent !== window) { window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama, skor: evalSkor, baterai: baterai, hambatan: "Refleksi Misi Puncak Statistika: " + refleksi, strategi: "Evaluasi: Pemecahan Masalah & Keputusan Data" }, "*"); } else { alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama); } } </script> </body> </html>

Kelas 8 Matematika

Statistika : Penyebaran Data & Perubahan Data

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matematika Kelas 8: Penyebaran Data & Perubahan Data 📊</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #f0fdf4; background-image: radial-gradient(#bbf7d0 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #059669 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; } .btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; } .math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; } .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } .ifp-col { border-right: 3px dashed #cbd5e1; } .ifp-col:last-child { border-right: none; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-emerald-600 p-2 rounded-xl shadow-sm text-white"> <i data-lucide="trending-up" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Matematika Kelas 8 - Ukuran Penyebaran & Perubahan Data</span> <span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-4xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm"> Fase D - Kurikulum Merdeka </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Penyebaran & Analisis <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Perubahan Data</span> 📈 </h1> <img src="https://images.unsplash.com/photo-1543286386-713bdd548da4?auto=format&fit=crop&w=800&q=80" alt="Statistika Lanjutan" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80'"> <div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6"> <h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Tujuan Pembelajaran:</h3> <ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4"> <li>Peserta didik dapat <span class="text-emerald-600">menentukan ukuran penyebaran data</span> (jangkauan, kuartil, dan simpangan kuartil).</li> <li>Peserta didik dapat <span class="text-emerald-600">menginvestigasi adanya perubahan ukuran pemusatan data</span> akibat perubahan nilai data.</li> </ol> </div> <p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap mendalami sebaran dan dinamika data? Let's go! 👇</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Rentang Nilai 👁️‍🗨️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Bandingkan dua kelas dengan rata-rata nilai yang sama!</p> </div> <div class="grid md:grid-cols-2 gap-6 mt-4"> <div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3"> <span class="text-4xl">🏫</span> <h4 class="font-black text-xl text-emerald-800">Kelas A:</h4> <p class="text-slate-600 font-bold">Nilai: 75, 76, 78, 80, 81</p> <p class="text-xs font-bold text-emerald-700 bg-emerald-50 p-2 rounded-lg">Nilainya rapat/merata, tidak ada yang terlalu jomplang.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3"> <span class="text-4xl">🏫</span> <h4 class="font-black text-xl text-teal-800">Kelas B:</h4> <p class="text-slate-600 font-bold">Nilai: 40, 60, 80, 90, 120 (remedial ekstrem)</p> <p class="text-xs font-bold text-teal-700 bg-teal-50 p-2 rounded-lg">Nilainya sangat menyebar (rentang jauh antara nilai terendah dan tertinggi).</p> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm"> Pertanyaan Pemantik 🤔 </div> <h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight"> "Jika seluruh nilai ulangan di satu kelas tiba-tiba ditambah 5 poin oleh guru, apakah nilai rata-rata (mean) ikut naik? Bagaimana dengan simpangan atau jangkauannya?" </h2> <div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2"> <p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p> <p class="text-slate-700 font-bold mt-1">Mari kita selidiki aturan perubahan ukuran pemusatan dan ukuran penyebaran data!</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Pentingnya Analisis Sebaran & Perubahan Data di Dunia Nyata</p> </div> <div class="grid md:grid-cols-3 gap-6 mt-4"> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">📈</span> <h4 class="font-black text-xl text-indigo-800">Pasar Saham & Keuangan</h4> <p class="text-slate-600 font-bold text-sm">Investor melihat volatilitas (penyebaran/rentang fluktuasi harga saham) sebelum memutuskan risiko investasi.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">🌡️</span> <h4 class="font-black text-xl text-indigo-800">Meteorologi Cuaca</h4> <p class="text-slate-600 font-bold text-sm">Badan cuaca menganalisis rentang suhu ekstrem harian untuk mendeteksi perubahan iklim atau anomali cuaca.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">🏭</span> <h4 class="font-black text-xl text-indigo-800">Kontrol Kualitas Pabrik</h4> <p class="text-slate-600 font-bold text-sm">Pabrik memastikan ukuran produk yang dihasilkan memiliki simpangan sekecil mungkin agar presisi.</p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Ukuran Penyebaran Data 📏</h2> </div> <div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md mt-2 space-y-5"> <div class="grid md:grid-cols-3 gap-4"> <div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-200"> <h4 class="font-black text-emerald-900 mb-1">1. Jangkauan (Range)</h4> <p class="text-xs font-bold text-slate-600">Selisih nilai maksimum dan minimum.</p> <p class="math-box text-sm mt-2 text-emerald-700">J = x<sub>maks</sub> - x<sub>min</sub></p> </div> <div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-200"> <h4 class="font-black text-emerald-900 mb-1">2. Kuartil (Q₁, Q₂, Q₃)</h4> <p class="text-xs font-bold text-slate-600">Nilai yang membagi data terurut menjadi 4 bagian sama.</p> <p class="text-xs font-bold text-emerald-700 mt-2">Q₂ adalah Median.</p> </div> <div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-200"> <h4 class="font-black text-emerald-900 mb-1">3. Simpangan Kuartil</h4> <p class="text-xs font-bold text-slate-600">Setengah dari selisih kuartil atas dan bawah.</p> <p class="math-box text-sm mt-2 text-emerald-700">Q<sub>d</sub> = ½ (Q₃ - Q₁)</p> </div> </div> <div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2"> <h4 class="font-black text-slate-800">Contoh & Latihan Cepat:</h4> <p class="text-slate-700 font-bold text-sm">Diketahui data terurut: <b>3, 5, 7, 9, 11, 13, 15</b>. Berapakah <b>Jangkauan</b> data tersebut?</p> <div class="flex gap-3"> <button onclick="alert('Kurang tepat, itu median.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">9</button> <button onclick="alert('Hebat! Benar, 15 - 3 = 12.')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl">12 ✅</button> <button onclick="alert('Kurang tepat.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">15</button> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Investigasi Perubahan Data 🔄</h2> </div> <div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-md mt-2 space-y-5"> <p class="text-lg font-bold text-slate-700">Apa yang terjadi pada ukuran pemusatan (Mean, Median, Modus) jika setiap nilai data mengalami perubahan tertentu?</p> <div class="grid md:grid-cols-2 gap-6"> <div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-200 space-y-2"> <h4 class="font-black text-teal-900 text-lg">Aturan Operasi Penjumlahan & Pengurangan (+ / -)</h4> <p class="text-slate-700 font-bold text-sm">Jika setiap nilai data <b>ditambah/dikurangi</b> dengan suatu bilangan $k$:</p> <ul class="text-xs font-bold text-teal-800 list-disc list-inside space-y-1"> <li>Mean baru = Mean lama $\pm$ $k$</li> <li>Median baru = Median lama $\pm$ $k$</li> <li>Modus baru = Modus lama $\pm$ $k$</li> </ul> </div> <div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 space-y-2"> <h4 class="font-black text-emerald-900 text-lg">Aturan Operasi Perkalian & Pembagian (× / ÷)</h4> <p class="text-slate-700 font-bold text-sm">Jika setiap nilai data <b>dikalikan/dibagi</b> dengan suatu bilangan $p$:</p> <ul class="text-xs font-bold text-emerald-800 list-disc list-inside space-y-1"> <li>Mean baru = Mean lama $\times$ $p$</li> <li>Median baru = Median lama $\times$ $p$</li> <li>Modus baru = Modus lama $\times$ $p$</li> </ul> </div> </div> <div class="bg-slate-50 p-4 rounded-2xl border-2 border-slate-200 text-center font-bold text-slate-700 text-sm"> 💡 <i>Kesimpulan: Ukuran pemusatan data sangat patuh dan ikut berubah persis sesuai operasi aritmatika yang dikenakan pada datanya!</i> </div> </div> </div>  <div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]"> <div class="text-center"> <h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2> <p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab masing-masing 5 soal sebaran & perubahan data secara serentak.</p> </div>  <div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">  <div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🏎️ KELOMPOK 1</span> <span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-100 text-center"> <p id="ifp-q-1" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-1" class="space-y-2"></div> <div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🚓 KELOMPOK 2</span> <span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-100 text-center"> <p id="ifp-q-2" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-2" class="space-y-2"></div> <div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🚙 KELOMPOK 3</span> <span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-green-50 p-4 rounded-2xl border-2 border-green-100 text-center"> <p id="ifp-q-3" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-3" class="space-y-2"></div> <div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> </div> </div>  <div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl"> <div class="text-9xl mb-4 animate-bounce">👑</div> <h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-emerald-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2> <button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#047857] active:shadow-none active:translate-y-2 transition"> Mainkan Lagi 🔄 </button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div id="evaluasi-section" class="w-full text-center"> <h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Individu</h2> <p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal mandiri ini untuk menguji pemahaman akhirmu.</p> <div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-md text-left"> <div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4"> <span class="font-black text-emerald-700 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span> </div> <p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p> <div id="eval-options" class="space-y-3"></div> <div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div> </div> </div>  <div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center"> <div class="text-7xl mb-4 animate-bounce">🥇</div> <h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2> <p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p> <div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden"> <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-100 rounded-bl-full -z-10"></div> <p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label> <input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50"> </div> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label> <select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500"> <option value="100">100% - Sangat Paham!</option> <option value="75">75% - Paham Sebagian Besar</option> <option value="50">50% - Butuh Latihan Lagi</option> <option value="25">25% - Masih Bingung</option> </select> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10"> Kirim Nilai ke Guru 🚀 </button> </div> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2> <p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari materi penyebaran dan perubahan data hari ini?</p> </div> <div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl"> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center"> <div class="text-6xl mb-2">😎</div> <h3 class="font-black text-xl text-slate-700">Gampang!</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center"> <div class="text-6xl mb-2">🤔</div> <h3 class="font-black text-xl text-slate-700">Lumayan</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center"> <div class="text-6xl mb-2">🤯</div> <h3 class="font-black text-xl text-slate-700">Susah Banget</h3> </button> </div> <div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-700 mb-2">Tuliskan kesan atau bagian paling menarik hari ini:</label> <textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]"> <span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.classList.add('hidden'); } else { nextBtn.disabled = false; nextBtn.classList.remove('hidden'); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // ========================================== // MULTI-USER IFP GAME (3 Kelompok, @5 Soal) // ========================================== let ifpProgress = { 1: 0, 2: 0, 3: 0 }; const TOTAL_IFP_QUESTIONS = 5; const multiUserBank = [ { q: "Jangkauan dari data: 4, 7, 10, 13, 16 adalah...", opts: ["10", "12", "14"], ans: 1 }, { q: "Jika rata-rata suatu data adalah 50, lalu setiap nilai ditambah 5, maka rata-rata baru menjadi...", opts: ["50", "55", "250"], ans: 1 }, { q: "Jika median data adalah 20, lalu setiap nilai dikali 2, maka median baru menjadi...", opts: ["20", "22", "40"], ans: 2 }, { q: "Simpangan kuartil dihitung menggunakan rumus...", opts: ["½(Q₃ - Q₁)", "Q₃ - Q₁", "Q₂ - Q₁"], ans: 0 }, { q: "Jangkauan adalah selisih antara...", opts: ["Max dan Min", "Q₃ dan Q₁", "Mean dan Median"], ans: 0 }, { q: "Jika nilai data dikurangi 3, maka jangkauan data akan...", opts: ["Berkurang 3", "Tetap", "Bertambah 3"], ans: 1 }, { q: "Q₂ pada pembagian kelompok data setara dengan...", opts: ["Modus", "Median", "Rata-rata"], ans: 1 }, { q: "Jika data 10, 15, 20, 25, 30, nilai Q₁ adalah...", opts: ["15", "17.5", "20"], ans: 0 } ]; function initIFPQuestion(group) { document.getElementById(`ifp-feedback-${group}`).classList.add('hidden'); if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) { document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`; document.getElementById(`ifp-opts-${group}`).innerHTML = ""; checkWinnerIFP(group); return; } document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`; let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)]; document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q; let optsContainer = document.getElementById(`ifp-opts-${group}`); optsContainer.innerHTML = ""; randQ.opts.forEach((opt, idx) => { let btn = document.createElement('button'); btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn); optsContainer.appendChild(btn); }); } let winnerDeclared = false; function checkIFPAnswer(group, selected, correctIdx, btn) { let optsContainer = document.getElementById(`ifp-opts-${group}`); let btns = optsContainer.querySelectorAll('button'); btns.forEach(b => b.disabled = true); let fb = document.getElementById(`ifp-feedback-${group}`); fb.classList.remove('hidden'); if(selected === correctIdx) { btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "✅ Benar! Lanjut..."; ifpProgress[group]++; setTimeout(() => { initIFPQuestion(group); }, 800); } else { btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700"; btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block"; fb.innerHTML = "❌ Salah! Coba lagi."; setTimeout(() => { initIFPQuestion(group); }, 1200); } } function checkWinnerIFP(group) { if(!winnerDeclared) { winnerDeclared = true; setTimeout(() => { document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`; document.getElementById('ifp-winner-modal').classList.remove('hidden'); document.getElementById('ifp-winner-modal').classList.add('flex'); }, 300); } } function resetIFPGame() { ifpProgress = { 1: 0, 2: 0, 3: 0 }; winnerDeclared = false; document.getElementById('ifp-winner-modal').classList.add('hidden'); document.getElementById('ifp-winner-modal').classList.remove('flex'); for(let i=1; i<=3; i++) { initIFPQuestion(i); } } for(let i=1; i<=3; i++) { initIFPQuestion(i); } // Refleksi function pilihRefleksi(btn) { const btns = document.querySelectorAll('.refleksi-btn'); btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); }); btn.classList.remove('border-slate-200'); if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50'); else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50'); else btn.classList.add('border-red-400', 'bg-red-50'); } // Evaluasi Individu const evaluasiBank = [ { q: "Diketahui data terurut: 10, 12, 14, 16, 18, 20, 22. Berapakah nilai <b>Jangkauan (Range)</b> data tersebut?", options: ["10", "12", "14", "16"], a: 1, exp: "Jangkauan = Nilai Maksimum - Nilai Minimum = 22 - 10 = <b>12</b>." }, { q: "Suatu data memiliki rata-rata (mean) 60. Jika setiap nilai data dikalikan 3, berapakah nilai rata-rata yang baru?", options: ["60", "120", "180", "200"], a: 2, exp: "Jika setiap nilai data dikalikan 3, maka rata-rata baru juga ikut dikalikan 3: 60 × 3 = <b>180</b>." }, { q: "Rumus untuk menentukan <b>Simpangan Kuartil (Q<sub>d</sub>)</b> adalah...", options: ["Q₃ - Q₁", "½ (Q₃ - Q₁)", "Q₂ - Q₁", "Q₃ + Q₁"], a: 1, exp: "Simpangan kuartil didefinisikan sebagai setengah dari selisih kuartil atas dan kuartil bawah: Q<sub>d</sub> = ½ (Q₃ - Q₁)." }, { q: "Jika median suatu data adalah 45, kemudian setiap nilai data dikurangi 10, berapakah median yang baru?", options: ["35", "45", "55", "450"], a: 0, exp: "Operasi pengurangan pada data membuat ukuran pemusatan (median) ikut berkurang sebesar bilangan yang sama: 45 - 10 = <b>35</b>." }, { q: "Manakah pernyataan yang paling tepat mengenai pengaruh penambahan nilai konstan pada ukuran penyebaran (seperti jangkauan)?", options: ["Jangkauan ikut bertambah besar", "Jangkauan ikut berkurang", "Jangkauan nilainya tetap (tidak berubah)", "Jangkauan menjadi nol"], a: 2, exp: "Jika semua data ditambah/dikurangi bilangan konstan, jarak antar data tidak berubah, sehingga nilai ukuran penyebaran seperti jangkauan akan <b>tetap</b>." } ]; let evalIndex = 0; let evalSkor = 0; function loadEvaluasi() { if(evalIndex >= evaluasiBank.length) { document.getElementById('evaluasi-section').classList.add('hidden'); document.getElementById('lms-section').classList.remove('hidden'); document.getElementById('lms-section').classList.add('flex'); document.getElementById('final-score-display').innerText = evalSkor; return; } document.getElementById('eval-feedback').classList.add('hidden'); const current = evaluasiBank[evalIndex]; document.getElementById('eval-q-num').innerText = evalIndex + 1; document.getElementById('eval-q-text').innerHTML = current.q; const optsContainer = document.getElementById('eval-options'); optsContainer.innerHTML = ""; current.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp); optsContainer.appendChild(btn); }); } function checkEvaluasi(selected, correct, btn, explanation) { const btns = document.getElementById('eval-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('eval-feedback'); fb.classList.remove('hidden'); if(selected === correct) { btn.classList.replace('bg-slate-50', 'bg-green-500'); btn.classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`; evalSkor += 20; } else { btn.classList.replace('bg-slate-50', 'bg-red-500'); btn.classList.replace('text-slate-700', 'text-white'); btns[correct].classList.replace('bg-slate-50', 'bg-green-500'); btns[correct].classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`; } setTimeout(() => { evalIndex++; loadEvaluasi(); }, 4000); } loadEvaluasi(); function kirimNilaiKeLMS() { const nama = document.getElementById('input-nama').value.trim(); if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!"; if (window.parent && window.parent !== window) { window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama, skor: evalSkor, baterai: baterai, hambatan: "Refleksi Penyebaran Data: " + refleksi, strategi: "Evaluasi: Ukuran Penyebaran & Perubahan Data" }, "*"); } else { alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama); } } </script> </body> </html>

Kelas 8 Matematika

Statistika : Misi Statistika Part1

Kelas 8 Matematika

Teorema Pythagoras : Jenis Segitiga & Pythagoras

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matematika Kelas 8: Jenis Segitiga & Pythagoras 📐</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #faf5ff; background-image: radial-gradient(#e9d5ff 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #7c3aed !important; color: white !important; border-bottom-color: #5b21b6 !important; pointer-events: none; } .btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; } .math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; } .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-purple-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-purple-600 p-2 rounded-xl shadow-sm text-white"> <i data-lucide="compass" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Matematika Kelas 8 - Jenis Sudut & Segitiga</span> <span id="progress-text" class="text-xs font-black text-white bg-purple-600 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-indigo-400 via-purple-500 to-pink-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-4xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-purple-100 text-purple-900 text-sm font-black uppercase tracking-widest shadow-sm"> Fase D - Kurikulum Merdeka </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Menyelidiki <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600">Jenis Segitiga</span> 📐 </h1> <img src="https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=800&q=80" alt="Geometri" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1596495577886-d920f1fb7238?auto=format&fit=crop&w=800&q=80'"> <div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md text-left mt-6"> <h3 class="font-black text-xl text-purple-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-purple-500"></i> Tujuan Pembelajaran:</h3> <ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4"> <li>Peserta didik dapat <span class="text-purple-600">membedakan jenis sudut pada segitiga</span> (lancip, siku-siku, tumpul) menggunakan teorema Pythagoras atau kebalikannya.</li> </ol> </div> <p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menguji jenis segitiga dari panjang sisinya? Let's go! 👇</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Sisi & Sudut 👁️‍🗨️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Amati hubungan kuadrat sisi pada segitiga siku-siku berikut!</p> </div> <div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center"> <div class="flex-1 space-y-4"> <div class="bg-purple-50 p-6 rounded-2xl border-2 border-purple-200 space-y-3"> <p class="text-lg font-bold text-slate-700">🔍 <b>Fakta Hubungan Kuadrat Sisi:</b></p> <ul class="space-y-2 text-slate-600 font-bold list-disc list-inside text-sm"> <li>Jika sisi alas $a = 3$, kuadratnya adalah 3<sup>2</sup> = 9.</li> <li>Jika sisi tegak $b = 4$, kuadratnya adalah 4<sup>2</sup> = 16.</li> <li>Jika sisi miring $c = 5$, kuadratnya adalah 5<sup>2</sup> = 25.</li> </ul> </div> <p class="text-xl font-black text-purple-700 text-center">Ternyata: 3<sup>2</sup> + 4<sup>2</sup> = 5<sup>2</sup> (9 + 16 = 25)! Inilah dasar segitiga siku-siku.</p> </div> <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-lg border-4 border-white" alt="Geometri Visual" onerror="this.src='https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=500&q=80'"> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm"> Pertanyaan Pemantik 🤔 </div> <h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight"> "Bagaimana jika sebuah segitiga memiliki sisi 3 cm, 4 cm, dan 6 cm? Apakah 3<sup>2</sup> + 4<sup>2</sup> tetap sama dengan 6<sup>2</sup>? Apa yang terjadi pada bentuk sudutnya?" </h2> <div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2"> <p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p> <p class="text-slate-700 font-bold mt-1">Mari kita selidiki perbandingan c<sup>2</sup> dengan a<sup>2</sup> + b<sup>2</sup> untuk menjawabnya!</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Pentingnya Menentukan Jenis Sudut Konstruksi di Dunia Nyata</p> </div> <div class="grid md:grid-cols-3 gap-6 mt-4"> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">⛺</span> <h4 class="font-black text-xl text-indigo-800">Konstruksi Tenda & Atap</h4> <p class="text-slate-600 font-bold text-sm">Pembuatan rangka atap rumah atau tenda kemah membutuhkan presisi sudut lancip/tumpul agar struktur kokoh menahan angin.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">🌉</span> <h4 class="font-black text-xl text-indigo-800">Rangka Jembatan Baja</h4> <p class="text-slate-600 font-bold text-sm">Insinyur sipil menguji segitiga kerangka jembatan agar beban tekanan terdistribusi merata sesuai jenis sudutnya.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">🎨</span> <h4 class="font-black text-xl text-indigo-800">Desain Grafis & Game 3D</h4> <p class="text-slate-600 font-bold text-sm">Pemrograman objek 3D menggunakan algoritma matematika berbasis jenis segitiga untuk merender bentuk poligon benda.</p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Materi Inti: Aturan Jenis Segitiga 📐</h2> </div> <div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md mt-2 space-y-5"> <p class="text-lg font-bold text-slate-700">Misalkan c adalah sisi terpanjang (panjang sisi terbesar), dan a, b adalah dua sisi lainnya. Uji aturannya sebagai berikut:</p> <div class="grid md:grid-cols-3 gap-5"> <div class="bg-blue-50 p-5 rounded-2xl border-2 border-blue-200 text-center space-y-2"> <span class="text-3xl">📐</span> <h4 class="font-black text-blue-900 text-lg">Segitiga Siku-siku</h4> <p class="math-box text-xl text-blue-700 font-bold">c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup></p> <p class="text-xs font-bold text-slate-600">Sudut tepat 90° di hadapan sisi c.</p> </div> <div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 text-center space-y-2"> <span class="text-3xl">📉</span> <h4 class="font-black text-emerald-900 text-lg">Segitiga Lancip</h4> <p class="math-box text-xl text-emerald-700 font-bold">c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup></p> <p class="text-xs font-bold text-slate-600">Semua sudut kurang dari 90°.</p> </div> <div class="bg-rose-50 p-5 rounded-2xl border-2 border-rose-200 text-center space-y-2"> <span class="text-xl">📈</span> <h4 class="font-black text-rose-900 text-lg">Segitiga Tumpul</h4> <p class="math-box text-xl text-rose-700 font-bold">c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup></p> <p class="text-xs font-bold text-slate-600">Ada satu sudut lebih dari 90°.</p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-purple-600">Tentukan Jenisnya!</span> 🎮</h2> <div class="mt-4 inline-flex items-center gap-3 bg-purple-100 border-2 border-purple-400 px-6 py-2 rounded-full"> <span class="text-xl">🔥</span> <span class="font-black text-purple-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center"> <p class="text-lg font-bold text-slate-500 mb-4">Tentukan jenis segitiga dari ukuran sisi berikut:</p> <div id="q1-text" class="text-2xl math-box text-purple-900 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 leading-relaxed">?</div> <div id="q1-options" class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-xl mx-auto"></div> <div id="q1-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div> <button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-purple-600 text-white rounded-2xl font-black text-xl hover:bg-purple-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]"> <div class="text-center"> <h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 tracking-wide uppercase">⚡ BATTLE PANEL INTERAKTIF (3 KELOMPOK) ⚡</h2> <p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Tentukan jenis segitiga secara serentak.</p> </div> <div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">  <div class="bg-white p-6 rounded-[2rem] border-4 border-purple-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-purple-600 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🏎️ KELOMPOK 1</span> <span id="ifp-score-1" class="bg-purple-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-purple-50 p-4 rounded-2xl border-2 border-purple-100 text-center"> <p class="text-xs font-bold text-purple-500 uppercase mb-1">Soal Mandiri K1</p> <p id="ifp-q-1" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-1" class="space-y-2"></div> <div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> <button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-purple-600 text-white font-black rounded-xl shadow hover:bg-purple-700 transition">Soal Berikutnya ➡️</button> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-blue-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-blue-600 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🚓 KELOMPOK 2</span> <span id="ifp-score-2" class="bg-blue-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-blue-50 p-4 rounded-2xl border-2 border-blue-100 text-center"> <p class="text-xs font-bold text-blue-500 uppercase mb-1">Soal Mandiri K2</p> <p id="ifp-q-2" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-2" class="space-y-2"></div> <div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> <button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-blue-600 text-white font-black rounded-xl shadow hover:bg-blue-700 transition">Soal Berikutnya ➡️</button> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-pink-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-pink-600 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🚙 KELOMPOK 3</span> <span id="ifp-score-3" class="bg-pink-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-pink-50 p-4 rounded-2xl border-2 border-pink-100 text-center"> <p class="text-xs font-bold text-pink-500 uppercase mb-1">Soal Mandiri K3</p> <p id="ifp-q-3" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-3" class="space-y-2"></div> <div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> <button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-pink-600 text-white font-black rounded-xl shadow hover:bg-pink-700 transition">Soal Berikutnya ➡️</button> </div> </div>  <div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl"> <div class="text-9xl mb-4 animate-bounce">👑</div> <h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-purple-500 mb-6 drop-shadow-lg">JUARA BATTLE KELOMPOK!</h2> <button onclick="resetIFPGame()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#4c1d95] active:shadow-none active:translate-y-2 transition"> Mainkan Lagi 🔄 </button> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2> <p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang jenis sudut pada segitiga hari ini?</p> </div> <div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl"> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center"> <div class="text-6xl mb-2">😎</div> <h3 class="font-black text-xl text-slate-700">Gampang!</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center"> <div class="text-6xl mb-2">🤔</div> <h3 class="font-black text-xl text-slate-700">Lumayan</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center"> <div class="text-6xl mb-2">🤯</div> <h3 class="font-black text-xl text-slate-700">Susah Banget</h3> </button> </div> <div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-700 mb-2">Bagian mana yang paling membantumu membedakan jenis segitiga?</label> <textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-purple-50 border-2 border-purple-200 focus:border-purple-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div id="evaluasi-section" class="w-full text-center"> <h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Jenis Segitiga</h2> <p class="text-lg font-bold text-slate-500 mb-6">Buktikan kehebatanmu dengan 5 soal evaluasi ini.</p> <div class="bg-white p-8 rounded-[2rem] border-4 border-purple-200 shadow-md text-left"> <div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4"> <span class="font-black text-purple-700 bg-purple-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span> </div> <p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p> <div id="eval-options" class="space-y-3"></div> <div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div> </div> </div>  <div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center"> <div class="text-7xl mb-4 animate-bounce">🥇</div> <h2 class="text-4xl font-black text-purple-900 mb-2">Misi Selesai!</h2> <p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p> <div class="bg-white border-4 border-purple-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden"> <div class="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-bl-full -z-10"></div> <p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke sistem Guru.</p> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label> <input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-purple-500 bg-slate-50"> </div> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label> <select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-purple-500"> <option value="100">100% - Sangat Paham!</option> <option value="75">75% - Paham Sebagian Besar</option> <option value="50">50% - Butuh Latihan Lagi</option> <option value="25">25% - Masih Bingung</option> </select> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10"> Kirim Nilai ke Guru 🚀 </button> </div> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-purple-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-purple-700 shadow-[0_4px_0px_#581c87]"> <span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.classList.add('hidden'); } else { nextBtn.disabled = false; nextBtn.classList.remove('hidden'); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Auto-Quiz 1: Menentukan Jenis Segitiga let countQ1 = 0; let currentQ1Data = null; function generateQ1() { document.getElementById('q1-feedback').classList.add('hidden'); document.getElementById('q1-next-btn').classList.add('hidden'); let types = [ { sides: [6, 8, 10], ans: "Siku-siku", exp: "6<sup>2</sup> + 8<sup>2</sup> = 36 + 64 = 100, dan 10<sup>2</sup> = 100. Karena sama (c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>), maka segitiga ini <b>Siku-siku</b>." }, { sides: [5, 7, 10], ans: "Tumpul", exp: "5<sup>2</sup> + 7<sup>2</sup> = 25 + 49 = 74, sedangkan 10<sup>2</sup> = 100. Karena c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup> (100 > 74), maka segitiga ini <b>Tumpul</b>." }, { sides: [6, 7, 8], ans: "Lancip", exp: "6<sup>2</sup> + 7<sup>2</sup> = 36 + 49 = 85, sedangkan 8<sup>2</sup> = 64. Karena c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup> (64 < 85), maka segitiga ini <b>Lancip</b>." } ]; let selected = types[Math.floor(Math.random() * types.length)]; let correctAns = selected.ans; let options = ["Siku-siku", "Lancip", "Tumpul"]; let explanation = selected.exp; currentQ1Data = { correctAns, explanation }; document.getElementById('q1-text').innerHTML = `Panjang sisi: <b>${selected.sides[0]} cm, ${selected.sides[1]} cm, ${selected.sides[2]} cm</b>. Termasuk jenis segitiga apakah ini?`; let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ1(this, '${opt}' === '${correctAns}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition text-center">${opt}</button>`; }); document.getElementById('q1-options').innerHTML = optHtml; } function checkQ1(btn, isCorrect) { const btns = document.getElementById('q1-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q1-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.explanation}`; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes(currentQ1Data.correctAns)) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.explanation}`; } countQ1++; document.getElementById('count-q1').innerText = countQ1; document.getElementById('q1-next-btn').classList.remove('hidden'); } generateQ1(); // IFP Split-Screen Game let ifpScores = { 1: 0, 2: 0, 3: 0 }; const IFP_WIN_SCORE = 5; const ifpBank = [ { q: "Sisi 6, 8, 10 jenis segitiganya adalah...", opts: ["Siku-siku", "Lancip", "Tumpul"], ans: 0 }, { q: "Sisi 5, 7, 10 jenis segitiganya adalah...", opts: ["Siku-siku", "Lancip", "Tumpul"], ans: 2 }, { q: "Sisi 6, 7, 8 jenis segitiganya adalah...", opts: ["Siku-siku", "Lancip", "Tumpul"], ans: 1 }, { q: "Jika c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup>, maka segitiga bernilai...", opts: ["Lancip", "Siku-siku", "Tumpul"], ans: 0 }, { q: "Jika c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup>, maka segitiga bernilai...", opts: ["Tumpul", "Siku-siku", "Lancip"], ans: 0 } ]; function initIFPQuestion(group) { document.getElementById(`ifp-feedback-${group}`).classList.add('hidden'); document.getElementById(`ifp-next-btn-${group}`).classList.add('hidden'); let randQ = ifpBank[Math.floor(Math.random() * ifpBank.length)]; document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q; let optsContainer = document.getElementById(`ifp-opts-${group}`); optsContainer.innerHTML = ""; randQ.opts.forEach((opt, idx) => { let btn = document.createElement('button'); btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn); optsContainer.appendChild(btn); }); } function checkIFPAnswer(group, selected, correctIdx, btn) { let optsContainer = document.getElementById(`ifp-opts-${group}`); let btns = optsContainer.querySelectorAll('button'); btns.forEach(b => b.disabled = true); let fb = document.getElementById(`ifp-feedback-${group}`); fb.classList.remove('hidden'); if(selected === correctIdx) { btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "✅ Benar! +1 Poin"; ifpScores[group]++; document.getElementById(`ifp-score-${group}`).innerText = `Skor: ${ifpScores[group]}`; if(ifpScores[group] >= IFP_WIN_SCORE) { setTimeout(() => { document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA! 👑`; document.getElementById('ifp-winner-modal').classList.remove('hidden'); document.getElementById('ifp-winner-modal').classList.add('flex'); }, 400); } else { document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden'); } } else { btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700"; btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block"; fb.innerHTML = "❌ Kurang tepat!"; document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden'); } } function resetIFPGame() { ifpScores = { 1: 0, 2: 0, 3: 0 }; for(let i=1; i<=3; i++) { document.getElementById(`ifp-score-${i}`).innerText = `Skor: 0`; initIFPQuestion(i); } document.getElementById('ifp-winner-modal').classList.add('hidden'); document.getElementById('ifp-winner-modal').classList.remove('flex'); } for(let i=1; i<=3; i++) { initIFPQuestion(i); } // Refleksi function pilihRefleksi(btn) { const btns = document.querySelectorAll('.refleksi-btn'); btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); }); btn.classList.remove('border-slate-200'); if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50'); else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50'); else btn.classList.add('border-red-400', 'bg-red-50'); } // Evaluasi Akhir Jenis Segitiga const evaluasiBank = [ { q: "Suatu segitiga memiliki panjang sisi 7 cm, 24 cm, dan 25 cm. Jenis segitiga tersebut adalah...", options: ["Lancip", "Siku-siku", "Tumpul", "Sembarang"], a: 1, exp: "7<sup>2</sup> + 24<sup>2</sup> = 49 + 576 = 625, dan 25<sup>2</sup> = 625. Karena c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>, maka segitiga ini <b>Siku-siku</b>." }, { q: "Diketahui segitiga dengan panjang sisi 8 cm, 10 cm, dan 13 cm. Jenis segitiga tersebut adalah...", options: ["Siku-siku", "Lancip", "Tumpul", "Sama kaki"], a: 2, exp: "8<sup>2</sup> + 10<sup>2</sup> = 64 + 100 = 164, sedangkan 13<sup>2</sup> = 169. Karena c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup> (169 > 164), maka segitiga ini <b>Tumpul</b>." }, { q: "Jika sisi-sisi segitiga adalah 5 cm, 7 cm, dan 9 cm, maka segitiga tersebut merupakan...", options: ["Segitiga Siku-siku", "Segitiga Tumpul", "Segitiga Lancip", "Segitiga Sembarang"], a: 2, exp: "5<sup>2</sup> + 7<sup>2</sup> = 25 + 49 = 74, sedangkan 9<sup>2</sup> = 81. Karena c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup> (81 > 74), maka segitiga ini <b>Tumpul</b>." }, { q: "Manakah syarat yang menunjukkan bahwa sebuah segitiga adalah <b>Segitiga Lancip</b> dengan c adalah sisi terpanjang?", options: ["c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>", "c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup>", "c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup>", "c = a + b"], a: 2, exp: "Syarat mutlak segitiga lancip adalah kuadrat sisi terpanjang lebih kecil dari jumlah kuadrat dua sisi lainnya (c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup>)." }, { q: "Suatu segitiga memiliki panjang sisi 10 cm, 15 cm, dan 20 cm. Segitiga tersebut adalah...", options: ["Lancip", "Siku-siku", "Tumpul", "Beraturan"], a: 2, exp: "10<sup>2</sup> + 15<sup>2</sup> = 100 + 225 = 325, sedangkan 20<sup>2</sup> = 400. Karena 400 > 325 (c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup>), maka jenisnya <b>Tumpul</b>." } ]; let evalIndex = 0; let evalSkor = 0; function loadEvaluasi() { if(evalIndex >= evaluasiBank.length) { document.getElementById('evaluasi-section').classList.add('hidden'); document.getElementById('lms-section').classList.remove('hidden'); document.getElementById('lms-section').classList.add('flex'); document.getElementById('final-score-display').innerText = evalSkor; return; } document.getElementById('eval-feedback').classList.add('hidden'); const current = evaluasiBank[evalIndex]; document.getElementById('eval-q-num').innerText = evalIndex + 1; document.getElementById('eval-q-text').innerHTML = current.q; const optsContainer = document.getElementById('eval-options'); optsContainer.innerHTML = ""; current.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-purple-50 hover:border-purple-300 transition flex items-center cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp); optsContainer.appendChild(btn); }); } function checkEvaluasi(selected, correct, btn, explanation) { const btns = document.getElementById('eval-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('eval-feedback'); fb.classList.remove('hidden'); if(selected === correct) { btn.classList.replace('bg-slate-50', 'bg-green-500'); btn.classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`; evalSkor += 20; } else { btn.classList.replace('bg-slate-50', 'bg-red-500'); btn.classList.replace('text-slate-700', 'text-white'); btns[correct].classList.replace('bg-slate-50', 'bg-green-500'); btns[correct].classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`; } setTimeout(() => { evalIndex++; loadEvaluasi(); }, 4000); } loadEvaluasi(); function kirimNilaiKeLMS() { const nama = document.getElementById('input-nama').value.trim(); if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!"; if (window.parent && window.parent !== window) { window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama, skor: evalSkor, baterai: baterai, hambatan: "Refleksi Jenis Segitiga: " + refleksi, strategi: "Evaluasi: Jenis Sudut pada Segitiga" }, "*"); } else { alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama); } } </script> </body> </html>

Kelas 8 Matematika

Teorema Pythagoras : Misteri Teorema Pythagoras 📐

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matematika Kelas 8: Teorema Pythagoras & Tripel Pythagoras 📐</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #fef2f2; background-image: radial-gradient(#fecdd3 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #e11d48 !important; color: white !important; border-bottom-color: #9f1239 !important; pointer-events: none; } .btn-wrong { background-color: #4f46e5 !important; color: white !important; border-bottom-color: #3730a3 !important; pointer-events: none; opacity: 0.8; } .math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; } .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } /* Racing Game Styles */ .track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; } .car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-rose-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-rose-600 p-2 rounded-xl shadow-sm text-white"> <i data-lucide="triangle" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-rose-800 uppercase tracking-widest">Matematika Kelas 8 - Teorema Pythagoras</span> <span id="progress-text" class="text-xs font-black text-white bg-rose-600 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-pink-400 via-rose-500 to-red-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-4xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-rose-100 text-rose-900 text-sm font-black uppercase tracking-widest shadow-sm"> Fase D - Kurikulum Merdeka </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Eksplorasi <span class="text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-red-600">Teorema Pythagoras</span> 📐 </h1> <img src="https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=800&q=80" alt="Geometri" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1596495577886-d920f1fb7238?auto=format&fit=crop&w=800&q=80'"> <div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md text-left mt-6"> <h3 class="font-black text-xl text-rose-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-rose-500"></i> Tujuan Pembelajaran:</h3> <ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4"> <li>Peserta didik dapat <span class="text-rose-600">menjelaskan pembuktian teorema Pythagoras</span>.</li> <li>Peserta didik dapat <span class="text-rose-600">mengidentifikasi tripel Pythagoras</span>.</li> </ol> </div> <p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membongkar rahasia segitiga siku-siku? Let's go! 👇</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-rose-900 bg-rose-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Pola Luas 👁️‍🗨️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Amati hubungan luas persegi pada sisi-sisi segitiga siku-siku berikut!</p> </div> <div class="bg-white p-8 rounded-3xl border-2 border-rose-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center"> <div class="flex-1 space-y-4"> <div class="bg-rose-50 p-6 rounded-2xl border-2 border-rose-200 space-y-3"> <p class="text-lg font-bold text-slate-700">🔍 <b>Fakta Unik yang Diamati:</b></p> <ul class="space-y-2 text-slate-600 font-bold list-disc list-inside"> <li>Jika sisi alas $a = 3$, luas perseginya $3^2 = 9$.</li> <li>Jika sisi tegak $b = 4$, luas perseginya $4^2 = 16$.</li> <li>Jika sisi miring $c = 5$, luas perseginya $5^2 = 25$.</li> </ul> </div> <p class="text-xl font-black text-rose-700 text-center">Ternyata: 9 + 16 = 25 (Luas Persegi a<sup>2</sup> + Luas Persegi b<sup>2</sup> = Luas Persegi c<sup>2</sup>)!</p> </div> <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-lg border-4 border-white" alt="Geometri Visual" onerror="this.src='https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=500&q=80'"> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm"> Pertanyaan Pemantik 🤔 </div> <h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight"> "Bagaimana cara kita membuktikan secara pasti bahwa hubungan a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> itu benar berlaku untuk SEMUA segitiga siku-siku?" </h2> <div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2"> <p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p> <p class="text-slate-700 font-bold mt-1">Kita bisa membuktikannya menggunakan puzzle potongan luas daerah (pendekatan geometri luas).</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Penerapan Pythagoras dan Tripel Pythagoras di Dunia Nyata</p> </div> <div class="grid md:grid-cols-3 gap-6 mt-4"> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">🏗️</span> <h4 class="font-black text-xl text-indigo-800">Siku-siku Tukang (3:4:5)</h4> <p class="text-slate-600 font-bold text-sm">Tukang bangunan menggunakan kelipatan angka tripel Pythagoras (3, 4, 5) untuk memastikan sudut dinding rumah benar-benar tegak lurus sempurna.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">✈️</span> <h4 class="font-black text-xl text-indigo-800">Navigasi Pesawat & Kapal</h4> <p class="text-slate-600 font-bold text-sm">Pilot dan kapten kapal menggunakan prinsip jarak sisi segitiga siku-siku untuk memperhitungkan jalur terpendek pelayaran.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3"> <span class="text-5xl block">📺</span> <h4 class="font-black text-xl text-indigo-800">Ukuran Layar TV / HP</h4> <p class="text-slate-600 font-bold text-sm">Perhitungan ukuran diagonal layar gadget menggunakan konsep panjang sisi miring dari dimensi panjang dan lebar layar.</p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-rose-900 bg-rose-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Pembuktian Pythagoras 🧩</h2> </div> <div class="bg-white p-8 rounded-3xl border-2 border-rose-200 shadow-md mt-2 space-y-5"> <p class="text-lg font-bold text-slate-700">Bagaimana cara matematikawan membuktikan rumus <span class="math-box bg-rose-50 px-2 rounded">a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></span>?</p> <div class="grid md:grid-cols-2 gap-6 items-center"> <div class="bg-rose-50 p-6 rounded-2xl border-2 border-rose-200 space-y-3"> <h4 class="font-black text-rose-800 text-xl">Metode Luas Puzzle (Bhaskara)</h4> <ol class="space-y-2 text-slate-700 font-bold list-decimal list-inside text-sm"> <li>Bayangkan sebuah persegi besar dengan sisi (a + b).</li> <li>Di dalam persegi besar tersebut, disusun 4 buah segitiga siku-siku yang identik (sisi alas a, sisi tegak b, sisi miring c).</li> <li>Di bagian tengah tersisa ruang kosong berbentuk persegi dengan sisi c.</li> <li>Luas Persegi Besar = Luas 4 Segitiga + Luas Persegi Kecil di tengah.</li> <li>(a + b)<sup>2</sup> = 4 × (½ × a × b) + c<sup>2</sup>.</li> <li>a<sup>2</sup> + 2ab + b<sup>2</sup> = 2ab + c<sup>2</sup> &implies; Coret 2ab, terbuktilah <b class="text-rose-600">a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></b>! 🎉</li> </ol> </div> <div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-200 text-center space-y-4"> <span class="text-6xl block">📐</span> <p class="font-bold text-slate-600">Pembuktian ini menunjukkan bahwa hubungan sisi siku-siku dan sisi miring murni berasal dari kekekalan luas bangun datar!</p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Tripel Pythagoras 🌟</h2> </div> <div class="bg-white p-8 rounded-3xl border-2 border-amber-200 shadow-md mt-2 space-y-5"> <p class="text-lg font-bold text-slate-700">Apa itu <b>Tripel Pythagoras</b>? Tripel Pythagoras adalah kelompok tiga bilangan bulat positif yang memenuhi kuadrat sisi terpanjang sama dengan jumlah kuadrat dua sisi lainnya (a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>).</p> <div class="grid md:grid-cols-2 gap-6"> <div class="bg-amber-50 p-6 rounded-2xl border-2 border-amber-200 space-y-3"> <h4 class="font-black text-amber-800 text-xl">Daftar Angka Utama (Sering Keluar):</h4> <ul class="space-y-2 text-slate-700 font-bold"> <li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">3, 4, 5</span> (Induk utama)</li> <li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">5, 12, 13</span></li> <li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">6, 8, 10</span> (Kelipatan 3,4,5)</li> <li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">7, 24, 25</span></li> <li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">8, 15, 17</span></li> </ul> </div> <div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-200 space-y-3"> <h4 class="font-black text-slate-700 text-xl">Tips Cepat Mengidentifikasi:</h4> <p class="text-slate-600 font-bold text-sm leading-relaxed"> Jika ada soal yang menanyakan apakah sekumpulan angka membentuk segitiga siku-siku, ujilah dengan memasukkan angka terbesar ke posisi c (sisi miring) dan dua angka lainnya ke a dan b. Jika hasilnya seimbang (a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>), maka dia adalah <b>Tripel Pythagoras</b>! </p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-rose-600">Bukti & Tripel</span> 🎮</h2> <div class="mt-4 inline-flex items-center gap-3 bg-rose-100 border-2 border-rose-400 px-6 py-2 rounded-full"> <span class="text-xl">🔥</span> <span class="font-black text-rose-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center"> <p class="text-lg font-bold text-slate-500 mb-4">Uji pemahamanmu tentang pembuktian dan tripel Pythagoras:</p> <div id="q1-text" class="text-2xl math-box text-rose-900 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 leading-relaxed">?</div> <div id="q1-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto"></div> <div id="q1-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div> <button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-rose-600 text-white rounded-2xl font-black text-xl hover:bg-rose-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]"> <div class="text-center"> <h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-amber-600 tracking-wide uppercase">⚡ BATTLE PANEL INTERAKTIF (3 KELOMPOK) ⚡</h2> <p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Kerjakan soal di kolom masing-masing secara serentak. Siapa cepat & benar, dia menang!</p> </div>  <div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">  <div class="bg-white p-6 rounded-[2rem] border-4 border-rose-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-rose-500 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🏎️ KELOMPOK 1</span> <span id="ifp-score-1" class="bg-rose-700 px-3 py-0.5 rounded-full text-sm">Skor: 0</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-rose-50 p-4 rounded-2xl border-2 border-rose-100 text-center"> <p class="text-xs font-bold text-rose-500 uppercase mb-1">Soal Mandiri K1</p> <p id="ifp-q-1" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-1" class="space-y-2"></div> <div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> <button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-rose-600 text-white font-black rounded-xl shadow hover:bg-rose-700 transition">Soal Berikutnya ➡️</button> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-blue-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-blue-500 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🚓 KELOMPOK 2</span> <span id="ifp-score-2" class="bg-blue-700 px-3 py-0.5 rounded-full text-sm">Skor: 0</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-blue-50 p-4 rounded-2xl border-2 border-blue-100 text-center"> <p class="text-xs font-bold text-blue-500 uppercase mb-1">Soal Mandiri K2</p> <p id="ifp-q-2" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-2" class="space-y-2"></div> <div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> <button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-blue-600 text-white font-black rounded-xl shadow hover:bg-blue-700 transition">Soal Berikutnya ➡️</button> </div>  <div class="bg-white p-6 rounded-[2rem] border-4 border-amber-400 shadow-xl flex flex-col justify-between relative overflow-hidden"> <div class="absolute top-0 left-0 w-full bg-amber-500 text-white py-2 px-4 flex justify-between items-center font-black"> <span>🚙 KELOMPOK 3</span> <span id="ifp-score-3" class="bg-amber-700 px-3 py-0.5 rounded-full text-sm">Skor: 0</span> </div> <div class="mt-10 flex-1 flex flex-col justify-center space-y-4"> <div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center"> <p class="text-xs font-bold text-amber-500 uppercase mb-1">Soal Mandiri K3</p> <p id="ifp-q-3" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p> </div> <div id="ifp-opts-3" class="space-y-2"></div> <div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div> </div> <button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-amber-600 text-white font-black rounded-xl shadow hover:bg-amber-700 transition">Soal Berikutnya ➡️</button> </div> </div>  <div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl"> <div class="text-9xl mb-4 animate-bounce">👑</div> <h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-rose-500 mb-6 drop-shadow-lg">JUARA BATTLE KELOMPOK!</h2> <button onclick="resetIFPGame()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#4c1d95] active:shadow-none active:translate-y-2 transition"> Mainkan Lagi 🔄 </button> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2> <p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang pembuktian dan tripel Pythagoras hari ini?</p> </div> <div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl"> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center"> <div class="text-6xl mb-2">😎</div> <h3 class="font-black text-xl text-slate-700">Gampang!</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center"> <div class="text-6xl mb-2">🤔</div> <h3 class="font-black text-xl text-slate-700">Lumayan</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center"> <div class="text-6xl mb-2">🤯</div> <h3 class="font-black text-xl text-slate-700">Susah Banget</h3> </button> </div> <div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-700 mb-2">Bagian mana dari Teorema Pythagoras yang paling membuatmu penasaran?</label> <textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-rose-50 border-2 border-rose-200 focus:border-rose-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div id="evaluasi-section" class="w-full text-center"> <h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Pythagoras</h2> <p class="text-lg font-bold text-slate-500 mb-6">Buktikan kehebatanmu dengan 5 soal evaluasi ini.</p> <div class="bg-white p-8 rounded-[2rem] border-4 border-rose-200 shadow-md text-left"> <div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4"> <span class="font-black text-rose-700 bg-rose-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span> </div> <p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p> <div id="eval-options" class="space-y-3"></div> <div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div> </div> </div>  <div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center"> <div class="text-7xl mb-4 animate-bounce">🥇</div> <h2 class="text-4xl font-black text-rose-900 mb-2">Misi Pythagoras Selesai!</h2> <p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-rose-500 to-red-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p> <div class="bg-white border-4 border-rose-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden"> <div class="absolute top-0 right-0 w-32 h-32 bg-rose-100 rounded-bl-full -z-10"></div> <p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke sistem Guru.</p> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label> <input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-rose-500 bg-slate-50"> </div> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label> <select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-rose-500"> <option value="100">100% - Sangat Paham!</option> <option value="75">75% - Paham Sebagian Besar</option> <option value="50">50% - Butuh Latihan Lagi</option> <option value="25">25% - Masih Bingung</option> </select> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-rose-600 to-red-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10"> Kirim Nilai ke Guru 🚀 </button> </div> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-rose-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-rose-700 shadow-[0_4px_0px_#9f1239]"> <span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.classList.add('hidden'); } else { nextBtn.disabled = false; nextBtn.classList.remove('hidden'); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Auto-Quiz 1: Menguji TP Pembuktian & Tripel Pythagoras let countQ1 = 0; let currentQ1Data = null; function generateQ1() { document.getElementById('q1-feedback').classList.add('hidden'); document.getElementById('q1-next-btn').classList.add('hidden'); let questions = [ { q: "Manakah di bawah ini kelompok angka yang merupakan <b>Tripel Pythagoras</b>?", options: ["2, 3, 4", "5, 12, 13", "6, 7, 10", "8, 9, 12"], ans: "5, 12, 13", exp: "Uji kuadrat: 5<sup>2</sup> + 12<sup>2</sup> = 25 + 144 = 169 = 13<sup>2</sup>. Maka 5, 12, 13 adalah Tripel Pythagoras." }, { q: "Dalam pembuktian teorema Pythagoras menggunakan pendekatan luas persegi puzzle, jika luas 4 segitiga siku-siku dijumlahkan dengan luas persegi kecil di tengahnya, maka hasilnya sama dengan...", options: ["Luas Persegi Besar (Sisi miring)", "Keliling Segitiga", "Volume Kubus", "Luas Lingkaran"], ans: "Luas Persegi Besar (Sisi miring)", exp: "Berdasarkan metode Bhaskara, total luas penyusun dalam persegi besar adalah luas persegi dengan sisi c (sisi miring)." }, { q: "Jika sebuah segitiga memiliki sisi 9, 12, dan 15, apakah kelompok ini membentuk Tripel Pythagoras?", options: ["Ya, karena 9<sup>2</sup> + 12<sup>2</sup> = 15<sup>2</sup>", "Tidak, karena angkanya terlalu besar", "Ya, karena merupakan kelipatan dari 3, 4, 5", "A dan C benar"], ans: "A dan C benar", exp: "9, 12, 15 adalah hasil kali 3 dari tripel dasar (3, 4, 5). Kuadratnya juga terbukti seimbang (81 + 144 = 225)." } ]; let selected = questions[Math.floor(Math.random() * questions.length)]; let correctAns = selected.ans; let options = shuffle([...selected.options]); let explanation = selected.exp; currentQ1Data = { correctAns, explanation }; document.getElementById('q1-text').innerHTML = selected.q; let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ1(this, '${opt.replace(/'/g, "\\'")}' === '${correctAns.replace(/'/g, "\\'")}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition text-left">${opt}</button>`; }); document.getElementById('q1-options').innerHTML = optHtml; } function checkQ1(btn, isCorrect) { const btns = document.getElementById('q1-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q1-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.explanation}`; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes(currentQ1Data.correctAns.substring(0,5))) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.explanation}`; } countQ1++; document.getElementById('count-q1').innerText = countQ1; document.getElementById('q1-next-btn').classList.remove('hidden'); } generateQ1(); // ========================================== // INTERACTIVE FLAT PANEL (IFP) SPLIT-SCREEN GAME // ========================================== let ifpScores = { 1: 0, 2: 0, 3: 0 }; const IFP_WIN_SCORE = 5; const ifpBank = [ { q: "Manakah kelompok angka yang merupakan Tripel Pythagoras?", opts: ["2, 3, 4", "5, 12, 13", "6, 7, 10"], ans: 1 }, { q: "Apakah 9, 12, 15 membentuk Tripel Pythagoras?", opts: ["Ya", "Tidak", "Belum tentu"], ans: 0 }, { q: "Kelipatan dari (3, 4, 5) jika dikali 3 adalah...", opts: ["9, 12, 15", "6, 8, 10", "12, 16, 20"], ans: 0 }, { q: "Dalam rumus a^2 + b^2 = c^2, huruf 'c' melambangkan...", opts: ["Sisi Miring", "Sisi Alas", "Sisi Tegak"], ans: 0 }, { q: "Apakah 7, 24, 25 adalah Tripel Pythagoras?", opts: ["Ya", "Tidak", "Mungkin"], ans: 0 }, { q: "Kelipatan dari (5, 12, 13) jika dikali 2 adalah...", opts: ["10, 24, 26", "15, 36, 39", "10, 20, 26"], ans: 0 } ]; function initIFPQuestion(group) { document.getElementById(`ifp-feedback-${group}`).classList.add('hidden'); document.getElementById(`ifp-next-btn-${group}`).classList.add('hidden'); let randQ = ifpBank[Math.floor(Math.random() * ifpBank.length)]; document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q; let optsContainer = document.getElementById(`ifp-opts-${group}`); optsContainer.innerHTML = ""; randQ.opts.forEach((opt, idx) => { let btn = document.createElement('button'); btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn); optsContainer.appendChild(btn); }); } function checkIFPAnswer(group, selected, correctIdx, btn) { let optsContainer = document.getElementById(`ifp-opts-${group}`); let btns = optsContainer.querySelectorAll('button'); btns.forEach(b => b.disabled = true); let fb = document.getElementById(`ifp-feedback-${group}`); fb.classList.remove('hidden'); if(selected === correctIdx) { btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "✅ Benar! +1 Poin"; ifpScores[group]++; document.getElementById(`ifp-score-${group}`).innerText = `Skor: ${ifpScores[group]}`; if(ifpScores[group] >= IFP_WIN_SCORE) { setTimeout(() => { document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA! 👑`; document.getElementById('ifp-winner-modal').classList.remove('hidden'); document.getElementById('ifp-winner-modal').classList.add('flex'); }, 400); } else { document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden'); } } else { btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700"; btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700"; fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block"; fb.innerHTML = "❌ Kurang tepat!"; document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden'); } } function resetIFPGame() { ifpScores = { 1: 0, 2: 0, 3: 0 }; for(let i=1; i<=3; i++) { document.getElementById(`ifp-score-${i}`).innerText = `Skor: 0`; initIFPQuestion(i); } document.getElementById('ifp-winner-modal').classList.add('hidden'); document.getElementById('ifp-winner-modal').classList.remove('flex'); } for(let i=1; i<=3; i++) { initIFPQuestion(i); } // Refleksi function pilihRefleksi(btn) { const btns = document.querySelectorAll('.refleksi-btn'); btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); }); btn.classList.remove('border-slate-200'); if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50'); else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50'); else btn.classList.add('border-red-400', 'bg-red-50'); } // Evaluasi Akhir Pythagoras const evaluasiBank = [ { q: "Manakah kelompok angka di bawah ini yang merupakan <b>Tripel Pythagoras</b>?", options: ["10, 24, 26", "4, 5, 6", "8, 10, 14", "1, 2, 3"], a: 0, exp: "10<sup>2</sup> + 24<sup>2</sup> = 100 + 576 = 676 = 26<sup>2</sup>. Jadi 10, 24, 26 adalah Tripel Pythagoras." }, { q: "Dalam pembuktian teorema Pythagoras dengan luas daerah, jika panjang sisi siku-siku adalah a dan b, serta sisi miring adalah c, rumus luas persegi besar luar adalah...", options: ["(a + b)<sup>2</sup>", "a<sup>2</sup> + b<sup>2</sup>", "4 × (ab)", "c<sup>2</sup>"], a: 0, exp: "Persegi besar luar dibentuk oleh sisi yang panjangnya merupakan gabungan sisi a dan b, yaitu (a + b)." }, { q: "Jika angka 8 dan 15 adalah sisi siku-siku suatu segitiga, berapakah panjang sisi miring agar membentuk Tripel Pythagoras?", options: ["16", "17", "23", "25"], a: 1, exp: "√(8<sup>2</sup> + 15<sup>2</sup>) = √(64 + 225) = √289 = <b>17</b>." }, { q: "Pernyataan manakah yang paling tepat untuk menjelaskan konsep dasar Teorema Pythagoras?", options: ["Luas persegi pada sisi miring sama dengan selisih luas persegi sisi lainnya", "Jumlah kuadrat sisi siku-siku sama dengan kuadrat sisi miring", "Keliling segitiga siku-siku selalu sama dengan 12", "Sisi miring adalah sisi yang paling pendek"], a: 1, exp: "Definisi baku Teorema Pythagoras menyatakan bahwa a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>." }, { q: "Kelipatan dari Tripel Pythagoras dasar (3, 4, 5) dapat diperoleh dengan cara...", options: ["Menambahkan angka 2 ke setiap sisi", "Mengalikan setiap sisi dengan bilangan bulat positif yang sama", "Membagi setiap sisi dengan 2", "Mengurangi setiap sisi dengan 1"], a: 1, exp: "Tripel Pythagoras berlaku multiplikatif. Contoh (3,4,5) dikali 2 menjadi (6,8,10) yang juga Tripel Pythagoras." } ]; let evalIndex = 0; let evalSkor = 0; function loadEvaluasi() { if(evalIndex >= evaluasiBank.length) { document.getElementById('evaluasi-section').classList.add('hidden'); document.getElementById('lms-section').classList.remove('hidden'); document.getElementById('lms-section').classList.add('flex'); document.getElementById('final-score-display').innerText = evalSkor; return; } document.getElementById('eval-feedback').classList.add('hidden'); const current = evaluasiBank[evalIndex]; document.getElementById('eval-q-num').innerText = evalIndex + 1; document.getElementById('eval-q-text').innerHTML = current.q; const optsContainer = document.getElementById('eval-options'); optsContainer.innerHTML = ""; current.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-rose-50 hover:border-rose-300 transition flex items-center cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp); optsContainer.appendChild(btn); }); } function checkEvaluasi(selected, correct, btn, explanation) { const btns = document.getElementById('eval-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('eval-feedback'); fb.classList.remove('hidden'); if(selected === correct) { btn.classList.replace('bg-slate-50', 'bg-green-500'); btn.classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`; evalSkor += 20; } else { btn.classList.replace('bg-slate-50', 'bg-red-500'); btn.classList.replace('text-slate-700', 'text-white'); btns[correct].classList.replace('bg-slate-50', 'bg-green-500'); btns[correct].classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`; } setTimeout(() => { evalIndex++; loadEvaluasi(); }, 4000); } loadEvaluasi(); function kirimNilaiKeLMS() { const nama = document.getElementById('input-nama').value.trim(); if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const refleksi = document.getElementById('refleksi-teks').value || "Misi Pythagoras Selesai!"; if (window.parent && window.parent !== window) { window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama, skor: evalSkor, baterai: baterai, hambatan: "Refleksi Pythagoras: " + refleksi, strategi: "Evaluasi: Pembuktian & Tripel Pythagoras" }, "*"); } else { alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama); } } </script> </body> </html>

Kelas 8 Matematika

Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matematika Kelas 8: Misi Puncak Bentuk Akar & Kontekstual ⛰️</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #fff7ed; background-image: radial-gradient(#fed7aa 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #f59e0b !important; color: white !important; border-bottom-color: #b45309 !important; pointer-events: none; } .btn-wrong { background-color: #8b5cf6 !important; color: white !important; border-bottom-color: #5b21b6 !important; pointer-events: none; opacity: 0.8; } .math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; } .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } /* Racing Game Styles */ .track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; } .car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-orange-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-orange-500 p-2 rounded-xl shadow-sm text-white"> <i data-lucide="mountain-snow" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-orange-800 uppercase tracking-widest">Matematika Kelas 8 - Misi Puncak (Part 3)</span> <span id="progress-text" class="text-xs font-black text-white bg-orange-500 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-4xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-orange-100 text-orange-900 text-sm font-black uppercase tracking-widest shadow-sm"> Fase D - Kurikulum Merdeka </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Misi Puncak: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-purple-600">Operasi & Dunia Nyata</span> 🗺️ </h1> <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=800&q=80" alt="Petualangan" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=800&q=80'"> <div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md text-left mt-6"> <h3 class="font-black text-xl text-orange-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-purple-500"></i> Tujuan Misi Kita:</h3> <ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4"> <li>Menggunakan <span class="text-orange-600">operasi bilangan bentuk akar</span> lewat perhitungan sistematis.</li> <li>Menentukan <span class="text-orange-600">penyebut bentuk akar</span> melalui metode merasionalkan.</li> <li>Memecahkan <span class="text-orange-600">masalah kontekstual</span> terkait eksponen dan bentuk akar dalam kehidupan sehari-hari.</li> </ol> </div> <p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap selesaikan misi terakhir? Let's go! 👇</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Operasi Bentuk Akar 🧩</h2> <p class="text-lg font-bold text-slate-500 mt-2">Akar itu ibarat barang. Kita cuma bisa menjumlahkan barang yang SEJENIS!</p> </div> <div class="grid md:grid-cols-2 gap-8 mt-4">  <div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md"> <img src="https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Puzzle" onerror="this.src='https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=600&q=80'"> <div class="bg-purple-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Penjumlahan & Pengurangan</div> <p class="text-slate-700 font-bold mb-3">Syarat: Angka di dalam akar <span class="text-purple-600 font-black">HARUS SAMA</span>.</p> <div class="bg-purple-50 p-4 rounded-xl mb-4 text-center"> <p class="text-xl math-box text-purple-900">a√<span class="border-t-2 border-purple-900 pt-1">c</span> + b√<span class="border-t-2 border-purple-900 pt-1">c</span> = (a+b)√<span class="border-t-2 border-purple-900 pt-1">c</span></p> </div> <p class="text-slate-500 font-bold text-sm">Contoh Benar ✅:</p> <p class="text-lg math-box text-slate-800">3√2 + 5√2 = 8√2</p> </div>  <div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md"> <img src="https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Alat Hitung" onerror="this.src='https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=600&q=80'"> <div class="bg-orange-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Perkalian & Pembagian</div> <p class="text-slate-700 font-bold mb-3">Bebas! Luar dikali luar, dalam dikali dalam.</p> <div class="bg-orange-50 p-4 rounded-xl mb-4 text-center"> <p class="text-xl math-box text-orange-900">√<span class="border-t-2 border-orange-900 pt-1">a</span> × √<span class="border-t-2 border-orange-900 pt-1">b</span> = √<span class="border-t-2 border-orange-900 pt-1">a × b</span></p> </div> <p class="text-slate-500 font-bold text-sm">Contoh Perkalian:</p> <p class="text-lg math-box text-slate-800">2√3 × 4√5 = (2×4)√(3×5) = 8√15</p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-purple-600">Hitung Akarnya!</span> 🎮</h2> <div class="mt-4 inline-flex items-center gap-3 bg-purple-100 border-2 border-purple-400 px-6 py-2 rounded-full"> <span class="text-xl">🔥</span> <span class="font-black text-purple-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center"> <p class="text-lg font-bold text-slate-500 mb-4">Hitunglah hasil dari operasi akar berikut:</p> <div id="q1-text" class="text-4xl math-box text-purple-700 mb-8 bg-slate-50 py-4 rounded-2xl border border-slate-100">?</div> <div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div> <div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div> <button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-purple-600 text-white rounded-2xl font-black text-xl hover:bg-purple-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Merasionalkan Penyebut ⚖️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Dalam matematika, "Akar" tidak sopan kalau ditaruh di bawah (sebagai penyebut pecahan).</p> </div> <div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center"> <div class="flex-1 space-y-6"> <p class="text-xl font-bold text-slate-700">Cara mengusirnya? Kalikan atas dan bawah dengan akar yang sama!</p> <div class="bg-orange-50 p-6 rounded-2xl border-2 border-orange-200 text-center flex flex-col items-center"> <div class="flex items-center gap-4 text-2xl math-box text-orange-900 font-black"> <div class="flex flex-col items-center"> <span>a</span> <div class="w-full h-0.5 bg-orange-900 my-1"></div> <span>√b</span> </div> <span>=</span> <div class="flex flex-col items-center"> <span>a</span> <div class="w-full h-0.5 bg-orange-900 my-1"></div> <span>√b</span> </div> <span>×</span> <div class="flex flex-col items-center text-rose-600"> <span>√b</span> <div class="w-full h-0.5 bg-rose-600 my-1"></div> <span>√b</span> </div> </div> </div> </div> <img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Balancing" onerror="this.src='https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=400&q=80'"> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-orange-600">Rasionalkan!</span> 🎮</h2> <div class="mt-4 inline-flex items-center gap-3 bg-orange-100 border-2 border-orange-400 px-6 py-2 rounded-full"> <span class="font-black text-orange-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center flex flex-col items-center"> <p class="text-lg font-bold text-slate-500 mb-4">Bentuk rasional dari pecahan di bawah ini adalah:</p> <div id="q2-text" class="text-5xl math-box text-orange-700 mb-8 bg-slate-50 px-10 py-6 rounded-2xl border border-slate-100 flex flex-col items-center">?</div> <div id="q2-options" class="grid grid-cols-2 gap-4 w-full max-w-lg mx-auto"></div> <div id="q2-feedback" class="hidden w-full max-w-lg mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div> <button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-orange-600 text-white rounded-2xl font-black text-xl hover:bg-orange-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Penerapan Dunia Nyata 🏙️</h2> <p class="text-lg font-bold text-slate-500 mt-2">Buat apa belajar ini? Coba lihat masalah arsitek & ilmuwan ini!</p> </div> <div class="grid md:grid-cols-2 gap-8 mt-4">  <div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md"> <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Bangunan" onerror="this.src='https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=600&q=80'"> <h4 class="font-black text-blue-800 text-xl mb-2">Kasus 1: Luas Lahan</h4> <p class="text-slate-600 font-bold mb-3 leading-relaxed"> Seorang arsitek mendesain taman persegi dengan panjang sisi <span class="bg-blue-100 px-2 rounded math-box">3√5</span> meter. Berapakah luas taman itu? </p> <div class="bg-blue-50 p-4 rounded-xl font-bold text-slate-700"> <p class="math-box text-lg">Luas = (3√5) × (3√5) = <span class="text-blue-700 text-xl">45 m<sup>2</sup></span></p> </div> </div>  <div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md"> <img src="https://images.unsplash.com/photo-1584036561566-baf8f5f1b144?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Bakteri Mikroskop" onerror="this.src='https://images.unsplash.com/photo-1530497610245-94d3c16cda28?auto=format&fit=crop&w=600&q=80'"> <h4 class="font-black text-rose-800 text-xl mb-2">Kasus 2: Virus/Bakteri</h4> <p class="text-slate-600 font-bold mb-3 leading-relaxed"> Awalnya ada 2 bakteri. Setiap jam jumlahnya berkembang menjadi <span class="bg-rose-100 px-2 rounded font-black">2 kali lipat</span>. Berapa banyak bakteri setelah 5 jam? </p> <div class="bg-rose-50 p-4 rounded-xl font-bold text-slate-700"> <p class="math-box text-lg">Jumlah = 2 × 2<sup>5</sup> = <span class="text-rose-700 text-xl">64 bakteri</span></p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-blue-600">Soal Cerita</span> 🎮</h2> <div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full"> <span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl"> <p class="text-lg font-bold text-slate-500 mb-4 text-center border-b-2 border-dashed pb-4">Baca baik-baik dan temukan jawabannya:</p> <p id="q3-text" class="text-xl font-bold text-slate-800 mb-8 leading-relaxed text-center"></p> <div id="q3-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div> <div id="q3-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div> <button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition block">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-2"> <h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-500 tracking-wide uppercase">🏁 Balap Mobil Cerdas 🏁</h2> <p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Hitung cepat, angkat tangan, dan kumpulkan <b>5 Poin</b> untuk MENANG!</p> </div> <div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative"> <div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div> <div class="relative w-full"> <div class="flex justify-between text-sm font-black mb-1 px-1"> <span class="text-rose-600">KELOMPOK 1</span> <span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span> </div> <div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center"> <div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div> <div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div> </div> </div> <div class="relative w-full"> <div class="flex justify-between text-sm font-black mb-1 px-1"> <span class="text-blue-600">KELOMPOK 2</span> <span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span> </div> <div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center"> <div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div> <div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div> </div> </div> <div class="relative w-full"> <div class="flex justify-between text-sm font-black mb-1 px-1"> <span class="text-amber-600">KELOMPOK 3</span> <span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span> </div> <div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center"> <div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div> <div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div> </div> </div> </div> <div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2"> <p class="text-amber-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Soal Rebutan Saat Ini ⛽</p> <div id="race-q-text" class="text-4xl md:text-5xl font-black math-box text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div> <button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-orange-500 hover:bg-orange-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#9a3412] active:shadow-none active:translate-y-2 transition mb-4"> Buka Jawaban 👀 </button> <div id="race-ans-container" class="hidden"> <p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p> <div id="race-ans-text" class="text-4xl font-black math-box text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div> <p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Siapa yang menjawab benar paling cepat?</p> <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> <button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button> <button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button> <button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button> <button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button> </div> </div> </div> <div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl"> <div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div> <h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-orange-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2> <button onclick="resetRace()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#4c1d95] active:shadow-none active:translate-y-2 transition"> Balapan Lagi 🔄 </button> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2> <p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana petualangan Misi Puncak hari ini?</p> </div> <div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl"> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center"> <div class="text-6xl mb-2">😎</div> <h3 class="font-black text-xl text-slate-700">Gampang!</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center"> <div class="text-6xl mb-2">🤔</div> <h3 class="font-black text-xl text-slate-700">Lumayan</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center"> <div class="text-6xl mb-2">🤯</div> <h3 class="font-black text-xl text-slate-700">Susah Banget</h3> </button> </div> <div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-700 mb-2">Materi mana yang mau diulang lagi minggu depan?</label> <textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-orange-50 border-2 border-orange-200 focus:border-orange-500 outline-none font-medium" rows="3" placeholder="Misalnya: Merasionalkan akar..."></textarea> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div id="evaluasi-section" class="w-full text-center"> <h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi</h2> <p class="text-lg font-bold text-slate-500 mb-6">Buktikan kehebatanmu dengan 5 soal evaluasi ini.</p> <div class="bg-white p-8 rounded-[2rem] border-4 border-orange-200 shadow-md text-left"> <div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4"> <span class="font-black text-orange-700 bg-orange-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span> </div> <p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p> <div id="eval-options" class="space-y-3"></div> <div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div> </div> </div>  <div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center"> <div class="text-7xl mb-4 animate-bounce">🥇</div> <h2 class="text-4xl font-black text-orange-900 mb-2">Misi Puncak Berhasil!</h2> <p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir Misi: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-orange-500 to-red-500 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p> <div class="bg-white border-4 border-orange-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden"> <div class="absolute top-0 right-0 w-32 h-32 bg-orange-100 rounded-bl-full -z-10"></div> <p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke markas (Sistem Guru).</p> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Petualang</label> <input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-orange-500 bg-slate-50"> </div> <div class="relative z-10"> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Energi Tersisa (Pemahaman)</label> <select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-orange-500"> <option value="100">100% - Sangat Paham!</option> <option value="75">75% - Paham Sebagian Besar</option> <option value="50">50% - Butuh Latihan Lagi</option> <option value="25">25% - Kehabisan Energi (Bingung)</option> </select> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-orange-500 to-rose-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10"> Kirim Laporan Misi 🚀 </button> </div> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-orange-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-orange-600 shadow-[0_4px_0px_#c2410c]"> <span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.classList.add('hidden'); } else { nextBtn.disabled = false; nextBtn.classList.remove('hidden'); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Auto-Quiz 1 (Operasi Akar dengan Pembahasan) let countQ1 = 0; let currentQ1Data = null; function generateQ1() { document.getElementById('q1-feedback').classList.add('hidden'); document.getElementById('q1-next-btn').classList.add('hidden'); let type = Math.floor(Math.random() * 3); let qText, correctAns, explanation; let options = []; if(type === 0 || type === 1) { let inner = [2, 3, 5, 7][Math.floor(Math.random() * 4)]; let a = Math.floor(Math.random() * 5) + 2; let b = Math.floor(Math.random() * 3) + 1; if (type === 1 && a < b) { let t = a; a = b; b = t; } let sign = type === 0 ? '+' : '-'; qText = `${a}√<span class="border-t-2 border-purple-700 pt-1">${inner}</span> ${sign} ${b}√<span class="border-t-2 border-purple-700 pt-1">${inner}</span>`; let res = type === 0 ? a + b : a - b; correctAns = res === 1 ? `√${inner}` : `${res}√${inner}`; options.push(correctAns); options.push(`${res}√${inner*2}`); options.push(`${a*b}√${inner}`); options.push(`${res+2}√${inner}`); explanation = `<b>Penyelesaian:</b> Karena angka di dalam akar sudah sama (yaitu <b>${inner}</b>), kita cukup menjumlahkan/mengurangkan angka di luar akar:<br>(${a} ${sign} ${b})√${inner} = <b>${res}√${inner}</b>.`; } else { let a = Math.floor(Math.random() * 3) + 2; let b = Math.floor(Math.random() * 3) + 2; qText = `√<span class="border-t-2 border-purple-700 pt-1">${a}</span> × √<span class="border-t-2 border-purple-700 pt-1">${b}</span>`; correctAns = `√${a*b}`; options.push(correctAns); options.push(`${a}√${b}`); options.push(`√${a+b}`); options.push(`${a*b}`); explanation = `<b>Penyelesaian:</b> Sifat perkalian akar adalah mengalikan angka di dalam akar: √${a} × √${b} = √(${a} × ${b}) = <b>√${a*b}</b>.`; } currentQ1Data = { correctAns, explanation }; document.getElementById('q1-text').innerHTML = `${qText}`; options = shuffle([...new Set(options)]); let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ1(this, '${opt}' === '${correctAns}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt.replace('√', '√<span class="border-t-2 border-slate-700 pt-1">') + (opt.includes('√') ? '</span>' : '')}</button>`; }); document.getElementById('q1-options').innerHTML = optHtml; } function checkQ1(btn, isCorrect) { const btns = document.getElementById('q1-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q1-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.explanation}`; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.explanation}`; } countQ1++; document.getElementById('count-q1').innerText = countQ1; document.getElementById('q1-next-btn').classList.remove('hidden'); } generateQ1(); // Auto-Quiz 2 (Rasionalisasi dengan Pembahasan) let countQ2 = 0; let currentQ2Data = null; function generateQ2() { document.getElementById('q2-feedback').classList.add('hidden'); document.getElementById('q2-next-btn').classList.add('hidden'); let roots = [2, 3, 5]; let d = roots[Math.floor(Math.random() * roots.length)]; let k = Math.floor(Math.random() * 4) + 2; let c = k * d; let qTextHtml = ` <div class="flex flex-col items-center w-fit mx-auto"> <span>${c}</span> <div class="w-8 h-1 bg-orange-700 my-1"></div> <span>√<span class="border-t-2 border-orange-700 pt-1">${d}</span></span> </div> `; document.getElementById('q2-text').innerHTML = qTextHtml; let correctAns = k === 1 ? `√${d}` : `${k}√${d}`; let options = [correctAns, `${c}√${d}`, `${k}`, `${k}√${d+1}`]; options = shuffle([...new Set(options)]); let explanation = `<b>Penyelesaian:</b> Kalikan pembilang dan penyebut dengan √${d}:<br>(${c} / √${d}) × (√${d} / √${d}) = (${c}√${d} / ${d}) = <b>${correctAns}</b>.`; currentQ2Data = { correctAns, explanation }; let optHtml = ""; options.forEach(opt => { let disp = opt.replace('√', '√<span class="border-t-2 border-slate-700 pt-1">') + (opt.includes('√') ? '</span>' : ''); optHtml += `<button onclick="checkQ2(this, '${opt}' === '${correctAns}')" class="guess-btn w-full p-6 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-3xl border-b-4 border-slate-300 math-box transition">${disp}</button>`; }); document.getElementById('q2-options').innerHTML = optHtml; } function checkQ2(btn, isCorrect) { const btns = document.getElementById('q2-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q2-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.explanation}`; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.explanation}`; } countQ2++; document.getElementById('count-q2').innerText = countQ2; document.getElementById('q2-next-btn').classList.remove('hidden'); } generateQ2(); // Auto-Quiz 3 (Soal Cerita dengan Pembahasan) let countQ3 = 0; let currentQ3Data = null; function generateQ3() { document.getElementById('q3-feedback').classList.add('hidden'); document.getElementById('q3-next-btn').classList.add('hidden'); let type = Math.floor(Math.random() * 2); let qText, correctAns, explanation; let options = []; if(type === 0) { let a = Math.floor(Math.random() * 3) + 2; let b = [2, 3, 5][Math.floor(Math.random() * 3)]; qText = `Sebuah kebun persegi memiliki panjang sisi <span class="math-box bg-blue-100 px-2 rounded">${a}√${b}</span> meter. Berapakah luas kebun tersebut?`; let area = (a*a) * b; correctAns = `${area} m<sup>2</sup>`; options.push(correctAns); options.push(`${a*2 * b} m<sup>2</sup>`); options.push(`${a*a + b} m<sup>2</sup>`); options.push(`${area * 2} m<sup>2</sup>`); explanation = `<b>Penyelesaian:</b> Luas persegi = sisi × sisi = (${a}√${b}) × (${a}√${b}) = (${a}×${a}) × (√${b}×√${b}) = ${a*a} × ${b} = <b>${area} m<sup>2</sup></b>.`; } else { let awal = Math.floor(Math.random() * 2) + 2; let jam = Math.floor(Math.random() * 2) + 3; qText = `Ada ${awal} sel bakteri. Setiap jam membelah jadi 2. Berapa sel setelah ${jam} jam?`; let total = awal * Math.pow(2, jam); correctAns = `${total} sel`; options.push(correctAns); options.push(`${awal * jam * 2} sel`); options.push(`${Math.pow(awal, jam)} sel`); options.push(`${total + awal} sel`); explanation = `<b>Penyelesaian:</b> Jumlah = Awal × 2<sup>waktu</sup> = ${awal} × 2<sup>${jam}</sup> = ${awal} × ${Math.pow(2, jam)} = <b>${total} sel</b>.`; } currentQ3Data = { correctAns, explanation }; document.getElementById('q3-text').innerHTML = qText; options = shuffle([...new Set(options)]); let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ3(this, '${opt}' === '${correctAns}')" class="guess-btn w-full py-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition">${opt}</button>`; }); document.getElementById('q3-options').innerHTML = optHtml; } function checkQ3(btn, isCorrect) { const btns = document.getElementById('q3-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q3-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ3Data.explanation}`; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ3Data.explanation}`; } countQ3++; document.getElementById('count-q3').innerText = countQ3; document.getElementById('q3-next-btn').classList.remove('hidden'); } generateQ3(); // Racing Game let raceScores = { 1: 0, 2: 0, 3: 0 }; const WIN_SCORE = 5; function generateRaceQuestion() { document.getElementById('race-ans-container').classList.add('hidden'); document.getElementById('btn-reveal-race').classList.remove('hidden'); document.getElementById('race-ans-text').classList.remove('pop-in'); let type = Math.floor(Math.random() * 3); let qTextHtml = "", ansTextHtml = ""; if (type === 0) { let c = [2,3,5][Math.floor(Math.random()*3)]; let a = Math.floor(Math.random()*5)+2; let b = Math.floor(Math.random()*4)+1; qTextHtml = `<span>${a}√<span class="border-t-2 border-white pt-1">${c}</span> + ${b}√<span class="border-t-2 border-white pt-1">${c}</span></span>`; ansTextHtml = `<span>${a+b}√<span class="border-t-2 border-green-400 pt-1">${c}</span></span>`; } else if (type === 1) { let d = [2, 3, 5][Math.floor(Math.random()*3)]; let k = Math.floor(Math.random()*4)+2; let c = k * d; qTextHtml = ` <div class="flex flex-col items-center"> <span>${c}</span> <div class="w-12 h-1 bg-yellow-300 my-1"></div> <span>√<span class="border-t-2 border-white pt-1">${d}</span></span> </div> `; ansTextHtml = `<span>${k}√<span class="border-t-2 border-green-400 pt-1">${d}</span></span>`; } else { let a = Math.floor(Math.random() * 3) + 2; let b = Math.floor(Math.random() * 3) + 2; qTextHtml = `<span>√<span class="border-t-2 border-white pt-1">${a}</span> × √<span class="border-t-2 border-white pt-1">${b}</span></span>`; ansTextHtml = `<span>√<span class="border-t-2 border-green-400 pt-1">${a*b}</span></span>`; } document.getElementById('race-q-text').innerHTML = qTextHtml; document.getElementById('race-ans-text').innerHTML = ansTextHtml; } function revealRaceAnswer() { document.getElementById('btn-reveal-race').classList.add('hidden'); document.getElementById('race-ans-container').classList.remove('hidden'); void document.getElementById('race-ans-text').offsetWidth; document.getElementById('race-ans-text').classList.add('pop-in'); } function addRaceScore(group) { raceScores[group]++; let percent = (raceScores[group] / WIN_SCORE) * 100; document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`; document.getElementById(`bar-k${group}`).style.width = `${percent}%`; document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`; if(raceScores[group] >= WIN_SCORE) { setTimeout(() => { let car = ["🏎️", "🚓", "🚙"][group-1]; document.getElementById('winner-icon').innerText = car; document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`; document.getElementById('race-winner-modal').classList.remove('hidden'); document.getElementById('race-winner-modal').classList.add('flex'); }, 600); } else { generateRaceQuestion(); } } function resetRace() { raceScores = {1:0, 2:0, 3:0}; for(let i=1; i<=3; i++) { document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`; document.getElementById(`bar-k${i}`).style.width = `0%`; document.getElementById(`rocket-k${i}`).style.left = `0%`; } document.getElementById('race-winner-modal').classList.add('hidden'); document.getElementById('race-winner-modal').classList.remove('flex'); generateRaceQuestion(); } generateRaceQuestion(); // Refleksi function pilihRefleksi(btn) { const btns = document.querySelectorAll('.refleksi-btn'); btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); }); btn.classList.remove('border-slate-200'); if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50'); else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50'); else btn.classList.add('border-red-400', 'bg-red-50'); } // Evaluasi const evaluasiBank = [ { q: `<span>Hasil dari 4√<span class="border-t-2 border-slate-800 pt-1">3</span> + 2√<span class="border-t-2 border-slate-800 pt-1">3</span> adalah...</span>`, options: [`<span>6√<span class="border-t-2 border-slate-700 pt-1">6</span></span>`, `<span>8√<span class="border-t-2 border-slate-700 pt-1">3</span></span>`, `<span>6√<span class="border-t-2 border-slate-700 pt-1">3</span></span>`, `<span>8√<span class="border-t-2 border-slate-700 pt-1">9</span></span>`], a: 2, exp: "Penjumlahan suku sejenis: (4 + 2)√3 = <b>6√3</b>." }, { q: `<span>Hasil dari √<span class="border-t-2 border-slate-800 pt-1">5</span> × √<span class="border-t-2 border-slate-800 pt-1">4</span> adalah...</span>`, options: [`<span>√<span class="border-t-2 border-slate-700 pt-1">9</span></span>`, `<span>√<span class="border-t-2 border-slate-700 pt-1">20</span></span>`, `<span>2√<span class="border-t-2 border-slate-700 pt-1">5</span></span>`, `<span>B dan C benar</span>`], a: 3, exp: "√5 × √4 = √20. Bentuk sederhana dari √20 adalah √(4 × 5) = <b>2√5</b>. Maka pilihan B & C benar." }, { q: `<div class="flex flex-col items-center"><span class="mb-2">Bentuk rasional dari</span><div class="flex flex-col items-center bg-slate-100 px-4 py-2 rounded-xl"><span>15</span><div class="w-8 h-0.5 bg-slate-800 my-1"></div><span>√<span class="border-t-2 border-slate-800 pt-1">3</span></span></div><span class="mt-2">adalah...</span></div>`, options: [`<span>3√<span class="border-t-2 border-slate-700 pt-1">15</span></span>`, `<span>15√<span class="border-t-2 border-slate-700 pt-1">3</span></span>`, `<span>5</span>`, `<span>5√<span class="border-t-2 border-slate-700 pt-1">3</span></span>`], a: 3, exp: "(15 / √3) × (√3 / √3) = 15√3 / 3 = <b>5√3</b>." }, { q: `<span>Sebuah kebun persegi punya sisi panjangnya 5√<span class="border-t-2 border-slate-800 pt-1">2</span> m. Luasnya?</span>`, options: [`<span>10 m<sup>2</sup></span>`, `<span>50 m<sup>2</sup></span>`, `<span>25√<span class="border-t-2 border-slate-700 pt-1">4</span> m<sup>2</sup></span>`, `<span>B dan C benar</span>`], a: 3, exp: "Luas = sisi × sisi = (5√2) × (5√2) = (5 × 5) × (√2 × √2) = 25 × 2 = 50 m<sup>2</sup>." }, { q: `<span>Diketahui virus berkembang biak jadi 2x lipat tiap jam. Awalnya ada 5 virus. Berapa virus setelah 4 jam?</span>`, options: [`<span>40 virus</span>`, `<span>80 virus</span>`, `<span>20 virus</span>`, `<span>100 virus</span>`], a: 1, exp: "Jumlah = 5 × 2<sup>4</sup> = 5 × 16 = <b>80 virus</b>." } ]; let evalIndex = 0; let evalSkor = 0; function loadEvaluasi() { if(evalIndex >= evaluasiBank.length) { document.getElementById('evaluasi-section').classList.add('hidden'); document.getElementById('lms-section').classList.remove('hidden'); document.getElementById('lms-section').classList.add('flex'); document.getElementById('final-score-display').innerText = evalSkor; return; } document.getElementById('eval-feedback').classList.add('hidden'); const current = evaluasiBank[evalIndex]; document.getElementById('eval-q-num').innerText = evalIndex + 1; document.getElementById('eval-q-text').innerHTML = current.q; const optsContainer = document.getElementById('eval-options'); optsContainer.innerHTML = ""; current.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-xl math-box hover:bg-orange-50 hover:border-orange-300 transition flex items-center cursor-pointer"; btn.innerHTML = opt; btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp); optsContainer.appendChild(btn); }); } function checkEvaluasi(selected, correct, btn, explanation) { const btns = document.getElementById('eval-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('eval-feedback'); fb.classList.remove('hidden'); if(selected === correct) { btn.classList.replace('bg-slate-50', 'bg-green-500'); btn.classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`; evalSkor += 20; } else { btn.classList.replace('bg-slate-50', 'bg-red-500'); btn.classList.replace('text-slate-700', 'text-white'); btns[correct].classList.replace('bg-slate-50', 'bg-green-500'); btns[correct].classList.replace('text-slate-700', 'text-white'); fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`; } setTimeout(() => { evalIndex++; loadEvaluasi(); }, 4000); // Jeda 4 detik agar cukup membaca pembahasan } loadEvaluasi(); function kirimNilaiKeLMS() { const nama = document.getElementById('input-nama').value.trim(); if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const refleksi = document.getElementById('refleksi-teks').value || "Misi Puncak Selesai!"; if (window.parent && window.parent !== window) { window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama, skor: evalSkor, baterai: baterai, hambatan: "Refleksi Misi Puncak: " + refleksi, strategi: "Evaluasi Part 3: Operasi Akar & Masalah Kontekstual" }, "*"); } else { alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama); } } </script> </body> </html>

Kelas 8 Matematika

Bilangan Berpangkat 2 : Bentuk Baku dan Akar

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matematika Kelas 8: Operasi, Bentuk Baku & Akar 🚀</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #f0fdf4; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; } .btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; } .math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; } /* Nav Buttons */ .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-emerald-500 p-2 rounded-xl shadow-sm text-white"> <i data-lucide="sigma" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Eksplorasi Lanjutan (Part 2)</span> <span id="progress-text" class="text-xs font-black text-white bg-emerald-500 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-3xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm"> Fase D - Kelas 8 SMP </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Operasi, Bentuk Baku & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Bentuk Akar</span> 🌳 </h1> <div class="bg-white p-6 rounded-3xl border-2 border-emerald-100 shadow-md text-left mt-6"> <h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-pink-500"></i> Tujuan Pembelajaran Kita:</h3> <ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4"> <li>Dapat <span class="text-emerald-600">menerapkan operasi</span> penjumlahan, pengurangan, perkalian & pembagian pangkat.</li> <li>Dapat <span class="text-emerald-600">menentukan bentuk baku</span> (notasi ilmiah) dari suatu bilangan.</li> <li>Dapat <span class="text-emerald-600">mengevaluasi konsep bilangan bentuk akar</span> beserta contohnya.</li> </ol> </div> <p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Lanjutkan petualangan matematikamu! 👇</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Operasi Pangkat: Hati-Hati! ⚠️</h2> </div> <div class="bg-white p-8 rounded-[2rem] shadow-sm border-2 border-slate-200 mt-4 space-y-6"> <p class="text-xl font-bold text-slate-700">Untuk <b>Penjumlahan</b> dan <b>Pengurangan</b>, kita <span class="bg-rose-200 px-2 rounded text-rose-900">TIDAK BISA</span> langsung menjumlahkan pangkatnya!</p> <div class="grid md:grid-cols-2 gap-6"> <div class="bg-rose-50 p-5 rounded-2xl border-2 border-rose-200 relative overflow-hidden"> <div class="absolute top-0 right-0 bg-rose-500 text-white px-3 py-1 font-black rounded-bl-xl">SALAH ❌</div> <h4 class="font-black text-rose-800 mb-2 mt-4">Jangan Lakukan Ini:</h4> <p class="text-xl math-box text-slate-500 line-through">2<sup>3</sup> + 2<sup>2</sup> = 2<sup>5</sup></p> <p class="text-sm font-bold text-rose-600 mt-2">Pangkat hanya ditambah jika dikali (×), bukan ditambah (+).</p> </div> <div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 relative overflow-hidden"> <div class="absolute top-0 right-0 bg-emerald-500 text-white px-3 py-1 font-black rounded-bl-xl">BENAR ✅</div> <h4 class="font-black text-emerald-800 mb-2 mt-4">Hitung Dulu Nilainya:</h4> <p class="text-xl math-box text-slate-800">2<sup>3</sup> + 2<sup>2</sup> = 8 + 4 = <span class="text-emerald-700 text-3xl">12</span></p> <p class="text-sm font-bold text-emerald-700 mt-2">Hitung hasil masing-masing, baru dijumlahkan/dikurangkan.</p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-emerald-600">Operasi Hitung</span> 🎮</h2> <p class="text-lg font-bold text-slate-500 mt-2">Hitung nilainya dulu, jangan sampai terjebak!</p> <div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full"> <span class="text-xl">🔥</span> <span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center"> <p class="text-lg font-bold text-slate-500 mb-4">Berapakah hasil akhir dari:</p> <div id="q1-text" class="text-5xl math-box text-emerald-700 mb-8">?</div> <div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div> <div id="q1-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div> <button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Bentuk Baku (Notasi Ilmiah) 🔬</h2> <p class="text-lg font-bold text-slate-500 mt-2">Cara singkat menulis angka yang super besar atau super kecil!</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm mt-4"> <div class="bg-blue-50 p-6 rounded-xl text-center mb-6"> <p class="text-3xl math-box text-blue-900 mb-2">a × 10<sup>n</sup></p> <p class="font-bold text-slate-600">Syarat Penting: Angka <b>a</b> harus mulai dari 1 dan kurang dari 10 <br><span class="text-blue-600">(1 ≤ a < 10)</span></p> </div> <div class="grid md:grid-cols-2 gap-6"> <div class="p-4 border-2 border-slate-100 rounded-2xl"> <h4 class="font-black text-slate-700 mb-2">Angka Sangat Besar (Pangkat Positif)</h4> <p class="text-lg text-slate-600">Jarak bumi ke matahari: 150.000.000 km</p> <div class="flex items-center gap-3 mt-2"> <span class="text-2xl">➡️</span> <p class="text-2xl math-box text-blue-700 bg-blue-50 px-3 py-1 rounded-lg">1,5 × 10<sup>8</sup></p> </div> </div> <div class="p-4 border-2 border-slate-100 rounded-2xl"> <h4 class="font-black text-slate-700 mb-2">Angka Sangat Kecil (Pangkat Negatif)</h4> <p class="text-lg text-slate-600">Ukuran bakteri: 0,0000032 meter</p> <div class="flex items-center gap-3 mt-2"> <span class="text-2xl">➡️</span> <p class="text-2xl math-box text-pink-700 bg-pink-50 px-3 py-1 rounded-lg">3,2 × 10<sup>-6</sup></p> </div> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-blue-600">Notasi Ilmiah</span> 🎮</h2> <div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full"> <span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center"> <p class="text-lg font-bold text-slate-500 mb-4">Ubah ke Bentuk Baku (Notasi Ilmiah):</p> <div id="q2-text" class="text-5xl math-box text-blue-700 mb-8 font-black tracking-wider">?</div> <div id="q2-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div> <div id="q2-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div> <button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Mengenal Bentuk Akar 🌳</h2> </div> <div class="grid md:grid-cols-2 gap-6 mt-4"> <div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm"> <h4 class="font-black text-teal-800 text-2xl mb-4">Apa itu Akar?</h4> <p class="text-lg font-bold text-slate-700 mb-4">Akar adalah <span class="bg-teal-100 px-2 rounded">kebalikan dari pangkat</span>.</p> <div class="bg-teal-50 p-4 rounded-xl text-center mb-4"> <p class="text-2xl math-box text-teal-900">√<span class="border-t-2 border-teal-900 pt-1">25</span> = 5</p> <p class="text-sm font-bold text-slate-500 mt-1">karena 5<sup>2</sup> = 25</p> </div> <p class="text-slate-600 font-bold">Contoh lain: √81 = 9, √100 = 10.</p> </div> <div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm relative"> <h4 class="font-black text-amber-800 text-2xl mb-4">Hati-Hati! 🕵️‍♂️</h4> <p class="text-lg font-bold text-slate-700 mb-4">Tidak semua yang ada tanda akarnya disebut "Bilangan Bentuk Akar".</p> <ul class="space-y-4 font-bold"> <li class="flex gap-3"> <span class="text-xl">✅</span> <div><span class="math-box bg-slate-100 px-1">√3</span> atau <span class="math-box bg-slate-100 px-1">√7</span> adalah <b>Bentuk Akar</b> (karena hasilnya desimal tak berujung).</div> </li> <li class="flex gap-3"> <span class="text-xl">❌</span> <div><span class="math-box bg-slate-100 px-1">√4</span> atau <span class="math-box bg-slate-100 px-1">√9</span> <b>BUKAN</b> Bentuk Akar (karena hasilnya bilangan bulat 2 dan 3).</div> </li> </ul> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-teal-600">Evaluasi Akar</span> 🎮</h2> <div class="mt-4 inline-flex items-center gap-3 bg-teal-100 border-2 border-teal-400 px-6 py-2 rounded-full"> <span class="font-black text-teal-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center"> <p class="text-lg font-bold text-slate-500 mb-4">Hitunglah nilai dari ekspresi berikut:</p> <div id="q3-text" class="text-5xl math-box text-teal-700 mb-8">?</div> <div id="q3-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div> <div id="q3-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div> <button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-teal-600 text-white rounded-2xl font-black text-xl hover:bg-teal-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">⚔️ BATTLE KUIS KELOMPOK ⚔️</h2> <p class="text-xl font-bold text-slate-600 mt-2">Ayo, 3 siswa perwakilan maju! Siapa yang paling cepat & tepat?</p> </div> <div class="grid md:grid-cols-3 gap-6 mt-4">  <div class="bg-white p-6 rounded-3xl border-4 border-rose-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden"> <div class="bg-rose-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 1 (Operasi)</div> <div class="mt-12 flex-1 flex flex-col justify-center"> <p id="battle-q1" class="text-4xl math-box text-rose-800 mb-6 font-bold leading-relaxed"></p> <div id="battle-ans1" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div> </div> <button onclick="revealBattle(1)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button> </div>  <div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden"> <div class="bg-blue-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 2 (Notasi)</div> <div class="mt-12 flex-1 flex flex-col justify-center"> <p id="battle-q2" class="text-3xl math-box text-blue-800 mb-6 font-bold leading-relaxed tracking-wider"></p> <div id="battle-ans2" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div> </div> <button onclick="revealBattle(2)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button> </div>  <div class="bg-white p-6 rounded-3xl border-4 border-amber-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden"> <div class="bg-amber-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 3 (Akar)</div> <div class="mt-12 flex-1 flex flex-col justify-center"> <p id="battle-q3" class="text-4xl math-box text-amber-800 mb-6 font-bold leading-relaxed"></p> <div id="battle-ans3" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div> </div> <button onclick="revealBattle(3)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button> </div> </div> <div class="text-center mt-6"> <button onclick="generateBattle()" class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xl rounded-full shadow-lg transition transform hover:scale-105">🔄 Acak Soal Battle Baru</button> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2> <p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang materi Bentuk Baku dan Akar hari ini?</p> </div> <div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl"> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center"> <div class="text-6xl mb-2">🤩</div> <h3 class="font-black text-xl text-slate-700">Paham Banget!</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center"> <div class="text-6xl mb-2">🤔</div> <h3 class="font-black text-xl text-slate-700">Lumayan Paham</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center"> <div class="text-6xl mb-2">😵‍💫</div> <h3 class="font-black text-xl text-slate-700">Masih Bingung</h3> </button> </div> <div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-700 mb-2">Ceritakan singkat, apa yang membuatmu bingung atau tertarik?</label> <textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-emerald-400 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div id="evaluasi-section" class="w-full text-center"> <h2 class="text-4xl font-black text-slate-900 mb-2">📝 Latihan Soal Evaluasi Akhir</h2> <p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal di bawah ini untuk melihat hasil akhirmu.</p> <div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-md text-left"> <div class="flex justify-between items-center mb-4"> <span class="font-black text-emerald-700 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span> </div> <p id="eval-q-text" class="text-2xl font-bold text-slate-800 math-box mb-6 leading-relaxed"></p> <div id="eval-options" class="space-y-3">  </div> </div> </div>  <div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center"> <div class="text-7xl mb-4 animate-bounce">🏆</div> <h2 class="text-4xl font-black text-emerald-900 mb-2">Hebat! Evaluasi Selesai.</h2> <p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-green-600 text-5xl bg-green-100 px-4 py-1 rounded-xl inline-block ml-2"></span></p> <div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left"> <p class="font-bold text-slate-500 text-center mb-4">Silakan isi data untuk direkam ke sistem Bapak/Ibu Guru.</p> <div> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap</label> <input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50"> </div> <div> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Persentase Pemahaman</label> <select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500"> <option value="100">100% - Paham Semua</option> <option value="75">75% - Paham Sebagian Besar</option> <option value="50">50% - Perlu Belajar Lagi</option> <option value="25">25% - Banyak Bingungnya</option> </select> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1"> Kirim Nilai ke Guru 🚀 </button> </div> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]"> <span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.classList.add('hidden'); } else { nextBtn.disabled = false; nextBtn.classList.remove('hidden'); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); // Utils function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // ========================================== // KUIS AUTO 1: Operasi (Penjumlahan/Pengurangan) // ========================================== let countQ1 = 0; function generateQ1() { document.getElementById('q1-feedback').classList.add('hidden'); document.getElementById('q1-next-btn').classList.add('hidden'); let isPlus = Math.random() > 0.5; let base = Math.floor(Math.random() * 4) + 2; // 2 to 5 let exp1 = Math.floor(Math.random() * 3) + 1; // 1 to 3 let exp2 = Math.floor(Math.random() * 3) + 1; // To avoid negative results for simplicity if (!isPlus && Math.pow(base, exp1) < Math.pow(base, exp2)) { let temp = exp1; exp1 = exp2; exp2 = temp; } let correctAns = isPlus ? Math.pow(base, exp1) + Math.pow(base, exp2) : Math.pow(base, exp1) - Math.pow(base, exp2); document.getElementById('q1-text').innerHTML = `${base}<sup>${exp1}</sup> ${isPlus ? '+' : '-'} ${base}<sup>${exp2}</sup> = ... ?`; let options = [correctAns]; while (options.length < 4) { let wrong; if(Math.random() > 0.5) { wrong = Math.pow(base, isPlus ? exp1 + exp2 : Math.max(exp1 - exp2, 0)); // Jebakan sifat kali/bagi } else { wrong = correctAns + (Math.floor(Math.random() * 10) + 1) * (Math.random() > 0.5 ? 1 : -1); } if (wrong !== correctAns && wrong >= 0 && !options.includes(wrong)) { options.push(wrong); } } options = shuffle(options); let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ1(this, ${opt === correctAns})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 transition">${opt}</button>`; }); document.getElementById('q1-options').innerHTML = optHtml; } function checkQ1(btn, isCorrect) { const btns = document.getElementById('q1-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q1-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "🎉 Benar! Kamu tidak terkecoh."; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = "😅 Ingat, tambah/kurang harus dihitung dulu nilainya."; } countQ1++; document.getElementById('count-q1').innerText = countQ1; document.getElementById('q1-next-btn').classList.remove('hidden'); } generateQ1(); // ========================================== // KUIS AUTO 2: Notasi Ilmiah // ========================================== let countQ2 = 0; function generateQ2() { document.getElementById('q2-feedback').classList.add('hidden'); document.getElementById('q2-next-btn').classList.add('hidden'); let isBig = Math.random() > 0.5; let a = Math.floor(Math.random() * 8) + 2; // 2-9 let b = Math.floor(Math.random() * 9) + 1; // 1-9 let exp = Math.floor(Math.random() * 4) + 4; // 4-7 let qText, correctHtml, options; if (isBig) { let zeros = "0".repeat(exp - 1); qText = `${a}${b}${zeros}`; // format with dots for readability: e.g. 45000 -> 45.000 qText = Number(qText).toLocaleString('id-ID'); correctHtml = `${a},${b} × 10<sup>${exp}</sup>`; options = [ { html: correctHtml, isC: true }, { html: `${a},${b} × 10<sup>${exp - 1}</sup>`, isC: false }, { html: `${a}${b} × 10<sup>${exp - 1}</sup>`, isC: false }, // tidak baku (a >= 10) { html: `${a},${b} × 10<sup>-${exp}</sup>`, isC: false } ]; } else { let zeros = "0".repeat(exp - 1); qText = `0,${zeros}${a}${b}`; correctHtml = `${a},${b} × 10<sup>-${exp}</sup>`; options = [ { html: correctHtml, isC: true }, { html: `${a},${b} × 10<sup>${exp}</sup>`, isC: false }, { html: `0,${a}${b} × 10<sup>-${exp - 1}</sup>`, isC: false }, // tidak baku { html: `${a},${b} × 10<sup>-${exp - 1}</sup>`, isC: false } ]; } document.getElementById('q2-text').innerHTML = qText; options = shuffle(options); let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ2(this, ${opt.isC})" class="guess-btn w-full py-5 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt.html}</button>`; }); document.getElementById('q2-options').innerHTML = optHtml; } function checkQ2(btn, isCorrect) { const btns = document.getElementById('q2-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q2-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "🎉 Cerdas! Notasi ilmiah memang begitu aturannya."; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = "😅 Cek letak koma dan jumlah pangkatnya ya."; } countQ2++; document.getElementById('count-q2').innerText = countQ2; document.getElementById('q2-next-btn').classList.remove('hidden'); } generateQ2(); // ========================================== // KUIS AUTO 3: Akar // ========================================== let countQ3 = 0; function generateQ3() { document.getElementById('q3-feedback').classList.add('hidden'); document.getElementById('q3-next-btn').classList.add('hidden'); let perfectSquares = [4, 9, 16, 25, 36, 49, 64, 81, 100]; let n1 = perfectSquares[Math.floor(Math.random() * perfectSquares.length)]; let n2 = perfectSquares[Math.floor(Math.random() * perfectSquares.length)]; let isPlus = Math.random() > 0.5; // Avoid negative result if(!isPlus && n1 < n2) { let temp = n1; n1 = n2; n2 = temp; } let correctAns = isPlus ? Math.sqrt(n1) + Math.sqrt(n2) : Math.sqrt(n1) - Math.sqrt(n2); document.getElementById('q3-text').innerHTML = `√<span class="border-t-2 border-teal-700 pt-1">${n1}</span> ${isPlus?'+':'-'} √<span class="border-t-2 border-teal-700 pt-1">${n2}</span> = ... ?`; let options = [correctAns]; while (options.length < 4) { // Trap: what if they just add/sub the inside numbers and then root? Or just add/sub inside numbers? let wrong1 = isPlus ? n1 + n2 : n1 - n2; let wrong2 = correctAns + Math.floor(Math.random()*5) + 1; let wrong3 = correctAns - Math.floor(Math.random()*3) - 1; let w = [wrong1, wrong2, wrong3][Math.floor(Math.random()*3)]; if (w !== correctAns && w >= 0 && !options.includes(w)) { options.push(w); } } options = shuffle(options); let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ3(this, ${opt === correctAns})" class="guess-btn w-full py-5 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt}</button>`; }); document.getElementById('q3-options').innerHTML = optHtml; } function checkQ3(btn, isCorrect) { const btns = document.getElementById('q3-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q3-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "🎉 Benar! Gampang kan mencari akarnya?"; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = "😅 Hitung akarnya satu-satu dulu baru dijumlah/dikurang."; } countQ3++; document.getElementById('count-q3').innerText = countQ3; document.getElementById('q3-next-btn').classList.remove('hidden'); } generateQ3(); // ========================================== // KUIS BATTLE KELOMPOK // ========================================== function generateBattle() { // P1: Operasi (e.g. 2^3 + 2^2) let base = Math.floor(Math.random()*3)+2; let m1 = Math.floor(Math.random()*3)+1; let m2 = Math.floor(Math.random()*2)+1; let ans1 = Math.pow(base, m1) + Math.pow(base, m2); document.getElementById(`battle-q1`).innerHTML = `${base}<sup>${m1}</sup> + ${base}<sup>${m2}</sup>`; document.getElementById(`battle-ans1`).innerHTML = `${ans1}`; document.getElementById(`battle-ans1`).classList.add('hidden'); // P2: Baku (e.g. 35000 -> 3,5 x 10^4) let a2 = Math.floor(Math.random()*8)+2; let b2 = Math.floor(Math.random()*9)+1; let e2 = Math.floor(Math.random()*3)+3; let str2 = a2 + "" + b2 + "0".repeat(e2-1); document.getElementById(`battle-q2`).innerHTML = Number(str2).toLocaleString('id-ID'); document.getElementById(`battle-ans2`).innerHTML = `${a2},${b2} × 10<sup>${e2}</sup>`; document.getElementById(`battle-ans2`).classList.add('hidden'); // P3: Akar (e.g. sqrt(100) - sqrt(36)) let pSqs = [16, 25, 36, 49, 64, 81, 100]; let sq1 = pSqs[Math.floor(Math.random()*pSqs.length)]; let sq2 = pSqs[Math.floor(Math.random()*3)]; // pick smaller one for sub document.getElementById(`battle-q3`).innerHTML = `√<span class="border-t-2 border-amber-800 pt-1">${sq1}</span> - √<span class="border-t-2 border-amber-800 pt-1">${sq2}</span>`; document.getElementById(`battle-ans3`).innerHTML = `${Math.sqrt(sq1) - Math.sqrt(sq2)}`; document.getElementById(`battle-ans3`).classList.add('hidden'); } function revealBattle(i) { document.getElementById(`battle-ans${i}`).classList.remove('hidden'); } generateBattle(); // ========================================== // REFLEKSI // ========================================== function pilihRefleksi(btn) { const btns = document.querySelectorAll('.refleksi-btn'); btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); }); btn.classList.remove('border-slate-200'); if(btn.innerText.includes('Paham Banget')) btn.classList.add('border-green-400', 'bg-green-50'); else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50'); else btn.classList.add('border-red-400', 'bg-red-50'); } // ========================================== // LATIHAN SOAL (EVALUASI) & LMS // ========================================== const evaluasiBank = [ { q: "Hasil dari 2<sup>4</sup> + 2<sup>2</sup> adalah...", options: ["20", "64", "16", "32"], a: 0 }, { q: "Bentuk baku dari bilangan 125.000.000 adalah...", options: ["1,25 × 10<sup>6</sup>", "1,25 × 10<sup>8</sup>", "12,5 × 10<sup>7</sup>", "0,125 × 10<sup>9</sup>"], a: 1 }, { q: "Bentuk baku dari bilangan 0,000056 adalah...", options: ["5,6 × 10<sup>-4</sup>", "5,6 × 10<sup>5</sup>", "56 × 10<sup>-6</sup>", "5,6 × 10<sup>-5</sup>"], a: 3 }, { q: "Hasil dari √<span class='border-t-2 border-slate-800 pt-1'>144</span> - √<span class='border-t-2 border-slate-800 pt-1'>36</span> adalah...", options: ["6", "√108", "8", "12"], a: 0 }, { q: "Manakah di bawah ini yang <b>BUKAN</b> merupakan bilangan bentuk akar?", options: ["√7", "√15", "√49", "√20"], a: 2 } ]; let evalIndex = 0; let evalSkor = 0; function loadEvaluasi() { if(evalIndex >= evaluasiBank.length) { document.getElementById('evaluasi-section').classList.add('hidden'); document.getElementById('lms-section').classList.remove('hidden'); document.getElementById('lms-section').classList.add('flex'); document.getElementById('final-score-display').innerText = evalSkor; return; } const current = evaluasiBank[evalIndex]; document.getElementById('eval-q-num').innerText = evalIndex + 1; document.getElementById('eval-q-text').innerHTML = current.q; const optsContainer = document.getElementById('eval-options'); optsContainer.innerHTML = ""; current.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-xl math-box hover:bg-emerald-50 hover:border-emerald-300 transition"; btn.innerHTML = opt; btn.onclick = () => checkEvaluasi(idx, current.a, btn); optsContainer.appendChild(btn); }); } function checkEvaluasi(selected, correct, btn) { const btns = document.getElementById('eval-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); if(selected === correct) { btn.classList.replace('bg-slate-50', 'bg-green-500'); btn.classList.replace('text-slate-700', 'text-white'); evalSkor += 20; } else { btn.classList.replace('bg-slate-50', 'bg-red-500'); btn.classList.replace('text-slate-700', 'text-white'); btns[correct].classList.replace('bg-slate-50', 'bg-green-500'); btns[correct].classList.replace('text-slate-700', 'text-white'); } setTimeout(() => { evalIndex++; loadEvaluasi(); }, 1500); } loadEvaluasi(); // Integrasi LMS function kirimNilaiKeLMS() { const nama = document.getElementById('input-nama').value.trim(); if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const refleksi = document.getElementById('refleksi-teks').value || "Sudah cukup mengerti."; if (window.parent && window.parent !== window) { window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama, skor: evalSkor, baterai: baterai, hambatan: "Refleksi: " + refleksi, strategi: "Evaluasi Part 2: Operasi, Bentuk Baku & Akar" }, "*"); } else { alert("Simulasi berhasil! Jika ini dibuka di dalam LMS, nilaimu otomatis terekam.\n\nSkor: " + evalSkor + "\nNama: " + nama); } } </script> </body> </html>

Kelas 8 Matematika

Bilangan Berpangkat 1

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matematika Kelas 8: Bilangan Berpangkat 🚀</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #f8fafc; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; } .btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; } .math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; } /* Nav Buttons */ .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-indigo-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-indigo-500 p-2 rounded-xl shadow-sm text-white"> <i data-lucide="calculator" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-indigo-800 uppercase tracking-widest">Matematika - Bilangan Berpangkat</span> <span id="progress-text" class="text-xs font-black text-white bg-indigo-500 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-blue-400 via-indigo-500 to-purple-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-3xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-indigo-100 text-indigo-900 text-sm font-black uppercase tracking-widest shadow-sm"> Fase D - Kelas 8 SMP </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Eksplorasi <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Bilangan Berpangkat</span> 🔢 </h1> <div class="bg-white p-6 rounded-3xl border-2 border-indigo-100 shadow-md text-left mt-6"> <h3 class="font-black text-xl text-indigo-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-pink-500"></i> Tujuan Pembelajaran Kita Hari Ini:</h3> <ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4"> <li>Peserta didik dapat <span class="text-indigo-600">menjelaskan konsep bilangan berpangkat bulat</span> dengan memberikan contoh yang sesuai.</li> <li>Peserta didik dapat <span class="text-indigo-600">menganalisis sifat-sifat bilangan berpangkat bulat</span> berdasarkan aturan yang berlaku.</li> </ol> </div> <p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap belajar dengan seru? Yuk, kita mulai! 👇</p> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Konsep Dasar Berpangkat 🧠</h2> </div> <div class="bg-white p-8 rounded-[2rem] shadow-sm border-2 border-slate-200 mt-4 space-y-6"> <p class="text-xl font-bold text-slate-700">Bilangan berpangkat adalah <span class="bg-yellow-200 px-2 rounded">perkalian berulang</span> dari suatu bilangan yang sama.</p> <div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-200 text-center"> <p class="text-4xl math-box text-indigo-700">a<sup>n</sup> = a × a × a × ... × a</p> <p class="text-lg font-bold text-slate-500 mt-2">(sebanyak n kali)</p> </div> <div class="grid md:grid-cols-2 gap-6"> <div class="bg-blue-50 p-5 rounded-2xl border-2 border-blue-200"> <h4 class="font-black text-blue-800 mb-2">Contoh Pangkat Positif</h4> <p class="text-2xl math-box text-slate-800">2<sup>3</sup> = 2 × 2 × 2 = 8</p> <p class="text-2xl math-box text-slate-800 mt-2">5<sup>2</sup> = 5 × 5 = 25</p> </div> <div class="bg-pink-50 p-5 rounded-2xl border-2 border-pink-200"> <h4 class="font-black text-pink-800 mb-2">Sifat Spesial (Pangkat Nol)</h4> <p class="text-lg font-bold text-slate-700">Semua bilangan (kecuali 0) jika dipangkatkan 0 hasilnya 1.</p> <p class="text-3xl math-box text-slate-800 mt-2">100<sup>0</sup> = 1</p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-indigo-600">Konsep Dasar</span> 🎮</h2> <p class="text-lg font-bold text-slate-500 mt-2">Kerjakan sepuasmu! Soal akan terus muncul otomatis.</p> <div class="mt-4 inline-flex items-center gap-3 bg-indigo-100 border-2 border-indigo-400 px-6 py-2 rounded-full"> <span class="text-xl">🔥</span> <span class="font-black text-indigo-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center"> <p class="text-lg font-bold text-slate-500 mb-4">Berapakah hasil dari:</p> <div id="q1-text" class="text-6xl math-box text-indigo-700 mb-8">?</div> <div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">  </div> <div id="q1-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div> <button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-indigo-600 text-white rounded-2xl font-black text-xl hover:bg-indigo-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Sifat 1 & 2: Kali & Bagi ✖️➗</h2> <p class="text-lg font-bold text-slate-500 mt-2">Perhatikan pola aturannya. Sangat mudah lho!</p> </div> <div class="grid md:grid-cols-2 gap-6 mt-4">  <div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm"> <div class="bg-blue-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Sifat Perkalian</div> <p class="text-lg font-bold text-slate-700 mb-2">Jika basisnya sama, pangkatnya <span class="text-blue-600">DITAMBAH</span>.</p> <div class="bg-blue-50 p-4 rounded-xl text-center mb-4"> <p class="text-2xl math-box text-blue-900">a<sup>m</sup> × a<sup>n</sup> = a<sup>m+n</sup></p> </div> <p class="font-bold text-slate-600">Contoh:</p> <p class="text-xl math-box text-slate-800">2<sup>3</sup> × 2<sup>4</sup> = 2<sup>3+4</sup> = 2<sup>7</sup></p> </div>  <div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-sm"> <div class="bg-pink-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Sifat Pembagian</div> <p class="text-lg font-bold text-slate-700 mb-2">Jika basisnya sama, pangkatnya <span class="text-pink-600">DIKURANGI</span>.</p> <div class="bg-pink-50 p-4 rounded-xl text-center mb-4"> <p class="text-2xl math-box text-pink-900">a<sup>m</sup> ÷ a<sup>n</sup> = a<sup>m-n</sup></p> </div> <p class="font-bold text-slate-600">Contoh:</p> <p class="text-xl math-box text-slate-800">5<sup>6</sup> ÷ 5<sup>2</sup> = 5<sup>6-2</sup> = 5<sup>4</sup></p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-blue-600">Sifat Kali & Bagi</span> 🎮</h2> <div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full"> <span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center"> <p class="text-lg font-bold text-slate-500 mb-4">Sederhanakan bentuk berikut:</p> <div id="q2-text" class="text-5xl math-box text-blue-700 mb-8">?</div> <div id="q2-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div> <div id="q2-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div> <button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Sifat 3 & 4: Pangkat Ekstra 🚀</h2> </div> <div class="grid md:grid-cols-2 gap-6 mt-4">  <div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm"> <div class="bg-emerald-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Pangkat Dipangkatkan</div> <p class="text-lg font-bold text-slate-700 mb-2">Pangkatnya tinggal <span class="text-emerald-600">DIKALI</span>.</p> <div class="bg-emerald-50 p-4 rounded-xl text-center mb-4"> <p class="text-2xl math-box text-emerald-900">(a<sup>m</sup>)<sup>n</sup> = a<sup>m × n</sup></p> </div> <p class="font-bold text-slate-600">Contoh:</p> <p class="text-xl math-box text-slate-800">(3<sup>2</sup>)<sup>4</sup> = 3<sup>2 × 4</sup> = 3<sup>8</sup></p> </div>  <div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm"> <div class="bg-amber-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Pangkat Negatif</div> <p class="text-lg font-bold text-slate-700 mb-2">Ubah posisi (atas ke bawah) biar pangkat jadi <span class="text-amber-600">POSITIF</span>.</p> <div class="bg-amber-50 p-4 rounded-xl text-center mb-4"> <p class="text-2xl math-box text-amber-900">a<sup>-n</sup> = 1 / a<sup>n</sup></p> </div> <p class="font-bold text-slate-600">Contoh:</p> <p class="text-xl math-box text-slate-800">2<sup>-3</sup> = 1 / 2<sup>3</sup> = 1/8</p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-emerald-600">Pangkat Ekstra</span> 🎮</h2> <div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full"> <span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span> </div> </div> <div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center"> <p class="text-lg font-bold text-slate-500 mb-4">Bentuk lain / hasil dari:</p> <div id="q3-text" class="text-5xl math-box text-emerald-700 mb-8">?</div> <div id="q3-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div> <div id="q3-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div> <button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">⚔️ BATTLE KUIS KELOMPOK ⚔️</h2> <p class="text-xl font-bold text-slate-600 mt-2">Ayo, 3 siswa perwakilan maju ke depan layar! Siapa yang paling cepat & tepat?</p> </div> <div class="grid md:grid-cols-3 gap-6 mt-4">  <div class="bg-white p-6 rounded-3xl border-4 border-rose-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden"> <div class="bg-rose-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 1</div> <div class="mt-12 flex-1 flex flex-col justify-center"> <p id="battle-q1" class="text-4xl math-box text-rose-800 mb-6 font-bold"></p> <div id="battle-ans1" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div> </div> <button onclick="revealBattle(1)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button> </div>  <div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden"> <div class="bg-blue-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 2</div> <div class="mt-12 flex-1 flex flex-col justify-center"> <p id="battle-q2" class="text-4xl math-box text-blue-800 mb-6 font-bold"></p> <div id="battle-ans2" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div> </div> <button onclick="revealBattle(2)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button> </div>  <div class="bg-white p-6 rounded-3xl border-4 border-amber-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden"> <div class="bg-amber-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 3</div> <div class="mt-12 flex-1 flex flex-col justify-center"> <p id="battle-q3" class="text-4xl math-box text-amber-800 mb-6 font-bold"></p> <div id="battle-ans3" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div> </div> <button onclick="revealBattle(3)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button> </div> </div> <div class="text-center mt-6"> <button onclick="generateBattle()" class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-black text-xl rounded-full shadow-lg transition transform hover:scale-105">🔄 Acak Soal Battle Baru</button> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2> <p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu belajar sifat eksponen hari ini?</p> </div> <div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl"> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center"> <div class="text-6xl mb-2">🤩</div> <h3 class="font-black text-xl text-slate-700">Paham Banget!</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center"> <div class="text-6xl mb-2">🤔</div> <h3 class="font-black text-xl text-slate-700">Lumayan Paham</h3> </button> <button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center"> <div class="text-6xl mb-2">😵‍💫</div> <h3 class="font-black text-xl text-slate-700">Masih Bingung</h3> </button> </div> <div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-700 mb-2">Apa bagian yang menurutmu paling menantang?</label> <textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-indigo-400 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div id="evaluasi-section" class="w-full text-center"> <h2 class="text-4xl font-black text-slate-900 mb-2">📝 Latihan Soal Evaluasi</h2> <p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal di bawah ini untuk melihat hasil akhirmu.</p> <div class="bg-white p-8 rounded-[2rem] border-4 border-indigo-200 shadow-md text-left"> <div class="flex justify-between items-center mb-4"> <span class="font-black text-indigo-600 bg-indigo-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span> </div> <p id="eval-q-text" class="text-2xl font-bold text-slate-800 math-box mb-6 leading-relaxed"></p> <div id="eval-options" class="space-y-3">  </div> </div> </div>  <div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center"> <div class="text-7xl mb-4 animate-bounce">🏆</div> <h2 class="text-4xl font-black text-indigo-900 mb-2">Hebat! Evaluasi Selesai.</h2> <p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-green-600 text-5xl bg-green-100 px-4 py-1 rounded-xl inline-block ml-2"></span></p> <div class="bg-white border-4 border-indigo-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left"> <p class="font-bold text-slate-500 text-center mb-4">Silakan isi data untuk dikirim ke sistem Bapak/Ibu Guru.</p> <div> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap</label> <input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-indigo-500 bg-slate-50"> </div> <div> <label class="block text-sm font-black text-slate-700 uppercase mb-2">Persentase Pemahaman</label> <select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-indigo-500"> <option value="100">100% - Paham Semua</option> <option value="75">75% - Paham Sebagian Besar</option> <option value="50">50% - Perlu Belajar Lagi</option> <option value="25">25% - Banyak Bingungnya</option> </select> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1"> Kirim Nilai ke Guru 🚀 </button> </div> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-indigo-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-indigo-700 shadow-[0_4px_0px_#4338ca]"> <span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); // Navigasi Slide Basic const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.classList.add('hidden'); } else { nextBtn.disabled = false; nextBtn.classList.remove('hidden'); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); // ========================================== // UTILS: Acak Array // ========================================== function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // ========================================== // KUIS AUTO 1: Konsep Dasar // ========================================== let countQ1 = 0; function generateQ1() { document.getElementById('q1-feedback').classList.add('hidden'); document.getElementById('q1-next-btn').classList.add('hidden'); let bases = [2, 3, 4, 5, 10]; let base = bases[Math.floor(Math.random() * bases.length)]; let exp = Math.floor(Math.random() * 4) + 1; // 1 to 4 // Variasi sifat pangkat nol if (Math.random() > 0.8) exp = 0; let correctAns = Math.pow(base, exp); document.getElementById('q1-text').innerHTML = `${base}<sup>${exp}</sup> = ... ?`; let options = [correctAns]; while (options.length < 4) { let wrong = correctAns + Math.floor(Math.random() * 20) - 10; if (wrong === correctAns || wrong < 0 || options.includes(wrong)) { wrong = base * exp; // Kesalahan umum siswa if(wrong === correctAns) wrong += 5; } if (!options.includes(wrong)) options.push(wrong); } options = shuffle(options); let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ1(this, ${opt === correctAns})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 transition">${opt}</button>`; }); document.getElementById('q1-options').innerHTML = optHtml; } function checkQ1(btn, isCorrect) { const btns = document.getElementById('q1-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q1-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "🎉 Benar! Hebat sekali."; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = "😅 Kurang tepat, ayo coba lagi!"; } countQ1++; document.getElementById('count-q1').innerText = countQ1; document.getElementById('q1-next-btn').classList.remove('hidden'); } generateQ1(); // Init slide 3 // ========================================== // KUIS AUTO 2: Sifat Kali & Bagi // ========================================== let countQ2 = 0; function generateQ2() { document.getElementById('q2-feedback').classList.add('hidden'); document.getElementById('q2-next-btn').classList.add('hidden'); let isKali = Math.random() > 0.5; let base = ["a", "p", "x", "y", "m"][Math.floor(Math.random() * 5)]; let m = Math.floor(Math.random() * 5) + 3; let n = Math.floor(Math.random() * 4) + 1; let qText, correctAnsExp; if (isKali) { qText = `${base}<sup>${m}</sup> × ${base}<sup>${n}</sup>`; correctAnsExp = m + n; } else { qText = `${base}<sup>${m}</sup> ÷ ${base}<sup>${n}</sup>`; correctAnsExp = m - n; } document.getElementById('q2-text').innerHTML = `${qText} = ... ?`; let correctHtml = `${base}<sup>${correctAnsExp}</sup>`; let options = [ { exp: correctAnsExp, isC: true }, { exp: isKali ? m - n : m + n, isC: false }, // kebalik sifat { exp: m * n, isC: false }, // dikali pangkatnya { exp: isKali ? m + n + 1 : m - n - 1, isC: false } ]; // Remove duplicates logic (simplified) options = shuffle(options); let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ2(this, ${opt.isC})" class="guess-btn w-full py-6 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-3xl border-b-4 border-slate-300 math-box transition">${base}<sup>${opt.exp}</sup></button>`; }); document.getElementById('q2-options').innerHTML = optHtml; } function checkQ2(btn, isCorrect) { const btns = document.getElementById('q2-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q2-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "🎉 Mantap! Ingat sifatnya ya."; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = "😅 Coba dicek lagi aturannya (Tambah atau Kurang)."; } countQ2++; document.getElementById('count-q2').innerText = countQ2; document.getElementById('q2-next-btn').classList.remove('hidden'); } generateQ2(); // Init // ========================================== // KUIS AUTO 3: Pangkat Ekstra // ========================================== let countQ3 = 0; function generateQ3() { document.getElementById('q3-feedback').classList.add('hidden'); document.getElementById('q3-next-btn').classList.add('hidden'); let isPangkatDipangkat = Math.random() > 0.5; let qText, correctHtml, options; if (isPangkatDipangkat) { let base = ["k", "x", "p"][Math.floor(Math.random() * 3)]; let m = Math.floor(Math.random() * 3) + 2; let n = Math.floor(Math.random() * 3) + 2; qText = `(${base}<sup>${m}</sup>)<sup>${n}</sup>`; correctHtml = `${base}<sup>${m*n}</sup>`; options = [ { html: correctHtml, isC: true }, { html: `${base}<sup>${m+n}</sup>`, isC: false }, // siswa malah menjumlah { html: `${base}<sup>${Math.pow(m,n)}</sup>`, isC: false }, { html: `${base}<sup>${m*n + 1}</sup>`, isC: false } ]; } else { // Pangkat Negatif let base = Math.floor(Math.random() * 4) + 2; let n = Math.floor(Math.random() * 3) + 2; qText = `${base}<sup>-${n}</sup>`; correctHtml = `1 / ${base}<sup>${n}</sup>`; options = [ { html: correctHtml, isC: true }, { html: `-${base}<sup>${n}</sup>`, isC: false }, // siswa memindahkan min ke depan { html: `1 / ${base * n}`, isC: false }, { html: `${base}<sup>${n}</sup>`, isC: false } ]; } document.getElementById('q3-text').innerHTML = `${qText} = ... ?`; options = shuffle(options); let optHtml = ""; options.forEach(opt => { optHtml += `<button onclick="checkQ3(this, ${opt.isC})" class="guess-btn w-full py-6 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt.html}</button>`; }); document.getElementById('q3-options').innerHTML = optHtml; } function checkQ3(btn, isCorrect) { const btns = document.getElementById('q3-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); const fb = document.getElementById('q3-feedback'); fb.classList.remove('hidden'); if(isCorrect) { btn.classList.add('btn-correct'); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block"; fb.innerHTML = "🎉 Luar Biasa! Kamu makin jago."; } else { btn.classList.add('btn-wrong'); btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); }); fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block"; fb.innerHTML = "😅 Jangan kecoh, ingat aturannya ya!"; } countQ3++; document.getElementById('count-q3').innerText = countQ3; document.getElementById('q3-next-btn').classList.remove('hidden'); } generateQ3(); // Init // ========================================== // KUIS BATTLE KELOMPOK // ========================================== let battleAnswers = []; function generateBattle() { battleAnswers = []; for(let i=1; i<=3; i++) { let base = Math.floor(Math.random() * 4) + 2; // 2 to 5 let m = Math.floor(Math.random() * 3) + 2; let n = Math.floor(Math.random() * 2) + 1; let tipe = Math.floor(Math.random() * 3); // 0: kali, 1: bagi, 2: pangkatin let qText, ansExp; if(tipe === 0) { qText = `${base}<sup>${m}</sup> × ${base}<sup>${n}</sup>`; ansExp = m+n; } else if(tipe === 1) { qText = `${base}<sup>${m+n}</sup> ÷ ${base}<sup>${m}</sup>`; ansExp = n; } else { qText = `(${base}<sup>${m}</sup>)<sup>${n}</sup>`; ansExp = m*n; } document.getElementById(`battle-q${i}`).innerHTML = qText; document.getElementById(`battle-ans${i}`).innerHTML = `${base}<sup>${ansExp}</sup>`; document.getElementById(`battle-ans${i}`).classList.add('hidden'); } } function revealBattle(i) { document.getElementById(`battle-ans${i}`).classList.remove('hidden'); } generateBattle(); // ========================================== // REFLEKSI // ========================================== function pilihRefleksi(btn) { const btns = document.querySelectorAll('.refleksi-btn'); btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); }); btn.classList.remove('border-slate-200'); if(btn.innerText.includes('Paham Banget')) btn.classList.add('border-green-400', 'bg-green-50'); else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50'); else btn.classList.add('border-red-400', 'bg-red-50'); } // ========================================== // LATIHAN SOAL (EVALUASI) & LMS // ========================================== const evaluasiBank = [ { q: "Hasil dari 3<sup>4</sup> adalah...", options: ["12", "81", "27", "64"], a: 1 }, { q: "Bentuk sederhana dari 2<sup>3</sup> × 2<sup>5</sup> adalah...", options: ["2<sup>15</sup>", "4<sup>8</sup>", "2<sup>8</sup>", "2<sup>2</sup>"], a: 2 }, { q: "Bentuk sederhana dari p<sup>7</sup> ÷ p<sup>4</sup> adalah...", options: ["p<sup>11</sup>", "p<sup>3</sup>", "p<sup>28</sup>", "1/p<sup>3</sup>"], a: 1 }, { q: "Hasil dari (5<sup>2</sup>)<sup>3</sup> adalah...", options: ["5<sup>5</sup>", "5<sup>6</sup>", "10<sup>3</sup>", "25<sup>3</sup>"], a: 1 }, { q: "Bentuk pangkat positif dari 3<sup>-2</sup> adalah...", options: ["1/6", "-9", "-6", "1/9"], a: 3 } ]; let evalIndex = 0; let evalSkor = 0; function loadEvaluasi() { if(evalIndex >= evaluasiBank.length) { document.getElementById('evaluasi-section').classList.add('hidden'); document.getElementById('lms-section').classList.remove('hidden'); document.getElementById('lms-section').classList.add('flex'); document.getElementById('final-score-display').innerText = evalSkor; return; } const current = evaluasiBank[evalIndex]; document.getElementById('eval-q-num').innerText = evalIndex + 1; document.getElementById('eval-q-text').innerHTML = current.q; const optsContainer = document.getElementById('eval-options'); optsContainer.innerHTML = ""; current.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-xl math-box hover:bg-indigo-50 hover:border-indigo-300 transition"; btn.innerHTML = opt; btn.onclick = () => checkEvaluasi(idx, current.a, btn); optsContainer.appendChild(btn); }); } function checkEvaluasi(selected, correct, btn) { const btns = document.getElementById('eval-options').querySelectorAll('button'); btns.forEach(b => b.disabled = true); if(selected === correct) { btn.classList.replace('bg-slate-50', 'bg-green-500'); btn.classList.replace('text-slate-700', 'text-white'); evalSkor += 20; // 5 soal @ 20 poin } else { btn.classList.replace('bg-slate-50', 'bg-red-500'); btn.classList.replace('text-slate-700', 'text-white'); btns[correct].classList.replace('bg-slate-50', 'bg-green-500'); btns[correct].classList.replace('text-slate-700', 'text-white'); } setTimeout(() => { evalIndex++; loadEvaluasi(); }, 1500); } loadEvaluasi(); // Integrasi LMS function kirimNilaiKeLMS() { const nama = document.getElementById('input-nama').value.trim(); if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const refleksi = document.getElementById('refleksi-teks').value || "Materi sudah cukup jelas."; // Format disesuaikan dengan kebutuhan LMS Bapak/Ibu (siswa.php) if (window.parent && window.parent !== window) { window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama, skor: evalSkor, baterai: baterai, hambatan: "Refleksi: " + refleksi, // Mengirim teks refleksi ke kolom hambatan/catatan strategi: "Evaluasi Bilangan Berpangkat" }, "*"); } else { alert("Simulasi berhasil! Jika ini dibuka di dalam LMS, nilaimu otomatis terekam.\n\nSkor: " + evalSkor + "\nNama: " + nama); } } </script> </body> </html>

Kelas 7 SSK

Anti Narkoba Bagi Generasi Muda

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Misi Anti-Narkoba: Generasi Keren Tanpa Narkoba! 🚫💊</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #f0fdf4; /* Soft green theme */ background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .floating { animation: float 3s ease-in-out infinite; } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .check-item { transition: all 0.2s ease; border-bottom: 4px solid #cbd5e1; cursor: pointer; } .check-item:hover { transform: translateY(-3px); border-bottom-width: 7px; border-color: #34d399; } .check-item.checked { background: linear-gradient(135deg, #059669, #10b981); color: white; border-color: #047857; transform: scale(1.03); } .guess-btn, .auto-guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active, .auto-guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; } .btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; } .text-gradient { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #059669, #3b82f6); } .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/80 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-emerald-500 p-2 rounded-xl shadow-sm rotate-3 text-white"> <i data-lucide="shield-check" class="w-6 h-6"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Misi Ketahanan Diri</span> <span id="progress-text" class="text-xs font-black text-white bg-emerald-500 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-emerald-400 via-teal-500 to-blue-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-3xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-emerald-200 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_rgba(5,150,105,1)] rotate-[-2deg]"> #SMPN72MalukuTengah #SekolahSadarKependudukan </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Muda Keren, <br><span class="text-gradient">Bebas Narkoba!</span> 🛡️✨ </h1> <p class="text-xl text-slate-600 font-bold max-w-xl mx-auto"> Kenali bahayanya, kuatkan mental dari tekanan teman, dan raih masa depan gemilang tanpa zat terlarang! </p> <img src="https://images.unsplash.com/photo-1529156069898-49953eb1b5ce?auto=format&fit=crop&w=800&q=80" alt="Generasi Muda Sehat" class="w-80 h-56 object-cover rounded-3xl mx-auto shadow-[8px_8px_0px_rgba(16,185,129,0.4)] mt-8 border-4 border-white floating"> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-emerald-900 inline-block bg-emerald-100 px-6 py-2 rounded-2xl rotate-1">Apa Sih Bahaya Narkoba Itu? ⚠️</h2> </div> <div class="grid md:grid-cols-2 gap-6 mt-4"> <div class="bg-white p-6 rounded-3xl border-2 border-red-200 shadow-sm flex flex-col justify-between"> <div> <span class="text-4xl block mb-3">🧠</span> <h3 class="font-black text-2xl text-red-600 mb-2">Merusak Otak Remaja</h3> <p class="text-slate-600 font-bold">Otak remaja masih berkembang. Narkoba bisa merusak struktur saraf permanen, bikin susah fokus, dan emosi naik turun!</p> </div> <div class="mt-4 bg-red-50 p-3 rounded-xl text-xs font-bold text-red-700">Dampak: Penurunan drastis prestasi akademik di sekolah.</div> </div> <div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm flex flex-col justify-between"> <div> <span class="text-4xl block mb-3">💔</span> <h3 class="font-black text-2xl text-amber-600 mb-2">Hancurnya Masa Depan</h3> <p class="text-slate-600 font-bold">Bukan cuma fisik dan organ dalam yang rusak, narkoba juga memutus hubungan sosial dengan keluarga dan teman baikmu.</p> </div> <div class="mt-4 bg-amber-50 p-3 rounded-xl text-xs font-bold text-amber-700">Dampak: Ketergantungan psikologis yang membelenggu hidup.</div> </div> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-2"> <div class="inline-block px-4 py-1 bg-blue-100 text-blue-700 font-black rounded-full text-sm mb-2">Simulasi Tantangan 🎭</div> <h2 class="text-3xl font-black text-slate-900">Uji Mental: Menghadapi "Permen" Misterius</h2> </div> <div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-[6px_6px_0px_#93c5fd] space-y-4"> <p class="text-lg font-extrabold text-slate-700 leading-relaxed bg-blue-50 p-4 rounded-2xl"> 💬 <i>"Nih cobain permen herbal dari kakak kelas, biar kepala rileks dan gampang paham pelajaran, gak usah tegang jadi anak baru..."</i> </p> <p class="font-bold text-slate-500">Menurutmu, apa tindakan paling tepat yang harus dilakukan?</p> <div class="space-y-3 pt-2"> <button onclick="pilihOpsiKasus(false, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition"> A. Coba dikit aja deh biar gak dibilang penakut sama kakak kelas. ❌ </button> <button onclick="pilihOpsiKasus(true, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition"> B. Tolak dengan tegas, bilang "Maaf, saya tidak mau!", lalu segera menjauh dan lapor guru. ✅ </button> <button onclick="pilihOpsiKasus(false, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition"> C. Terima dulu simpan di saku buat jaga-jaga. ❌ </button> </div> <div id="feedback-kasus" class="hidden p-4 rounded-2xl font-bold text-lg pop-in"></div> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="flex justify-between items-end mb-4 bg-emerald-100 p-6 rounded-3xl border-2 border-emerald-200"> <div> <h2 class="text-3xl font-black text-emerald-900">Kiat Tangguh Tolak Narkoba ✨</h2> <p class="text-emerald-700 font-bold mt-1 text-lg">Tap komitmen yang siap kamu pegang teguh!</p> </div> <span id="checklist-counter" class="text-lg font-black text-white bg-emerald-600 px-4 py-2 rounded-xl shadow-md transition-colors rotate-3 text-center min-w-[80px]">0/4</span> </div> <div class="space-y-4" id="checklist"> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🗣️</span> Berani bilang "TIDAK" dengan tegas tanpa ragu.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🏃‍♂️</span> Menjauhi lingkungan pergaulan yang toksik/berisiko.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">⚽</span> Sibukkan diri dengan hobi positif & ekstrakurikuler.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">👨‍👩‍👧‍👦</span> Terbuka dan komunikatif dengan orang tua atau guru BK.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Uji Penalaran: <span class="text-gradient">Kuis Anti-Narkoba</span> 🎮</h2> <p class="text-lg font-bold text-slate-500 mt-2">Uji kemampuan analisismu dalam situasi pergaulan sehari-hari!</p> <div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full"> <span class="text-xl">🔥</span> <span class="font-black text-emerald-800 text-xl">SKOR SAYA: <span id="quiz-score">0</span></span> </div> </div> <div id="auto-quiz-container" class="space-y-4"> <div class="quiz-card p-6 rounded-3xl bg-white border-2 border-slate-200 shadow-[4px_4px_0px_rgba(203,213,225,1)] transition-colors relative" id="active-quiz-card"> <div class="flex gap-4"> <div class="bg-emerald-100 text-emerald-700 font-black text-2xl p-4 rounded-2xl h-fit">Q</div> <p id="quiz-question-text" class="mb-4 text-xl font-extrabold text-slate-700 leading-snug"></p> </div> <div id="quiz-options" class="grid grid-cols-1 gap-3 ml-16 mt-2">  </div> <div id="quiz-feedback" class="hidden mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8"></div> <button id="next-quiz-btn" onclick="loadNewQuestion()" class="hidden mt-4 w-full ml-16 py-3 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700">Lanjut Soal Berikutnya ➡️</button> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-7xl mb-2 animate-bounce">🏆</div> <h2 class="text-4xl md:text-5xl font-black text-emerald-900 mb-2">Misi Selesai, Generasi Hebat!</h2> <p class="text-xl font-extrabold text-slate-600 max-w-xl"> Kamu telah menyelesaikan sesi pembelajaran anti-narkoba. Catat hasil skormu dan laporkan refleksimu ke sistem guru! </p> <div class="bg-white border-4 border-emerald-300 p-6 rounded-3xl max-w-md w-full shadow-xl space-y-4 text-left"> <div> <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Nama Lengkap Siswa</label> <input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold focus:outline-emerald-500"> </div> <div> <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Seberapa paham kamu materi hari ini? (Baterai Pemahaman)</label> <select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold bg-white"> <option value="100">100% - Sangat Paham & Siap Menolak!</option> <option value="75">75% - Cukup Paham</option> <option value="50">50% - Masih Perlu Belajar Lagi</option> </select> </div> <div> <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Hambatan / Pertanyaan Singkat</label> <input type="text" id="input-hambatan" placeholder="Misal: Cara menolak teman akrab..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold"> </div> <div> <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Komitmen / Strategi Kamu</label> <input type="text" id="input-strategi" placeholder="Misal: Memilih teman yang hobi olahraga..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold"> </div> <button onclick="kirimNilaiKeLMS()" class="w-full py-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-lg font-black rounded-2xl shadow-lg hover:shadow-xl transition-all"> Kirim Hasil Belajar Ke Guru 🚀 </button> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-600 shadow-[0_4px_0px_#047857]"> <span class="hidden md:inline">Lanjut Misi</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.innerHTML = '<span class="hidden md:inline">Selesai 🌟</span>'; } else { nextBtn.disabled = false; nextBtn.innerHTML = '<span class="hidden md:inline">Lanjut Misi</span> <i data-lucide="rocket" class="w-6 h-6"></i>'; lucide.createIcons(); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); // Simulasi Kasus Interaktif (Slide 3) function pilihOpsiKasus(isBenar, btn) { const fb = document.getElementById('feedback-kasus'); fb.classList.remove('hidden'); if(isBenar) { btn.className = "w-full text-left p-4 rounded-2xl bg-emerald-500 text-white font-bold border-2 border-emerald-700"; fb.className = "mt-4 p-4 rounded-2xl font-bold text-lg bg-emerald-100 text-emerald-800 border-l-8 border-emerald-500 pop-in"; fb.innerHTML = "🎉 <b>Tepat Sekali!</b> Menolak dengan tegas dan melapor adalah tindakan anak cerdas pelindung masa depan."; } else { btn.className = "w-full text-left p-4 rounded-2xl bg-rose-500 text-white font-bold border-2 border-rose-700"; fb.className = "mt-4 p-4 rounded-2xl font-bold text-lg bg-rose-100 text-rose-800 border-l-8 border-rose-500 pop-in"; fb.innerHTML = "❌ <b>Kurang Tepat.</b> Menerima barang asing dari orang lain sangat membahayakan kesehatan dan masa depanmu!"; } } // Checklist Logic (Slide 4) const checkItems = document.querySelectorAll('.check-item'); const checklistCounter = document.getElementById('checklist-counter'); let checkedCount = 0; checkItems.forEach(btn => { btn.addEventListener('click', () => { const isChecked = btn.classList.toggle('checked'); const icon = btn.querySelector('svg'); if(isChecked) { checkedCount++; icon.classList.remove('opacity-30', 'text-slate-400'); icon.classList.add('text-white', 'opacity-100'); } else { checkedCount--; icon.classList.add('opacity-30', 'text-slate-400'); icon.classList.remove('text-white', 'opacity-100'); } checklistCounter.textContent = `${checkedCount}/${checkItems.length}`; }); }); // 5 Soal Pilihan Ganda HOTS (Survival Mode - Slide 5) const questionBank = [ { q: "Rian sering diejek sebagai anak kurang pergaulan karena menolak nongkrong malam di tempat sepi. Suatu hari temannya mendesak mencoba rokok elektrik (vape) bebas nikotin. Tindakan tepat Rian adalah...", options: [ "Menerima vape tersebut sekali saja agar diterima kelompok", "Mencoba diam-diam lalu menjauh esok hari", "Menolak dengan tegas, mengubah topik, dan meninggalkan lingkungan toksik", "Menerima vape untuk disimpan sendiri" ], correct: 2, msg: "Asertif menolak dan menjauhi lingkungan berisiko adalah kunci utama menghindari narkoba." }, { q: "Mengapa penyalahgunaan narkotika pada usia remaja (SMP) jauh lebih merusak dibandingkan pada usia dewasa?", options: [ "Remaja memiliki daya tahan tubuh lebih lemah", "Otak remaja masih berkembang aktif sehingga kecanduan mengubah struktur saraf permanen", "Remaja belum memiliki uang sendiri", "Lingkungan sekolah tidak punya sanksi tegas" ], correct: 1, msg: "Secara neurobiologis, otak remaja sangat rentan terhadap perubahan struktur akibat zat adiktif." }, { q: "Perubahan drastis: nilai turun, mengurung diri, emosi meledak. Sebagai keluarga komunikatif, langkah awal bijak adalah...", options: [ "Menghukum dan menggeledah kamar secara paksa", "Membiarkannya karena fase wajar kenakalan remaja", "Membuka dialog hangat tanpa menghakimi dan mencari konselor", "Memindahkan anak ke sekolah lain" ], correct: 2, msg: "Pendekatan dialogis dan suportif jauh lebih efektif merangkul remaja bermasalah." }, { q: "Susi diajak ke komunitas online tersembunyi yang menjanjikan pelarian stres dari zat tertentu. Strategi coping efektif Susi?", options: [ "Mengikuti kemauan mereka demi keamanan", "Keluar, blokir akun, dan alihkan waktu ke hobi positif", "Melaporkan ke media sosial secara terbuka", "Diam saja dan mengingatkan lewat pesan pribadi" ], correct: 1, msg: "Detoksifikasi pergaulan digital dan pengalihan ke hobi positif adalah manajemen diri terbaik." }, { q: "Sebagai Sekolah Sadar Kependudukan, peran ekosistem sekolah jika ada siswa terindikasi lingkungan berisiko adalah...", options: [ "Mengeluarkan siswa secepat mungkin", "Menutupi kasus rapat-rapat", "Menciptakan lingkungan aman, layanan konseling merangkul, dan pencegahan aktif", "Menyerahkan sepenuhnya ke polisi" ], correct: 2, msg: "Sekolah ramah anak mengedepankan fungsi preventif, rehabilitatif, dan suportif." } ]; let currentQIndex = -1; let quizScore = 0; let usedIndices = []; const qText = document.getElementById('quiz-question-text'); const qOptions = document.getElementById('quiz-options'); const qFeedback = document.getElementById('quiz-feedback'); const nextBtnQuiz = document.getElementById('next-quiz-btn'); const scoreDisplay = document.getElementById('quiz-score'); const activeCard = document.getElementById('active-quiz-card'); function loadNewQuestion() { qFeedback.classList.add('hidden'); nextBtnQuiz.classList.add('hidden'); activeCard.classList.remove('border-emerald-400', 'bg-emerald-50', 'border-rose-400', 'bg-rose-50'); if(usedIndices.length >= questionBank.length) usedIndices = []; let rand; do { rand = Math.floor(Math.random() * questionBank.length); } while (usedIndices.includes(rand)); usedIndices.push(rand); currentQIndex = rand; const currentQ = questionBank[rand]; qText.textContent = currentQ.q; qOptions.innerHTML = ""; currentQ.options.forEach((opt, idx) => { const btn = document.createElement('button'); btn.type = "button"; btn.className = "auto-guess-btn w-full text-left p-4 bg-slate-100 rounded-2xl text-slate-700 font-bold border-b-4 border-slate-300 hover:bg-slate-200 transition-all"; btn.textContent = opt; btn.onclick = () => checkAnswer(idx, currentQ.correct, btn, currentQ.msg); qOptions.appendChild(btn); }); } loadNewQuestion(); function checkAnswer(selected, correctIdx, btnElement, explanation) { const allBtns = qOptions.querySelectorAll('button'); allBtns.forEach(b => b.disabled = true); if(selected === correctIdx) { btnElement.classList.add('btn-correct'); activeCard.classList.add('border-emerald-400', 'bg-emerald-50'); qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-emerald-500 bg-emerald-100 text-emerald-800 pop-in block'; qFeedback.innerHTML = `<span class="text-xl block mb-1">🎉 Pintar Sekali!</span> ${explanation}`; quizScore += 100; scoreDisplay.textContent = quizScore; } else { btnElement.classList.add('btn-wrong'); allBtns[correctIdx].classList.add('btn-correct'); activeCard.classList.add('border-rose-400', 'bg-rose-50'); qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-rose-500 bg-rose-100 text-rose-800 pop-in block'; qFeedback.innerHTML = `<span class="text-xl block mb-1">😅 Kurang Tepat.</span> Analisis yang benar: ${explanation}`; quizScore = Math.max(0, quizScore - 30); scoreDisplay.textContent = quizScore; } nextBtnQuiz.classList.remove('hidden'); } // Fungsi kirim nilai kembali ke sistem LMS (siswa.php) function kirimNilaiLeLMS() { const nama = document.getElementById('input-nama').value.trim(); if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; } const baterai = document.getElementById('input-baterai').value; const hambatan = document.getElementById('input-hambatan').value || "Tidak ada"; const strategi = document.getElementById('input-strategi').value || "Aktif berolahraga dan jauhi narkoba"; if (window.parent && window.parent !== window) { window.parent.postMessage({ tipe: "kirim_nilai_lms", nama: nama, skor: quizScore, baterai: baterai, hambatan: hambatan, strategi: strategi }, "*"); } else { alert("Hasil berhasil direkam secara lokal! Skor Kuis Kamu: " + quizScore); } } </script> </body> </html>

Kelas 7 MPLS

Literasi Digital 2

<!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Misi MPLS: Jadi Netizen Kece! 🚀</title>  <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito', sans-serif; background-color: #f0fdfa; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; } .slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } /* Fun Animations */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .floating { animation: float 3s ease-in-out infinite; } @keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* Checklist Gamification */ .check-item, .confess-item { transition: all 0.2s ease; border-bottom: 4px solid #cbd5e1; cursor: pointer; } .check-item:hover, .confess-item:hover { transform: translateY(-3px); border-bottom-width: 7px; border-color: #fcd34d; } .check-item:active, .confess-item:active { transform: translateY(2px); border-bottom-width: 2px; } .check-item.checked { background: linear-gradient(135deg, #8b5cf6, #d946ef); color: white; border-color: #6d28d9; transform: scale(1.03); } .confess-item.checked { background: linear-gradient(135deg, #f43f5e, #fb923c); color: white; border-color: #be123c; transform: scale(1.03); } /* Quiz Button Styles */ .guess-btn, .auto-guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; } .guess-btn:active, .auto-guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; } .btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; } .btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; } /* Gradient Text */ .text-gradient { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #7c3aed, #db2777); } /* Nav Buttons */ .nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; } .nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; } </style> </head> <body class="min-h-screen flex flex-col text-slate-800">  <header class="bg-white/80 backdrop-blur-md px-6 py-4 border-b-4 border-purple-200 sticky top-0 z-10 shadow-sm flex items-center gap-4"> <div class="flex-shrink-0 bg-yellow-400 p-2 rounded-xl shadow-sm rotate-3"> <i data-lucide="gamepad-2" class="w-6 h-6 text-purple-900"></i> </div> <div class="flex-1"> <div class="flex justify-between items-end mb-1"> <span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Level Progress</span> <span id="progress-text" class="text-xs font-black text-white bg-pink-500 px-3 py-1 rounded-full shadow-sm">0%</span> </div> <div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300"> <div id="progress-bar" class="h-full bg-gradient-to-r from-yellow-400 via-pink-500 to-purple-600 w-0 transition-all duration-500 ease-out"></div> </div> </div> </header> <main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">  <div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="max-w-3xl mx-auto space-y-5"> <div class="inline-block px-5 py-2 rounded-2xl bg-yellow-300 text-purple-900 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_rgba(124,58,237,1)] rotate-[-2deg]"> #MPLS_Seru2026 </div> <h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4"> Siap Jadi <span class="text-gradient">Netizen Kece?</span> 😎📱 </h1> <p class="text-xl text-slate-600 font-bold max-w-xl mx-auto"> Welcome to SMP! Yuk belajar cara asyik dan aman main sosmed, game, dan internet bareng-bareng! </p> <img src="./assets/WhatsApp Image 2026-07-09 at 23.07.58.jpeg" alt="Teens on phones" class="w-80 h-56 object-cover rounded-3xl mx-auto shadow-[8px_8px_0px_rgba(219,39,119,0.5)] mt-8 border-4 border-white floating" onerror="this.src='https://images.unsplash.com/photo-1610427339798-2cb2d04a7428?auto=format&fit=crop&w=800&q=80'"> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center"> <h2 class="text-4xl font-black text-purple-800 inline-block bg-purple-100 px-6 py-2 rounded-2xl rotate-1">Literasi Digital Tuh Apaan Sih? 🤔</h2> </div> <div class="flex flex-col md:flex-row gap-8 items-center bg-white p-8 rounded-3xl shadow-[6px_6px_0px_rgba(203,213,225,1)] border-2 border-slate-200 mt-4"> <div class="flex-1 space-y-6 text-xl text-slate-700 font-bold"> <p class="bg-yellow-100 p-4 rounded-xl border-l-8 border-yellow-400">🎮 Bukan cuma soal jago <i>push rank</i> atau bikin konten FYP TikTok doang, bestie!</p> <ul class="space-y-4"> <li class="flex gap-4 items-center"><span class="bg-pink-100 text-pink-600 p-2 rounded-lg text-2xl">🧠</span> Pintar bedain mana info asli, mana hoaks.</li> <li class="flex gap-4 items-center"><span class="bg-blue-100 text-blue-600 p-2 rounded-lg text-2xl">🤝</span> Tau sopan santun waktu komen di IG/TikTok orang.</li> <li class="flex gap-4 items-center"><span class="bg-green-100 text-green-600 p-2 rounded-lg text-2xl">🔐</span> Jago ngelindungin akun sendiri biar nggak di-hack!</li> </ul> </div> <img src="https://static.vecteezy.com/system/resources/thumbnails/002/722/950/small_2x/side-view-of-children-using-laptop-for-communicate-video-conference-with-teacher-and-friends-on-white-background-free-vector.jpg" alt="Belajar Digital" class="w-72 h-64 object-cover rounded-2xl shadow-[6px_6px_0px_rgba(219,39,119,1)] transform rotate-2 floating border-4 border-white" onerror="this.src='https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=800&q=80'"> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="flex justify-between items-end mb-4 bg-purple-100 p-6 rounded-3xl border-2 border-purple-200"> <div> <h2 class="text-3xl font-black text-purple-900">Checklist Anak Gaul Internet ✨</h2> <p class="text-purple-700 font-bold mt-1 text-lg">Sentuh (Tap) kotak yang udah sering kamu lakuin!</p> </div> <span id="checklist-counter" class="text-lg font-black text-white bg-pink-500 px-4 py-2 rounded-xl shadow-md transition-colors rotate-3 text-center min-w-[80px]">0/5</span> </div> <div class="space-y-4" id="checklist"> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🤫</span> Nggak pernah ngasih tau password ke temen.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🤔</span> Mikir dulu sebelum ngetik komen pedas.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🕵️</span> Suka ngecek berita dulu (gak asal share).</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🚫</span> Block/Report orang yang suka nge-bully.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">⏰</span> Tau waktu! Kalo waktunya tidur, HP dimatiin.</span> <i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-4xl font-black text-slate-900">Survival Game: <span class="text-gradient">Fakta vs Hoaks!</span> 🎮</h2> <p class="text-lg font-bold text-slate-500 mt-2">Kumpulkan skor sebanyak-banyaknya! Soal akan terus muncul.</p> <div class="mt-4 inline-flex items-center gap-3 bg-yellow-100 border-2 border-yellow-400 px-6 py-2 rounded-full"> <span class="text-xl">🔥</span> <span class="font-black text-yellow-700 text-xl">SKOR: <span id="quiz-score">0</span></span> </div> </div> <div id="auto-quiz-container" class="space-y-4"> <div class="quiz-card p-6 rounded-3xl bg-white border-2 border-slate-200 shadow-[4px_4px_0px_rgba(203,213,225,1)] transition-colors relative" id="active-quiz-card"> <div class="flex gap-4"> <div class="bg-blue-100 text-blue-600 font-black text-2xl p-4 rounded-2xl h-fit">?</div> <p id="quiz-question-text" class="mb-4 text-xl font-extrabold text-slate-700 leading-snug"></p> </div> <div class="flex gap-4 options ml-16 mt-2"> <button type="button" onclick="checkAnswer('fakta', this)" class="auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-5 border-slate-300 hover:bg-green-100 hover:text-green-700 transition-all active:translate-y-1 active:border-b-0">FAKTA ✅</button> <button type="button" onclick="checkAnswer('hoaks', this)" class="auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-5 border-slate-300 hover:bg-red-100 hover:text-red-700 transition-all active:translate-y-1 active:border-b-0">HOAKS ❌</button> </div> <div id="quiz-feedback" class="hidden mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8"></div> <button id="next-quiz-btn" onclick="loadNewQuestion()" class="hidden mt-4 w-full ml-16 py-3 bg-purple-600 text-white rounded-xl font-bold hover:bg-purple-700">Lanjut Soal Berikutnya ➡️</button> </div> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-6"> <h2 class="text-4xl font-black text-white bg-pink-500 inline-block px-8 py-3 rounded-2xl transform rotate-2 shadow-[4px_4px_0px_#be185d]">No Drama, No Bully! 🛑</h2> </div> <div class="flex flex-col md:flex-row gap-8 items-center bg-white p-8 rounded-[2rem] shadow-[6px_6px_0px_rgba(203,213,225,1)] border-2 border-slate-200"> <div class="flex-1 space-y-5"> <div class="flex items-start gap-4 p-4 rounded-2xl bg-slate-50 border-2 border-slate-100 hover:border-pink-300 transition-colors"> <div class="w-12 h-12 bg-pink-100 text-pink-600 rounded-xl flex items-center justify-center text-2xl font-black flex-shrink-0">1</div> <div> <p class="font-black text-xl text-slate-800">Fisik Dihina? BIG NO!</p> <p class="text-slate-600 font-bold mt-1">Ngejek fisik orang (Body Shaming) di kolom komentar itu jahat dan nggak keren sama sekali.</p> </div> </div> <div class="flex items-start gap-4 p-4 rounded-2xl bg-slate-50 border-2 border-slate-100 hover:border-purple-300 transition-colors"> <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center text-2xl font-black flex-shrink-0">2</div> <div> <p class="font-black text-xl text-slate-800">Jangan Jadi Cepu! 📸</p> <p class="text-slate-600 font-bold mt-1">Nyebarin rahasia atau bikin foto memalukan teman jadi stiker WA tanpa izin itu termasuk pelanggaran lho.</p> </div> </div> <div class="flex items-start gap-4 p-4 rounded-2xl bg-red-50 border-2 border-red-200 hover:border-red-400 transition-colors transform rotate-1"> <div class="w-12 h-12 bg-red-500 text-white rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm"><i data-lucide="megaphone" class="w-6 h-6"></i></div> <div> <p class="font-black text-xl text-red-700">Kena Bully? JANGAN DIAM!</p> <p class="text-red-600 font-extrabold mt-1">Screenshot buktinya, block pelakunya, dan laporkan ke orang tua atau guru BK. Kamu dilindungi!</p> </div> </div> </div> <div class="flex-shrink-0 relative"> <div class="absolute inset-0 bg-yellow-400 rounded-3xl transform rotate-6 scale-105 shadow-md"></div> <img src="https://i.pinimg.com/originals/e2/35/de/e235de5f2ee18e104fee4717d16cf73b.jpg" alt="Stop Bullying" class="w-64 h-80 object-cover rounded-3xl border-4 border-white relative z-10 floating" onerror="this.src='https://images.unsplash.com/photo-1529156069898-49953eb1b5ce?auto=format&fit=crop&w=400&q=80'"> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <h2 class="text-5xl font-black text-slate-900"><span class="bg-pink-200 px-4 rounded-xl">Saring</span> Sebelum <span class="bg-blue-200 px-4 rounded-xl">Sharing!</span> 🧠</h2> <div class="bg-white border-4 border-purple-400 rounded-[2rem] p-10 max-w-2xl space-y-6 shadow-[8px_8px_0px_rgba(192,132,252,1)] mt-6 relative"> <div class="absolute -top-10 left-1/2 transform -translate-x-1/2 w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center text-4xl shadow-md border-4 border-white">🕵️‍♂️</div> <p class="text-2xl text-slate-700 font-extrabold leading-snug pt-6">Kalo dapet berita heboh di grup kelas atau keluarga, JANGAN LANGSUNG DI-FORWARD!</p> <p class="text-lg font-bold text-slate-500">Cek dulu kebenarannya di website anti-hoaks resmi Indonesia ini:</p> <div class="py-4 space-y-3"> <div class="bg-purple-100 py-3 px-6 rounded-2xl transform transition hover:scale-105 cursor-pointer inline-block mx-2"> <p class="font-black text-2xl text-purple-700">turnbackhoax.id</p> </div> <div class="bg-pink-100 py-3 px-6 rounded-2xl transform transition hover:scale-105 cursor-pointer inline-block mx-2"> <p class="font-black text-2xl text-pink-700">cekfakta.com</p> </div> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <h2 class="text-4xl font-black text-center mb-8">Gembok Akunmu Rapat-Rapat! 🔐</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative"> <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white w-14 h-14 rounded-xl flex items-center justify-center rotate-6 shadow-sm"><i data-lucide="key" class="w-8 h-8"></i></div> <p class="font-black text-2xl text-slate-800 pt-4">Password Kuat</p> <p class="text-slate-600 font-bold">Jangan pake password "123456" atau tanggal lahir. Pake kombinasi angka & simbol. Contoh: <span class="bg-yellow-200 px-2 rounded text-slate-800">@n4kK3c3_07!</span></p> </div> <div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative"> <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-pink-500 text-white w-14 h-14 rounded-xl flex items-center justify-center -rotate-6 shadow-sm"><i data-lucide="ghost" class="w-8 h-8"></i></div> <p class="font-black text-2xl text-slate-800 pt-4">Awas Phishing</p> <p class="text-slate-600 font-bold">Jangan asal klik link aneh yang dikirim lewat WA/DM IG dari orang nggak dikenal. Akunmu bisa lenyap!</p> </div> <div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative"> <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-green-500 text-white w-14 h-14 rounded-xl flex items-center justify-center rotate-6 shadow-sm"><i data-lucide="shield-alert" class="w-8 h-8"></i></div> <p class="font-black text-2xl text-slate-800 pt-4">OTP itu Rahasia!</p> <p class="text-slate-600 font-bold">Kode 4-6 angka yang masuk via SMS/WA itu HARAM dikasih tau ke siapa aja, termasuk yang ngaku-ngaku admin/kasir.</p> </div> </div> </div>  <div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]"> <div class="flex flex-col md:flex-row gap-10 bg-gradient-to-br from-indigo-900 to-purple-900 p-10 rounded-[2.5rem] shadow-2xl items-center text-white mt-4 relative overflow-hidden"> <div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-10 rounded-full blur-3xl"></div> <div class="absolute bottom-0 left-0 w-48 h-48 bg-pink-500 opacity-20 rounded-full blur-2xl"></div> <div class="flex-1 space-y-6 z-10"> <h2 class="text-5xl font-black text-yellow-300 mb-2">Jejak Digital Beb! 👣</h2> <div class="space-y-4 text-lg font-bold"> <p class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/20">📱 Curhatan galau, foto alay, komen nge-gas hari ini...</p> <p class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/20">🎓 ...bisa dibaca sama pihak sekolah, kampus, atau bos kamu di masa depan!</p> <p class="bg-pink-500/80 p-4 rounded-2xl backdrop-blur-sm border border-pink-400 mt-4 text-xl">✨ Mulai sekarang, yuk bangun citra (branding) yang positif. Share karya, prestasi, atau kegiatan seru bareng teman!</p> </div> </div> <div class="text-center z-10"> <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=800&q=80" alt="Sosmed Icons" class="w-64 h-64 object-cover rounded-full shadow-[0_0_40px_rgba(236,72,153,0.5)] border-8 border-indigo-800 floating"> <p class="mt-6 font-black text-yellow-300 text-xl bg-black/30 py-2 px-4 rounded-full">Internet Gak Pernah Lupa!</p> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <div class="inline-block px-5 py-2 rounded-2xl bg-red-100 text-red-700 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_#fca5a5] rotate-[-2deg]"> #SpecialScreening 🍿 </div> <h2 class="text-5xl md:text-6xl font-black text-slate-900 mt-2">Nobar Bareng:<br><span class="text-gradient">Kemenangan Sejati</span> 🎬</h2> <p class="text-xl font-bold text-slate-600 mt-2 max-w-3xl">Judi Online (Judol) itu penipuan berkedok game yang bisa merusak masa depan. Yuk, tonton film pendek edukasi pencegahannya di bawah ini!</p>  <div class="w-full max-w-3xl mx-auto mt-6 rounded-2xl overflow-hidden border-4 border-slate-800 shadow-[8px_8px_0px_#cbd5e1] bg-black"> <video controls class="w-full aspect-video outline-none" poster="https://images.unsplash.com/photo-1594909122845-11baa439b7bf?auto=format&fit=crop&w=800&q=80"> <source src="./assets/FILM PENDEK _KEMENANGAN SEJATI_.mp4" type="video/mp4"> Browser kamu tidak mendukung pemutaran video. </video> </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="text-center mb-4"> <h2 class="text-3xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl transform -rotate-1">Refleksi Kemenangan Sejati 💭</h2> <p class="text-lg font-bold text-slate-500 mt-3">Yuk, tuangkan pendapatmu setelah nonton film tadi!</p> </div> <div class="space-y-4 mt-2">  <div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-800 mb-2">a. Apa pelajaran paling berharga dari film ini?</label> <textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Tulis jawabanmu di sini..."></textarea> </div> <div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-800 mb-2">b & c. Kenapa tokoh utama bisa terjebak judol & apa faktornya?</label> <textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Ceritakan pendapatmu..."></textarea> </div> <div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-800 mb-2">d. Apa dampak negatif yang terlihat dari Judol & Pinjol ilegal?</label> <textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Sebutkan dampaknya..."></textarea> </div> <div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm"> <label class="block font-black text-slate-800 mb-2">e & f. Kalau kamu/teman di posisi itu, apa tindakanmu & siapa yang dibantu?</label> <textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Aku akan..."></textarea> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-4 h-full min-h-[75vh]" id="slide-10"> <div class="text-7xl mb-2 animate-bounce">🏆</div> <h2 class="text-5xl font-black text-purple-900 mb-2">Level 1 Completed!</h2> <p class="text-2xl font-extrabold text-slate-600">Selamat! Kamu resmi jadi Siswa SMP yang Melek Digital.</p> <div class="bg-white border-4 border-dashed border-pink-400 p-6 rounded-3xl max-w-4xl w-full mt-4 shadow-xl flex flex-col items-center"> <p class="text-xl font-bold text-slate-700 mb-4">Sebagai hadiah, Kakak udah siapin contekan keren buat kamu. Langsung baca atau download ya!</p>  <div class="w-full h-[40vh] md:h-[50vh] rounded-xl overflow-hidden border-2 border-slate-200 mb-4 relative z-10"> <iframe src="./assets/Unmasking_the_Gambling_Trap.pdf" class="w-full h-full border-none bg-slate-100" title="PDF Cheat Sheet"></iframe> </div> <a href="./assets/Unmasking_the_Gambling_Trap.pdf" download class="inline-flex items-center gap-3 px-8 py-3 bg-gradient-to-r from-pink-500 to-purple-600 text-white text-xl font-black rounded-xl shadow-[0_6px_0px_#9333ea] hover:translate-y-1 transition-all active:shadow-none active:translate-y-2"> <i data-lucide="download-cloud" class="w-6 h-6"></i> Download File PDF </a> </div> <div class="bg-yellow-200 text-yellow-900 font-bold px-6 py-3 rounded-full animate-pulse border-2 border-yellow-400 mt-4"> ⚠️ Eits, jangan ditutup dulu! Masih ada 1 Misi Bonus di slide selanjutnya! 👉 </div> </div>  <div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]"> <div class="inline-block px-5 py-2 rounded-2xl bg-blue-100 text-blue-700 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_#93c5fd] rotate-[-2deg] mx-auto text-center w-fit mb-2"> Bonus Stage: Misi Kampanye 3S 🎯 </div> <div class="text-center mb-2"> <h2 class="text-4xl font-black text-slate-900 inline-block bg-orange-200 px-6 py-2 rounded-2xl transform -rotate-2 mt-2">Pengakuan Dosa Netizen! 🫣</h2> <p class="text-lg font-bold text-slate-500 mt-3">Yuk jujur-jujuran. Klik (Tap) kotak di bawah kalau kamu <span class="text-red-500 underline">PERNAH</span> ngelakuin ini:</p> </div> <div class="space-y-4 mt-4" id="confession-list"> <button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">😵‍💫</span> Main gawai (HP/Laptop) sampai lupa waktu!</span> <i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🛌</span> Tidur sambil bawa-bawa/peluk gawai!</span> <i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🍜</span> Makan sambil nonton video atau TV!</span> <i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> <button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200"> <span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">📚</span> Belajar sambil buka banyak aplikasi/tab lain!</span> <i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i> </button> </div> <div id="confess-msg" class="hidden text-center mt-4 p-4 bg-orange-100 rounded-2xl border-2 border-orange-300 pop-in"> <p class="font-black text-orange-700 text-xl">Waduh! Ketahuan deh 🤭 Nggak apa-apa, yuk kita perbaiki sama-sama!</p> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <h2 class="text-5xl font-black text-slate-900 mb-2">Apa itu <span class="bg-blue-300 px-4 py-1 rounded-xl text-blue-900 transform inline-block rotate-2">Screen Time?</span> ⏱️</h2> <p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto"> <i>Screen time</i> (waktu layar) adalah total waktu yang kamu habisin buat natap layar (main HP, nonton TV, nge-game). Kalau kelamaan, awas efek sampingnya! </p> <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mt-6 w-full max-w-5xl"> <div class="bg-white border-4 border-red-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition"> <span class="text-5xl mb-2">👁️</span> <p class="font-black text-slate-700 text-center">Mata Lelah</p> </div> <div class="bg-white border-4 border-orange-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.1s;"> <span class="text-5xl mb-2">🦥</span> <p class="font-black text-slate-700 text-center">Malas Gerak</p> </div> <div class="bg-white border-4 border-yellow-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.2s;"> <span class="text-5xl mb-2">🥱</span> <p class="font-black text-slate-700 text-center">Susah Tidur</p> </div> <div class="bg-white border-4 border-pink-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.3s;"> <span class="text-5xl mb-2">🎢</span> <p class="font-black text-slate-700 text-center leading-tight">Emosi Naik Turun</p> </div> <div class="bg-white border-4 border-purple-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center col-span-2 md:col-span-1 pop-in hover:scale-105 transition" style="animation-delay: 0.4s;"> <span class="text-5xl mb-2">🧟</span> <p class="font-black text-slate-700 text-center">Kecanduan</p> </div> </div> </div>  <div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]"> <div class="text-center w-full"> <h2 class="text-5xl font-black text-slate-900 mb-2"><span class="bg-purple-300 px-4 py-1 rounded-xl text-purple-900 transform inline-block -rotate-2">Screen Zone</span> (Zona Layar) 🚷</h2> <p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto mt-4"> Bikin kesepakatan tempat di rumah, mana yang <b>BOLEH</b> dan <b>DILARANG</b> main HP. Biar kamu nggak sembunyi-sembunyi dan tetap asyik ngobrol bareng keluarga! </p> </div> <div class="flex flex-col md:flex-row gap-8 mt-6 w-full max-w-4xl"> <div class="flex-1 bg-green-50 border-4 border-green-400 p-8 rounded-3xl shadow-[6px_6px_0px_#4ade80] hover:-translate-y-2 transition-transform"> <h3 class="font-black text-3xl text-green-700 mb-6 flex items-center gap-3"><i data-lucide="check-circle-2" class="w-8 h-8"></i> Boleh Banget!</h3> <ul class="space-y-4 text-xl font-bold text-slate-700"> <li class="flex items-center gap-3"><span class="text-3xl">🛋️</span> Ruang Keluarga</li> <li class="flex items-center gap-3"><span class="text-3xl">📚</span> Ruang Belajar</li> </ul> </div> <div class="flex-1 bg-red-50 border-4 border-red-400 p-8 rounded-3xl shadow-[6px_6px_0px_#f87171] hover:-translate-y-2 transition-transform"> <h3 class="font-black text-3xl text-red-700 mb-6 flex items-center gap-3"><i data-lucide="x-circle" class="w-8 h-8"></i> BIG NO!</h3> <ul class="space-y-4 text-xl font-bold text-slate-700"> <li class="flex items-center gap-3"><span class="text-3xl">🛏️</span> Kamar Tidur</li> <li class="flex items-center gap-3"><span class="text-3xl">🍽️</span> Meja Makan</li> <li class="flex items-center gap-3"><span class="text-3xl">🚽</span> Toilet</li> </ul> </div> </div> </div>  <div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]"> <h2 class="text-5xl font-black text-slate-900 mb-2">Kasih Jeda Dong! <span class="bg-green-300 px-4 py-1 rounded-xl text-green-900 transform inline-block rotate-1">(Screen Break)</span> 🧘</h2> <p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto"> Setelah 30 menit main game atau scroll TikTok, mata & badan butuh istirahat! Kalau nggak, mata cepat capek dan badan kaku. Pas lagi jeda, lakuin aktivitas seru ini: </p> <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-8 w-full max-w-5xl"> <div class="bg-white border-4 border-blue-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-blue-400 hover:-translate-y-2 transition-all"> <span class="text-6xl mb-4 block">🪟</span> <p class="font-black text-xl text-slate-700">Melihat Keluar Jendela</p> </div> <div class="bg-white border-4 border-pink-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-pink-400 hover:-translate-y-2 transition-all"> <span class="text-6xl mb-4 block">🚶</span> <p class="font-black text-xl text-slate-700">Berjalan-jalan Sebentar</p> </div> <div class="bg-white border-4 border-cyan-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-cyan-400 hover:-translate-y-2 transition-all"> <span class="text-6xl mb-4 block">💧</span> <p class="font-black text-xl text-slate-700">Minum Air Putih</p> </div> <div class="bg-white border-4 border-orange-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-orange-400 hover:-translate-y-2 transition-all"> <span class="text-6xl mb-4 block">🤸</span> <p class="font-black text-xl text-slate-700">Peregangan Badan</p> </div> </div> </div> </main>  <footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20"> <nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation"> <button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled> <i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Mundur Dulu</span> </button> <button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-yellow-400 text-slate-900 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-yellow-500 shadow-[0_4px_0px_#b45309]"> <span class="hidden md:inline">Gasss Lanjut!</span> <i data-lucide="rocket" class="w-6 h-6"></i> </button> </nav> </footer> <script> lucide.createIcons(); // Navigasi Slide Basic const slides = document.querySelectorAll('.slide'); let current = 0; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); function showSlide(i) { slides[current].classList.remove('active'); current = i; slides[current].classList.add('active'); const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .check-item, .confess-item, img, .pop-in'); elementsToAnimate.forEach(el => { el.classList.remove('pop-in'); void el.offsetWidth; el.classList.add('pop-in'); }); prevBtn.disabled = current === 0; if (current === slides.length - 1) { nextBtn.disabled = true; nextBtn.innerHTML = '<span class="hidden md:inline">Tamat! 🎉</span>'; } else { nextBtn.disabled = false; nextBtn.innerHTML = '<span class="hidden md:inline">Gasss Lanjut!</span> <i data-lucide="rocket" class="w-6 h-6"></i>'; lucide.createIcons(); } const progress = (current / (slides.length - 1)) * 100; progressBar.style.width = `${progress}%`; progressText.textContent = `${Math.round(progress)}%`; window.scrollTo({ top: 0, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); }); nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); }); document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' && current < slides.length - 1) showSlide(current + 1); if (e.key === 'ArrowLeft' && current > 0) showSlide(current - 1); }); // Checklist Logic (Slide 3) const checkItems = document.querySelectorAll('.check-item'); const checklistCounter = document.getElementById('checklist-counter'); let checkedCount = 0; checkItems.forEach(btn => { btn.addEventListener('click', () => { const isChecked = btn.classList.toggle('checked'); const icon = btn.querySelector('svg'); if(isChecked) { checkedCount++; icon.classList.remove('opacity-30', 'text-slate-400'); icon.classList.add('text-white', 'opacity-100'); } else { checkedCount--; icon.classList.add('opacity-30', 'text-slate-400'); icon.classList.remove('text-white', 'opacity-100'); } checklistCounter.textContent = `${checkedCount}/${checkItems.length}`; if(checkedCount === checkItems.length) { checklistCounter.classList.remove('bg-pink-500'); checklistCounter.classList.add('bg-green-500'); checklistCounter.innerHTML = "LULUS! 🎉"; } else { checklistCounter.classList.add('bg-pink-500'); checklistCounter.classList.remove('bg-green-500'); } }); }); // Pengakuan Dosa Logic (Slide 11) const confessItems = document.querySelectorAll('.confess-item'); const confessMsg = document.getElementById('confess-msg'); let confessCount = 0; confessItems.forEach(btn => { btn.addEventListener('click', () => { const isChecked = btn.classList.toggle('checked'); const icon = btn.querySelector('svg'); if(isChecked) { confessCount++; icon.classList.remove('opacity-30', 'text-slate-400'); icon.classList.add('text-white', 'opacity-100'); } else { confessCount--; icon.classList.add('opacity-30', 'text-slate-400'); icon.classList.remove('text-white', 'opacity-100'); } if(confessCount > 0) { confessMsg.classList.remove('hidden'); } else { confessMsg.classList.add('hidden'); } }); }); // ========================================== // AUTO QUIZ BANK SOAL (SURVIVAL MODE) // ========================================== const questionBank = [ { q: `"Eh guys, klik link ini buat dapetin skin ML/FF gratis langsung dari Moonton/Garena! Asli no tipu-tipu!"`, a: 'hoaks', msg: "Penipuan (Phishing)! Jangan diklik, ntar akun kamu dicolong hacker." }, { q: `"Apapun yang kita hapus di Sosmed (foto alay, komen galak), sebenernya tetep ada jejaknya dan bisa dicari lagi."`, a: 'fakta', msg: "Jejak digital itu susah banget hilangnya! Hati-hati ya sebelum posting." }, { q: `"Menang undian hadiah motor 100 juta dari bank, tapi syaratnya disuruh transfer uang pajak dulu 2 juta."`, a: 'hoaks', msg: "Modus penipuan klasik! Undian resmi ngga akan minta transfer uang duluan." }, { q: `"Semua berita yang dibagikan oleh Om/Tante di grup WA keluarga itu pasti 100% benar karena mereka orang tua."`, a: 'hoaks', msg: "Belum tentu! Banyak orang tua yang juga gampang kemakan berita bohong/hoaks." }, { q: `"Nge-bully teman di internet pakai akun fake (palsu) itu aman dan nggak akan bisa dilacak oleh polisi."`, a: 'hoaks', msg: "Polisi punya tim siber yang bisa ngelacak alamat IP kamu walaupun pakai akun palsu!" }, { q: `"OTP (One Time Password) itu cuma boleh dipakai oleh kita sendiri dan ngga boleh dikasih ke siapapun."`, a: 'fakta', msg: "Bener banget! Kalau OTP dikasih ke orang, akun/dompet digital kamu bisa dikuras habis." }, { q: `"Kalau ada aplikasi yang nawarin bisa lihat siapa yang sering kepoin profil IG/WA kita, itu pasti bohongan."`, a: 'fakta', msg: "Betul! Kebanyakan aplikasi kaya gitu cuma buat nyuri data (password) kamu." } ]; let currentQIndex = -1; let quizScore = 0; let usedIndices = []; const qText = document.getElementById('quiz-question-text'); const qFeedback = document.getElementById('quiz-feedback'); const nextBtnQuiz = document.getElementById('next-quiz-btn'); const scoreDisplay = document.getElementById('quiz-score'); const activeCard = document.getElementById('active-quiz-card'); function loadNewQuestion() { qFeedback.classList.add('hidden'); nextBtnQuiz.classList.add('hidden'); activeCard.classList.remove('border-green-400', 'bg-green-50', 'border-red-400', 'bg-red-50'); const btns = document.querySelectorAll('.auto-guess-btn'); btns.forEach(b => { b.disabled = false; b.className = "auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-4 border-slate-300 hover:bg-slate-200 transition-all active:translate-y-1 active:border-b-0"; }); if(usedIndices.length >= questionBank.length) usedIndices = []; let rand; do { rand = Math.floor(Math.random() * questionBank.length); } while (usedIndices.includes(rand)); usedIndices.push(rand); currentQIndex = rand; qText.textContent = questionBank[rand].q; } loadNewQuestion(); window.checkAnswer = function(guess, btnElement) { const currentQ = questionBank[currentQIndex]; const btns = document.querySelectorAll('.auto-guess-btn'); btns.forEach(b => b.disabled = true); if(guess === currentQ.a) { btnElement.classList.add('btn-correct'); activeCard.classList.add('border-green-400', 'bg-green-50'); qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block'; qFeedback.innerHTML = `<span class="text-2xl block mb-2">🎉 Yasssh Benar Banget!</span> ${currentQ.msg}`; quizScore += 100; scoreDisplay.textContent = quizScore; } else { btnElement.classList.add('btn-wrong'); btns.forEach(b => { if(b.textContent.toLowerCase().includes(currentQ.a)) b.classList.add('btn-correct'); }); activeCard.classList.add('border-red-400', 'bg-red-50'); qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block'; qFeedback.innerHTML = `<span class="text-2xl block mb-2">😅 Yhaa Kegocek!</span> Jawabannya adalah <b>${currentQ.a.toUpperCase()}</b>.<br>${currentQ.msg}`; quizScore = Math.max(0, quizScore - 50); scoreDisplay.textContent = quizScore; } nextBtnQuiz.classList.remove('hidden'); }; </script> </body> </html>

1 2 3 4 5

📊 Papan Nilai & Aktivitas Kelas

Nama Siswa	Materi Pelajaran	Hasil Skor	Tingkat Paham	Hambatan Belajar	Strategi Tindakan
nofi yanti	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
wa putri	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
fadil tomia	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
putri nuraini	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
Adnan Dito Selly	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ilham ulukapy	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
Sri Yulianti Pirasou	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
julia ramadany pirasou	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
fikram bahtiar maasily	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ASIRNATA SOUMENA	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
mega desfiona	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
wa putri	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
fahdil tamrin	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
RAHIMA SOUMENA	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ismail assel	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
syarlan soumena	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
M.Adlan Salaputa	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
alfian marinda	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jelita apriliani soulisa	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
Rifka Tunnisa Tunny	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
hawa nur fadila kiat	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
mega desfiona	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
madania mana anu	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	20	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
tiara wally	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	20	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
syafril umar dani wael	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jidan wabula	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ILHAM FAJAR SELY	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
asti komala tunny	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
DINIARTY KHAILA ANG	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
PANDI AZIZ SOUMENA	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	50%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jahira soumena	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
rindiani ai	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	50%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
Fitra Soumena	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
JENITA	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
indri selly	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	50%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
ABDUL ISHAQ MARASABESSY	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
rahmat salong	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
fadlan soulisa	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
PUTRI SETIAWATI MAHULAUW	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
FAJRUL AUFAR MAASILY	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
KANIA KOMAIRA PANCAR	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
MEISYA FIRDA ASSEL	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
muhammad barru soulisa	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
syafril umar dani wael	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jidan wabula	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
asti komala tunny	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
alfiansyah mahulauw	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	100	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
jidan wabula	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	80	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
refan mahulauw	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	40	75%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar
syafril umar dani waek	Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8	60	100%	Refleksi: Sudah cukup mengerti.	Evaluasi Part 2: Operasi, Bentuk Baku & Akar

📂 Pilih Materi Pelajaran Belajar

Statistika : Misi Puncak Statistika & Keputusan Data

Statistika : Penyebaran Data & Perubahan Data

Statistika : Misi Statistika Part1

Teorema Pythagoras : Jenis Segitiga & Pythagoras

Teorema Pythagoras : Misteri Teorema Pythagoras 📐

Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar

Bilangan Berpangkat 2 : Bentuk Baku dan Akar

Bilangan Berpangkat 1

Anti Narkoba Bagi Generasi Muda

Literasi Digital 2

📊 Papan Nilai & Aktivitas Kelas

Mode Belajar Interaktif