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>
.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 7
Matematika
Bilangan Rasional - kuis kelompok
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 7 - Bilangan Rasional</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=Work+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: 'Work 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(10px); } to { opacity: 1; transform: translateY(0); } }
.option-btn { transition: all 0.2s; }
.option-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
.timer-pulse { animation: pulse-glow 1s infinite; }
.materi-card { background: white; border-radius: 12px; padding: 1.25rem; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-teal-50 via-slate-50 to-emerald-50 text-slate-800">
<div class="slide active" id="slide-0">
<div class="relative w-full min-h-screen flex flex-col items-center justify-center bg-teal-950 text-white text-center px-6 py-12">
<div class="absolute inset-0 bg-gradient-to-t from-teal-950/90 via-teal-900/60 to-teal-950/40"></div>
<div class="relative z-10 flex flex-col items-center justify-center max-w-2xl mx-auto">
<span class="inline-block px-4 py-1 rounded-full text-sm font-medium mb-4 bg-teal-500 text-white shadow">Modul Interaktif Matematika</span>
<h1 class="font-display leading-tight mb-4 text-4xl md:text-5xl font-black">Bab 2: Bilangan Rasional</h1>
<p class="max-w-lg mb-8 text-teal-100 text-sm md:text-base text-balance">Mari pelajari cara menyatakan, membandingkan, dan mengoperasikan bilangan rasional dalam kehidupan sehari-hari!</p>
<button class="px-8 py-3.5 bg-amber-500 hover:bg-amber-400 text-slate-900 rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="goSlide(1)">Mulai Pembelajaran →</button>
</div>
</div>
</div>
<div class="slide" id="slide-1">
<div class="max-w-2xl mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center">
<div class="text-5xl mb-4">🎯</div>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Capaian Pembelajaran (CP)</h2>
<div class="w-full bg-white border border-teal-100 rounded-2xl p-6 shadow-sm mb-8">
<p class="leading-relaxed text-slate-700 text-sm md:text-base">Di akhir fase D, peserta didik dapat membaca, menulis, dan membandingkan bilangan bulat, bilangan rasional dan irasional, bilangan desimal, bilangan berpangkat bulat dan akar, bilangan dalam notasi ilmiah. Mereka dapat menerapkan operasi aritmetika pada bilangan real, dan memberikan estimasi/perkiraan dalam menyelesaikan masalah.</p>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(0)">← Kembali</button>
<button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(2)">Lanjut →</button>
</div>
</div>
</div>
<div class="slide" id="slide-2">
<div class="max-w-2xl mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center">
<div class="text-5xl mb-4">📌</div>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Tujuan Pembelajaran (TP)</h2>
<div class="w-full bg-white border border-slate-200 rounded-2xl p-6 shadow-sm mb-8 space-y-4 text-sm md:text-base text-slate-700">
<div class="flex gap-3"><span class="font-bold text-teal-600">1.</span><p>Peserta didik dapat mengidentifikasi bilangan rasional dan menyatakan bilangan rasional dalam bentuk pecahan dan desimal.</p></div>
<div class="flex gap-3"><span class="font-bold text-teal-600">2.</span><p>Peserta didik dapat membandingkan dan mengurutkan bilangan rasional serta menaksir nilai bilangan rasional.</p></div>
<div class="flex gap-3"><span class="font-bold text-teal-600">3.</span><p>Peserta didik dapat melakukan operasi hitung penjumlahan, pengurangan, perkalian, dan pembagian bilangan rasional serta memecahkan masalah kontekstual.</p></div>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(1)">← Kembali</button>
<button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(3)">Lanjut →</button>
</div>
</div>
</div>
<div class="slide" id="slide-3">
<div class="max-w-4xl mx-auto px-6 py-10 min-h-screen flex flex-col justify-center">
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-8">Eksplorasi Konsep Bilangan Rasional</h2>
<div class="grid md:grid-cols-2 gap-4 mb-6">
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">💡 Definisi</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Bilangan rasional adalah bilangan yang dapat ditulis sebagai pecahan <strong>a/b</strong> di mana <em>a</em> dan <em>b</em> bilangan bulat, serta <strong>b ≠ 0</strong>.</p>
</div>
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">🔄 Konversi Bentuk</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Mengubah pecahan ke desimal dilakukan dengan pembagian kurung bersusun (misal: 1/4 = 0,25). Desimal berulang juga merupakan bilangan rasional (0,333...).</p>
</div>
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">⚖️ Membandingkan Nilai</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Gunakan penyamaan penyebut atau ubah ke desimal. Hati-hati pada bilangan negatif: makin besar angkanya, nilainya makin kecil (<strong>-0,5 > -0,75</strong>).</p>
</div>
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">🧮 Operasi Aritmetika</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Penjumlahan/pengurangan wajib menyamakan penyebut. Pada perkalian pecahan, kalikan langsung pembilang dengan pembilang, penyebut dengan penyebut.</p>
</div>
</div>
<div class="materi-card mb-8">
<h3 class="font-bold text-teal-700 mb-1">🛒 Aplikasi Kontekstual</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Digunakan saat menghitung sisa bahan kue, pembagian potongan tali, pengukuran kedalaman laut, atau menghitung diskon belanja secara presisi.</p>
</div>
<div class="flex justify-center gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(2)">← Kembali</button>
<button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(4)">Lanjut →</button>
</div>
</div>
</div>
<div class="slide" id="slide-4">
<div class="max-w-2xl mx-auto px-6 py-10 min-h-screen flex flex-col items-center justify-center">
<div class="text-5xl mb-4">✏️</div>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Contoh Soal & Pembahasan</h2>
<div class="w-full space-y-4 mb-8 text-sm md:text-base">
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<p class="font-bold text-slate-800 mb-1">Contoh 1: Nyatakan 3/8 dalam desimal</p>
<p class="text-teal-700 font-medium">Jawaban: lakukan pembagian bersusun 3 ÷ 8 = 0,375. (Rasional terbatas)</p>
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<p class="font-bold text-slate-800 mb-1">Contoh 2: Bandingkan -1/2 dengan -1/4</p>
<p class="text-teal-700 font-medium">Jawaban: -0,5 < -0,25. Maka, -1/2 < -1/4.</p>
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<p class="font-bold text-slate-800 mb-1">Contoh 3: Ibu memiliki 2,5 kg beras, dimasak sebanyak 1 1/4 kg. Sisa beras?</p>
<p class="text-teal-700 font-medium">Jawaban: 2,5 kg − 1,25 kg = 1,25 kg atau 1 1/4 kg.</p>
</div>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(3)">← Kembali</button>
<button class="px-8 py-2.5 bg-amber-500 hover:bg-amber-400 text-slate-900 rounded-full font-bold shadow-md hover:scale-105 transition" onclick="goSlide(5)">Mulai Quiz Kelompok ⚔️</button>
</div>
</div>
</div>
<div class="slide" id="slide-5">
<div class="w-full px-3 py-4 min-h-screen flex flex-col justify-between">
<div class="grid grid-cols-2 gap-3 flex-1">
<div class="border-2 border-teal-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-teal-100 text-teal-800">🔥 KELOMPOK 1</span>
<div id="timer1" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer1-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar1" class="h-1.5 rounded-full bg-teal-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q1-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q1-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb1" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
<div class="border-2 border-orange-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-orange-100 text-orange-800">⚡ KELOMPOK 2</span>
<div id="timer2" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer2-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar2" class="h-1.5 rounded-full bg-orange-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q2-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q2-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb2" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
<div class="border-2 border-purple-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-800">🔮 KELOMPOK 3</span>
<div id="timer3" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer3-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar3" class="h-1.5 rounded-full bg-purple-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q3-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q3-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb3" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
<div class="border-2 border-blue-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-blue-100 text-blue-800">🚀 KELOMPOK 4</span>
<div id="timer4" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer4-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar4" class="h-1.5 rounded-full bg-blue-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q4-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q4-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb4" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
</div>
</div>
</div>
<div class="slide" id="slide-6">
<div class="max-w-2xl mx-auto px-5 py-12 text-center">
<div class="text-6xl mb-4">🏆</div>
<h2 class="font-display mb-6 text-3xl font-black text-slate-800">Papan Skor Akhir Pertandingan Kelompok</h2>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
<div class="bg-teal-50 border border-teal-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-teal-800 mb-1">Kelompok 1</p>
<p id="score1-text" class="text-2xl font-black text-teal-600"></p>
</div>
<div class="bg-orange-50 border border-orange-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-orange-800 mb-1">Kelompok 2</p>
<p id="score2-text" class="text-2xl font-black text-orange-600"></p>
</div>
<div class="bg-purple-50 border border-purple-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-purple-800 mb-1">Kelompok 3</p>
<p id="score3-text" class="text-2xl font-black text-purple-600"></p>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-blue-800 mb-1">Kelompok 4</p>
<p id="score4-text" class="text-2xl font-black text-blue-600"></p>
</div>
</div>
<p id="winner-text" class="text-xl font-black text-slate-800 mb-8 p-3 bg-amber-100 rounded-2xl inline-block px-6"></p>
<div>
<button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm" onclick="startIndividuQuiz()">Lanjut Kuis Individu Mandiri →</button>
</div>
</div>
</div>
<div class="slide" id="slide-7">
<div class="max-w-xl mx-auto px-6 py-12 min-h-screen flex flex-col justify-center">
<div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-md">
<div class="flex justify-between items-center mb-4">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-800">🎯 TANTANGAN INDIVIDU</span>
<span id="ind-progress" class="text-xs font-bold text-slate-500">Soal 1 dari 5</span>
</div>
<div class="w-full bg-slate-100 h-2 rounded-full mb-6">
<div id="ind-bar" class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: 20%"></div>
</div>
<p id="ind-q-text" class="text-base font-bold text-slate-800 mb-4 min-h-[60px]"></p>
<div id="ind-options" class="flex flex-col gap-3"></div>
<div id="ind-fb" class="mt-4 p-3 rounded-xl text-center font-bold text-sm hidden"></div>
</div>
</div>
</div>
<div class="slide" id="slide-8">
<div class="max-w-md mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center text-center">
<div class="text-6xl mb-4">⭐</div>
<h2 class="font-display text-2xl font-black text-slate-800 mb-2">Evaluasi Hasil Mandiri</h2>
<p class="text-sm text-slate-500 mb-6">Kerja bagus! Berikut perolehan poin latihan mandirimu hari ini:</p>
<div class="bg-white border border-indigo-100 rounded-3xl p-6 shadow-sm w-full mb-8">
<p class="text-xs uppercase tracking-wider font-bold text-slate-400 mb-1">Skor Kamu</p>
<p id="ind-score-text" class="text-5xl font-black text-indigo-600">0 / 5</p>
<p id="ind-eval-msg" class="text-sm font-medium text-slate-600 mt-3"></p>
</div>
<button class="w-full py-3 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-bold shadow transition hover:scale-105" onclick="goSlide(9)">Isi Lembar Refleksi Akhir</button>
</div>
</div>
<div class="slide" id="slide-9">
<div class="max-w-2xl mx-auto px-6 py-10 min-h-screen flex flex-col justify-center">
<div class="text-center mb-6">
<span class="text-5xl">💭</span>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 mt-2">Lembar Refleksi Pembelajaran</h2>
<p class="text-xs md:text-sm text-slate-500">Evaluasi pemahaman kelompok dan individu secara jujur</p>
</div>
<div class="space-y-4 mb-8">
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<label class="block font-bold text-sm text-slate-800 mb-3">1. Bagaimana perasaan kelompokmu setelah mencoba soal Bilangan Rasional tadi?</label>
<div class="grid grid-cols-4 gap-2 text-center text-sm">
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="sangat-paham" class="text-teal-600">
<span class="text-xl">😎</span><span class="text-xs font-semibold">Sangat Paham</span>
</label>
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="paham" class="text-teal-600" checked>
<span class="text-xl">🙂</span><span class="text-xs font-semibold">Paham</span>
</label>
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="bingung" class="text-teal-600">
<span class="text-xl">🤨</span><span class="text-xs font-semibold">Ragu-ragu</span>
</label>
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="sulit" class="text-teal-600">
<span class="text-xl">😰</span><span class="text-xs font-semibold">Butuh Bimbingan</span>
</label>
</div>
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<label for="ref-kunci" class="block font-bold text-sm text-slate-800 mb-1">2. Bagian mana yang menurut kalian paling menantang?</label>
<input type="text" id="ref-kunci" placeholder="Misal: mengubah desimal berulang, tanda negatif..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<label for="ref-rencana" class="block font-bold text-sm text-slate-800 mb-1">3. Apa rencana perbaikan untuk pertemuan selanjutnya?</label>
<input type="text" id="ref-rencana" placeholder="Misal: lebih teliti menyamakan penyebut pecahan..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
</div>
<div class="text-center space-y-2">
<button class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-full font-bold shadow-lg text-sm transition hover:scale-105" onclick="submitRefleksi()">Kirim Laporan & Selesai! 🎉</button>
<p id="ref-success" class="text-xs font-bold text-emerald-600 hidden animate-pulse">Refleksi terkam! Terima kasih telah belajar dengan giat hari ini.</p>
</div>
</div>
</div>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
function goSlide(n) {
slides.forEach(s => s.classList.remove('active'));
slides[n].classList.add('active');
if (n === 5) startQuiz();
}
// BANK SOAL INDEPENDEN KELOMPOK
const allQs = [
[
{ q: "Manakah yang merupakan bilangan rasional?", opts: ["√2", "π (pi)", "0,35", "√7"], ans: 2 },
{ q: "Bentuk desimal dari 3/5 Grandma adalah...", opts: ["0,3", "0,5", "0,6", "0,75"], ans: 2 },
{ q: "Perbandingan yang benar adalah...", opts: ["1/2 < 1/4", "0,4 > 0,5", "-0,2 > -0,6", "3/5 < 2/5"], ans: 2 },
{ q: "Hasil dari 1/4 + 0,5 = ...", opts: ["0,75", "0,55", "1,25", "0,60"], ans: 0 },
{ q: "Suhu awal 2,5°C lalu turun 1,5°C menjadi...", opts: ["4°C", "1°C", "-1°C", "0°C"], ans: 1 }
],
[
{ q: "Pernyataan b ≠ 0 pada pecahan a/b karena...", opts: ["Hasil tak terdefinisi", "Hasil selalu nol", "Bukan bulat", "Angka pembilang"], ans: 0 },
{ q: "Bentuk pecahan biasa dari 0,8 adalah...", opts: ["1/8", "4/5", "2/3", "3/4"], ans: 1 },
{ q: "Manakah tanda yang tepat untuk 3/4 ... 0,70?", opts: [">", "<", "=", "≤"], ans: 0 },
{ q: "Hasil dari 1,2 + 3/5 = ...", opts: ["1,5", "1,8", "2,0", "1,25"], ans: 1 },
{ q: "Ibu punya 1,75 kg tepung, dipakai 0,5 kg. Sisa...", opts: ["1,20 kg", "1,50 kg", "1,25 kg", "0,75 kg"], ans: 2 }
],
[
{ q: "Bilangan manakah yang termasuk bilangan rasional?", opts: ["√8", "-2 1/2", "√5", "0,151617..."], ans: 1 },
{ q: "Bentuk desimal dari pecahan 1/8 adalah...", opts: ["0,125", "0,25", "0,8", "0,15"], ans: 0 },
{ q: "Urutan dari yang terkecil adalah...", opts: ["-0,8 ; 0,2 ; 1/2", "0,2 ; 1/2 ; -0,8", "1/2 ; 0,2 ; -0,8", "-0,8 ; 1/2 ; 0,2"], ans: 0 },
{ q: "Hasil dari 3/4 − 0,25 = ...", opts: ["0,25", "0,50", "0,75", "0"], ans: 1 },
{ q: "Panjang pita 2,5 m dipotong 4 bagian sama rata...", opts: ["0,5 m", "0,625 m", "0,75 m", "1,25 m"], ans: 1 }
],
[
{ q: "Angka -4 dapat diubah ke pecahan menjadi...", opts: ["-4/0", "-4/1", "1/-4", "4/4"], ans: 1 },
{ q: "Bentuk pecahan dari 0,25 adalah...", opts: ["1/2", "1/3", "1/4", "2/5"], ans: 2 },
{ q: "Pernyataan yang benar adalah...", opts: ["-0,3 < -0,5", "3/5 = 0,6", "1/4 > 1/2", "-1 > 0"], ans: 1 },
{ q: "Hasil dari 0,6 × 1/2 = ...", opts: ["0,3", "0,12", "0,5", "1,2"], ans: 0 },
{ q: "Kedalaman kapal selam 5,5 m lalu naik 2,5 m menjadi...", opts: ["8 m", "3 m", "-3 m", "-8 m"], ans: 2 }
]
];
// SOAL KUIS MANDIRI / INDIVIDU
const individuQs = [
{ q: "Mengapa angka desimal 0,333... disebut bilangan rasional?", opts: ["Karena memiliki batas angka di ujung", "Karena bisa dinyatakan dalam pecahan 1/3", "Karena angkanya tidak pernah berhenti", "Karena nilainya kurang dari 1"], ans: 1 },
{ q: "Manakah bilangan rasional di bawah ini yang posisinya paling kanan pada garis bilangan?", opts: ["-1,5", "-0,25", "0,15", "-2/5"], ans: 2 },
{ q: "Tentukan hasil perhitungan dari 0,75 + 2/5 !", opts: ["1,15", "0,95", "1,35", "0,85"], ans: 0 },
{ q: "Sebuah tali sepanjang 3,5 meter dipotong sepanjang 1 1/2 meter. Berapa sisa tali saat ini?", opts: ["2,5 meter", "1,75 meter", "2,0 meter", "2,25 meter"], ans: 2 },
{ q: "Jika x = -0,6 dan y = -3/5, maka hubungan kebenaran yang mutlak adalah...", opts: ["x lebih besar dari y", "x lebih kecil dari y", "x sama dengan y", "x dan y tidak bisa dibandingkan"], ans: 2 }
];
let scores, currentQs, timers, timesLeft, finished;
let indCurQ = 0, indScore = 0;
function startQuiz() {
scores = [0, 0, 0, 0];
currentQs = [0, 0, 0, 0];
finished = [false, false, false, false];
timers = [null, null, null, null];
timesLeft = [15, 15, 15, 15];
for (let g = 0; g < 4; g++) showQ(g);
}
function showQ(g) {
const gIdx = g + 1;
const qEl = document.getElementById(`q${gIdx}-text`);
const optEl = document.getElementById(`q${gIdx}-options`);
const barEl = document.getElementById(`bar${gIdx}`);
const fbEl = document.getElementById(`fb${gIdx}`);
const timerEl = document.getElementById(`timer${gIdx}-text`);
if (currentQs[g] >= 5) {
finished[g] = true;
qEl.innerHTML = "<span class='text-emerald-600 font-bold'>🏁 Selesai! Menunggu kelompok lain...</span>";
optEl.innerHTML = '';
clearInterval(timers[g]);
if (finished.every(f => f)) showResults();
return;
}
const q = allQs[g][currentQs[g]];
qEl.textContent = `${currentQs[g] + 1}. ${q.q}`;
barEl.style.width = `${(currentQs[g] / 5) * 100}%`;
fbEl.classList.add('hidden');
optEl.innerHTML = q.opts.map((o, i) =>
`<button class="option-btn rounded-lg p-2 border border-slate-200 bg-white font-medium text-slate-800 text-xs text-left" onclick="answer(${g},${i})">${o}</button>`
).join('');
timesLeft[g] = 15;
timerEl.textContent = timesLeft[g];
clearInterval(timers[g]);
timers[g] = setInterval(() => {
timesLeft[g]--;
timerEl.textContent = timesLeft[g];
if (timesLeft[g] <= 0) { clearInterval(timers[g]); answer(g, -1); }
}, 1000);
}
function answer(g, val) {
const gIdx = g + 1;
clearInterval(timers[g]);
const optEl = document.getElementById(`q${gIdx}-options`);
const fbEl = document.getElementById(`fb${gIdx}`);
const btns = optEl.querySelectorAll('.option-btn');
btns.forEach(b => b.disabled = true);
const correct = allQs[g][currentQs[g]].ans;
if (val === correct) {
scores[g]++;
if(btns[val]) btns[val].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fbEl.textContent = '✅ Benar!';
fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-emerald-100 text-emerald-700';
} else if (val === -1) {
if(btns[correct]) btns[correct].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fbEl.textContent = '⏰ Waktu Habis!';
fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-amber-100 text-amber-700';
} else {
if(btns[val]) btns[val].classList.add('border-rose-500', 'bg-rose-50', 'text-rose-700', 'font-bold');
if(btns[correct]) btns[correct].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fbEl.textContent = '❌ Salah!';
fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-rose-100 text-rose-700';
}
fbEl.classList.remove('hidden');
currentQs[g]++;
setTimeout(() => showQ(g), 1500);
}
function showResults() {
for (let i = 0; i < 4; i++) {
document.getElementById(`score${i+1}-text`).textContent = `${scores[i]} / 5`;
}
const max = Math.max(...scores);
const winners = scores.reduce((acc, s, i) => s === max ? [...acc, i+1] : acc, []);
let text = '';
if (winners.length === 4) text = '🤝 Seri! Kekuatan Semua Kelompok Seimbang!';
else if (winners.length > 1) text = `🤝 Seri: Kelompok ${winners.join(' & ')} unggul bersama!`;
else text = `🎉 Selamat! Kelompok ${winners[0]} Keluar Sebagai Juara!`;
document.getElementById('winner-text').textContent = text;
goSlide(6);
}
// FUNGSI UTK KUIS INDIVIDU TANTANGAN
function startIndividuQuiz() {
indCurQ = 0;
indScore = 0;
goSlide(7);
showIndividuQuestion();
}
function showIndividuQuestion() {
const qEl = document.getElementById("ind-q-text");
const optEl = document.getElementById("ind-options");
const fbEl = document.getElementById("ind-fb");
const progEl = document.getElementById("ind-progress");
const barEl = document.getElementById("ind-bar");
if (indCurQ >= individuQs.length) {
showIndividuResults();
return;
}
fbEl.classList.add('hidden');
progEl.textContent = `Soal ${indCurQ + 1} dari ${individuQs.length}`;
barEl.style.width = `${((indCurQ + 1) / individuQs.length) * 100}%`;
const currentQ = individuQs[indCurQ];
qEl.textContent = currentQ.q;
optEl.innerHTML = currentQ.opts.map((o, i) =>
`<button class="ind-opt-btn w-full p-3 text-left text-sm font-medium border border-slate-200 rounded-xl bg-slate-50 hover:bg-slate-100 transition" onclick="checkIndividuAnswer(${i})">${o}</button>`
).join('');
}
function checkIndividuAnswer(selectedIdx) {
const fbEl = document.getElementById("ind-fb");
const btns = document.querySelectorAll(".ind-opt-btn");
btns.forEach(b => b.disabled = true);
const correctIdx = individuQs[indCurQ].ans;
if (selectedIdx === correctIdx) {
indScore++;
btns[selectedIdx].classList.add("bg-emerald-100", "border-emerald-500", "text-emerald-700", "font-bold");
fbEl.textContent = "🎯 Hebat! Jawabanmu Tepat.";
fbEl.className = "mt-4 p-3 rounded-xl text-center font-bold text-sm bg-emerald-100 text-emerald-700";
} else {
btns[selectedIdx].classList.add("bg-rose-100", "border-rose-500", "text-rose-700", "font-bold");
btns[correctIdx].classList.add("bg-emerald-100", "border-emerald-500", "text-emerald-700", "font-bold");
fbEl.textContent = "📌 Masih Kurang Tepat, Perhatikan Pembahasan.";
fbEl.className = "mt-4 p-3 rounded-xl text-center font-bold text-sm bg-rose-100 text-rose-700";
}
fbEl.classList.remove('hidden');
indCurQ++;
setTimeout(showIndividuQuestion, 2000);
}
function showIndividuResults() {
goSlide(8);
document.getElementById("ind-score-text").textContent = `${indScore} / ${individuQs.length}`;
const msgEl = document.getElementById("ind-eval-msg");
if (indScore === 5) msgEl.textContent = "Luar biasa! Kamu menguasai penuh materi Bilangan Rasional. 🌟";
else if (indScore >= 3) msgEl.textContent = "Sudah bagus! Tingkatkan ketelitian pada pengerjaan tanda operasi hitung. 👍";
else msgEl.textContent = "Jangan patah semangat! Silakan ulas kembali contoh pembahasannya, ya! 📚";
}
function submitRefleksi() {
document.getElementById('ref-success').classList.remove('hidden');
setTimeout(() => {
document.getElementById('ref-kunci').value = '';
document.getElementById('ref-rencana').value = '';
document.getElementById('ref-success').classList.add('hidden');
goSlide(0);
}, 3000);
}
</script>
</body>
</html>
Kelas 7
Matematika
Bilangan Rasional
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 7 - Bilangan Rasional</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=Work+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: 'Work 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(10px); } to { opacity: 1; transform: translateY(0); } }
.option-btn { transition: all 0.2s; cursor: pointer; }
.option-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.4); } 50% { box-shadow: 0 0 0 8px rgba(20,184,166,0); } }
.timer-pulse { animation: pulse-glow 1s infinite; }
</style>
</head>
<body class="min-h-screen" style="background: linear-gradient(to bottom, #f0fdfa, #ccfbf1, #f0fdf4);">
<div class="slide active" id="slide-0">
<div class="relative w-full min-h-screen flex flex-col items-center justify-center">
<div class="absolute inset-0 bg-teal-950/80"></div>
<div class="relative z-10 flex flex-col items-center justify-center text-center px-6 py-12 max-w-2xl mx-auto text-white">
<span class="inline-block px-4 py-1 bg-teal-500 text-white rounded-full text-sm font-medium mb-4 shadow">Modul Interaktif Matematika</span>
<h1 class="font-display leading-tight mb-3 text-4xl md:text-5xl font-black">Bab: Bilangan Rasional</h1>
<p class="max-w-lg mb-6 text-teal-100 text-sm md:text-base">Kuasai konsep bilangan rasional, bentuk pecahan/desimal, perbandingan, hingga operasi hitung secara berurutan!</p>
<div class="mb-6 w-full max-w-xs text-left text-slate-800">
<label for="nama-siswa" class="block text-xs font-bold text-teal-200 uppercase mb-1">Nama Lengkap Siswa:</label>
<input type="text" id="nama-siswa" placeholder="Ketik namamu di sini..." class="w-full p-3 border-2 border-white/20 bg-white/90 rounded-xl text-sm focus:ring-2 focus:ring-teal-400 focus:outline-none font-medium">
</div>
<button class="px-8 py-3 bg-teal-500 text-white rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="mulaiKelas()">Mulai Petualangan Belajar 🚀</button>
</div>
</div>
</div>
<div class="slide" id="slide-1">
<div class="max-w-2xl mx-auto px-5 py-10">
<span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 1</span>
<h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Pengertian & Bentuk Bilangan Rasional</h2>
<div class="space-y-4 mb-6">
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">📌 Apa itu Bilangan Rasional?</p>
<p class="text-slate-700 text-sm leading-relaxed">Bilangan rasional adalah bilangan yang dapat dinyatakan dalam bentuk pecahan <strong>a/b</strong>, dengan <i>a</i> dan <i>b</i> adalah bilangan bulat, serta <strong>b ≠ 0</strong>.</p>
</div>
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">🔄 Menyatakan ke Pecahan & Desimal</p>
<p class="text-slate-700 text-sm mb-1">• <strong>Pecahan ke Desimal:</strong> 1/4 = 0,25 (Desimal terbatas) atau 1/3 = 0,333... (Desimal berulang).</p>
<p class="text-slate-700 text-sm">• <strong>Desimal ke Pecahan:</strong> 0,5 = 5/10 = 1/2.</p>
</div>
</div>
<button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab1')">Siap, Uji Kuis Bab 1 ⚡</button>
</div>
</div>
<div class="slide" id="slide-2">
<div class="max-w-2xl mx-auto px-5 py-10">
<div class="flex items-center justify-between mb-4">
<span id="kuis-bab-label" class="inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold"></span>
<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">15</span>
</div>
</div>
<div class="w-full h-2 rounded-full bg-slate-200 mb-6">
<div id="quiz-bar" class="h-2 rounded-full bg-teal-500 transition-all duration-300" style="width:0%"></div>
</div>
<h2 id="quiz-question" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed"></h2>
<div id="quiz-options" class="grid grid-cols-1 sm:grid-cols-2 gap-3"></div>
<div id="quiz-feedback" class="mt-4 p-3 rounded-lg text-center font-semibold hidden"></div>
</div>
</div>
<div class="slide" id="slide-3">
<div class="max-w-2xl mx-auto px-5 py-10">
<span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 2</span>
<h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Membandingkan Bilangan Rasional</h2>
<div class="space-y-4 mb-6">
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">⚖️ Cara Membandingkan Pecahan</p>
<p class="text-slate-700 text-sm leading-relaxed">Untuk membandingkan dua pecahan (misal 2/3 dan 3/4), kita dapat menyamakan penyebutnya terlebih dahulu atau menggunakan metode perkalian silang:</p>
<p class="text-slate-700 text-sm mt-2 font-medium">• 2 × 4 = 8 dan 3 × 3 = 9. Karena 8 < 9, maka <strong>2/3 < 3/4</strong>.</p>
</div>
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">📉 Bilangan Rasional Negatif</p>
<p class="text-slate-700 text-sm leading-relaxed">Ingat, pada bilangan negatif, semakin besar angkanya justru nilainya semakin kecil. Contoh: <strong>-0,5 > -0,75</strong>.</p>
</div>
</div>
<button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab2')">Siap, Uji Kuis Bab 2 ⚡</button>
</div>
</div>
<div class="slide" id="slide-4">
<div class="max-w-2xl mx-auto px-5 py-10">
<span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 3</span>
<h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Operasi Hitung & Penerapan Bilangan Rasional</h2>
<div class="space-y-4 mb-6">
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">🧮 Penjumlahan & Perkalian</p>
<p class="text-slate-700 text-sm mb-1">• <strong>Penjumlahan:</strong> 1/2 + 1/3 = 3/6 + 2/6 = 5/6 (Samakan penyebut).</p>
<p class="text-slate-700 text-sm">• <strong>Perkalian:</strong> 2/3 × 4/5 = (2×4) / (3×5) = 8/15.</p>
</div>
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">💼 Soal Cerita kontekstual</p>
<p class="text-slate-700 text-sm leading-relaxed">Ibu membeli gula sebanyak 2,5 kg, kemudian digunakan untuk membuat kue sebanyak 1 1/4 kg. Sisa gula ibu adalah: 2,5 − 1,25 = 1,25 kg.</p>
</div>
</div>
<button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab3')">Siap, Uji Kuis Bab 3 ⚡</button>
</div>
</div>
<div class="slide" id="slide-5">
<div class="max-w-2xl mx-auto px-5 py-10">
<div class="bg-indigo-600 rounded-2xl p-6 text-white shadow-xl mb-6">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">🧭</span>
<h2 class="font-display text-2xl font-bold">Panel Refleksi: Self-Check & Next Step</h2>
</div>
<p class="text-indigo-100 text-sm">Sebelum menutup misi belajar hari ini, yuk luangkan waktu 1 menit untuk melihat perkembangan dirimu secara jujur!</p>
</div>
<div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-4">
<p class="font-bold text-slate-800 text-sm mb-3 flex items-center gap-2">📊 Pengukur Pemahaman (Skala Likert)</p>
<p class="text-xs text-slate-600 mb-4">Jika tingkat pemahamanmu terhadap materi hari ini diibaratkan sebagai Baterai HP, ada di level mana sekarang?</p>
<div class="space-y-2 text-sm text-slate-700">
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="25" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>🪫 <strong>25% (Low Batt):</strong> Masih bingung banget, butuh penjelasan ulang guru.</span>
</label>
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="50" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>🔋 <strong>50% (Half):</strong> Setengah paham, tapi masih ragu di hitungan bentuk desimal/negatif.</span>
</label>
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="75" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>🔋 <strong>75% (Good):</strong> Paham materi Bilangan Rasional dan bisa kuis dengan lancar.</span>
</label>
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="100" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>⚡ <strong>100% (Full Power):</strong> Paham banget dan siap membantu mengajari teman!</span>
</label>
</div>
</div>
<div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-4">
<p class="font-bold text-slate-800 text-sm mb-2 flex items-center gap-2">🚧 Detektor Hambatan (Jawaban Singkat)</p>
<label for="input-hambatan" class="block text-xs text-slate-600 mb-3">Tuliskan konsep atau jenis perkalian/pembagian tanda yang menurutmu paling menantang.</label>
<input type="text" id="input-hambatan" placeholder="Tuliskan hambatanmu..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
<div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-6">
<p class="font-bold text-slate-800 text-sm mb-2 flex items-center gap-2">🧠 Strategi Belajar & Solusi</p>
<label for="input-strategi" class="block text-xs text-slate-600 mb-3">Apa strategi belajarmu ke depan agar operasi bilangan bulat negatif terasa lebih mudah?</label>
<input type="text" id="input-strategi" placeholder="Contoh: Membuat jembatan keledai tanda, latihan soal..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
<div class="text-center">
<button class="px-8 py-3 bg-indigo-600 text-white rounded-full font-bold shadow-lg hover:scale-105 transition" onclick="simpanRefleksiDanLanjut()">Lihat Skor Akhir Anda →</button>
</div>
</div>
</div>
<div class="slide" id="slide-6">
<div class="max-w-md mx-auto px-5 py-12 text-center bg-white border border-teal-100 rounded-2xl shadow-md mt-12">
<div class="text-6xl mb-4" id="result-emoji">🎉</div>
<h2 class="font-display mb-2 text-2xl font-bold text-slate-800">Misi Belajar Selesai!</h2>
<p id="score-text" class="text-3xl font-black text-teal-600 mb-4"></p>
<p class="text-sm text-slate-500 mb-6 px-4">Luar biasa! Seluruh lembar evaluasi dan data penilaian mandiri Anda telah direkam.</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 Nilai 🚀</button>
<button class="px-6 py-2.5 bg-slate-100 text-slate-700 rounded-full font-semibold shadow hover:scale-105 transition text-sm" onclick="restart()">Ulangi Dari Awal</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 kumulatif dan refleksi berhasil dikirim ke guru!
</div>
</div>
</div>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
function goSlide(n) {
slides.forEach(s => s.classList.remove('active'));
slides[n].classList.add('active');
}
function mulaiKelas() {
if(!document.getElementById('nama-siswa').value.trim()) {
alert("Masukkan nama terlebih dahulu!");
return;
}
goSlide(1);
}
// BANK SOAL BILANGAN RASIONAL SESUAI DENGAN TUJUAN PEMBELAJARAN
const databaseKuis = {
bab1: [
{ q: "Manakah di bawah ini yang BUKAN merupakan bilangan rasional?", opts: ["√2", "0,5", "2/3", "-4"], ans: 0 },
{ q: "Bentuk pecahan biasa yang paling sederhana dari bilangan desimal 0,75 adalah...", opts: ["1/2", "3/4", "7/5", "3/5"], ans: 1 },
{ q: "Bentuk desimal dari pecahan 1/8 adalah...", opts: ["0,125", "0,25", "0,8", "0,15"], ans: 0 }
],
bab2: [
{ q: "Di antara pilihan berikut, tanda perbandingan yang benar adalah...", opts: ["1/2 < 1/3", "2/5 > 3/5", "-0,6 > -0,2", "3/4 > 2/3"], ans: 3 },
{ q: "Jika diurutkan dari yang terkecil, urutan yang benar adalah...", opts: ["-0,5 ; 1/4 ; 0,6", "0,6 ; 1/4 ; -0,5", "-0,5 ; 0,6 ; 1/4", "1/4 ; -0,5 ; 0,6"], ans: 0 }
],
bab3: [
{ q: "Hasil operasi hitung dari 1/2 + 0,25 adalah...", opts: ["0,5", "3/4", "1/4", "5/4"], ans: 1 },
{ q: "Andi memiliki tali sepanjang 1,5 meter. Ia memotongnya sebanyak 3/4 meter untuk kerajinan. Sisa tali Andi adalah...", opts: ["0,5 meter", "0,25 meter", "0,75 meter", "1 meter"], ans: 2 }
]
};
let babAktif = '';
let qIndex = 0;
let totalSkorBenar = 0;
let totalSoalDilewati = 0;
let timer, timeLeft;
let dataBateraiSiswa = "75";
let dataHambatanSiswa = "-";
let dataStrategiSiswa = "-";
function siapkanKuis(bab) {
babAktif = bab;
qIndex = 0;
goSlide(2);
jalankanKuisEngine();
}
function jalankanKuisEngine() {
const listSoal = databaseKuis[babAktif];
if (qIndex >= listSoal.length) {
if(babAktif === 'bab1') {
goSlide(3);
} else if(babAktif === 'bab2') {
goSlide(4);
} else if(babAktif === 'bab3') {
goSlide(5);
}
return;
}
const dataSoal = listSoal[qIndex];
document.getElementById('kuis-bab-label').textContent = `KUIS AKTIF: ${babAktif.toUpperCase()} - SOAL NO ${qIndex + 1}`;
document.getElementById('quiz-bar').style.width = `${(qIndex / listSoal.length) * 100}%`;
document.getElementById('quiz-feedback').classList.add('hidden');
document.getElementById('quiz-question').textContent = dataSoal.q;
const optContainer = document.getElementById('quiz-options');
optContainer.innerHTML = dataSoal.opts.map((o, i) =>
`<button class="option-btn rounded-xl p-4 border-2 border-slate-200 bg-white font-medium text-slate-800 text-left" onclick="jawabKuis(${i})">${o}</button>`
).join('');
timeLeft = 15;
document.getElementById('timer-text').textContent = timeLeft;
clearInterval(timer);
timer = setInterval(() => {
timeLeft--;
document.getElementById('timer-text').textContent = timeLeft;
if (timeLeft <= 0) { clearInterval(timer); jawabKuis(-1); }
}, 1000);
}
function jawabKuis(pilihanSiswa) {
clearInterval(timer);
totalSoalDilewati++;
const btns = document.querySelectorAll('#quiz-options .option-btn');
btns.forEach(b => b.disabled = true);
const correctAns = databaseKuis[babAktif][qIndex].ans;
const fb = document.getElementById('quiz-feedback');
if (pilihanSiswa === correctAns) {
totalSkorBenar++;
btns[pilihanSiswa].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fb.textContent = '✅ Jawabanmu Benar!';
fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-emerald-100 text-emerald-700 text-sm';
} else if (pilihanSiswa === -1) {
btns[correctAns].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fb.textContent = '⏰ Waktu Habis!';
fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-amber-100 text-amber-700 text-sm';
} else {
btns[pilihanSiswa].classList.add('border-rose-500', 'bg-rose-50', 'text-rose-700', 'font-bold');
btns[correctAns].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fb.textContent = '❌ Masih 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(jalankanKuisEngine, 1500);
}
function simpanRefleksiDanLanjut() {
const radioBaterai = document.querySelector('input[name="baterai-refleksi"]:checked');
if (radioBaterai) {
dataBateraiSiswa = radioBaterai.value;
}
dataHambatanSiswa = document.getElementById('input-hambatan').value.trim() || "Tidak ada hambatan";
dataStrategiSiswa = document.getElementById('input-strategi').value.trim() || "Tidak ada strategi khusus";
document.getElementById('score-text').textContent = `Total Skor: ${totalSkorBenar} / ${totalSoalDilewati}`;
goSlide(6);
}
function restart() {
totalSkorBenar = 0;
totalSoalDilewati = 0;
document.getElementById('nama-siswa').value = '';
document.getElementById('input-hambatan').value = '';
document.getElementById('input-strategi').value = '';
const rbs = document.querySelectorAll('input[name="baterai-refleksi"]');
rbs.forEach(rb => rb.checked = false);
const btn = document.getElementById('lms-send-btn');
btn.disabled = false;
btn.className = "px-6 py-2.5 bg-emerald-500 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm";
goSlide(0);
}
function kirimDataLms() {
const nama = document.getElementById('nama-siswa').value.trim();
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama || "Siswa Anonim",
skor: `${totalSkorBenar} / ${totalSoalDilewati}`,
baterai: dataBateraiSiswa,
hambatan: "Hambatan Siswa: " + dataHambatanSiswa,
strategi: "Strategi Siswa: " + dataStrategiSiswa
}, "*");
document.getElementById('lms-success-alert').classList.remove('hidden');
const btn = document.getElementById('lms-send-btn');
btn.disabled = true;
btn.className = "px-6 py-2.5 bg-slate-300 text-slate-500 rounded-full font-bold text-sm cursor-not-allowed";
}
</script>
</body>
</html>
Kelas 8
Matematika
Relasi dan Fungsi
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Petualangan Relasi dan Fungsi</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: #faf9f6; }
.heading-font { font-family: 'Fraunces', serif; }
.slide { display: none; }
.slide.active { display: flex; }
.match-card { transition: all 0.2s; cursor: pointer; }
.match-card.selected { transform: scale(1.05); box-shadow: 0 0 0 3px #f59e0b; }
.match-card.matched { opacity: 0.5; pointer-events: none; background: #d1fae5 !important; border-color: #34d399 !important; }
.sticky-note { animation: popIn 0.3s ease; }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.nav-btn:disabled { opacity: 0.3; pointer-events: none; }
</style>
</head>
<body class="w-full min-h-screen flex flex-col pb-12">
<!-- Navigation Bar -->
<nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-white/90 backdrop-blur shadow-sm">
<button class="nav-btn p-2 text-md font-bold text-indigo-600 hover:bg-gray-100 rounded-lg" id="prev-btn" disabled>Kembali</button>
<span class="text-sm font-medium text-gray-600" id="slide-counter">1 / 10</span>
<button class="nav-btn p-2 text-md font-bold text-indigo-600 hover:bg-gray-100 rounded-lg" id="next-btn">Lanjut</button>
</nav>
<main class="flex-1 pt-20 pb-4 px-4 w-full max-w-3xl mx-auto">
<!-- SLIDE 1: Welcome -->
<section class="slide active flex-col items-center justify-center text-center gap-6 min-h-[70vh]" data-slide="1">
<img data-template-id="hero-img" class="canva-image w-full max-w-md h-48 object-cover rounded-2xl shadow-lg" loading="lazy">
<h1 data-template-id="welcome-title" class="canva-text heading-font text-3xl md:text-5xl font-bold mt-4 text-slate-800"></h1>
<p data-template-id="welcome-subtitle" class="canva-text text-lg md:text-xl mt-2 opacity-80 text-slate-600"></p>
<button data-template-id="start-btn" class="canva-button mt-6 px-8 py-3 bg-indigo-600 text-white rounded-full text-lg font-bold shadow-lg hover:scale-105 transition-transform" id="start-btn"></button>
</section>
<!-- SLIDE 2: Video & Checkpoint -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="2">
<h2 data-template-id="video-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2>
<div class="w-full aspect-video bg-gray-900 rounded-xl overflow-hidden flex items-center justify-center">
<!-- Jika offline, pasang tag <video> lokal di sini seperti panduan sebelumnya -->
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Pj1Gg0b0P_Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe>
</div>
<div class="bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-xl">
<p data-template-id="checkpoint-label" class="canva-text font-bold text-amber-800 mb-2"></p>
<p data-template-id="checkpoint-question" class="canva-text text-amber-900 mb-2"></p>
<textarea id="checkpoint-answer" class="w-full p-3 border border-amber-200 rounded-lg resize-none h-20 focus:ring-2 focus:ring-amber-400 focus:outline-none bg-white" placeholder="Tulis jawabanmu di sini..."></textarea>
<button class="mt-2 px-4 py-2 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition" onclick="document.getElementById('checkpoint-feedback').classList.remove('hidden')">Kirim Jawaban</button>
<p id="checkpoint-feedback" class="hidden mt-2 text-green-700 font-medium">✅ Keren! Hubungan antara kegemaran dan anak itulah yang menjadi jembatan menuju konsep Relasi.</p>
</div>
</section>
<!-- SLIDE 3: Pendahuluan Konkret -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="3">
<h2 data-template-id="fold-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2>
<img data-template-id="fold-img" class="canva-image w-full max-w-sm h-40 object-cover rounded-xl mx-auto shadow-sm" loading="lazy">
<div class="bg-indigo-50 p-4 rounded-xl">
<p data-template-id="fold-instruction" class="canva-text text-indigo-900"></p>
</div>
<div class="bg-white p-4 rounded-xl border border-slate-200 text-center font-medium">
Contoh Aturan: <span class="text-indigo-600 font-bold">"Golongan Darah Dari"</span><br>
Andi → O | Budi → A | Citra → B
</div>
<label data-template-id="fold-canvas-label" class="canva-text font-medium text-slate-700" for="fold-canvas"></label>
<textarea id="fold-canvas" class="w-full p-4 border-2 border-dashed border-indigo-300 rounded-xl h-24 resize-none focus:ring-2 focus:ring-indigo-400 focus:outline-none bg-white" placeholder="Tulis pendapatmu di sini..."></textarea>
</section>
<!-- SLIDE 4: Learning Objectives -->
<section class="slide flex-col gap-6 items-center justify-center min-h-[70vh]" data-slide="4">
<h2 data-template-id="goals-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2>
<div class="space-y-4 w-full max-w-lg">
<div data-template-id="goal-1" class="canva-card flex items-start gap-3 p-4 rounded-xl bg-white shadow-sm border border-gray-100">
<span class="text-2xl">🎯</span>
<p data-template-id="goal-1-text" class="canva-text text-slate-700"></p>
</div>
<div data-template-id="goal-2" class="canva-card flex items-start gap-3 p-4 rounded-xl bg-white shadow-sm border border-gray-100">
<span class="text-2xl">🤝</span>
<p data-template-id="goal-2-text" class="canva-text text-slate-700"></p>
</div>
<div data-template-id="goal-3" class="canva-card flex items-start gap-3 p-4 rounded-xl bg-white shadow-sm border border-gray-100">
<span class="text-2xl">🧮</span>
<p data-template-id="goal-3-text" class="canva-text text-slate-700"></p>
</div>
</div>
</section>
<!-- SLIDE 5: Core Concept -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="5">
<h2 data-template-id="concept-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2>
<div class="bg-white p-6 rounded-2xl shadow-md border">
<p class="text-3xl font-bold heading-font mb-2 text-center text-indigo-600">Syarat Penting Kategori Fungsi</p>
<p data-template-id="concept-desc" class="canva-text text-gray-600 leading-relaxed"></p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-blue-50 p-4 rounded-xl border border-blue-200">
<p class="font-bold text-lg text-slate-800">Domain (Daerah Asal)</p>
<p class="text-sm text-gray-600 mt-1">Himpunan pertama yang anggotanya harus dipasangkan ke daerah kawan.</p>
</div>
<div class="bg-emerald-50 p-4 rounded-xl border border-emerald-200">
<p class="font-bold text-lg text-slate-800">Kodomain (Daerah Kawan)</p>
<p class="text-sm text-gray-600 mt-1">Himpunan kedua yang menjadi tujuan pasangan dari daerah asal.</p>
</div>
</div>
</section>
<!-- SLIDE 6: Misconception + Poll -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="6">
<h2 data-template-id="trap-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-red-50 border-2 border-red-200 p-4 rounded-xl text-center">
<p class="text-3xl mb-1">❌ Bukan Fungsi (Hanya Relasi)</p>
<p class="font-bold text-red-700 text-sm">Siswa A punya dua makanan favorit, atau Siswa B tidak memilih makanan apapun.</p>
<p data-template-id="trap-wrong-label" class="canva-text text-xs text-red-500 mt-1"></p>
</div>
<div class="bg-green-50 border-2 border-green-200 p-4 rounded-xl text-center">
<p class="text-3xl mb-1">✅ Merupakan Fungsi (Pemetaan)</p>
<p class="font-bold text-green-700 text-sm">Semua siswa memilih tepat SATU makanan favorit. Tidak mendua & tidak jomblo.</p>
<p data-template-id="trap-right-label" class="canva-text text-xs text-green-500 mt-1"></p>
</div>
</div>
<div class="bg-purple-50 border border-purple-200 p-5 rounded-xl mt-2">
<p data-template-id="poll-question" class="canva-text font-bold text-purple-900 mb-3 text-center"></p>
<div class="flex gap-3" id="poll-area">
<button class="flex-1 py-3 bg-white rounded-lg font-bold text-lg border-2 border-purple-300 hover:bg-purple-100 text-purple-700 transition shadow-sm" onclick="answerPoll(true)">A. Fungsi</button>
<button class="flex-1 py-3 bg-white rounded-lg font-bold text-lg border-2 border-purple-300 hover:bg-purple-100 text-purple-700 transition shadow-sm" onclick="answerPoll(false)">B. Hanya Relasi</button>
</div>
<p id="poll-feedback" class="hidden mt-3 font-bold text-center text-lg"></p>
</div>
</section>
<!-- SLIDE 7: Matching Game -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="7">
<h2 data-template-id="match-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2>
<p data-template-id="match-instruction" class="canva-text text-center text-gray-600"></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-lg hidden mt-4"></p>
</section>
<!-- SLIDE 8: Short Answer Quiz -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="8">
<h2 data-template-id="quiz-title" class="canva-text heading-font text-2xl font-bold text-slate-800"></h2>
<div class="space-y-4">
<div class="bg-white p-4 rounded-xl shadow-sm border">
<p class="font-bold text-md mb-2 text-slate-700">1. Diketahui himpunan pasangan berurutan: {(1,a), (2,a), (3,b)}. Apakah ini fungsi? (Ketik: Fungsi / Bukan)</p>
<input type="text" id="q1" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400 focus:outline-none bg-slate-50" placeholder="Jawabanmu...">
</div>
<div class="bg-white p-4 rounded-xl shadow-sm border">
<p class="font-bold text-md mb-2 text-slate-700">2. Diketahui himpunan pasangan berurutan: {(1,a), (1,b), (2,c)}. Apakah ini fungsi? (Ketik: Fungsi / Bukan)</p>
<input type="text" id="q2" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400 focus:outline-none bg-slate-50" placeholder="Jawabanmu...">
</div>
</div>
<button class="mx-auto px-6 py-3 bg-indigo-600 text-white rounded-lg font-bold hover:bg-indigo-700 shadow transition" onclick="checkQuiz()">Periksa Jawaban 🧮</button>
<div id="quiz-results" class="hidden space-y-2"></div>
</section>
<!-- SLIDE 9: Reflection Board -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="9">
<h2 data-template-id="reflect-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2>
<p data-template-id="reflect-prompt" class="canva-text text-center text-gray-600"></p>
<div class="flex gap-2">
<input type="text" id="sticky-input" class="flex-1 p-3 border rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none bg-white" placeholder="Ketik apa yang kamu pahami hari ini...">
<button class="px-5 py-2 bg-yellow-400 text-yellow-900 rounded-lg font-bold hover:bg-yellow-500 transition shadow-sm" onclick="addSticky()">Tempel 📌</button>
</div>
<div id="sticky-board" class="grid grid-cols-2 sm:grid-cols-3 gap-3 min-h-[120px] bg-slate-100/60 p-4 rounded-xl border-2 border-dashed border-slate-200"></div>
</section>
<!-- SLIDE 10: Student Feedback -->
<section class="slide flex-col gap-6 items-center justify-center min-h-[70vh]" data-slide="10">
<img data-template-id="celebrate-img" class="canva-image w-full max-w-sm h-40 object-cover rounded-xl shadow-sm" loading="lazy">
<h2 data-template-id="feedback-title" class="canva-text heading-font text-2xl font-bold text-center text-slate-800"></h2>
<p data-template-id="feedback-prompt" class="canva-text text-center text-gray-600"></p>
<textarea id="feedback-text" class="w-full max-w-lg p-4 border-2 border-dashed border-pink-300 rounded-xl h-24 resize-none focus:ring-2 focus:ring-pink-400 focus:outline-none bg-white" placeholder="Tulis kritik atau pesan seru untuk gurumu..."></textarea>
<button class="px-6 py-3 bg-pink-500 text-white rounded-lg font-bold hover:bg-pink-600 transition shadow animate-pulse" onclick="submitFeedback()">Kirim Masukan 💌</button>
<p id="feedback-thanks" class="hidden text-green-600 font-bold text-lg animate-bounce">Terima kasih banyak atas masukan jujurmu! 🎉</p>
</section>
</main>
<script>
// DATA TEKS KONTEN MATERI RELASI DAN FUNGSI
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('[data-template-id="hero-img"]').src = "https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=600&q=80";
document.querySelector('[data-template-id="welcome-title"]').textContent = "Petualangan Relasi dan Fungsi";
document.querySelector('[data-template-id="welcome-subtitle"]').textContent = "Mari Belajar Membedakan Hubungan Biasa dan Pasangan Setia Matematika!";
document.querySelector('[data-template-id="start-btn"]').textContent = "Mulai Petualangan! 🚀";
document.querySelector('[data-template-id="video-title"]').textContent = "1. Tonton Video Relasi Kehidupan Sehari-hari";
document.querySelector('[data-template-id="checkpoint-label"]').textContent = "💡 CHECKPOINT UTAMA";
document.querySelector('[data-template-id="checkpoint-question"]').textContent = "Misalkan ada sekelompok anak dan sekelompok warna. Hubungan 'warna favorit' dari anak ke warna disebut apa?";
document.querySelector('[data-template-id="fold-title"]').textContent = "2. Aturan Menghubungkan Dua Kelompok";
document.querySelector('[data-template-id="fold-img"]').src = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=500&q=80";
document.querySelector('[data-template-id="fold-instruction"]').textContent = "Relasi adalah aturan yang menghubungkan anggota himpunan A ke himpunan B. Aturannya bisa bebas!";
document.querySelector('[data-template-id="fold-canvas-label"]').textContent = "Jika ada anak bernama Dedi yang tidak punya golongan darah (mustahil), apakah aturan itu sah disebut relasi manusia?";
document.querySelector('[data-template-id="goals-title"]').textContent = "Misi Belajar Kita Hari Ini 🎯";
document.querySelector('[data-template-id="goal-1-text"]').textContent = "Memahami pengertian relasi (hubungan) antara dua kelompok berbeda.";
document.querySelector('[data-template-id="goal-2-text"]').textContent = "Mengetahui syarat mutlak suatu aturan hubungan bisa naik tingkat menjadi Fungsi.";
document.querySelector('[data-template-id="goal-3-text"]').textContent = "Mampu membedakan relasi biasa dan fungsi lewat bentuk pasangan berurutan.";
document.querySelector('[data-template-id="concept-title"]').textContent = "3. Apa Syarat Aturan Fungsi?";
document.querySelector('[data-template-id="concept-desc"]').innerHTML = "Fungsi (Pemetaan) adalah relasi khusus yang mensyaratkan **setiap anggota daerah asal (Domain) harus memilih tepat SATU pasangan** di daerah kawan. Anggota Domain TIDAK BOLEH jomblo dan TIDAK BOLEH mendua!";
document.querySelector('[data-template-id="trap-title"]').textContent = "⚠️ Jebakan Domain Mendua atau Jomblo! ⚠️";
document.querySelector('[data-template-id="trap-wrong-label"]').textContent = "Aturannya gagal jadi Fungsi jika ada anggota Domain yang selingkuh/tidak memilih.";
document.querySelector('[data-template-id="trap-right-label"]').textContent = "Setia! Semua anggota asal memiliki satu pasangan. Daerah kawan bebas dicabangkan.";
document.querySelector('[data-template-id="poll-question"]').textContent = "Kuis Kilat: Jika relasi menghubungkan 'Negara dengan Ibukotanya', apakah aturan ini termasuk fungsi?";
document.querySelector('[data-template-id="match-instruction"]').textContent = "Klik satu kotak diagram relasi, lalu pasangkan dengan jenis kategori yang tepat! (Fungsi atau Hanya Relasi)";
document.querySelector('[data-template-id="quiz-title"]').textContent = "5. Uji Kemampuan Pasangan Berurutan";
document.querySelector('[data-template-id="reflect-title"]').textContent = "6. Mading Refleksi Kelas 📌";
document.querySelector('[data-template-id="reflect-prompt"]').textContent = "Tuliskan satu kata kunci rahasia untuk mengingat syarat sebuah Fungsi agar tidak tertukar lagi dengan relasi biasa!";
document.querySelector('[data-template-id="celebrate-img"]').src = "https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=500&q=80";
document.querySelector('[data-template-id="feedback-title"]').textContent = "Selamat! Semua Misi Pasangan Berhasil Diselesaikan 🎉";
document.querySelector('[data-template-id="feedback-prompt"]').textContent = "Beri tahu gurumu: Apakah konsep Domain, Kodomain, dan Fungsi hari ini sudah jelas dipahami?";
});
// Logika 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));
// Logika Kuis Pilihan Ganda (Poll)
function answerPoll(correct) {
const fb = document.getElementById('poll-feedback');
fb.classList.remove('hidden');
if (correct) {
fb.textContent = '🎉 BENAR! Karena setiap negara hanya punya tepat SATU ibukota (Setia & Tidak Jomblo).';
fb.className = 'mt-3 font-bold text-center text-lg text-green-700 bg-green-50 p-2 rounded-lg';
} else {
fb.textContent = '❌ Masih Salah! Ingat, satu negara tidak mungkin punya 2 ibukota resmi sekaligus. Jadi ini Fungsi.';
fb.className = 'mt-3 font-bold text-center text-lg text-red-600 bg-red-50 p-2 rounded-lg';
}
document.getElementById('poll-area').style.pointerEvents = 'none';
}
// ====================================================================
// LOGIKA GAME MENCATATAN ACAK: RELASI VS FUNGSI (PER SISWA)
// ====================================================================
let matchPairs = [];
let selected = null;
let matchCount = 0;
let gameRound = 1;
// Bank data relasi berpasangan unik
const bankSoalGame = [
{ text: "{(1,x), (2,x), (3,x)}", category: "FUNGSI" },
{ text: "{(1,x), (2,y), (3,z)}", category: "FUNGSI" },
{ text: "{(A,1), (B,2), (C,3)}", category: "FUNGSI" },
{ text: "{(1,x), (1,y), (2,z)}", category: "HANYA RELASI" }, // Angka 1 mendua
{ text: "{(A,1), (A,2), (B,3)}", category: "HANYA RELASI" }, // Huruf A mendua
{ text: "{(1,x), (2,y)}", category: "HANYA RELASI" } // Angka 3 jomblo (jika domain 1,2,3)
];
function generateMatchPairs() {
// Mengacak bank soal
let kocokSoal = [...bankSoalGame].sort(() => Math.random() - 0.5);
// Ambil 2 soal berjenis FUNGSI dan 1 HANYA RELASI (atau sebaliknya)
let dipilih = kocokSoal.slice(0, 2);
const newPairs = [];
dipilih.forEach((item, idx) => {
const letterLeft = String.fromCharCode(97 + idx); // a, b
const letterRight = String.fromCharCode(65 + idx); // A, B
newPairs.push(
{ id: letterLeft, text: item.text, match: letterRight },
{ id: letterRight, text: `Tipe: ${item.category}`, match: letterLeft }
);
});
return newPairs;
}
function initMatch() {
matchPairs = generateMatchPairs();
const board = document.getElementById('match-board');
board.innerHTML = '';
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-2 border-gray-200 rounded-xl font-bold text-sm text-center shadow-sm hover:border-indigo-400';
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 = `4. Game Pasangan Kilat ⚡ (Tantangan Ke-${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++;
// Karena kita hanya memunculkan 2 pasang soal per ronde agar ruang muat seimbang
if (matchCount === 2) {
const fb = document.getElementById('match-feedback');
fb.textContent = `🏆 Keren! Kamu berhasil melewati Tantangan Ke-${gameRound}! Mengacak relasi baru...`;
fb.className = 'text-center font-bold text-md text-green-700 mt-4 bg-green-50 p-2 rounded-lg';
fb.classList.remove('hidden');
setTimeout(() => {
gameRound++;
resetMatch();
}, 2000);
}
} else {
selected.classList.remove('selected');
card.classList.add('selected');
}
selected = card.classList.contains('matched') ? null : card;
}
function resetMatch() {
selected = null;
matchCount = 0;
document.getElementById('match-feedback').classList.add('hidden');
initMatch();
}
initMatch();
// Logika Evaluasi Hasil Kuis Isian Singkat
function checkQuiz() {
const r = document.getElementById('quiz-results');
r.innerHTML = '';
r.classList.remove('hidden');
const a1 = document.getElementById('q1').value.trim().toLowerCase();
const a2 = document.getElementById('q2').value.trim().toLowerCase();
const cek1 = (a1 === 'fungsi');
const cek2 = (a2 === 'bukan' || a2 === 'bukan fungsi');
r.innerHTML = `
<div class="p-4 bg-slate-50 rounded-xl space-y-2 border mt-4 text-sm">
<p class="${cek1?'text-green-700':'text-red-600'} font-bold">${cek1?'✅ Benar!':'❌ Kurang Tepat!'} Soal 1 adalah FUNGSI karena daerah depan (1, 2, 3) tidak mendua.</p>
<p class="${cek2?'text-green-700':'text-red-600'} font-bold">${cek2?'✅ Benar!':'❌ Kurang Tepat!'} Soal 2 BUKAN fungsi karena angka 1 selingkuh/muncul dua kali.</p>
</div>
`;
}
// Logika Menempel Sticky Notes di Mading
const colors = ['bg-yellow-200','bg-pink-200','bg-blue-200','bg-green-200','bg-purple-200'];
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 border border-black/5 text-sm font-bold text-slate-800 ${colors[Math.floor(Math.random()*colors.length)]}`;
note.textContent = input.value.trim();
document.getElementById('sticky-board').appendChild(note);
input.value = '';
}
// Logika Kirim Feedback Evaluasi Masukan Guru
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 |