Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 8
Matematika
Bilangan Berpangkat 2 : Bentuk Baku dan Akar
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Operasi, Bentuk Baku & Akar 🚀</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
/* Nav Buttons */
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="sigma" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Eksplorasi Lanjutan (Part 2)</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-3xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kelas 8 SMP
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Operasi, Bentuk Baku & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Bentuk Akar</span> 🌳
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-pink-500"></i> Tujuan Pembelajaran Kita:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Dapat <span class="text-emerald-600">menerapkan operasi</span> penjumlahan, pengurangan, perkalian & pembagian pangkat.</li>
<li>Dapat <span class="text-emerald-600">menentukan bentuk baku</span> (notasi ilmiah) dari suatu bilangan.</li>
<li>Dapat <span class="text-emerald-600">mengevaluasi konsep bilangan bentuk akar</span> beserta contohnya.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Lanjutkan petualangan matematikamu! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Operasi Bilangan Berpangkat -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Operasi Pangkat: Hati-Hati! ⚠️</h2>
</div>
<div class="bg-white p-8 rounded-[2rem] shadow-sm border-2 border-slate-200 mt-4 space-y-6">
<p class="text-xl font-bold text-slate-700">Untuk <b>Penjumlahan</b> dan <b>Pengurangan</b>, kita <span class="bg-rose-200 px-2 rounded text-rose-900">TIDAK BISA</span> langsung menjumlahkan pangkatnya!</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-rose-50 p-5 rounded-2xl border-2 border-rose-200 relative overflow-hidden">
<div class="absolute top-0 right-0 bg-rose-500 text-white px-3 py-1 font-black rounded-bl-xl">SALAH ❌</div>
<h4 class="font-black text-rose-800 mb-2 mt-4">Jangan Lakukan Ini:</h4>
<p class="text-xl math-box text-slate-500 line-through">2<sup>3</sup> + 2<sup>2</sup> = 2<sup>5</sup></p>
<p class="text-sm font-bold text-rose-600 mt-2">Pangkat hanya ditambah jika dikali (×), bukan ditambah (+).</p>
</div>
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 relative overflow-hidden">
<div class="absolute top-0 right-0 bg-emerald-500 text-white px-3 py-1 font-black rounded-bl-xl">BENAR ✅</div>
<h4 class="font-black text-emerald-800 mb-2 mt-4">Hitung Dulu Nilainya:</h4>
<p class="text-xl math-box text-slate-800">2<sup>3</sup> + 2<sup>2</sup> = 8 + 4 = <span class="text-emerald-700 text-3xl">12</span></p>
<p class="text-sm font-bold text-emerald-700 mt-2">Hitung hasil masing-masing, baru dijumlahkan/dikurangkan.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Operasi) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-emerald-600">Operasi Hitung</span> 🎮</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Hitung nilainya dulu, jangan sampai terjebak!</p>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Berapakah hasil akhir dari:</p>
<div id="q1-text" class="text-5xl math-box text-emerald-700 mb-8">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Materi Notasi Ilmiah -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Bentuk Baku (Notasi Ilmiah) 🔬</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Cara singkat menulis angka yang super besar atau super kecil!</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm mt-4">
<div class="bg-blue-50 p-6 rounded-xl text-center mb-6">
<p class="text-3xl math-box text-blue-900 mb-2">a × 10<sup>n</sup></p>
<p class="font-bold text-slate-600">Syarat Penting: Angka <b>a</b> harus mulai dari 1 dan kurang dari 10 <br><span class="text-blue-600">(1 ≤ a < 10)</span></p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="p-4 border-2 border-slate-100 rounded-2xl">
<h4 class="font-black text-slate-700 mb-2">Angka Sangat Besar (Pangkat Positif)</h4>
<p class="text-lg text-slate-600">Jarak bumi ke matahari: 150.000.000 km</p>
<div class="flex items-center gap-3 mt-2">
<span class="text-2xl">➡️</span>
<p class="text-2xl math-box text-blue-700 bg-blue-50 px-3 py-1 rounded-lg">1,5 × 10<sup>8</sup></p>
</div>
</div>
<div class="p-4 border-2 border-slate-100 rounded-2xl">
<h4 class="font-black text-slate-700 mb-2">Angka Sangat Kecil (Pangkat Negatif)</h4>
<p class="text-lg text-slate-600">Ukuran bakteri: 0,0000032 meter</p>
<div class="flex items-center gap-3 mt-2">
<span class="text-2xl">➡️</span>
<p class="text-2xl math-box text-pink-700 bg-pink-50 px-3 py-1 rounded-lg">3,2 × 10<sup>-6</sup></p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Notasi Ilmiah) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-blue-600">Notasi Ilmiah</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Ubah ke Bentuk Baku (Notasi Ilmiah):</p>
<div id="q2-text" class="text-5xl math-box text-blue-700 mb-8 font-black tracking-wider">?</div>
<div id="q2-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q2-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: Materi Bentuk Akar -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Mengenal Bentuk Akar 🌳</h2>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm">
<h4 class="font-black text-teal-800 text-2xl mb-4">Apa itu Akar?</h4>
<p class="text-lg font-bold text-slate-700 mb-4">Akar adalah <span class="bg-teal-100 px-2 rounded">kebalikan dari pangkat</span>.</p>
<div class="bg-teal-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-teal-900">√<span class="border-t-2 border-teal-900 pt-1">25</span> = 5</p>
<p class="text-sm font-bold text-slate-500 mt-1">karena 5<sup>2</sup> = 25</p>
</div>
<p class="text-slate-600 font-bold">Contoh lain: √81 = 9, √100 = 10.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm relative">
<h4 class="font-black text-amber-800 text-2xl mb-4">Hati-Hati! 🕵️♂️</h4>
<p class="text-lg font-bold text-slate-700 mb-4">Tidak semua yang ada tanda akarnya disebut "Bilangan Bentuk Akar".</p>
<ul class="space-y-4 font-bold">
<li class="flex gap-3">
<span class="text-xl">✅</span>
<div><span class="math-box bg-slate-100 px-1">√3</span> atau <span class="math-box bg-slate-100 px-1">√7</span> adalah <b>Bentuk Akar</b> (karena hasilnya desimal tak berujung).</div>
</li>
<li class="flex gap-3">
<span class="text-xl">❌</span>
<div><span class="math-box bg-slate-100 px-1">√4</span> atau <span class="math-box bg-slate-100 px-1">√9</span> <b>BUKAN</b> Bentuk Akar (karena hasilnya bilangan bulat 2 dan 3).</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Akar) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-teal-600">Evaluasi Akar</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-teal-100 border-2 border-teal-400 px-6 py-2 rounded-full">
<span class="font-black text-teal-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Hitunglah nilai dari ekspresi berikut:</p>
<div id="q3-text" class="text-5xl math-box text-teal-700 mb-8">?</div>
<div id="q3-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-teal-600 text-white rounded-2xl font-black text-xl hover:bg-teal-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: Kuis Kelompok (Battle 3 Siswa) -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">⚔️ BATTLE KUIS KELOMPOK ⚔️</h2>
<p class="text-xl font-bold text-slate-600 mt-2">Ayo, 3 siswa perwakilan maju! Siapa yang paling cepat & tepat?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<!-- P1: Operasi -->
<div class="bg-white p-6 rounded-3xl border-4 border-rose-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-rose-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 1 (Operasi)</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q1" class="text-4xl math-box text-rose-800 mb-6 font-bold leading-relaxed"></p>
<div id="battle-ans1" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(1)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
<!-- P2: Baku -->
<div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-blue-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 2 (Notasi)</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q2" class="text-3xl math-box text-blue-800 mb-6 font-bold leading-relaxed tracking-wider"></p>
<div id="battle-ans2" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(2)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
<!-- P3: Akar -->
<div class="bg-white p-6 rounded-3xl border-4 border-amber-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-amber-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 3 (Akar)</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q3" class="text-4xl math-box text-amber-800 mb-6 font-bold leading-relaxed"></p>
<div id="battle-ans3" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(3)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
</div>
<div class="text-center mt-6">
<button onclick="generateBattle()" class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xl rounded-full shadow-lg transition transform hover:scale-105">🔄 Acak Soal Battle Baru</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang materi Bentuk Baku dan Akar hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">🤩</div>
<h3 class="font-black text-xl text-slate-700">Paham Banget!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan Paham</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">😵💫</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Ceritakan singkat, apa yang membuatmu bingung atau tertarik?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-emerald-400 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Latihan Soal Evaluasi Akhir</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal di bawah ini untuk melihat hasil akhirmu.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-md text-left">
<div class="flex justify-between items-center mb-4">
<span class="font-black text-emerald-700 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 math-box mb-6 leading-relaxed"></p>
<div id="eval-options" class="space-y-3">
<!-- Auto generated -->
</div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Hebat! Evaluasi Selesai.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-green-600 text-5xl bg-green-100 px-4 py-1 rounded-xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left">
<p class="font-bold text-slate-500 text-center mb-4">Silakan isi data untuk direkam ke sistem Bapak/Ibu Guru.</p>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Persentase Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Paham Semua</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Perlu Belajar Lagi</option>
<option value="25">25% - Banyak Bingungnya</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Utils
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// ==========================================
// KUIS AUTO 1: Operasi (Penjumlahan/Pengurangan)
// ==========================================
let countQ1 = 0;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let isPlus = Math.random() > 0.5;
let base = Math.floor(Math.random() * 4) + 2; // 2 to 5
let exp1 = Math.floor(Math.random() * 3) + 1; // 1 to 3
let exp2 = Math.floor(Math.random() * 3) + 1;
// To avoid negative results for simplicity
if (!isPlus && Math.pow(base, exp1) < Math.pow(base, exp2)) {
let temp = exp1; exp1 = exp2; exp2 = temp;
}
let correctAns = isPlus ? Math.pow(base, exp1) + Math.pow(base, exp2) : Math.pow(base, exp1) - Math.pow(base, exp2);
document.getElementById('q1-text').innerHTML = `${base}<sup>${exp1}</sup> ${isPlus ? '+' : '-'} ${base}<sup>${exp2}</sup> = ... ?`;
let options = [correctAns];
while (options.length < 4) {
let wrong;
if(Math.random() > 0.5) {
wrong = Math.pow(base, isPlus ? exp1 + exp2 : Math.max(exp1 - exp2, 0)); // Jebakan sifat kali/bagi
} else {
wrong = correctAns + (Math.floor(Math.random() * 10) + 1) * (Math.random() > 0.5 ? 1 : -1);
}
if (wrong !== correctAns && wrong >= 0 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, ${opt === correctAns})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 transition">${opt}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Benar! Kamu tidak terkecoh.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Ingat, tambah/kurang harus dihitung dulu nilainya.";
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// ==========================================
// KUIS AUTO 2: Notasi Ilmiah
// ==========================================
let countQ2 = 0;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
let isBig = Math.random() > 0.5;
let a = Math.floor(Math.random() * 8) + 2; // 2-9
let b = Math.floor(Math.random() * 9) + 1; // 1-9
let exp = Math.floor(Math.random() * 4) + 4; // 4-7
let qText, correctHtml, options;
if (isBig) {
let zeros = "0".repeat(exp - 1);
qText = `${a}${b}${zeros}`;
// format with dots for readability: e.g. 45000 -> 45.000
qText = Number(qText).toLocaleString('id-ID');
correctHtml = `${a},${b} × 10<sup>${exp}</sup>`;
options = [
{ html: correctHtml, isC: true },
{ html: `${a},${b} × 10<sup>${exp - 1}</sup>`, isC: false },
{ html: `${a}${b} × 10<sup>${exp - 1}</sup>`, isC: false }, // tidak baku (a >= 10)
{ html: `${a},${b} × 10<sup>-${exp}</sup>`, isC: false }
];
} else {
let zeros = "0".repeat(exp - 1);
qText = `0,${zeros}${a}${b}`;
correctHtml = `${a},${b} × 10<sup>-${exp}</sup>`;
options = [
{ html: correctHtml, isC: true },
{ html: `${a},${b} × 10<sup>${exp}</sup>`, isC: false },
{ html: `0,${a}${b} × 10<sup>-${exp - 1}</sup>`, isC: false }, // tidak baku
{ html: `${a},${b} × 10<sup>-${exp - 1}</sup>`, isC: false }
];
}
document.getElementById('q2-text').innerHTML = qText;
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ2(this, ${opt.isC})" class="guess-btn w-full py-5 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt.html}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Cerdas! Notasi ilmiah memang begitu aturannya.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Cek letak koma dan jumlah pangkatnya ya.";
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// ==========================================
// KUIS AUTO 3: Akar
// ==========================================
let countQ3 = 0;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
let perfectSquares = [4, 9, 16, 25, 36, 49, 64, 81, 100];
let n1 = perfectSquares[Math.floor(Math.random() * perfectSquares.length)];
let n2 = perfectSquares[Math.floor(Math.random() * perfectSquares.length)];
let isPlus = Math.random() > 0.5;
// Avoid negative result
if(!isPlus && n1 < n2) { let temp = n1; n1 = n2; n2 = temp; }
let correctAns = isPlus ? Math.sqrt(n1) + Math.sqrt(n2) : Math.sqrt(n1) - Math.sqrt(n2);
document.getElementById('q3-text').innerHTML = `√<span class="border-t-2 border-teal-700 pt-1">${n1}</span> ${isPlus?'+':'-'} √<span class="border-t-2 border-teal-700 pt-1">${n2}</span> = ... ?`;
let options = [correctAns];
while (options.length < 4) {
// Trap: what if they just add/sub the inside numbers and then root? Or just add/sub inside numbers?
let wrong1 = isPlus ? n1 + n2 : n1 - n2;
let wrong2 = correctAns + Math.floor(Math.random()*5) + 1;
let wrong3 = correctAns - Math.floor(Math.random()*3) - 1;
let w = [wrong1, wrong2, wrong3][Math.floor(Math.random()*3)];
if (w !== correctAns && w >= 0 && !options.includes(w)) {
options.push(w);
}
}
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ3(this, ${opt === correctAns})" class="guess-btn w-full py-5 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt}</button>`;
});
document.getElementById('q3-options').innerHTML = optHtml;
}
function checkQ3(btn, isCorrect) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Benar! Gampang kan mencari akarnya?";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Hitung akarnya satu-satu dulu baru dijumlah/dikurang.";
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3();
// ==========================================
// KUIS BATTLE KELOMPOK
// ==========================================
function generateBattle() {
// P1: Operasi (e.g. 2^3 + 2^2)
let base = Math.floor(Math.random()*3)+2;
let m1 = Math.floor(Math.random()*3)+1;
let m2 = Math.floor(Math.random()*2)+1;
let ans1 = Math.pow(base, m1) + Math.pow(base, m2);
document.getElementById(`battle-q1`).innerHTML = `${base}<sup>${m1}</sup> + ${base}<sup>${m2}</sup>`;
document.getElementById(`battle-ans1`).innerHTML = `${ans1}`;
document.getElementById(`battle-ans1`).classList.add('hidden');
// P2: Baku (e.g. 35000 -> 3,5 x 10^4)
let a2 = Math.floor(Math.random()*8)+2;
let b2 = Math.floor(Math.random()*9)+1;
let e2 = Math.floor(Math.random()*3)+3;
let str2 = a2 + "" + b2 + "0".repeat(e2-1);
document.getElementById(`battle-q2`).innerHTML = Number(str2).toLocaleString('id-ID');
document.getElementById(`battle-ans2`).innerHTML = `${a2},${b2} × 10<sup>${e2}</sup>`;
document.getElementById(`battle-ans2`).classList.add('hidden');
// P3: Akar (e.g. sqrt(100) - sqrt(36))
let pSqs = [16, 25, 36, 49, 64, 81, 100];
let sq1 = pSqs[Math.floor(Math.random()*pSqs.length)];
let sq2 = pSqs[Math.floor(Math.random()*3)]; // pick smaller one for sub
document.getElementById(`battle-q3`).innerHTML = `√<span class="border-t-2 border-amber-800 pt-1">${sq1}</span> - √<span class="border-t-2 border-amber-800 pt-1">${sq2}</span>`;
document.getElementById(`battle-ans3`).innerHTML = `${Math.sqrt(sq1) - Math.sqrt(sq2)}`;
document.getElementById(`battle-ans3`).classList.add('hidden');
}
function revealBattle(i) {
document.getElementById(`battle-ans${i}`).classList.remove('hidden');
}
generateBattle();
// ==========================================
// REFLEKSI
// ==========================================
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham Banget')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// ==========================================
// LATIHAN SOAL (EVALUASI) & LMS
// ==========================================
const evaluasiBank = [
{ q: "Hasil dari 2<sup>4</sup> + 2<sup>2</sup> adalah...", options: ["20", "64", "16", "32"], a: 0 },
{ q: "Bentuk baku dari bilangan 125.000.000 adalah...", options: ["1,25 × 10<sup>6</sup>", "1,25 × 10<sup>8</sup>", "12,5 × 10<sup>7</sup>", "0,125 × 10<sup>9</sup>"], a: 1 },
{ q: "Bentuk baku dari bilangan 0,000056 adalah...", options: ["5,6 × 10<sup>-4</sup>", "5,6 × 10<sup>5</sup>", "56 × 10<sup>-6</sup>", "5,6 × 10<sup>-5</sup>"], a: 3 },
{ q: "Hasil dari √<span class='border-t-2 border-slate-800 pt-1'>144</span> - √<span class='border-t-2 border-slate-800 pt-1'>36</span> adalah...", options: ["6", "√108", "8", "12"], a: 0 },
{ q: "Manakah di bawah ini yang <b>BUKAN</b> merupakan bilangan bentuk akar?", options: ["√7", "√15", "√49", "√20"], a: 2 }
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-xl math-box hover:bg-emerald-50 hover:border-emerald-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 1500);
}
loadEvaluasi();
// Integrasi LMS
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Sudah cukup mengerti.";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi: " + refleksi,
strategi: "Evaluasi Part 2: Operasi, Bentuk Baku & Akar"
}, "*");
} else {
alert("Simulasi berhasil! Jika ini dibuka di dalam LMS, nilaimu otomatis terekam.\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Bilangan Berpangkat 1
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Bilangan Berpangkat 🚀</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f8fafc;
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
/* Nav Buttons */
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-indigo-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-indigo-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="calculator" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-indigo-800 uppercase tracking-widest">Matematika - Bilangan Berpangkat</span>
<span id="progress-text" class="text-xs font-black text-white bg-indigo-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-blue-400 via-indigo-500 to-purple-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-3xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-indigo-100 text-indigo-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kelas 8 SMP
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Eksplorasi <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Bilangan Berpangkat</span> 🔢
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-indigo-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-pink-500"></i> Tujuan Pembelajaran Kita Hari Ini:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-indigo-600">menjelaskan konsep bilangan berpangkat bulat</span> dengan memberikan contoh yang sesuai.</li>
<li>Peserta didik dapat <span class="text-indigo-600">menganalisis sifat-sifat bilangan berpangkat bulat</span> berdasarkan aturan yang berlaku.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap belajar dengan seru? Yuk, kita mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Dasar -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Konsep Dasar Berpangkat 🧠</h2>
</div>
<div class="bg-white p-8 rounded-[2rem] shadow-sm border-2 border-slate-200 mt-4 space-y-6">
<p class="text-xl font-bold text-slate-700">Bilangan berpangkat adalah <span class="bg-yellow-200 px-2 rounded">perkalian berulang</span> dari suatu bilangan yang sama.</p>
<div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-200 text-center">
<p class="text-4xl math-box text-indigo-700">a<sup>n</sup> = a × a × a × ... × a</p>
<p class="text-lg font-bold text-slate-500 mt-2">(sebanyak n kali)</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-blue-50 p-5 rounded-2xl border-2 border-blue-200">
<h4 class="font-black text-blue-800 mb-2">Contoh Pangkat Positif</h4>
<p class="text-2xl math-box text-slate-800">2<sup>3</sup> = 2 × 2 × 2 = 8</p>
<p class="text-2xl math-box text-slate-800 mt-2">5<sup>2</sup> = 5 × 5 = 25</p>
</div>
<div class="bg-pink-50 p-5 rounded-2xl border-2 border-pink-200">
<h4 class="font-black text-pink-800 mb-2">Sifat Spesial (Pangkat Nol)</h4>
<p class="text-lg font-bold text-slate-700">Semua bilangan (kecuali 0) jika dipangkatkan 0 hasilnya 1.</p>
<p class="text-3xl math-box text-slate-800 mt-2">100<sup>0</sup> = 1</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Konsep) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-indigo-600">Konsep Dasar</span> 🎮</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kerjakan sepuasmu! Soal akan terus muncul otomatis.</p>
<div class="mt-4 inline-flex items-center gap-3 bg-indigo-100 border-2 border-indigo-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-indigo-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Berapakah hasil dari:</p>
<div id="q1-text" class="text-6xl math-box text-indigo-700 mb-8">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<!-- Pilihan jawaban di-generate via JS -->
</div>
<div id="q1-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-indigo-600 text-white rounded-2xl font-black text-xl hover:bg-indigo-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Materi Sifat Perkalian & Pembagian -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Sifat 1 & 2: Kali & Bagi ✖️➗</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Perhatikan pola aturannya. Sangat mudah lho!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<!-- Sifat 1 -->
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm">
<div class="bg-blue-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Sifat Perkalian</div>
<p class="text-lg font-bold text-slate-700 mb-2">Jika basisnya sama, pangkatnya <span class="text-blue-600">DITAMBAH</span>.</p>
<div class="bg-blue-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-blue-900">a<sup>m</sup> × a<sup>n</sup> = a<sup>m+n</sup></p>
</div>
<p class="font-bold text-slate-600">Contoh:</p>
<p class="text-xl math-box text-slate-800">2<sup>3</sup> × 2<sup>4</sup> = 2<sup>3+4</sup> = 2<sup>7</sup></p>
</div>
<!-- Sifat 2 -->
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-sm">
<div class="bg-pink-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Sifat Pembagian</div>
<p class="text-lg font-bold text-slate-700 mb-2">Jika basisnya sama, pangkatnya <span class="text-pink-600">DIKURANGI</span>.</p>
<div class="bg-pink-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-pink-900">a<sup>m</sup> ÷ a<sup>n</sup> = a<sup>m-n</sup></p>
</div>
<p class="font-bold text-slate-600">Contoh:</p>
<p class="text-xl math-box text-slate-800">5<sup>6</sup> ÷ 5<sup>2</sup> = 5<sup>6-2</sup> = 5<sup>4</sup></p>
</div>
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Sifat 1 & 2) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-blue-600">Sifat Kali & Bagi</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Sederhanakan bentuk berikut:</p>
<div id="q2-text" class="text-5xl math-box text-blue-700 mb-8">?</div>
<div id="q2-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q2-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: Materi Sifat Pangkat Dipangkatkan & Pangkat Negatif -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Sifat 3 & 4: Pangkat Ekstra 🚀</h2>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<!-- Sifat 3 -->
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm">
<div class="bg-emerald-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Pangkat Dipangkatkan</div>
<p class="text-lg font-bold text-slate-700 mb-2">Pangkatnya tinggal <span class="text-emerald-600">DIKALI</span>.</p>
<div class="bg-emerald-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-emerald-900">(a<sup>m</sup>)<sup>n</sup> = a<sup>m × n</sup></p>
</div>
<p class="font-bold text-slate-600">Contoh:</p>
<p class="text-xl math-box text-slate-800">(3<sup>2</sup>)<sup>4</sup> = 3<sup>2 × 4</sup> = 3<sup>8</sup></p>
</div>
<!-- Sifat 4 -->
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm">
<div class="bg-amber-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Pangkat Negatif</div>
<p class="text-lg font-bold text-slate-700 mb-2">Ubah posisi (atas ke bawah) biar pangkat jadi <span class="text-amber-600">POSITIF</span>.</p>
<div class="bg-amber-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-amber-900">a<sup>-n</sup> = 1 / a<sup>n</sup></p>
</div>
<p class="font-bold text-slate-600">Contoh:</p>
<p class="text-xl math-box text-slate-800">2<sup>-3</sup> = 1 / 2<sup>3</sup> = 1/8</p>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Sifat 3 & 4) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-emerald-600">Pangkat Ekstra</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Bentuk lain / hasil dari:</p>
<div id="q3-text" class="text-5xl math-box text-emerald-700 mb-8">?</div>
<div id="q3-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: Kuis Kelompok (Battle 3 Siswa) -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">⚔️ BATTLE KUIS KELOMPOK ⚔️</h2>
<p class="text-xl font-bold text-slate-600 mt-2">Ayo, 3 siswa perwakilan maju ke depan layar! Siapa yang paling cepat & tepat?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<!-- Kolom 1 -->
<div class="bg-white p-6 rounded-3xl border-4 border-rose-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-rose-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 1</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q1" class="text-4xl math-box text-rose-800 mb-6 font-bold"></p>
<div id="battle-ans1" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(1)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
<!-- Kolom 2 -->
<div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-blue-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 2</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q2" class="text-4xl math-box text-blue-800 mb-6 font-bold"></p>
<div id="battle-ans2" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(2)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
<!-- Kolom 3 -->
<div class="bg-white p-6 rounded-3xl border-4 border-amber-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-amber-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 3</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q3" class="text-4xl math-box text-amber-800 mb-6 font-bold"></p>
<div id="battle-ans3" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(3)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
</div>
<div class="text-center mt-6">
<button onclick="generateBattle()" class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-black text-xl rounded-full shadow-lg transition transform hover:scale-105">🔄 Acak Soal Battle Baru</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu belajar sifat eksponen hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">🤩</div>
<h3 class="font-black text-xl text-slate-700">Paham Banget!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan Paham</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">😵💫</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Apa bagian yang menurutmu paling menantang?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-indigo-400 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Latihan Soal Evaluasi</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal di bawah ini untuk melihat hasil akhirmu.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-indigo-200 shadow-md text-left">
<div class="flex justify-between items-center mb-4">
<span class="font-black text-indigo-600 bg-indigo-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 math-box mb-6 leading-relaxed"></p>
<div id="eval-options" class="space-y-3">
<!-- Auto generated -->
</div>
</div>
</div>
<!-- Halaman Kirim Nilai (Tampil Setelah Evaluasi Selesai) -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-indigo-900 mb-2">Hebat! Evaluasi Selesai.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-green-600 text-5xl bg-green-100 px-4 py-1 rounded-xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-indigo-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left">
<p class="font-bold text-slate-500 text-center mb-4">Silakan isi data untuk dikirim ke sistem Bapak/Ibu Guru.</p>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-indigo-500 bg-slate-50">
</div>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Persentase Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-indigo-500">
<option value="100">100% - Paham Semua</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Perlu Belajar Lagi</option>
<option value="25">25% - Banyak Bingungnya</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-indigo-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-indigo-700 shadow-[0_4px_0px_#4338ca]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
// Navigasi Slide Basic
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// ==========================================
// UTILS: Acak Array
// ==========================================
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// ==========================================
// KUIS AUTO 1: Konsep Dasar
// ==========================================
let countQ1 = 0;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let bases = [2, 3, 4, 5, 10];
let base = bases[Math.floor(Math.random() * bases.length)];
let exp = Math.floor(Math.random() * 4) + 1; // 1 to 4
// Variasi sifat pangkat nol
if (Math.random() > 0.8) exp = 0;
let correctAns = Math.pow(base, exp);
document.getElementById('q1-text').innerHTML = `${base}<sup>${exp}</sup> = ... ?`;
let options = [correctAns];
while (options.length < 4) {
let wrong = correctAns + Math.floor(Math.random() * 20) - 10;
if (wrong === correctAns || wrong < 0 || options.includes(wrong)) {
wrong = base * exp; // Kesalahan umum siswa
if(wrong === correctAns) wrong += 5;
}
if (!options.includes(wrong)) options.push(wrong);
}
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, ${opt === correctAns})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 transition">${opt}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Benar! Hebat sekali.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Kurang tepat, ayo coba lagi!";
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1(); // Init slide 3
// ==========================================
// KUIS AUTO 2: Sifat Kali & Bagi
// ==========================================
let countQ2 = 0;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
let isKali = Math.random() > 0.5;
let base = ["a", "p", "x", "y", "m"][Math.floor(Math.random() * 5)];
let m = Math.floor(Math.random() * 5) + 3;
let n = Math.floor(Math.random() * 4) + 1;
let qText, correctAnsExp;
if (isKali) {
qText = `${base}<sup>${m}</sup> × ${base}<sup>${n}</sup>`;
correctAnsExp = m + n;
} else {
qText = `${base}<sup>${m}</sup> ÷ ${base}<sup>${n}</sup>`;
correctAnsExp = m - n;
}
document.getElementById('q2-text').innerHTML = `${qText} = ... ?`;
let correctHtml = `${base}<sup>${correctAnsExp}</sup>`;
let options = [
{ exp: correctAnsExp, isC: true },
{ exp: isKali ? m - n : m + n, isC: false }, // kebalik sifat
{ exp: m * n, isC: false }, // dikali pangkatnya
{ exp: isKali ? m + n + 1 : m - n - 1, isC: false }
];
// Remove duplicates logic (simplified)
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ2(this, ${opt.isC})" class="guess-btn w-full py-6 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-3xl border-b-4 border-slate-300 math-box transition">${base}<sup>${opt.exp}</sup></button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Mantap! Ingat sifatnya ya.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Coba dicek lagi aturannya (Tambah atau Kurang).";
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2(); // Init
// ==========================================
// KUIS AUTO 3: Pangkat Ekstra
// ==========================================
let countQ3 = 0;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
let isPangkatDipangkat = Math.random() > 0.5;
let qText, correctHtml, options;
if (isPangkatDipangkat) {
let base = ["k", "x", "p"][Math.floor(Math.random() * 3)];
let m = Math.floor(Math.random() * 3) + 2;
let n = Math.floor(Math.random() * 3) + 2;
qText = `(${base}<sup>${m}</sup>)<sup>${n}</sup>`;
correctHtml = `${base}<sup>${m*n}</sup>`;
options = [
{ html: correctHtml, isC: true },
{ html: `${base}<sup>${m+n}</sup>`, isC: false }, // siswa malah menjumlah
{ html: `${base}<sup>${Math.pow(m,n)}</sup>`, isC: false },
{ html: `${base}<sup>${m*n + 1}</sup>`, isC: false }
];
} else {
// Pangkat Negatif
let base = Math.floor(Math.random() * 4) + 2;
let n = Math.floor(Math.random() * 3) + 2;
qText = `${base}<sup>-${n}</sup>`;
correctHtml = `1 / ${base}<sup>${n}</sup>`;
options = [
{ html: correctHtml, isC: true },
{ html: `-${base}<sup>${n}</sup>`, isC: false }, // siswa memindahkan min ke depan
{ html: `1 / ${base * n}`, isC: false },
{ html: `${base}<sup>${n}</sup>`, isC: false }
];
}
document.getElementById('q3-text').innerHTML = `${qText} = ... ?`;
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ3(this, ${opt.isC})" class="guess-btn w-full py-6 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt.html}</button>`;
});
document.getElementById('q3-options').innerHTML = optHtml;
}
function checkQ3(btn, isCorrect) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Luar Biasa! Kamu makin jago.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Jangan kecoh, ingat aturannya ya!";
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3(); // Init
// ==========================================
// KUIS BATTLE KELOMPOK
// ==========================================
let battleAnswers = [];
function generateBattle() {
battleAnswers = [];
for(let i=1; i<=3; i++) {
let base = Math.floor(Math.random() * 4) + 2; // 2 to 5
let m = Math.floor(Math.random() * 3) + 2;
let n = Math.floor(Math.random() * 2) + 1;
let tipe = Math.floor(Math.random() * 3); // 0: kali, 1: bagi, 2: pangkatin
let qText, ansExp;
if(tipe === 0) {
qText = `${base}<sup>${m}</sup> × ${base}<sup>${n}</sup>`;
ansExp = m+n;
} else if(tipe === 1) {
qText = `${base}<sup>${m+n}</sup> ÷ ${base}<sup>${m}</sup>`;
ansExp = n;
} else {
qText = `(${base}<sup>${m}</sup>)<sup>${n}</sup>`;
ansExp = m*n;
}
document.getElementById(`battle-q${i}`).innerHTML = qText;
document.getElementById(`battle-ans${i}`).innerHTML = `${base}<sup>${ansExp}</sup>`;
document.getElementById(`battle-ans${i}`).classList.add('hidden');
}
}
function revealBattle(i) {
document.getElementById(`battle-ans${i}`).classList.remove('hidden');
}
generateBattle();
// ==========================================
// REFLEKSI
// ==========================================
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham Banget')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// ==========================================
// LATIHAN SOAL (EVALUASI) & LMS
// ==========================================
const evaluasiBank = [
{ q: "Hasil dari 3<sup>4</sup> adalah...", options: ["12", "81", "27", "64"], a: 1 },
{ q: "Bentuk sederhana dari 2<sup>3</sup> × 2<sup>5</sup> adalah...", options: ["2<sup>15</sup>", "4<sup>8</sup>", "2<sup>8</sup>", "2<sup>2</sup>"], a: 2 },
{ q: "Bentuk sederhana dari p<sup>7</sup> ÷ p<sup>4</sup> adalah...", options: ["p<sup>11</sup>", "p<sup>3</sup>", "p<sup>28</sup>", "1/p<sup>3</sup>"], a: 1 },
{ q: "Hasil dari (5<sup>2</sup>)<sup>3</sup> adalah...", options: ["5<sup>5</sup>", "5<sup>6</sup>", "10<sup>3</sup>", "25<sup>3</sup>"], a: 1 },
{ q: "Bentuk pangkat positif dari 3<sup>-2</sup> adalah...", options: ["1/6", "-9", "-6", "1/9"], a: 3 }
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-xl math-box hover:bg-indigo-50 hover:border-indigo-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
evalSkor += 20; // 5 soal @ 20 poin
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 1500);
}
loadEvaluasi();
// Integrasi LMS
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Materi sudah cukup jelas.";
// Format disesuaikan dengan kebutuhan LMS Bapak/Ibu (siswa.php)
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi: " + refleksi, // Mengirim teks refleksi ke kolom hambatan/catatan
strategi: "Evaluasi Bilangan Berpangkat"
}, "*");
} else {
alert("Simulasi berhasil! Jika ini dibuka di dalam LMS, nilaimu otomatis terekam.\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
SSK
Anti Narkoba Bagi Generasi Muda
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Misi Anti-Narkoba: Generasi Keren Tanpa Narkoba! 🚫💊</title>
<!-- 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; /* Soft green theme */
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.floating { animation: float 3s ease-in-out infinite; }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.check-item { transition: all 0.2s ease; border-bottom: 4px solid #cbd5e1; cursor: pointer; }
.check-item:hover { transform: translateY(-3px); border-bottom-width: 7px; border-color: #34d399; }
.check-item.checked {
background: linear-gradient(135deg, #059669, #10b981);
color: white;
border-color: #047857;
transform: scale(1.03);
}
.guess-btn, .auto-guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active, .auto-guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #059669, #3b82f6);
}
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/80 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-500 p-2 rounded-xl shadow-sm rotate-3 text-white">
<i data-lucide="shield-check" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Misi Ketahanan Diri</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-emerald-400 via-teal-500 to-blue-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-3xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-200 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_rgba(5,150,105,1)] rotate-[-2deg]">
#SMPN72MalukuTengah #SekolahSadarKependudukan
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Muda Keren, <br><span class="text-gradient">Bebas Narkoba!</span> 🛡️✨
</h1>
<p class="text-xl text-slate-600 font-bold max-w-xl mx-auto">
Kenali bahayanya, kuatkan mental dari tekanan teman, dan raih masa depan gemilang tanpa zat terlarang!
</p>
<img src="https://images.unsplash.com/photo-1529156069898-49953eb1b5ce?auto=format&fit=crop&w=800&q=80" alt="Generasi Muda Sehat" class="w-80 h-56 object-cover rounded-3xl mx-auto shadow-[8px_8px_0px_rgba(16,185,129,0.4)] mt-8 border-4 border-white floating">
</div>
</div>
<!-- Slide 2: Apa itu Narkoba & Dampaknya -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 inline-block bg-emerald-100 px-6 py-2 rounded-2xl rotate-1">Apa Sih Bahaya Narkoba Itu? ⚠️</h2>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-red-200 shadow-sm flex flex-col justify-between">
<div>
<span class="text-4xl block mb-3">🧠</span>
<h3 class="font-black text-2xl text-red-600 mb-2">Merusak Otak Remaja</h3>
<p class="text-slate-600 font-bold">Otak remaja masih berkembang. Narkoba bisa merusak struktur saraf permanen, bikin susah fokus, dan emosi naik turun!</p>
</div>
<div class="mt-4 bg-red-50 p-3 rounded-xl text-xs font-bold text-red-700">Dampak: Penurunan drastis prestasi akademik di sekolah.</div>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm flex flex-col justify-between">
<div>
<span class="text-4xl block mb-3">💔</span>
<h3 class="font-black text-2xl text-amber-600 mb-2">Hancurnya Masa Depan</h3>
<p class="text-slate-600 font-bold">Bukan cuma fisik dan organ dalam yang rusak, narkoba juga memutus hubungan sosial dengan keluarga dan teman baikmu.</p>
</div>
<div class="mt-4 bg-amber-50 p-3 rounded-xl text-xs font-bold text-amber-700">Dampak: Ketergantungan psikologis yang membelenggu hidup.</div>
</div>
</div>
</div>
<!-- Slide 3: Simulasi Studi Kasus (Peer Pressure) -->
<div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<div class="inline-block px-4 py-1 bg-blue-100 text-blue-700 font-black rounded-full text-sm mb-2">Simulasi Tantangan 🎭</div>
<h2 class="text-3xl font-black text-slate-900">Uji Mental: Menghadapi "Permen" Misterius</h2>
</div>
<div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-[6px_6px_0px_#93c5fd] space-y-4">
<p class="text-lg font-extrabold text-slate-700 leading-relaxed bg-blue-50 p-4 rounded-2xl">
💬 <i>"Nih cobain permen herbal dari kakak kelas, biar kepala rileks dan gampang paham pelajaran, gak usah tegang jadi anak baru..."</i>
</p>
<p class="font-bold text-slate-500">Menurutmu, apa tindakan paling tepat yang harus dilakukan?</p>
<div class="space-y-3 pt-2">
<button onclick="pilihOpsiKasus(false, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition">
A. Coba dikit aja deh biar gak dibilang penakut sama kakak kelas. ❌
</button>
<button onclick="pilihOpsiKasus(true, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition">
B. Tolak dengan tegas, bilang "Maaf, saya tidak mau!", lalu segera menjauh dan lapor guru. ✅
</button>
<button onclick="pilihOpsiKasus(false, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition">
C. Terima dulu simpan di saku buat jaga-jaga. ❌
</button>
</div>
<div id="feedback-kasus" class="hidden p-4 rounded-2xl font-bold text-lg pop-in"></div>
</div>
</div>
<!-- Slide 4: Kiat Menghindari & Peer Pressure (Checklist) -->
<div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="flex justify-between items-end mb-4 bg-emerald-100 p-6 rounded-3xl border-2 border-emerald-200">
<div>
<h2 class="text-3xl font-black text-emerald-900">Kiat Tangguh Tolak Narkoba ✨</h2>
<p class="text-emerald-700 font-bold mt-1 text-lg">Tap komitmen yang siap kamu pegang teguh!</p>
</div>
<span id="checklist-counter" class="text-lg font-black text-white bg-emerald-600 px-4 py-2 rounded-xl shadow-md transition-colors rotate-3 text-center min-w-[80px]">0/4</span>
</div>
<div class="space-y-4" id="checklist">
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🗣️</span> Berani bilang "TIDAK" dengan tegas tanpa ragu.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🏃♂️</span> Menjauhi lingkungan pergaulan yang toksik/berisiko.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">⚽</span> Sibukkan diri dengan hobi positif & ekstrakurikuler.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">👨👩👧👦</span> Terbuka dan komunikatif dengan orang tua atau guru BK.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
</div>
</div>
<!-- Slide 5: Kuis Pintar Anti-Narkoba (Survival Mode) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Uji Penalaran: <span class="text-gradient">Kuis Anti-Narkoba</span> 🎮</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Uji kemampuan analisismu dalam situasi pergaulan sehari-hari!</p>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-emerald-800 text-xl">SKOR SAYA: <span id="quiz-score">0</span></span>
</div>
</div>
<div id="auto-quiz-container" class="space-y-4">
<div class="quiz-card p-6 rounded-3xl bg-white border-2 border-slate-200 shadow-[4px_4px_0px_rgba(203,213,225,1)] transition-colors relative" id="active-quiz-card">
<div class="flex gap-4">
<div class="bg-emerald-100 text-emerald-700 font-black text-2xl p-4 rounded-2xl h-fit">Q</div>
<p id="quiz-question-text" class="mb-4 text-xl font-extrabold text-slate-700 leading-snug"></p>
</div>
<div id="quiz-options" class="grid grid-cols-1 gap-3 ml-16 mt-2">
<!-- Opsi dinamis via JS -->
</div>
<div id="quiz-feedback" class="hidden mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8"></div>
<button id="next-quiz-btn" onclick="loadNewQuestion()" class="hidden mt-4 w-full ml-16 py-3 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700">Lanjut Soal Berikutnya ➡️</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi & Integrasi LMS Siswa.php -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-7xl mb-2 animate-bounce">🏆</div>
<h2 class="text-4xl md:text-5xl font-black text-emerald-900 mb-2">Misi Selesai, Generasi Hebat!</h2>
<p class="text-xl font-extrabold text-slate-600 max-w-xl">
Kamu telah menyelesaikan sesi pembelajaran anti-narkoba. Catat hasil skormu dan laporkan refleksimu ke sistem guru!
</p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-3xl max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-bold text-slate-500 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold focus:outline-emerald-500">
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase mb-1">Seberapa paham kamu materi hari ini? (Baterai Pemahaman)</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold bg-white">
<option value="100">100% - Sangat Paham & Siap Menolak!</option>
<option value="75">75% - Cukup Paham</option>
<option value="50">50% - Masih Perlu Belajar Lagi</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase mb-1">Hambatan / Pertanyaan Singkat</label>
<input type="text" id="input-hambatan" placeholder="Misal: Cara menolak teman akrab..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold">
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase mb-1">Komitmen / Strategi Kamu</label>
<input type="text" id="input-strategi" placeholder="Misal: Memilih teman yang hobi olahraga..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold">
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-lg font-black rounded-2xl shadow-lg hover:shadow-xl transition-all">
Kirim Hasil Belajar Ke Guru 🚀
</button>
</div>
</div>
</main>
<!-- 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-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-600 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Lanjut Misi</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.innerHTML = '<span class="hidden md:inline">Selesai 🌟</span>';
} else {
nextBtn.disabled = false;
nextBtn.innerHTML = '<span class="hidden md:inline">Lanjut Misi</span> <i data-lucide="rocket" class="w-6 h-6"></i>';
lucide.createIcons();
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Simulasi Kasus Interaktif (Slide 3)
function pilihOpsiKasus(isBenar, btn) {
const fb = document.getElementById('feedback-kasus');
fb.classList.remove('hidden');
if(isBenar) {
btn.className = "w-full text-left p-4 rounded-2xl bg-emerald-500 text-white font-bold border-2 border-emerald-700";
fb.className = "mt-4 p-4 rounded-2xl font-bold text-lg bg-emerald-100 text-emerald-800 border-l-8 border-emerald-500 pop-in";
fb.innerHTML = "🎉 <b>Tepat Sekali!</b> Menolak dengan tegas dan melapor adalah tindakan anak cerdas pelindung masa depan.";
} else {
btn.className = "w-full text-left p-4 rounded-2xl bg-rose-500 text-white font-bold border-2 border-rose-700";
fb.className = "mt-4 p-4 rounded-2xl font-bold text-lg bg-rose-100 text-rose-800 border-l-8 border-rose-500 pop-in";
fb.innerHTML = "❌ <b>Kurang Tepat.</b> Menerima barang asing dari orang lain sangat membahayakan kesehatan dan masa depanmu!";
}
}
// Checklist Logic (Slide 4)
const checkItems = document.querySelectorAll('.check-item');
const checklistCounter = document.getElementById('checklist-counter');
let checkedCount = 0;
checkItems.forEach(btn => {
btn.addEventListener('click', () => {
const isChecked = btn.classList.toggle('checked');
const icon = btn.querySelector('svg');
if(isChecked) {
checkedCount++;
icon.classList.remove('opacity-30', 'text-slate-400');
icon.classList.add('text-white', 'opacity-100');
} else {
checkedCount--;
icon.classList.add('opacity-30', 'text-slate-400');
icon.classList.remove('text-white', 'opacity-100');
}
checklistCounter.textContent = `${checkedCount}/${checkItems.length}`;
});
});
// 5 Soal Pilihan Ganda HOTS (Survival Mode - Slide 5)
const questionBank = [
{
q: "Rian sering diejek sebagai anak kurang pergaulan karena menolak nongkrong malam di tempat sepi. Suatu hari temannya mendesak mencoba rokok elektrik (vape) bebas nikotin. Tindakan tepat Rian adalah...",
options: [
"Menerima vape tersebut sekali saja agar diterima kelompok",
"Mencoba diam-diam lalu menjauh esok hari",
"Menolak dengan tegas, mengubah topik, dan meninggalkan lingkungan toksik",
"Menerima vape untuk disimpan sendiri"
],
correct: 2,
msg: "Asertif menolak dan menjauhi lingkungan berisiko adalah kunci utama menghindari narkoba."
},
{
q: "Mengapa penyalahgunaan narkotika pada usia remaja (SMP) jauh lebih merusak dibandingkan pada usia dewasa?",
options: [
"Remaja memiliki daya tahan tubuh lebih lemah",
"Otak remaja masih berkembang aktif sehingga kecanduan mengubah struktur saraf permanen",
"Remaja belum memiliki uang sendiri",
"Lingkungan sekolah tidak punya sanksi tegas"
],
correct: 1,
msg: "Secara neurobiologis, otak remaja sangat rentan terhadap perubahan struktur akibat zat adiktif."
},
{
q: "Perubahan drastis: nilai turun, mengurung diri, emosi meledak. Sebagai keluarga komunikatif, langkah awal bijak adalah...",
options: [
"Menghukum dan menggeledah kamar secara paksa",
"Membiarkannya karena fase wajar kenakalan remaja",
"Membuka dialog hangat tanpa menghakimi dan mencari konselor",
"Memindahkan anak ke sekolah lain"
],
correct: 2,
msg: "Pendekatan dialogis dan suportif jauh lebih efektif merangkul remaja bermasalah."
},
{
q: "Susi diajak ke komunitas online tersembunyi yang menjanjikan pelarian stres dari zat tertentu. Strategi coping efektif Susi?",
options: [
"Mengikuti kemauan mereka demi keamanan",
"Keluar, blokir akun, dan alihkan waktu ke hobi positif",
"Melaporkan ke media sosial secara terbuka",
"Diam saja dan mengingatkan lewat pesan pribadi"
],
correct: 1,
msg: "Detoksifikasi pergaulan digital dan pengalihan ke hobi positif adalah manajemen diri terbaik."
},
{
q: "Sebagai Sekolah Sadar Kependudukan, peran ekosistem sekolah jika ada siswa terindikasi lingkungan berisiko adalah...",
options: [
"Mengeluarkan siswa secepat mungkin",
"Menutupi kasus rapat-rapat",
"Menciptakan lingkungan aman, layanan konseling merangkul, dan pencegahan aktif",
"Menyerahkan sepenuhnya ke polisi"
],
correct: 2,
msg: "Sekolah ramah anak mengedepankan fungsi preventif, rehabilitatif, dan suportif."
}
];
let currentQIndex = -1;
let quizScore = 0;
let usedIndices = [];
const qText = document.getElementById('quiz-question-text');
const qOptions = document.getElementById('quiz-options');
const qFeedback = document.getElementById('quiz-feedback');
const nextBtnQuiz = document.getElementById('next-quiz-btn');
const scoreDisplay = document.getElementById('quiz-score');
const activeCard = document.getElementById('active-quiz-card');
function loadNewQuestion() {
qFeedback.classList.add('hidden');
nextBtnQuiz.classList.add('hidden');
activeCard.classList.remove('border-emerald-400', 'bg-emerald-50', 'border-rose-400', 'bg-rose-50');
if(usedIndices.length >= questionBank.length) usedIndices = [];
let rand;
do {
rand = Math.floor(Math.random() * questionBank.length);
} while (usedIndices.includes(rand));
usedIndices.push(rand);
currentQIndex = rand;
const currentQ = questionBank[rand];
qText.textContent = currentQ.q;
qOptions.innerHTML = "";
currentQ.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.type = "button";
btn.className = "auto-guess-btn w-full text-left p-4 bg-slate-100 rounded-2xl text-slate-700 font-bold border-b-4 border-slate-300 hover:bg-slate-200 transition-all";
btn.textContent = opt;
btn.onclick = () => checkAnswer(idx, currentQ.correct, btn, currentQ.msg);
qOptions.appendChild(btn);
});
}
loadNewQuestion();
function checkAnswer(selected, correctIdx, btnElement, explanation) {
const allBtns = qOptions.querySelectorAll('button');
allBtns.forEach(b => b.disabled = true);
if(selected === correctIdx) {
btnElement.classList.add('btn-correct');
activeCard.classList.add('border-emerald-400', 'bg-emerald-50');
qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-emerald-500 bg-emerald-100 text-emerald-800 pop-in block';
qFeedback.innerHTML = `<span class="text-xl block mb-1">🎉 Pintar Sekali!</span> ${explanation}`;
quizScore += 100;
scoreDisplay.textContent = quizScore;
} else {
btnElement.classList.add('btn-wrong');
allBtns[correctIdx].classList.add('btn-correct');
activeCard.classList.add('border-rose-400', 'bg-rose-50');
qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-rose-500 bg-rose-100 text-rose-800 pop-in block';
qFeedback.innerHTML = `<span class="text-xl block mb-1">😅 Kurang Tepat.</span> Analisis yang benar: ${explanation}`;
quizScore = Math.max(0, quizScore - 30);
scoreDisplay.textContent = quizScore;
}
nextBtnQuiz.classList.remove('hidden');
}
// Fungsi kirim nilai kembali ke sistem LMS (siswa.php)
function kirimNilaiLeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const hambatan = document.getElementById('input-hambatan').value || "Tidak ada";
const strategi = document.getElementById('input-strategi').value || "Aktif berolahraga dan jauhi narkoba";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: quizScore,
baterai: baterai,
hambatan: hambatan,
strategi: strategi
}, "*");
} else {
alert("Hasil berhasil direkam secara lokal! Skor Kuis Kamu: " + quizScore);
}
}
</script>
</body>
</html>
Kelas 7
MPLS
Literasi Digital 2
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Misi MPLS: Jadi Netizen Kece! 🚀</title>
<!-- 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: #f0fdfa;
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
/* Fun Animations */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.floating { animation: float 3s ease-in-out infinite; }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
/* Checklist Gamification */
.check-item, .confess-item { transition: all 0.2s ease; border-bottom: 4px solid #cbd5e1; cursor: pointer; }
.check-item:hover, .confess-item:hover { transform: translateY(-3px); border-bottom-width: 7px; border-color: #fcd34d; }
.check-item:active, .confess-item:active { transform: translateY(2px); border-bottom-width: 2px; }
.check-item.checked {
background: linear-gradient(135deg, #8b5cf6, #d946ef);
color: white;
border-color: #6d28d9;
transform: scale(1.03);
}
.confess-item.checked {
background: linear-gradient(135deg, #f43f5e, #fb923c);
color: white;
border-color: #be123c;
transform: scale(1.03);
}
/* Quiz Button Styles */
.guess-btn, .auto-guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active, .auto-guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
/* Gradient Text */
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #7c3aed, #db2777);
}
/* Nav Buttons */
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/80 backdrop-blur-md px-6 py-4 border-b-4 border-purple-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-yellow-400 p-2 rounded-xl shadow-sm rotate-3">
<i data-lucide="gamepad-2" class="w-6 h-6 text-purple-900"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Level Progress</span>
<span id="progress-text" class="text-xs font-black text-white bg-pink-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-yellow-400 via-pink-500 to-purple-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-3xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-yellow-300 text-purple-900 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_rgba(124,58,237,1)] rotate-[-2deg]">
#MPLS_Seru2026
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Siap Jadi <span class="text-gradient">Netizen Kece?</span> 😎📱
</h1>
<p class="text-xl text-slate-600 font-bold max-w-xl mx-auto">
Welcome to SMP! Yuk belajar cara asyik dan aman main sosmed, game, dan internet bareng-bareng!
</p>
<img src="./assets/WhatsApp Image 2026-07-09 at 23.07.58.jpeg" alt="Teens on phones" class="w-80 h-56 object-cover rounded-3xl mx-auto shadow-[8px_8px_0px_rgba(219,39,119,0.5)] mt-8 border-4 border-white floating" onerror="this.src='https://images.unsplash.com/photo-1610427339798-2cb2d04a7428?auto=format&fit=crop&w=800&q=80'">
</div>
</div>
<!-- Slide 2: Pengenalan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-800 inline-block bg-purple-100 px-6 py-2 rounded-2xl rotate-1">Literasi Digital Tuh Apaan Sih? 🤔</h2>
</div>
<div class="flex flex-col md:flex-row gap-8 items-center bg-white p-8 rounded-3xl shadow-[6px_6px_0px_rgba(203,213,225,1)] border-2 border-slate-200 mt-4">
<div class="flex-1 space-y-6 text-xl text-slate-700 font-bold">
<p class="bg-yellow-100 p-4 rounded-xl border-l-8 border-yellow-400">🎮 Bukan cuma soal jago <i>push rank</i> atau bikin konten FYP TikTok doang, bestie!</p>
<ul class="space-y-4">
<li class="flex gap-4 items-center"><span class="bg-pink-100 text-pink-600 p-2 rounded-lg text-2xl">🧠</span> Pintar bedain mana info asli, mana hoaks.</li>
<li class="flex gap-4 items-center"><span class="bg-blue-100 text-blue-600 p-2 rounded-lg text-2xl">🤝</span> Tau sopan santun waktu komen di IG/TikTok orang.</li>
<li class="flex gap-4 items-center"><span class="bg-green-100 text-green-600 p-2 rounded-lg text-2xl">🔐</span> Jago ngelindungin akun sendiri biar nggak di-hack!</li>
</ul>
</div>
<img src="https://static.vecteezy.com/system/resources/thumbnails/002/722/950/small_2x/side-view-of-children-using-laptop-for-communicate-video-conference-with-teacher-and-friends-on-white-background-free-vector.jpg" alt="Belajar Digital" class="w-72 h-64 object-cover rounded-2xl shadow-[6px_6px_0px_rgba(219,39,119,1)] transform rotate-2 floating border-4 border-white" onerror="this.src='https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=800&q=80'">
</div>
</div>
<!-- Slide 3: Checklist Interaktif -->
<div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="flex justify-between items-end mb-4 bg-purple-100 p-6 rounded-3xl border-2 border-purple-200">
<div>
<h2 class="text-3xl font-black text-purple-900">Checklist Anak Gaul Internet ✨</h2>
<p class="text-purple-700 font-bold mt-1 text-lg">Sentuh (Tap) kotak yang udah sering kamu lakuin!</p>
</div>
<span id="checklist-counter" class="text-lg font-black text-white bg-pink-500 px-4 py-2 rounded-xl shadow-md transition-colors rotate-3 text-center min-w-[80px]">0/5</span>
</div>
<div class="space-y-4" id="checklist">
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🤫</span> Nggak pernah ngasih tau password ke temen.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🤔</span> Mikir dulu sebelum ngetik komen pedas.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🕵️</span> Suka ngecek berita dulu (gak asal share).</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🚫</span> Block/Report orang yang suka nge-bully.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">⏰</span> Tau waktu! Kalo waktunya tidur, HP dimatiin.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
</div>
</div>
<!-- Slide 4: Auto Quiz (Survival Mode) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Survival Game: <span class="text-gradient">Fakta vs Hoaks!</span> 🎮</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kumpulkan skor sebanyak-banyaknya! Soal akan terus muncul.</p>
<div class="mt-4 inline-flex items-center gap-3 bg-yellow-100 border-2 border-yellow-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-yellow-700 text-xl">SKOR: <span id="quiz-score">0</span></span>
</div>
</div>
<div id="auto-quiz-container" class="space-y-4">
<div class="quiz-card p-6 rounded-3xl bg-white border-2 border-slate-200 shadow-[4px_4px_0px_rgba(203,213,225,1)] transition-colors relative" id="active-quiz-card">
<div class="flex gap-4">
<div class="bg-blue-100 text-blue-600 font-black text-2xl p-4 rounded-2xl h-fit">?</div>
<p id="quiz-question-text" class="mb-4 text-xl font-extrabold text-slate-700 leading-snug"></p>
</div>
<div class="flex gap-4 options ml-16 mt-2">
<button type="button" onclick="checkAnswer('fakta', this)" class="auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-5 border-slate-300 hover:bg-green-100 hover:text-green-700 transition-all active:translate-y-1 active:border-b-0">FAKTA ✅</button>
<button type="button" onclick="checkAnswer('hoaks', this)" class="auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-5 border-slate-300 hover:bg-red-100 hover:text-red-700 transition-all active:translate-y-1 active:border-b-0">HOAKS ❌</button>
</div>
<div id="quiz-feedback" class="hidden mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8"></div>
<button id="next-quiz-btn" onclick="loadNewQuestion()" class="hidden mt-4 w-full ml-16 py-3 bg-purple-600 text-white rounded-xl font-bold hover:bg-purple-700">Lanjut Soal Berikutnya ➡️</button>
</div>
</div>
</div>
<!-- Slide 5: Stop Bullying -->
<div class="slide flex-col p-8 gap-4 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-6">
<h2 class="text-4xl font-black text-white bg-pink-500 inline-block px-8 py-3 rounded-2xl transform rotate-2 shadow-[4px_4px_0px_#be185d]">No Drama, No Bully! 🛑</h2>
</div>
<div class="flex flex-col md:flex-row gap-8 items-center bg-white p-8 rounded-[2rem] shadow-[6px_6px_0px_rgba(203,213,225,1)] border-2 border-slate-200">
<div class="flex-1 space-y-5">
<div class="flex items-start gap-4 p-4 rounded-2xl bg-slate-50 border-2 border-slate-100 hover:border-pink-300 transition-colors">
<div class="w-12 h-12 bg-pink-100 text-pink-600 rounded-xl flex items-center justify-center text-2xl font-black flex-shrink-0">1</div>
<div>
<p class="font-black text-xl text-slate-800">Fisik Dihina? BIG NO!</p>
<p class="text-slate-600 font-bold mt-1">Ngejek fisik orang (Body Shaming) di kolom komentar itu jahat dan nggak keren sama sekali.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-2xl bg-slate-50 border-2 border-slate-100 hover:border-purple-300 transition-colors">
<div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center text-2xl font-black flex-shrink-0">2</div>
<div>
<p class="font-black text-xl text-slate-800">Jangan Jadi Cepu! 📸</p>
<p class="text-slate-600 font-bold mt-1">Nyebarin rahasia atau bikin foto memalukan teman jadi stiker WA tanpa izin itu termasuk pelanggaran lho.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-2xl bg-red-50 border-2 border-red-200 hover:border-red-400 transition-colors transform rotate-1">
<div class="w-12 h-12 bg-red-500 text-white rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm"><i data-lucide="megaphone" class="w-6 h-6"></i></div>
<div>
<p class="font-black text-xl text-red-700">Kena Bully? JANGAN DIAM!</p>
<p class="text-red-600 font-extrabold mt-1">Screenshot buktinya, block pelakunya, dan laporkan ke orang tua atau guru BK. Kamu dilindungi!</p>
</div>
</div>
</div>
<div class="flex-shrink-0 relative">
<div class="absolute inset-0 bg-yellow-400 rounded-3xl transform rotate-6 scale-105 shadow-md"></div>
<img src="https://i.pinimg.com/originals/e2/35/de/e235de5f2ee18e104fee4717d16cf73b.jpg" alt="Stop Bullying" class="w-64 h-80 object-cover rounded-3xl border-4 border-white relative z-10 floating" onerror="this.src='https://images.unsplash.com/photo-1529156069898-49953eb1b5ce?auto=format&fit=crop&w=400&q=80'">
</div>
</div>
</div>
<!-- Slide 6: Saring Sebelum Sharing -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<h2 class="text-5xl font-black text-slate-900"><span class="bg-pink-200 px-4 rounded-xl">Saring</span> Sebelum <span class="bg-blue-200 px-4 rounded-xl">Sharing!</span> 🧠</h2>
<div class="bg-white border-4 border-purple-400 rounded-[2rem] p-10 max-w-2xl space-y-6 shadow-[8px_8px_0px_rgba(192,132,252,1)] mt-6 relative">
<div class="absolute -top-10 left-1/2 transform -translate-x-1/2 w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center text-4xl shadow-md border-4 border-white">🕵️♂️</div>
<p class="text-2xl text-slate-700 font-extrabold leading-snug pt-6">Kalo dapet berita heboh di grup kelas atau keluarga, JANGAN LANGSUNG DI-FORWARD!</p>
<p class="text-lg font-bold text-slate-500">Cek dulu kebenarannya di website anti-hoaks resmi Indonesia ini:</p>
<div class="py-4 space-y-3">
<div class="bg-purple-100 py-3 px-6 rounded-2xl transform transition hover:scale-105 cursor-pointer inline-block mx-2">
<p class="font-black text-2xl text-purple-700">turnbackhoax.id</p>
</div>
<div class="bg-pink-100 py-3 px-6 rounded-2xl transform transition hover:scale-105 cursor-pointer inline-block mx-2">
<p class="font-black text-2xl text-pink-700">cekfakta.com</p>
</div>
</div>
</div>
</div>
<!-- Slide 7: Keamanan Akun -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<h2 class="text-4xl font-black text-center mb-8">Gembok Akunmu Rapat-Rapat! 🔐</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative">
<div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white w-14 h-14 rounded-xl flex items-center justify-center rotate-6 shadow-sm"><i data-lucide="key" class="w-8 h-8"></i></div>
<p class="font-black text-2xl text-slate-800 pt-4">Password Kuat</p>
<p class="text-slate-600 font-bold">Jangan pake password "123456" atau tanggal lahir. Pake kombinasi angka & simbol. Contoh: <span class="bg-yellow-200 px-2 rounded text-slate-800">@n4kK3c3_07!</span></p>
</div>
<div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative">
<div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-pink-500 text-white w-14 h-14 rounded-xl flex items-center justify-center -rotate-6 shadow-sm"><i data-lucide="ghost" class="w-8 h-8"></i></div>
<p class="font-black text-2xl text-slate-800 pt-4">Awas Phishing</p>
<p class="text-slate-600 font-bold">Jangan asal klik link aneh yang dikirim lewat WA/DM IG dari orang nggak dikenal. Akunmu bisa lenyap!</p>
</div>
<div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative">
<div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-green-500 text-white w-14 h-14 rounded-xl flex items-center justify-center rotate-6 shadow-sm"><i data-lucide="shield-alert" class="w-8 h-8"></i></div>
<p class="font-black text-2xl text-slate-800 pt-4">OTP itu Rahasia!</p>
<p class="text-slate-600 font-bold">Kode 4-6 angka yang masuk via SMS/WA itu HARAM dikasih tau ke siapa aja, termasuk yang ngaku-ngaku admin/kasir.</p>
</div>
</div>
</div>
<!-- Slide 8: Jejak Digital -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="flex flex-col md:flex-row gap-10 bg-gradient-to-br from-indigo-900 to-purple-900 p-10 rounded-[2.5rem] shadow-2xl items-center text-white mt-4 relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-10 rounded-full blur-3xl"></div>
<div class="absolute bottom-0 left-0 w-48 h-48 bg-pink-500 opacity-20 rounded-full blur-2xl"></div>
<div class="flex-1 space-y-6 z-10">
<h2 class="text-5xl font-black text-yellow-300 mb-2">Jejak Digital Beb! 👣</h2>
<div class="space-y-4 text-lg font-bold">
<p class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/20">📱 Curhatan galau, foto alay, komen nge-gas hari ini...</p>
<p class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/20">🎓 ...bisa dibaca sama pihak sekolah, kampus, atau bos kamu di masa depan!</p>
<p class="bg-pink-500/80 p-4 rounded-2xl backdrop-blur-sm border border-pink-400 mt-4 text-xl">✨ Mulai sekarang, yuk bangun citra (branding) yang positif. Share karya, prestasi, atau kegiatan seru bareng teman!</p>
</div>
</div>
<div class="text-center z-10">
<img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=800&q=80" alt="Sosmed Icons" class="w-64 h-64 object-cover rounded-full shadow-[0_0_40px_rgba(236,72,153,0.5)] border-8 border-indigo-800 floating">
<p class="mt-6 font-black text-yellow-300 text-xl bg-black/30 py-2 px-4 rounded-full">Internet Gak Pernah Lupa!</p>
</div>
</div>
</div>
<!-- Slide 9: Nobar Anti Judol (Video Inline) -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-red-100 text-red-700 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_#fca5a5] rotate-[-2deg]">
#SpecialScreening 🍿
</div>
<h2 class="text-5xl md:text-6xl font-black text-slate-900 mt-2">Nobar Bareng:<br><span class="text-gradient">Kemenangan Sejati</span> 🎬</h2>
<p class="text-xl font-bold text-slate-600 mt-2 max-w-3xl">Judi Online (Judol) itu penipuan berkedok game yang bisa merusak masa depan. Yuk, tonton film pendek edukasi pencegahannya di bawah ini!</p>
<!-- PEMUTAR VIDEO DI DALAM SLIDE -->
<div class="w-full max-w-3xl mx-auto mt-6 rounded-2xl overflow-hidden border-4 border-slate-800 shadow-[8px_8px_0px_#cbd5e1] bg-black">
<video controls class="w-full aspect-video outline-none" poster="https://images.unsplash.com/photo-1594909122845-11baa439b7bf?auto=format&fit=crop&w=800&q=80">
<source src="./assets/FILM PENDEK _KEMENANGAN SEJATI_.mp4" type="video/mp4">
Browser kamu tidak mendukung pemutaran video.
</video>
</div>
</div>
<!-- Slide 10: Refleksi Film "Kemenangan Sejati" -->
<div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-3xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl transform -rotate-1">Refleksi Kemenangan Sejati 💭</h2>
<p class="text-lg font-bold text-slate-500 mt-3">Yuk, tuangkan pendapatmu setelah nonton film tadi!</p>
</div>
<div class="space-y-4 mt-2">
<!-- Input Refleksi -->
<div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-800 mb-2">a. Apa pelajaran paling berharga dari film ini?</label>
<textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Tulis jawabanmu di sini..."></textarea>
</div>
<div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-800 mb-2">b & c. Kenapa tokoh utama bisa terjebak judol & apa faktornya?</label>
<textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Ceritakan pendapatmu..."></textarea>
</div>
<div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-800 mb-2">d. Apa dampak negatif yang terlihat dari Judol & Pinjol ilegal?</label>
<textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Sebutkan dampaknya..."></textarea>
</div>
<div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-800 mb-2">e & f. Kalau kamu/teman di posisi itu, apa tindakanmu & siapa yang dibantu?</label>
<textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Aku akan..."></textarea>
</div>
</div>
</div>
<!-- Slide 10: Penutup & Download PDF (PDF Inline) -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-4 h-full min-h-[75vh]" id="slide-10">
<div class="text-7xl mb-2 animate-bounce">🏆</div>
<h2 class="text-5xl font-black text-purple-900 mb-2">Level 1 Completed!</h2>
<p class="text-2xl font-extrabold text-slate-600">Selamat! Kamu resmi jadi Siswa SMP yang Melek Digital.</p>
<div class="bg-white border-4 border-dashed border-pink-400 p-6 rounded-3xl max-w-4xl w-full mt-4 shadow-xl flex flex-col items-center">
<p class="text-xl font-bold text-slate-700 mb-4">Sebagai hadiah, Kakak udah siapin contekan keren buat kamu. Langsung baca atau download ya!</p>
<!-- PENAMPIL PDF DI DALAM SLIDE -->
<div class="w-full h-[40vh] md:h-[50vh] rounded-xl overflow-hidden border-2 border-slate-200 mb-4 relative z-10">
<iframe src="./assets/Unmasking_the_Gambling_Trap.pdf" class="w-full h-full border-none bg-slate-100" title="PDF Cheat Sheet"></iframe>
</div>
<a href="./assets/Unmasking_the_Gambling_Trap.pdf" download class="inline-flex items-center gap-3 px-8 py-3 bg-gradient-to-r from-pink-500 to-purple-600 text-white text-xl font-black rounded-xl shadow-[0_6px_0px_#9333ea] hover:translate-y-1 transition-all active:shadow-none active:translate-y-2">
<i data-lucide="download-cloud" class="w-6 h-6"></i>
Download File PDF
</a>
</div>
<div class="bg-yellow-200 text-yellow-900 font-bold px-6 py-3 rounded-full animate-pulse border-2 border-yellow-400 mt-4">
⚠️ Eits, jangan ditutup dulu! Masih ada 1 Misi Bonus di slide selanjutnya! 👉
</div>
</div>
<!-- Slide 11: Pengakuan Dosa (Bonus Intro) -->
<div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-blue-100 text-blue-700 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_#93c5fd] rotate-[-2deg] mx-auto text-center w-fit mb-2">
Bonus Stage: Misi Kampanye 3S 🎯
</div>
<div class="text-center mb-2">
<h2 class="text-4xl font-black text-slate-900 inline-block bg-orange-200 px-6 py-2 rounded-2xl transform -rotate-2 mt-2">Pengakuan Dosa Netizen! 🫣</h2>
<p class="text-lg font-bold text-slate-500 mt-3">Yuk jujur-jujuran. Klik (Tap) kotak di bawah kalau kamu <span class="text-red-500 underline">PERNAH</span> ngelakuin ini:</p>
</div>
<div class="space-y-4 mt-4" id="confession-list">
<button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">😵💫</span> Main gawai (HP/Laptop) sampai lupa waktu!</span>
<i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🛌</span> Tidur sambil bawa-bawa/peluk gawai!</span>
<i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🍜</span> Makan sambil nonton video atau TV!</span>
<i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">📚</span> Belajar sambil buka banyak aplikasi/tab lain!</span>
<i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
</div>
<div id="confess-msg" class="hidden text-center mt-4 p-4 bg-orange-100 rounded-2xl border-2 border-orange-300 pop-in">
<p class="font-black text-orange-700 text-xl">Waduh! Ketahuan deh 🤭 Nggak apa-apa, yuk kita perbaiki sama-sama!</p>
</div>
</div>
<!-- Slide 12: Screen Time -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<h2 class="text-5xl font-black text-slate-900 mb-2">Apa itu <span class="bg-blue-300 px-4 py-1 rounded-xl text-blue-900 transform inline-block rotate-2">Screen Time?</span> ⏱️</h2>
<p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto">
<i>Screen time</i> (waktu layar) adalah total waktu yang kamu habisin buat natap layar (main HP, nonton TV, nge-game). Kalau kelamaan, awas efek sampingnya!
</p>
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mt-6 w-full max-w-5xl">
<div class="bg-white border-4 border-red-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition">
<span class="text-5xl mb-2">👁️</span>
<p class="font-black text-slate-700 text-center">Mata Lelah</p>
</div>
<div class="bg-white border-4 border-orange-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.1s;">
<span class="text-5xl mb-2">🦥</span>
<p class="font-black text-slate-700 text-center">Malas Gerak</p>
</div>
<div class="bg-white border-4 border-yellow-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.2s;">
<span class="text-5xl mb-2">🥱</span>
<p class="font-black text-slate-700 text-center">Susah Tidur</p>
</div>
<div class="bg-white border-4 border-pink-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.3s;">
<span class="text-5xl mb-2">🎢</span>
<p class="font-black text-slate-700 text-center leading-tight">Emosi Naik Turun</p>
</div>
<div class="bg-white border-4 border-purple-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center col-span-2 md:col-span-1 pop-in hover:scale-105 transition" style="animation-delay: 0.4s;">
<span class="text-5xl mb-2">🧟</span>
<p class="font-black text-slate-700 text-center">Kecanduan</p>
</div>
</div>
</div>
<!-- Slide 13: Screen Zone -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-2"><span class="bg-purple-300 px-4 py-1 rounded-xl text-purple-900 transform inline-block -rotate-2">Screen Zone</span> (Zona Layar) 🚷</h2>
<p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto mt-4">
Bikin kesepakatan tempat di rumah, mana yang <b>BOLEH</b> dan <b>DILARANG</b> main HP. Biar kamu nggak sembunyi-sembunyi dan tetap asyik ngobrol bareng keluarga!
</p>
</div>
<div class="flex flex-col md:flex-row gap-8 mt-6 w-full max-w-4xl">
<div class="flex-1 bg-green-50 border-4 border-green-400 p-8 rounded-3xl shadow-[6px_6px_0px_#4ade80] hover:-translate-y-2 transition-transform">
<h3 class="font-black text-3xl text-green-700 mb-6 flex items-center gap-3"><i data-lucide="check-circle-2" class="w-8 h-8"></i> Boleh Banget!</h3>
<ul class="space-y-4 text-xl font-bold text-slate-700">
<li class="flex items-center gap-3"><span class="text-3xl">🛋️</span> Ruang Keluarga</li>
<li class="flex items-center gap-3"><span class="text-3xl">📚</span> Ruang Belajar</li>
</ul>
</div>
<div class="flex-1 bg-red-50 border-4 border-red-400 p-8 rounded-3xl shadow-[6px_6px_0px_#f87171] hover:-translate-y-2 transition-transform">
<h3 class="font-black text-3xl text-red-700 mb-6 flex items-center gap-3"><i data-lucide="x-circle" class="w-8 h-8"></i> BIG NO!</h3>
<ul class="space-y-4 text-xl font-bold text-slate-700">
<li class="flex items-center gap-3"><span class="text-3xl">🛏️</span> Kamar Tidur</li>
<li class="flex items-center gap-3"><span class="text-3xl">🍽️</span> Meja Makan</li>
<li class="flex items-center gap-3"><span class="text-3xl">🚽</span> Toilet</li>
</ul>
</div>
</div>
</div>
<!-- Slide 14: Screen Break -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<h2 class="text-5xl font-black text-slate-900 mb-2">Kasih Jeda Dong! <span class="bg-green-300 px-4 py-1 rounded-xl text-green-900 transform inline-block rotate-1">(Screen Break)</span> 🧘</h2>
<p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto">
Setelah 30 menit main game atau scroll TikTok, mata & badan butuh istirahat! Kalau nggak, mata cepat capek dan badan kaku. Pas lagi jeda, lakuin aktivitas seru ini:
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-8 w-full max-w-5xl">
<div class="bg-white border-4 border-blue-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-blue-400 hover:-translate-y-2 transition-all">
<span class="text-6xl mb-4 block">🪟</span>
<p class="font-black text-xl text-slate-700">Melihat Keluar Jendela</p>
</div>
<div class="bg-white border-4 border-pink-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-pink-400 hover:-translate-y-2 transition-all">
<span class="text-6xl mb-4 block">🚶</span>
<p class="font-black text-xl text-slate-700">Berjalan-jalan Sebentar</p>
</div>
<div class="bg-white border-4 border-cyan-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-cyan-400 hover:-translate-y-2 transition-all">
<span class="text-6xl mb-4 block">💧</span>
<p class="font-black text-xl text-slate-700">Minum Air Putih</p>
</div>
<div class="bg-white border-4 border-orange-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-orange-400 hover:-translate-y-2 transition-all">
<span class="text-6xl mb-4 block">🤸</span>
<p class="font-black text-xl text-slate-700">Peregangan Badan</p>
</div>
</div>
</div>
</main>
<!-- 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">Mundur Dulu</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-yellow-400 text-slate-900 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-yellow-500 shadow-[0_4px_0px_#b45309]">
<span class="hidden md:inline">Gasss Lanjut!</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
// Navigasi Slide Basic
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .check-item, .confess-item, img, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.innerHTML = '<span class="hidden md:inline">Tamat! 🎉</span>';
} else {
nextBtn.disabled = false;
nextBtn.innerHTML = '<span class="hidden md:inline">Gasss Lanjut!</span> <i data-lucide="rocket" class="w-6 h-6"></i>';
lucide.createIcons();
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' && current < slides.length - 1) showSlide(current + 1);
if (e.key === 'ArrowLeft' && current > 0) showSlide(current - 1);
});
// Checklist Logic (Slide 3)
const checkItems = document.querySelectorAll('.check-item');
const checklistCounter = document.getElementById('checklist-counter');
let checkedCount = 0;
checkItems.forEach(btn => {
btn.addEventListener('click', () => {
const isChecked = btn.classList.toggle('checked');
const icon = btn.querySelector('svg');
if(isChecked) {
checkedCount++;
icon.classList.remove('opacity-30', 'text-slate-400');
icon.classList.add('text-white', 'opacity-100');
} else {
checkedCount--;
icon.classList.add('opacity-30', 'text-slate-400');
icon.classList.remove('text-white', 'opacity-100');
}
checklistCounter.textContent = `${checkedCount}/${checkItems.length}`;
if(checkedCount === checkItems.length) {
checklistCounter.classList.remove('bg-pink-500');
checklistCounter.classList.add('bg-green-500');
checklistCounter.innerHTML = "LULUS! 🎉";
} else {
checklistCounter.classList.add('bg-pink-500');
checklistCounter.classList.remove('bg-green-500');
}
});
});
// Pengakuan Dosa Logic (Slide 11)
const confessItems = document.querySelectorAll('.confess-item');
const confessMsg = document.getElementById('confess-msg');
let confessCount = 0;
confessItems.forEach(btn => {
btn.addEventListener('click', () => {
const isChecked = btn.classList.toggle('checked');
const icon = btn.querySelector('svg');
if(isChecked) {
confessCount++;
icon.classList.remove('opacity-30', 'text-slate-400');
icon.classList.add('text-white', 'opacity-100');
} else {
confessCount--;
icon.classList.add('opacity-30', 'text-slate-400');
icon.classList.remove('text-white', 'opacity-100');
}
if(confessCount > 0) {
confessMsg.classList.remove('hidden');
} else {
confessMsg.classList.add('hidden');
}
});
});
// ==========================================
// AUTO QUIZ BANK SOAL (SURVIVAL MODE)
// ==========================================
const questionBank = [
{ q: `"Eh guys, klik link ini buat dapetin skin ML/FF gratis langsung dari Moonton/Garena! Asli no tipu-tipu!"`, a: 'hoaks', msg: "Penipuan (Phishing)! Jangan diklik, ntar akun kamu dicolong hacker." },
{ q: `"Apapun yang kita hapus di Sosmed (foto alay, komen galak), sebenernya tetep ada jejaknya dan bisa dicari lagi."`, a: 'fakta', msg: "Jejak digital itu susah banget hilangnya! Hati-hati ya sebelum posting." },
{ q: `"Menang undian hadiah motor 100 juta dari bank, tapi syaratnya disuruh transfer uang pajak dulu 2 juta."`, a: 'hoaks', msg: "Modus penipuan klasik! Undian resmi ngga akan minta transfer uang duluan." },
{ q: `"Semua berita yang dibagikan oleh Om/Tante di grup WA keluarga itu pasti 100% benar karena mereka orang tua."`, a: 'hoaks', msg: "Belum tentu! Banyak orang tua yang juga gampang kemakan berita bohong/hoaks." },
{ q: `"Nge-bully teman di internet pakai akun fake (palsu) itu aman dan nggak akan bisa dilacak oleh polisi."`, a: 'hoaks', msg: "Polisi punya tim siber yang bisa ngelacak alamat IP kamu walaupun pakai akun palsu!" },
{ q: `"OTP (One Time Password) itu cuma boleh dipakai oleh kita sendiri dan ngga boleh dikasih ke siapapun."`, a: 'fakta', msg: "Bener banget! Kalau OTP dikasih ke orang, akun/dompet digital kamu bisa dikuras habis." },
{ q: `"Kalau ada aplikasi yang nawarin bisa lihat siapa yang sering kepoin profil IG/WA kita, itu pasti bohongan."`, a: 'fakta', msg: "Betul! Kebanyakan aplikasi kaya gitu cuma buat nyuri data (password) kamu." }
];
let currentQIndex = -1;
let quizScore = 0;
let usedIndices = [];
const qText = document.getElementById('quiz-question-text');
const qFeedback = document.getElementById('quiz-feedback');
const nextBtnQuiz = document.getElementById('next-quiz-btn');
const scoreDisplay = document.getElementById('quiz-score');
const activeCard = document.getElementById('active-quiz-card');
function loadNewQuestion() {
qFeedback.classList.add('hidden');
nextBtnQuiz.classList.add('hidden');
activeCard.classList.remove('border-green-400', 'bg-green-50', 'border-red-400', 'bg-red-50');
const btns = document.querySelectorAll('.auto-guess-btn');
btns.forEach(b => {
b.disabled = false;
b.className = "auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-4 border-slate-300 hover:bg-slate-200 transition-all active:translate-y-1 active:border-b-0";
});
if(usedIndices.length >= questionBank.length) usedIndices = [];
let rand;
do {
rand = Math.floor(Math.random() * questionBank.length);
} while (usedIndices.includes(rand));
usedIndices.push(rand);
currentQIndex = rand;
qText.textContent = questionBank[rand].q;
}
loadNewQuestion();
window.checkAnswer = function(guess, btnElement) {
const currentQ = questionBank[currentQIndex];
const btns = document.querySelectorAll('.auto-guess-btn');
btns.forEach(b => b.disabled = true);
if(guess === currentQ.a) {
btnElement.classList.add('btn-correct');
activeCard.classList.add('border-green-400', 'bg-green-50');
qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block';
qFeedback.innerHTML = `<span class="text-2xl block mb-2">🎉 Yasssh Benar Banget!</span> ${currentQ.msg}`;
quizScore += 100;
scoreDisplay.textContent = quizScore;
} else {
btnElement.classList.add('btn-wrong');
btns.forEach(b => {
if(b.textContent.toLowerCase().includes(currentQ.a)) b.classList.add('btn-correct');
});
activeCard.classList.add('border-red-400', 'bg-red-50');
qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block';
qFeedback.innerHTML = `<span class="text-2xl block mb-2">😅 Yhaa Kegocek!</span> Jawabannya adalah <b>${currentQ.a.toUpperCase()}</b>.<br>${currentQ.msg}`;
quizScore = Math.max(0, quizScore - 50);
scoreDisplay.textContent = quizScore;
}
nextBtnQuiz.classList.remove('hidden');
};
</script>
</body>
</html>
Kelas 8
Bahasa Indonesia
Mengolah Teks Laporan Hasil Observasi
<!doctype html>
<html lang="id">
<head>
<script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script>
<script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Pembelajaran Teks LHO</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:wght@700;900&display=swap" rel="stylesheet">
<style>
body { font-family: 'DM Sans', sans-serif; background-color: #f8fafc; color: #334155; }
.heading-font { font-family: 'Fraunces', serif; color: #0f172a; }
.slide { display: none; }
.slide.active { display: flex; }
.option-btn { transition: all 0.2s; }
.option-btn:hover { transform: scale(1.02); }
.option-btn.correct { background: #22c55e !important; color: white !important; border-color: #16a34a !important; }
.option-btn.incorrect { background: #ef4444 !important; color: white !important; border-color: #dc2626 !important; }
.progress-fill { transition: width 0.4s ease; }
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.struktur-item { cursor: pointer; transition: all 0.2s; }
.struktur-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.struktur-item.placed { opacity: 0.5; pointer-events: none; background-color: #f1f5f9; }
.drop-zone { min-height: 56px; border: 2px dashed #cbd5e1; border-radius: 12px; transition: all 0.2s; cursor: pointer; }
.drop-zone:hover { background-color: #f8fafc; }
.drop-zone.filled { border-color: #10b981; background: #ecfdf5; border-style: solid; }
.canva-card { background: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
</style>
</head>
<body class="min-h-screen flex flex-col pb-16">
<!-- Progress Bar -->
<div class="w-full h-2 bg-gray-200 fixed top-0 left-0 z-50">
<div id="progress-bar" class="progress-fill h-full bg-gradient-to-r from-emerald-400 to-teal-600" style="width: 8.3%"></div>
</div>
<!-- Slide Container -->
<main class="flex-1 w-full flex items-center justify-center p-4 pt-8">
<!-- Slide 1: Apersepsi / Cover -->
<section class="slide active fade-in flex-col items-center max-w-4xl w-full" id="slide-1">
<div class="text-center mb-8">
<span class="text-5xl mb-4 block">🔍</span>
<h1 class="heading-font text-3xl md:text-5xl font-black mb-4 tracking-tight">Menjelajahi Teks LHO</h1>
<p class="text-lg opacity-80 max-w-2xl mx-auto">Mari belajar mengamati, mencatat, dan melaporkan sesuatu secara objektif melalui Teks Laporan Hasil Observasi!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 w-full">
<div class="rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<img src="https://images.unsplash.com/photo-1544365558-35aa4afcf11f?auto=format&fit=crop&w=800&q=80" alt="Observasi" class="w-full h-64 object-cover">
</div>
<div class="canva-card rounded-2xl p-6 flex flex-col justify-center bg-white border-t-4 border-teal-500">
<h3 class="text-xl font-bold mb-2 text-teal-700">Apersepsi</h3>
<p class="text-lg font-medium mb-4">Pernahkah kamu memperhatikan detail bentuk, rasa, dan bahan jajanan favoritmu lalu menceritakannya ke orang lain?</p>
<p class="text-sm opacity-70 bg-teal-50 p-3 rounded-lg border border-teal-100">💡 <strong>Hint:</strong> Mengamati dengan saksama adalah langkah pertama untuk membuat teks Laporan Hasil Observasi (LHO) yang baik!</p>
</div>
</div>
</section>
<!-- Slide 2: Asesmen Awal -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-2">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Uji Pemahaman Awal</h2>
<p class="text-center mb-6 text-gray-500">Teks LHO harus berisi <strong>FAKTA</strong>. Coba tentukan mana fakta dan opini di bawah ini!</p>
<div class="w-full space-y-4" id="asesmen-awal-container">
<div class="space-y-3" id="fakta-opini-quiz">
<div class="p-5 rounded-xl bg-white shadow-sm border border-gray-100">
<p class="font-medium mb-3">1. "Kucing memiliki empat kaki, berbulu, dan termasuk hewan mamalia."</p>
<div class="flex gap-3">
<button class="option-btn px-6 py-2 rounded-lg bg-teal-50 border border-teal-200 font-medium text-teal-700 hover:bg-teal-100" onclick="checkFaktaOpini(this, true)">Fakta</button>
<button class="option-btn px-6 py-2 rounded-lg bg-orange-50 border border-orange-200 font-medium text-orange-700 hover:bg-orange-100" onclick="checkFaktaOpini(this, false)">Opini</button>
</div>
</div>
<div class="p-5 rounded-xl bg-white shadow-sm border border-gray-100">
<p class="font-medium mb-3">2. "Bunga mawar merah adalah bunga yang paling indah di taman itu."</p>
<div class="flex gap-3">
<button class="option-btn px-6 py-2 rounded-lg bg-teal-50 border border-teal-200 font-medium text-teal-700 hover:bg-teal-100" onclick="checkFaktaOpini(this, false)">Fakta</button>
<button class="option-btn px-6 py-2 rounded-lg bg-orange-50 border border-orange-200 font-medium text-orange-700 hover:bg-orange-100" onclick="checkFaktaOpini(this, true)">Opini</button>
</div>
</div>
<div class="p-5 rounded-xl bg-white shadow-sm border border-gray-100">
<p class="font-medium mb-3">3. "Tanaman lidah mertua dapat menyerap polutan berbahaya di udara."</p>
<div class="flex gap-3">
<button class="option-btn px-6 py-2 rounded-lg bg-teal-50 border border-teal-200 font-medium text-teal-700 hover:bg-teal-100" onclick="checkFaktaOpini(this, true)">Fakta</button>
<button class="option-btn px-6 py-2 rounded-lg bg-orange-50 border border-orange-200 font-medium text-orange-700 hover:bg-orange-100" onclick="checkFaktaOpini(this, false)">Opini</button>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 3: Materi - Struktur LHO -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-3">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Struktur Teks LHO</h2>
<p class="text-center mb-8 opacity-70">Teks Laporan Hasil Observasi memiliki 3 bagian utama yang harus urut.</p>
<div class="grid md:grid-cols-3 gap-6 w-full">
<div class="canva-card rounded-2xl p-6 text-center border-t-4 border-emerald-400">
<div class="text-4xl mb-3">1️⃣</div>
<h3 class="font-bold mb-2 text-lg">Pernyataan Umum</h3>
<p class="text-sm text-gray-600">Berisi pembuka, pengertian, atau klasifikasi umum tentang objek yang diamati. (Misal: "Sapi adalah mamalia berkaki empat...")</p>
</div>
<div class="canva-card rounded-2xl p-6 text-center border-t-4 border-blue-400">
<div class="text-4xl mb-3">2️⃣</div>
<h3 class="font-bold mb-2 text-lg">Deskripsi Bagian</h3>
<p class="text-sm text-gray-600">Berisi penjelasan detail atau rincian ciri-ciri fisik, bagian, atau perilaku objek. (Misal: "Bulu sapi bertekstur halus, tanduknya...")</p>
</div>
<div class="canva-card rounded-2xl p-6 text-center border-t-4 border-purple-400">
<div class="text-4xl mb-3">3️⃣</div>
<h3 class="font-bold mb-2 text-lg">Deskripsi Manfaat</h3>
<p class="text-sm text-gray-600">Berisi penjelasan tentang kegunaan, manfaat, atau fungsi dari objek tersebut bagi kehidupan.</p>
</div>
</div>
</section>
<!-- Slide 4: Contoh Teks LHO -->
<section class="slide fade-in flex-col items-center max-w-5xl w-full" id="slide-4">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-6 text-center">Analisis Struktur Teks LHO</h2>
<div class="w-full grid md:grid-cols-5 gap-6">
<div class="md:col-span-2 rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?auto=format&fit=crop&w=800&q=80" alt="Kucing" class="w-full h-full object-cover min-h-[300px]">
</div>
<div class="md:col-span-3 space-y-4 flex flex-col justify-center">
<div class="canva-card rounded-xl p-4 border-l-4 border-emerald-400">
<span class="text-xs font-bold uppercase tracking-wide text-emerald-600 bg-emerald-50 px-2 py-1 rounded">Pernyataan Umum</span>
<p class="text-sm mt-2 text-gray-700">Kucing (Felis catus) adalah hewan mamalia karnivora dari keluarga Felidae. Kucing telah berbaur dengan kehidupan manusia sejak ribuan tahun lalu.</p>
</div>
<div class="canva-card rounded-xl p-4 border-l-4 border-blue-400">
<span class="text-xs font-bold uppercase tracking-wide text-blue-600 bg-blue-50 px-2 py-1 rounded">Deskripsi Bagian</span>
<p class="text-sm mt-2 text-gray-700">Kucing memiliki mata dengan penglihatan malam yang sangat tajam, cakar yang dapat ditarik masuk, pendengaran yang peka, serta kumis (misai) yang berfungsi sebagai alat sensor lingkungan.</p>
</div>
<div class="canva-card rounded-xl p-4 border-l-4 border-purple-400">
<span class="text-xs font-bold uppercase tracking-wide text-purple-600 bg-purple-50 px-2 py-1 rounded">Deskripsi Manfaat</span>
<p class="text-sm mt-2 text-gray-700">Secara umum, kucing sering dipelihara manusia karena kemampuannya memburu hama seperti tikus, serta kehadirannya dapat membantu menurunkan tingkat stres pada manusia.</p>
</div>
</div>
</div>
</section>
<!-- Slide 5: Ciri Kebahasaan -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-5">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center">Ciri Kebahasaan Teks LHO</h2>
<div class="grid md:grid-cols-3 gap-6 w-full">
<div class="canva-card rounded-2xl p-6 bg-white border border-gray-100">
<div class="text-4xl mb-4 text-center">🔬</div>
<h3 class="font-bold mb-2 text-center text-lg text-rose-600">Istilah Ilmiah/Teknis</h3>
<p class="text-sm text-gray-600 mb-3 text-center">Menggunakan kata-kata teknis sesuai dengan bidang ilmu objek yang diamati.</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm italic text-gray-700">Contoh: Karnivora, fotosintesis, anatomi, mamalia, spesies.</p>
</div>
</div>
<div class="canva-card rounded-2xl p-6 bg-white border border-gray-100">
<div class="text-4xl mb-4 text-center">📖</div>
<h3 class="font-bold mb-2 text-center text-lg text-indigo-600">Kalimat Definisi & Deskripsi</h3>
<p class="text-sm text-gray-600 mb-3 text-center">Menggunakan kata kopula (adalah, merupakan) dan kalimat rincian fisik.</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm italic text-gray-700">Contoh: "Harimau <strong>merupakan</strong> hewan buas." "Bulunya <strong>berwarna</strong> belang emas."</p>
</div>
</div>
<div class="canva-card rounded-2xl p-6 bg-white border border-gray-100">
<div class="text-4xl mb-4 text-center">🎯</div>
<h3 class="font-bold mb-2 text-center text-lg text-amber-600">Objektif & Faktual</h3>
<p class="text-sm text-gray-600 mb-3 text-center">Data disampaikan berdasarkan fakta, bukan imajinasi atau opini pribadi.</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm italic text-gray-700">Hindari: "Bunga ini <strong>sangat cantik</strong>." <br>Gunakan: "Bunga ini <strong>berwarna merah cerah</strong>."</p>
</div>
</div>
</div>
</section>
<!-- Slide 6: Aktivitas - Jodohkan Struktur -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-6">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Latihan: Susun Struktur LHO!</h2>
<p class="text-center mb-8 text-gray-500"><strong>Cara bermain:</strong> Klik salah satu teks di sebelah kiri, lalu klik kotak (zona) yang tepat di sebelah kanan untuk menjodohkannya.</p>
<div class="w-full grid md:grid-cols-2 gap-8">
<!-- Pilihan Teks -->
<div class="space-y-4" id="struktur-options">
<div class="struktur-item p-4 rounded-xl bg-white shadow-md border-2 border-transparent text-sm text-gray-700" data-struktur="pu" onclick="selectStruktur(this)">
"Tanaman lidah mertua (Sansevieria) adalah tanaman hias asli daerah tropis yang sangat populer di Indonesia."
</div>
<div class="struktur-item p-4 rounded-xl bg-white shadow-md border-2 border-transparent text-sm text-gray-700" data-struktur="dm" onclick="selectStruktur(this)">
"Tanaman ini sangat bermanfaat karena mampu menyerap polutan berbahaya di udara seperti formaldehida dan benzena."
</div>
<div class="struktur-item p-4 rounded-xl bg-white shadow-md border-2 border-transparent text-sm text-gray-700" data-struktur="db" onclick="selectStruktur(this)">
"Daunnya keras, berbentuk pedang, tegak ke atas, berwarna hijau tua dengan corak garis kuning di bagian pinggirnya."
</div>
</div>
<!-- Target Area -->
<div class="space-y-4">
<div class="drop-zone p-4 flex flex-col gap-2 justify-center" data-target="pu" onclick="dropStruktur('pu')">
<span class="text-xs font-bold bg-emerald-100 text-emerald-700 px-3 py-1 rounded w-fit inline-block">1. Pernyataan Umum</span>
<span class="drop-text text-sm text-gray-400">Klik teks di kiri, lalu klik di sini...</span>
</div>
<div class="drop-zone p-4 flex flex-col gap-2 justify-center" data-target="db" onclick="dropStruktur('db')">
<span class="text-xs font-bold bg-blue-100 text-blue-700 px-3 py-1 rounded w-fit inline-block">2. Deskripsi Bagian</span>
<span class="drop-text text-sm text-gray-400">Klik teks di kiri, lalu klik di sini...</span>
</div>
<div class="drop-zone p-4 flex flex-col gap-2 justify-center" data-target="dm" onclick="dropStruktur('dm')">
<span class="text-xs font-bold bg-purple-100 text-purple-700 px-3 py-1 rounded w-fit inline-block">3. Deskripsi Manfaat</span>
<span class="drop-text text-sm text-gray-400">Klik teks di kiri, lalu klik di sini...</span>
</div>
</div>
</div>
<div id="match-feedback" class="mt-6 p-3 bg-emerald-50 rounded-lg text-center font-bold text-lg hidden w-full"></div>
</section>
<!-- Slide 7: Mengolah Data Observasi -->
<section class="slide fade-in flex-col items-center max-w-5xl w-full" id="slide-7">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Dari Data Menjadi Teks</h2>
<p class="text-center mb-6 text-gray-500">Coba ubah poin-poin hasil observasi di bawah ini menjadi sebuah paragraf teks LHO utuh.</p>
<div class="w-full grid md:grid-cols-5 gap-8">
<div class="md:col-span-2">
<img src="https://images.unsplash.com/photo-1620023604082-fce47f259740?auto=format&fit=crop&w=800&q=80" alt="Putri Malu" class="w-full h-40 object-cover rounded-2xl mb-4 border-4 border-white shadow-md">
<div class="canva-card rounded-xl p-5 bg-white border border-gray-100">
<h4 class="font-bold mb-3 text-teal-700 flex items-center gap-2">📋 Data Observasi:</h4>
<ul class="text-sm space-y-2 list-disc pl-5 text-gray-700">
<li><strong>Objek:</strong> Tanaman Putri Malu (Mimosa pudica)</li>
<li><strong>Daun:</strong> kecil, majemuk, langsung menutup jika disentuh</li>
<li><strong>Batang:</strong> menjalar, memiliki duri-duri halus</li>
<li><strong>Habitat:</strong> tumbuh liar di halaman, butuh tanah lembab</li>
<li><strong>Manfaat:</strong> sering diolah sebagai obat tradisional insomnia</li>
</ul>
</div>
</div>
<div class="md:col-span-3 flex flex-col">
<h4 class="font-bold mb-3 text-gray-800">✍️ Susun paragraf LHO-mu:</h4>
<textarea id="olah-textarea" class="w-full flex-1 min-h-[200px] p-4 rounded-xl border-2 border-gray-200 focus:border-teal-400 focus:ring-4 focus:ring-teal-50 focus:outline-none text-sm resize-none" placeholder="Contoh: Putri malu (Mimosa pudica) adalah tanaman perdu liar yang sering ditemukan di..."></textarea>
<div class="flex justify-between items-center mt-4">
<div id="olah-feedback" class="text-sm font-medium hidden"></div>
<button class="px-6 py-2 bg-teal-500 text-white rounded-lg font-medium hover:bg-teal-600 transition shadow-sm ml-auto" onclick="showOlahFeedback()">Cek Tulisan Saya</button>
</div>
</div>
</div>
</section>
<!-- Slide 8: Kuis Interaktif -->
<section class="slide fade-in flex-col items-center max-w-3xl w-full" id="slide-8">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center text-teal-700">Kuis Evaluasi</h2>
<div class="w-full canva-card bg-white p-8 rounded-2xl border border-gray-100" id="kuis-container">
<div id="kuis-question" class="mb-6 pb-4 border-b border-gray-100">
<p class="font-bold text-xl text-gray-800" id="kuis-q-text"></p>
</div>
<div id="kuis-options" class="space-y-3"></div>
<div class="flex justify-between items-center mt-6 h-10">
<div id="kuis-result" class="font-bold text-lg hidden"></div>
<button id="kuis-next" class="px-6 py-2 bg-slate-800 text-white rounded-lg font-medium hover:bg-slate-700 transition hidden ml-auto" onclick="nextKuis()">Selanjutnya →</button>
</div>
</div>
<div id="kuis-score" class="mt-6 text-center hidden w-full canva-card p-10 rounded-2xl bg-teal-50 border border-teal-100">
<div class="text-5xl mb-4">🏆</div>
<p class="text-3xl font-bold heading-font text-teal-800"></p>
<p class="mt-2 text-teal-600">Kerja bagus menyelesaikan kuis ini!</p>
</div>
</section>
<!-- Slide 9: Asesmen Akhir -->
<section class="slide fade-in flex-col items-center max-w-3xl w-full" id="slide-9">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center text-indigo-700">Asesmen Akhir</h2>
<div class="w-full canva-card bg-white p-8 rounded-2xl border border-gray-100" id="asesmen-akhir-container">
<div id="aa-question" class="mb-6 pb-4 border-b border-gray-100">
<p class="font-bold text-xl text-gray-800" id="aa-q-text"></p>
</div>
<div id="aa-options" class="space-y-3"></div>
<div class="flex justify-between items-center mt-6 h-10">
<div id="aa-result" class="font-bold text-lg hidden"></div>
<button id="aa-next" class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition hidden ml-auto" onclick="nextAA()">Selanjutnya →</button>
</div>
</div>
<div id="aa-score" class="mt-6 text-center hidden w-full canva-card p-10 rounded-2xl bg-indigo-50 border border-indigo-100">
<div class="text-5xl mb-4">💯</div>
<p class="text-3xl font-bold heading-font text-indigo-800"></p>
<p class="mt-2 text-indigo-600">Kamu telah menyelesaikan seluruh asesmen!</p>
</div>
</section>
<!-- Slide 10: Refleksi -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-10">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center">Refleksi Belajar</h2>
<div class="w-full grid md:grid-cols-2 gap-8 items-center">
<div class="rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=800&q=80" alt="Refleksi" class="w-full h-64 object-cover">
</div>
<div class="space-y-4 canva-card p-6 bg-white rounded-2xl border-t-4 border-amber-400">
<h3 class="font-bold text-lg text-gray-800">Mari Berbagi!</h3>
<p class="text-gray-600 font-medium text-sm">Apa hal baru yang paling menarik yang kamu pelajari tentang Teks LHO hari ini?</p>
<textarea id="refleksi-textarea" class="w-full h-32 p-3 rounded-xl border-2 border-gray-200 focus:border-amber-400 focus:outline-none text-sm resize-none" placeholder="Tuliskan kesan, pendapat, atau kesimpulanmu di sini..."></textarea>
<button class="w-full py-3 bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-lg font-bold hover:opacity-90 transition shadow-sm" onclick="submitRefleksi()">Kirim Refleksi ✨</button>
<div id="refleksi-feedback" class="p-3 bg-green-50 text-sm text-green-700 font-bold rounded-lg text-center hidden border border-green-200">
Terima kasih! Refleksimu sudah tersimpan dengan baik 🎉
</div>
</div>
</div>
</section>
<!-- Slide 11: Panduan Guru -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-11">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-6 text-center text-slate-700">Panduan Mengajar Guru</h2>
<div class="w-full grid md:grid-cols-3 gap-6">
<div class="col-span-1 rounded-2xl overflow-hidden shadow-md">
<img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&w=600&q=80" alt="Guru" class="w-full h-full object-cover min-h-[250px]">
</div>
<div class="col-span-2 canva-card rounded-2xl p-6 bg-white space-y-4 border border-slate-100">
<div class="p-3 bg-slate-50 rounded-lg">
<h4 class="font-bold text-emerald-700 flex items-center gap-2"><span>📌</span> Apersepsi (Slide 1-2):</h4>
<p class="text-sm text-slate-600 mt-1">Pancing siswa berbagi pengalaman mengamati objek di sekitar (misal: kantin/taman). Tekankan perbedaan antara fakta (yang bisa dibuktikan) dan opini (pendapat).</p>
</div>
<div class="p-3 bg-slate-50 rounded-lg">
<h4 class="font-bold text-blue-700 flex items-center gap-2"><span>📌</span> Aktivitas Struktur (Slide 6):</h4>
<p class="text-sm text-slate-600 mt-1">Beri waktu 3-5 menit untuk interaksi. Dorong siswa berdiskusi dengan teman sebangku sebelum menjodohkan teks.</p>
</div>
<div class="p-3 bg-slate-50 rounded-lg">
<h4 class="font-bold text-purple-700 flex items-center gap-2"><span>📌</span> Mengolah Data (Slide 7):</h4>
<p class="text-sm text-slate-600 mt-1">Fokus pada bagaimana siswa menggunakan kopula ("adalah/merupakan") dan menghubungkan fakta menjadi paragraf kohesif tanpa memasukkan opini pribadi.</p>
</div>
</div>
</div>
</section>
<!-- Slide 12: Penutup -->
<section class="slide fade-in flex-col items-center justify-center max-w-4xl w-full text-center h-[60vh]" id="slide-12">
<div class="text-7xl mb-6 drop-shadow-sm">🎓</div>
<h2 class="heading-font text-4xl md:text-5xl font-black mb-4 text-emerald-600">Kamu Luar Biasa!</h2>
<p class="text-xl opacity-80 mb-8 max-w-lg mx-auto text-slate-600">Kamu telah menyelesaikan seluruh materi Teks Laporan Hasil Observasi (LHO) hari ini dengan sangat baik.</p>
<div class="bg-white p-6 rounded-2xl shadow-lg border-2 border-emerald-100 max-w-md mx-auto">
<p class="font-bold text-slate-800">"Teruslah mengamati dunia di sekitarmu dengan cermat layaknya mata seorang ilmuwan sejati!"</p>
</div>
</section>
</main>
<!-- Navigation -->
<nav class="fixed bottom-0 left-0 w-full bg-white/95 backdrop-blur-md border-t p-4 flex justify-between items-center z-50 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
<button id="btn-prev" class="px-5 py-2 rounded-lg border-2 border-gray-200 text-gray-600 font-bold hover:bg-gray-50 transition disabled:opacity-30 disabled:cursor-not-allowed" onclick="prevSlide()" disabled> ← Sebelumnya </button>
<span id="slide-counter" class="text-sm font-bold text-gray-500 bg-gray-100 px-4 py-2 rounded-full">1 / 12</span>
<button id="btn-next" class="px-5 py-2 rounded-lg bg-teal-500 text-white font-bold hover:bg-teal-600 shadow-sm transition" onclick="nextSlide()"> Selanjutnya → </button>
</nav>
<script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script>
<script>
// Slide navigation
let currentSlide = 1;
const totalSlides = 12;
function showSlide(n) {
document.querySelectorAll('.slide').forEach(s => s.classList.remove('active'));
document.getElementById(`slide-${n}`).classList.add('active');
document.getElementById('slide-counter').textContent = `${n} / ${totalSlides}`;
document.getElementById('progress-bar').style.width = `${(n / totalSlides) * 100}%`;
document.getElementById('btn-prev').disabled = n === 1;
if (n === totalSlides) {
document.getElementById('btn-next').style.display = 'none';
} else {
document.getElementById('btn-next').style.display = 'block';
document.getElementById('btn-next').disabled = false;
}
}
function nextSlide() { if (currentSlide < totalSlides) { currentSlide++; showSlide(currentSlide); } }
function prevSlide() { if (currentSlide > 1) { currentSlide--; showSlide(currentSlide); } }
// Asesmen Awal - Fakta vs Opini
function checkFaktaOpini(btn, isCorrect) {
const parent = btn.parentElement;
if (parent.querySelector('.correct, .incorrect')) return; // Prevent multiple clicks
if (isCorrect) {
btn.classList.add('correct');
} else {
btn.classList.add('incorrect');
// Show the correct answer automatically
setTimeout(() => {
parent.querySelectorAll('.option-btn').forEach(b => {
if (b !== btn) b.classList.add('correct');
});
}, 300);
}
}
// Aktivitas Jodohkan Struktur (Drag and Drop / Click to Match)
let selectedStruktur = null;
function selectStruktur(el) {
if(el.classList.contains('placed')) return; // Can't select already placed item
document.querySelectorAll('.struktur-item').forEach(i => i.style.outline = 'none');
selectedStruktur = el;
el.style.outline = '3px solid #14b8a6'; // Teal outline
}
function dropStruktur(target) {
if (!selectedStruktur) return;
const zone = document.querySelector(`[data-target="${target}"]`);
if (zone.classList.contains('filled')) return; // Zone already has an answer
const struktur = selectedStruktur.dataset.struktur;
if (struktur === target) {
zone.classList.add('filled');
// Limit string length for aesthetic
let txt = selectedStruktur.textContent.trim();
if(txt.length > 70) txt = txt.substring(0, 70) + '...';
zone.querySelector('.drop-text').textContent = txt;
zone.querySelector('.drop-text').classList.remove('text-gray-400');
zone.querySelector('.drop-text').classList.add('text-emerald-800', 'font-medium');
selectedStruktur.classList.add('placed');
} else {
zone.style.borderColor = '#ef4444'; // Red error border
setTimeout(() => { zone.style.borderColor = '#cbd5e1'; }, 600); // Reset border
}
selectedStruktur.style.outline = 'none';
selectedStruktur = null;
// Check if all are matched
if (document.querySelectorAll('.drop-zone.filled').length === 3) {
const fb = document.getElementById('match-feedback');
fb.textContent = '🎉 Luar biasa! Seluruh struktur LHO sudah tersusun berurutan dengan benar!';
fb.classList.remove('hidden');
fb.classList.add('text-emerald-700');
}
}
// Mengolah Data Feedback
function showOlahFeedback() {
const text = document.getElementById('olah-textarea').value;
const fb = document.getElementById('olah-feedback');
fb.classList.remove('hidden');
if (text.length < 30) {
fb.textContent = '⚠️ Tulisanmu masih terlalu singkat. Coba gabungkan semua data menjadi paragraf utuh!';
fb.className = 'text-sm font-bold text-orange-500';
} else {
let score = 0;
if (text.toLowerCase().includes('adalah') || text.toLowerCase().includes('merupakan')) score++;
if (text.toLowerCase().includes('majemuk') || text.toLowerCase().includes('menjalar') || text.toLowerCase().includes('duri')) score++;
if (text.toLowerCase().includes('manfaat') || text.toLowerCase().includes('obat') || text.toLowerCase().includes('insomnia')) score++;
if (score === 0) {
fb.textContent = '💡 Jangan lupa gunakan kata "adalah/merupakan" untuk definisi dan tuliskan manfaatnya.';
fb.className = 'text-sm font-bold text-blue-500';
} else if (score === 1 || score === 2) {
fb.textContent = '👍 Bagus! Coba pastikan ciri fisik (daun/batang) dan manfaatnya juga kamu tulis semua ya.';
fb.className = 'text-sm font-bold text-teal-600';
} else {
fb.textContent = '🌟 Sempurna! Paragrafmu sudah mengandung definisi, deskripsi bagian, dan manfaat sesuai kaidah LHO.';
fb.className = 'text-sm font-bold text-emerald-600';
}
}
}
// Kuis Interaktif
const kuisData = [
{ q: 'Bagian teks LHO yang berisi gambaran umum tentang objek yang diobservasi disebut...', opts: ['Deskripsi Bagian', 'Pernyataan Umum', 'Deskripsi Manfaat', 'Kesimpulan Akhir'], answer: 1 },
{ q: 'Ciri bahasa teks LHO sering menggunakan istilah teknis atau ilmiah. Manakah yang termasuk kata ilmiah?', opts: ['Sangat cantik', 'Fotosintesis', 'Super keren', 'Besar sekali'], answer: 1 },
{ q: '"Harimau Sumatera adalah hewan karnivora endemik pulau Sumatera." Kalimat tersebut termasuk contoh...', opts: ['Kalimat opini', 'Kalimat definisi', 'Kalimat narasi', 'Kalimat tanya'], answer: 1 },
{ q: 'Teks Laporan Hasil Observasi memiliki sifat yang penting, yaitu...', opts: ['Subjektif dan penuh emosi', 'Objektif dan berdasarkan fakta', 'Imajinatif dan seperti puisi', 'Menarik simpati pembaca'], answer: 1 }
];
let kuisIdx = 0, kuisScore = 0;
function renderKuis() {
if (kuisIdx >= kuisData.length) {
document.getElementById('kuis-container').classList.add('hidden');
const sc = document.getElementById('kuis-score');
sc.classList.remove('hidden');
sc.querySelector('p').textContent = `Skormu: ${kuisScore} / ${kuisData.length}`;
return;
}
const k = kuisData[kuisIdx];
document.getElementById('kuis-q-text').textContent = `Soal ${kuisIdx + 1}: ${k.q}`;
const container = document.getElementById('kuis-options');
container.innerHTML = '';
k.opts.forEach((opt, i) => {
const btn = document.createElement('button');
btn.className = 'option-btn w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-100 text-left font-medium text-slate-700 hover:bg-slate-100';
btn.textContent = opt;
btn.onclick = () => answerKuis(i, k.answer);
container.appendChild(btn);
});
document.getElementById('kuis-result').classList.add('hidden');
document.getElementById('kuis-next').classList.add('hidden');
}
function answerKuis(selected, correct) {
const btns = document.querySelectorAll('#kuis-options .option-btn');
if (btns[0].classList.contains('correct') || btns[0].classList.contains('incorrect')) return; // Prevent changing answer
btns.forEach((b, i) => {
if (i === correct) b.classList.add('correct');
else if (i === selected) b.classList.add('incorrect');
b.style.pointerEvents = 'none'; // disable clicks after answered
});
if (selected === correct) kuisScore++;
const res = document.getElementById('kuis-result');
res.textContent = selected === correct ? '✅ Tepat Sekali!' : '❌ Ops, jawaban yang benar berwarna hijau!';
res.className = `font-bold text-lg ${selected === correct ? 'text-emerald-600' : 'text-red-500'}`;
res.classList.remove('hidden');
document.getElementById('kuis-next').classList.remove('hidden');
}
function nextKuis() { kuisIdx++; renderKuis(); }
// Asesmen Akhir
const aaData = [
{ q: 'Urutan struktur teks Laporan Hasil Observasi yang benar adalah...', opts: ['Deskripsi Bagian → Pernyataan Umum → Deskripsi Manfaat', 'Pernyataan Umum → Deskripsi Bagian → Deskripsi Manfaat', 'Deskripsi Manfaat → Deskripsi Bagian → Pernyataan Umum'], answer: 1 },
{ q: '"Daun sirih memiliki bentuk menyerupai jantung, berwarna hijau mengkilap, dan tepinya rata." Paragraf ini termasuk bagian...', opts: ['Pernyataan Umum', 'Deskripsi Bagian', 'Deskripsi Manfaat'], answer: 1 },
{ q: 'Manakah dari opsi berikut yang BUKAN termasuk ciri kebahasaan teks LHO?', opts: ['Menggunakan kata ilmiah/teknis', 'Menggunakan kalimat deskripsi objektif', 'Menggunakan bahasa emotif dan kata pujian (sangat indah)'], answer: 2 },
{ q: 'Sumber data yang paling valid dan tepat untuk diolah menjadi teks LHO adalah...', opts: ['Cerita khayalan teman sekelas', 'Hasil pengamatan fisik langsung dan literatur faktual', 'Pendapat pribadi penulis tentang suatu benda'], answer: 1 },
{ q: '"Paus biru merupakan hewan mamalia laut terbesar di dunia dari ordo Cetacea." Kalimat tersebut mengandung ciri kebahasaan berupa...', opts: ['Kalimat opini dan majas', 'Kalimat definisi dan istilah ilmiah', 'Kalimat persuasif dan kata ganti'], answer: 1 }
];
let aaIdx = 0, aaScore = 0;
function renderAA() {
if (aaIdx >= aaData.length) {
document.getElementById('asesmen-akhir-container').classList.add('hidden');
const sc = document.getElementById('aa-score');
sc.classList.remove('hidden');
const finalGrade = (aaScore / aaData.length) * 100;
sc.querySelector('p').textContent = `Nilai Akhir: ${finalGrade}`;
return;
}
const a = aaData[aaIdx];
document.getElementById('aa-q-text').textContent = `Pertanyaan ${aaIdx + 1}: ${a.q}`;
const container = document.getElementById('aa-options');
container.innerHTML = '';
a.opts.forEach((opt, i) => {
const btn = document.createElement('button');
btn.className = 'option-btn w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-100 text-left font-medium text-slate-700 hover:bg-slate-100';
btn.textContent = opt;
btn.onclick = () => answerAA(i, a.answer);
container.appendChild(btn);
});
document.getElementById('aa-result').classList.add('hidden');
document.getElementById('aa-next').classList.add('hidden');
}
function answerAA(selected, correct) {
const btns = document.querySelectorAll('#aa-options .option-btn');
if (btns[0].classList.contains('correct') || btns[0].classList.contains('incorrect')) return;
btns.forEach((b, i) => {
if (i === correct) b.classList.add('correct');
else if (i === selected) b.classList.add('incorrect');
b.style.pointerEvents = 'none';
});
if (selected === correct) aaScore++;
const res = document.getElementById('aa-result');
res.textContent = selected === correct ? '✅ Benar!' : '❌ Jawaban salah.';
res.className = `font-bold text-lg ${selected === correct ? 'text-emerald-600' : 'text-red-500'}`;
res.classList.remove('hidden');
document.getElementById('aa-next').classList.remove('hidden');
}
function nextAA() { aaIdx++; renderAA(); }
// Refleksi
function submitRefleksi() {
const text = document.getElementById('refleksi-textarea').value;
if (text.length > 5) {
document.getElementById('refleksi-feedback').classList.remove('hidden');
} else {
alert("Silakan tulis refleksimu terlebih dahulu sebelum mengirim.");
}
}
// Init
document.addEventListener('DOMContentLoaded', () => {
renderKuis();
renderAA();
lucide.createIcons();
// Allow keyboard navigation using left/right arrows
document.addEventListener('keydown', (e) => {
if(e.key === 'ArrowRight' && currentSlide < totalSlides) {
nextSlide();
} else if(e.key === 'ArrowLeft' && currentSlide > 1) {
prevSlide();
}
});
});
</script>
</body>
</html>
.png)
Kelas 8
Matematika
Persamaan dan Pertidaksamaan Linear Satu Variabel
<!doctype html>
<html lang="id">
<head>
<script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script>
<script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Pembelajaran PLSV dan PtLSV</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<style>
* { font-family: 'DM Sans', sans-serif; }
body { background-color: #111827; color: #f9fafb; }
.slide { display: none; }
.slide.active { display: flex; }
.quiz-option { transition: all 0.3s; cursor: pointer; }
.quiz-option.correct { background: #22c55e !important; color: white !important; border-color: #16a34a !important; }
.quiz-option.wrong { background: #ef4444 !important; color: white !important; border-color: #dc2626 !important; }
.quiz-option.show-correct { border: 3px solid #22c55e !important; background: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; }
.quiz-option:disabled { cursor: not-allowed; opacity: 0.8; }
.num-circle { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.feedback-box { padding: 12px 16px; border-radius: 8px; margin-top: 12px; font-weight: 500; display: none; }
.feedback-box.show { display: block; }
input[type="number"], textarea { color: white; background-color: #374151; }
</style>
</head>
<body data-template-id="__page-root" class="min-h-screen flex flex-col bg-gray-900 text-white">
<header data-template-id="header-bg" class="canva-header px-4 py-3 flex items-center justify-between shadow-lg bg-gray-800">
<div class="flex items-center gap-3">
<span class="text-2xl">⚖️</span>
<h1 data-template-id="app-title" class="canva-text text-lg font-bold text-white">PLSV & PtLSV</h1>
</div>
<div class="flex items-center gap-2">
<span id="slide-counter" class="text-gray-300 text-sm font-medium">1 / 24</span>
</div>
</header>
<div class="w-full h-1.5 bg-gray-700">
<div id="progress-bar" class="h-full bg-yellow-400 transition-all duration-300" style="width:4%"></div>
</div>
<main class="flex-1 overflow-y-auto" id="slides-container">
<!-- SLIDE 1: Cover -->
<div class="slide active flex-col items-center justify-center text-center p-6 gap-4" data-slide="1">
<div class="text-7xl mb-2">⚖️</div>
<h2 data-template-id="cover-title" class="canva-text text-3xl font-black text-white">Persamaan & Pertidaksamaan</h2>
<p data-template-id="cover-subtitle" class="canva-text text-lg text-gray-300">Linear Satu Variabel</p>
<p data-template-id="cover-class" class="canva-text text-sm text-gray-400">Matematika SMP</p>
</div>
<!-- SLIDE 2: Tujuan Pembelajaran -->
<div class="slide flex-col p-5 gap-3" data-slide="2">
<h2 data-template-id="tp-title" class="canva-text text-xl font-bold mb-2 text-white">Tujuan Pembelajaran</h2>
<div class="space-y-3">
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">1</span>
<p data-template-id="tp-1" class="canva-text text-sm text-gray-200 mt-1">Membedakan kalimat terbuka dan tertutup.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">2</span>
<p data-template-id="tp-2" class="canva-text text-sm text-gray-200 mt-1">Membuat model matematika dari masalah kontekstual.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">3</span>
<p data-template-id="tp-3" class="canva-text text-sm text-gray-200 mt-1">Menyelesaikan Persamaan Linear Satu Variabel (PLSV).</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">4</span>
<p data-template-id="tp-4" class="canva-text text-sm text-gray-200 mt-1">Menyelesaikan Pertidaksamaan Linear Satu Variabel (PtLSV).</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">5</span>
<p data-template-id="tp-5" class="canva-text text-sm text-gray-200 mt-1">Memecahkan masalah sehari-hari menggunakan PLSV dan PtLSV.</p>
</div>
</div>
</div>
<!-- SLIDE 3: Apersepsi -->
<div class="slide flex-col p-5 gap-4" data-slide="3">
<h2 data-template-id="aper-title" class="canva-text text-xl font-bold text-white">Apersepsi</h2>
<img data-template-id="aper-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="aper-question" class="canva-text text-base leading-relaxed text-gray-200"></p>
<div class="bg-gray-800 p-4 rounded-xl border border-gray-700">
<p data-template-id="aper-hint" class="canva-text text-sm italic text-gray-300"></p>
</div>
</div>
<!-- SLIDE 4: Apersepsi 2 -->
<div class="slide flex-col p-5 gap-4" data-slide="4">
<h2 data-template-id="aper2-title" class="canva-text text-lg font-bold text-white"></h2>
<img data-template-id="aper2-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="aper2-question" class="canva-text text-base text-gray-200"></p>
</div>
<!-- SLIDE 5: Asesmen Awal -->
<div class="slide flex-col p-5 gap-4" data-slide="5">
<h2 data-template-id="pretest-title" class="canva-text text-xl font-bold text-white">Asesmen Awal</h2>
<p data-template-id="pretest-desc" class="canva-text text-sm text-gray-400">Mari kita uji pengetahuan awalmu!</p>
<div class="space-y-3" id="pretest-q1">
<p class="font-medium text-white text-sm">1. Manakah yang termasuk kalimat terbuka?</p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','a',true)">x + 3 = 7</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','b',false)">2 + 3 = 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','c',false)">4 > 2</button>
</div>
<div class="feedback-box" id="pretest-q1-feedback"></div>
</div>
<div class="space-y-3" id="pretest-q2">
<p class="font-medium text-white text-sm">2. Nilai x dari x + 5 = 8 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','2',false)">2</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','3',true)">3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','5',false)">5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','13',false)">13</button>
</div>
<div class="feedback-box" id="pretest-q2-feedback"></div>
</div>
<div class="space-y-3" id="pretest-q3">
<p class="font-medium text-white text-sm">3. Tanda yang tepat untuk pertidaksamaan: x ... 5</p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','=',false)">=</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','<',true)"><, >, ≤, ≥</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','+',false)">+</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','×',false)">×</button>
</div>
<div class="feedback-box" id="pretest-q3-feedback"></div>
</div>
</div>
<!-- SLIDE 6: TP1 - Kalimat Terbuka & Tertutup -->
<div class="slide flex-col p-5 gap-4" data-slide="6">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1</div>
<h2 data-template-id="tp1-title" class="canva-text text-xl font-bold text-white">Kalimat Terbuka & Tertutup</h2>
<p data-template-id="tp1-intro" class="canva-text text-base leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<div class="bg-blue-900/30 border border-blue-700/50 p-3 rounded-lg">
<p class="font-bold text-blue-300 text-sm">Kalimat Terbuka</p>
<p class="text-blue-100 text-xs mt-1">Kalimat yang memuat variabel dan belum diketahui nilai kebenarannya.</p>
<p class="text-blue-400 text-xs mt-1">Contoh: x + 2 = 5, y > 3</p>
</div>
<div class="bg-green-900/30 border border-green-700/50 p-3 rounded-lg">
<p class="font-bold text-green-300 text-sm">Kalimat Tertutup</p>
<p class="text-green-100 text-xs mt-1">Kalimat yang sudah jelas benar atau salah.</p>
<p class="text-green-400 text-xs mt-1">Contoh: 3 + 4 = 7 (benar), 5 > 8 (salah)</p>
</div>
</div>
</div>
<!-- SLIDE 7: TP1 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="7">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1 - Aktivitas</div>
<h2 data-template-id="tp1-act-title" class="canva-text text-lg font-bold text-white">Latihan Mandiri</h2>
<p data-template-id="tp1-act-desc" class="canva-text text-sm text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Kelompokkan kalimat berikut! Ketuk T (Terbuka) atau U (Tertutup)</p>
<div class="space-y-2" id="tp1-activity">
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="terbuka">
<span class="font-bold text-gray-100 text-sm">2x - 1 = 9</span>
<div class="flex gap-2">
<button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button>
<button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="tertutup">
<span class="font-bold text-gray-100 text-sm">8 + 2 = 10</span>
<div class="flex gap-2">
<button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button>
<button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="terbuka">
<span class="font-bold text-gray-100 text-sm">y + 4 > 10</span>
<div class="flex gap-2">
<button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button>
<button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-type="tertutup">
<span class="font-bold text-gray-100 text-sm">7 - 3 = 5</span>
<div class="flex gap-2">
<button onclick="checkType(this,true)" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-blue-800">T</button>
<button onclick="checkType(this,false)" class="bg-green-900/50 text-green-400 border border-green-700/50 px-3 py-1 rounded-lg font-bold text-sm hover:bg-green-800">U</button>
</div>
</div>
</div>
</div>
</div>
<!-- SLIDE 8: Kuis TP1 -->
<div class="slide flex-col p-5 gap-4" data-slide="8">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 1</div>
<h2 data-template-id="quiz1-title" class="canva-text text-lg font-bold text-white">Kuis Kalimat Terbuka</h2>
<div id="quiz1-container">
<div class="space-y-3" id="quiz1-q1">
<p class="font-medium text-white text-sm">1. Manakah kalimat terbuka?</p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q1','a',false)">3 + 5 = 8</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q1','b',true)">3x + 1 = 7</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q1','c',false)">10 > 9</button>
</div>
<div class="feedback-box" id="quiz1-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz1-q2">
<p class="font-medium text-white text-sm">2. "4 + 6 = 10" termasuk kalimat... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q2','terbuka',false)">Terbuka</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz1-q2','tertutup',true)">Tertutup</button>
</div>
<div class="feedback-box" id="quiz1-q2-feedback"></div>
</div>
</div>
<div id="quiz1-random" class="mt-4"></div>
<button id="quiz1-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz1')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 9: TP2 - Memodelkan Masalah -->
<div class="slide flex-col p-5 gap-4" data-slide="9">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2</div>
<h2 data-template-id="tp2-title" class="canva-text text-xl font-bold text-white">Memodelkan Masalah</h2>
<p data-template-id="tp2-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-bold text-sm">Contoh:</p>
<div class="bg-yellow-900/30 border border-yellow-700/50 p-3 rounded-lg">
<p class="text-gray-200 text-sm">"Rina membeli 3 buku dengan harga yang sama. Total Rp45.000." </p>
<p class="text-yellow-400 text-xs mt-1">→ Model: <strong>3x = 45.000</strong></p>
</div>
<div class="bg-orange-900/30 border border-orange-700/50 p-3 rounded-lg">
<p class="text-gray-200 text-sm">"Uang Budi ditambah Rp5.000 menjadi lebih dari Rp20.000." </p>
<p class="text-orange-400 text-xs mt-1">→ Model: <strong>x + 5.000 > 20.000</strong></p>
</div>
</div>
</div>
<!-- SLIDE 10: TP2 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="10">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2 - Aktivitas</div>
<h2 data-template-id="tp2-act-title" class="canva-text text-lg font-bold text-white">Susun Model</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Cocokkan cerita dengan model matematikanya!</p>
<div class="space-y-2" id="tp2-activity">
<div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="model-q1">
<p class="text-gray-100 text-sm mb-2">"Umur Ani 5 tahun lebih tua dari Budi. Umur Ani 17 tahun." </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q1','a',true)">x + 5 = 17</button>
<button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q1','b',false)">x - 5 = 17</button>
</div>
<div class="feedback-box text-xs" id="model-q1-feedback"></div>
</div>
<div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="model-q2">
<p class="text-gray-100 text-sm mb-2">"Dua kali uang saku Doni kurang dari Rp30.000"</p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q2','a',false)">2x = 30.000</button>
<button class="quiz-option bg-blue-900/50 border-2 border-blue-700/50 rounded-lg p-2 text-blue-300 font-medium text-sm hover:bg-blue-800" onclick="checkQuiz(this,'model-q2','b',true)">2x < 30.000</button>
</div>
<div class="feedback-box text-xs" id="model-q2-feedback"></div>
</div>
</div>
</div>
</div>
<!-- SLIDE 11: Kuis TP2 -->
<div class="slide flex-col p-5 gap-4" data-slide="11">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 2</div>
<h2 data-template-id="quiz2-title" class="canva-text text-lg font-bold text-white">Kuis Model Matematika</h2>
<div id="quiz2-container">
<div class="space-y-3" id="quiz2-q1">
<p class="font-medium text-white text-sm">1. "Harga 4 pensil sama dengan Rp12.000" → Model?</p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q1','a',true)">4x = 12.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q1','b',false)">x + 4 = 12.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q1','c',false)">4 + x = 12.000</button>
</div>
<div class="feedback-box" id="quiz2-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz2-q2">
<p class="font-medium text-white text-sm">2. "Uang Sari ditambah Rp10.000 paling banyak Rp50.000" → Model?</p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q2','a',false)">x + 10.000 > 50.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q2','b',true)">x + 10.000 ≤ 50.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz2-q2','c',false)">x + 10.000 = 50.000</button>
</div>
<div class="feedback-box" id="quiz2-q2-feedback"></div>
</div>
</div>
<div id="quiz2-random" class="mt-4"></div>
<button id="quiz2-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz2')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 12: TP3 - Penyelesaian PLSV -->
<div class="slide flex-col p-5 gap-4" data-slide="12">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3</div>
<h2 data-template-id="tp3-title" class="canva-text text-xl font-bold text-white">Penyelesaian PLSV</h2>
<p data-template-id="tp3-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-bold text-sm">Langkah Penyelesaian:</p>
<div class="space-y-2 text-sm text-gray-400">
<p>Selesaikan: <strong>2x + 3 = 11</strong></p>
<p>1️⃣ 2x + 3 - 3 = 11 - 3</p>
<p>2️⃣ 2x = 8</p>
<p>3️⃣ x = 8 ÷ 2 = <strong class="text-white">4</strong> ✓</p>
</div>
</div>
</div>
<!-- SLIDE 13: Aktivitas TP3 -->
<div class="slide flex-col p-5 gap-4" data-slide="13">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3 - Aktivitas</div>
<h2 data-template-id="tp3-act-title" class="canva-text text-lg font-bold text-white">Latihan PLSV</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Selesaikan: 3x - 6 = 12</p>
<div class="space-y-2">
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>3x = 12 + 6 =</span>
<input type="number" id="plsv-step1" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
</div>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>x = 18 ÷ 3 =</span>
<input type="number" id="plsv-step2" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
</div>
</div>
<button onclick="checkPLSV()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="plsv-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 14: Kuis TP3 -->
<div class="slide flex-col p-5 gap-4" data-slide="14">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 3</div>
<h2 data-template-id="quiz3-title" class="canva-text text-lg font-bold text-white">Kuis PLSV</h2>
<div id="quiz3-container">
<div class="space-y-3" id="quiz3-q1">
<p class="font-medium text-white text-sm">1. Penyelesaian dari 4x + 2 = 18 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','3',false)">x = 3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','4',true)">x = 4</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','5',false)">x = 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q1','6',false)">x = 6</button>
</div>
<div class="feedback-box" id="quiz3-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz3-q2">
<p class="font-medium text-white text-sm">2. Penyelesaian dari 5x - 10 = 25 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','5',false)">x = 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','7',true)">x = 7</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','3',false)">x = 3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz3-q2','8',false)">x = 8</button>
</div>
<div class="feedback-box" id="quiz3-q2-feedback"></div>
</div>
</div>
<div id="quiz3-random" class="mt-4"></div>
<button id="quiz3-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz3')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 15: TP4 - Penyelesaian PtLSV -->
<div class="slide flex-col p-5 gap-4" data-slide="15">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 4</div>
<h2 data-template-id="tp4-title" class="canva-text text-xl font-bold text-white">Penyelesaian PtLSV</h2>
<p data-template-id="tp4-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-bold text-sm">Langkah Penyelesaian:</p>
<div class="space-y-2 text-sm text-gray-400">
<p>Selesaikan: <strong class="text-white">2x + 1 < 9</strong></p>
<p>1️⃣ 2x < 9 - 1</p>
<p>2️⃣ 2x < 8</p>
<p>3️⃣ x < 4</p>
<p class="text-xs text-gray-500">Himpunan penyelesaian: {x | x < 4, x ∈ R}</p>
</div>
<div class="bg-red-900/30 border border-red-700/50 p-3 rounded-lg mt-2">
<p class="text-red-400 text-xs font-bold">⚠️ Aturan penting:</p>
<p class="text-red-200 text-xs">Jika dikali/dibagi bilangan negatif, tanda pertidaksamaan DIBALIK!</p>
<p class="text-red-300 text-xs">-2x > 6 → x < -3</p>
</div>
</div>
</div>
<!-- SLIDE 16: TP4 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="16">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 4 - Aktivitas</div>
<h2 data-template-id="tp4-act-title" class="canva-text text-lg font-bold text-white">Latihan PtLSV</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Selesaikan: x + 7 ≤ 12</p>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>x ≤ 12 - 7 → x ≤</span>
<input type="number" id="ptlsv-ans" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
</div>
<button onclick="checkPtLSV()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="ptlsv-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 17: Kuis TP4 -->
<div class="slide flex-col p-5 gap-4" data-slide="17">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 4</div>
<h2 data-template-id="quiz4-title" class="canva-text text-lg font-bold text-white">Kuis PtLSV</h2>
<div id="quiz4-container">
<div class="space-y-3" id="quiz4-q1">
<p class="font-medium text-white text-sm">1. Penyelesaian dari 3x - 6 > 9 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x>5',true)">x > 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x>3',false)">x > 3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x<5',false)">x < 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q1','x>1',false)">x > 1</button>
</div>
<div class="feedback-box" id="quiz4-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz4-q2">
<p class="font-medium text-white text-sm">2. Penyelesaian dari -2x ≥ 8 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≥4',false)">x ≥ 4</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≤-4',true)">x ≤ -4</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≥-4',false)">x ≥ -4</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz4-q2','x≤4',false)">x ≤ 4</button>
</div>
<div class="feedback-box" id="quiz4-q2-feedback"></div>
</div>
</div>
<div id="quiz4-random" class="mt-4"></div>
<button id="quiz4-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz4')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 18: TP5 - Memecahkan Masalah -->
<div class="slide flex-col p-5 gap-4" data-slide="18">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5</div>
<h2 data-template-id="tp5-title" class="canva-text text-xl font-bold text-white">Memecahkan Masalah</h2>
<img data-template-id="tp5-image" class="canva-image w-full h-32 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="tp5-desc" class="canva-text text-sm leading-relaxed text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-bold text-sm">Contoh Soal Cerita:</p>
<div class="bg-indigo-900/30 border border-indigo-700/50 p-3 rounded-lg text-sm text-gray-200">
<p>"Seorang penjual memiliki uang Rp50.000. Ia membeli x buah jeruk seharga Rp5.000/buah. Sisa uangnya tidak kurang dari Rp20.000. Berapa paling banyak jeruk yang bisa dibeli?" </p>
<p class="mt-2 text-xs text-indigo-300">Model: 50.000 - 5.000x ≥ 20.000</p>
<p class="text-xs text-indigo-300">-5.000x ≥ -30.000 → x ≤ 6</p>
<p class="text-xs text-indigo-400 font-bold">Jawab: Paling banyak 6 jeruk</p>
</div>
</div>
</div>
<!-- SLIDE 19: TP5 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="19">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5 - Aktivitas</div>
<h2 data-template-id="tp5-act-title" class="canva-text text-lg font-bold text-white">Studi Kasus</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Andi memiliki uang Rp80.000. Harga satu buku Rp12.000. Berapa buku paling banyak yang bisa dibeli Andi?</p>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>12.000x ≤ 80.000 → x ≤</span>
<input type="number" id="context-ans" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
<span>buku</span>
</div>
<button onclick="checkContext()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="context-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 20: Kuis TP5 -->
<div class="slide flex-col p-5 gap-4" data-slide="20">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 5</div>
<h2 data-template-id="quiz5-title" class="canva-text text-lg font-bold text-white">Kuis Pemecahan Masalah</h2>
<div id="quiz5-container">
<div class="space-y-3" id="quiz5-q1">
<p class="font-medium text-white text-sm">1. Harga 5 buku dan 1 tas = Rp85.000. Harga tas Rp35.000. Harga 1 buku?</p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','8000',false)">Rp8.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','10000',true)">Rp10.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','12000',false)">Rp12.000</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q1','15000',false)">Rp15.000</button>
</div>
<div class="feedback-box" id="quiz5-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz5-q2">
<p class="font-medium text-white text-sm">2. Umur Andi 3 tahun lagi menjadi lebih dari 15. Umur Andi sekarang paling sedikit... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','12',false)">12 tahun</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','13',true)">13 tahun</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','14',false)">14 tahun</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'quiz5-q2','15',false)">15 tahun</button>
</div>
<div class="feedback-box" id="quiz5-q2-feedback"></div>
</div>
</div>
<div id="quiz5-random" class="mt-4"></div>
<button id="quiz5-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz5')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 21: Rangkuman -->
<div class="slide flex-col p-5 gap-4" data-slide="21">
<h2 data-template-id="summary-title" class="canva-text text-xl font-bold text-white">Rangkuman</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3 text-sm">
<div class="bg-blue-900/30 border border-blue-700/50 p-3 rounded-lg">
<p class="font-bold text-blue-300">📌 Kalimat Terbuka vs Tertutup</p>
<p class="text-blue-100 text-xs">Terbuka = ada variabel, Tertutup = sudah pasti benar/salah</p>
</div>
<div class="bg-yellow-900/30 border border-yellow-700/50 p-3 rounded-lg">
<p class="font-bold text-yellow-300">📌 PLSV: ax + b = c</p>
<p class="text-yellow-100 text-xs">Penyelesaian tunggal, gunakan operasi invers</p>
</div>
<div class="bg-orange-900/30 border border-orange-700/50 p-3 rounded-lg">
<p class="font-bold text-orange-300">📌 PtLSV: ax + b < c (atau >, ≤, ≥)</p>
<p class="text-orange-100 text-xs">Penyelesaian berupa himpunan. Kali/bagi negatif → tanda balik!</p>
</div>
</div>
</div>
<!-- SLIDE 22: Asesmen Akhir -->
<div class="slide flex-col p-5 gap-4" data-slide="22">
<h2 data-template-id="final-title" class="canva-text text-xl font-bold text-white">Asesmen Akhir</h2>
<p data-template-id="final-desc" class="canva-text text-sm text-gray-400">Uji Pemahaman Total!</p>
<div class="space-y-3" id="final-q1">
<p class="font-medium text-white text-sm">1. Penyelesaian 7x - 14 = 21 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','5',true)">x = 5</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','3',false)">x = 3</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','7',false)">x = 7</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q1','1',false)">x = 1</button>
</div>
<div class="feedback-box" id="final-q1-feedback"></div>
</div>
<div class="space-y-3" id="final-q2">
<p class="font-medium text-white text-sm">2. Penyelesaian 2x + 4 ≤ 16 adalah... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x≤6',true)">x ≤ 6</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x≤8',false)">x ≤ 8</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x≥6',false)">x ≥ 6</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q2','x<6',false)">x < 6</button>
</div>
<div class="feedback-box" id="final-q2-feedback"></div>
</div>
<div class="space-y-3" id="final-q3">
<p class="font-medium text-white text-sm">3. Model dari "Tiga kali bilangan ditambah 5 sama dengan 20" adalah... </p>
<div class="grid grid-cols-1 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q3','a',true)">3x + 5 = 20</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q3','b',false)">3(x + 5) = 20</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q3','c',false)">x + 3 + 5 = 20</button>
</div>
<div class="feedback-box" id="final-q3-feedback"></div>
</div>
</div>
<!-- SLIDE 23: Asesmen Akhir Lanjutan -->
<div class="slide flex-col p-5 gap-4" data-slide="23">
<h2 data-template-id="final2-title" class="canva-text text-lg font-bold text-white">Lanjutan Asesmen</h2>
<div class="space-y-3" id="final-q4">
<p class="font-medium text-white text-sm">4. "2x + 1 = 9" termasuk kalimat... </p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q4','terbuka',true)">Terbuka</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q4','tertutup',false)">Tertutup</button>
</div>
<div class="feedback-box" id="final-q4-feedback"></div>
</div>
<div class="space-y-3" id="final-q5">
<p class="font-medium text-white text-sm">5. Ibu membeli x kg beras @ Rp15.000. Total tidak lebih dari Rp90.000. Paling banyak berapa kg?</p>
<div class="grid grid-cols-2 gap-2">
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','5',false)">5 kg</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','6',true)">6 kg</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','7',false)">7 kg</button>
<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'final-q5','8',false)">8 kg</button>
</div>
<div class="feedback-box" id="final-q5-feedback"></div>
</div>
</div>
<!-- SLIDE 24: Refleksi -->
<div class="slide flex-col p-5 gap-4" data-slide="24">
<h2 data-template-id="reflect-title" class="canva-text text-xl font-bold text-white">Refleksi Belajar</h2>
<p data-template-id="reflect-desc" class="canva-text text-sm text-gray-400">Bagaimana pembelajaranmu hari ini?</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-emoji">Bagaimana perasaanmu setelah belajar?</label>
<div class="flex gap-3 text-3xl" id="emoji-picker">
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😊</button>
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🤔</button>
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😎</button>
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😅</button>
<button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🎉</button>
</div>
</div>
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-text">Apa yang paling menarik dari materi hari ini?</label>
<textarea id="reflect-text" rows="3" class="w-full bg-gray-700 border-2 border-purple-500 rounded-lg p-2 text-sm text-white resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea>
</div>
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-difficult">Bagian mana yang masih sulit?</label>
<textarea id="reflect-difficult" rows="2" class="w-full bg-gray-700 border-2 border-purple-500 rounded-lg p-2 text-sm text-white resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea>
</div>
<button onclick="submitReflection()" class="w-full bg-purple-600 text-white py-2 rounded-lg font-bold hover:bg-purple-700">Kirim Refleksi ✨</button>
<div id="reflect-success" class="hidden bg-green-900/50 text-green-400 p-3 rounded-lg text-center font-medium text-sm border border-green-700/50">
Terima kasih! Refleksimu sudah tercatat 🎉
</div>
</div>
</div>
</main>
<!-- Navigasi Footer -->
<footer class="px-4 py-3 flex items-center justify-between bg-gray-900/90 backdrop-blur border-t border-gray-800">
<button id="prev-btn" onclick="navigate(-1)" class="flex items-center gap-1 bg-gray-800 text-white px-4 py-2 rounded-lg font-medium text-sm hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed" disabled>
<i data-lucide="chevron-left" style="width:16px; height:16px"></i> Kembali
</button>
<button id="next-btn" onclick="navigate(1)" class="flex items-center gap-1 bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300">
Lanjut <i data-lucide="chevron-right" style="width:16px; height:16px"></i>
</button>
</footer>
<script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script>
<script>
let currentSlide = 1;
const totalSlides = 24;
function navigate(dir) {
const next = currentSlide + dir;
if (next < 1 || next > totalSlides) return;
document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.remove('active');
currentSlide = next;
document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.add('active');
document.getElementById('slide-counter').textContent = `${currentSlide} / ${totalSlides}`;
document.getElementById('progress-bar').style.width = `${(currentSlide/totalSlides)*100}%`;
document.getElementById('prev-btn').disabled = currentSlide === 1;
document.getElementById('next-btn').style.display = currentSlide === totalSlides ? 'none' : 'flex';
window.scrollTo(0, 0);
}
const quizAnswered = { quiz1: 0, quiz2: 0, quiz3: 0, quiz4: 0, quiz5: 0 };
const quizTotal = { quiz1: 2, quiz2: 2, quiz3: 2, quiz4: 2, quiz5: 2 };
function checkQuiz(btn, containerId, value, isCorrect) {
const container = document.getElementById(containerId);
const buttons = container.querySelectorAll('.quiz-option');
buttons.forEach(b => { b.disabled = true; });
if (isCorrect) {
btn.classList.add('correct');
showFeedback(containerId + '-feedback', '✅ Benar! Hebat!', true);
} else {
btn.classList.add('wrong');
buttons.forEach(b => {
if (b.getAttribute('onclick') && b.getAttribute('onclick').includes(',true)')) b.classList.add('show-correct');
});
showFeedback(containerId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false);
}
for (const qz of ['quiz1','quiz2','quiz3','quiz4','quiz5']) {
if (containerId.startsWith(qz)) {
quizAnswered[qz]++;
if (quizAnswered[qz] >= quizTotal[qz]) {
document.getElementById(qz + '-gen-btn').classList.remove('hidden');
}
break;
}
}
}
function showFeedback(id, msg, success) {
const el = document.getElementById(id);
if (!el) return;
el.textContent = msg;
el.className = `feedback-box show ${success ? 'bg-green-900/50 text-green-400 border border-green-700/50' : 'bg-red-900/50 text-red-400 border border-red-700/50'}`;
}
function checkType(btn, isTerbuka) {
const row = btn.closest('[data-type]');
const type = row.dataset.type;
const correct = (isTerbuka && type === 'terbuka') || (!isTerbuka && type === 'tertutup');
row.style.background = correct ? 'rgba(34, 197, 94, 0.15)' : 'rgba(239, 68, 68, 0.15)';
row.style.borderColor = correct ? 'rgba(34, 197, 94, 0.5)' : 'rgba(239, 68, 68, 0.5)';
row.querySelectorAll('button').forEach(b => b.disabled = true);
}
function checkPLSV() {
const s1 = document.getElementById('plsv-step1').value;
const s2 = document.getElementById('plsv-step2').value;
if (s1 == '18' && s2 == '6') {
showFeedback('plsv-feedback', '✅ Benar! 3x = 18, x = 6', true);
} else {
showFeedback('plsv-feedback', '❌ Coba lagi: 12+6=18, 18÷3=6', false);
}
}
function checkPtLSV() {
const ans = document.getElementById('ptlsv-ans').value;
if (ans == '5') {
showFeedback('ptlsv-feedback', '✅ Benar! x ≤ 5', true);
} else {
showFeedback('ptlsv-feedback', '❌ 12 - 7 = 5, jadi x ≤ 5', false);
}
}
function checkContext() {
const ans = document.getElementById('context-ans').value;
if (ans == '6') {
showFeedback('context-feedback', '✅ Benar! 80.000 ÷ 12.000 = 6,67 → paling banyak 6 buku', true);
} else {
showFeedback('context-feedback', '❌ 80.000 ÷ 12.000 ≈ 6,67 → paling banyak 6 buku', false);
}
}
function selectEmoji(btn) {
document.querySelectorAll('#emoji-picker button').forEach(b => b.style.transform = '');
btn.style.transform = 'scale(1.4)';
}
function submitReflection() {
document.getElementById('reflect-success').classList.remove('hidden');
}
// Generator pertanyaan acak
let randomCounter = 0;
function generateRandom(quizId) {
randomCounter++;
const container = document.getElementById(quizId + '-random');
container.innerHTML = '';
let q;
switch(quizId) {
case 'quiz1': q = genTP1(); break;
case 'quiz2': q = genTP2(); break;
case 'quiz3': q = genTP3(); break;
case 'quiz4': q = genTP4(); break;
case 'quiz5': q = genTP5(); break;
}
const qId = `${quizId}-rand-${randomCounter}`;
let html = `<div class="space-y-3" id="${qId}"><p class="font-medium text-white text-sm">${q.question}</p><div class="grid grid-cols-2 gap-2">`;
q.options.forEach(opt => {
html += `<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkRandom(this,'${qId}',${opt.correct})">${opt.text}</button>`;
});
html += `</div><div class="feedback-box" id="${qId}-feedback"></div></div>`;
container.innerHTML = html;
container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
function checkRandom(btn, qId, isCorrect) {
const container = document.getElementById(qId);
const buttons = container.querySelectorAll('.quiz-option');
buttons.forEach(b => b.disabled = true);
if (isCorrect) {
btn.classList.add('correct');
showFeedback(qId + '-feedback', '✅ Benar! Hebat!', true);
} else {
btn.classList.add('wrong');
buttons.forEach(b => {
if (b.getAttribute('onclick').includes('true)')) b.classList.add('show-correct');
});
showFeedback(qId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false);
}
}
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function shuffle(arr) { return arr.sort(() => Math.random() - 0.5); }
function genTP1() {
const vars = ['x','y','n','m','p'];
const v = vars[randInt(0,4)];
const a = randInt(2,9), b = randInt(1,9), c = randInt(10,30);
const openSentence = `${a}${v} + ${b} = ${c}`;
const c1 = randInt(1,20), c2 = randInt(1,20);
const closed1 = `${c1} + ${c2} = ${c1+c2}`;
const closed2 = `${c1} × 2 = ${c1*2}`;
const options = shuffle([
{ text: openSentence, correct: true },
{ text: closed1, correct: false },
{ text: closed2, correct: false },
{ text: `${randInt(1,10)} > ${randInt(11,20)}`, correct: false }
]);
return { question: 'Manakah yang merupakan kalimat terbuka?', options };
}
function genTP2() {
const scenarios = [
() => {
const a=randInt(2,8),c=a*randInt(2,10);
return { q:`"Harga ${a} buah kue = Rp${c.toLocaleString('id')}." Model?`, ans:`${a}x = ${c}`, wrong:[`x + ${a} = ${c}`,`${a} + x = ${c}`,`x - ${a} = ${c}`]};
},
() => {
const b=randInt(3,15)*1000,c=randInt(20,80)*1000;
return { q:`"Uang Sari ditambah Rp${b.toLocaleString('id')} kurang dari Rp${c.toLocaleString('id')}." Model?`, ans:`x + ${b.toLocaleString('id')} < ${c.toLocaleString('id')}`, wrong:[`x + ${b.toLocaleString('id')} = ${c.toLocaleString('id')}`,`x - ${b.toLocaleString('id')} < ${c.toLocaleString('id')}`,`x + ${b.toLocaleString('id')} > ${c.toLocaleString('id')}`]};
}
];
const s = scenarios[randInt(0,1)]();
const options = shuffle([
{ text: s.ans, correct: true },
...s.wrong.slice(0,3).map(w => ({ text: w, correct: false }))
]);
return { question: s.q, options };
}
function genTP3() {
const a = randInt(2,8), b = randInt(1,15), x = randInt(1,10);
const c = a * x + b;
const wrong1 = x + randInt(1,3);
const wrong2 = x - randInt(1,2) > 0 ? x - randInt(1,2) : x + 4;
const wrong3 = c - b;
const options = shuffle([
{ text: `x = ${x}`, correct: true },
{ text: `x = ${wrong1}`, correct: false },
{ text: `x = ${wrong2}`, correct: false },
{ text: `x = ${wrong3}`, correct: false }
]);
return { question: `Penyelesaian dari ${a}x + ${b} = ${c} adalah...`, options };
}
function genTP4() {
const a = randInt(2,6), b = randInt(1,10), x = randInt(2,10);
const c = a * x + b;
const signs = ['<','>','≤','≥'];
const sign = signs[randInt(0,3)];
const oppSign = sign === '<' ? '>' : sign === '>' ? '<' : sign === '≤' ? '≥' : '≤';
const options = shuffle([
{ text: `x ${sign} ${x}`, correct: true },
{ text: `x ${oppSign} ${x}`, correct: false },
{ text: `x ${sign} ${x+2}`, correct: false },
{ text: `x ${oppSign} ${x-1}`, correct: false }
]);
return { question: `Penyelesaian dari ${a}x + ${b} ${sign} ${c} adalah...`, options };
}
function genTP5() {
const price = randInt(2,15) * 1000;
const total = price * randInt(3,10);
const maxItems = Math.floor(total / price);
const options = shuffle([
{ text: `${maxItems}`, correct: true },
{ text: `${maxItems+1}`, correct: false },
{ text: `${maxItems-1}`, correct: false },
{ text: `${maxItems+2}`, correct: false }
]);
return { question: `Harga barang Rp${price.toLocaleString('id')}/buah. Uang = Rp${total.toLocaleString('id')}. Paling banyak beli berapa?`, options };
}
lucide.createIcons();
</script>
</body>
</html>
Kelas 8
Matematika
Teorema Pythagoras
<!doctype html>
<html lang="id">
<head>
<script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script>
<script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Pembelajaran Teorema Pythagoras</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<style>
* { font-family: 'DM Sans', sans-serif; }
body { background-color: #111827; color: #f9fafb; }
.slide { display: none; }
.slide.active { display: flex; }
.quiz-option { transition: all 0.3s; cursor: pointer; }
.quiz-option.correct { background: #22c55e !important; color: white !important; border-color: #16a34a !important; }
.quiz-option.wrong { background: #ef4444 !important; color: white !important; border-color: #dc2626 !important; }
.quiz-option.show-correct { border: 3px solid #22c55e !important; background: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important;}
.quiz-option:disabled { cursor: not-allowed; opacity: 0.8; }
.num-circle { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.feedback-box { padding: 12px 16px; border-radius: 8px; margin-top: 12px; font-weight: 500; display: none; }
.feedback-box.show { display: block; }
input[type="number"], textarea { color: white; background-color: #374151; }
</style>
<script src="/_sdk/e3937a0574eb2d69.data_sdk.js" type="text/javascript" integrity="sha512-xbp/ACqEQy1aDxYMtXTrR3y5MUbzxuggRR/9sD48Gl4VhLMMCiAHsxMaFV6DTdeBpR6ymF+t2zhPKYkWM3+Jfw=="></script>
<script src="/_sdk/9432170dbd2ae0df.resizing_sdk.js" type="text/javascript" integrity="sha512-FeT+58sb1f9ejWPWFjCbJvTT+SDwGV+ngrHUnlO7TWEOoqwOLj6p256kO3vOL7DIWl1cIgrobiof8v2bOigwPg=="></script>
</head>
<body data-template-id="__page-root" class="min-h-screen flex flex-col bg-gray-900 text-white">
<header data-template-id="header-bg" class="canva-header px-4 py-3 flex items-center justify-between shadow-lg bg-gray-800">
<div class="flex items-center gap-3">
<span class="text-2xl">📐</span>
<h1 data-template-id="app-title" class="canva-text text-lg font-bold text-white">Teorema Pythagoras</h1>
</div>
<div class="flex items-center gap-2">
<span id="slide-counter" class="text-gray-300 text-sm font-medium">1 / 24</span>
</div>
</header>
<div class="w-full h-1.5 bg-gray-700">
<div id="progress-bar" class="h-full bg-yellow-400 transition-all duration-300" style="width:4%"></div>
</div>
<main class="flex-1 overflow-y-auto" id="slides-container">
<!-- SLIDE 1: Cover (Sudah diperbaiki) -->
<div class="slide active flex-col items-center justify-center text-center p-6 gap-4" data-slide="1">
<div class="text-7xl mb-2">📐</div>
<h2 data-template-id="cover-title" class="canva-text text-3xl font-black text-white">Teorema Pythagoras</h2>
<p data-template-id="cover-subtitle" class="canva-text text-lg text-gray-300">Media Pembelajaran Interaktif</p>
<p data-template-id="cover-class" class="canva-text text-sm text-gray-400">Matematika SMP</p>
</div>
<!-- SLIDE 2: Tujuan Pembelajaran (Sudah dimasukkan teksnya) -->
<div class="slide flex-col p-5 gap-3" data-slide="2">
<h2 data-template-id="tp-title" class="canva-text text-xl font-bold mb-4 text-white">Tujuan Pembelajaran</h2>
<div class="space-y-3">
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">1</span>
<p data-template-id="tp-1" class="canva-text text-sm text-gray-200 mt-1">Menjelaskan pembuktian teorema Pythagoras.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">2</span>
<p data-template-id="tp-2" class="canva-text text-sm text-gray-200 mt-1">Mengidentifikasi tripel Pythagoras.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">3</span>
<p data-template-id="tp-3" class="canva-text text-sm text-gray-200 mt-1">Membedakan jenis sudut pada segitiga menggunakan teorema Pythagoras atau kebalikan teorema Pythagoras.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">4</span>
<p data-template-id="tp-4" class="canva-text text-sm text-gray-200 mt-1">Membandingkan sisi pada segitiga siku-siku istimewa.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">5</span>
<p data-template-id="tp-5" class="canva-text text-sm text-gray-200 mt-1">Menentukan jarak antara dua titik pada bidang koordinat Cartesius.</p>
</div>
<div class="flex items-start gap-3 bg-gray-800 p-3 rounded-lg"><span class="num-circle bg-yellow-400 text-gray-900">6</span>
<p data-template-id="tp-6" class="canva-text text-sm text-gray-200 mt-1">Memecahkan masalah terkait teorema Pythagoras.</p>
</div>
</div>
</div>
<!-- SLIDE 3: Apersepsi -->
<div class="slide flex-col p-5 gap-4" data-slide="3">
<h2 data-template-id="aper-title" class="canva-text text-xl font-bold text-white">Apersepsi</h2>
<img data-template-id="aper-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="aper-question" class="canva-text text-base leading-relaxed text-gray-200"></p>
<div class="bg-gray-800 p-4 rounded-xl">
<p data-template-id="aper-hint" class="canva-text text-sm italic text-gray-300"></p>
</div>
</div>
<!-- SLIDE 4: Apersepsi 2 -->
<div class="slide flex-col p-5 gap-4" data-slide="4">
<h2 data-template-id="aper2-title" class="canva-text text-lg font-bold text-white"></h2>
<img data-template-id="aper2-image" class="canva-image w-full h-40 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="aper2-question" class="canva-text text-base text-gray-200"></p>
</div>
<!-- SLIDE 5: Asesmen Awal -->
<div class="slide flex-col p-5 gap-4" data-slide="5">
<h2 data-template-id="pretest-title" class="canva-text text-xl font-bold text-white">Asesmen Awal</h2>
<p data-template-id="pretest-desc" class="canva-text text-sm text-gray-400">Mari kita uji pengetahuan awalmu!</p>
<div class="space-y-3" id="pretest-q1">
<p class="font-medium text-white">1. Berapa hasil dari 5² ?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','10',false)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','25',true)">25</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','15',false)">15</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q1','50',false)">50</button>
</div>
<div class="feedback-box" id="pretest-q1-feedback"></div>
</div>
<div class="space-y-3" id="pretest-q2">
<p class="font-medium text-white">2. Segitiga siku-siku memiliki sudut berapa derajat?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','45°',false)">45°</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','90°',true)">90°</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','180°',false)">180°</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q2','60°',false)">60°</button>
</div>
<div class="feedback-box" id="pretest-q2-feedback"></div>
</div>
<div class="space-y-3" id="pretest-q3">
<p class="font-medium text-white">3. √49 = ?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','6',false)">6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','7',true)">7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','8',false)">8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkQuiz(this,'pretest-q3','9',false)">9</button>
</div>
<div class="feedback-box" id="pretest-q3-feedback"></div>
</div>
</div>
<!-- SLIDE 6: TP1 Intro -->
<div class="slide flex-col p-5 gap-4" data-slide="6">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1</div>
<h2 data-template-id="tp1-title" class="canva-text text-xl font-bold text-white">Pembuktian Teorema Pythagoras</h2>
<p data-template-id="tp1-intro" class="canva-text text-base leading-relaxed text-gray-300">Luas persegi pada sisi miring (hipotenusa) sama dengan jumlah luas persegi pada kedua sisi tegaknya.</p>
<div class="bg-gray-800 rounded-xl p-4 text-center">
<svg viewbox="0 0 300 200" class="w-full max-w-xs mx-auto">
<rect x="60" y="100" width="60" height="60" fill="#fbbf24" opacity="0.7" stroke="#e5e7eb" stroke-width="1.5" />
<rect x="120" y="20" width="80" height="80" fill="#60a5fa" opacity="0.7" stroke="#e5e7eb" stroke-width="1.5" />
<rect x="120" y="100" width="80" height="80" fill="#f87171" opacity="0.7" stroke="#e5e7eb" stroke-width="1.5" />
<polygon points="120,100 120,160 60,160" fill="#1e293b" stroke="#e5e7eb" stroke-width="2" />
<text x="85" y="145" fill="white" font-size="12" font-weight="bold">a</text>
<text x="155" y="145" fill="white" font-size="12" font-weight="bold">b</text>
<text x="115" y="135" fill="white" font-size="12" font-weight="bold">c</text>
<text x="75" y="90" fill="#e5e7eb" font-size="11" font-weight="bold">a²=9</text>
<text x="140" y="15" fill="#e5e7eb" font-size="11" font-weight="bold">c²=25</text>
<text x="140" y="190" fill="#e5e7eb" font-size="11" font-weight="bold">b²=16</text>
</svg>
<p class="text-gray-200 font-bold mt-2 text-lg">a² + b² = c²</p>
<p class="text-gray-400 text-sm">3² + 4² = 5² → 9 + 16 = 25 ✓</p>
</div>
</div>
<!-- SLIDE 7: TP1 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="7">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 1 - Aktivitas</div>
<h2 data-template-id="tp1-act-title" class="canva-text text-lg font-bold text-white">Latihan Mandiri</h2>
<p data-template-id="tp1-act-desc" class="canva-text text-sm text-gray-300"></p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 font-medium text-sm">Segitiga dengan sisi: a = 3, b = 4. Hitung c!</p>
<div class="flex items-center gap-2">
<span class="text-gray-300 text-sm">a² + b² = 9 + 16 =</span>
<input type="number" id="proof-input" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
<span class="text-gray-300 text-sm">= c²</span>
</div>
<div class="flex items-center gap-2">
<span class="text-gray-300 text-sm">c = √</span>
<input type="number" id="proof-input2" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
<span class="text-gray-300 text-sm">=</span>
<input type="number" id="proof-input3" class="border-2 border-purple-500 bg-gray-700 text-white rounded-lg px-3 py-1 w-16 text-center font-bold" placeholder="?">
</div>
<button onclick="checkProof()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="proof-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 8: Kuis TP1 -->
<div class="slide flex-col p-5 gap-4" data-slide="8">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 1</div>
<h2 data-template-id="quiz1-title" class="canva-text text-lg font-bold text-white">Kuis Pembuktian</h2>
<div id="quiz1-container">
<div class="space-y-3" id="quiz1-q1">
<p class="font-medium text-white text-sm">1. Jika a=6, b=8, berapakah c?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','12',false)">12</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','10',true)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','14',false)">14</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz1-q1','9',false)">9</button>
</div>
<div class="feedback-box" id="quiz1-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz1-q2">
<p class="font-medium text-white text-sm">2. Teorema Pythagoras berlaku pada segitiga...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left" onclick="checkQuiz(this,'quiz1-q2','sama sisi',false)">Sama sisi</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left" onclick="checkQuiz(this,'quiz1-q2','siku-siku',true)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium text-left" onclick="checkQuiz(this,'quiz1-q2','sembarang',false)">Sembarang</button>
</div>
<div class="feedback-box" id="quiz1-q2-feedback"></div>
</div>
</div>
<div id="quiz1-random" class="mt-4"></div>
<button id="quiz1-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz1')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 9: TP2 Intro -->
<div class="slide flex-col p-5 gap-4" data-slide="9">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2</div>
<h2 data-template-id="tp2-title" class="canva-text text-xl font-bold text-white">Tripel Pythagoras</h2>
<p data-template-id="tp2-desc" class="canva-text text-sm leading-relaxed text-gray-300">Tiga bilangan bulat positif yang memenuhi persamaan a² + b² = c² disebut tripel Pythagoras.</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-2">
<p class="text-gray-200 font-bold text-sm">Contoh Tripel Pythagoras:</p>
<div class="grid grid-cols-3 gap-2 text-center">
<div class="bg-purple-900/30 border border-purple-500/30 rounded-lg p-2">
<p class="font-bold text-purple-300">3, 4, 5</p>
</div>
<div class="bg-blue-900/30 border border-blue-500/30 rounded-lg p-2">
<p class="font-bold text-blue-300">5, 12, 13</p>
</div>
<div class="bg-green-900/30 border border-green-500/30 rounded-lg p-2">
<p class="font-bold text-green-300">8, 15, 17</p>
</div>
</div>
<p class="text-gray-400 text-xs mt-2">Kelipatan juga tripel: 6,8,10 (2× dari 3,4,5)</p>
</div>
</div>
<!-- SLIDE 10: TP2 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="10">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 2 - Aktivitas</div>
<h2 data-template-id="tp2-act-title" class="canva-text text-lg font-bold text-white">Cek Tripel</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Apakah bilangan berikut tripel Pythagoras? Ketuk ✓ atau ✗</p>
<div id="tripel-activity" class="space-y-2">
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-tripel="true">
<span class="font-bold text-gray-100">7, 24, 25</span>
<div class="flex gap-2">
<button onclick="checkTripel(this,true)" class="bg-green-900/50 text-green-400 px-3 py-1 rounded-lg font-bold hover:bg-green-800 border border-green-700/50">✓</button>
<button onclick="checkTripel(this,false)" class="bg-red-900/50 text-red-400 px-3 py-1 rounded-lg font-bold hover:bg-red-800 border border-red-700/50">✗</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-tripel="false">
<span class="font-bold text-gray-100">4, 5, 6</span>
<div class="flex gap-2">
<button onclick="checkTripel(this,true)" class="bg-green-900/50 text-green-400 px-3 py-1 rounded-lg font-bold hover:bg-green-800 border border-green-700/50">✓</button>
<button onclick="checkTripel(this,false)" class="bg-red-900/50 text-red-400 px-3 py-1 rounded-lg font-bold hover:bg-red-800 border border-red-700/50">✗</button>
</div>
</div>
<div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg border border-gray-600 transition-colors" data-tripel="true">
<span class="font-bold text-gray-100">9, 40, 41</span>
<div class="flex gap-2">
<button onclick="checkTripel(this,true)" class="bg-green-900/50 text-green-400 px-3 py-1 rounded-lg font-bold hover:bg-green-800 border border-green-700/50">✓</button>
<button onclick="checkTripel(this,false)" class="bg-red-900/50 text-red-400 px-3 py-1 rounded-lg font-bold hover:bg-red-800 border border-red-700/50">✗</button>
</div>
</div>
</div>
</div>
</div>
<!-- SLIDE 11: Kuis TP2 -->
<div class="slide flex-col p-5 gap-4" data-slide="11">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 2</div>
<h2 data-template-id="quiz2-title" class="canva-text text-lg font-bold text-white">Kuis Tripel Pythagoras</h2>
<div id="quiz2-container">
<div class="space-y-3" id="quiz2-q1">
<p class="font-medium text-white text-sm">1. Manakah yang merupakan tripel Pythagoras?</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q1','5,11,13',false)">5, 11, 13</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q1','5,12,13',true)">5, 12, 13</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q1','6,7,8',false)">6, 7, 8</button>
</div>
<div class="feedback-box" id="quiz2-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz2-q2">
<p class="font-medium text-white text-sm">2. Tripel 3,4,5 jika dikalikan 3 menjadi...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q2','9,12,15',true)">9, 12, 15</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q2','6,8,10',false)">6, 8, 10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz2-q2','12,16,20',false)">12, 16, 20</button>
</div>
<div class="feedback-box" id="quiz2-q2-feedback"></div>
</div>
</div>
<div id="quiz2-random" class="mt-4"></div><button id="quiz2-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz2')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 12: TP3 Intro -->
<div class="slide flex-col p-5 gap-4" data-slide="12">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3</div>
<h2 data-template-id="tp3-title" class="canva-text text-xl font-bold text-white">Jenis Segitiga</h2>
<p data-template-id="tp3-desc" class="canva-text text-sm leading-relaxed text-gray-300">Kita bisa menentukan jenis segitiga (siku-siku, lancip, tumpul) dengan memeriksa kuadrat sisi terpanjang (c) terhadap jumlah kuadrat sisi lainnya.</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-2 text-sm border border-gray-700">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-blue-500 rounded-full"></span>
<p class="text-gray-200"><strong>c² = a² + b²</strong> → Siku-siku (90°)</p>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-red-500 rounded-full"></span>
<p class="text-gray-200"><strong>c² > a² + b²</strong> → Tumpul (>90°)</p>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-green-500 rounded-full"></span>
<p class="text-gray-200"><strong>c² < a² + b²</strong> → Lancip (<90°)</p>
</div>
</div>
</div>
<!-- SLIDE 13: TP3 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="13">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 3 - Aktivitas</div>
<h2 data-template-id="tp3-act-title" class="canva-text text-lg font-bold text-white">Tebak Segitiga</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Tentukan jenis segitiga (sisi terpanjang = c):</p>
<div class="space-y-2">
<div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="tp3-q1">
<p class="font-bold text-gray-100 text-sm mb-2">Sisi: 5, 7, 9</p>
<div class="flex gap-2">
<button onclick="checkAngle(this,'tp3-q1','lancip')" class="bg-green-900/50 text-green-400 border border-green-700/50 hover:bg-green-800 px-3 py-1 rounded text-xs font-bold">Lancip</button>
<button onclick="checkAngle(this,'tp3-q1','siku')" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 hover:bg-blue-800 px-3 py-1 rounded text-xs font-bold">Siku-siku</button>
<button onclick="checkAngle(this,'tp3-q1','tumpul')" class="bg-red-900/50 text-red-400 border border-red-700/50 hover:bg-red-800 px-3 py-1 rounded text-xs font-bold">Tumpul</button>
</div>
<div class="feedback-box text-xs mt-1" id="tp3-q1-feedback"></div>
</div>
<div class="bg-gray-700 p-3 rounded-lg border border-gray-600" id="tp3-q2">
<p class="font-bold text-gray-100 text-sm mb-2">Sisi: 6, 8, 11</p>
<div class="flex gap-2">
<button onclick="checkAngle(this,'tp3-q2','lancip')" class="bg-green-900/50 text-green-400 border border-green-700/50 hover:bg-green-800 px-3 py-1 rounded text-xs font-bold">Lancip</button>
<button onclick="checkAngle(this,'tp3-q2','siku')" class="bg-blue-900/50 text-blue-400 border border-blue-700/50 hover:bg-blue-800 px-3 py-1 rounded text-xs font-bold">Siku-siku</button>
<button onclick="checkAngle(this,'tp3-q2','tumpul')" class="bg-red-900/50 text-red-400 border border-red-700/50 hover:bg-red-800 px-3 py-1 rounded text-xs font-bold">Tumpul</button>
</div>
<div class="feedback-box text-xs mt-1" id="tp3-q2-feedback"></div>
</div>
</div>
</div>
</div>
<!-- SLIDE 14: Kuis TP3 -->
<div class="slide flex-col p-5 gap-4" data-slide="14">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 3</div>
<h2 data-template-id="quiz3-title" class="canva-text text-lg font-bold text-white">Kuis Jenis Segitiga</h2>
<div id="quiz3-container">
<div class="space-y-3" id="quiz3-q1">
<p class="font-medium text-white text-sm">1. Segitiga dengan sisi 3, 4, 6 termasuk segitiga...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q1','lancip',false)">Lancip</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q1','siku-siku',false)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q1','tumpul',true)">Tumpul</button>
</div>
<div class="feedback-box" id="quiz3-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz3-q2">
<p class="font-medium text-white text-sm">2. Segitiga dengan sisi 5, 12, 13 adalah...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q2','lancip',false)">Lancip</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q2','siku-siku',true)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz3-q2','tumpul',false)">Tumpul</button>
</div>
<div class="feedback-box" id="quiz3-q2-feedback"></div>
</div>
</div>
<div id="quiz3-random" class="mt-4"></div><button id="quiz3-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz3')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 15: TP4 -->
<div class="slide flex-col p-5 gap-4" data-slide="15">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 4</div>
<h2 data-template-id="tp4-title" class="canva-text text-xl font-bold text-white">Segitiga Istimewa</h2>
<p data-template-id="tp4-desc" class="canva-text text-sm text-gray-300">Segitiga siku-siku dengan sudut tertentu memiliki rasio sisi yang selalu tetap.</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<div class="grid grid-cols-2 gap-3">
<div class="bg-indigo-900/30 border border-indigo-700/30 p-3 rounded-lg text-center">
<p class="font-bold text-indigo-300 text-sm">45°-45°-90°</p>
<p class="text-indigo-400 text-xs mt-1">Perbandingan sisi:</p>
<p class="font-bold text-indigo-200">1 : 1 : √2</p>
</div>
<div class="bg-orange-900/30 border border-orange-700/30 p-3 rounded-lg text-center">
<p class="font-bold text-orange-300 text-sm">30°-60°-90°</p>
<p class="text-orange-400 text-xs mt-1">Perbandingan sisi:</p>
<p class="font-bold text-orange-200">1 : √3 : 2</p>
</div>
</div>
</div>
</div>
<!-- SLIDE 16: Kuis TP4 -->
<div class="slide flex-col p-5 gap-4" data-slide="16">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 4</div>
<h2 data-template-id="quiz4-title" class="canva-text text-lg font-bold text-white">Kuis Sudut Istimewa</h2>
<div id="quiz4-container">
<div class="space-y-3" id="quiz4-q1">
<p class="font-medium text-white text-sm">1. Segitiga 45°-45°-90° dengan kaki = 5. Hipotenusa?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','5',false)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','5√2',true)">5√2</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','10',false)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q1','5√3',false)">5√3</button>
</div>
<div class="feedback-box" id="quiz4-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz4-q2">
<p class="font-medium text-white text-sm">2. Segitiga 30°-60°-90° dengan sisi terpendek = 3. Hipotenusa?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','3',false)">3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','6',true)">6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','3√3',false)">3√3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz4-q2','9',false)">9</button>
</div>
<div class="feedback-box" id="quiz4-q2-feedback"></div>
</div>
</div>
<div id="quiz4-random" class="mt-4"></div><button id="quiz4-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz4')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 17: TP5 -->
<div class="slide flex-col p-5 gap-4" data-slide="17">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5</div>
<h2 data-template-id="tp5-title" class="canva-text text-xl font-bold text-white">Jarak Dua Titik Koordinat</h2>
<p data-template-id="tp5-desc" class="canva-text text-sm leading-relaxed text-gray-300">Teorema Pythagoras juga bisa diaplikasikan untuk menghitung jarak antara dua titik pada bidang kartesius.</p>
<div class="bg-gray-800 rounded-xl p-4 border border-gray-700">
<svg viewbox="0 0 280 200" class="w-full max-w-xs mx-auto">
<defs>
<pattern id="grid" width="28" height="28" patternunits="userSpaceOnUse">
<path d="M 28 0 L 0 0 0 28" fill="none" stroke="#374151" stroke-width="0.5" />
</pattern>
</defs>
<rect width="280" height="200" fill="url(#grid)" />
<line x1="0" y1="168" x2="280" y2="168" stroke="#9ca3af" stroke-width="1.5" />
<line x1="28" y1="0" x2="28" y2="200" stroke="#9ca3af" stroke-width="1.5" />
<circle cx="56" cy="140" r="5" fill="#ef4444" />
<text x="60" y="135" font-size="10" fill="#f87171" font-weight="bold">A(1,1)</text>
<circle cx="168" cy="56" r="5" fill="#3b82f6" />
<text x="172" y="51" font-size="10" fill="#60a5fa" font-weight="bold">B(5,4)</text>
<line x1="56" y1="140" x2="168" y2="56" stroke="#a78bfa" stroke-width="2" stroke-dasharray="4" />
<line x1="56" y1="140" x2="168" y2="140" stroke="#fcd34d" stroke-width="1.5" />
<line x1="168" y1="140" x2="168" y2="56" stroke="#fcd34d" stroke-width="1.5" />
<text x="100" y="155" font-size="9" fill="#d1d5db">Δx = 4</text>
<text x="175" y="100" font-size="9" fill="#d1d5db">Δy = 3</text>
</svg>
<p class="text-center text-gray-200 font-bold text-sm mt-2">d = √((x₂-x₁)² + (y₂-y₁)²)</p>
<p class="text-center text-gray-400 text-xs">d = √(4² + 3²) = √25 = 5</p>
</div>
</div>
<!-- SLIDE 18: TP5 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="18">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 5 - Aktivitas</div>
<h2 data-template-id="tp5-act-title" class="canva-text text-lg font-bold text-white">Latihan Jarak Titik</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">Hitung jarak titik P(2, 1) ke Q(5, 5)!</p>
<div class="space-y-2">
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>Δx = 5 - 2 =</span>
<input type="number" id="dist-dx" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-12 text-center font-bold" placeholder="?">
</div>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>Δy = 5 - 1 =</span>
<input type="number" id="dist-dy" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-12 text-center font-bold" placeholder="?">
</div>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>d = √(3² + 4²) = √25 =</span>
<input type="number" id="dist-ans" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-12 text-center font-bold" placeholder="?">
</div>
</div>
<button onclick="checkDistance()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="dist-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 19: Kuis TP5 -->
<div class="slide flex-col p-5 gap-4" data-slide="19">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 5</div>
<h2 data-template-id="quiz5-title" class="canva-text text-lg font-bold text-white">Kuis Kartesius</h2>
<div id="quiz5-container">
<div class="space-y-3" id="quiz5-q1">
<p class="font-medium text-white text-sm">1. Jarak titik (0,0) ke (6,8) adalah...</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','14',false)">14</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','10',true)">10</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','8',false)">8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q1','12',false)">12</button>
</div>
<div class="feedback-box" id="quiz5-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz5-q2">
<p class="font-medium text-white text-sm">2. Jarak titik (1,2) ke (4,6) adalah...</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','7',false)">7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','5',true)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','4',false)">4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz5-q2','6',false)">6</button>
</div>
<div class="feedback-box" id="quiz5-q2-feedback"></div>
</div>
</div>
<div id="quiz5-random" class="mt-4"></div><button id="quiz5-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz5')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 20: TP6 -->
<div class="slide flex-col p-5 gap-4" data-slide="20">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 6</div>
<h2 data-template-id="tp6-title" class="canva-text text-xl font-bold text-white">Memecahkan Masalah</h2>
<img data-template-id="tp6-image" class="canva-image w-full h-32 object-cover rounded-xl bg-gray-700" loading="lazy">
<p data-template-id="tp6-desc" class="canva-text text-sm leading-relaxed text-gray-300">Banyak masalah dalam kehidupan sehari-hari yang dapat diselesaikan dengan teorema Pythagoras.</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-2">
<p class="text-gray-200 text-sm font-medium">🏗️ Contoh: Tangga 10m disandarkan ke tembok. Jarak kaki tangga ke tembok 6m. Berapa tinggi tembok yang dicapai?</p>
<p class="text-gray-400 text-xs">c²= a² + b² → 10² = 6² + b² → b² = 100-36 = 64 → b = 8m</p>
</div>
</div>
<!-- SLIDE 21: TP6 Aktivitas -->
<div class="slide flex-col p-5 gap-4" data-slide="21">
<div class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold w-fit">TP 6 - Aktivitas</div>
<h2 data-template-id="tp6-act-title" class="canva-text text-lg font-bold text-white">Studi Kasus</h2>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<p class="text-gray-200 text-sm font-medium">🪁 Benang layang-layang panjangnya 13m. Jarak horizontal 5m. Berapa tinggi layang-layang?</p>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span>Tinggi =</span>
<input type="number" id="context-ans" class="bg-gray-700 text-white border-2 border-purple-500 rounded px-2 py-1 w-16 text-center font-bold" placeholder="?">
<span>meter</span>
</div>
<button onclick="checkContext()" class="bg-purple-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-purple-700">Cek Jawaban</button>
<div id="context-feedback" class="feedback-box"></div>
</div>
</div>
<!-- SLIDE 22: Kuis TP6 -->
<div class="slide flex-col p-5 gap-4" data-slide="22">
<div class="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold w-fit">🎯 Kuis TP 6</div>
<h2 data-template-id="quiz6-title" class="canva-text text-lg font-bold text-white">Kuis Pemecahan Masalah</h2>
<div id="quiz6-container">
<div class="space-y-3" id="quiz6-q1">
<p class="font-medium text-white text-sm">1. Tiang 12m, kawat dari puncak ke tanah sejauh 9m. Panjang kawat?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','21',false)">21 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','15',true)">15 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','13',false)">13 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q1','18',false)">18 m</button>
</div>
<div class="feedback-box" id="quiz6-q1-feedback"></div>
</div>
<div class="space-y-3 mt-4" id="quiz6-q2">
<p class="font-medium text-white text-sm">2. Tangga 5m, jarak kaki ke dinding 3m. Tinggi?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','4',true)">4 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','3',false)">3 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','2',false)">2 m</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'quiz6-q2','5',false)">5 m</button>
</div>
<div class="feedback-box" id="quiz6-q2-feedback"></div>
</div>
</div>
<div id="quiz6-random" class="mt-4"></div><button id="quiz6-gen-btn" class="hidden bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300 mt-3" onclick="generateRandom('quiz6')">🔄 Soal Baru</button>
</div>
<!-- SLIDE 23: Asesmen Akhir -->
<div class="slide flex-col p-5 gap-4" data-slide="23">
<h2 data-template-id="final-title" class="canva-text text-xl font-bold text-white">Asesmen Akhir</h2>
<p data-template-id="final-desc" class="canva-text text-sm text-gray-400">Kerjakan soal ini untuk mengukur pemahamanmu secara menyeluruh.</p>
<div class="space-y-3" id="final-q1">
<p class="font-medium text-white text-sm">1. Segitiga sisi 8, 15, 17 termasuk...</p>
<div class="grid grid-cols-1 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q1','siku-siku',true)">Siku-siku</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q1','tumpul',false)">Tumpul</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q1','lancip',false)">Lancip</button>
</div>
<div class="feedback-box" id="final-q1-feedback"></div>
</div>
<div class="space-y-3" id="final-q2">
<p class="font-medium text-white text-sm">2. Jarak (1,2) ke (4,6) = ?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','5',true)">5</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','7',false)">7</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','4',false)">4</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q2','6',false)">6</button>
</div>
<div class="feedback-box" id="final-q2-feedback"></div>
</div>
<div class="space-y-3" id="final-q3">
<p class="font-medium text-white text-sm">3. Segitiga 30°-60°-90° sisi terpendek 4. Hipotenusa?</p>
<div class="grid grid-cols-2 gap-2"><button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','8',true)">8</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','4√3',false)">4√3</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','6',false)">6</button> <button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium" onclick="checkQuiz(this,'final-q3','4√2',false)">4√2</button>
</div>
<div class="feedback-box" id="final-q3-feedback"></div>
</div>
</div>
<!-- SLIDE 24: Refleksi -->
<div class="slide flex-col p-5 gap-4" data-slide="24">
<h2 data-template-id="reflect-title" class="canva-text text-xl font-bold text-white">Refleksi Belajar</h2>
<p data-template-id="reflect-desc" class="canva-text text-sm text-gray-400">Bagaimana pembelajaranmu hari ini?</p>
<div class="bg-gray-800 rounded-xl p-4 space-y-3">
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-emoji">Bagaimana perasaanmu setelah belajar?</label>
<div class="flex gap-3 text-3xl" id="emoji-picker"><button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😊</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🤔</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😎</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">😅</button> <button onclick="selectEmoji(this)" class="hover:scale-125 transition-transform p-1 rounded">🎉</button>
</div>
</div>
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-text">Apa yang paling menarik dari materi hari ini?</label>
<textarea id="reflect-text" rows="3" class="w-full bg-gray-700 text-white border-2 border-purple-500 rounded-lg p-2 text-sm resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea>
</div>
<div>
<label class="text-gray-200 text-sm font-medium block mb-1" for="reflect-difficult">Bagian mana yang masih sulit?</label>
<textarea id="reflect-difficult" rows="2" class="w-full bg-gray-700 text-white border-2 border-purple-500 rounded-lg p-2 text-sm resize-none focus:border-purple-400 focus:outline-none placeholder-gray-400" placeholder="Tulis di sini..."></textarea>
</div>
<button onclick="submitReflection()" class="w-full bg-purple-600 text-white py-2 rounded-lg font-bold hover:bg-purple-700">Kirim Refleksi ✨</button>
<div id="reflect-success" class="hidden bg-green-900/50 text-green-400 p-3 rounded-lg text-center font-medium text-sm border border-green-700/50">
Terima kasih! Refleksimu sudah tercatat 🎉
</div>
</div>
</div>
</main>
<!-- Navigation Footer -->
<footer class="px-4 py-3 flex items-center justify-between bg-gray-900/90 backdrop-blur border-t border-gray-800">
<button id="prev-btn" onclick="navigate(-1)" class="flex items-center gap-1 bg-gray-800 text-white px-4 py-2 rounded-lg font-medium text-sm hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed" disabled><i data-lucide="chevron-left" style="width:16px;height:16px"></i> Kembali</button>
<button id="next-btn" onclick="navigate(1)" class="flex items-center gap-1 bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg font-bold text-sm hover:bg-yellow-300">Lanjut <i data-lucide="chevron-right" style="width:16px;height:16px"></i></button>
</footer>
<script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script>
<script>
let currentSlide = 1;
const totalSlides = 24;
function navigate(dir) {
const next = currentSlide + dir;
if (next < 1 || next > totalSlides) return;
document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.remove('active');
currentSlide = next;
document.querySelector(`.slide[data-slide="${currentSlide}"]`).classList.add('active');
document.getElementById('slide-counter').textContent = `${currentSlide} / ${totalSlides}`;
document.getElementById('progress-bar').style.width = `${(currentSlide/totalSlides)*100}%`;
document.getElementById('prev-btn').disabled = currentSlide === 1;
document.getElementById('next-btn').style.display = currentSlide === totalSlides ? 'none' : 'flex';
window.scrollTo(0, 0);
}
const quizAnswered = { quiz1: 0, quiz2: 0, quiz3: 0, quiz4: 0, quiz5: 0, quiz6: 0 };
const quizTotal = { quiz1: 2, quiz2: 2, quiz3: 2, quiz4: 2, quiz5: 2, quiz6: 2 };
function checkQuiz(btn, containerId, value, isCorrect) {
const container = document.getElementById(containerId);
const buttons = container.querySelectorAll('.quiz-option');
buttons.forEach(b => { b.disabled = true; });
if (isCorrect) {
btn.classList.add('correct');
showFeedback(containerId + '-feedback', '✅ Benar! Hebat!', true);
} else {
btn.classList.add('wrong');
buttons.forEach(b => {
if (b.getAttribute('onclick') && b.getAttribute('onclick').includes(',true)')) b.classList.add('show-correct');
});
showFeedback(containerId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false);
}
for (const qz of ['quiz1','quiz2','quiz3','quiz4','quiz5','quiz6']) {
if (containerId.startsWith(qz)) {
quizAnswered[qz]++;
if (quizAnswered[qz] >= quizTotal[qz]) {
document.getElementById(qz + '-gen-btn').classList.remove('hidden');
}
break;
}
}
}
function showFeedback(id, msg, success) {
const el = document.getElementById(id);
if (!el) return;
el.textContent = msg;
el.className = `feedback-box show ${success ? 'bg-green-900/50 text-green-400 border border-green-700/50' : 'bg-red-900/50 text-red-400 border border-red-700/50'}`;
}
function checkProof() {
const v1 = document.getElementById('proof-input').value;
const v2 = document.getElementById('proof-input2').value;
const v3 = document.getElementById('proof-input3').value;
if (v1 == '25' && v2 == '25' && v3 == '5') {
showFeedback('proof-feedback', '✅ Benar! 3² + 4² = 25, dan √25 = 5', true);
} else {
showFeedback('proof-feedback', '❌ Coba lagi. Ingat: 9 + 16 = 25, √25 = 5', false);
}
}
function checkTripel(btn, expectedTrue) {
const row = btn.closest('[data-tripel]');
const isTriple = row.dataset.tripel === 'true';
const correct = (expectedTrue && isTriple) || (!expectedTrue && !isTriple);
row.style.background = correct ? 'rgba(34, 197, 94, 0.15)' : 'rgba(239, 68, 68, 0.15)';
row.style.borderColor = correct ? 'rgba(34, 197, 94, 0.5)' : 'rgba(239, 68, 68, 0.5)';
row.querySelectorAll('button').forEach(b => b.disabled = true);
}
function checkAngle(btn, containerId, answer) {
const answers = { 'tp3-q1': 'lancip', 'tp3-q2': 'tumpul' };
const correct = answers[containerId] === answer;
const container = document.getElementById(containerId);
container.querySelectorAll('button').forEach(b => b.disabled = true);
if (correct) {
btn.style.background = '#22c55e'; btn.style.color = 'white';
showFeedback(containerId + '-feedback', '✅ Benar!', true);
} else {
btn.style.background = '#ef4444'; btn.style.color = 'white';
showFeedback(containerId + '-feedback', `❌ Jawaban: ${answers[containerId]}`, false);
}
}
function checkDistance() {
const dx = document.getElementById('dist-dx').value;
const dy = document.getElementById('dist-dy').value;
const ans = document.getElementById('dist-ans').value;
if (dx == '3' && dy == '4' && ans == '5') {
showFeedback('dist-feedback', '✅ Benar! Jarak = 5 satuan', true);
} else {
showFeedback('dist-feedback', '❌ Coba lagi: Δx=3, Δy=4, d=√25=5', false);
}
}
function checkContext() {
const ans = document.getElementById('context-ans').value;
if (ans == '12') {
showFeedback('context-feedback', '✅ Benar! √(13²-5²) = √144 = 12m', true);
} else {
showFeedback('context-feedback', '❌ Gunakan: √(13²-5²) = √144 = 12', false);
}
}
function selectEmoji(btn) {
document.querySelectorAll('#emoji-picker button').forEach(b => b.style.transform = '');
btn.style.transform = 'scale(1.4)';
}
function submitReflection() {
document.getElementById('reflect-success').classList.remove('hidden');
}
let randomCounter = 0;
function generateRandom(quizId) {
randomCounter++;
const container = document.getElementById(quizId + '-random');
container.innerHTML = '';
let q;
switch(quizId) {
case 'quiz1': q = genTP1(); break;
case 'quiz2': q = genTP2(); break;
case 'quiz3': q = genTP3(); break;
case 'quiz4': q = genTP4(); break;
case 'quiz5': q = genTP5(); break;
case 'quiz6': q = genTP6(); break;
}
const qId = `${quizId}-rand-${randomCounter}`;
let html = `<div class="space-y-3" id="${qId}"><p class="font-medium text-white text-sm">${q.question}</p><div class="grid grid-cols-2 gap-2">`;
q.options.forEach(opt => {
html += `<button class="quiz-option bg-gray-800 border-2 border-gray-700 rounded-lg p-3 text-white font-medium hover:bg-gray-700" onclick="checkRandom(this,'${qId}',${opt.correct})">${opt.text}</button>`;
});
html += `</div><div class="feedback-box" id="${qId}-feedback"></div></div>`;
container.innerHTML = html;
container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
function checkRandom(btn, qId, isCorrect) {
const container = document.getElementById(qId);
const buttons = container.querySelectorAll('.quiz-option');
buttons.forEach(b => b.disabled = true);
if (isCorrect) {
btn.classList.add('correct');
showFeedback(qId + '-feedback', '✅ Benar! Hebat!', true);
} else {
btn.classList.add('wrong');
buttons.forEach(b => {
if (b.getAttribute('onclick').includes('true)')) b.classList.add('show-correct');
});
showFeedback(qId + '-feedback', '❌ Kurang tepat. Perhatikan jawaban hijau.', false);
}
}
const triplets = [[3,4,5],[5,12,13],[8,15,17],[7,24,25],[9,40,41],[11,60,61],[20,21,29],[12,35,37],[6,8,10],[9,12,15],[15,20,25],[10,24,26]];
function shuffle(arr) { return arr.sort(() => Math.random() - 0.5); }
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function genTP1() {
const t = triplets[randInt(0, triplets.length-1)];
const a = t[0], b = t[1], c = t[2];
const wrong1 = c + randInt(1,3);
const wrong2 = c - randInt(1,2) || c + 4;
const wrong3 = a + b;
const options = shuffle([
{ text: String(c), correct: true },
{ text: String(wrong1), correct: false },
{ text: String(wrong2), correct: false },
{ text: String(wrong3), correct: false }
]);
return { question: `<span class="text-white">Jika a=${a}, b=${b}, berapakah c (hipotenusa)?</span>`, options };
}
function genTP2() {
const isTriple = Math.random() > 0.4;
let a, b, c, text;
if (isTriple) {
const t = triplets[randInt(0, triplets.length-1)];
const k = randInt(1,3);
a = t[0]*k; b = t[1]*k; c = t[2]*k;
} else {
a = randInt(3,10); b = randInt(a+1, a+8); c = b + randInt(1,3);
while (a*a + b*b === c*c) { c++; }
}
text = `${a}, ${b}, ${c}`;
const options = shuffle([
{ text: 'Ya, tripel Pythagoras', correct: isTriple },
{ text: 'Bukan tripel Pythagoras', correct: !isTriple }
]);
return { question: `<span class="text-white">Apakah (${text}) tripel Pythagoras?<br><small class="opacity-70">Cek: ${a}² + ${b}² = ${a*a} + ${b*b} = ${a*a+b*b}, dan ${c}² = ${c*c}</small></span>`, options };
}
function genTP3() {
const type = randInt(0,2);
let a, b, c;
if (type === 1) {
const t = triplets[randInt(0,5)];
a = t[0]; b = t[1]; c = t[2];
} else if (type === 0) {
a = randInt(4,8); b = randInt(a, a+4); c = b + randInt(0,1);
while (c*c >= a*a + b*b) { c--; }
if (c <= b) c = b;
if (c*c >= a*a+b*b) { a++; }
} else {
a = randInt(3,6); b = randInt(a, a+3); c = b + randInt(2,5);
while (c*c <= a*a + b*b) { c++; }
}
const correctAns = (c*c === a*a+b*b) ? 'Siku-siku' : (c*c > a*a+b*b) ? 'Tumpul' : 'Lancip';
const options = shuffle([
{ text: 'Lancip', correct: correctAns === 'Lancip' },
{ text: 'Siku-siku', correct: correctAns === 'Siku-siku' },
{ text: 'Tumpul', correct: correctAns === 'Tumpul' }
]);
return { question: `<span class="text-white">Segitiga sisi ${a}, ${b}, ${c} termasuk...<br><small class="opacity-70">${a}²+${b}²=${a*a+b*b}, ${c}²=${c*c}</small></span>`, options };
}
function genTP4() {
const type45 = Math.random() > 0.5;
if (type45) {
const k = randInt(2,9);
const ans = `${k}√2`;
const options = shuffle([
{ text: ans, correct: true },
{ text: `${k*2}`, correct: false },
{ text: `${k}√3`, correct: false },
{ text: `${k}`, correct: false }
]);
return { question: `<span class="text-white">Segitiga 45°-45°-90° dengan kaki = ${k}. Hipotenusa = ?</span>`, options };
} else {
const k = randInt(2,8);
const ans = `${k*2}`;
const options = shuffle([
{ text: ans, correct: true },
{ text: `${k}√3`, correct: false },
{ text: `${k}√2`, correct: false },
{ text: `${k*3}`, correct: false }
]);
return { question: `<span class="text-white">Segitiga 30°-60°-90° dengan sisi terpendek = ${k}. Hipotenusa = ?</span>`, options };
}
}
function genTP5() {
const x1 = randInt(0,5), y1 = randInt(0,5);
let dx, dy;
const pairs = [[3,4],[6,8],[5,12],[8,6],[4,3],[9,12]];
const p = pairs[randInt(0, pairs.length-1)];
dx = p[0]; dy = p[1];
const x2 = x1 + dx, y2 = y1 + dy;
const d = Math.round(Math.sqrt(dx*dx + dy*dy));
const options = shuffle([
{ text: String(d), correct: true },
{ text: String(d+2), correct: false },
{ text: String(d-1 > 0 ? d-1 : d+3), correct: false },
{ text: String(dx+dy), correct: false }
]);
return { question: `<span class="text-white">Jarak titik (${x1},${y1}) ke (${x2},${y2}) = ?</span>`, options };
}
function genTP6() {
const scenarios = [
(t) => ({ q: `<span class="text-white">Tangga ${t[2]}m disandarkan ke dinding. Jarak kaki ke dinding ${t[0]}m. Tinggi dinding?</span>`, ans: t[1] }),
(t) => ({ q: `<span class="text-white">Tiang ${t[1]}m, kawat dari puncak ke tanah sejauh ${t[0]}m. Panjang kawat?</span>`, ans: t[2] }),
(t) => ({ q: `<span class="text-white">Benang layang-layang ${t[2]}m, jarak horizontal ${t[0]}m. Tinggi?</span>`, ans: t[1] }),
];
const t = triplets[randInt(0, triplets.length-1)];
const s = scenarios[randInt(0, scenarios.length-1)](t);
const options = shuffle([
{ text: `${s.ans} m`, correct: true },
{ text: `${s.ans + randInt(1,3)} m`, correct: false },
{ text: `${s.ans - randInt(1,2) > 0 ? s.ans - randInt(1,2) : s.ans + 4} m`, correct: false },
{ text: `${t[0] + t[1]} m`, correct: false }
]);
return { question: s.q, options };
}
lucide.createIcons();
</script>
</body>
</html>
Kelas 8
Matematika
Bilangan Berpangkat
<!doctype html>
<html lang="id">
<head><script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script><script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Pembelajaran - Bilangan Berpangkat & Bentuk Akar</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:wght@600;700;800&display=swap" rel="stylesheet">
<style>
:root { --primary: #6366f1; --primary-dark: #4f46e5; --accent: #f59e0b; --success: #10b981; --error: #ef4444; }
body { font-family: 'DM Sans', sans-serif; }
h1, h2, h3, .heading-font { font-family: 'Fraunces', serif; }
.nav-item.active { background: var(--primary); color: white; }
.option-btn { transition: all 0.2s; }
.option-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.option-btn.correct { background: var(--success) !important; color: white !important; transform: scale(1.02); }
.option-btn.incorrect { background: var(--error) !important; color: white !important; animation: shake 0.4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation: fadeInUp 0.5s ease-out; }
.progress-fill { transition: width 0.5s ease; }
@keyframes pop { 0%{transform:scale(0)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
.emoji-pop { animation: pop 0.3s ease; }
</style>
<script src="/_sdk/e3937a0574eb2d69.data_sdk.js" type="text/javascript" integrity="sha512-xbp/ACqEQy1aDxYMtXTrR3y5MUbzxuggRR/9sD48Gl4VhLMMCiAHsxMaFV6DTdeBpR6ymF+t2zhPKYkWM3+Jfw=="></script>
<script src="/_sdk/9432170dbd2ae0df.resizing_sdk.js" type="text/javascript" integrity="sha512-FeT+58sb1f9ejWPWFjCbJvTT+SDwGV+ngrHUnlO7TWEOoqwOLj6p256kO3vOL7DIWl1cIgrobiof8v2bOigwPg=="></script>
</head>
<body data-template-id="__page-root" class="min-h-screen text-white overflow-hidden">
<div class="flex h-screen" style="height: calc(100 * min(var(--vh, 1vh), 1vh))">
<aside class="w-64 bg-slate-900 border-r border-slate-700 flex-shrink-0 overflow-y-auto hidden md:block">
<div class="p-4">
<h1 data-template-id="app-title" class="canva-text heading-font text-lg font-bold text-indigo-300"></h1>
</div>
<nav id="sidebar-nav" class="px-2 space-y-1"></nav>
</aside>
<div class="flex-1 flex flex-col overflow-hidden">
<header class="bg-slate-900/80 backdrop-blur border-b border-slate-700 px-4 py-3 flex items-center gap-3"><button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-slate-700"><i data-lucide="menu" class="w-5 h-5"></i></button>
<div class="flex-1">
<div class="h-2 bg-slate-700 rounded-full overflow-hidden">
<div id="progress-bar" class="progress-fill h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full" style="width:0%"></div>
</div>
</div><span id="progress-text" class="text-sm text-slate-400">0%</span>
</header>
<main id="content-area" class="flex-1 overflow-y-auto p-4 md:p-8"></main>
<footer class="bg-slate-900/80 backdrop-blur border-t border-slate-700 px-4 py-3 flex justify-between items-center"><button id="prev-btn" data-template-id="prev-button" class="canva-button px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 flex items-center gap-2 disabled:opacity-40" disabled><i data-lucide="chevron-left" class="w-4 h-4"></i></button> <span id="slide-indicator" class="text-sm text-slate-400"></span> <button id="next-btn" data-template-id="next-button" class="canva-button px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 flex items-center gap-2"><i data-lucide="chevron-right" class="w-4 h-4"></i></button>
</footer>
</div>
</div>
<div id="mobile-overlay" class="fixed inset-0 bg-black/60 z-40 hidden">
<aside class="w-64 bg-slate-900 h-full overflow-y-auto p-4">
<div class="flex justify-between items-center mb-4">
<h2 class="heading-font text-indigo-300 font-bold">Menu</h2><button id="close-mobile" class="p-2 hover:bg-slate-700 rounded"><i data-lucide="x" class="w-5 h-5"></i></button>
</div>
<nav id="mobile-nav" class="space-y-1"></nav>
</aside>
</div>
<script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script>
<script>
(function() {
// Random number helpers
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function shuffle(arr) { const a = [...arr]; for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];} return a; }
// Infinite quiz generators per TP
function generateTP1() {
const base = randInt(2, 9);
const exp = randInt(2, 5);
const answer = Math.pow(base, exp);
const wrong1 = base * exp;
const wrong2 = Math.pow(base, exp - 1);
return { question: `${base}<sup>${exp}</sup> = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]) };
}
function generateTP2() {
const base = randInt(2, 5);
const m = randInt(2, 5);
const n = randInt(1, 4);
const answer = Math.pow(base, m + n);
const wrong1 = Math.pow(base, m * n);
const wrong2 = Math.pow(base * 2, m);
return { question: `${base}<sup>${m}</sup> × ${base}<sup>${n}</sup> = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]) };
}
function generateTP3() {
const a = randInt(2, 5), ea = randInt(2, 3);
const b = randInt(2, 4), eb = randInt(2, 3);
const va = Math.pow(a, ea), vb = Math.pow(b, eb);
const answer = va + vb;
const wrong1 = va * vb;
const wrong2 = va - vb;
return { question: `${a}<sup>${ea}</sup> + ${b}<sup>${eb}</sup> = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]) };
}
function generateTP4() {
const a = randInt(1, 9);
const exp = randInt(3, 8);
const num = a * Math.pow(10, exp);
const numStr = num.toLocaleString('id-ID');
const answer = `${a} × 10^${exp}`;
const wrong1 = `${a*10} × 10^${exp-1}`;
const wrong2 = `${a} × 10^${exp+1}`;
return { question: `Ubah ke notasi ilmiah: ${numStr}`, correct: answer, options: shuffle([answer, wrong1, wrong2]), isText: true };
}
function generateTP5() {
const perfects = [4,9,16,25,36,49,64,81,100];
const nonPerfects = [2,3,5,6,7,8,10,11,12,13,14,15,17,19,20,21];
const correct = nonPerfects[randInt(0, nonPerfects.length-1)];
const w1 = perfects[randInt(0, perfects.length-1)];
const w2 = perfects[randInt(0, perfects.length-1)];
return { question: `Mana yang termasuk bentuk akar?`, correct: `√${correct}`, options: shuffle([`√${correct}`, `√${w1}`, `√${w2}`]), isText: true };
}
function generateTP6() {
const pairs = [[2,8],[3,12],[2,18],[5,20],[3,27],[2,32],[2,50],[3,48]];
const [f, n] = pairs[randInt(0, pairs.length-1)];
const sqrt = Math.sqrt(n / (f*f));
const inner = n / (f*f);
const answer = `${f}√${inner}`;
const wrong1 = `${inner}√${f}`;
const wrong2 = `√${n}`;
return { question: `Sederhanakan: √${n} = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]), isText: true };
}
function generateTP7() {
const nums = [2,4,6,8,10,12];
const bases = [2,3,5,6,7];
const num = nums[randInt(0, nums.length-1)];
const base = bases[randInt(0, bases.length-1)];
const gcd = num / base;
// Simplified: num/√base → (num√base)/base
const answer = `${num}√${base}/${base}`;
const wrong1 = `${num*base}`;
const wrong2 = `√${num*base}`;
return { question: `Rasionalkan: ${num}/√${base} = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2]), isText: true };
}
function generateTP8() {
const areas = [8,12,18,20,27,32,45,50,72,75,98];
const area = areas[randInt(0, areas.length-1)];
// find simplification
let bestF = 1, bestR = area;
for(let i = Math.floor(Math.sqrt(area)); i >= 2; i--) {
if(area % (i*i) === 0) { bestF = i; bestR = area/(i*i); break; }
}
const answer = bestF > 1 ? `${bestF}√${bestR} cm` : `√${area} cm`;
const wrong1 = `${area/2} cm`;
const wrong2 = `√${area} cm`;
return { question: `Luas persegi = ${area} cm². Panjang sisinya = ?`, correct: answer, options: shuffle([answer, wrong1, wrong2 === answer ? `${bestF*2}√${bestR} cm` : wrong2]), isText: true };
}
const generators = [generateTP1, generateTP2, generateTP3, generateTP4, generateTP5, generateTP6, generateTP7, generateTP8];
function buildInfiniteQuizHTML(tpIndex) {
return `
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6">
<span class="text-5xl">♾️</span>
<h2 class="heading-font text-2xl font-bold text-indigo-200 mt-3">Latihan Tak Terbatas - TP${tpIndex+1}</h2>
<p class="text-slate-400">Soal otomatis! Terus berlatih sampai mahir.</p>
<div class="mt-3 inline-flex items-center gap-2 bg-slate-800 px-4 py-2 rounded-full border border-slate-600">
<span class="text-green-400 font-bold" id="inf-correct-${tpIndex}">0</span>
<span class="text-slate-500">/</span>
<span class="text-slate-300" id="inf-total-${tpIndex}">0</span>
<span class="text-slate-400 text-sm">benar</span>
</div>
</div>
<div id="inf-question-${tpIndex}" class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"></div>
<div id="inf-feedback-${tpIndex}" class="hidden rounded-xl p-4 mb-4"></div>
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-3 rounded-xl transition-all" onclick="nextInfQuestion(${tpIndex})">Soal Berikutnya →</button>
</div>`;
}
function renderInfQuestion(tpIndex) {
const q = generators[tpIndex]();
const container = document.getElementById(`inf-question-${tpIndex}`);
const fb = document.getElementById(`inf-feedback-${tpIndex}`);
fb.classList.add('hidden');
let optionsHtml = q.options.map(opt => {
const val = q.isText ? opt : opt;
const display = q.isText ? opt : opt;
return `<button class="option-btn bg-slate-700 hover:bg-slate-600 p-3 rounded-lg" data-value="${String(val).replace(/"/g, '"')}" onclick="checkInf(this,${tpIndex},'${String(q.correct).replace(/'/g,"\\'")}')">` + display + `</button>`;
}).join('');
container.innerHTML = `<p class="font-medium text-lg mb-3">${q.question}</p><div class="grid grid-cols-3 gap-2">${optionsHtml}</div>`;
}
window.nextInfQuestion = function(tpIndex) {
renderInfQuestion(tpIndex);
};
window.checkInf = function(btn, tpIndex, correct) {
const container = document.getElementById(`inf-question-${tpIndex}`);
const allBtns = container.querySelectorAll('.option-btn');
const selected = btn.getAttribute('data-value');
allBtns.forEach(b => b.disabled = true);
const totalEl = document.getElementById(`inf-total-${tpIndex}`);
const correctEl = document.getElementById(`inf-correct-${tpIndex}`);
totalEl.textContent = parseInt(totalEl.textContent) + 1;
const fb = document.getElementById(`inf-feedback-${tpIndex}`);
if(selected === correct) {
btn.classList.add('correct');
correctEl.textContent = parseInt(correctEl.textContent) + 1;
fb.className = 'rounded-xl p-4 mb-4 bg-green-900/30 border border-green-500 text-green-300';
fb.innerHTML = '✅ Benar! Klik "Soal Berikutnya" untuk lanjut.';
} else {
btn.classList.add('incorrect');
allBtns.forEach(b => {
if(b.getAttribute('data-value') === correct) {
b.classList.add('correct');
}
});
fb.className = 'rounded-xl p-4 mb-4 bg-red-900/30 border border-red-500 text-red-300';
fb.innerHTML = `❌ Kurang tepat. Jawaban yang benar: <strong>${correct}</strong>`;
}
fb.classList.remove('hidden');
setTimeout(() => { document.getElementById(`inf-question-${tpIndex}`).scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 100);
};
// Slides
const slides = [
{ section:'Apersepsi', icon:'🔥', title:'Ledakan Bakteri!', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><span class="text-6xl emoji-pop inline-block">🦠</span><h2 class="heading-font text-3xl font-bold mt-4 text-indigo-200">Bayangkan Ini...</h2></div>
<div class="bg-slate-800 rounded-2xl p-6 border border-slate-600 mb-6">
<img data-template-id="bacteria-img" class="canva-image w-full h-48 object-cover rounded-xl mb-4" loading="lazy">
<p class="text-lg text-slate-200 leading-relaxed">1 bakteri membelah diri jadi 2 setiap 20 menit. Setelah <strong class="text-amber-400">4 jam</strong>, kira-kira ada berapa bakteri?</p>
</div>
<div class="grid grid-cols-2 gap-3" id="apersepsi-q1">
<button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'wrong')">24 bakteri</button>
<button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'wrong')">240 bakteri</button>
<button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'correct')">4.096 bakteri</button>
<button class="option-btn bg-slate-700 hover:bg-slate-600 p-4 rounded-xl text-center font-medium" onclick="checkAper(this,'wrong')">1 juta bakteri</button>
</div>
<div id="aper-feedback" class="mt-4 hidden bg-indigo-900/50 border border-indigo-500 rounded-xl p-4"><p class="text-indigo-200">🎯 <strong>Tepat!</strong> 2<sup>12</sup> = 4.096! Inilah kekuatan <em>bilangan berpangkat</em>.</p></div>
</div>`},
{ section:'Apersepsi', icon:'🔥', title:'Dunia Super Kecil & Besar', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><h2 class="heading-font text-3xl font-bold text-indigo-200">Dari Atom ke Galaksi 🌌</h2></div>
<div class="grid md:grid-cols-2 gap-4 mb-6">
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600"><p class="text-5xl text-center mb-3">🔬</p><p class="text-center text-slate-300">Ukuran virus: <strong class="text-cyan-400">0,000000001 m</strong></p></div>
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600"><img data-template-id="galaxy-img" class="canva-image w-full h-32 object-cover rounded-xl mb-3" loading="lazy"><p class="text-center text-slate-300">Jarak Bumi-Matahari: <strong class="text-amber-400">150.000.000.000 m</strong></p></div>
</div>
<div class="bg-gradient-to-r from-indigo-900/50 to-purple-900/50 rounded-2xl p-6 border border-indigo-500/30 text-center">
<p class="text-xl text-indigo-100">💡 Bagaimana kalau ada cara <strong>lebih singkat</strong> untuk menulis angka-angka itu?</p>
</div>
</div>`},
{ section:'Asesmen Awal', icon:'📋', title:'Cek Pemahaman Awal', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><span class="text-5xl">🧠</span><h2 class="heading-font text-2xl font-bold mt-3 text-indigo-200">Cek Dulu!</h2><p class="text-slate-400 mt-1">Ini bukan nilai!</p></div>
<div id="pretest" class="space-y-4">
<div class="bg-slate-800 rounded-xl p-5 border border-slate-600"><p class="font-medium mb-3">1. 3 × 3 × 3 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,0,'correct')">27</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,0,'wrong')">9</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,0,'wrong')">12</button></div></div>
<div class="bg-slate-800 rounded-xl p-5 border border-slate-600"><p class="font-medium mb-3">2. √9 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,1,'correct')">3</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,1,'wrong')">4.5</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,1,'wrong')">81</button></div></div>
<div class="bg-slate-800 rounded-xl p-5 border border-slate-600"><p class="font-medium mb-3">3. 10×10×10 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,2,'wrong')">30</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,2,'correct')">10³</button><button class="option-btn bg-slate-700 p-3 rounded-lg text-center" onclick="preAnswer(this,2,'wrong')">3¹⁰</button></div></div>
</div>
<div id="pretest-result" class="mt-4 hidden bg-slate-800 rounded-xl p-5 border border-indigo-500 text-center"><p class="text-xl font-bold text-indigo-300" id="pretest-score"></p><p class="text-slate-400 mt-2">Apapun hasilnya, kita belajar bersama! 💪</p></div>
</div>`},
// TP1
{ section:'Materi', icon:'📚', title:'TP1: Bilangan Berpangkat', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="bg-gradient-to-br from-indigo-900/60 to-slate-800 rounded-2xl p-6 border border-indigo-500/30 mb-6">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4">Bilangan Berpangkat Bulat</h2>
<div class="bg-slate-900/50 rounded-xl p-4 mb-4 text-center"><p class="text-3xl font-bold">a<sup>n</sup> = a × a × ... × a</p><p class="text-slate-400 mt-2">sebanyak <strong class="text-amber-400">n</strong> kali</p></div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-slate-800 rounded-lg p-4"><p class="text-sm text-slate-400 mb-1">Contoh:</p><p class="text-xl">2<sup>5</sup> = 2×2×2×2×2 = <strong class="text-green-400">32</strong></p></div>
<div class="bg-slate-800 rounded-lg p-4"><p class="text-sm text-slate-400 mb-1">Pangkat negatif:</p><p class="text-xl">2<sup>-3</sup> = 1/2³ = <strong class="text-green-400">1/8</strong></p></div>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP1', content: '__INF_0__' },
// TP2
{ section:'Materi', icon:'📚', title:'TP2: Sifat Bilangan Berpangkat', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">5 Sifat Penting ⚡</h2>
<div class="space-y-3 mb-6">
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">1</span><div><p class="font-medium">a<sup>m</sup> × a<sup>n</sup> = a<sup>m+n</sup></p></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">2</span><div><p class="font-medium">a<sup>m</sup> ÷ a<sup>n</sup> = a<sup>m-n</sup></p></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">3</span><div><p class="font-medium">(a<sup>m</sup>)<sup>n</sup> = a<sup>m×n</sup></p></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">4</span><div><p class="font-medium">(a×b)<sup>n</sup> = a<sup>n</sup> × b<sup>n</sup></p></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600 flex items-center gap-4"><span class="text-2xl bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">5</span><div><p class="font-medium">a<sup>0</sup> = 1 (a ≠ 0)</p></div></div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP2', content: '__INF_1__' },
// TP3
{ section:'Materi', icon:'📚', title:'TP3: Operasi Bilangan Berpangkat', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Operasi Hitung 🔢</h2>
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600 mb-5">
<h3 class="font-bold text-lg text-amber-400 mb-3">Ingat!</h3>
<ul class="space-y-2 text-slate-300">
<li>✅ Perkalian & Pembagian: pakai sifat pangkat</li>
<li>✅ Penjumlahan & Pengurangan: hitung dulu nilainya!</li>
<li class="text-red-400">❌ 2³ + 2⁴ ≠ 2⁷</li>
<li class="text-green-400">✅ 2³ + 2⁴ = 8 + 16 = 24</li>
</ul>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP3', content: '__INF_2__' },
// TP4
{ section:'Materi', icon:'📚', title:'TP4: Notasi Ilmiah', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Notasi Ilmiah 🚀</h2>
<div class="bg-gradient-to-r from-cyan-900/40 to-indigo-900/40 rounded-2xl p-6 border border-cyan-500/30 mb-5">
<div class="text-center mb-4"><p class="text-2xl font-bold">a × 10<sup>n</sup></p><p class="text-slate-400">dimana 1 ≤ a < 10</p></div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-cyan-400">🔬 Ukuran virus:</p><p>0,0000001 m = <strong>1 × 10<sup>-7</sup> m</strong></p></div>
<div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-amber-400">🌍 Jarak Bumi-Matahari:</p><p>150.000.000 km = <strong>1,5 × 10<sup>8</sup> km</strong></p></div>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP4', content: '__INF_3__' },
// TP5
{ section:'Materi', icon:'📚', title:'TP5: Bentuk Akar', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-5"><span class="text-5xl">🌳</span><h2 class="heading-font text-2xl font-bold text-indigo-200 mt-2">Bentuk Akar</h2></div>
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600 mb-5">
<img data-template-id="roots-img" class="canva-image w-full h-40 object-cover rounded-xl mb-4" loading="lazy">
<p class="text-slate-300 mb-3"><strong class="text-amber-400">Bentuk akar</strong> = akar yang hasilnya bilangan irasional.</p>
<div class="grid grid-cols-2 gap-3">
<div class="bg-green-900/30 border border-green-500/30 rounded-lg p-3 text-center"><p class="text-sm text-green-400">✅ Bentuk Akar</p><p class="text-xl">√2, √3, √5</p></div>
<div class="bg-red-900/30 border border-red-500/30 rounded-lg p-3 text-center"><p class="text-sm text-red-400">❌ Bukan</p><p class="text-xl">√4=2, √9=3</p></div>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP5', content: '__INF_4__' },
// TP6
{ section:'Materi', icon:'📚', title:'TP6: Operasi Bentuk Akar', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Operasi Bentuk Akar ✂️</h2>
<div class="space-y-3 mb-5">
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-amber-400 font-medium mb-1">Penjumlahan/Pengurangan:</p><p>a√c ± b√c = (a±b)√c</p></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-cyan-400 font-medium mb-1">Perkalian:</p><p>√a × √b = √(a×b)</p></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-purple-400 font-medium mb-1">Menyederhanakan:</p><p>√12 = √(4×3) = 2√3</p></div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP6', content: '__INF_5__' },
// TP7
{ section:'Materi', icon:'📚', title:'TP7: Rasionalisasi Penyebut', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Rasionalisasi Penyebut 🎯</h2>
<div class="bg-gradient-to-r from-purple-900/40 to-indigo-900/40 rounded-2xl p-6 border border-purple-500/30 mb-5">
<p class="text-slate-300 mb-4">Menghilangkan bentuk akar dari penyebut pecahan.</p>
<div class="space-y-3">
<div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-purple-300 mb-1">Tipe 1:</p><p class="text-xl text-center">1/√3 × (√3/√3) = <strong>√3/3</strong></p></div>
<div class="bg-slate-900/60 rounded-lg p-4"><p class="text-sm text-purple-300 mb-1">Tipe 2: Penyebut (a + √b)</p><p class="text-xl text-center">Kalikan dengan <strong class="text-amber-400">(a - √b)</strong></p></div>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP7', content: '__INF_6__' },
// TP8
{ section:'Materi', icon:'📚', title:'TP8: Masalah Kontekstual', content:`
<div class="max-w-3xl mx-auto fade-in">
<h2 class="heading-font text-2xl font-bold text-indigo-200 mb-4 text-center">Dunia Nyata! 🌍</h2>
<div class="bg-slate-800 rounded-2xl p-5 border border-slate-600 mb-5">
<img data-template-id="architect-img" class="canva-image w-full h-40 object-cover rounded-xl mb-4" loading="lazy">
<div class="bg-amber-900/30 border border-amber-500/30 rounded-lg p-4">
<p class="text-amber-300 font-medium mb-2">🏗️ Contoh:</p>
<p class="text-slate-300">Luas taman persegi = 72 m². Sisi = √72 = √(36×2) = 6√2 m</p>
</div>
</div>
</div>`},
{ section:'Latihan', icon:'♾️', title:'Latihan TP8', content: '__INF_7__' },
// Kuis
{ section:'Kuis', icon:'🏆', title:'Kuis Penguatan', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><span class="text-5xl">🏆</span><h2 class="heading-font text-2xl font-bold text-indigo-200 mt-3">Kuis Penguatan</h2><p class="text-slate-400">5 soal cepat!</p></div>
<div id="quiz-container">
<div class="quiz-q" data-qi="0"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 1/5</p><p class="font-medium text-lg">(2³)² = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,0,'wrong')">2⁵</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,0,'correct')">2⁶ = 64</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,0,'wrong')">4⁶</button></div></div></div>
<div class="quiz-q hidden" data-qi="1"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 2/5</p><p class="font-medium text-lg">0,0067 dalam bentuk baku = ?</p><div class="grid grid-cols-2 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,1,'correct')">6,7 × 10⁻³</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,1,'wrong')">67 × 10⁻⁴</button></div></div></div>
<div class="quiz-q hidden" data-qi="2"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 3/5</p><p class="font-medium text-lg">√18 + √2 = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,2,'wrong')">√20</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,2,'correct')">4√2</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,2,'wrong')">3√2</button></div></div></div>
<div class="quiz-q hidden" data-qi="3"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 4/5</p><p class="font-medium text-lg">4/√8 = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,3,'correct')">√2</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,3,'wrong')">2√2</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,3,'wrong')">4√8/8</button></div></div></div>
<div class="quiz-q hidden" data-qi="4"><div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4"><p class="text-sm text-indigo-400 mb-2">Soal 5/5</p><p class="font-medium text-lg">5⁰ + 2⁻¹ = ?</p><div class="grid grid-cols-3 gap-2 mt-3"><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,4,'correct')">1,5</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,4,'wrong')">1</button><button class="option-btn bg-slate-700 p-3 rounded-lg" onclick="quizAnswer(this,4,'wrong')">0,5</button></div></div></div>
</div>
<div id="quiz-result" class="hidden text-center bg-gradient-to-r from-indigo-900/50 to-purple-900/50 rounded-2xl p-6 border border-indigo-500/30"><span class="text-5xl" id="quiz-emoji"></span><p class="text-2xl font-bold mt-3" id="quiz-score-text"></p></div>
</div>`},
// Asesmen Akhir
{ section:'Asesmen Akhir', icon:'📝', title:'Evaluasi Akhir', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6"><span class="text-5xl">📝</span><h2 class="heading-font text-2xl font-bold text-indigo-200 mt-3">Asesmen Akhir</h2><p class="text-slate-400">8 soal sesuai 8 TP</p></div>
<div id="final-test" class="space-y-4">
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP1</p><p class="font-medium mb-2">1. 4⁴ = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,0,'correct','4⁴ = 4×4×4×4 = 256')">256</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,0,'wrong','4⁴ = 4×4×4×4 = 256')">64</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,0,'wrong','4⁴ = 4×4×4×4 = 256')">16</button></div><div id="final-explain-0" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP2</p><p class="font-medium mb-2">2. 5³ ÷ 5¹ = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,1,'correct','5³ ÷ 5¹ = 5³⁻¹ = 5² = 25')">25</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,1,'wrong','5³ ÷ 5¹ = 5³⁻¹ = 5² = 25')">5</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,1,'wrong','5³ ÷ 5¹ = 5³⁻¹ = 5² = 25')">125</button></div><div id="final-explain-1" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP3</p><p class="font-medium mb-2">3. 2⁴ - 3² = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,2,'correct','2⁴ = 16, 3² = 9, maka 16 - 9 = 7')">7</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,2,'wrong','2⁴ = 16, 3² = 9, maka 16 - 9 = 7')">5</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,2,'wrong','2⁴ = 16, 3² = 9, maka 16 - 9 = 7')">23</button></div><div id="final-explain-2" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP4</p><p class="font-medium mb-2">4. 45.000.000 = ?</p><div class="grid grid-cols-2 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,3,'correct','Geser desimal ke kiri hingga ada 1 digit, maka 4,5 × 10⁷')">4,5 × 10⁷</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,3,'wrong','Geser desimal ke kiri hingga ada 1 digit, maka 4,5 × 10⁷')">45 × 10⁶</button></div><div id="final-explain-3" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP5</p><p class="font-medium mb-2">5. Mana bentuk akar?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,4,'wrong','√49 = 7 (rasional), √100 = 10 (rasional), tetapi √13 tidak bisa disederhanakan (irasional)')">√49</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,4,'correct','√49 = 7 (rasional), √100 = 10 (rasional), tetapi √13 tidak bisa disederhanakan (irasional)')">√13</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,4,'wrong','√49 = 7 (rasional), √100 = 10 (rasional), tetapi √13 tidak bisa disederhanakan (irasional)')">√100</button></div><div id="final-explain-4" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP6</p><p class="font-medium mb-2">6. 2√3 × 3√3 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,5,'correct','2√3 × 3√3 = (2×3) × √3 × √3 = 6 × 3 = 18')">18</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,5,'wrong','2√3 × 3√3 = (2×3) × √3 × √3 = 6 × 3 = 18')">6√3</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,5,'wrong','2√3 × 3√3 = (2×3) × √3 × √3 = 6 × 3 = 18')">6√9</button></div><div id="final-explain-5" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP7</p><p class="font-medium mb-2">7. 10/√5 = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,6,'correct','10/√5 × √5/√5 = 10√5/5 = 2√5')">2√5</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,6,'wrong','10/√5 × √5/√5 = 10√5/5 = 2√5')">5√2</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,6,'wrong','10/√5 × √5/√5 = 10√5/5 = 2√5')">10√5/5</button></div><div id="final-explain-6" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-600"><p class="text-xs text-indigo-400 mb-1">TP8</p><p class="font-medium mb-2">8. Luas persegi = 200 cm². Sisi = ?</p><div class="grid grid-cols-3 gap-2"><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,7,'correct','Sisi = √200 = √(100×2) = 10√2 cm')">10√2 cm</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,7,'wrong','Sisi = √200 = √(100×2) = 10√2 cm')">100 cm</button><button class="option-btn bg-slate-700 p-2 rounded-lg text-sm" onclick="finalAns(this,7,'wrong','Sisi = √200 = √(100×2) = 10√2 cm')">√200 cm</button></div><div id="final-explain-7" class="hidden mt-3 bg-indigo-900/40 border border-indigo-500/50 rounded-lg p-3 text-sm"></div></div>
</div>
<div id="final-result" class="hidden mt-6 text-center bg-gradient-to-r from-green-900/50 to-emerald-900/50 rounded-2xl p-6 border border-green-500/30"><span class="text-5xl" id="final-emoji"></span><p class="text-2xl font-bold mt-3" id="final-score-text"></p><p class="text-slate-400 mt-2" id="final-msg"></p></div>
</div>`},
// Refleksi
{ section:'Refleksi', icon:'💭', title:'Refleksi Mandiri', content:`
<div class="max-w-3xl mx-auto fade-in">
<div class="text-center mb-6">
<img data-template-id="celebrate-img" class="canva-image w-full h-40 object-cover rounded-2xl mb-4" loading="lazy">
<h2 class="heading-font text-2xl font-bold text-indigo-200">Refleksi Diri 💭</h2>
</div>
<div class="grid grid-cols-3 gap-4 mb-6" id="mood-select">
<button class="bg-slate-800 hover:bg-indigo-900/50 border border-slate-600 hover:border-indigo-500 rounded-xl p-4 text-center transition-all" onclick="selectMood(this)"><span class="text-4xl block mb-2">😊</span><p class="text-sm">Paham banget!</p></button>
<button class="bg-slate-800 hover:bg-amber-900/50 border border-slate-600 hover:border-amber-500 rounded-xl p-4 text-center transition-all" onclick="selectMood(this)"><span class="text-4xl block mb-2">🤔</span><p class="text-sm">Lumayan</p></button>
<button class="bg-slate-800 hover:bg-red-900/50 border border-slate-600 hover:border-red-500 rounded-xl p-4 text-center transition-all" onclick="selectMood(this)"><span class="text-4xl block mb-2">😵</span><p class="text-sm">Masih bingung</p></button>
</div>
<div class="bg-slate-800 rounded-xl p-5 border border-slate-600 mb-4">
<label for="reflection-text" class="block font-medium mb-2">Apa yang paling kamu ingat?</label>
<textarea id="reflection-text" class="w-full bg-slate-900 border border-slate-600 rounded-lg p-3 text-white resize-none focus:border-indigo-500 focus:outline-none" rows="3" placeholder="Tulis di sini..."></textarea>
</div>
<div id="reflection-done" class="hidden mt-4 text-center bg-indigo-900/30 border border-indigo-500/30 rounded-xl p-6"><span class="text-5xl">🎉</span><p class="text-xl font-bold text-indigo-200 mt-3">Terima kasih!</p></div>
<button id="submit-reflection" class="mt-4 w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-3 rounded-xl transition-all" onclick="submitReflection()">Kirim Refleksi ✨</button>
</div>`}
];
let currentSlide = 0;
let preScores = [null,null,null];
let quizScores = [null,null,null,null,null];
let finalScores = Array(8).fill(null);
function init() {
renderNav();
renderSlide();
lucide.createIcons();
document.getElementById('prev-btn').addEventListener('click', () => navigate(-1));
document.getElementById('next-btn').addEventListener('click', () => navigate(1));
document.getElementById('mobile-menu-btn').addEventListener('click', () => document.getElementById('mobile-overlay').classList.remove('hidden'));
document.getElementById('close-mobile').addEventListener('click', () => document.getElementById('mobile-overlay').classList.add('hidden'));
document.getElementById('mobile-overlay').addEventListener('click', (e) => { if(e.target===e.currentTarget) e.currentTarget.classList.add('hidden'); });
}
function renderNav() {
const navHtml = slides.map((s,i) => `<button class="nav-item w-full text-left px-3 py-2 rounded-lg text-sm flex items-center gap-2 hover:bg-slate-700 transition-colors ${i===currentSlide?'active':''}" onclick="goTo(${i})">${s.icon} <span class="truncate">${s.title}</span></button>`).join('');
document.getElementById('sidebar-nav').innerHTML = navHtml;
document.getElementById('mobile-nav').innerHTML = navHtml;
}
function renderSlide() {
const s = slides[currentSlide];
let content = s.content;
// Check if infinite quiz slide
const infMatch = content.match(/^__INF_(\d+)__$/);
if (infMatch) {
const tpIdx = parseInt(infMatch[1]);
content = buildInfiniteQuizHTML(tpIdx);
}
document.getElementById('content-area').innerHTML = content;
if (infMatch) {
renderInfQuestion(parseInt(infMatch[1]));
}
document.getElementById('slide-indicator').textContent = `${currentSlide+1} / ${slides.length}`;
document.getElementById('prev-btn').disabled = currentSlide === 0;
const pct = Math.round(((currentSlide+1)/slides.length)*100);
document.getElementById('progress-bar').style.width = pct+'%';
document.getElementById('progress-text').textContent = pct+'%';
renderNav();
lucide.createIcons();
}
function navigate(dir) {
const next = currentSlide + dir;
if(next >= 0 && next < slides.length) { currentSlide = next; renderSlide(); document.getElementById('content-area').scrollTop = 0; }
}
window.goTo = function(i) { currentSlide = i; renderSlide(); document.getElementById('content-area').scrollTop = 0; document.getElementById('mobile-overlay').classList.add('hidden'); };
window.checkAper = function(btn, result) {
const parent = btn.closest('#apersepsi-q1');
parent.querySelectorAll('button').forEach(b => b.disabled = true);
btn.classList.add(result === 'correct' ? 'correct' : 'incorrect');
const fb = document.getElementById('aper-feedback');
if(result === 'correct') fb.classList.remove('hidden');
else { fb.innerHTML = '<p class="text-amber-300">Bukan itu! 2¹² = 4.096!</p>'; fb.classList.remove('hidden'); }
};
window.preAnswer = function(btn, idx, result) {
const parent = btn.closest('.bg-slate-800');
parent.querySelectorAll('button').forEach(b => b.disabled = true);
btn.classList.add(result === 'correct' ? 'correct' : 'incorrect');
preScores[idx] = result === 'correct' ? 1 : 0;
if(preScores.every(s => s !== null)) {
const total = preScores.reduce((a,b)=>a+b,0);
document.getElementById('pretest-score').textContent = `Skor: ${total}/3`;
document.getElementById('pretest-result').classList.remove('hidden');
}
};
window.quizAnswer = function(btn, idx, result) {
const parent = btn.closest('.quiz-q');
parent.querySelectorAll('.option-btn').forEach(b => b.disabled = true);
btn.classList.add(result === 'correct' ? 'correct' : 'incorrect');
quizScores[idx] = result === 'correct' ? 1 : 0;
setTimeout(() => {
const nextQ = document.querySelector(`.quiz-q[data-qi="${idx+1}"]`);
if(nextQ) { parent.classList.add('hidden'); nextQ.classList.remove('hidden'); }
else {
const total = quizScores.reduce((a,b)=>a+b,0);
document.getElementById('quiz-emoji').textContent = total >= 4 ? '🌟' : '👍';
document.getElementById('quiz-score-text').textContent = `Skor: ${total}/5`;
document.getElementById('quiz-result').classList.remove('hidden');
}
}, 800);
};
window.finalAns = function(btn, idx, result, explanation) {
const parent = btn.closest('.bg-slate-800');
parent.querySelectorAll('.option-btn').forEach(b => b.disabled = true);
btn.classList.add(result === 'correct' ? 'correct' : 'incorrect');
finalScores[idx] = result === 'correct' ? 1 : 0;
// Show explanation if answer is wrong
if(result === 'wrong') {
const explainEl = document.getElementById(`final-explain-${idx}`);
explainEl.innerHTML = `<strong class="text-indigo-300">📖 Pembahasan:</strong> ${explanation}`;
explainEl.classList.remove('hidden');
}
if(finalScores.every(s => s !== null)) {
const total = finalScores.reduce((a,b)=>a+b,0);
document.getElementById('final-emoji').textContent = total >= 7 ? '🌟' : '👍';
document.getElementById('final-score-text').textContent = `Skor: ${total}/8`;
document.getElementById('final-msg').textContent = total >= 7 ? 'Luar biasa!' : total >= 5 ? 'Bagus!' : 'Jangan menyerah!';
document.getElementById('final-result').classList.remove('hidden');
}
};
window.selectMood = function(btn) {
document.querySelectorAll('#mood-select button').forEach(b => { b.classList.remove('ring-2','ring-indigo-500','bg-indigo-900/50'); b.classList.add('bg-slate-800'); });
btn.classList.add('ring-2','ring-indigo-500','bg-indigo-900/50'); btn.classList.remove('bg-slate-800');
};
window.submitReflection = function() {
document.getElementById('submit-reflection').classList.add('hidden');
document.getElementById('reflection-done').classList.remove('hidden');
};
document.addEventListener('DOMContentLoaded', init);
})();
</script>
</body>
</html>
Kelas 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>
📊 Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Rifka Tunnisa Tunny | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Rifka Tunnisa Tunny | Statistika : Misi Statistika Part1 Matematika — Kelas 8 | 100 | 100% | Refleksi Statistika: Misi Selesai! | Evaluasi Individu: Statistika Dasar |
| Rifka Tunnisa Tunny | Teorema Pythagoras : Jenis Segitiga & Pythagoras Matematika — Kelas 8 | 100 | 100% | Refleksi Jenis Segitiga: Misi Selesai! | Evaluasi: Jenis Sudut pada Segitiga |
| Rifka Tunnisa Tunny | Teorema Pythagoras : Misteri Teorema Pythagoras 📐 Matematika — Kelas 8 | 100 | 100% | Refleksi Pythagoras: Misi Pythagoras Selesai! | Evaluasi: Pembuktian & Tripel Pythagoras |
| alfiansyah mahulauw | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| jidan wabula | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| indri selly | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| asi komala tunny | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| JENITA | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| PUTRI MAHULAUW | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| JAHIRA SOUMENA | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| ilham fajar sely | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 0 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| ABDUL ISHAK MARASABESSY | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| PUTRI MAHULAUW | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| maulana salong | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| jidan wabula | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| TIARA wally | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| DINIARTY KHAILA ANG | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| syafril umar dani wael | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| PANDI AZIZ SOUMENA | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| FAJRUL AUFAR MAASILY | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| rahmat salong | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| alda risma rering | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| fadlan soulisa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| muhammad barru soulisa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| refan mahulauw | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| muhamad baru soulisa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 40 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| syafril uamr dani wael | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 40 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| alfiansyah mahulauw | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| mega desfiona | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| hawa nurfa dila kiat | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| julia ramadany pirasou | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| rahima soumena | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| madania mana anu | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| fadil tomia | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| ilham ulukapy | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| syarlan soumena | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| Jelita Apriliani Soulisa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| Rifka Tunnisa Tunny | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| ismail assel | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| asirnats | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 0 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| sry yulianty pirasou | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| Muhammad Adlan Salaputa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| wa putri | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| rafa mahulauw | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| alpian marinda | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 40 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| irwan pawae | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| syahad jumu | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| banni syafira assel | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| niki mauluda | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 20 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |