Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
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>
<!-- Font & Icons -->
<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 & Progress Bar -->
<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">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<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>
<!-- Slide 2: Observasi -->
<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>
<!-- Slide 3: Pertanyaan Pemantik -->
<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>
<!-- Slide 4: Tinjauan Kontekstual -->
<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>
<!-- Slide 5: Materi 1 - Pembuktian Teorema Pythagoras -->
<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>
<!-- Slide 6: Materi 2 - Mengidentifikasi Tripel Pythagoras -->
<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>
<!-- Slide 7: Auto-Quiz (Latihan Mandiri TP 1 & 2 dengan Pembahasan) -->
<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>
<!-- Slide 8: SPLIT-SCREEN INTERACTIVE FLAT PANEL QUIZ (3 Kelompok) -->
<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>
<!-- Layar Dibagi 3 Kolom Mandiri -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KOLOM KELOMPOK 1 -->
<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>
<!-- KOLOM KELOMPOK 2 -->
<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>
<!-- KOLOM KELOMPOK 3 -->
<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>
<!-- Modal Pemenang IFP -->
<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>
<!-- Slide 9: Refleksi Siswa -->
<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>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<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>
<!-- Halaman Kirim Nilai -->
<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>
<!-- Bottom Navigation -->
<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>
.png)
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>
<!-- Font & Icons -->
<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 & Progress Bar -->
<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">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<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>
<!-- Slide 2: Konsep Operasi Bentuk Akar -->
<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">
<!-- Tambah/Kurang -->
<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>
<!-- Kali/Bagi -->
<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>
<!-- Slide 3: Auto-Quiz 1 (Operasi Akar dengan Pembahasan Lengkap) -->
<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>
<!-- Slide 4: Merasionalkan Penyebut -->
<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>
<!-- Slide 5: Auto-Quiz 2 (Rasionalisasi dengan Pembahasan) -->
<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>
<!-- Slide 6: Masalah Kontekstual -->
<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">
<!-- Kasus 1 -->
<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>
<!-- Kasus 2 -->
<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>
<!-- Slide 7: Auto-Quiz 3 (Soal Cerita dengan Pembahasan) -->
<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>
<!-- Slide 8: RACING GAME KELOMPOK (Mobil) -->
<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>
<!-- Slide 9: Refleksi Siswa -->
<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>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<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>
<!-- Halaman Kirim Nilai -->
<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>
<!-- Bottom Navigation -->
<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>
<!-- Font & Icons -->
<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 & Progress Bar -->
<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">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<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>
<!-- Slide 2: Konsep Operasi Bilangan Berpangkat -->
<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>
<!-- Slide 3: Auto-Quiz 1 (Operasi) -->
<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>
<!-- Slide 4: Materi Notasi Ilmiah -->
<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>
<!-- Slide 5: Auto-Quiz 2 (Notasi Ilmiah) -->
<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>
<!-- Slide 6: Materi Bentuk Akar -->
<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>
<!-- Slide 7: Auto-Quiz 3 (Akar) -->
<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>
<!-- Slide 8: Kuis Kelompok (Battle 3 Siswa) -->
<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">
<!-- P1: Operasi -->
<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>
<!-- P2: Baku -->
<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>
<!-- P3: Akar -->
<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>
<!-- Slide 9: Refleksi Siswa -->
<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>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<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">
<!-- Auto generated -->
</div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<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>
<!-- Bottom Navigation -->
<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>
<!-- Font & Icons -->
<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 & Progress Bar -->
<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">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<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>
<!-- Slide 2: Konsep Dasar -->
<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>
<!-- Slide 3: Auto-Quiz 1 (Konsep) -->
<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">
<!-- Pilihan jawaban di-generate via JS -->
</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>
<!-- Slide 4: Materi Sifat Perkalian & Pembagian -->
<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">
<!-- Sifat 1 -->
<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>
<!-- Sifat 2 -->
<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>
<!-- Slide 5: Auto-Quiz 2 (Sifat 1 & 2) -->
<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>
<!-- Slide 6: Materi Sifat Pangkat Dipangkatkan & Pangkat Negatif -->
<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">
<!-- Sifat 3 -->
<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>
<!-- Sifat 4 -->
<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>
<!-- Slide 7: Auto-Quiz 3 (Sifat 3 & 4) -->
<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>
<!-- Slide 8: Kuis Kelompok (Battle 3 Siswa) -->
<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">
<!-- Kolom 1 -->
<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>
<!-- Kolom 2 -->
<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>
<!-- Kolom 3 -->
<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>
<!-- Slide 9: Refleksi Siswa -->
<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>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<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">
<!-- Auto generated -->
</div>
</div>
</div>
<!-- Halaman Kirim Nilai (Tampil Setelah Evaluasi Selesai) -->
<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>
<!-- Bottom Navigation -->
<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 8
Bahasa Indonesia
Mengolah Teks Laporan Hasil Observasi
<!doctype html>
<html lang="id">
<head>
<script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script>
<script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Pembelajaran Teks LHO</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=DM+Sans:wght@400;500;700&family=Fraunces:wght@700;900&display=swap" rel="stylesheet">
<style>
body { font-family: 'DM Sans', sans-serif; background-color: #f8fafc; color: #334155; }
.heading-font { font-family: 'Fraunces', serif; color: #0f172a; }
.slide { display: none; }
.slide.active { display: flex; }
.option-btn { transition: all 0.2s; }
.option-btn:hover { transform: scale(1.02); }
.option-btn.correct { background: #22c55e !important; color: white !important; border-color: #16a34a !important; }
.option-btn.incorrect { background: #ef4444 !important; color: white !important; border-color: #dc2626 !important; }
.progress-fill { transition: width 0.4s ease; }
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.struktur-item { cursor: pointer; transition: all 0.2s; }
.struktur-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.struktur-item.placed { opacity: 0.5; pointer-events: none; background-color: #f1f5f9; }
.drop-zone { min-height: 56px; border: 2px dashed #cbd5e1; border-radius: 12px; transition: all 0.2s; cursor: pointer; }
.drop-zone:hover { background-color: #f8fafc; }
.drop-zone.filled { border-color: #10b981; background: #ecfdf5; border-style: solid; }
.canva-card { background: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
</style>
</head>
<body class="min-h-screen flex flex-col pb-16">
<!-- Progress Bar -->
<div class="w-full h-2 bg-gray-200 fixed top-0 left-0 z-50">
<div id="progress-bar" class="progress-fill h-full bg-gradient-to-r from-emerald-400 to-teal-600" style="width: 8.3%"></div>
</div>
<!-- Slide Container -->
<main class="flex-1 w-full flex items-center justify-center p-4 pt-8">
<!-- Slide 1: Apersepsi / Cover -->
<section class="slide active fade-in flex-col items-center max-w-4xl w-full" id="slide-1">
<div class="text-center mb-8">
<span class="text-5xl mb-4 block">🔍</span>
<h1 class="heading-font text-3xl md:text-5xl font-black mb-4 tracking-tight">Menjelajahi Teks LHO</h1>
<p class="text-lg opacity-80 max-w-2xl mx-auto">Mari belajar mengamati, mencatat, dan melaporkan sesuatu secara objektif melalui Teks Laporan Hasil Observasi!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 w-full">
<div class="rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<img src="https://images.unsplash.com/photo-1544365558-35aa4afcf11f?auto=format&fit=crop&w=800&q=80" alt="Observasi" class="w-full h-64 object-cover">
</div>
<div class="canva-card rounded-2xl p-6 flex flex-col justify-center bg-white border-t-4 border-teal-500">
<h3 class="text-xl font-bold mb-2 text-teal-700">Apersepsi</h3>
<p class="text-lg font-medium mb-4">Pernahkah kamu memperhatikan detail bentuk, rasa, dan bahan jajanan favoritmu lalu menceritakannya ke orang lain?</p>
<p class="text-sm opacity-70 bg-teal-50 p-3 rounded-lg border border-teal-100">💡 <strong>Hint:</strong> Mengamati dengan saksama adalah langkah pertama untuk membuat teks Laporan Hasil Observasi (LHO) yang baik!</p>
</div>
</div>
</section>
<!-- Slide 2: Asesmen Awal -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-2">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Uji Pemahaman Awal</h2>
<p class="text-center mb-6 text-gray-500">Teks LHO harus berisi <strong>FAKTA</strong>. Coba tentukan mana fakta dan opini di bawah ini!</p>
<div class="w-full space-y-4" id="asesmen-awal-container">
<div class="space-y-3" id="fakta-opini-quiz">
<div class="p-5 rounded-xl bg-white shadow-sm border border-gray-100">
<p class="font-medium mb-3">1. "Kucing memiliki empat kaki, berbulu, dan termasuk hewan mamalia."</p>
<div class="flex gap-3">
<button class="option-btn px-6 py-2 rounded-lg bg-teal-50 border border-teal-200 font-medium text-teal-700 hover:bg-teal-100" onclick="checkFaktaOpini(this, true)">Fakta</button>
<button class="option-btn px-6 py-2 rounded-lg bg-orange-50 border border-orange-200 font-medium text-orange-700 hover:bg-orange-100" onclick="checkFaktaOpini(this, false)">Opini</button>
</div>
</div>
<div class="p-5 rounded-xl bg-white shadow-sm border border-gray-100">
<p class="font-medium mb-3">2. "Bunga mawar merah adalah bunga yang paling indah di taman itu."</p>
<div class="flex gap-3">
<button class="option-btn px-6 py-2 rounded-lg bg-teal-50 border border-teal-200 font-medium text-teal-700 hover:bg-teal-100" onclick="checkFaktaOpini(this, false)">Fakta</button>
<button class="option-btn px-6 py-2 rounded-lg bg-orange-50 border border-orange-200 font-medium text-orange-700 hover:bg-orange-100" onclick="checkFaktaOpini(this, true)">Opini</button>
</div>
</div>
<div class="p-5 rounded-xl bg-white shadow-sm border border-gray-100">
<p class="font-medium mb-3">3. "Tanaman lidah mertua dapat menyerap polutan berbahaya di udara."</p>
<div class="flex gap-3">
<button class="option-btn px-6 py-2 rounded-lg bg-teal-50 border border-teal-200 font-medium text-teal-700 hover:bg-teal-100" onclick="checkFaktaOpini(this, true)">Fakta</button>
<button class="option-btn px-6 py-2 rounded-lg bg-orange-50 border border-orange-200 font-medium text-orange-700 hover:bg-orange-100" onclick="checkFaktaOpini(this, false)">Opini</button>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 3: Materi - Struktur LHO -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-3">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Struktur Teks LHO</h2>
<p class="text-center mb-8 opacity-70">Teks Laporan Hasil Observasi memiliki 3 bagian utama yang harus urut.</p>
<div class="grid md:grid-cols-3 gap-6 w-full">
<div class="canva-card rounded-2xl p-6 text-center border-t-4 border-emerald-400">
<div class="text-4xl mb-3">1️⃣</div>
<h3 class="font-bold mb-2 text-lg">Pernyataan Umum</h3>
<p class="text-sm text-gray-600">Berisi pembuka, pengertian, atau klasifikasi umum tentang objek yang diamati. (Misal: "Sapi adalah mamalia berkaki empat...")</p>
</div>
<div class="canva-card rounded-2xl p-6 text-center border-t-4 border-blue-400">
<div class="text-4xl mb-3">2️⃣</div>
<h3 class="font-bold mb-2 text-lg">Deskripsi Bagian</h3>
<p class="text-sm text-gray-600">Berisi penjelasan detail atau rincian ciri-ciri fisik, bagian, atau perilaku objek. (Misal: "Bulu sapi bertekstur halus, tanduknya...")</p>
</div>
<div class="canva-card rounded-2xl p-6 text-center border-t-4 border-purple-400">
<div class="text-4xl mb-3">3️⃣</div>
<h3 class="font-bold mb-2 text-lg">Deskripsi Manfaat</h3>
<p class="text-sm text-gray-600">Berisi penjelasan tentang kegunaan, manfaat, atau fungsi dari objek tersebut bagi kehidupan.</p>
</div>
</div>
</section>
<!-- Slide 4: Contoh Teks LHO -->
<section class="slide fade-in flex-col items-center max-w-5xl w-full" id="slide-4">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-6 text-center">Analisis Struktur Teks LHO</h2>
<div class="w-full grid md:grid-cols-5 gap-6">
<div class="md:col-span-2 rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?auto=format&fit=crop&w=800&q=80" alt="Kucing" class="w-full h-full object-cover min-h-[300px]">
</div>
<div class="md:col-span-3 space-y-4 flex flex-col justify-center">
<div class="canva-card rounded-xl p-4 border-l-4 border-emerald-400">
<span class="text-xs font-bold uppercase tracking-wide text-emerald-600 bg-emerald-50 px-2 py-1 rounded">Pernyataan Umum</span>
<p class="text-sm mt-2 text-gray-700">Kucing (Felis catus) adalah hewan mamalia karnivora dari keluarga Felidae. Kucing telah berbaur dengan kehidupan manusia sejak ribuan tahun lalu.</p>
</div>
<div class="canva-card rounded-xl p-4 border-l-4 border-blue-400">
<span class="text-xs font-bold uppercase tracking-wide text-blue-600 bg-blue-50 px-2 py-1 rounded">Deskripsi Bagian</span>
<p class="text-sm mt-2 text-gray-700">Kucing memiliki mata dengan penglihatan malam yang sangat tajam, cakar yang dapat ditarik masuk, pendengaran yang peka, serta kumis (misai) yang berfungsi sebagai alat sensor lingkungan.</p>
</div>
<div class="canva-card rounded-xl p-4 border-l-4 border-purple-400">
<span class="text-xs font-bold uppercase tracking-wide text-purple-600 bg-purple-50 px-2 py-1 rounded">Deskripsi Manfaat</span>
<p class="text-sm mt-2 text-gray-700">Secara umum, kucing sering dipelihara manusia karena kemampuannya memburu hama seperti tikus, serta kehadirannya dapat membantu menurunkan tingkat stres pada manusia.</p>
</div>
</div>
</div>
</section>
<!-- Slide 5: Ciri Kebahasaan -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-5">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center">Ciri Kebahasaan Teks LHO</h2>
<div class="grid md:grid-cols-3 gap-6 w-full">
<div class="canva-card rounded-2xl p-6 bg-white border border-gray-100">
<div class="text-4xl mb-4 text-center">🔬</div>
<h3 class="font-bold mb-2 text-center text-lg text-rose-600">Istilah Ilmiah/Teknis</h3>
<p class="text-sm text-gray-600 mb-3 text-center">Menggunakan kata-kata teknis sesuai dengan bidang ilmu objek yang diamati.</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm italic text-gray-700">Contoh: Karnivora, fotosintesis, anatomi, mamalia, spesies.</p>
</div>
</div>
<div class="canva-card rounded-2xl p-6 bg-white border border-gray-100">
<div class="text-4xl mb-4 text-center">📖</div>
<h3 class="font-bold mb-2 text-center text-lg text-indigo-600">Kalimat Definisi & Deskripsi</h3>
<p class="text-sm text-gray-600 mb-3 text-center">Menggunakan kata kopula (adalah, merupakan) dan kalimat rincian fisik.</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm italic text-gray-700">Contoh: "Harimau <strong>merupakan</strong> hewan buas." "Bulunya <strong>berwarna</strong> belang emas."</p>
</div>
</div>
<div class="canva-card rounded-2xl p-6 bg-white border border-gray-100">
<div class="text-4xl mb-4 text-center">🎯</div>
<h3 class="font-bold mb-2 text-center text-lg text-amber-600">Objektif & Faktual</h3>
<p class="text-sm text-gray-600 mb-3 text-center">Data disampaikan berdasarkan fakta, bukan imajinasi atau opini pribadi.</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm italic text-gray-700">Hindari: "Bunga ini <strong>sangat cantik</strong>." <br>Gunakan: "Bunga ini <strong>berwarna merah cerah</strong>."</p>
</div>
</div>
</div>
</section>
<!-- Slide 6: Aktivitas - Jodohkan Struktur -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-6">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Latihan: Susun Struktur LHO!</h2>
<p class="text-center mb-8 text-gray-500"><strong>Cara bermain:</strong> Klik salah satu teks di sebelah kiri, lalu klik kotak (zona) yang tepat di sebelah kanan untuk menjodohkannya.</p>
<div class="w-full grid md:grid-cols-2 gap-8">
<!-- Pilihan Teks -->
<div class="space-y-4" id="struktur-options">
<div class="struktur-item p-4 rounded-xl bg-white shadow-md border-2 border-transparent text-sm text-gray-700" data-struktur="pu" onclick="selectStruktur(this)">
"Tanaman lidah mertua (Sansevieria) adalah tanaman hias asli daerah tropis yang sangat populer di Indonesia."
</div>
<div class="struktur-item p-4 rounded-xl bg-white shadow-md border-2 border-transparent text-sm text-gray-700" data-struktur="dm" onclick="selectStruktur(this)">
"Tanaman ini sangat bermanfaat karena mampu menyerap polutan berbahaya di udara seperti formaldehida dan benzena."
</div>
<div class="struktur-item p-4 rounded-xl bg-white shadow-md border-2 border-transparent text-sm text-gray-700" data-struktur="db" onclick="selectStruktur(this)">
"Daunnya keras, berbentuk pedang, tegak ke atas, berwarna hijau tua dengan corak garis kuning di bagian pinggirnya."
</div>
</div>
<!-- Target Area -->
<div class="space-y-4">
<div class="drop-zone p-4 flex flex-col gap-2 justify-center" data-target="pu" onclick="dropStruktur('pu')">
<span class="text-xs font-bold bg-emerald-100 text-emerald-700 px-3 py-1 rounded w-fit inline-block">1. Pernyataan Umum</span>
<span class="drop-text text-sm text-gray-400">Klik teks di kiri, lalu klik di sini...</span>
</div>
<div class="drop-zone p-4 flex flex-col gap-2 justify-center" data-target="db" onclick="dropStruktur('db')">
<span class="text-xs font-bold bg-blue-100 text-blue-700 px-3 py-1 rounded w-fit inline-block">2. Deskripsi Bagian</span>
<span class="drop-text text-sm text-gray-400">Klik teks di kiri, lalu klik di sini...</span>
</div>
<div class="drop-zone p-4 flex flex-col gap-2 justify-center" data-target="dm" onclick="dropStruktur('dm')">
<span class="text-xs font-bold bg-purple-100 text-purple-700 px-3 py-1 rounded w-fit inline-block">3. Deskripsi Manfaat</span>
<span class="drop-text text-sm text-gray-400">Klik teks di kiri, lalu klik di sini...</span>
</div>
</div>
</div>
<div id="match-feedback" class="mt-6 p-3 bg-emerald-50 rounded-lg text-center font-bold text-lg hidden w-full"></div>
</section>
<!-- Slide 7: Mengolah Data Observasi -->
<section class="slide fade-in flex-col items-center max-w-5xl w-full" id="slide-7">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Dari Data Menjadi Teks</h2>
<p class="text-center mb-6 text-gray-500">Coba ubah poin-poin hasil observasi di bawah ini menjadi sebuah paragraf teks LHO utuh.</p>
<div class="w-full grid md:grid-cols-5 gap-8">
<div class="md:col-span-2">
<img src="https://images.unsplash.com/photo-1620023604082-fce47f259740?auto=format&fit=crop&w=800&q=80" alt="Putri Malu" class="w-full h-40 object-cover rounded-2xl mb-4 border-4 border-white shadow-md">
<div class="canva-card rounded-xl p-5 bg-white border border-gray-100">
<h4 class="font-bold mb-3 text-teal-700 flex items-center gap-2">📋 Data Observasi:</h4>
<ul class="text-sm space-y-2 list-disc pl-5 text-gray-700">
<li><strong>Objek:</strong> Tanaman Putri Malu (Mimosa pudica)</li>
<li><strong>Daun:</strong> kecil, majemuk, langsung menutup jika disentuh</li>
<li><strong>Batang:</strong> menjalar, memiliki duri-duri halus</li>
<li><strong>Habitat:</strong> tumbuh liar di halaman, butuh tanah lembab</li>
<li><strong>Manfaat:</strong> sering diolah sebagai obat tradisional insomnia</li>
</ul>
</div>
</div>
<div class="md:col-span-3 flex flex-col">
<h4 class="font-bold mb-3 text-gray-800">✍️ Susun paragraf LHO-mu:</h4>
<textarea id="olah-textarea" class="w-full flex-1 min-h-[200px] p-4 rounded-xl border-2 border-gray-200 focus:border-teal-400 focus:ring-4 focus:ring-teal-50 focus:outline-none text-sm resize-none" placeholder="Contoh: Putri malu (Mimosa pudica) adalah tanaman perdu liar yang sering ditemukan di..."></textarea>
<div class="flex justify-between items-center mt-4">
<div id="olah-feedback" class="text-sm font-medium hidden"></div>
<button class="px-6 py-2 bg-teal-500 text-white rounded-lg font-medium hover:bg-teal-600 transition shadow-sm ml-auto" onclick="showOlahFeedback()">Cek Tulisan Saya</button>
</div>
</div>
</div>
</section>
<!-- Slide 8: Kuis Interaktif -->
<section class="slide fade-in flex-col items-center max-w-3xl w-full" id="slide-8">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center text-teal-700">Kuis Evaluasi</h2>
<div class="w-full canva-card bg-white p-8 rounded-2xl border border-gray-100" id="kuis-container">
<div id="kuis-question" class="mb-6 pb-4 border-b border-gray-100">
<p class="font-bold text-xl text-gray-800" id="kuis-q-text"></p>
</div>
<div id="kuis-options" class="space-y-3"></div>
<div class="flex justify-between items-center mt-6 h-10">
<div id="kuis-result" class="font-bold text-lg hidden"></div>
<button id="kuis-next" class="px-6 py-2 bg-slate-800 text-white rounded-lg font-medium hover:bg-slate-700 transition hidden ml-auto" onclick="nextKuis()">Selanjutnya →</button>
</div>
</div>
<div id="kuis-score" class="mt-6 text-center hidden w-full canva-card p-10 rounded-2xl bg-teal-50 border border-teal-100">
<div class="text-5xl mb-4">🏆</div>
<p class="text-3xl font-bold heading-font text-teal-800"></p>
<p class="mt-2 text-teal-600">Kerja bagus menyelesaikan kuis ini!</p>
</div>
</section>
<!-- Slide 9: Asesmen Akhir -->
<section class="slide fade-in flex-col items-center max-w-3xl w-full" id="slide-9">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center text-indigo-700">Asesmen Akhir</h2>
<div class="w-full canva-card bg-white p-8 rounded-2xl border border-gray-100" id="asesmen-akhir-container">
<div id="aa-question" class="mb-6 pb-4 border-b border-gray-100">
<p class="font-bold text-xl text-gray-800" id="aa-q-text"></p>
</div>
<div id="aa-options" class="space-y-3"></div>
<div class="flex justify-between items-center mt-6 h-10">
<div id="aa-result" class="font-bold text-lg hidden"></div>
<button id="aa-next" class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition hidden ml-auto" onclick="nextAA()">Selanjutnya →</button>
</div>
</div>
<div id="aa-score" class="mt-6 text-center hidden w-full canva-card p-10 rounded-2xl bg-indigo-50 border border-indigo-100">
<div class="text-5xl mb-4">💯</div>
<p class="text-3xl font-bold heading-font text-indigo-800"></p>
<p class="mt-2 text-indigo-600">Kamu telah menyelesaikan seluruh asesmen!</p>
</div>
</section>
<!-- Slide 10: Refleksi -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-10">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center">Refleksi Belajar</h2>
<div class="w-full grid md:grid-cols-2 gap-8 items-center">
<div class="rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=800&q=80" alt="Refleksi" class="w-full h-64 object-cover">
</div>
<div class="space-y-4 canva-card p-6 bg-white rounded-2xl border-t-4 border-amber-400">
<h3 class="font-bold text-lg text-gray-800">Mari Berbagi!</h3>
<p class="text-gray-600 font-medium text-sm">Apa hal baru yang paling menarik yang kamu pelajari tentang Teks LHO hari ini?</p>
<textarea id="refleksi-textarea" class="w-full h-32 p-3 rounded-xl border-2 border-gray-200 focus:border-amber-400 focus:outline-none text-sm resize-none" placeholder="Tuliskan kesan, pendapat, atau kesimpulanmu di sini..."></textarea>
<button class="w-full py-3 bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-lg font-bold hover:opacity-90 transition shadow-sm" onclick="submitRefleksi()">Kirim Refleksi ✨</button>
<div id="refleksi-feedback" class="p-3 bg-green-50 text-sm text-green-700 font-bold rounded-lg text-center hidden border border-green-200">
Terima kasih! Refleksimu sudah tersimpan dengan baik 🎉
</div>
</div>
</div>
</section>
<!-- Slide 11: Panduan Guru -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-11">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-6 text-center text-slate-700">Panduan Mengajar Guru</h2>
<div class="w-full grid md:grid-cols-3 gap-6">
<div class="col-span-1 rounded-2xl overflow-hidden shadow-md">
<img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&w=600&q=80" alt="Guru" class="w-full h-full object-cover min-h-[250px]">
</div>
<div class="col-span-2 canva-card rounded-2xl p-6 bg-white space-y-4 border border-slate-100">
<div class="p-3 bg-slate-50 rounded-lg">
<h4 class="font-bold text-emerald-700 flex items-center gap-2"><span>📌</span> Apersepsi (Slide 1-2):</h4>
<p class="text-sm text-slate-600 mt-1">Pancing siswa berbagi pengalaman mengamati objek di sekitar (misal: kantin/taman). Tekankan perbedaan antara fakta (yang bisa dibuktikan) dan opini (pendapat).</p>
</div>
<div class="p-3 bg-slate-50 rounded-lg">
<h4 class="font-bold text-blue-700 flex items-center gap-2"><span>📌</span> Aktivitas Struktur (Slide 6):</h4>
<p class="text-sm text-slate-600 mt-1">Beri waktu 3-5 menit untuk interaksi. Dorong siswa berdiskusi dengan teman sebangku sebelum menjodohkan teks.</p>
</div>
<div class="p-3 bg-slate-50 rounded-lg">
<h4 class="font-bold text-purple-700 flex items-center gap-2"><span>📌</span> Mengolah Data (Slide 7):</h4>
<p class="text-sm text-slate-600 mt-1">Fokus pada bagaimana siswa menggunakan kopula ("adalah/merupakan") dan menghubungkan fakta menjadi paragraf kohesif tanpa memasukkan opini pribadi.</p>
</div>
</div>
</div>
</section>
<!-- Slide 12: Penutup -->
<section class="slide fade-in flex-col items-center justify-center max-w-4xl w-full text-center h-[60vh]" id="slide-12">
<div class="text-7xl mb-6 drop-shadow-sm">🎓</div>
<h2 class="heading-font text-4xl md:text-5xl font-black mb-4 text-emerald-600">Kamu Luar Biasa!</h2>
<p class="text-xl opacity-80 mb-8 max-w-lg mx-auto text-slate-600">Kamu telah menyelesaikan seluruh materi Teks Laporan Hasil Observasi (LHO) hari ini dengan sangat baik.</p>
<div class="bg-white p-6 rounded-2xl shadow-lg border-2 border-emerald-100 max-w-md mx-auto">
<p class="font-bold text-slate-800">"Teruslah mengamati dunia di sekitarmu dengan cermat layaknya mata seorang ilmuwan sejati!"</p>
</div>
</section>
</main>
<!-- Navigation -->
<nav class="fixed bottom-0 left-0 w-full bg-white/95 backdrop-blur-md border-t p-4 flex justify-between items-center z-50 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
<button id="btn-prev" class="px-5 py-2 rounded-lg border-2 border-gray-200 text-gray-600 font-bold hover:bg-gray-50 transition disabled:opacity-30 disabled:cursor-not-allowed" onclick="prevSlide()" disabled> ← Sebelumnya </button>
<span id="slide-counter" class="text-sm font-bold text-gray-500 bg-gray-100 px-4 py-2 rounded-full">1 / 12</span>
<button id="btn-next" class="px-5 py-2 rounded-lg bg-teal-500 text-white font-bold hover:bg-teal-600 shadow-sm transition" onclick="nextSlide()"> Selanjutnya → </button>
</nav>
<script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script>
<script>
// Slide navigation
let currentSlide = 1;
const totalSlides = 12;
function showSlide(n) {
document.querySelectorAll('.slide').forEach(s => s.classList.remove('active'));
document.getElementById(`slide-${n}`).classList.add('active');
document.getElementById('slide-counter').textContent = `${n} / ${totalSlides}`;
document.getElementById('progress-bar').style.width = `${(n / totalSlides) * 100}%`;
document.getElementById('btn-prev').disabled = n === 1;
if (n === totalSlides) {
document.getElementById('btn-next').style.display = 'none';
} else {
document.getElementById('btn-next').style.display = 'block';
document.getElementById('btn-next').disabled = false;
}
}
function nextSlide() { if (currentSlide < totalSlides) { currentSlide++; showSlide(currentSlide); } }
function prevSlide() { if (currentSlide > 1) { currentSlide--; showSlide(currentSlide); } }
// Asesmen Awal - Fakta vs Opini
function checkFaktaOpini(btn, isCorrect) {
const parent = btn.parentElement;
if (parent.querySelector('.correct, .incorrect')) return; // Prevent multiple clicks
if (isCorrect) {
btn.classList.add('correct');
} else {
btn.classList.add('incorrect');
// Show the correct answer automatically
setTimeout(() => {
parent.querySelectorAll('.option-btn').forEach(b => {
if (b !== btn) b.classList.add('correct');
});
}, 300);
}
}
// Aktivitas Jodohkan Struktur (Drag and Drop / Click to Match)
let selectedStruktur = null;
function selectStruktur(el) {
if(el.classList.contains('placed')) return; // Can't select already placed item
document.querySelectorAll('.struktur-item').forEach(i => i.style.outline = 'none');
selectedStruktur = el;
el.style.outline = '3px solid #14b8a6'; // Teal outline
}
function dropStruktur(target) {
if (!selectedStruktur) return;
const zone = document.querySelector(`[data-target="${target}"]`);
if (zone.classList.contains('filled')) return; // Zone already has an answer
const struktur = selectedStruktur.dataset.struktur;
if (struktur === target) {
zone.classList.add('filled');
// Limit string length for aesthetic
let txt = selectedStruktur.textContent.trim();
if(txt.length > 70) txt = txt.substring(0, 70) + '...';
zone.querySelector('.drop-text').textContent = txt;
zone.querySelector('.drop-text').classList.remove('text-gray-400');
zone.querySelector('.drop-text').classList.add('text-emerald-800', 'font-medium');
selectedStruktur.classList.add('placed');
} else {
zone.style.borderColor = '#ef4444'; // Red error border
setTimeout(() => { zone.style.borderColor = '#cbd5e1'; }, 600); // Reset border
}
selectedStruktur.style.outline = 'none';
selectedStruktur = null;
// Check if all are matched
if (document.querySelectorAll('.drop-zone.filled').length === 3) {
const fb = document.getElementById('match-feedback');
fb.textContent = '🎉 Luar biasa! Seluruh struktur LHO sudah tersusun berurutan dengan benar!';
fb.classList.remove('hidden');
fb.classList.add('text-emerald-700');
}
}
// Mengolah Data Feedback
function showOlahFeedback() {
const text = document.getElementById('olah-textarea').value;
const fb = document.getElementById('olah-feedback');
fb.classList.remove('hidden');
if (text.length < 30) {
fb.textContent = '⚠️ Tulisanmu masih terlalu singkat. Coba gabungkan semua data menjadi paragraf utuh!';
fb.className = 'text-sm font-bold text-orange-500';
} else {
let score = 0;
if (text.toLowerCase().includes('adalah') || text.toLowerCase().includes('merupakan')) score++;
if (text.toLowerCase().includes('majemuk') || text.toLowerCase().includes('menjalar') || text.toLowerCase().includes('duri')) score++;
if (text.toLowerCase().includes('manfaat') || text.toLowerCase().includes('obat') || text.toLowerCase().includes('insomnia')) score++;
if (score === 0) {
fb.textContent = '💡 Jangan lupa gunakan kata "adalah/merupakan" untuk definisi dan tuliskan manfaatnya.';
fb.className = 'text-sm font-bold text-blue-500';
} else if (score === 1 || score === 2) {
fb.textContent = '👍 Bagus! Coba pastikan ciri fisik (daun/batang) dan manfaatnya juga kamu tulis semua ya.';
fb.className = 'text-sm font-bold text-teal-600';
} else {
fb.textContent = '🌟 Sempurna! Paragrafmu sudah mengandung definisi, deskripsi bagian, dan manfaat sesuai kaidah LHO.';
fb.className = 'text-sm font-bold text-emerald-600';
}
}
}
// Kuis Interaktif
const kuisData = [
{ q: 'Bagian teks LHO yang berisi gambaran umum tentang objek yang diobservasi disebut...', opts: ['Deskripsi Bagian', 'Pernyataan Umum', 'Deskripsi Manfaat', 'Kesimpulan Akhir'], answer: 1 },
{ q: 'Ciri bahasa teks LHO sering menggunakan istilah teknis atau ilmiah. Manakah yang termasuk kata ilmiah?', opts: ['Sangat cantik', 'Fotosintesis', 'Super keren', 'Besar sekali'], answer: 1 },
{ q: '"Harimau Sumatera adalah hewan karnivora endemik pulau Sumatera." Kalimat tersebut termasuk contoh...', opts: ['Kalimat opini', 'Kalimat definisi', 'Kalimat narasi', 'Kalimat tanya'], answer: 1 },
{ q: 'Teks Laporan Hasil Observasi memiliki sifat yang penting, yaitu...', opts: ['Subjektif dan penuh emosi', 'Objektif dan berdasarkan fakta', 'Imajinatif dan seperti puisi', 'Menarik simpati pembaca'], answer: 1 }
];
let kuisIdx = 0, kuisScore = 0;
function renderKuis() {
if (kuisIdx >= kuisData.length) {
document.getElementById('kuis-container').classList.add('hidden');
const sc = document.getElementById('kuis-score');
sc.classList.remove('hidden');
sc.querySelector('p').textContent = `Skormu: ${kuisScore} / ${kuisData.length}`;
return;
}
const k = kuisData[kuisIdx];
document.getElementById('kuis-q-text').textContent = `Soal ${kuisIdx + 1}: ${k.q}`;
const container = document.getElementById('kuis-options');
container.innerHTML = '';
k.opts.forEach((opt, i) => {
const btn = document.createElement('button');
btn.className = 'option-btn w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-100 text-left font-medium text-slate-700 hover:bg-slate-100';
btn.textContent = opt;
btn.onclick = () => answerKuis(i, k.answer);
container.appendChild(btn);
});
document.getElementById('kuis-result').classList.add('hidden');
document.getElementById('kuis-next').classList.add('hidden');
}
function answerKuis(selected, correct) {
const btns = document.querySelectorAll('#kuis-options .option-btn');
if (btns[0].classList.contains('correct') || btns[0].classList.contains('incorrect')) return; // Prevent changing answer
btns.forEach((b, i) => {
if (i === correct) b.classList.add('correct');
else if (i === selected) b.classList.add('incorrect');
b.style.pointerEvents = 'none'; // disable clicks after answered
});
if (selected === correct) kuisScore++;
const res = document.getElementById('kuis-result');
res.textContent = selected === correct ? '✅ Tepat Sekali!' : '❌ Ops, jawaban yang benar berwarna hijau!';
res.className = `font-bold text-lg ${selected === correct ? 'text-emerald-600' : 'text-red-500'}`;
res.classList.remove('hidden');
document.getElementById('kuis-next').classList.remove('hidden');
}
function nextKuis() { kuisIdx++; renderKuis(); }
// Asesmen Akhir
const aaData = [
{ q: 'Urutan struktur teks Laporan Hasil Observasi yang benar adalah...', opts: ['Deskripsi Bagian → Pernyataan Umum → Deskripsi Manfaat', 'Pernyataan Umum → Deskripsi Bagian → Deskripsi Manfaat', 'Deskripsi Manfaat → Deskripsi Bagian → Pernyataan Umum'], answer: 1 },
{ q: '"Daun sirih memiliki bentuk menyerupai jantung, berwarna hijau mengkilap, dan tepinya rata." Paragraf ini termasuk bagian...', opts: ['Pernyataan Umum', 'Deskripsi Bagian', 'Deskripsi Manfaat'], answer: 1 },
{ q: 'Manakah dari opsi berikut yang BUKAN termasuk ciri kebahasaan teks LHO?', opts: ['Menggunakan kata ilmiah/teknis', 'Menggunakan kalimat deskripsi objektif', 'Menggunakan bahasa emotif dan kata pujian (sangat indah)'], answer: 2 },
{ q: 'Sumber data yang paling valid dan tepat untuk diolah menjadi teks LHO adalah...', opts: ['Cerita khayalan teman sekelas', 'Hasil pengamatan fisik langsung dan literatur faktual', 'Pendapat pribadi penulis tentang suatu benda'], answer: 1 },
{ q: '"Paus biru merupakan hewan mamalia laut terbesar di dunia dari ordo Cetacea." Kalimat tersebut mengandung ciri kebahasaan berupa...', opts: ['Kalimat opini dan majas', 'Kalimat definisi dan istilah ilmiah', 'Kalimat persuasif dan kata ganti'], answer: 1 }
];
let aaIdx = 0, aaScore = 0;
function renderAA() {
if (aaIdx >= aaData.length) {
document.getElementById('asesmen-akhir-container').classList.add('hidden');
const sc = document.getElementById('aa-score');
sc.classList.remove('hidden');
const finalGrade = (aaScore / aaData.length) * 100;
sc.querySelector('p').textContent = `Nilai Akhir: ${finalGrade}`;
return;
}
const a = aaData[aaIdx];
document.getElementById('aa-q-text').textContent = `Pertanyaan ${aaIdx + 1}: ${a.q}`;
const container = document.getElementById('aa-options');
container.innerHTML = '';
a.opts.forEach((opt, i) => {
const btn = document.createElement('button');
btn.className = 'option-btn w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-100 text-left font-medium text-slate-700 hover:bg-slate-100';
btn.textContent = opt;
btn.onclick = () => answerAA(i, a.answer);
container.appendChild(btn);
});
document.getElementById('aa-result').classList.add('hidden');
document.getElementById('aa-next').classList.add('hidden');
}
function answerAA(selected, correct) {
const btns = document.querySelectorAll('#aa-options .option-btn');
if (btns[0].classList.contains('correct') || btns[0].classList.contains('incorrect')) return;
btns.forEach((b, i) => {
if (i === correct) b.classList.add('correct');
else if (i === selected) b.classList.add('incorrect');
b.style.pointerEvents = 'none';
});
if (selected === correct) aaScore++;
const res = document.getElementById('aa-result');
res.textContent = selected === correct ? '✅ Benar!' : '❌ Jawaban salah.';
res.className = `font-bold text-lg ${selected === correct ? 'text-emerald-600' : 'text-red-500'}`;
res.classList.remove('hidden');
document.getElementById('aa-next').classList.remove('hidden');
}
function nextAA() { aaIdx++; renderAA(); }
// Refleksi
function submitRefleksi() {
const text = document.getElementById('refleksi-textarea').value;
if (text.length > 5) {
document.getElementById('refleksi-feedback').classList.remove('hidden');
} else {
alert("Silakan tulis refleksimu terlebih dahulu sebelum mengirim.");
}
}
// Init
document.addEventListener('DOMContentLoaded', () => {
renderKuis();
renderAA();
lucide.createIcons();
// Allow keyboard navigation using left/right arrows
document.addEventListener('keydown', (e) => {
if(e.key === 'ArrowRight' && currentSlide < totalSlides) {
nextSlide();
} else if(e.key === 'ArrowLeft' && currentSlide > 1) {
prevSlide();
}
});
});
</script>
</body>
</html>
.png)
Kelas 8
Matematika
Persamaan dan Pertidaksamaan Linear Satu Variabel
<!doctype html>
<html lang="id">
<head>
<script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script>
<script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Pembelajaran PLSV dan PtLSV</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<style>
* { font-family: 'DM Sans', sans-serif; }
body { background-color: #111827; color: #f9fafb; }
.slide { display: none; }
.slide.active { display: flex; }
.quiz-option { transition: all 0.3s; cursor: pointer; }
.quiz-option.correct { background: #22c55e !important; color: white !important; border-color: #16a34a !important; }
.quiz-option.wrong { background: #ef4444 !important; color: white !important; border-color: #dc2626 !important; }
.quiz-option.show-correct { border: 3px solid #22c55e !important; background: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; }
.quiz-option:disabled { cursor: not-allowed; opacity: 0.8; }
.num-circle { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.feedback-box { padding: 12px 16px; border-radius: 8px; margin-top: 12px; font-weight: 500; display: none; }
.feedback-box.show { display: block; }
input[type="number"], textarea { color: white; background-color: #374151; }
</style>
</head>
<body data-template-id="__page-root" class="min-h-screen flex flex-col bg-gray-900 text-white">
<header data-template-id="header-bg" class="canva-header px-4 py-3 flex items-center justify-between shadow-lg bg-gray-800">
<div class="flex items-center gap-3">
<span class="text-2xl">⚖️</span>
<h1 data-template-id="app-title" class="canva-text text-lg font-bold text-white">PLSV & PtLSV</h1>
</div>
<div class="flex items-center gap-2">
<span id="slide-counter" class="text-gray-300 text-sm font-medium">1 / 24</span>
</div>
</header>
<div class="w-full h-1.5 bg-gray-700">
<div id="progress-bar" class="h-full bg-yellow-400 transition-all duration-300" style="width:4%"></div>
</div>
<main class="flex-1 overflow-y-auto" id="slides-container">
<!-- SLIDE 1: Cover -->
<div class="slide active flex-col items-center justify-center text-center p-6 gap-4" data-slide="1">
<div class="text-7xl mb-2">⚖️</div>
<h2 data-template-id="cover-title" class="canva-text text-3xl font-black text-white">Persamaan & Pertidaksamaan</h2>
<p data-template-id="cover-subtitle" class="canva-text text-lg text-gray-300">Linear Satu Variabel</p>
<p data-template-id="cover-class" class="canva-text text-sm text-gray-400">Matematika SMP</p>
</div>
<!-- SLIDE 2: Tujuan Pembelajaran -->
<div class="slide flex-col p-5 gap-3" data-slide="2">
<h2 data-template-id="tp-title" class="canva-text text-xl font-bold mb-2 text-white">Tujuan Pembelajaran</h2>
<div class="space-y-3">
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">1</span>
<p data-template-id="tp-1" class="canva-text text-sm text-gray-200 mt-1">Membedakan kalimat terbuka dan tertutup.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">2</span>
<p data-template-id="tp-2" class="canva-text text-sm text-gray-200 mt-1">Membuat model matematika dari masalah kontekstual.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">3</span>
<p data-template-id="tp-3" class="canva-text text-sm text-gray-200 mt-1">Menyelesaikan Persamaan Linear Satu Variabel (PLSV).</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">4</span>
<p data-template-id="tp-4" class="canva-text text-sm text-gray-200 mt-1">Menyelesaikan Pertidaksamaan Linear Satu Variabel (PtLSV).</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">5</span>
<p data-template-id="tp-5" class="canva-text text-sm text-gray-200 mt-1">Memecahkan masalah sehari-hari menggunakan PLSV dan PtLSV.</p>
</div>
</div>
</div>
<!-- SLIDE 3: Apersepsi -->
<div class="slide flex-col p-5 gap-4" data-slide="3">
<h2 data-template-id="aper-title" class="canva-text text-xl font-bold text-white">Apersepsi</h2>
<img data-template-id="aper-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="aper-question" class="canva-text text-base leading-relaxed text-gray-200"></p>
<div class="bg-gray-800 p-4 rounded-xl border border-gray-700">
<p data-template-id="aper-hint" class="canva-text text-sm italic text-gray-300"></p>
</div>
</div>
<!-- SLIDE 4: Apersepsi 2 -->
<div class="slide flex-col p-5 gap-4" data-slide="4">
<h2 data-template-id="aper2-title" class="canva-text text-lg font-bold text-white"></h2>
<img data-template-id="aper2-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="aper2-question" class="canva-text text-base text-gray-200"></p>
</div>
<!-- SLIDE 5: Asesmen Awal -->
<div class="slide flex-col p-5 gap-4" data-slide="5">
<h2 data-template-id="pretest-title" class="canva-text text-xl font-bold text-white">Asesmen Awal</h2>
<p data-template-id="pretest-desc" class="canva-text text-sm text-gray-400">Mari kita uji pengetahuan awalmu!</p>
<div class="space-y-3" id="pretest-q1">
<p class="font-medium text-white text-sm">1. Manakah yang termasuk kalimat terbuka?</p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','a',true)">x + 3 = 7</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','b',false)">2 + 3 = 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','c',false)">4 > 2</button>
</div>
<div class="feedback-box" id="pretest-q1-feedback"></div>
</div>
<div class="space-y-3" id="pretest-q2">
<p class="font-medium text-white text-sm">2. Nilai x dari x + 5 = 8 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','2',false)">2</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','3',true)">3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','5',false)">5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','13',false)">13</button>
</div>
<div class="feedback-box" id="pretest-q2-feedback"></div>
</div>
<div class="space-y-3" id="pretest-q3">
<p class="font-medium text-white text-sm">3. Tanda yang tepat untuk pertidaksamaan: x ... 5</p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','=',false)">=</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','<',true)"><, >, ≤, ≥</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','+',false)">+</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','×',false)">×</button>
</div>
<div class="feedback-box" id="pretest-q3-feedback"></div>
</div>
</div>
<!-- SLIDE 6: TP1 - Kalimat Terbuka & Tertutup -->
<div class="slide flex-col p-5 gap-4" data-slide="6">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1</div>
<h2 data-template-id="tp1-title" class="canva-text text-xl font-bold text-white">Kalimat Terbuka & Tertutup</h2>
<p data-template-id="tp1-intro" class="canva-text text-base leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<div class="bg-blue-900/30 border border-blue-700/50 p-3 rounded-lg">
<p class="font-bold text-blue-300 text-sm">Kalimat Terbuka</p>
<p class="text-blue-100 text-xs mt-1">Kalimat yang memuat variabel dan belum diketahui nilai kebenarannya.</p>
<p class="text-blue-400 text-xs mt-1">Contoh: x + 2 = 5, y > 3</p>
</div>
<div class="bg-green-900/30 border border-green-700/50 p-3 rounded-lg">
<p class="font-bold text-green-300 text-sm">Kalimat Tertutup</p>
<p class="text-green-100 text-xs mt-1">Kalimat yang sudah jelas benar atau salah.</p>
<p class="text-green-400 text-xs mt-1">Contoh: 3 + 4 = 7 (benar), 5 > 8 (salah)</p>
</div>
</div>
</div>
<!-- SLIDE 7: TP1 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="7">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1 - Aktivitas</div>
<h2 data-template-id="tp1-act-title" class="canva-text text-lg font-bold text-white">Latihan Mandiri</h2>
<p data-template-id="tp1-act-desc" class="canva-text text-sm text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Kelompokkan kalimat berikut! Ketuk T (Terbuka) atau U (Tertutup)</p>
<div class="space-y-2" id="tp1-activity">
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="terbuka">
<span class="font-bold text-gray-100 text-sm">2x - 1 = 9</span>
<div class="flex gap-2">
<button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button>
<button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="tertutup">
<span class="font-bold text-gray-100 text-sm">8 + 2 = 10</span>
<div class="flex gap-2">
<button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button>
<button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="terbuka">
<span class="font-bold text-gray-100 text-sm">y + 4 > 10</span>
<div class="flex gap-2">
<button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button>
<button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="tertutup">
<span class="font-bold text-gray-100 text-sm">7 - 3 = 5</span>
<div class="flex gap-2">
<button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button>
<button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button>
</div>
</div>
</div>
</div>
</div>
<!-- SLIDE 8: Kuis TP1 -->
<div class="slide flex-col p-5 gap-4" data-slide="8">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 1</div>
<h2 data-template-id="quiz1-title" class="canva-text text-lg font-bold text-white">Kuis Kalimat Terbuka</h2>
<div id="quiz1-container">
<div class="space-y-3" id="quiz1-q1">
<p class="font-medium text-white text-sm">1. Manakah kalimat terbuka?</p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q1','a',false)">3 + 5 = 8</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q1','b',true)">3x + 1 = 7</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q1','c',false)">10 > 9</button>
</div>
<div class="feedback-box" id="quiz1-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz1-q2">
<p class="font-medium text-white text-sm">2. "4 + 6 = 10" termasuk kalimat... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q2','terbuka',false)">Terbuka</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q2','tertutup',true)">Tertutup</button>
</div>
<div class="feedback-box" id="quiz1-q2-feedback"></div>
</div>
</div>
<div id="quiz1-random" class="mt-4"></div>
<button id="quiz1-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz1')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 9: TP2 - Memodelkan Masalah -->
<div class="slide flex-col p-5 gap-4" data-slide="9">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2</div>
<h2 data-template-id="tp2-title" class="canva-text text-xl font-bold text-white">Memodelkan Masalah</h2>
<p data-template-id="tp2-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-bold text-sm">Contoh:</p>
<div class="bg-yellow-900/30 border border-yellow-700/50 p-3 rounded-lg">
<p class="text-gray-200 text-sm">"Rina membeli 3 buku dengan harga yang sama. Total Rp45.000." </p>
<p class="text-yellow-400 text-xs mt-1">→ Model: <strong>3x = 45.000</strong></p>
</div>
<div class="bg-orange-900/30 border border-orange-700/50 p-3 rounded-lg">
<p class="text-gray-200 text-sm">"Uang Budi ditambah Rp5.000 menjadi lebih dari Rp20.000." </p>
<p class="text-orange-400 text-xs mt-1">→ Model: <strong>x + 5.000 > 20.000</strong></p>
</div>
</div>
</div>
<!-- SLIDE 10: TP2 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="10">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2 - Aktivitas</div>
<h2 data-template-id="tp2-act-title" class="canva-text text-lg font-bold text-white">Susun Model</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Cocokkan cerita dengan model matematikanya!</p>
<div class="space-y-2" id="tp2-activity">
<div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="model-q1">
<p class="text-gray-100 text-sm mb-2">"Umur Ani 5 tahun lebih tua dari Budi. Umur Ani 17 tahun." </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q1','a',true)">x + 5 = 17</button>
<button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q1','b',false)">x - 5 = 17</button>
</div>
<div class="feedback-box text-xs" id="model-q1-feedback"></div>
</div>
<div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="model-q2">
<p class="text-gray-100 text-sm mb-2">"Dua kali uang saku Doni kurang dari Rp30.000"</p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q2','a',false)">2x = 30.000</button>
<button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q2','b',true)">2x < 30.000</button>
</div>
<div class="feedback-box text-xs" id="model-q2-feedback"></div>
</div>
</div>
</div>
</div>
<!-- SLIDE 11: Kuis TP2 -->
<div class="slide flex-col p-5 gap-4" data-slide="11">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 2</div>
<h2 data-template-id="quiz2-title" class="canva-text text-lg font-bold text-white">Kuis Model Matematika</h2>
<div id="quiz2-container">
<div class="space-y-3" id="quiz2-q1">
<p class="font-medium text-white text-sm">1. "Harga 4 pensil sama dengan Rp12.000" → Model?</p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q1','a',true)">4x = 12.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q1','b',false)">x + 4 = 12.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q1','c',false)">4 + x = 12.000</button>
</div>
<div class="feedback-box" id="quiz2-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz2-q2">
<p class="font-medium text-white text-sm">2. "Uang Sari ditambah Rp10.000 paling banyak Rp50.000" → Model?</p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q2','a',false)">x + 10.000 > 50.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q2','b',true)">x + 10.000 ≤ 50.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q2','c',false)">x + 10.000 = 50.000</button>
</div>
<div class="feedback-box" id="quiz2-q2-feedback"></div>
</div>
</div>
<div id="quiz2-random" class="mt-4"></div>
<button id="quiz2-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz2')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 12: TP3 - Penyelesaian PLSV -->
<div class="slide flex-col p-5 gap-4" data-slide="12">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3</div>
<h2 data-template-id="tp3-title" class="canva-text text-xl font-bold text-white">Penyelesaian PLSV</h2>
<p data-template-id="tp3-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-bold text-sm">Langkah Penyelesaian:</p>
<div class="space-y-2 text-sm text-gray-400">
<p>Selesaikan: <strong>2x + 3 = 11</strong></p>
<p>1️⃣ 2x + 3 - 3 = 11 - 3</p>
<p>2️⃣ 2x = 8</p>
<p>3️⃣ x = 8 ÷ 2 = <strong class="text-white">4</strong> ✓</p>
</div>
</div>
</div>
<!-- SLIDE 13: Aktivitas TP3 -->
<div class="slide flex-col p-5 gap-4" data-slide="13">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3 - Aktivitas</div>
<h2 data-template-id="tp3-act-title" class="canva-text text-lg font-bold text-white">Latihan PLSV</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Selesaikan: 3x - 6 = 12</p>
<div class="space-y-2">
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>3x = 12 + 6 =</span>
<input type="number" id="plsv-step1" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
</div>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>x = 18 ÷ 3 =</span>
<input type="number" id="plsv-step2" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
</div>
</div>
<button onclick="checkPLSV()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="plsv-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 14: Kuis TP3 -->
<div class="slide flex-col p-5 gap-4" data-slide="14">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 3</div>
<h2 data-template-id="quiz3-title" class="canva-text text-lg font-bold text-white">Kuis PLSV</h2>
<div id="quiz3-container">
<div class="space-y-3" id="quiz3-q1">
<p class="font-medium text-white text-sm">1. Penyelesaian dari 4x + 2 = 18 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','3',false)">x = 3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','4',true)">x = 4</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','5',false)">x = 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','6',false)">x = 6</button>
</div>
<div class="feedback-box" id="quiz3-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz3-q2">
<p class="font-medium text-white text-sm">2. Penyelesaian dari 5x - 10 = 25 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','5',false)">x = 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','7',true)">x = 7</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','3',false)">x = 3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','8',false)">x = 8</button>
</div>
<div class="feedback-box" id="quiz3-q2-feedback"></div>
</div>
</div>
<div id="quiz3-random" class="mt-4"></div>
<button id="quiz3-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz3')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 15: TP4 - Penyelesaian PtLSV -->
<div class="slide flex-col p-5 gap-4" data-slide="15">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 4</div>
<h2 data-template-id="tp4-title" class="canva-text text-xl font-bold text-white">Penyelesaian PtLSV</h2>
<p data-template-id="tp4-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-bold text-sm">Langkah Penyelesaian:</p>
<div class="space-y-2 text-sm text-gray-400">
<p>Selesaikan: <strong class="text-white">2x + 1 < 9</strong></p>
<p>1️⃣ 2x < 9 - 1</p>
<p>2️⃣ 2x < 8</p>
<p>3️⃣ x < 4</p>
<p class="text-xs text-gray-500">Himpunan penyelesaian: {x | x < 4, x ∈ R}</p>
</div>
<div class="bg-red-900/30 border border-red-700/50 p-3 rounded-lg mt-2">
<p class="text-red-400 text-xs font-bold">⚠️ Aturan penting:</p>
<p class="text-red-200 text-xs">Jika dikali/dibagi bilangan negatif, tanda pertidaksamaan DIBALIK!</p>
<p class="text-red-300 text-xs">-2x > 6 → x < -3</p>
</div>
</div>
</div>
<!-- SLIDE 16: TP4 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="16">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 4 - Aktivitas</div>
<h2 data-template-id="tp4-act-title" class="canva-text text-lg font-bold text-white">Latihan PtLSV</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Selesaikan: x + 7 ≤ 12</p>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>x ≤ 12 - 7 → x ≤</span>
<input type="number" id="ptlsv-ans" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
</div>
<button onclick="checkPtLSV()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="ptlsv-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 17: Kuis TP4 -->
<div class="slide flex-col p-5 gap-4" data-slide="17">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 4</div>
<h2 data-template-id="quiz4-title" class="canva-text text-lg font-bold text-white">Kuis PtLSV</h2>
<div id="quiz4-container">
<div class="space-y-3" id="quiz4-q1">
<p class="font-medium text-white text-sm">1. Penyelesaian dari 3x - 6 > 9 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x>5',true)">x > 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x>3',false)">x > 3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x<5',false)">x < 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x>1',false)">x > 1</button>
</div>
<div class="feedback-box" id="quiz4-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz4-q2">
<p class="font-medium text-white text-sm">2. Penyelesaian dari -2x ≥ 8 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≥4',false)">x ≥ 4</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≤-4',true)">x ≤ -4</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≥-4',false)">x ≥ -4</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≤4',false)">x ≤ 4</button>
</div>
<div class="feedback-box" id="quiz4-q2-feedback"></div>
</div>
</div>
<div id="quiz4-random" class="mt-4"></div>
<button id="quiz4-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz4')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 18: TP5 - Memecahkan Masalah -->
<div class="slide flex-col p-5 gap-4" data-slide="18">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5</div>
<h2 data-template-id="tp5-title" class="canva-text text-xl font-bold text-white">Memecahkan Masalah</h2>
<img data-template-id="tp5-image" class="canva-image w-full h-32 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="tp5-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-bold text-sm">Contoh Soal Cerita:</p>
<div class="bg-indigo-900/30 border border-indigo-700/50 p-3 rounded-lg text-sm text-gray-200">
<p>"Seorang penjual memiliki uang Rp50.000. Ia membeli x buah jeruk seharga Rp5.000/buah. Sisa uangnya tidak kurang dari Rp20.000. Berapa paling banyak jeruk yang bisa dibeli?" </p>
<p class="mt-2 text-xs text-indigo-300">Model: 50.000 - 5.000x ≥ 20.000</p>
<p class="text-xs text-indigo-300">-5.000x ≥ -30.000 → x ≤ 6</p>
<p class="text-xs text-indigo-400 font-bold">Jawab: Paling banyak 6 jeruk</p>
</div>
</div>
</div>
<!-- SLIDE 19: TP5 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="19">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5 - Aktivitas</div>
<h2 data-template-id="tp5-act-title" class="canva-text text-lg font-bold text-white">Studi Kasus</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Andi memiliki uang Rp80.000. Harga satu buku Rp12.000. Berapa buku paling banyak yang bisa dibeli Andi?</p>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>12.000x ≤ 80.000 → x ≤</span>
<input type="number" id="context-ans" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
<span>buku</span>
</div>
<button onclick="checkContext()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="context-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 20: Kuis TP5 -->
<div class="slide flex-col p-5 gap-4" data-slide="20">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 5</div>
<h2 data-template-id="quiz5-title" class="canva-text text-lg font-bold text-white">Kuis Pemecahan Masalah</h2>
<div id="quiz5-container">
<div class="space-y-3" id="quiz5-q1">
<p class="font-medium text-white text-sm">1. Harga 5 buku dan 1 tas = Rp85.000. Harga tas Rp35.000. Harga 1 buku?</p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','8000',false)">Rp8.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','10000',true)">Rp10.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','12000',false)">Rp12.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','15000',false)">Rp15.000</button>
</div>
<div class="feedback-box" id="quiz5-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz5-q2">
<p class="font-medium text-white text-sm">2. Umur Andi 3 tahun lagi menjadi lebih dari 15. Umur Andi sekarang paling sedikit... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','12',false)">12 tahun</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','13',true)">13 tahun</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','14',false)">14 tahun</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','15',false)">15 tahun</button>
</div>
<div class="feedback-box" id="quiz5-q2-feedback"></div>
</div>
</div>
<div id="quiz5-random" class="mt-4"></div>
<button id="quiz5-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz5')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 21: Rangkuman -->
<div class="slide flex-col p-5 gap-4" data-slide="21">
<h2 data-template-id="summary-title" class="canva-text text-xl font-bold text-white">Rangkuman</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3 text-sm">
<div class="bg-blue-900/30 border border-blue-700/50 p-3 rounded-lg">
<p class="font-bold text-blue-300">📌 Kalimat Terbuka vs Tertutup</p>
<p class="text-blue-100 text-xs">Terbuka = ada variabel, Tertutup = sudah pasti benar/salah</p>
</div>
<div class="bg-yellow-900/30 border border-yellow-700/50 p-3 rounded-lg">
<p class="font-bold text-yellow-300">📌 PLSV: ax + b = c</p>
<p class="text-yellow-100 text-xs">Penyelesaian tunggal, gunakan operasi invers</p>
</div>
<div class="bg-orange-900/30 border border-orange-700/50 p-3 rounded-lg">
<p class="font-bold text-orange-300">📌 PtLSV: ax + b < c (atau >, ≤, ≥)</p>
<p class="text-orange-100 text-xs">Penyelesaian berupa himpunan. Kali/bagi negatif → tanda balik!</p>
</div>
</div>
</div>
<!-- SLIDE 22: Asesmen Akhir -->
<div class="slide flex-col p-5 gap-4" data-slide="22">
<h2 data-template-id="final-title" class="canva-text text-xl font-bold text-white">Asesmen Akhir</h2>
<p data-template-id="final-desc" class="canva-text text-sm text-gray-400">Uji Pemahaman Total!</p>
<div class="space-y-3" id="final-q1">
<p class="font-medium text-white text-sm">1. Penyelesaian 7x - 14 = 21 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','5',true)">x = 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','3',false)">x = 3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','7',false)">x = 7</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','1',false)">x = 1</button>
</div>
<div class="feedback-box" id="final-q1-feedback"></div>
</div>
<div class="space-y-3" id="final-q2">
<p class="font-medium text-white text-sm">2. Penyelesaian 2x + 4 ≤ 16 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x≤6',true)">x ≤ 6</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x≤8',false)">x ≤ 8</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x≥6',false)">x ≥ 6</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x<6',false)">x < 6</button>
</div>
<div class="feedback-box" id="final-q2-feedback"></div>
</div>
<div class="space-y-3" id="final-q3">
<p class="font-medium text-white text-sm">3. Model dari "Tiga kali bilangan ditambah 5 sama dengan 20" adalah... </p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q3','a',true)">3x + 5 = 20</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q3','b',false)">3(x + 5) = 20</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q3','c',false)">x + 3 + 5 = 20</button>
</div>
<div class="feedback-box" id="final-q3-feedback"></div>
</div>
</div>
<!-- SLIDE 23: Asesmen Akhir Lanjutan -->
<div class="slide flex-col p-5 gap-4" data-slide="23">
<h2 data-template-id="final2-title" class="canva-text text-lg font-bold text-white">Lanjutan Asesmen</h2>
<div class="space-y-3" id="final-q4">
<p class="font-medium text-white text-sm">4. "2x + 1 = 9" termasuk kalimat... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q4','terbuka',true)">Terbuka</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q4','tertutup',false)">Tertutup</button>
</div>
<div class="feedback-box" id="final-q4-feedback"></div>
</div>
<div class="space-y-3" id="final-q5">
<p class="font-medium text-white text-sm">5. Ibu membeli x kg beras @ Rp15.000. Total tidak lebih dari Rp90.000. Paling banyak berapa kg?</p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','5',false)">5 kg</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','6',true)">6 kg</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','7',false)">7 kg</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','8',false)">8 kg</button>
</div>
<div class="feedback-box" id="final-q5-feedback"></div>
</div>
</div>
<!-- SLIDE 24: Refleksi -->
<div class="slide flex-col p-5 gap-4" data-slide="24">
<h2 data-template-id="reflect-title" class="canva-text text-xl font-bold text-white">Refleksi Belajar</h2>
<p data-template-id="reflect-desc" class="canva-text text-sm text-gray-400">Bagaimana pembelajaranmu hari ini?</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-emoji">Bagaimana perasaanmu setelah belajar?</label>
<div class="flex gap-3 text-3xl" id="emoji-picker">
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😊</button>
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🤔</button>
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😎</button>
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😅</button>
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🎉</button>
</div>
</div>
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-text">Apa yang paling menarik dari materi hari ini?</label>
<textarea id="reflect-text" rows="3" class="w-full bg-gray-700 border-2 border-purple-500 rounded-lg p-2 text-sm text-white resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea>
</div>
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-difficult">Bagian mana yang masih sulit?</label>
<textarea id="reflect-difficult" rows="2" class="w-full bg-gray-700 border-2 border-purple-500 rounded-lg p-2 text-sm text-white resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea>
</div>
<button onclick="submitReflection()" class="w-full bg-purple-600 text-white py-2 rounded-lg font-bold hover:bg-purple-700">Kirim Refleksi ✨</button>
<div id="reflect-success" class="hidden bg-green-900/50 text-green-400 p-3 rounded-lg text-center font-medium text-sm border border-green-700/50">
Terima kasih! Refleksimu sudah tercatat 🎉
</div>
</div>
</div>
</main>
<!-- Navigasi Footer -->
<footer class="px-4 py-3 flex items-center justify-between bg-gray-900/90 backdrop-blur border-t border-gray-800">
<button id="prev-btn" onclick="navigate(-1)" class="flex items-center gap-1 bg-gray-800 text-white px-4 py-2 rounded-lg font-medium text-sm hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed" disabled>
<i data-lucide="chevron-left" style="width:16px; height:16px"></i> Kembali
</button>
<button id="next-btn" onclick="navigate(1)" class="flex items-center gap-1 bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300">
Lanjut <i data-lucide="chevron-right" style="width:16px; height:16px"></i>
</button>
</footer>
<script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script>
<script>
let currentSlide = 1;
const totalSlides = 24;
function navigate(dir) {
const next = currentSlide + dir;
if (next < 1 || next > totalSlides) return;
document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.remove('active');
currentSlide = next;
document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.add('active');
document.getElementById('slide-counter').textContent = `${currentSlide} / ${totalSlides}`;
document.getElementById('progress-bar').style.width = `${(currentSlide/totalSlides)*100}%`;
document.getElementById('prev-btn').disabled = currentSlide === 1;
document.getElementById('next-btn').style.display = currentSlide === totalSlides ? 'none' : 'flex';
window.scrollTo(0, 0);
}
const quizAnswered = { quiz1: 0, quiz2: 0, quiz3: 0, quiz4: 0, quiz5: 0 };
const quizTotal = { quiz1: 2, quiz2: 2, quiz3: 2, quiz4: 2, quiz5: 2 };
function checkQuiz(btn, containerId, value, isCorrect) {
const container = document.getElementById(containerId);
const buttons = container.querySelectorAll('.quiz-option');
buttons.forEach(b => { b.disabled = true; });
if (isCorrect) {
btn.classList.add('correct');
showFeedback(containerId + '-feedback', '✅ Benar! Hebat!', true);
} else {
btn.classList.add('wrong');
buttons.forEach(b => {
if (b.getAttribute('onclick') && b.getAttribute('onclick').includes(',true)')) b.classList.add('show-correct');
});
showFeedback(containerId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false);
}
for (const qz of ['quiz1','quiz2','quiz3','quiz4','quiz5']) {
if (containerId.startsWith(qz)) {
quizAnswered[qz]++;
if (quizAnswered[qz] >= quizTotal[qz]) {
document.getElementById(qz + '-gen-btn').classList.remove('hidden');
}
break;
}
}
}
function showFeedback(id, msg, success) {
const el = document.getElementById(id);
if (!el) return;
el.textContent = msg;
el.className = `feedback-box show ${success ? 'bg-green-900/50 text-green-400 border border-green-700/50' : 'bg-red-900/50 text-red-400 border border-red-700/50'}`;
}
function checkType(btn, isTerbuka) {
const row = btn.closest('[data-type]');
const type = row.dataset.type;
const correct = (isTerbuka && type === 'terbuka') || (!isTerbuka && type === 'tertutup');
row.style.background = correct ? 'rgba(34, 197, 94, 0.15)' : 'rgba(239, 68, 68, 0.15)';
row.style.borderColor = correct ? 'rgba(34, 197, 94, 0.5)' : 'rgba(239, 68, 68, 0.5)';
row.querySelectorAll('button').forEach(b => b.disabled = true);
}
function checkPLSV() {
const s1 = document.getElementById('plsv-step1').value;
const s2 = document.getElementById('plsv-step2').value;
if (s1 == '18' && s2 == '6') {
showFeedback('plsv-feedback', '✅ Benar! 3x = 18, x = 6', true);
} else {
showFeedback('plsv-feedback', '❌ Coba lagi: 12+6=18, 18÷3=6', false);
}
}
function checkPtLSV() {
const ans = document.getElementById('ptlsv-ans').value;
if (ans == '5') {
showFeedback('ptlsv-feedback', '✅ Benar! x ≤ 5', true);
} else {
showFeedback('ptlsv-feedback', '❌ 12 - 7 = 5, jadi x ≤ 5', false);
}
}
function checkContext() {
const ans = document.getElementById('context-ans').value;
if (ans == '6') {
showFeedback('context-feedback', '✅ Benar! 80.000 ÷ 12.000 = 6,67 → paling banyak 6 buku', true);
} else {
showFeedback('context-feedback', '❌ 80.000 ÷ 12.000 ≈ 6,67 → paling banyak 6 buku', false);
}
}
function selectEmoji(btn) {
document.querySelectorAll('#emoji-picker button').forEach(b => b.style.transform = '');
btn.style.transform = 'scale(1.4)';
}
function submitReflection() {
document.getElementById('reflect-success').classList.remove('hidden');
}
// Generator pertanyaan acak
let randomCounter = 0;
function generateRandom(quizId) {
randomCounter++;
const container = document.getElementById(quizId + '-random');
container.innerHTML = '';
let q;
switch(quizId) {
case 'quiz1': q = genTP1(); break;
case 'quiz2': q = genTP2(); break;
case 'quiz3': q = genTP3(); break;
case 'quiz4': q = genTP4(); break;
case 'quiz5': q = genTP5(); break;
}
const qId = `${quizId}-rand-${randomCounter}`;
let html = `<div class="space-y-3" id="${qId}"><p class="font-medium text-white text-sm">${q.question}</p><div class="grid grid-cols-2 gap-2">`;
q.options.forEach(opt => {
html += `<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkRandom(this,'${qId}',${opt.correct})">${opt.text}</button>`;
});
html += `</div><div class="feedback-box" id="${qId}-feedback"></div></div>`;
container.innerHTML = html;
container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
function checkRandom(btn, qId, isCorrect) {
const container = document.getElementById(qId);
const buttons = container.querySelectorAll('.quiz-option');
buttons.forEach(b => b.disabled = true);
if (isCorrect) {
btn.classList.add('correct');
showFeedback(qId + '-feedback', '✅ Benar! Hebat!', true);
} else {
btn.classList.add('wrong');
buttons.forEach(b => {
if (b.getAttribute('onclick').includes('true)')) b.classList.add('show-correct');
});
showFeedback(qId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false);
}
}
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function shuffle(arr) { return arr.sort(() => Math.random() - 0.5); }
function genTP1() {
const vars = ['x','y','n','m','p'];
const v = vars[randInt(0,4)];
const a = randInt(2,9), b = randInt(1,9), c = randInt(10,30);
const openSentence = `${a}${v} + ${b} = ${c}`;
const c1 = randInt(1,20), c2 = randInt(1,20);
const closed1 = `${c1} + ${c2} = ${c1+c2}`;
const closed2 = `${c1} × 2 = ${c1*2}`;
const options = shuffle([
{ text: openSentence, correct: true },
{ text: closed1, correct: false },
{ text: closed2, correct: false },
{ text: `${randInt(1,10)} > ${randInt(11,20)}`, correct: false }
]);
return { question: 'Manakah yang merupakan kalimat terbuka?', options };
}
function genTP2() {
const scenarios = [
() => {
const a=randInt(2,8),c=a*randInt(2,10);
return { q:`"Harga ${a} buah kue = Rp${c.toLocaleString('id')}." Model?`, ans:`${a}x = ${c}`, wrong:[`x + ${a} = ${c}`,`${a} + x = ${c}`,`x - ${a} = ${c}`]};
},
() => {
const b=randInt(3,15)*1000,c=randInt(20,80)*1000;
return { q:`"Uang Sari ditambah Rp${b.toLocaleString('id')} kurang dari Rp${c.toLocaleString('id')}." Model?`, ans:`x + ${b.toLocaleString('id')} < ${c.toLocaleString('id')}`, wrong:[`x + ${b.toLocaleString('id')} = ${c.toLocaleString('id')}`,`x - ${b.toLocaleString('id')} < ${c.toLocaleString('id')}`,`x + ${b.toLocaleString('id')} > ${c.toLocaleString('id')}`]};
}
];
const s = scenarios[randInt(0,1)]();
const options = shuffle([
{ text: s.ans, correct: true },
...s.wrong.slice(0,3).map(w => ({ text: w, correct: false }))
]);
return { question: s.q, options };
}
function genTP3() {
const a = randInt(2,8), b = randInt(1,15), x = randInt(1,10);
const c = a * x + b;
const wrong1 = x + randInt(1,3);
const wrong2 = x - randInt(1,2) > 0 ? x - randInt(1,2) : x + 4;
const wrong3 = c - b;
const options = shuffle([
{ text: `x = ${x}`, correct: true },
{ text: `x = ${wrong1}`, correct: false },
{ text: `x = ${wrong2}`, correct: false },
{ text: `x = ${wrong3}`, correct: false }
]);
return { question: `Penyelesaian dari ${a}x + ${b} = ${c} adalah...`, options };
}
function genTP4() {
const a = randInt(2,6), b = randInt(1,10), x = randInt(2,10);
const c = a * x + b;
const signs = ['<','>','≤','≥'];
const sign = signs[randInt(0,3)];
const oppSign = sign === '<' ? '>' : sign === '>' ? '<' : sign === '≤' ? '≥' : '≤';
const options = shuffle([
{ text: `x ${sign} ${x}`, correct: true },
{ text: `x ${oppSign} ${x}`, correct: false },
{ text: `x ${sign} ${x+2}`, correct: false },
{ text: `x ${oppSign} ${x-1}`, correct: false }
]);
return { question: `Penyelesaian dari ${a}x + ${b} ${sign} ${c} adalah...`, options };
}
function genTP5() {
const price = randInt(2,15) * 1000;
const total = price * randInt(3,10);
const maxItems = Math.floor(total / price);
const options = shuffle([
{ text: `${maxItems}`, correct: true },
{ text: `${maxItems+1}`, correct: false },
{ text: `${maxItems-1}`, correct: false },
{ text: `${maxItems+2}`, correct: false }
]);
return { question: `Harga barang Rp${price.toLocaleString('id')}/buah. Uang = Rp${total.toLocaleString('id')}. Paling banyak beli berapa?`, options };
}
lucide.createIcons();
</script>
</body>
</html>
Kelas 8
Matematika
Teorema Pythagoras
<!doctype html>
<html lang="id">
<head>
<script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script>
<script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Pembelajaran Teorema Pythagoras</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<style>
* { font-family: 'DM Sans', sans-serif; }
body { background-color: #111827; color: #f9fafb; }
.slide { display: none; }
.slide.active { display: flex; }
.quiz-option { transition: all 0.3s; cursor: pointer; }
.quiz-option.correct { background: #22c55e !important; color: white !important; border-color: #16a34a !important; }
.quiz-option.wrong { background: #ef4444 !important; color: white !important; border-color: #dc2626 !important; }
.quiz-option.show-correct { border: 3px solid #22c55e !important; background: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important;}
.quiz-option:disabled { cursor: not-allowed; opacity: 0.8; }
.num-circle { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.feedback-box { padding: 12px 16px; border-radius: 8px; margin-top: 12px; font-weight: 500; display: none; }
.feedback-box.show { display: block; }
input[type="number"], textarea { color: white; background-color: #374151; }
</style>
<script src="/_sdk/e3937a0574eb2d69.data_sdk.js" type="text/javascript" integrity="sha512-xbp/ACqEQy1aDxYMtXTrR3y5MUbzxuggRR/9sD48Gl4VhLMMCiAHsxMaFV6DTdeBpR6ymF+t2zhPKYkWM3+Jfw=="></script>
<script src="/_sdk/9432170dbd2ae0df.resizing_sdk.js" type="text/javascript" integrity="sha512-FeT+58sb1f9ejWPWFjCbJvTT+SDwGV+ngrHUnlO7TWEOoqwOLj6p256kO3vOL7DIWl1cIgrobiof8v2bOigwPg=="></script>
</head>
<body data-template-id="__page-root" class="min-h-screen flex flex-col bg-gray-900 text-white">
<header data-template-id="header-bg" class="canva-header px-4 py-3 flex items-center justify-between shadow-lg bg-gray-800">
<div class="flex items-center gap-3">
<span class="text-2xl">📐</span>
<h1 data-template-id="app-title" class="canva-text text-lg font-bold text-white">Teorema Pythagoras</h1>
</div>
<div class="flex items-center gap-2">
<span id="slide-counter" class="text-gray-300 text-sm font-medium">1 / 24</span>
</div>
</header>
<div class="w-full h-1.5 bg-gray-700">
<div id="progress-bar" class="h-full bg-yellow-400 transition-all duration-300" style="width:4%"></div>
</div>
<main class="flex-1 overflow-y-auto" id="slides-container">
<!-- SLIDE 1: Cover (Sudah diperbaiki) -->
<div class="slide active flex-col items-center justify-center text-center p-6 gap-4" data-slide="1">
<div class="text-7xl mb-2">📐</div>
<h2 data-template-id="cover-title" class="canva-text text-3xl font-black text-white">Teorema Pythagoras</h2>
<p data-template-id="cover-subtitle" class="canva-text text-lg text-gray-300">Media Pembelajaran Interaktif</p>
<p data-template-id="cover-class" class="canva-text text-sm text-gray-400">Matematika SMP</p>
</div>
<!-- SLIDE 2: Tujuan Pembelajaran (Sudah dimasukkan teksnya) -->
<div class="slide flex-col p-5 gap-3" data-slide="2">
<h2 data-template-id="tp-title" class="canva-text text-xl font-bold mb-4 text-white">Tujuan Pembelajaran</h2>
<div class="space-y-3">
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">1</span>
<p data-template-id="tp-1" class="canva-text text-sm text-gray-200 mt-1">Menjelaskan pembuktian teorema Pythagoras.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">2</span>
<p data-template-id="tp-2" class="canva-text text-sm text-gray-200 mt-1">Mengidentifikasi tripel Pythagoras.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">3</span>
<p data-template-id="tp-3" class="canva-text text-sm text-gray-200 mt-1">Membedakan jenis sudut pada segitiga menggunakan teorema Pythagoras atau kebalikan teorema Pythagoras.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">4</span>
<p data-template-id="tp-4" class="canva-text text-sm text-gray-200 mt-1">Membandingkan sisi pada segitiga siku-siku istimewa.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">5</span>
<p data-template-id="tp-5" class="canva-text text-sm text-gray-200 mt-1">Menentukan jarak antara dua titik pada bidang koordinat Cartesius.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">6</span>
<p data-template-id="tp-6" class="canva-text text-sm text-gray-200 mt-1">Memecahkan masalah terkait teorema Pythagoras.</p>
</div>
</div>
</div>
<!-- SLIDE 3: Apersepsi -->
<div class="slide flex-col p-5 gap-4" data-slide="3">
<h2 data-template-id="aper-title" class="canva-text text-xl font-bold text-white">Apersepsi</h2>
<img data-template-id="aper-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="aper-question" class="canva-text text-base leading-relaxed text-gray-200"></p>
<div class="bg-gray-800 p-4 rounded-xl">
<p data-template-id="aper-hint" class="canva-text text-sm italic text-gray-300"></p>
</div>
</div>
<!-- SLIDE 4: Apersepsi 2 -->
<div class="slide flex-col p-5 gap-4" data-slide="4">
<h2 data-template-id="aper2-title" class="canva-text text-lg font-bold text-white"></h2>
<img data-template-id="aper2-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="aper2-question" class="canva-text text-base text-gray-200"></p>
</div>
<!-- SLIDE 5: Asesmen Awal -->
<div class="slide flex-col p-5 gap-4" data-slide="5">
<h2 data-template-id="pretest-title" class="canva-text text-xl font-bold text-white">Asesmen Awal</h2>
<p data-template-id="pretest-desc" class="canva-text text-sm text-gray-400">Mari kita uji pengetahuan awalmu!</p>
<div class="space-y-3" id="pretest-q1">
<p class="font-medium text-white">1. Berapa hasil dari 5² ?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','10',false)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','25',true)">25</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','15',false)">15</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','50',false)">50</button>
</div>
<div class="feedback-box" id="pretest-q1-feedback"></div>
</div>
<div class="space-y-3" id="pretest-q2">
<p class="font-medium text-white">2. Segitiga siku-siku memiliki sudut berapa derajat?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','45°',false)">45°</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','90°',true)">90°</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','180°',false)">180°</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','60°',false)">60°</button>
</div>
<div class="feedback-box" id="pretest-q2-feedback"></div>
</div>
<div class="space-y-3" id="pretest-q3">
<p class="font-medium text-white">3. √49 = ?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','6',false)">6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','7',true)">7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','8',false)">8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','9',false)">9</button>
</div>
<div class="feedback-box" id="pretest-q3-feedback"></div>
</div>
</div>
<!-- SLIDE 6: TP1 Intro -->
<div class="slide flex-col p-5 gap-4" data-slide="6">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1</div>
<h2 data-template-id="tp1-title" class="canva-text text-xl font-bold text-white">Pembuktian Teorema Pythagoras</h2>
<p data-template-id="tp1-intro" class="canva-text text-base leading-relaxed text-gray-300">Luas persegi pada sisi miring (hipotenusa) sama dengan jumlah luas persegi pada kedua sisi tegaknya.</p>
<div class="bg-gray-800 rounded-xl p-4 text-center">
<svg viewbox="0 0 300 200" class="w-full max-w-xs mx-auto">
<rect x="60" y="100" width="60" height="60" fill="#fbbf24" opacity="0.7" stroke="#e5e7eb" stroke-width="1.5" />
<rect x="120" y="20" width="80" height="80" fill="#60a5fa" opacity="0.7" stroke="#e5e7eb" stroke-width="1.5" />
<rect x="120" y="100" width="80" height="80" fill="#f87171" opacity="0.7" stroke="#e5e7eb" stroke-width="1.5" />
<polygon points="120,100 120,160 60,160" fill="#1e293b" stroke="#e5e7eb" stroke-width="2" />
<text x="85" y="145" fill="white" font-size="12" font-weight="bold">a</text>
<text x="155" y="145" fill="white" font-size="12" font-weight="bold">b</text>
<text x="115" y="135" fill="white" font-size="12" font-weight="bold">c</text>
<text x="75" y="90" fill="#e5e7eb" font-size="11" font-weight="bold">a²=9</text>
<text x="140" y="15" fill="#e5e7eb" font-size="11" font-weight="bold">c²=25</text>
<text x="140" y="190" fill="#e5e7eb" font-size="11" font-weight="bold">b²=16</text>
</svg>
<p class="text-gray-200 font-bold mt-2 text-lg">a² + b² = c²</p>
<p class="text-gray-400 text-sm">3² + 4² = 5² → 9 + 16 = 25 ✓</p>
</div>
</div>
<!-- SLIDE 7: TP1 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="7">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1 - Aktivitas</div>
<h2 data-template-id="tp1-act-title" class="canva-text text-lg font-bold text-white">Latihan Mandiri</h2>
<p data-template-id="tp1-act-desc" class="canva-text text-sm text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-medium text-sm">Segitiga dengan sisi: a = 3, b = 4. Hitung c!</p>
<div class="flex items-center gap-2">
<span class="text-gray-300 text-sm">a² + b² = 9 + 16 =</span>
<input type="number" id="proof-input" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
<span class="text-gray-300 text-sm">= c²</span>
</div>
<div class="flex items-center gap-2">
<span class="text-gray-300 text-sm">c = √</span>
<input type="number" id="proof-input2" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
<span class="text-gray-300 text-sm">=</span>
<input type="number" id="proof-input3" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
</div>
<button onclick="checkProof()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="proof-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 8: Kuis TP1 -->
<div class="slide flex-col p-5 gap-4" data-slide="8">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 1</div>
<h2 data-template-id="quiz1-title" class="canva-text text-lg font-bold text-white">Kuis Pembuktian</h2>
<div id="quiz1-container">
<div class="space-y-3" id="quiz1-q1">
<p class="font-medium text-white text-sm">1. Jika a=6, b=8, berapakah c?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','12',false)">12</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','10',true)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','14',false)">14</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','9',false)">9</button>
</div>
<div class="feedback-box" id="quiz1-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz1-q2">
<p class="font-medium text-white text-sm">2. Teorema Pythagoras berlaku pada segitiga...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left" onclick="checkQuiz(this,'quiz1-q2','sama sisi',false)">Sama sisi</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left" onclick="checkQuiz(this,'quiz1-q2','siku-siku',true)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left" onclick="checkQuiz(this,'quiz1-q2','sembarang',false)">Sembarang</button>
</div>
<div class="feedback-box" id="quiz1-q2-feedback"></div>
</div>
</div>
<div id="quiz1-random" class="mt-4"></div>
<button id="quiz1-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz1')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 9: TP2 Intro -->
<div class="slide flex-col p-5 gap-4" data-slide="9">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2</div>
<h2 data-template-id="tp2-title" class="canva-text text-xl font-bold text-white">Tripel Pythagoras</h2>
<p data-template-id="tp2-desc" class="canva-text text-sm leading-relaxed text-gray-300">Tiga bilangan bulat positif yang memenuhi persamaan a² + b² = c² disebut tripel Pythagoras.</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-2">
<p class="text-gray-200 font-bold text-sm">Contoh Tripel Pythagoras:</p>
<div class="grid grid-cols-3 gap-2 text-center">
<div class="bg-purple-900/30 border border-purple-500/30 rounded-lg p-2">
<p class="font-bold text-purple-300">3, 4, 5</p>
</div>
<div class="bg-blue-900/30 border border-blue-500/30 rounded-lg p-2">
<p class="font-bold text-blue-300">5, 12, 13</p>
</div>
<div class="bg-green-900/30 border border-green-500/30 rounded-lg p-2">
<p class="font-bold text-green-300">8, 15, 17</p>
</div>
</div>
<p class="text-gray-400 text-xs mt-2">Kelipatan juga tripel: 6,8,10 (2× dari 3,4,5)</p>
</div>
</div>
<!-- SLIDE 10: TP2 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="10">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2 - Aktivitas</div>
<h2 data-template-id="tp2-act-title" class="canva-text text-lg font-bold text-white">Cek Tripel</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Apakah bilangan berikut tripel Pythagoras? Ketuk ✓ atau ✗</p>
<div id="tripel-activity" class="space-y-2">
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-tripel="true">
<span class="font-bold text-gray-100">7, 24, 25</span>
<div class="flex gap-2">
<button onclick="checkTripel(this,true)" class="bg-green-900/50 text-green-400 px-3 py-1 rounded-lg font-bold hover:bg-green-800 border border-green-700/50">✓</button>
<button onclick="checkTripel(this,false)" class="bg-red-900/50 text-red-400 px-3 py-1 rounded-lg font-bold hover:bg-red-800 border border-red-700/50">✗</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-tripel="false">
<span class="font-bold text-gray-100">4, 5, 6</span>
<div class="flex gap-2">
<button onclick="checkTripel(this,true)" class="bg-green-900/50 text-green-400 px-3 py-1 rounded-lg font-bold hover:bg-green-800 border border-green-700/50">✓</button>
<button onclick="checkTripel(this,false)" class="bg-red-900/50 text-red-400 px-3 py-1 rounded-lg font-bold hover:bg-red-800 border border-red-700/50">✗</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-tripel="true">
<span class="font-bold text-gray-100">9, 40, 41</span>
<div class="flex gap-2">
<button onclick="checkTripel(this,true)" class="bg-green-900/50 text-green-400 px-3 py-1 rounded-lg font-bold hover:bg-green-800 border border-green-700/50">✓</button>
<button onclick="checkTripel(this,false)" class="bg-red-900/50 text-red-400 px-3 py-1 rounded-lg font-bold hover:bg-red-800 border border-red-700/50">✗</button>
</div>
</div>
</div>
</div>
</div>
<!-- SLIDE 11: Kuis TP2 -->
<div class="slide flex-col p-5 gap-4" data-slide="11">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 2</div>
<h2 data-template-id="quiz2-title" class="canva-text text-lg font-bold text-white">Kuis Tripel Pythagoras</h2>
<div id="quiz2-container">
<div class="space-y-3" id="quiz2-q1">
<p class="font-medium text-white text-sm">1. Manakah yang merupakan tripel Pythagoras?</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q1','5,11,13',false)">5, 11, 13</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q1','5,12,13',true)">5, 12, 13</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q1','6,7,8',false)">6, 7, 8</button>
</div>
<div class="feedback-box" id="quiz2-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz2-q2">
<p class="font-medium text-white text-sm">2. Tripel 3,4,5 jika dikalikan 3 menjadi...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q2','9,12,15',true)">9, 12, 15</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q2','6,8,10',false)">6, 8, 10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q2','12,16,20',false)">12, 16, 20</button>
</div>
<div class="feedback-box" id="quiz2-q2-feedback"></div>
</div>
</div>
<div id="quiz2-random" class="mt-4"></div><button id="quiz2-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz2')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 12: TP3 Intro -->
<div class="slide flex-col p-5 gap-4" data-slide="12">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3</div>
<h2 data-template-id="tp3-title" class="canva-text text-xl font-bold text-white">Jenis Segitiga</h2>
<p data-template-id="tp3-desc" class="canva-text text-sm leading-relaxed text-gray-300">Kita bisa menentukan jenis segitiga (siku-siku, lancip, tumpul) dengan memeriksa kuadrat sisi terpanjang (c) terhadap jumlah kuadrat sisi lainnya.</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-2 text-sm border border-gray-700">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-blue-500 rounded-full"></span>
<p class="text-gray-200"><strong>c² = a² + b²</strong> → Siku-siku (90°)</p>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-red-500 rounded-full"></span>
<p class="text-gray-200"><strong>c² > a² + b²</strong> → Tumpul (>90°)</p>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-green-500 rounded-full"></span>
<p class="text-gray-200"><strong>c² < a² + b²</strong> → Lancip (<90°)</p>
</div>
</div>
</div>
<!-- SLIDE 13: TP3 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="13">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3 - Aktivitas</div>
<h2 data-template-id="tp3-act-title" class="canva-text text-lg font-bold text-white">Tebak Segitiga</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Tentukan jenis segitiga (sisi terpanjang = c):</p>
<div class="space-y-2">
<div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="tp3-q1">
<p class="font-bold text-gray-100 text-sm mb-2">Sisi: 5, 7, 9</p>
<div class="flex gap-2">
<button onclick="checkAngle(this,'tp3-q1','lancip')" class="bg-green-900/50 text-green-400 border border-green-700/50 hover:bg-green-800 px-3 py-1 rounded text-xs font-bold">Lancip</button>
<button onclick="checkAngle(this,'tp3-q1','siku')" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 hover:bg-blue-800 px-3 py-1 rounded text-xs font-bold">Siku-siku</button>
<button onclick="checkAngle(this,'tp3-q1','tumpul')" class="bg-red-900/50 text-red-400 border border-red-700/50 hover:bg-red-800 px-3 py-1 rounded text-xs font-bold">Tumpul</button>
</div>
<div class="feedback-box text-xs mt-1" id="tp3-q1-feedback"></div>
</div>
<div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="tp3-q2">
<p class="font-bold text-gray-100 text-sm mb-2">Sisi: 6, 8, 11</p>
<div class="flex gap-2">
<button onclick="checkAngle(this,'tp3-q2','lancip')" class="bg-green-900/50 text-green-400 border border-green-700/50 hover:bg-green-800 px-3 py-1 rounded text-xs font-bold">Lancip</button>
<button onclick="checkAngle(this,'tp3-q2','siku')" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 hover:bg-blue-800 px-3 py-1 rounded text-xs font-bold">Siku-siku</button>
<button onclick="checkAngle(this,'tp3-q2','tumpul')" class="bg-red-900/50 text-red-400 border border-red-700/50 hover:bg-red-800 px-3 py-1 rounded text-xs font-bold">Tumpul</button>
</div>
<div class="feedback-box text-xs mt-1" id="tp3-q2-feedback"></div>
</div>
</div>
</div>
</div>
<!-- SLIDE 14: Kuis TP3 -->
<div class="slide flex-col p-5 gap-4" data-slide="14">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 3</div>
<h2 data-template-id="quiz3-title" class="canva-text text-lg font-bold text-white">Kuis Jenis Segitiga</h2>
<div id="quiz3-container">
<div class="space-y-3" id="quiz3-q1">
<p class="font-medium text-white text-sm">1. Segitiga dengan sisi 3, 4, 6 termasuk segitiga...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q1','lancip',false)">Lancip</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q1','siku-siku',false)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q1','tumpul',true)">Tumpul</button>
</div>
<div class="feedback-box" id="quiz3-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz3-q2">
<p class="font-medium text-white text-sm">2. Segitiga dengan sisi 5, 12, 13 adalah...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q2','lancip',false)">Lancip</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q2','siku-siku',true)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q2','tumpul',false)">Tumpul</button>
</div>
<div class="feedback-box" id="quiz3-q2-feedback"></div>
</div>
</div>
<div id="quiz3-random" class="mt-4"></div><button id="quiz3-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz3')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 15: TP4 -->
<div class="slide flex-col p-5 gap-4" data-slide="15">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 4</div>
<h2 data-template-id="tp4-title" class="canva-text text-xl font-bold text-white">Segitiga Istimewa</h2>
<p data-template-id="tp4-desc" class="canva-text text-sm text-gray-300">Segitiga siku-siku dengan sudut tertentu memiliki rasio sisi yang selalu tetap.</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<div class="grid grid-cols-2 gap-3">
<div class="bg-indigo-900/30 border border-indigo-700/30 p-3 rounded-lg text-center">
<p class="font-bold text-indigo-300 text-sm">45°-45°-90°</p>
<p class="text-indigo-400 text-xs mt-1">Perbandingan sisi:</p>
<p class="font-bold text-indigo-200">1 : 1 : √2</p>
</div>
<div class="bg-orange-900/30 border border-orange-700/30 p-3 rounded-lg text-center">
<p class="font-bold text-orange-300 text-sm">30°-60°-90°</p>
<p class="text-orange-400 text-xs mt-1">Perbandingan sisi:</p>
<p class="font-bold text-orange-200">1 : √3 : 2</p>
</div>
</div>
</div>
</div>
<!-- SLIDE 16: Kuis TP4 -->
<div class="slide flex-col p-5 gap-4" data-slide="16">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 4</div>
<h2 data-template-id="quiz4-title" class="canva-text text-lg font-bold text-white">Kuis Sudut Istimewa</h2>
<div id="quiz4-container">
<div class="space-y-3" id="quiz4-q1">
<p class="font-medium text-white text-sm">1. Segitiga 45°-45°-90° dengan kaki = 5. Hipotenusa?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','5',false)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','5√2',true)">5√2</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','10',false)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','5√3',false)">5√3</button>
</div>
<div class="feedback-box" id="quiz4-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz4-q2">
<p class="font-medium text-white text-sm">2. Segitiga 30°-60°-90° dengan sisi terpendek = 3. Hipotenusa?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','3',false)">3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','6',true)">6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','3√3',false)">3√3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','9',false)">9</button>
</div>
<div class="feedback-box" id="quiz4-q2-feedback"></div>
</div>
</div>
<div id="quiz4-random" class="mt-4"></div><button id="quiz4-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz4')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 17: TP5 -->
<div class="slide flex-col p-5 gap-4" data-slide="17">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5</div>
<h2 data-template-id="tp5-title" class="canva-text text-xl font-bold text-white">Jarak Dua Titik Koordinat</h2>
<p data-template-id="tp5-desc" class="canva-text text-sm leading-relaxed text-gray-300">Teorema Pythagoras juga bisa diaplikasikan untuk menghitung jarak antara dua titik pada bidang kartesius.</p>
<div class="bg-gray-800 rounded-xl p-4 border border-gray-700">
<svg viewbox="0 0 280 200" class="w-full max-w-xs mx-auto">
<defs>
<pattern id="grid" width="28" height="28" patternunits="userSpaceOnUse">
<path d="M 28 0 L 0 0 0 28" fill="none" stroke="#374151" stroke-width="0.5" />
</pattern>
</defs>
<rect width="280" height="200" fill="url(#grid)" />
<line x1="0" y1="168" x2="280" y2="168" stroke="#9ca3af" stroke-width="1.5" />
<line x1="28" y1="0" x2="28" y2="200" stroke="#9ca3af" stroke-width="1.5" />
<circle cx="56" cy="140" r="5" fill="#ef4444" />
<text x="60" y="135" font-size="10" fill="#f87171" font-weight="bold">A(1,1)</text>
<circle cx="168" cy="56" r="5" fill="#3b82f6" />
<text x="172" y="51" font-size="10" fill="#60a5fa" font-weight="bold">B(5,4)</text>
<line x1="56" y1="140" x2="168" y2="56" stroke="#a78bfa" stroke-width="2" stroke-dasharray="4" />
<line x1="56" y1="140" x2="168" y2="140" stroke="#fcd34d" stroke-width="1.5" />
<line x1="168" y1="140" x2="168" y2="56" stroke="#fcd34d" stroke-width="1.5" />
<text x="100" y="155" font-size="9" fill="#d1d5db">Δx = 4</text>
<text x="175" y="100" font-size="9" fill="#d1d5db">Δy = 3</text>
</svg>
<p class="text-center text-gray-200 font-bold text-sm mt-2">d = √((x₂-x₁)² + (y₂-y₁)²)</p>
<p class="text-center text-gray-400 text-xs">d = √(4² + 3²) = √25 = 5</p>
</div>
</div>
<!-- SLIDE 18: TP5 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="18">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5 - Aktivitas</div>
<h2 data-template-id="tp5-act-title" class="canva-text text-lg font-bold text-white">Latihan Jarak Titik</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Hitung jarak titik P(2, 1) ke Q(5, 5)!</p>
<div class="space-y-2">
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>Δx = 5 - 2 =</span>
<input type="number" id="dist-dx" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-12 text-center font-bold" placeholder="?">
</div>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>Δy = 5 - 1 =</span>
<input type="number" id="dist-dy" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-12 text-center font-bold" placeholder="?">
</div>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>d = √(3² + 4²) = √25 =</span>
<input type="number" id="dist-ans" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-12 text-center font-bold" placeholder="?">
</div>
</div>
<button onclick="checkDistance()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="dist-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 19: Kuis TP5 -->
<div class="slide flex-col p-5 gap-4" data-slide="19">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 5</div>
<h2 data-template-id="quiz5-title" class="canva-text text-lg font-bold text-white">Kuis Kartesius</h2>
<div id="quiz5-container">
<div class="space-y-3" id="quiz5-q1">
<p class="font-medium text-white text-sm">1. Jarak titik (0,0) ke (6,8) adalah...</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','14',false)">14</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','10',true)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','8',false)">8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','12',false)">12</button>
</div>
<div class="feedback-box" id="quiz5-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz5-q2">
<p class="font-medium text-white text-sm">2. Jarak titik (1,2) ke (4,6) adalah...</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','7',false)">7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','5',true)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','4',false)">4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','6',false)">6</button>
</div>
<div class="feedback-box" id="quiz5-q2-feedback"></div>
</div>
</div>
<div id="quiz5-random" class="mt-4"></div><button id="quiz5-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz5')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 20: TP6 -->
<div class="slide flex-col p-5 gap-4" data-slide="20">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 6</div>
<h2 data-template-id="tp6-title" class="canva-text text-xl font-bold text-white">Memecahkan Masalah</h2>
<img data-template-id="tp6-image" class="canva-image w-full h-32 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="tp6-desc" class="canva-text text-sm leading-relaxed text-gray-300">Banyak masalah dalam kehidupan sehari-hari yang dapat diselesaikan dengan teorema Pythagoras.</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-2">
<p class="text-gray-200 text-sm font-medium">🏗️ Contoh: Tangga 10m disandarkan ke tembok. Jarak kaki tangga ke tembok 6m. Berapa tinggi tembok yang dicapai?</p>
<p class="text-gray-400 text-xs">c²= a² + b² → 10² = 6² + b² → b² = 100-36 = 64 → b = 8m</p>
</div>
</div>
<!-- SLIDE 21: TP6 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="21">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 6 - Aktivitas</div>
<h2 data-template-id="tp6-act-title" class="canva-text text-lg font-bold text-white">Studi Kasus</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">🪁 Benang layang-layang panjangnya 13m. Jarak horizontal 5m. Berapa tinggi layang-layang?</p>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>Tinggi =</span>
<input type="number" id="context-ans" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-16 text-center font-bold" placeholder="?">
<span>meter</span>
</div>
<button onclick="checkContext()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="context-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 22: Kuis TP6 -->
<div class="slide flex-col p-5 gap-4" data-slide="22">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 6</div>
<h2 data-template-id="quiz6-title" class="canva-text text-lg font-bold text-white">Kuis Pemecahan Masalah</h2>
<div id="quiz6-container">
<div class="space-y-3" id="quiz6-q1">
<p class="font-medium text-white text-sm">1. Tiang 12m, kawat dari puncak ke tanah sejauh 9m. Panjang kawat?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','21',false)">21 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','15',true)">15 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','13',false)">13 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','18',false)">18 m</button>
</div>
<div class="feedback-box" id="quiz6-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz6-q2">
<p class="font-medium text-white text-sm">2. Tangga 5m, jarak kaki ke dinding 3m. Tinggi?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','4',true)">4 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','3',false)">3 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','2',false)">2 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','5',false)">5 m</button>
</div>
<div class="feedback-box" id="quiz6-q2-feedback"></div>
</div>
</div>
<div id="quiz6-random" class="mt-4"></div><button id="quiz6-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz6')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 23: Asesmen Akhir -->
<div class="slide flex-col p-5 gap-4" data-slide="23">
<h2 data-template-id="final-title" class="canva-text text-xl font-bold text-white">Asesmen Akhir</h2>
<p data-template-id="final-desc" class="canva-text text-sm text-gray-400">Kerjakan soal ini untuk mengukur pemahamanmu secara menyeluruh.</p>
<div class="space-y-3" id="final-q1">
<p class="font-medium text-white text-sm">1. Segitiga sisi 8, 15, 17 termasuk...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q1','siku-siku',true)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q1','tumpul',false)">Tumpul</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q1','lancip',false)">Lancip</button>
</div>
<div class="feedback-box" id="final-q1-feedback"></div>
</div>
<div class="space-y-3" id="final-q2">
<p class="font-medium text-white text-sm">2. Jarak (1,2) ke (4,6) = ?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','5',true)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','7',false)">7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','4',false)">4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','6',false)">6</button>
</div>
<div class="feedback-box" id="final-q2-feedback"></div>
</div>
<div class="space-y-3" id="final-q3">
<p class="font-medium text-white text-sm">3. Segitiga 30°-60°-90° sisi terpendek 4. Hipotenusa?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','8',true)">8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','4√3',false)">4√3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','6',false)">6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','4√2',false)">4√2</button>
</div>
<div class="feedback-box" id="final-q3-feedback"></div>
</div>
</div>
<!-- SLIDE 24: Refleksi -->
<div class="slide flex-col p-5 gap-4" data-slide="24">
<h2 data-template-id="reflect-title" class="canva-text text-xl font-bold text-white">Refleksi Belajar</h2>
<p data-template-id="reflect-desc" class="canva-text text-sm text-gray-400">Bagaimana pembelajaranmu hari ini?</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-emoji">Bagaimana perasaanmu setelah belajar?</label>
<div class="flex gap-3 text-3xl" id="emoji-picker"><button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😊</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🤔</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😎</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😅</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🎉</button>
</div>
</div>
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-text">Apa yang paling menarik dari materi hari ini?</label>
<textarea id="reflect-text" rows="3" class="w-full bg-gray-700 text-white border-2 border-purple-500 rounded-lg p-2 text-sm resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea>
</div>
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-difficult">Bagian mana yang masih sulit?</label>
<textarea id="reflect-difficult" rows="2" class="w-full bg-gray-700 text-white border-2 border-purple-500 rounded-lg p-2 text-sm resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea>
</div>
<button onclick="submitReflection()" class="w-full bg-purple-600 text-white py-2 rounded-lg font-bold hover:bg-purple-700">Kirim Refleksi ✨</button>
<div id="reflect-success" class="hidden bg-green-900/50 text-green-400 p-3 rounded-lg text-center font-medium text-sm border border-green-700/50">
Terima kasih! Refleksimu sudah tercatat 🎉
</div>
</div>
</div>
</main>
<!-- Navigation Footer -->
<footer class="px-4 py-3 flex items-center justify-between bg-gray-900/90 backdrop-blur border-t border-gray-800">
<button id="prev-btn" onclick="navigate(-1)" class="flex items-center gap-1 bg-gray-800 text-white px-4 py-2 rounded-lg font-medium text-sm hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed" disabled><i data-lucide="chevron-left" style="width:16px;height:16px"></i> Kembali</button>
<button id="next-btn" onclick="navigate(1)" class="flex items-center gap-1 bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300">Lanjut <i data-lucide="chevron-right" style="width:16px;height:16px"></i></button>
</footer>
<script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script>
<script>
let currentSlide = 1;
const totalSlides = 24;
function navigate(dir) {
const next = currentSlide + dir;
if (next < 1 || next > totalSlides) return;
document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.remove('active');
currentSlide = next;
document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.add('active');
document.getElementById('slide-counter').textContent = `${currentSlide} / ${totalSlides}`;
document.getElementById('progress-bar').style.width = `${(currentSlide/totalSlides)*100}%`;
document.getElementById('prev-btn').disabled = currentSlide === 1;
document.getElementById('next-btn').style.display = currentSlide === totalSlides ? 'none' : 'flex';
window.scrollTo(0, 0);
}
const quizAnswered = { quiz1: 0, quiz2: 0, quiz3: 0, quiz4: 0, quiz5: 0, quiz6: 0 };
const quizTotal = { quiz1: 2, quiz2: 2, quiz3: 2, quiz4: 2, quiz5: 2, quiz6: 2 };
function checkQuiz(btn, containerId, value, isCorrect) {
const container = document.getElementById(containerId);
const buttons = container.querySelectorAll('.quiz-option');
buttons.forEach(b => { b.disabled = true; });
if (isCorrect) {
btn.classList.add('correct');
showFeedback(containerId + '-feedback', '✅ Benar! Hebat!', true);
} else {
btn.classList.add('wrong');
buttons.forEach(b => {
if (b.getAttribute('onclick') && b.getAttribute('onclick').includes(',true)')) b.classList.add('show-correct');
});
showFeedback(containerId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false);
}
for (const qz of ['quiz1','quiz2','quiz3','quiz4','quiz5','quiz6']) {
if (containerId.startsWith(qz)) {
quizAnswered[qz]++;
if (quizAnswered[qz] >= quizTotal[qz]) {
document.getElementById(qz + '-gen-btn').classList.remove('hidden');
}
break;
}
}
}
function showFeedback(id, msg, success) {
const el = document.getElementById(id);
if (!el) return;
el.textContent = msg;
el.className = `feedback-box show ${success ? 'bg-green-900/50 text-green-400 border border-green-700/50' : 'bg-red-900/50 text-red-400 border border-red-700/50'}`;
}
function checkProof() {
const v1 = document.getElementById('proof-input').value;
const v2 = document.getElementById('proof-input2').value;
const v3 = document.getElementById('proof-input3').value;
if (v1 == '25' && v2 == '25' && v3 == '5') {
showFeedback('proof-feedback', '✅ Benar! 3² + 4² = 25, dan √25 = 5', true);
} else {
showFeedback('proof-feedback', '❌ Coba lagi. Ingat: 9 + 16 = 25, √25 = 5', false);
}
}
function checkTripel(btn, expectedTrue) {
const row = btn.closest('[data-tripel]');
const isTriple = row.dataset.tripel === 'true';
const correct = (expectedTrue && isTriple) || (!expectedTrue && !isTriple);
row.style.background = correct ? 'rgba(34, 197, 94, 0.15)' : 'rgba(239, 68, 68, 0.15)';
row.style.borderColor = correct ? 'rgba(34, 197, 94, 0.5)' : 'rgba(239, 68, 68, 0.5)';
row.querySelectorAll('button').forEach(b => b.disabled = true);
}
function checkAngle(btn, containerId, answer) {
const answers = { 'tp3-q1': 'lancip', 'tp3-q2': 'tumpul' };
const correct = answers[containerId] === answer;
const container = document.getElementById(containerId);
container.querySelectorAll('button').forEach(b => b.disabled = true);
if (correct) {
btn.style.background = '#22c55e'; btn.style.color = 'white';
showFeedback(containerId + '-feedback', '✅ Benar!', true);
} else {
btn.style.background = '#ef4444'; btn.style.color = 'white';
showFeedback(containerId + '-feedback', `❌ Jawaban: ${answers[containerId]}`, false);
}
}
function checkDistance() {
const dx = document.getElementById('dist-dx').value;
const dy = document.getElementById('dist-dy').value;
const ans = document.getElementById('dist-ans').value;
if (dx == '3' && dy == '4' && ans == '5') {
showFeedback('dist-feedback', '✅ Benar! Jarak = 5 satuan', true);
} else {
showFeedback('dist-feedback', '❌ Coba lagi: Δx=3, Δy=4, d=√25=5', false);
}
}
function checkContext() {
const ans = document.getElementById('context-ans').value;
if (ans == '12') {
showFeedback('context-feedback', '✅ Benar! √(13²-5²) = √144 = 12m', true);
} else {
showFeedback('context-feedback', '❌ Gunakan: √(13²-5²) = √144 = 12', false);
}
}
function selectEmoji(btn) {
document.querySelectorAll('#emoji-picker button').forEach(b => b.style.transform = '');
btn.style.transform = 'scale(1.4)';
}
function submitReflection() {
document.getElementById('reflect-success').classList.remove('hidden');
}
let randomCounter = 0;
function generateRandom(quizId) {
randomCounter++;
const container = document.getElementById(quizId + '-random');
container.innerHTML = '';
let q;
switch(quizId) {
case 'quiz1': q = genTP1(); break;
case 'quiz2': q = genTP2(); break;
case 'quiz3': q = genTP3(); break;
case 'quiz4': q = genTP4(); break;
case 'quiz5': q = genTP5(); break;
case 'quiz6': q = genTP6(); break;
}
const qId = `${quizId}-rand-${randomCounter}`;
let html = `<div class="space-y-3" id="${qId}"><p class="font-medium text-white text-sm">${q.question}</p><div class="grid grid-cols-2 gap-2">`;
q.options.forEach(opt => {
html += `<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkRandom(this,'${qId}',${opt.correct})">${opt.text}</button>`;
});
html += `</div><div class="feedback-box" id="${qId}-feedback"></div></div>`;
container.innerHTML = html;
container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
function checkRandom(btn, qId, isCorrect) {
const container = document.getElementById(qId);
const buttons = container.querySelectorAll('.quiz-option');
buttons.forEach(b => b.disabled = true);
if (isCorrect) {
btn.classList.add('correct');
showFeedback(qId + '-feedback', '✅ Benar! Hebat!', true);
} else {
btn.classList.add('wrong');
buttons.forEach(b => {
if (b.getAttribute('onclick').includes('true)')) b.classList.add('show-correct');
});
showFeedback(qId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false);
}
}
const triplets = [[3,4,5],[5,12,13],[8,15,17],[7,24,25],[9,40,41],[11,60,61],[20,21,29],[12,35,37],[6,8,10],[9,12,15],[15,20,25],[10,24,26]];
function shuffle(arr) { return arr.sort(() => Math.random() - 0.5); }
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function genTP1() {
const t = triplets[randInt(0, triplets.length-1)];
const a = t[0], b = t[1], c = t[2];
const wrong1 = c + randInt(1,3);
const wrong2 = c - randInt(1,2) || c + 4;
const wrong3 = a + b;
const options = shuffle([
{ text: String(c), correct: true },
{ text: String(wrong1), correct: false },
{ text: String(wrong2), correct: false },
{ text: String(wrong3), correct: false }
]);
return { question: `<span class="text-white">Jika a=${a}, b=${b}, berapakah c (hipotenusa)?</span>`, options };
}
function genTP2() {
const isTriple = Math.random() > 0.4;
let a, b, c, text;
if (isTriple) {
const t = triplets[randInt(0, triplets.length-1)];
const k = randInt(1,3);
a = t[0]*k; b = t[1]*k; c = t[2]*k;
} else {
a = randInt(3,10); b = randInt(a+1, a+8); c = b + randInt(1,3);
while (a*a + b*b === c*c) { c++; }
}
text = `${a}, ${b}, ${c}`;
const options = shuffle([
{ text: 'Ya, tripel Pythagoras', correct: isTriple },
{ text: 'Bukan tripel Pythagoras', correct: !isTriple }
]);
return { question: `<span class="text-white">Apakah (${text}) tripel Pythagoras?<br><small class="opacity-70">Cek: ${a}² + ${b}² = ${a*a} + ${b*b} = ${a*a+b*b}, dan ${c}² = ${c*c}</small></span>`, options };
}
function genTP3() {
const type = randInt(0,2);
let a, b, c;
if (type === 1) {
const t = triplets[randInt(0,5)];
a = t[0]; b = t[1]; c = t[2];
} else if (type === 0) {
a = randInt(4,8); b = randInt(a, a+4); c = b + randInt(0,1);
while (c*c >= a*a + b*b) { c--; }
if (c <= b) c = b;
if (c*c >= a*a+b*b) { a++; }
} else {
a = randInt(3,6); b = randInt(a, a+3); c = b + randInt(2,5);
while (c*c <= a*a + b*b) { c++; }
}
const correctAns = (c*c === a*a+b*b) ? 'Siku-siku' : (c*c > a*a+b*b) ? 'Tumpul' : 'Lancip';
const options = shuffle([
{ text: 'Lancip', correct: correctAns === 'Lancip' },
{ text: 'Siku-siku', correct: correctAns === 'Siku-siku' },
{ text: 'Tumpul', correct: correctAns === 'Tumpul' }
]);
return { question: `<span class="text-white">Segitiga sisi ${a}, ${b}, ${c} termasuk...<br><small class="opacity-70">${a}²+${b}²=${a*a+b*b}, ${c}²=${c*c}</small></span>`, options };
}
function genTP4() {
const type45 = Math.random() > 0.5;
if (type45) {
const k = randInt(2,9);
const ans = `${k}√2`;
const options = shuffle([
{ text: ans, correct: true },
{ text: `${k*2}`, correct: false },
{ text: `${k}√3`, correct: false },
{ text: `${k}`, correct: false }
]);
return { question: `<span class="text-white">Segitiga 45°-45°-90° dengan kaki = ${k}. Hipotenusa = ?</span>`, options };
} else {
const k = randInt(2,8);
const ans = `${k*2}`;
const options = shuffle([
{ text: ans, correct: true },
{ text: `${k}√3`, correct: false },
{ text: `${k}√2`, correct: false },
{ text: `${k*3}`, correct: false }
]);
return { question: `<span class="text-white">Segitiga 30°-60°-90° dengan sisi terpendek = ${k}. Hipotenusa = ?</span>`, options };
}
}
function genTP5() {
const x1 = randInt(0,5), y1 = randInt(0,5);
let dx, dy;
const pairs = [[3,4],[6,8],[5,12],[8,6],[4,3],[9,12]];
const p = pairs[randInt(0, pairs.length-1)];
dx = p[0]; dy = p[1];
const x2 = x1 + dx, y2 = y1 + dy;
const d = Math.round(Math.sqrt(dx*dx + dy*dy));
const options = shuffle([
{ text: String(d), correct: true },
{ text: String(d+2), correct: false },
{ text: String(d-1 > 0 ? d-1 : d+3), correct: false },
{ text: String(dx+dy), correct: false }
]);
return { question: `<span class="text-white">Jarak titik (${x1},${y1}) ke (${x2},${y2}) = ?</span>`, options };
}
function genTP6() {
const scenarios = [
(t) => ({ q: `<span class="text-white">Tangga ${t[2]}m disandarkan ke dinding. Jarak kaki ke dinding ${t[0]}m. Tinggi dinding?</span>`, ans: t[1] }),
(t) => ({ q: `<span class="text-white">Tiang ${t[1]}m, kawat dari puncak ke tanah sejauh ${t[0]}m. Panjang kawat?</span>`, ans: t[2] }),
(t) => ({ q: `<span class="text-white">Benang layang-layang ${t[2]}m, jarak horizontal ${t[0]}m. Tinggi?</span>`, ans: t[1] }),
];
const t = triplets[randInt(0, triplets.length-1)];
const s = scenarios[randInt(0, scenarios.length-1)](t);
const options = shuffle([
{ text: `${s.ans} m`, correct: true },
{ text: `${s.ans + randInt(1,3)} m`, correct: false },
{ text: `${s.ans - randInt(1,2) > 0 ? s.ans - randInt(1,2) : s.ans + 4} m`, correct: false },
{ text: `${t[0] + t[1]} m`, correct: false }
]);
return { question: s.q, options };
}
lucide.createIcons();
</script>
</body>
</html>
Kelas 8
Matematika
Bilangan Berpangkat
<!doctype html>
<html lang="id">
<head><script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script><script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Pembelajaran - Bilangan Berpangkat & Bentuk 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=DM+Sans:wght@400;500;700&family=Fraunces:wght@600;700;800&display=swap" rel="stylesheet">
<style>
:root { --primary: #6366f1; --primary-dark: #4f46e5; --accent: #f59e0b; --success: #10b981; --error: #ef4444; }
body { font-family: 'DM Sans', sans-serif; }
h1, h2, h3, .heading-font { font-family: 'Fraunces', serif; }
.nav-item.active { background: var(--primary); color: white; }
.option-btn { transition: all 0.2s; }
.option-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.option-btn.correct { background: var(--success) !important; color: white !important; transform: scale(1.02); }
.option-btn.incorrect { background: var(--error) !important; color: white !important; animation: shake 0.4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation: fadeInUp 0.5s ease-out; }
.progress-fill { transition: width 0.5s ease; }
@keyframes pop { 0%{transform:scale(0)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
.emoji-pop { animation: pop 0.3s ease; }
</style>
<script src="/_sdk/e3937a0574eb2d69.data_sdk.js" type="text/javascript" integrity="sha512-xbp/ACqEQy1aDxYMtXTrR3y5MUbzxuggRR/9sD48Gl4VhLMMCiAHsxMaFV6DTdeBpR6ymF+t2zhPKYkWM3+Jfw=="></script>
<script src="/_sdk/9432170dbd2ae0df.resizing_sdk.js" type="text/javascript" integrity="sha512-FeT+58sb1f9ejWPWFjCbJvTT+SDwGV+ngrHUnlO7TWEOoqwOLj6p256kO3vOL7DIWl1cIgrobiof8v2bOigwPg=="></script>
</head>
<body data-template-id="__page-root" class="min-h-screen text-white overflow-hidden">
<div class="flex h-screen" style="height: calc(100 * min(var(--vh, 1vh), 1vh))">
<aside class="w-64 bg-slate-900 border-r border-slate-700 flex-shrink-0 overflow-y-auto hidden md:block">
<div class="p-4">
<h1 data-template-id="app-title" class="canva-text heading-font text-lg font-bold text-indigo-300"></h1>
</div>
<nav id="sidebar-nav" class="px-2 space-y-1"></nav>
</aside>
<div class="flex-1 flex flex-col overflow-hidden">
<header class="bg-slate-900/80 backdrop-blur border-b border-slate-700 px-4 py-3 flex items-center gap-3"><button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-slate-700"><i data-lucide="menu" class="w-5 h-5"></i></button>
<div class="flex-1">
<div class="h-2 bg-slate-700 rounded-full overflow-hidden">
<div id="progress-bar" class="progress-fill h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full" style="width:0%"></div>
</div>
</div><span id="progress-text" class="text-sm text-slate-400">0%</span>
</header>
<main id="content-area" class="flex-1 overflow-y-auto p-4 md:p-8"></main>
<footer class="bg-slate-900/80 backdrop-blur border-t border-slate-700 px-4 py-3 flex justify-between items-center"><button id="prev-btn" data-template-id="prev-button" class="canva-button px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 flex items-center gap-2 disabled:opacity-40" disabled><i data-lucide="chevron-left" class="w-4 h-4"></i></button> <span id="slide-indicator" class="text-sm text-slate-400"></span> <button id="next-btn" data-template-id="next-button" class="canva-button px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 flex items-center gap-2"><i data-lucide="chevron-right" class="w-4 h-4"></i></button>
</footer>
</div>
</div>
<div id="mobile-overlay" class="fixed inset-0 bg-black/60 z-40 hidden">
<aside class="w-64 bg-slate-900 h-full overflow-y-auto p-4">
<div class="flex justify-between items-center mb-4">
<h2 class="heading-font text-indigo-300 font-bold">Menu</h2><button id="close-mobile" class="p-2 hover:bg-slate-700 rounded"><i data-lucide="x" class="w-5 h-5"></i></button>
</div>
<nav id="mobile-nav" class="space-y-1"></nav>
</aside>
</div>
<script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script>
<script>
(function() {
// Random number helpers
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function shuffle(arr) { const a = [...arr]; for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];} return a; }
// Infinite quiz generators per TP
function generateTP1() {
const base = randInt(2, 9);
const exp = randInt(2, 5);
const answer = Math.pow(base, exp);
const wrong1 = base * exp;
const wrong2 = Math.pow(base, exp - 1);
return { question: `${base}<sup>${exp}</sup> = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]) };
}
function generateTP2() {
const base = randInt(2, 5);
const m = randInt(2, 5);
const n = randInt(1, 4);
const answer = Math.pow(base, m + n);
const wrong1 = Math.pow(base, m * n);
const wrong2 = Math.pow(base * 2, m);
return { question: `${base}<sup>${m}</sup> × ${base}<sup>${n}</sup> = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]) };
}
function generateTP3() {
const a = randInt(2, 5), ea = randInt(2, 3);
const b = randInt(2, 4), eb = randInt(2, 3);
const va = Math.pow(a, ea), vb = Math.pow(b, eb);
const answer = va + vb;
const wrong1 = va * vb;
const wrong2 = va - vb;
return { question: `${a}<sup>${ea}</sup> + ${b}<sup>${eb}</sup> = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]) };
}
function generateTP4() {
const a = randInt(1, 9);
const exp = randInt(3, 8);
const num = a * Math.pow(10, exp);
const numStr = num.toLocaleString('id-ID');
const answer = `${a} × 10^${exp}`;
const wrong1 = `${a*10} × 10^${exp-1}`;
const wrong2 = `${a} × 10^${exp+1}`;
return { question: `Ubah ke notasi ilmiah: ${numStr}`, correct: answer, options: shuffle([answer, wrong1, wrong2]), isText: true };
}
function generateTP5() {
const perfects = [4,9,16,25,36,49,64,81,100];
const nonPerfects = [2,3,5,6,7,8,10,11,12,13,14,15,17,19,20,21];
const correct = nonPerfects[randInt(0, nonPerfects.length-1)];
const w1 = perfects[randInt(0, perfects.length-1)];
const w2 = perfects[randInt(0, perfects.length-1)];
return { question: `Mana yang termasuk bentuk akar?`, correct: `√${correct}`, options: shuffle([`√${correct}`, `√${w1}`, `√${w2}`]), isText: true };
}
function generateTP6() {
const pairs = [[2,8],[3,12],[2,18],[5,20],[3,27],[2,32],[2,50],[3,48]];
const [f, n] = pairs[randInt(0, pairs.length-1)];
const sqrt = Math.sqrt(n / (f*f));
const inner = n / (f*f);
const answer = `${f}√${inner}`;
const wrong1 = `${inner}√${f}`;
const wrong2 = `√${n}`;
return { question: `Sederhanakan: √${n} = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]), isText: true };
}
function generateTP7() {
const nums = [2,4,6,8,10,12];
const bases = [2,3,5,6,7];
const num = nums[randInt(0, nums.length-1)];
const base = bases[randInt(0, bases.length-1)];
const gcd = num / base;
// Simplified: num/√base → (num√base)/base
const answer = `${num}√${base}/${base}`;
const wrong1 = `${num*base}`;
const wrong2 = `√${num*base}`;
return { question: `Rasionalkan: ${num}/√${base} = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]), isText: true };
}
function generateTP8() {
const areas = [8,12,18,20,27,32,45,50,72,75,98];
const area = areas[randInt(0, areas.length-1)];
// find simplification
let bestF = 1, bestR = area;
for(let i = Math.floor(Math.sqrt(area)); i >= 2; i--) {
if(area % (i*i) === 0) { bestF = i; bestR = area/(i*i); break; }
}
const answer = bestF > 1 ? `${bestF}√${bestR} cm` : `√${area} cm`;
const wrong1 = `${area/2} cm`;
const wrong2 = `√${area} cm`;
return { question: `Luas persegi = ${area} cm². Panjang sisinya = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2 === answer ? `${bestF*2}√${bestR} cm` : wrong2]), isText: true };
}
const generators = [generateTP1, generateTP2, generateTP3, generateTP4, generateTP5, generateTP6, generateTP7, generateTP8];
function buildInfiniteQuizHTML(tpIndex) {
return `
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6">
<span class="text-5xl">♾️</span>
<h2 class="heading-font text-2xl font-bold text-indigo-200 mt-3">Latihan Tak Terbatas - TP${tpIndex+1}</h2>
<p class="text-slate-400">Soal otomatis! Terus berlatih sampai mahir.</p>
<div class="mt-3 inline-flex items-center gap-2 bg-slate-800 px-4 py-2 rounded-full border border-slate-600">
<span class="text-green-400 font-bold" id="inf-correct-${tpIndex}">0</span>
<span class="text-slate-500">/</span>
<span class="text-slate-300" id="inf-total-${tpIndex}">0</span>
<span class="text-slate-400 text-sm">benar</span>
</div>
</div>
<div id="inf-question-${tpIndex}" class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"></div>
<div id="inf-feedback-${tpIndex}" class="hidden rounded-xl p-4 mb-4"></div>
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-3 rounded-xl transition-all" onclick="nextInfQuestion(${tpIndex})">Soal Berikutnya →</button>
</div>`;
}
function renderInfQuestion(tpIndex) {
const q = generators[tpIndex]();
const container = document.getElementById(`inf-question-${tpIndex}`);
const fb = document.getElementById(`inf-feedback-${tpIndex}`);
fb.classList.add('hidden');
let optionsHtml = q.options.map(opt => {
const val = q.isText ? opt : opt;
const display = q.isText ? opt : opt;
return `<button class="option-btn bg-slate-700 hover:bg-slate-600 p-3 rounded-lg" data-value="${String(val).replace(/"/g, '"')}" onclick="checkInf(this,${tpIndex},'${String(q.correct).replace(/'/g,"\\'")}')">` + display + `</button>`;
}).join('');
container.innerHTML = `<p class="font-medium text-lg mb-3">${q.question}</p><div class="grid grid-cols-3 gap-2">${optionsHtml}</div>`;
}
window.nextInfQuestion = function(tpIndex) {
renderInfQuestion(tpIndex);
};
window.checkInf = function(btn, tpIndex, correct) {
const container = document.getElementById(`inf-question-${tpIndex}`);
const allBtns = container.querySelectorAll('.option-btn');
const selected = btn.getAttribute('data-value');
allBtns.forEach(b => b.disabled = true);
const totalEl = document.getElementById(`inf-total-${tpIndex}`);
const correctEl = document.getElementById(`inf-correct-${tpIndex}`);
totalEl.textContent = parseInt(totalEl.textContent) + 1;
const fb = document.getElementById(`inf-feedback-${tpIndex}`);
if(selected === correct) {
btn.classList.add('correct');
correctEl.textContent = parseInt(correctEl.textContent) + 1;
fb.className = 'rounded-xl p-4 mb-4 bg-green-900/30 border border-green-500 text-green-300';
fb.innerHTML = '✅ Benar! Klik "Soal Berikutnya" untuk lanjut.';
} else {
btn.classList.add('incorrect');
allBtns.forEach(b => {
if(b.getAttribute('data-value') === correct) {
b.classList.add('correct');
}
});
fb.className = 'rounded-xl p-4 mb-4 bg-red-900/30 border border-red-500 text-red-300';
fb.innerHTML = `❌ Kurang tepat. Jawaban yang benar: <strong>${correct}</strong>`;
}
fb.classList.remove('hidden');
setTimeout(() => { document.getElementById(`inf-question-${tpIndex}`).scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 100);
};
// Slides
const slides = [
{ section:'Apersepsi', icon:'🔥', title:'Ledakan Bakteri!', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><span class="text-6xl emoji-pop inline-block">🦠</span><h2 class="heading-font text-3xl font-bold mt-4 text-indigo-200">Bayangkan Ini...</h2></div>
<div class="bg-slate-800 rounded-2xl p-6 border border-slate-600 mb-6">
<img data-template-id="bacteria-img" class="canva-image w-full h-48 object-cover rounded-xl mb-4" loading="lazy">
<p class="text-lg text-slate-200 leading-relaxed">1 bakteri membelah diri jadi 2 setiap 20 menit. Setelah <strong class="text-amber-400">4 jam</strong>, kira-kira ada berapa bakteri?</p>
</div>
<div class="grid grid-cols-2 gap-3" id="apersepsi-q1">
<button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'wrong')">24 bakteri</button>
<button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'wrong')">240 bakteri</button>
<button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'correct')">4.096 bakteri</button>
<button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'wrong')">1 juta bakteri</button>
</div>
<div id="aper-feedback" class="mt-4 hidden bg-indigo-900/50 border border-indigo-500 rounded-xl p-4"><p class="text-indigo-200">🎯 <strong>Tepat!</strong> 2<sup>12</sup> = 4.096! Inilah kekuatan <em>bilangan berpangkat</em>.</p></div>
</div>`},
{ section:'Apersepsi', icon:'🔥', title:'Dunia Super Kecil & Besar', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><h2 class="heading-font text-3xl font-bold text-indigo-200">Dari Atom ke Galaksi 🌌</h2></div>
<div class="grid md:grid-cols-2 gap-4 mb-6">
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600"><p class="text-5xl text-center mb-3">🔬</p><p class="text-center text-slate-300">Ukuran virus: <strong class="text-cyan-400">0,000000001 m</strong></p></div>
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600"><img data-template-id="galaxy-img" class="canva-image w-full h-32 object-cover rounded-xl mb-3" loading="lazy"><p class="text-center text-slate-300">Jarak Bumi-Matahari: <strong class="text-amber-400">150.000.000.000 m</strong></p></div>
</div>
<div class="bg-gradient-to-r from-indigo-900/50 to-purple-900/50 rounded-2xl p-6 border border-indigo-500/30 text-center">
<p class="text-xl text-indigo-100">💡 Bagaimana kalau ada cara <strong>lebih singkat</strong> untuk menulis angka-angka itu?</p>
</div>
</div>`},
{ section:'Asesmen Awal', icon:'📋', title:'Cek Pemahaman Awal', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><span class="text-5xl">🧠</span><h2 class="heading-font text-2xl font-bold mt-3 text-indigo-200">Cek Dulu!</h2><p class="text-slate-400 mt-1">Ini bukan nilai!</p></div>
<div id="pretest" class="space-y-4">
<div class="bg-slate-800 rounded-xl p-5 border border-slate-600"><p class="font-medium mb-3">1. 3 × 3 × 3 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,0,'correct')">27</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,0,'wrong')">9</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,0,'wrong')">12</button></div></div>
<div class="bg-slate-800 rounded-xl p-5 border border-slate-600"><p class="font-medium mb-3">2. √9 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,1,'correct')">3</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,1,'wrong')">4.5</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,1,'wrong')">81</button></div></div>
<div class="bg-slate-800 rounded-xl p-5 border border-slate-600"><p class="font-medium mb-3">3. 10×10×10 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,2,'wrong')">30</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,2,'correct')">10³</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,2,'wrong')">3¹⁰</button></div></div>
</div>
<div id="pretest-result" class="mt-4 hidden bg-slate-800 rounded-xl p-5 border border-indigo-500 text-center"><p class="text-xl font-bold text-indigo-300" id="pretest-score"></p><p class="text-slate-400 mt-2">Apapun hasilnya, kita belajar bersama! 💪</p></div>
</div>`},
// TP1
{ section:'Materi', icon:'📚', title:'TP1: Bilangan Berpangkat', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="bg-gradient-to-br from-indigo-900/60 to-slate-800 rounded-2xl p-6 border border-indigo-500/30 mb-6">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4">Bilangan Berpangkat Bulat</h2>
<div class="bg-slate-900/50 rounded-xl p-4 mb-4 text-center"><p class="text-3xl font-bold">a<sup>n</sup> = a × a × ... × a</p><p class="text-slate-400 mt-2">sebanyak <strong class="text-amber-400">n</strong> kali</p></div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-slate-800 rounded-lg p-4"><p class="text-sm text-slate-400 mb-1">Contoh:</p><p class="text-xl">2<sup>5</sup> = 2×2×2×2×2 = <strong class="text-green-400">32</strong></p></div>
<div class="bg-slate-800 rounded-lg p-4"><p class="text-sm text-slate-400 mb-1">Pangkat negatif:</p><p class="text-xl">2<sup>-3</sup> = 1/2³ = <strong class="text-green-400">1/8</strong></p></div>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP1', content: '__INF_0__' },
// TP2
{ section:'Materi', icon:'📚', title:'TP2: Sifat Bilangan Berpangkat', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">5 Sifat Penting ⚡</h2>
<div class="space-y-3 mb-6">
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">1</span><div><p class="font-medium">a<sup>m</sup> × a<sup>n</sup> = a<sup>m+n</sup></p></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">2</span><div><p class="font-medium">a<sup>m</sup> ÷ a<sup>n</sup> = a<sup>m-n</sup></p></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">3</span><div><p class="font-medium">(a<sup>m</sup>)<sup>n</sup> = a<sup>m×n</sup></p></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">4</span><div><p class="font-medium">(a×b)<sup>n</sup> = a<sup>n</sup> × b<sup>n</sup></p></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">5</span><div><p class="font-medium">a<sup>0</sup> = 1 (a ≠ 0)</p></div></div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP2', content: '__INF_1__' },
// TP3
{ section:'Materi', icon:'📚', title:'TP3: Operasi Bilangan Berpangkat', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Operasi Hitung 🔢</h2>
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600 mb-5">
<h3 class="font-bold text-lg text-amber-400 mb-3">Ingat!</h3>
<ul class="space-y-2 text-slate-300">
<li>✅ Perkalian & Pembagian: pakai sifat pangkat</li>
<li>✅ Penjumlahan & Pengurangan: hitung dulu nilainya!</li>
<li class="text-red-400">❌ 2³ + 2⁴ ≠ 2⁷</li>
<li class="text-green-400">✅ 2³ + 2⁴ = 8 + 16 = 24</li>
</ul>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP3', content: '__INF_2__' },
// TP4
{ section:'Materi', icon:'📚', title:'TP4: Notasi Ilmiah', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Notasi Ilmiah 🚀</h2>
<div class="bg-gradient-to-r from-cyan-900/40 to-indigo-900/40 rounded-2xl p-6 border border-cyan-500/30 mb-5">
<div class="text-center mb-4"><p class="text-2xl font-bold">a × 10<sup>n</sup></p><p class="text-slate-400">dimana 1 ≤ a < 10</p></div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-cyan-400">🔬 Ukuran virus:</p><p>0,0000001 m = <strong>1 × 10<sup>-7</sup> m</strong></p></div>
<div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-amber-400">🌍 Jarak Bumi-Matahari:</p><p>150.000.000 km = <strong>1,5 × 10<sup>8</sup> km</strong></p></div>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP4', content: '__INF_3__' },
// TP5
{ section:'Materi', icon:'📚', title:'TP5: Bentuk Akar', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-5"><span class="text-5xl">🌳</span><h2 class="heading-font text-2xl font-bold text-indigo-200 mt-2">Bentuk Akar</h2></div>
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600 mb-5">
<img data-template-id="roots-img" class="canva-image w-full h-40 object-cover rounded-xl mb-4" loading="lazy">
<p class="text-slate-300 mb-3"><strong class="text-amber-400">Bentuk akar</strong> = akar yang hasilnya bilangan irasional.</p>
<div class="grid grid-cols-2 gap-3">
<div class="bg-green-900/30 border border-green-500/30 rounded-lg p-3 text-center"><p class="text-sm text-green-400">✅ Bentuk Akar</p><p class="text-xl">√2, √3, √5</p></div>
<div class="bg-red-900/30 border border-red-500/30 rounded-lg p-3 text-center"><p class="text-sm text-red-400">❌ Bukan</p><p class="text-xl">√4=2, √9=3</p></div>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP5', content: '__INF_4__' },
// TP6
{ section:'Materi', icon:'📚', title:'TP6: Operasi Bentuk Akar', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Operasi Bentuk Akar ✂️</h2>
<div class="space-y-3 mb-5">
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-amber-400 font-medium mb-1">Penjumlahan/Pengurangan:</p><p>a√c ± b√c = (a±b)√c</p></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-cyan-400 font-medium mb-1">Perkalian:</p><p>√a × √b = √(a×b)</p></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-purple-400 font-medium mb-1">Menyederhanakan:</p><p>√12 = √(4×3) = 2√3</p></div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP6', content: '__INF_5__' },
// TP7
{ section:'Materi', icon:'📚', title:'TP7: Rasionalisasi Penyebut', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Rasionalisasi Penyebut 🎯</h2>
<div class="bg-gradient-to-r from-purple-900/40 to-indigo-900/40 rounded-2xl p-6 border border-purple-500/30 mb-5">
<p class="text-slate-300 mb-4">Menghilangkan bentuk akar dari penyebut pecahan.</p>
<div class="space-y-3">
<div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-purple-300 mb-1">Tipe 1:</p><p class="text-xl text-center">1/√3 × (√3/√3) = <strong>√3/3</strong></p></div>
<div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-purple-300 mb-1">Tipe 2: Penyebut (a + √b)</p><p class="text-xl text-center">Kalikan dengan <strong class="text-amber-400">(a - √b)</strong></p></div>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP7', content: '__INF_6__' },
// TP8
{ section:'Materi', icon:'📚', title:'TP8: Masalah Kontekstual', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Dunia Nyata! 🌍</h2>
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600 mb-5">
<img data-template-id="architect-img" class="canva-image w-full h-40 object-cover rounded-xl mb-4" loading="lazy">
<div class="bg-amber-900/30 border border-amber-500/30 rounded-lg p-4">
<p class="text-amber-300 font-medium mb-2">🏗️ Contoh:</p>
<p class="text-slate-300">Luas taman persegi = 72 m². Sisi = √72 = √(36×2) = 6√2 m</p>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP8', content: '__INF_7__' },
// Kuis
{ section:'Kuis', icon:'🏆', title:'Kuis Penguatan', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><span class="text-5xl">🏆</span><h2 class="heading-font text-2xl font-bold text-indigo-200 mt-3">Kuis Penguatan</h2><p class="text-slate-400">5 soal cepat!</p></div>
<div id="quiz-container">
<div class="quiz-q" data-qi="0"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 1/5</p><p class="font-medium text-lg">(2³)² = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,0,'wrong')">2⁵</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,0,'correct')">2⁶ = 64</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,0,'wrong')">4⁶</button></div></div></div>
<div class="quiz-q hidden" data-qi="1"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 2/5</p><p class="font-medium text-lg">0,0067 dalam bentuk baku = ?</p><div class="grid grid-cols-2 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,1,'correct')">6,7 × 10⁻³</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,1,'wrong')">67 × 10⁻⁴</button></div></div></div>
<div class="quiz-q hidden" data-qi="2"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 3/5</p><p class="font-medium text-lg">√18 + √2 = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,2,'wrong')">√20</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,2,'correct')">4√2</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,2,'wrong')">3√2</button></div></div></div>
<div class="quiz-q hidden" data-qi="3"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 4/5</p><p class="font-medium text-lg">4/√8 = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,3,'correct')">√2</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,3,'wrong')">2√2</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,3,'wrong')">4√8/8</button></div></div></div>
<div class="quiz-q hidden" data-qi="4"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 5/5</p><p class="font-medium text-lg">5⁰ + 2⁻¹ = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,4,'correct')">1,5</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,4,'wrong')">1</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,4,'wrong')">0,5</button></div></div></div>
</div>
<div id="quiz-result" class="hidden text-center bg-gradient-to-r from-indigo-900/50 to-purple-900/50 rounded-2xl p-6 border border-indigo-500/30"><span class="text-5xl" id="quiz-emoji"></span><p class="text-2xl font-bold mt-3" id="quiz-score-text"></p></div>
</div>`},
// Asesmen Akhir
{ section:'Asesmen Akhir', icon:'📝', title:'Evaluasi Akhir', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><span class="text-5xl">📝</span><h2 class="heading-font text-2xl font-bold text-indigo-200 mt-3">Asesmen Akhir</h2><p class="text-slate-400">8 soal sesuai 8 TP</p></div>
<div id="final-test" class="space-y-4">
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP1</p><p class="font-medium mb-2">1. 4⁴ = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,0,'correct','4⁴ = 4×4×4×4 = 256')">256</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,0,'wrong','4⁴ = 4×4×4×4 = 256')">64</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,0,'wrong','4⁴ = 4×4×4×4 = 256')">16</button></div><div id="final-explain-0" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP2</p><p class="font-medium mb-2">2. 5³ ÷ 5¹ = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,1,'correct','5³ ÷ 5¹ = 5³⁻¹ = 5² = 25')">25</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,1,'wrong','5³ ÷ 5¹ = 5³⁻¹ = 5² = 25')">5</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,1,'wrong','5³ ÷ 5¹ = 5³⁻¹ = 5² = 25')">125</button></div><div id="final-explain-1" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP3</p><p class="font-medium mb-2">3. 2⁴ - 3² = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,2,'correct','2⁴ = 16, 3² = 9, maka 16 - 9 = 7')">7</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,2,'wrong','2⁴ = 16, 3² = 9, maka 16 - 9 = 7')">5</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,2,'wrong','2⁴ = 16, 3² = 9, maka 16 - 9 = 7')">23</button></div><div id="final-explain-2" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP4</p><p class="font-medium mb-2">4. 45.000.000 = ?</p><div class="grid grid-cols-2 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,3,'correct','Geser desimal ke kiri hingga ada 1 digit, maka 4,5 × 10⁷')">4,5 × 10⁷</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,3,'wrong','Geser desimal ke kiri hingga ada 1 digit, maka 4,5 × 10⁷')">45 × 10⁶</button></div><div id="final-explain-3" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP5</p><p class="font-medium mb-2">5. Mana bentuk akar?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,4,'wrong','√49 = 7 (rasional), √100 = 10 (rasional), tetapi √13 tidak bisa disederhanakan (irasional)')">√49</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,4,'correct','√49 = 7 (rasional), √100 = 10 (rasional), tetapi √13 tidak bisa disederhanakan (irasional)')">√13</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,4,'wrong','√49 = 7 (rasional), √100 = 10 (rasional), tetapi √13 tidak bisa disederhanakan (irasional)')">√100</button></div><div id="final-explain-4" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP6</p><p class="font-medium mb-2">6. 2√3 × 3√3 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,5,'correct','2√3 × 3√3 = (2×3) × √3 × √3 = 6 × 3 = 18')">18</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,5,'wrong','2√3 × 3√3 = (2×3) × √3 × √3 = 6 × 3 = 18')">6√3</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,5,'wrong','2√3 × 3√3 = (2×3) × √3 × √3 = 6 × 3 = 18')">6√9</button></div><div id="final-explain-5" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP7</p><p class="font-medium mb-2">7. 10/√5 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,6,'correct','10/√5 × √5/√5 = 10√5/5 = 2√5')">2√5</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,6,'wrong','10/√5 × √5/√5 = 10√5/5 = 2√5')">5√2</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,6,'wrong','10/√5 × √5/√5 = 10√5/5 = 2√5')">10√5/5</button></div><div id="final-explain-6" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP8</p><p class="font-medium mb-2">8. Luas persegi = 200 cm². Sisi = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,7,'correct','Sisi = √200 = √(100×2) = 10√2 cm')">10√2 cm</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,7,'wrong','Sisi = √200 = √(100×2) = 10√2 cm')">100 cm</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,7,'wrong','Sisi = √200 = √(100×2) = 10√2 cm')">√200 cm</button></div><div id="final-explain-7" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
</div>
<div id="final-result" class="hidden mt-6 text-center bg-gradient-to-r from-green-900/50 to-emerald-900/50 rounded-2xl p-6 border border-green-500/30"><span class="text-5xl" id="final-emoji"></span><p class="text-2xl font-bold mt-3" id="final-score-text"></p><p class="text-slate-400 mt-2" id="final-msg"></p></div>
</div>`},
// Refleksi
{ section:'Refleksi', icon:'💭', title:'Refleksi Mandiri', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6">
<img data-template-id="celebrate-img" class="canva-image w-full h-40 object-cover rounded-2xl mb-4" loading="lazy">
<h2 class="heading-font text-2xl font-bold text-indigo-200">Refleksi Diri 💭</h2>
</div>
<div class="grid grid-cols-3 gap-4 mb-6" id="mood-select">
<button class="bg-slate-800 hover:bg-indigo-900/50 border border-slate-600 hover:border-indigo-500 rounded-xl p-4 text-center transition-all" onclick="selectMood(this)"><span class="text-4xl block mb-2">😊</span><p class="text-sm">Paham banget!</p></button>
<button class="bg-slate-800 hover:bg-amber-900/50 border border-slate-600 hover:border-amber-500 rounded-xl p-4 text-center transition-all" onclick="selectMood(this)"><span class="text-4xl block mb-2">🤔</span><p class="text-sm">Lumayan</p></button>
<button class="bg-slate-800 hover:bg-red-900/50 border border-slate-600 hover:border-red-500 rounded-xl p-4 text-center transition-all" onclick="selectMood(this)"><span class="text-4xl block mb-2">😵</span><p class="text-sm">Masih bingung</p></button>
</div>
<div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4">
<label for="reflection-text" class="block font-medium mb-2">Apa yang paling kamu ingat?</label>
<textarea id="reflection-text" class="w-full bg-slate-900 border border-slate-600 rounded-lg p-3 text-white resize-none focus:border-indigo-500 focus:outline-none" rows="3" placeholder="Tulis di sini..."></textarea>
</div>
<div id="reflection-done" class="hidden mt-4 text-center bg-indigo-900/30 border border-indigo-500/30 rounded-xl p-6"><span class="text-5xl">🎉</span><p class="text-xl font-bold text-indigo-200 mt-3">Terima kasih!</p></div>
<button id="submit-reflection" class="mt-4 w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-3 rounded-xl transition-all" onclick="submitReflection()">Kirim Refleksi ✨</button>
</div>`}
];
let currentSlide = 0;
let preScores = [null,null,null];
let quizScores = [null,null,null,null,null];
let finalScores = Array(8).fill(null);
function init() {
renderNav();
renderSlide();
lucide.createIcons();
document.getElementById('prev-btn').addEventListener('click', () => navigate(-1));
document.getElementById('next-btn').addEventListener('click', () => navigate(1));
document.getElementById('mobile-menu-btn').addEventListener('click', () => document.getElementById('mobile-overlay').classList.remove('hidden'));
document.getElementById('close-mobile').addEventListener('click', () => document.getElementById('mobile-overlay').classList.add('hidden'));
document.getElementById('mobile-overlay').addEventListener('click', (e) => { if(e.target===e.currentTarget) e.currentTarget.classList.add('hidden'); });
}
function renderNav() {
const navHtml = slides.map((s,i) => `<button class="nav-item w-full text-left px-3 py-2 rounded-lg text-sm flex items-center gap-2 hover:bg-slate-700 transition-colors ${i===currentSlide?'active':''}" onclick="goTo(${i})">${s.icon} <span class="truncate">${s.title}</span></button>`).join('');
document.getElementById('sidebar-nav').innerHTML = navHtml;
document.getElementById('mobile-nav').innerHTML = navHtml;
}
function renderSlide() {
const s = slides[currentSlide];
let content = s.content;
// Check if infinite quiz slide
const infMatch = content.match(/^__INF_(\d+)__$/);
if (infMatch) {
const tpIdx = parseInt(infMatch[1]);
content = buildInfiniteQuizHTML(tpIdx);
}
document.getElementById('content-area').innerHTML = content;
if (infMatch) {
renderInfQuestion(parseInt(infMatch[1]));
}
document.getElementById('slide-indicator').textContent = `${currentSlide+1} / ${slides.length}`;
document.getElementById('prev-btn').disabled = currentSlide === 0;
const pct = Math.round(((currentSlide+1)/slides.length)*100);
document.getElementById('progress-bar').style.width = pct+'%';
document.getElementById('progress-text').textContent = pct+'%';
renderNav();
lucide.createIcons();
}
function navigate(dir) {
const next = currentSlide + dir;
if(next >= 0 && next < slides.length) { currentSlide = next; renderSlide(); document.getElementById('content-area').scrollTop = 0; }
}
window.goTo = function(i) { currentSlide = i; renderSlide(); document.getElementById('content-area').scrollTop = 0; document.getElementById('mobile-overlay').classList.add('hidden'); };
window.checkAper = function(btn, result) {
const parent = btn.closest('#apersepsi-q1');
parent.querySelectorAll('button').forEach(b => b.disabled = true);
btn.classList.add(result === 'correct' ? 'correct' : 'incorrect');
const fb = document.getElementById('aper-feedback');
if(result === 'correct') fb.classList.remove('hidden');
else { fb.innerHTML = '<p class="text-amber-300">Bukan itu! 2¹² = 4.096!</p>'; fb.classList.remove('hidden'); }
};
window.preAnswer = function(btn, idx, result) {
const parent = btn.closest('.bg-slate-800');
parent.querySelectorAll('button').forEach(b => b.disabled = true);
btn.classList.add(result === 'correct' ? 'correct' : 'incorrect');
preScores[idx] = result === 'correct' ? 1 : 0;
if(preScores.every(s => s !== null)) {
const total = preScores.reduce((a,b)=>a+b,0);
document.getElementById('pretest-score').textContent = `Skor: ${total}/3`;
document.getElementById('pretest-result').classList.remove('hidden');
}
};
window.quizAnswer = function(btn, idx, result) {
const parent = btn.closest('.quiz-q');
parent.querySelectorAll('.option-btn').forEach(b => b.disabled = true);
btn.classList.add(result === 'correct' ? 'correct' : 'incorrect');
quizScores[idx] = result === 'correct' ? 1 : 0;
setTimeout(() => {
const nextQ = document.querySelector(`.quiz-q[data-qi="${idx+1}"]`);
if(nextQ) { parent.classList.add('hidden'); nextQ.classList.remove('hidden'); }
else {
const total = quizScores.reduce((a,b)=>a+b,0);
document.getElementById('quiz-emoji').textContent = total >= 4 ? '🌟' : '👍';
document.getElementById('quiz-score-text').textContent = `Skor: ${total}/5`;
document.getElementById('quiz-result').classList.remove('hidden');
}
}, 800);
};
window.finalAns = function(btn, idx, result, explanation) {
const parent = btn.closest('.bg-slate-800');
parent.querySelectorAll('.option-btn').forEach(b => b.disabled = true);
btn.classList.add(result === 'correct' ? 'correct' : 'incorrect');
finalScores[idx] = result === 'correct' ? 1 : 0;
// Show explanation if answer is wrong
if(result === 'wrong') {
const explainEl = document.getElementById(`final-explain-${idx}`);
explainEl.innerHTML = `<strong class="text-indigo-300">📖 Pembahasan:</strong> ${explanation}`;
explainEl.classList.remove('hidden');
}
if(finalScores.every(s => s !== null)) {
const total = finalScores.reduce((a,b)=>a+b,0);
document.getElementById('final-emoji').textContent = total >= 7 ? '🌟' : '👍';
document.getElementById('final-score-text').textContent = `Skor: ${total}/8`;
document.getElementById('final-msg').textContent = total >= 7 ? 'Luar biasa!' : total >= 5 ? 'Bagus!' : 'Jangan menyerah!';
document.getElementById('final-result').classList.remove('hidden');
}
};
window.selectMood = function(btn) {
document.querySelectorAll('#mood-select button').forEach(b => { b.classList.remove('ring-2','ring-indigo-500','bg-indigo-900/50'); b.classList.add('bg-slate-800'); });
btn.classList.add('ring-2','ring-indigo-500','bg-indigo-900/50'); btn.classList.remove('bg-slate-800');
};
window.submitReflection = function() {
document.getElementById('submit-reflection').classList.add('hidden');
document.getElementById('reflection-done').classList.remove('hidden');
};
document.addEventListener('DOMContentLoaded', init);
})();
</script>
</body>
</html>
Kelas 8
PPKN
Hak dan Kewajiban Warga Negara
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kegiatan Pembuka PPKn</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:wght@700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<style>
body { font-family: 'DM Sans', sans-serif; }
.font-display { font-family: 'Fraunces', serif; }
.slide { display: none; animation: fadeIn 0.4s ease; }
.slide.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes growBar { from { width: 0; } }
.poll-bar { animation: growBar 0.6s ease-out; }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } }
.timer-pulse { animation: pulse-glow 1s infinite; }
.option-btn { transition: all 0.2s; cursor: pointer; }
.option-btn:hover { transform: translateY(-2px); }
.option-btn.selected { ring: 3px; transform: scale(0.97); }
</style>
</head>
<body class="min-h-screen" style="background: linear-gradient(rgb(255, 247, 237), rgb(254, 243, 199), rgb(236, 253, 245));">
<!-- SLIDE 0: Welcome -->
<div class="slide active" id="slide-0">
<div class="relative w-full min-h-screen flex flex-col items-center justify-center">
<img data-template-id="hero-img" class="canva-image absolute inset-0 w-full h-full object-cover" loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/50 to-slate-900/20"></div>
<div class="relative z-10 flex flex-col items-center justify-center text-center px-6 py-12 max-w-2xl mx-auto">
<span data-template-id="badge-text" class="canva-tag inline-block px-4 py-1 bg-orange-500 text-white rounded-full text-sm font-medium mb-4 shadow"></span>
<h1 data-template-id="main-title" class="canva-text font-display leading-tight mb-3 text-white text-4xl md:text-5xl font-black"></h1>
<p data-template-id="main-subtitle" class="canva-text max-w-lg mb-6 text-slate-200 text-sm md:text-base font-medium"></p>
<!-- Identitas Siswa untuk Rekam Data LMS -->
<div class="mb-6 w-full max-w-xs text-left">
<label for="nama-siswa-ppkn" class="block text-xs font-bold text-slate-300 uppercase mb-1">Nama Lengkap Siswa:</label>
<input type="text" id="nama-siswa-ppkn" placeholder="Ketik namamu di sini..." class="w-full p-3 border-2 border-white/20 bg-white/10 text-white placeholder-slate-400 rounded-xl text-sm focus:ring-2 focus:ring-orange-400 focus:outline-none font-medium">
</div>
<button data-template-id="start-btn" class="canva-button px-8 py-3 bg-orange-500 text-white rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="mulaiKelas()"></button>
</div>
</div>
</div>
<!-- SLIDE 1: Polling -->
<div class="slide" id="slide-1">
<div class="max-w-2xl mx-auto px-5 py-12">
<p data-template-id="poll-label" class="canva-tag inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-semibold mb-3"></p>
<h2 data-template-id="poll-title" class="canva-text font-display mb-2 text-2xl font-bold text-slate-800"></h2>
<p data-template-id="poll-scenario" class="canva-text text-sm text-slate-600 mb-6 leading-relaxed"></p>
<div id="poll-options" class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
<button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(0)">🏛️ Hak warga negara</button>
<button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(1)">📋 Kewajiban warga negara</button>
<button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(2)">🤝 Keduanya</button>
<button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(3)">❌ Bukan keduanya</button>
</div>
<div id="poll-results" class="hidden bg-white p-4 border rounded-2xl shadow-sm mb-6">
<div class="text-sm font-medium text-slate-600 space-y-3" id="poll-result-bars"></div>
</div>
<div id="poll-nav" class="hidden text-center">
<button data-template-id="next-quiz-btn" class="canva-button px-8 py-2.5 bg-indigo-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="goSlide(2)"></button>
</div>
</div>
</div>
<!-- SLIDE 2: Quiz -->
<div class="slide" id="slide-2">
<div class="max-w-2xl mx-auto px-5 py-12">
<div class="flex items-center justify-between mb-4">
<p data-template-id="quiz-label" class="canva-tag inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold"></p>
<div id="timer-display" class="flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-sm timer-pulse">
<i data-lucide="clock" style="width:16px;height:16px;"></i> <span id="timer-text">10</span>
</div>
</div>
<div id="quiz-progress" class="w-full h-2 rounded-full bg-slate-200 mb-6">
<div id="quiz-bar" class="h-2 rounded-full bg-indigo-500 transition-all duration-300" style="width:20%"></div>
</div>
<h2 id="quiz-question" class="text-lg md:text-xl font-bold text-slate-800 mb-6 leading-relaxed"></h2>
<div class="grid grid-cols-2 gap-4">
<button id="btn-true" class="option-btn rounded-xl p-4 border-2 border-emerald-200 bg-emerald-50 font-bold text-emerald-700 text-lg hover:bg-emerald-100 transition shadow-sm" onclick="answer(true)">✅ Benar</button>
<button id="btn-false" class="option-btn rounded-xl p-4 border-2 border-rose-200 bg-rose-50 font-bold text-rose-700 text-lg hover:bg-rose-100 transition shadow-sm" onclick="answer(false)">❌ Salah</button>
</div>
<div id="quiz-feedback" class="mt-4 p-3 rounded-lg text-center font-semibold hidden"></div>
</div>
</div>
<!-- SLIDE 3: Results & Kirim LMS -->
<div class="slide" id="slide-3">
<div class="max-w-md mx-auto px-5 py-16 text-center bg-white border rounded-2xl shadow-md mt-12">
<div class="text-6xl mb-4" id="result-emoji">🎉</div>
<h2 data-template-id="result-title" class="canva-text font-display mb-2 text-2xl font-bold text-slate-800"></h2>
<p id="score-text" class="text-3xl font-black text-indigo-600 mb-4"></p>
<p data-template-id="reflection-prompt" class="canva-text text-sm text-slate-500 mb-6 px-4"></p>
<div class="flex flex-col gap-2 max-w-xs mx-auto">
<button id="lms-send-btn" class="px-6 py-2.5 bg-emerald-500 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm" onclick="kirimDataLms()">Kirim Laporan ke Guru 🚀</button>
<button data-template-id="restart-btn" class="canva-button px-6 py-2.5 bg-slate-100 text-slate-700 rounded-full font-semibold shadow hover:scale-105 transition text-sm" onclick="restart()"></button>
</div>
<div id="lms-success-alert" class="hidden mt-4 text-xs font-bold text-green-700 bg-green-50 border border-green-200 p-2 rounded-lg animate-pulse">
Laporan nilai & rekapitulasi Anda berhasil terkirim ke database guru!
</div>
</div>
</div>
<script>
// DATA KONTEN OTOMATIS AWAL
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('[data-template-id="hero-img"]').src = "https://images.pexels.com/photos/5412101/pexels-photo-5412101.jpeg?auto=compress&cs=tinysrgb&w=1280";
document.querySelector('[data-template-id="badge-text"]').textContent = "Aktivitas Pembuka • PPKn Kelas 8";
document.querySelector('[data-template-id="main-title"]').textContent = "Hak & Kewajiban Warga Negara";
document.querySelector('[data-template-id="main-subtitle"]').textContent = "Pelajari jembatan konsep keselarasan hak dan kewajiban kita sebagai warga negara Indonesia dengan cara interaktif!";
document.querySelector('[data-template-id="start-btn"]').textContent = "Mulai Kelas Digital 🚀";
document.querySelector('[data-template-id="poll-label"]').textContent = "STUDI KASUS JEMBATAN PILIHAN";
document.querySelector('[data-template-id="poll-title"]').textContent = "Membayar Pajak Tepat Waktu";
document.querySelector('[data-template-id="poll-scenario"]').textContent = "Negara membangun fasilitas jembatan umum dan jalan raya menggunakan dana pajak. Tindakan warga negara yang taat membayar pajak tersebut termasuk dalam kategori apa menurut pandanganmu?";
document.querySelector('[data-template-id="next-quiz-btn"]').textContent = "Lanjut ke Tantangan Kuis Cepat →";
document.querySelector('[data-template-id="quiz-label"]').textContent = "UJI PEMAHAMAN KILAT";
document.querySelector('[data-template-id="result-title"]').textContent = "Misi Selesai!";
document.querySelector('[data-template-id="reflection-prompt"]').textContent = "Hebat! Kamu telah menyelesaikan modul pemantik hari ini. Pastikan untuk menekan tombol 'Kirim Laporan' agar hasil belajarmu terekam otomatis di dasbor guru.";
document.querySelector('[data-template-id="restart-btn"]').textContent = "Ulangi Modul Belajar";
lucide.createIcons();
});
const slides = document.querySelectorAll('.slide');
function goSlide(n) {
slides.forEach(s => s.classList.remove('active'));
slides[n].classList.add('active');
document.getElementById('slide-counter').textContent = `${n + 1} / ${slides.length}`;
if(n===2) startQuiz();
}
function mulaiKelas() {
const nama = document.getElementById('nama-siswa-ppkn').value.trim();
if(!nama) {
alert("Mohon masukkan nama lengkapmu terlebih dahulu untuk memulai rekapitulasi belajar!");
return;
}
goSlide(1);
}
function restart() {
score=0;
qIndex=0;
pilihanPollingSiswa = "-";
goSlide(0);
resetPoll();
}
// Variabel Penampung Rekap
let pilihanPollingSiswa = "-";
// Poll Logika
const pollLabels = ['Hak Warga Negara','Kewajiban Warga Negara','Keduanya','Bukan keduanya'];
let votes = [0,0,0,0];
let voted = false;
function vote(i) {
if(voted) return; voted=true;
pilihanPollingSiswa = pollLabels[i];
votes[i]++;
// simulasi data respon siswa lain di kelas
votes[0]+=6; votes[1]+=18; votes[2]+=11; votes[3]+=1;
const total = votes.reduce((a,b)=>a+b,0);
const container = document.getElementById('poll-result-bars');
container.innerHTML = votes.map((v,idx) => {
const pct = Math.round(v/total*100);
return `<div class="mb-2"><div class="flex justify-between text-xs mb-1 font-bold"><span>${pollLabels[idx]}</span><span>${pct}%</span></div><div class="h-4 rounded-full bg-slate-100 overflow-hidden"><div class="poll-bar h-full rounded-full ${idx===i?'bg-emerald-500':'bg-indigo-400'}" style="width:${pct}%"></div></div></div>`;
}).join('');
document.getElementById('poll-results').classList.remove('hidden');
document.getElementById('poll-nav').classList.remove('hidden');
document.querySelectorAll('#poll-options .option-btn').forEach((b,idx)=>{ b.classList.add(idx===i?'border-indigo-600 bg-indigo-50 font-bold':'opacity-50'); b.disabled=true; });
}
function resetPoll() {
votes=[0,0,0,0];
voted=false;
document.getElementById('poll-results').classList.add('hidden');
document.getElementById('poll-nav').classList.add('hidden');
document.querySelectorAll('#poll-options .option-btn').forEach(b=>{b.classList.remove('border-indigo-600','bg-indigo-50','font-bold','opacity-50');b.disabled=false;});
}
// Kuis Logika
const questions = [
{ q: "Setiap warga negara wajib membayar pajak sesuai undang-undang yang berlaku.", a: true },
{ q: "Hak untuk mendapatkan pendidikan dasar secara konstitusi hanya berlaku bagi anak kalangan tertentu.", a: false },
{ q: "Membela kedaulatan negara adalah kewajiban dasar setiap warga negara Indonesia.", a: true },
{ q: "Kebebasan berpendapat di muka umum berarti bebas menghina orang lain di media sosial.", a: false },
{ q: "Warga negara berhak mendapat perlindungan serta kedudukan hukum yang sama di depan pengadilan.", a: true }
];
let qIndex=0, score=0, timer, timeLeft;
function startQuiz() { qIndex=0; score=0; showQuestion(); }
function showQuestion() {
if(qIndex>=questions.length){ endQuiz(); return; }
document.getElementById('quiz-question').textContent = `${qIndex+1}. ${questions[qIndex].q}`;
document.getElementById('quiz-bar').style.width = `${(qIndex+1)/questions.length*100}%`;
document.getElementById('quiz-feedback').classList.add('hidden');
document.getElementById('btn-true').disabled=false;
document.getElementById('btn-false').disabled=false;
timeLeft=10;
document.getElementById('timer-text').textContent=timeLeft;
clearInterval(timer);
timer=setInterval(()=>{
timeLeft--;
document.getElementById('timer-text').textContent=timeLeft;
if(timeLeft<=0){
clearInterval(timer);
answer(null);
}
},1000);
}
function answer(val) {
clearInterval(timer);
document.getElementById('btn-true').disabled=true;
document.getElementById('btn-false').disabled=true;
const fb = document.getElementById('quiz-feedback');
const correct = questions[qIndex].a;
if(val===correct){
score++;
fb.textContent='✅ Benar!';
fb.className='mt-4 p-3 rounded-lg text-center font-semibold bg-emerald-100 text-emerald-700 text-sm';
} else if(val===null){
fb.textContent='⏰ Waktu habis! Kunci Jawaban: '+(correct?'Benar':'Salah');
fb.className='mt-4 p-3 rounded-lg text-center font-semibold bg-amber-100 text-amber-700 text-sm';
} else {
fb.textContent='❌ Salah. Kunci Jawaban: '+(correct?'Benar':'Salah');
fb.className='mt-4 p-3 rounded-lg text-center font-semibold bg-rose-100 text-rose-700 text-sm';
}
fb.classList.remove('hidden');
qIndex++;
setTimeout(showQuestion, 1500);
}
function endQuiz() {
document.getElementById('score-text').textContent = `${score} / ${questions.length}`;
document.getElementById('result-emoji').textContent = score>=4?'🎉':score>=2?'👍':'💪';
goSlide(3);
}
// ====================================================================
// MENGIRIMKAN DATA REKAPITULASI DUA ARAH MENEMBUS IFRAME LMS UTAMA
// ====================================================================
function kirimDataLms() {
const namaLengkap = document.getElementById('nama-siswa-ppkn').value.trim();
// Membisikkan objek payload ke penangkap pesan window parent index.php
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: namaLengkap || "Siswa PPKn Anonim",
skor: score + " / " + questions.length,
baterai: score >= 4 ? "100" : score >= 2 ? "75" : "50", // Konversi skor menjadi indikator persen pemahaman
hambatan: "Pilihan Kasus Polling: " + pilihanPollingSiswa,
strategi: score >= 4 ? "Sangat Menguasai Materi Pokok" : "Butuh Latihan Penguatan Soal Kewajiban"
}, "*");
const alertBox = document.getElementById('lms-success-alert');
alertBox.classList.remove('hidden');
document.getElementById('lms-send-btn').disabled = true;
document.getElementById('lms-send-btn').className = "px-6 py-2.5 bg-slate-300 text-slate-500 rounded-full font-bold text-sm cursor-not-allowed";
setTimeout(() => alertBox.classList.add('hidden'), 3500);
}
</script>
</body>
</html>
Kelas 8
IPA
Sistem Pencernaan Manusia
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analisis Kedokteran: Sistem Pencernaan Manusia</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=Plus+Jakarta+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; }
.heading-font { font-family: 'Playfair Display', serif; }
.slide { display: none; }
.slide.active { display: flex; }
.match-card { transition: all 0.2s ease; cursor: pointer; }
.match-card.selected { transform: translateY(-2px); box-shadow: 0 0 0 3px #10b981; border-color: #10b981; }
.match-card.matched { opacity: 0.6; pointer-events: none; background: #ecfdf5 !important; border-color: #a7f3d0 !important; }
.nav-btn:disabled { opacity: 0.3; pointer-events: none; }
.sticky-note { animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes popIn { from { transform: scale(0.9) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
</style>
</head>
<body class="w-full min-h-screen flex flex-col pb-12 text-slate-800">
<!-- Modern Minimalist Top Navigation -->
<nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-4 bg-white/80 backdrop-blur-md border-b border-slate-200/80 shadow-sm">
<button class="nav-btn px-4 py-2 border border-slate-300 rounded-xl text-xs font-bold text-slate-700 bg-white hover:bg-slate-50 shadow-sm transition flex items-center gap-1" id="prev-btn" disabled>
<i data-lucide="arrow-left" style="width:14px;height:14px"></i> Kembali
</button>
<span class="text-xs font-bold tracking-widest text-slate-500 uppercase bg-slate-100 px-3 py-1.5 rounded-full" id="slide-counter">1 / 10</span>
<button class="nav-btn px-4 py-2 border border-slate-300 rounded-xl text-xs font-bold text-white bg-indigo-600 hover:bg-indigo-700 shadow-sm transition flex items-center gap-1" id="next-btn">
Lanjut <i data-lucide="arrow-right" style="width:14px;height:14px"></i>
</button>
</nav>
<main class="flex-1 pt-24 pb-6 px-4 w-full max-w-4xl mx-auto">
<!-- SLIDE 1: Welcome Screen (Realistis/Akademik Style) -->
<section class="slide active flex-col items-center justify-center text-center gap-6 min-h-[65vh]" data-slide="1">
<div class="px-4 py-1.5 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full text-xs font-bold uppercase tracking-wider">
Modul Sains & Anatomi • Kelas VIII
</div>
<h1 class="heading-font text-4xl md:text-6xl font-black text-slate-900 leading-tight">Bioreaktor Tubuh:<br><span class="text-emerald-600">Fisiologi Sistem Pencernaan</span></h1>
<p class="text-base md:text-lg max-w-2xl text-slate-500 font-medium leading-relaxed">Analisis komprehensif transformasi makromolekul nutrisi secara mekanis dan kimiawi di dalam saluran gastrointestinal manusia.</p>
<button id="start-btn" class="mt-4 px-8 py-3.5 bg-slate-900 text-white rounded-xl text-sm font-bold shadow-lg hover:bg-slate-800 transition transform hover:-translate-y-0.5 flex items-center gap-2">
Buka Modul Eksplorasi <i data-lucide="play" style="width:16px;height:16px"></i>
</button>
</section>
<!-- SLIDE 2: CP & TP Terintegrasi -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="2">
<h2 class="heading-font text-2xl font-bold text-slate-900 border-b border-slate-200 pb-2 flex items-center gap-2">
<i data-lucide="file-text" class="text-indigo-600"></i> Capaian & Target Kompetensi
</h2>
<div class="bg-white border border-slate-200 p-5 rounded-2xl shadow-sm space-y-3">
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">Capaian Pembelajaran (Kurikulum Nasional)</h3>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Peserta didik mampu mengidentifikasi serta menganalisis keterkaitan antara struktur organ saluran gastrointestinal dengan fungsinya dalam proses pemecahan zat makanan, serta memahami biokimia enzim pencernaan.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-2">
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<span class="text-xs font-bold text-emerald-600 uppercase">Indikator 01</span>
<p class="text-xs text-slate-600 font-semibold mt-1">Memetakan anatomi organ pencernaan utama dan kelenjar aksesori.</p>
</div>
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<span class="text-xs font-bold text-emerald-600 uppercase">Indikator 02</span>
<p class="text-xs text-slate-600 font-semibold mt-1">Membedakan hidrolisis zat makanan secara mekanis dan enzimatik.</p>
</div>
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<span class="text-xs font-bold text-emerald-600 uppercase">Indikator 03</span>
<p class="text-xs text-slate-600 font-semibold mt-1">Mendiagnosis gangguan biokimia (maag, konstipasi, dll) pada organ.</p>
</div>
</div>
</section>
<!-- SLIDE 3: Video Stimulus (Local Server Source) -->
<section class="slide flex-col gap-5 min-h-[65vh]" data-slide="3">
<h2 class="heading-font text-2xl font-bold text-slate-900 flex items-center gap-2"><i data-lucide="video" class="text-rose-600"></i> Video Stimulus: Proses Transportasi Makanan</h2>
<div class="w-full aspect-video bg-slate-950 rounded-2xl overflow-hidden shadow-inner border border-slate-800">
<!-- Menggunakan HTML5 native video player untuk memutar video dari local server intranet sekolah -->
<video width="100%" height="100%" controls class="w-full h-full object-contain">
<source src="http://192.168.1.100//filesharing///////////////////elearning/media/2026/0000183.C__Users_soumena_AppData_Local_edu.ruang.murid_decrypted_9272b5ef9510c946_b8f68198-714e-404f-8aec-38957fffaf6c.mp4" type="video/mp4">
Browser Anda tidak mendukung pemutar video lokal server. Silakan hubungi proktor/teknisi IT.
</video>
</div>
<div class="bg-slate-900 text-white p-5 rounded-2xl shadow-md">
<h4 class="text-xs font-bold uppercase tracking-wider text-amber-400 mb-1 flex items-center gap-1"><i data-lucide="help-circle" style="width:14px;height:14px"></i> Studi Kasus Klinis</h4>
<p class="text-slate-300 text-xs leading-relaxed mb-3">Berdasarkan visualisasi video tersebut, analisislah bagaimana mekanisme bolus makanan terdorong ke lambung meskipun tubuh dalam posisi terbalik/gravitasi nol?</p>
<textarea id="checkpoint-answer" class="w-full p-3 bg-slate-800 border border-slate-700 text-slate-100 rounded-xl resize-none h-20 text-xs focus:ring-2 focus:ring-emerald-500 focus:outline-none" placeholder="Tuliskan analisis ilmiah Anda..."></textarea>
<button class="mt-2 px-4 py-2 bg-emerald-600 text-white text-xs font-bold rounded-lg hover:bg-emerald-500 transition shadow" onclick="document.getElementById('checkpoint-feedback').classList.remove('hidden')">Kirim Analisis</button>
<p id="checkpoint-feedback" class="hidden mt-2 text-emerald-400 font-semibold text-xs flex items-center gap-1">✅ Tepat! Gerakan tersebut adalah peristaltik esofagus yang dipicu kontraksi otot sirkular dan longitudinal secara ritmis.</p>
</div>
</section>
<!-- SLIDE 4: Kedalaman Materi 1 (Ingesti & Pencernaan Atas) -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="4">
<h2 class="heading-font text-2xl font-bold text-slate-900 border-b border-slate-200 pb-1 flex items-center gap-2"><i data-lucide="book-open" class="text-emerald-600"></i> Fisiologi Organ Atas: Mulut hingga Lambung</h2>
<div class="space-y-3 text-sm text-slate-600 leading-relaxed">
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<h3 class="font-bold text-slate-800 text-base mb-1 flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> 1. Rongga Mulut (Cavum Oris)</h3>
<p class="text-xs text-slate-500 mb-2">Terjadi perpaduan pencernaan mekanis (oleh gigi dan lidah) serta kimiawi.</p>
<ul class="list-disc pl-5 space-y-1 text-xs">
<li><b>Gigi (Dentes):</b> Memotong (insisivus), merobek (caninus), dan mengunyah (molar) makanan menjadi bolus kecil.</li>
<li><b>Kelenjar Ludah (Saliva):</b> Menghasilkan enzim <b>Amilase (Ptialin)</b> yang menghidrolisis amilum menjadi disakarida (maltosa) pada pH ideal $\approx 6.8$.</li>
</ul>
</div>
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<h3 class="font-bold text-slate-800 text-base mb-1 flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> 2. Lambung (Ventriculus)</h3>
<p class="text-xs text-slate-500 mb-2">Kantong otot kontraktil yang menghasilkan getah lambung bersifat sangat asam (pH 1.5 - 2.5).</p>
<ul class="list-disc pl-5 space-y-1 text-xs">
<li><b>Asam Klorida (HCl):</b> Membunuh patogen mikroskopis dan mengaktifkan pepsinogen menjadi pepsin.</li>
<li><b>Enzim Pepsin:</b> Memecah makromolekul rantai protein kompleks menjadi gugus peptida (pepton).</li>
<li><b>Enzim Renin:</b> Mengkoagulasikan kasein (protein susu) dari cairan susu mamalia.</li>
</ul>
</div>
</div>
</section>
<!-- SLIDE 5: Kedalaman Materi 2 (Intestinum & Kelenjar Aksesori) -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="5">
<h2 class="heading-font text-2xl font-bold text-slate-900 border-b border-slate-200 pb-1 flex items-center gap-2"><i data-lucide="layers" class="text-emerald-600"></i> Absorpsi & Peran Organ Aksesori Kelenjar</h2>
<div class="space-y-3 text-sm text-slate-600 leading-relaxed">
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<h3 class="font-bold text-slate-800 text-sm mb-1">Usus Halus (Intestinum Tenue)</h3>
<p class="text-xs text-slate-500 mb-1">Terbagi atas Duodenum (12 jari), Jejunum (kosong), dan Ileum (penyerapan). Struktur dinding Ileum dipenuhi vili (jonjot usus) untuk memperluas area penyerapan sari makanan.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
<div class="bg-amber-50/50 border border-amber-200 p-4 rounded-xl">
<h4 class="font-bold text-amber-800 mb-1">Pankreas (Kelenjar Eksokrin)</h4>
<p class="text-slate-600 leading-relaxed mb-2">Mensekresikan natrium bikarbonat untuk menetralkan asam kimus lambung serta enzim penting:</p>
<ul class="list-disc pl-4 space-y-1 text-slate-700">
<li><b>Tripsin:</b> Memecah pepton menjadi asam amino dasar.</li>
<li><b>Lipase Pankreas:</b> Memecah emulsi lemak menjadi asam lemak dan gliserol.</li>
</ul>
</div>
<div class="bg-emerald-50/50 border border-emerald-200 p-4 rounded-xl">
<h4 class="font-bold text-emerald-800 mb-1">Hati & Kantung Empedu</h4>
<p class="text-slate-600 leading-relaxed">Hati memproduksi cairan <b>Empedu (Bile)</b> yang disimpan di kantung empedu. Cairan ini tidak mengandung enzim, melainkan garam empedu yang berfungsi **mengemulsikan lemak** secara mekanis agar bisa dihidrolisis zat lipase.</p>
</div>
</div>
</div>
</section>
<!-- SLIDE 6: Game Variasi 1 - Pilihan Ganda Teknis -->
<section class="slide flex-col gap-6 min-h-[65vh]" data-slide="6">
<h2 class="heading-font text-2xl font-bold text-slate-900 text-center">🎮 Kompetensi 1: Uji Biokimia Enzim</h2>
<div class="bg-white border border-slate-200 p-6 rounded-2xl shadow-sm max-w-2xl mx-auto w-full">
<p class="font-bold text-base text-slate-800 mb-4 text-center">Pasien klinis mengalami malabsorpsi lemak akibat gangguan sekresi getah alkali. Kerusakan pada organ manakah yang paling mungkin memicu penurunan hidrolisis emulsi lemak tersebut?</p>
<div class="flex flex-col gap-3" id="pg-area">
<button class="w-full py-3.5 px-4 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-700 text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">A. Glandula Parotis (Kelenjar Ludah)</button>
<button class="w-full py-3.5 px-4 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-700 text-left hover:bg-slate-100 transition" onclick="cekPG(this, true)">B. Pankreas (Penurunan Sekresi Lipase & Bikarbonat)</button>
<button class="w-full py-3.5 px-4 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-700 text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">C. Dinding Dalam Mukosa Lambung</button>
</div>
<p id="pg-feedback" class="hidden mt-4 font-bold text-center text-xs"></p>
</div>
</section>
<!-- SLIDE 7: Game Variasi 2 - Mencocokkan Pasangan Dinamis -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="7">
<h2 data-template-id="match-title" class="heading-font text-2xl font-bold text-center text-slate-900"></h2>
<p class="text-center text-xs text-slate-500">Pasangkan nama organ/zat pencernaan di sebelah kiri dengan fungsi fisiologis spesifiknya di kanan secara tepat.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3" id="match-board"></div>
<p id="match-feedback" class="text-center font-bold text-xs hidden mt-4"></p>
</section>
<!-- SLIDE 8: Game Variasi 3 - Pilihan Ganda Kompleks -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="8">
<h2 class="heading-font text-2xl font-bold text-slate-900 text-center">🎮 Kompetensi 3: Pilihan Ganda Kompleks</h2>
<div class="bg-white border border-slate-200 p-6 rounded-2xl shadow-sm max-w-2xl mx-auto w-full space-y-4">
<p class="font-bold text-sm text-slate-800 text-center bg-slate-50 p-3 rounded-xl border">Manakah pernyataan di bawah ini yang paling TEPAT menjelaskan proses penyerapan dan metabolisme zat makanan di Intestinum Tenue? (Pilih dua atau lebih jawaban benar!)</p>
<div class="space-y-3">
<label class="flex items-start gap-3 p-3 border border-slate-200 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition">
<input type="checkbox" name="pk" value="A" class="mt-1 w-4 h-4 accent-emerald-600">
<span class="text-xs font-semibold text-slate-700">A. Glukosa dan asam amino diserap jonjot vili usus halus lalu dibawa langsung masuk pembuluh darah kapiler menuju hati.</span>
</label>
<label class="flex items-start gap-3 p-3 border border-slate-200 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition">
<input type="checkbox" name="pk" value="B" class="mt-1 w-4 h-4 accent-emerald-600">
<span class="text-xs font-semibold text-slate-700">B. Getah usus tidak memerlukan sinyal kimia/hormon kolesistokinin dalam proses absorbsi molekul pati.</span>
</label>
<label class="flex items-start gap-3 p-3 border border-slate-200 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition">
<input type="checkbox" name="pk" value="C" class="mt-1 w-4 h-4 accent-emerald-600">
<span class="text-xs font-semibold text-slate-700">C. Asam lemak dan gliserol diabsorbsi masuk ke dalam pembuluh kil (pembuluh limfa/getah bening) di tengah vili sebelum masuk sirkulasi darah besar.</span>
</label>
</div>
<button onclick="cekKompleks()" class="w-full py-3 bg-slate-900 text-white font-bold text-xs rounded-xl hover:bg-slate-800 transition shadow">Kunci Analisis Pilihan 🔒</button>
<div id="pk-feedback" class="hidden p-3 rounded-xl text-center font-bold text-xs"></div>
</div>
</section>
<!-- SLIDE 9: Papan Refleksi Saintifik -->
<section class="slide flex-col gap-6 min-h-[65vh]" data-slide="9">
<h2 class="heading-font text-2xl font-bold text-center text-slate-900">📌 Jurnal Refleksi Fisiologi</h2>
<p class="text-center text-xs text-slate-500">Tuliskan kesimpulan kritis ilmiah mengenai perbedaan mendasar peran pencernaan kimiawi lambung versus usus dua belas jari!</p>
<div class="flex gap-2">
<input type="text" id="sticky-input" class="flex-1 p-3 border border-slate-300 rounded-xl text-xs focus:outline-emerald-500 bg-white" placeholder="Ketik simpulan analitismu di sini...">
<button class="px-5 py-2 bg-emerald-600 text-white rounded-xl font-bold text-xs hover:bg-emerald-700 shadow transition" onclick="addSticky()">Sematkan</button>
</div>
<div id="sticky-board" class="grid grid-cols-2 sm:grid-cols-3 gap-3 min-h-[100px] bg-slate-100 p-4 rounded-2xl border-2 border-dashed border-slate-200 shadow-inner"></div>
</section>
<!-- SLIDE 10: Umpan Balik LMS -->
<section class="slide flex-col gap-6 items-center justify-center min-h-[65vh]" data-slide="10">
<h2 class="heading-font text-2xl font-bold text-center text-slate-900">💌 Umpan Balik Kualitas Modul</h2>
<p class="text-center text-xs text-slate-500 max-w-md">Berikan masukan objektif Anda terkait kualitas rancangan presentasi, penyajian teks materi biokimia, serta fungsi simulasi interaktif game di atas.</p>
<textarea id="feedback-text" class="w-full max-w-lg p-4 border border-slate-300 rounded-xl h-24 text-xs focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white" placeholder="Tulis catatan umpan balik di sini..."></textarea>
<button class="px-6 py-3 bg-indigo-600 text-white rounded-xl font-bold text-xs hover:bg-indigo-700 transition shadow" onclick="submitFeedback()">Kirim Umpan Balik</button>
<p id="feedback-thanks" class="hidden text-emerald-600 font-bold text-sm animate-pulse">Umpan balik saintifik Anda berhasil disimpan dalam basis data kelas! 🎉</p>
</section>
</main>
<script>
// DATA KONTEN OTOMATIS AWAL
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('[data-template-id="welcome-title"]').innerHTML = "Bioreaktor Tubuh:<br><span class='text-emerald-600'>Fisiologi Pencernaan</span>";
document.querySelector('[data-template-id="welcome-subtitle"]').textContent = "Analisis Konversi Makromolekul Nutrisi Berbasis Saluran Gastrointestinal Manusia.";
document.querySelector('[data-template-id="start-btn"]').innerHTML = "Buka Modul Eksplorasi <i class='inline-block ml-1' data-lucide='play' style='width:14px;height:14px'></i>";
lucide.createIcons();
});
// Logika Inti Manajemen Navigasi Slide
let current = 1;
const total = 10;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const counter = document.getElementById('slide-counter');
function showSlide(n) {
document.querySelectorAll('.slide').forEach(s => s.classList.remove('active'));
document.querySelector(`[data-slide="${n}"]`).classList.add('active');
counter.textContent = `${n} / ${total}`;
prevBtn.disabled = n === 1;
nextBtn.disabled = n === total;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 1) showSlide(--current); });
nextBtn.addEventListener('click', () => { if (current < total) showSlide(++current); });
document.getElementById('start-btn').addEventListener('click', () => showSlide(++current));
// Game 1: Pilihan Ganda (PG) Fisiologi
function cekPG(btn, isCorrect) {
const fb = document.getElementById('pg-feedback');
fb.classList.remove('hidden');
document.querySelectorAll('#pg-area button').forEach(b => b.style.pointerEvents = 'none');
if (isCorrect) {
btn.className = "w-full py-3.5 px-4 bg-emerald-50 border-2 border-emerald-500 rounded-xl font-bold text-xs text-left text-emerald-700 shadow-sm";
fb.textContent = "🎉 ANALISIS BENAR! Pankreas mensekresikan enzim lipase untuk memecah lemak serta ion bikarbonat pencegah asidosis.";
fb.className = "mt-4 font-bold text-center text-xs text-emerald-700 bg-emerald-50 p-2.5 rounded-xl border border-emerald-200 animate-bounce";
} else {
btn.className = "w-full py-3.5 px-4 bg-rose-50 border-2 border-rose-500 rounded-xl font-bold text-xs text-left text-rose-700 shadow-sm";
fb.textContent = "❌ Analisis Kurang Tepat! Organ yang mensekresikan penetral kimus dan lipase utama adalah Kelenjar Pankreas.";
fb.className = "mt-4 font-bold text-center text-xs text-rose-600 bg-rose-50 p-2.5 rounded-xl border border-rose-200";
}
}
// Game 2: Mencocokkan Pasangan Unik/Acak Per Perangkat Siswa
let matchPairs = [];
let selected = null;
let matchCount = 0;
let gameRound = 1;
const bankSoalMatch = [
{ text: "HCl Lambung", category: "Mengaktifkan pepsinogen & bunuh kuman" },
{ text: "Cairan Empedu", category: "Mengemulsikan lemak secara mekanis" },
{ text: "Enzim Ptialin", category: "Menghidrolisis amilum menjadi maltosa" },
{ text: "Vili Usus Halus", category: "Memperluas permukaan absorbsi nutrisi" },
{ text: "Kolon (Usus Besar)", category: "Reabsorbsi air & pembusukan feses" }
];
function generateMatchPairs() {
let kocok = [...bankSoalMatch].sort(() => Math.random() - 0.5);
let dataPilihan = kocok.slice(0, 3);
const newPairs = [];
dataPilihan.forEach((item, idx) => {
const leftId = String.fromCharCode(97 + idx);
const rightId = String.fromCharCode(65 + idx);
newPairs.push(
{ id: leftId, text: item.text, match: rightId },
{ id: rightId, text: item.category, match: leftId }
);
});
return newPairs;
}
function initMatch() {
matchPairs = generateMatchPairs();
const board = document.getElementById('match-board');
board.innerHTML = '';
matchCount = 0;
selected = null;
const shuffled = matchPairs.sort(() => Math.random() - 0.5);
shuffled.forEach(p => {
const card = document.createElement('button');
card.className = 'match-card p-4 bg-white border border-slate-200 rounded-xl font-semibold text-xs text-center shadow-sm hover:border-emerald-400 text-slate-700';
card.textContent = p.text;
card.dataset.id = p.id;
card.dataset.match = p.match;
card.addEventListener('click', () => selectCard(card));
board.appendChild(card);
});
document.querySelector('[data-template-id="match-title"]').textContent = `🎮 Kompetensi 2: Hubungan Fungsi Organ (Ronde ${gameRound})`;
}
function selectCard(card) {
if (card.classList.contains('matched')) return;
if (selected && selected === card) { selected.classList.remove('selected'); selected = null; return; }
if (!selected) { card.classList.add('selected'); selected = card; return; }
if (selected.dataset.match === card.dataset.id) {
selected.classList.remove('selected');
selected.classList.add('matched');
card.classList.add('matched');
matchCount++;
if (matchCount === 3) {
const fb = document.getElementById('match-feedback');
fb.textContent = `🏆 Luar biasa! Ronde ${gameRound} terlewati. Memetakan kombinasi fungsional baru...`;
fb.className = 'text-center font-bold text-xs text-emerald-700 bg-emerald-50 p-2 rounded-xl mt-4 border border-emerald-200';
fb.classList.remove('hidden');
setTimeout(() => {
gameRound++;
document.getElementById('match-feedback').classList.add('hidden');
initMatch();
}, 2200);
}
} else {
selected.classList.remove('selected');
card.classList.add('selected');
}
selected = card.classList.contains('matched') ? null : card;
}
initMatch();
// Game 3: Pilihan Ganda Kompleks (PK)
function cekKompleks() {
const checkboxes = document.querySelectorAll('input[name="pk"]');
const fb = document.getElementById('pk-feedback');
fb.classList.remove('hidden');
let dipilih = [];
checkboxes.forEach(cb => { if (cb.checked) dipilih.push(cb.value); });
// Jawaban benar adalah A dan C (B salah karena getah usus diatur hormon sekretin dan kolesistokinin)
const benar = dipilih.includes('A') && dipilih.includes('C') && !dipilih.includes('B') && dipilih.length === 2;
if (benar) {
fb.textContent = "✅ VALID! Glukosa/asam amino masuk ke kapiler darah menuju hati, sementara asam lemak melewati pembuluh limfa lakteal di dalam vili.";
fb.className = "p-3 rounded-xl text-center font-bold text-xs text-emerald-700 bg-emerald-50 mt-4 border border-emerald-200 shadow-sm";
} else {
fb.textContent = "❌ Analisis Meloset! Kunci jawaban valid mencakup kombinasi opsi A dan C. Pelajari kembali rute mikro-transportasi limfa.";
fb.className = "p-3 rounded-xl text-center font-bold text-xs text-rose-600 bg-rose-50 mt-4 border border-rose-200 shadow-sm";
}
}
// Papan Interaktif Catatan Refleksi Mading
const colors = ['bg-amber-100','bg-emerald-100','bg-sky-100','bg-indigo-100'];
function addSticky() {
const input = document.getElementById('sticky-input');
if (!input.value.trim()) return;
const note = document.createElement('div');
note.className = `sticky-note p-4 rounded-xl shadow-sm text-xs font-bold text-slate-700 border border-slate-200/40 ${colors[Math.floor(Math.random()*colors.length)]}`;
note.textContent = input.value.trim();
document.getElementById('sticky-board').appendChild(note);
input.value = '';
}
// Submit Form Masukan
function submitFeedback() {
const text = document.getElementById('feedback-text').value.trim();
if (text) {
document.getElementById('feedback-thanks').classList.remove('hidden');
document.getElementById('feedback-text').value = '';
}
}
</script>
</body>
</html>
📊 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 |