Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 8
Matematika
Statistika : Misi Statistika Part1
<!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: Statistika & Pemusatan Data 📊</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: #f0f9ff;
background-image: radial-gradient(#bae6fd 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; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-sky-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-sky-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="bar-chart-3" 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-sky-800 uppercase tracking-widest">Matematika Kelas 8 - Statistika & Pemusatan Data</span>
<span id="progress-text" class="text-xs font-black text-white bg-sky-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-sky-500 to-indigo-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-sky-100 text-sky-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-sky-600 to-blue-600">Statistika Data</span> 📊
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-sky-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-sky-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-sky-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-sky-600">membedakan data kualitatif dan data kuantitatif</span> berdasarkan karakteristik penyajiannya.</li>
<li>Peserta didik dapat <span class="text-sky-600">menentukan ukuran pemusatan data</span> (modus, median, dan mean) untuk menyelesaikan masalah kontekstual.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menganalisis data dengan seru? Yuk, kita mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Data Sekitar -->
<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-sky-900 bg-sky-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Data Sekitar 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati perbedaan dua sajian informasi di bawah ini!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm space-y-3">
<span class="text-4xl">📝</span>
<h4 class="font-black text-xl text-blue-800">Informasi A:</h4>
<p class="text-slate-600 font-bold">Warna favorit siswa: Merah, Biru, Biru, Hijau, Merah.</p>
<p class="text-xs font-bold text-blue-600 bg-blue-50 p-2 rounded-lg">Bentuknya berupa kategori atau kata sifat (bukan angka nominal hasil ukur).</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<span class="text-4xl">🔢</span>
<h4 class="font-black text-xl text-emerald-800">Informasi B:</h4>
<p class="text-slate-600 font-bold">Nilai ulangan harian: 75, 80, 90, 85, 70.</p>
<p class="text-xs font-bold text-emerald-600 bg-emerald-50 p-2 rounded-lg">Bentuknya berupa bilangan atau angka hasil pengukuran nyata.</p>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Bagaimana cara pengurus OSIS mengetahui ekstrakurikuler yang paling diminati, atau guru menghitung nilai rata-rata kelas secara adil?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Semua itu diselesaikan menggunakan konsep dasar Statistika, baik pemilahan jenis data maupun pengukuran pemusatan nilai!</p>
</div>
</div>
<!-- Slide 4: Tinjauan Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Penerapan Nyata Statistika di Dunia Nyata</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🏥</span>
<h4 class="font-black text-xl text-indigo-800">Dunia Kesehatan</h4>
<p class="text-slate-600 font-bold text-sm">Dokter dan peneliti menganalisis rata-rata tekanan darah dan grafik tumbuh kembang tinggi balita.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">⚽</span>
<h4 class="font-black text-xl text-indigo-800">Analisis Olahraga</h4>
<p class="text-slate-600 font-bold text-sm">Mencatat rata-rata gol, persentase operan berhasil, dan performa tim di tiap pertandingan.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">📈</span>
<h4 class="font-black text-xl text-indigo-800">Bisnis & Ekonomi</h4>
<p class="text-slate-600 font-bold text-sm">Menghitung produk yang paling laris (modus) untuk menyusun strategi stok barang toko.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Data Kualitatif vs Kuantitatif -->
<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-sky-900 bg-sky-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Jenis Data Statistika 📋</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-sky-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-sky-50 p-5 rounded-2xl border-2 border-sky-200 space-y-2">
<h4 class="font-black text-sky-900 text-lg">1. Data Kualitatif</h4>
<p class="text-slate-700 font-bold text-sm">Data yang berbentuk kata-kata, kategori, atau sifat objek (bukan angka bilangan hitung).</p>
<p class="text-xs font-bold text-sky-700"><b>Contoh:</b> Golongan darah, merk ponsel, warna favorit, ekstrakurikuler.</p>
</div>
<div class="bg-blue-50 p-5 rounded-2xl border-2 border-blue-200 space-y-2">
<h4 class="font-black text-blue-900 text-lg">2. Data Kuantitatif</h4>
<p class="text-slate-700 font-bold text-sm">Data yang berbentuk angka atau bilangan yang diperoleh dari hasil pengukuran atau perhitungan.</p>
<p class="text-xs font-bold text-blue-700"><b>Contoh:</b> Tinggi badan, jumlah siswa, suhu ruangan, berat beras.</p>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-3">
<h4 class="font-black text-slate-800">Uji Cepat Konsep:</h4>
<p class="text-slate-700 font-bold text-sm">Apakah data "Ukuran Sepatu Siswa Kelas 8" termasuk kualitatif atau kuantitatif?</p>
<div class="flex gap-4">
<button onclick="checkMiniQuiz(this, false, 'mini-fb-1', 'Kurang tepat. Ukuran sepatu dinyatakan dalam bentuk angka ukur (misal: 38, 39, 40).')" class="px-5 py-2.5 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100 transition">Kualitatif</button>
<button onclick="checkMiniQuiz(this, true, 'mini-fb-1', 'Tepat sekali! Ukuran sepatu berupa angka ukuran nyata, sehingga merupakan data Kuantitatif.')" class="px-5 py-2.5 bg-sky-600 text-white font-bold rounded-xl hover:bg-sky-700 transition">Kuantitatif ✅</button>
</div>
<div id="mini-fb-1" class="hidden p-3 rounded-xl text-sm font-bold border-l-4 pop-in"></div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Ukuran Pemusatan Data -->
<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">Materi 2: Ukuran Pemusatan Data 📐</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-200">
<h4 class="font-black text-indigo-900 mb-1">Mean (Rata-rata)</h4>
<p class="text-xs font-bold text-slate-600">Jumlah seluruh nilai data dibagi oleh total banyaknya data.</p>
<p class="math-box text-sm mt-2 text-indigo-700 bg-white p-2 rounded-lg border border-indigo-200">Mean = Σx / n</p>
</div>
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-200">
<h4 class="font-black text-indigo-900 mb-1">Median (Nilai Tengah)</h4>
<p class="text-xs font-bold text-slate-600">Nilai data yang terletak tepat di tengah setelah seluruh data diurutkan dari terkecil.</p>
</div>
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-200">
<h4 class="font-black text-indigo-900 mb-1">Modus (Paling Sering)</h4>
<p class="text-xs font-bold text-slate-600">Nilai atau kategori data yang memiliki frekuensi pemunculan paling banyak.</p>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Uji Cepat Hitung:</h4>
<p class="text-slate-700 font-bold text-sm">Diberikan data nilai: <b>6, 8, 6, 9, 7</b>. Berapakah nilai <b>Modus</b> dari data tersebut?</p>
<div class="flex gap-3">
<button onclick="checkMiniQuiz(this, true, 'mini-fb-2', 'Luar biasa! Angka 6 muncul sebanyak 2 kali, paling sering dibanding angka lainnya.')" class="px-5 py-2.5 bg-indigo-600 text-white font-bold rounded-xl hover:bg-indigo-700 transition">6 ✅</button>
<button onclick="checkMiniQuiz(this, false, 'mini-fb-2', 'Kurang tepat, angka 7 hanya muncul 1 kali.')" class="px-5 py-2.5 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100 transition">7</button>
<button onclick="checkMiniQuiz(this, false, 'mini-fb-2', 'Kurang tepat, angka 8 hanya muncul 1 kali.')" class="px-5 py-2.5 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100 transition">8</button>
</div>
<div id="mini-fb-2" class="hidden p-3 rounded-xl text-sm font-bold border-l-4 pop-in"></div>
</div>
</div>
</div>
<!-- Slide 7: Battle Panel Multi-User (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-sky-600 to-indigo-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab masing-masing 5 soal secara serentak. Siapa cepat habiskan 5 soal dia MENANG!</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-blue-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-blue-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🏎️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-blue-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-blue-50 p-4 rounded-2xl border-2 border-blue-100 text-center">
<p id="ifp-q-1" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-sky-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-sky-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚓 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-sky-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-sky-50 p-4 rounded-2xl border-2 border-sky-100 text-center">
<p id="ifp-q-2" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-indigo-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-indigo-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-indigo-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-100 text-center">
<p id="ifp-q-3" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-sky-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#1e3a8a] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: Latihan Soal Evaluasi -->
<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-sky-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-sky-700 bg-sky-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
</div>
<!-- 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 setelah mempelajari materi Statistika hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">🤩</div>
<h3 class="font-black text-xl text-slate-700">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 menarik atau paling menantang?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-sky-50 border-2 border-sky-200 focus:border-sky-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Halaman Kirim Nilai ke LMS / Guru -->
<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-1 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-sky-900 mb-1">Hebat! Pembelajaran Selesai.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-green-600 text-5xl bg-green-100 px-6 py-1.5 rounded-2xl inline-block ml-2 shadow-sm font-black">0</span>
</p>
<div class="bg-white border-4 border-sky-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-sky-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-2 relative z-10">Silakan isi data untuk dikirim ke sistem Bapak/Ibu Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-sky-500 bg-slate-50">
</div>
<div class="relative z-10">
<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-sky-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-2 bg-gradient-to-r from-sky-500 to-blue-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</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-sky-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-sky-600 shadow-[0_4px_0px_#0369a1]">
<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, .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); });
// Mini Quiz Feedback Handler
function checkMiniQuiz(btn, isCorrect, feedbackId, text) {
const parent = btn.parentElement;
parent.querySelectorAll('button').forEach(b => b.disabled = true);
const fb = document.getElementById(feedbackId);
fb.classList.remove('hidden');
if (isCorrect) {
btn.classList.add('bg-green-600', 'text-white');
fb.className = 'p-3 rounded-xl text-sm font-bold border-l-4 border-green-500 bg-green-100 text-green-800 pop-in block';
fb.innerHTML = `✅ ${text}`;
} else {
btn.classList.add('bg-rose-500', 'text-white');
fb.className = 'p-3 rounded-xl text-sm font-bold border-l-4 border-rose-500 bg-rose-100 text-rose-800 pop-in block';
fb.innerHTML = `❌ ${text}`;
}
}
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Data golongan darah termasuk jenis data...", opts: ["Kualitatif", "Kuantitatif"], ans: 0 },
{ q: "Data tinggi badan siswa termasuk jenis data...", opts: ["Kualitatif", "Kuantitatif"], ans: 1 },
{ q: "Mean dari data: 4, 6, 8 adalah...", opts: ["5", "6", "7"], ans: 1 },
{ q: "Modus dari data: 2, 3, 3, 4, 5 adalah...", opts: ["2", "3", "4"], ans: 1 },
{ q: "Median dari data terurut: 5, 7, 9 adalah...", opts: ["5", "7", "9"], ans: 1 },
{ q: "Jika nilai ulangan 6, 8, 10, jumlah total data adalah...", opts: ["22", "24", "26"], ans: 1 },
{ q: "Data jumlah saudara di rumah termasuk...", opts: ["Kualitatif", "Kuantitatif"], ans: 1 },
{ q: "Modus menunjukkan data yang memiliki...", opts: ["Kemunculan terbanyak", "Nilai tengah", "Jumlah dibagi n"], ans: 0 },
{ q: "Median adalah nilai tengah yang dihitung...", opts: ["Sebelum diurutkan", "Setelah data diurutkan", "Dari nilai terbesar saja"], ans: 1 }
];
function initIFPQuestion(group) {
const fb = document.getElementById(`ifp-feedback-${group}`);
if(fb) fb.classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} berhasil menjawab 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA 1! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('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');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Manakah di bawah ini yang merupakan contoh dari <b>Data Kualitatif</b>?",
options: ["Tinggi badan siswa", "Berat badan balita", "Jenis hobi favorit", "Suhu udara harian"],
a: 2,
exp: "Data kualitatif dinyatakan dalam bentuk kategori kata/sifat (seperti hobi). Pilihan lain berupa data angka (kuantitatif)."
},
{
q: "Diketahui data nilai ulangan matematika: 70, 80, 75, 90, 80, 85, 80. Berapakah nilai <b>Modus</b> data tersebut?",
options: ["75", "80", "85", "90"],
a: 1,
exp: "Angka 80 muncul sebanyak 3 kali (frekuensi tertinggi), sehingga modusnya adalah <b>80</b>."
},
{
q: "Nilai ulangan 5 siswa adalah 70, 80, 90, 60, 80. Berapakah <b>Mean (Rata-rata)</b> nilai mereka?",
options: ["76", "78", "80", "82"],
a: 0,
exp: "Jumlah total = 70+80+90+60+80 = 380. Banyak data = 5. Rata-rata = 380 / 5 = <b>76</b>."
},
{
q: "Jika data berat badan (dalam kg) diurutkan: 40, 42, 45, 48, 50, 55. Berapakah nilai <b>Median</b> data tersebut?",
options: ["45", "46,5", "48", "50"],
a: 1,
exp: "Karena jumlah data genap (n=6), median berada di tengah data ke-3 dan ke-4: (45 + 48) / 2 = 93 / 2 = <b>46,5</b>."
},
{
q: "Manakah di bawah ini yang dikategorikan sebagai <b>Data Kuantitatif</b>?",
options: ["Warna kendaraan bermotor", "Jenis kelamin", "Jumlah saudara kandung di rumah", "Status tempat tinggal"],
a: 2,
exp: "Jumlah saudara kandung dinyatakan dalam angka cacah hasil perhitungan, sehingga merupakan data kuantitatif."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').innerHTML = `
<div class="bg-white p-8 rounded-[2rem] border-4 border-sky-300 shadow-md text-center space-y-4">
<span class="text-6xl">🎉</span>
<h3 class="text-3xl font-black text-sky-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menyelesaikan seluruh 5 soal evaluasi.</p>
<p class="text-slate-500 font-bold">Silakan klik tombol <b>Selanjutnya</b> di bawah untuk melihat refleksi & mengirim nilai akhirmu.</p>
</div>
`;
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-sky-50 hover:border-sky-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>KURANG TEPAT.</b><br>${explanation}`;
}
document.getElementById('final-score-display').innerText = evalSkor;
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 2500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Statistika Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Statistika: " + refleksi,
strategi: "Evaluasi Individu: Statistika Dasar"
}, "*");
} else {
alert("Laporan Misi Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Teorema Pythagoras : Jenis Segitiga & Pythagoras
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Jenis Segitiga & Pythagoras 📐</title>
<!-- 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: #faf5ff;
background-image: radial-gradient(#e9d5ff 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #7c3aed !important; color: white !important; border-bottom-color: #5b21b6 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-purple-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-purple-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="compass" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Matematika Kelas 8 - Jenis Sudut & Segitiga</span>
<span id="progress-text" class="text-xs font-black text-white bg-purple-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-indigo-400 via-purple-500 to-pink-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-purple-100 text-purple-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Menyelidiki <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600">Jenis Segitiga</span> 📐
</h1>
<img src="https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=800&q=80" alt="Geometri" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1596495577886-d920f1fb7238?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-purple-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-purple-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-purple-600">membedakan jenis sudut pada segitiga</span> (lancip, siku-siku, tumpul) menggunakan teorema Pythagoras atau kebalikannya.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menguji jenis segitiga dari panjang sisinya? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi (Diperbaiki Notasi Pangkatnya) -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Sisi & Sudut 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati hubungan kuadrat sisi pada segitiga siku-siku berikut!</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-4">
<div class="bg-purple-50 p-6 rounded-2xl border-2 border-purple-200 space-y-3">
<p class="text-lg font-bold text-slate-700">🔍 <b>Fakta Hubungan Kuadrat Sisi:</b></p>
<ul class="space-y-2 text-slate-600 font-bold list-disc list-inside text-sm">
<li>Jika sisi alas $a = 3$, kuadratnya adalah 3<sup>2</sup> = 9.</li>
<li>Jika sisi tegak $b = 4$, kuadratnya adalah 4<sup>2</sup> = 16.</li>
<li>Jika sisi miring $c = 5$, kuadratnya adalah 5<sup>2</sup> = 25.</li>
</ul>
</div>
<p class="text-xl font-black text-purple-700 text-center">Ternyata: 3<sup>2</sup> + 4<sup>2</sup> = 5<sup>2</sup> (9 + 16 = 25)! Inilah dasar segitiga siku-siku.</p>
</div>
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-lg border-4 border-white" alt="Geometri Visual" onerror="this.src='https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=500&q=80'">
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik (Diperbaiki Notasi Pangkatnya) -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Bagaimana jika sebuah segitiga memiliki sisi 3 cm, 4 cm, dan 6 cm? Apakah 3<sup>2</sup> + 4<sup>2</sup> tetap sama dengan 6<sup>2</sup>? Apa yang terjadi pada bentuk sudutnya?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Mari kita selidiki perbandingan c<sup>2</sup> dengan a<sup>2</sup> + b<sup>2</sup> untuk menjawabnya!</p>
</div>
</div>
<!-- Slide 4: Tinjauan Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pentingnya Menentukan Jenis Sudut Konstruksi di Dunia Nyata</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">⛺</span>
<h4 class="font-black text-xl text-indigo-800">Konstruksi Tenda & Atap</h4>
<p class="text-slate-600 font-bold text-sm">Pembuatan rangka atap rumah atau tenda kemah membutuhkan presisi sudut lancip/tumpul agar struktur kokoh menahan angin.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🌉</span>
<h4 class="font-black text-xl text-indigo-800">Rangka Jembatan Baja</h4>
<p class="text-slate-600 font-bold text-sm">Insinyur sipil menguji segitiga kerangka jembatan agar beban tekanan terdistribusi merata sesuai jenis sudutnya.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🎨</span>
<h4 class="font-black text-xl text-indigo-800">Desain Grafis & Game 3D</h4>
<p class="text-slate-600 font-bold text-sm">Pemrograman objek 3D menggunakan algoritma matematika berbasis jenis segitiga untuk merender bentuk poligon benda.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Aturan Jenis Segitiga -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Materi Inti: Aturan Jenis Segitiga 📐</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Misalkan c adalah sisi terpanjang (panjang sisi terbesar), dan a, b adalah dua sisi lainnya. Uji aturannya sebagai berikut:</p>
<div class="grid md:grid-cols-3 gap-5">
<div class="bg-blue-50 p-5 rounded-2xl border-2 border-blue-200 text-center space-y-2">
<span class="text-3xl">📐</span>
<h4 class="font-black text-blue-900 text-lg">Segitiga Siku-siku</h4>
<p class="math-box text-xl text-blue-700 font-bold">c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup></p>
<p class="text-xs font-bold text-slate-600">Sudut tepat 90° di hadapan sisi c.</p>
</div>
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 text-center space-y-2">
<span class="text-3xl">📉</span>
<h4 class="font-black text-emerald-900 text-lg">Segitiga Lancip</h4>
<p class="math-box text-xl text-emerald-700 font-bold">c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup></p>
<p class="text-xs font-bold text-slate-600">Semua sudut kurang dari 90°.</p>
</div>
<div class="bg-rose-50 p-5 rounded-2xl border-2 border-rose-200 text-center space-y-2">
<span class="text-xl">📈</span>
<h4 class="font-black text-rose-900 text-lg">Segitiga Tumpul</h4>
<p class="math-box text-xl text-rose-700 font-bold">c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup></p>
<p class="text-xs font-bold text-slate-600">Ada satu sudut lebih dari 90°.</p>
</div>
</div>
</div>
</div>
<!-- Slide 6: Auto-Quiz (Latihan Mandiri dengan Pembahasan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-purple-600">Tentukan Jenisnya!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-purple-100 border-2 border-purple-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-purple-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Tentukan jenis segitiga dari ukuran sisi berikut:</p>
<div id="q1-text" class="text-2xl math-box text-purple-900 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 leading-relaxed">?</div>
<div id="q1-options" class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-xl mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-purple-600 text-white rounded-2xl font-black text-xl hover:bg-purple-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN INTERACTIVE FLAT PANEL QUIZ (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 tracking-wide uppercase">⚡ BATTLE PANEL INTERAKTIF (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Tentukan jenis segitiga secara serentak.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KOLOM KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-purple-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-purple-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🏎️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-purple-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-purple-50 p-4 rounded-2xl border-2 border-purple-100 text-center">
<p class="text-xs font-bold text-purple-500 uppercase mb-1">Soal Mandiri K1</p>
<p id="ifp-q-1" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-purple-600 text-white font-black rounded-xl shadow hover:bg-purple-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-blue-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-blue-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚓 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-blue-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-blue-50 p-4 rounded-2xl border-2 border-blue-100 text-center">
<p class="text-xs font-bold text-blue-500 uppercase mb-1">Soal Mandiri K2</p>
<p id="ifp-q-2" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-blue-600 text-white font-black rounded-xl shadow hover:bg-blue-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-pink-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-pink-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-pink-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-pink-50 p-4 rounded-2xl border-2 border-pink-100 text-center">
<p class="text-xs font-bold text-pink-500 uppercase mb-1">Soal Mandiri K3</p>
<p id="ifp-q-3" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-pink-600 text-white font-black rounded-xl shadow hover:bg-pink-700 transition">Soal Berikutnya ➡️</button>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-purple-500 mb-6 drop-shadow-lg">JUARA BATTLE KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#4c1d95] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: 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 jenis sudut pada segitiga hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian mana yang paling membantumu membedakan jenis segitiga?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-purple-50 border-2 border-purple-200 focus:border-purple-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 9: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Jenis Segitiga</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan kehebatanmu dengan 5 soal evaluasi ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-purple-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-purple-700 bg-purple-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- 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-purple-900 mb-2">Misi Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-purple-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-purple-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<!-- 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-purple-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-purple-700 shadow-[0_4px_0px_#581c87]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Auto-Quiz 1: Menentukan Jenis Segitiga
let countQ1 = 0;
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let types = [
{ sides: [6, 8, 10], ans: "Siku-siku", exp: "6<sup>2</sup> + 8<sup>2</sup> = 36 + 64 = 100, dan 10<sup>2</sup> = 100. Karena sama (c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>), maka segitiga ini <b>Siku-siku</b>." },
{ sides: [5, 7, 10], ans: "Tumpul", exp: "5<sup>2</sup> + 7<sup>2</sup> = 25 + 49 = 74, sedangkan 10<sup>2</sup> = 100. Karena c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup> (100 > 74), maka segitiga ini <b>Tumpul</b>." },
{ sides: [6, 7, 8], ans: "Lancip", exp: "6<sup>2</sup> + 7<sup>2</sup> = 36 + 49 = 85, sedangkan 8<sup>2</sup> = 64. Karena c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup> (64 < 85), maka segitiga ini <b>Lancip</b>." }
];
let selected = types[Math.floor(Math.random() * types.length)];
let correctAns = selected.ans;
let options = ["Siku-siku", "Lancip", "Tumpul"];
let explanation = selected.exp;
currentQ1Data = { correctAns, explanation };
document.getElementById('q1-text').innerHTML = `Panjang sisi: <b>${selected.sides[0]} cm, ${selected.sides[1]} cm, ${selected.sides[2]} cm</b>. Termasuk jenis segitiga apakah ini?`;
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt}' === '${correctAns}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition text-center">${opt}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.explanation}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes(currentQ1Data.correctAns)) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.explanation}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// IFP Split-Screen Game
let ifpScores = { 1: 0, 2: 0, 3: 0 };
const IFP_WIN_SCORE = 5;
const ifpBank = [
{ q: "Sisi 6, 8, 10 jenis segitiganya adalah...", opts: ["Siku-siku", "Lancip", "Tumpul"], ans: 0 },
{ q: "Sisi 5, 7, 10 jenis segitiganya adalah...", opts: ["Siku-siku", "Lancip", "Tumpul"], ans: 2 },
{ q: "Sisi 6, 7, 8 jenis segitiganya adalah...", opts: ["Siku-siku", "Lancip", "Tumpul"], ans: 1 },
{ q: "Jika c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup>, maka segitiga bernilai...", opts: ["Lancip", "Siku-siku", "Tumpul"], ans: 0 },
{ q: "Jika c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup>, maka segitiga bernilai...", opts: ["Tumpul", "Siku-siku", "Lancip"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
document.getElementById(`ifp-next-btn-${group}`).classList.add('hidden');
let randQ = ifpBank[Math.floor(Math.random() * ifpBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! +1 Poin";
ifpScores[group]++;
document.getElementById(`ifp-score-${group}`).innerText = `Skor: ${ifpScores[group]}`;
if(ifpScores[group] >= IFP_WIN_SCORE) {
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 400);
} else {
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
} else {
btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat!";
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
}
function resetIFPGame() {
ifpScores = { 1: 0, 2: 0, 3: 0 };
for(let i=1; i<=3; i++) {
document.getElementById(`ifp-score-${i}`).innerText = `Skor: 0`;
initIFPQuestion(i);
}
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Akhir Jenis Segitiga
const evaluasiBank = [
{
q: "Suatu segitiga memiliki panjang sisi 7 cm, 24 cm, dan 25 cm. Jenis segitiga tersebut adalah...",
options: ["Lancip", "Siku-siku", "Tumpul", "Sembarang"],
a: 1,
exp: "7<sup>2</sup> + 24<sup>2</sup> = 49 + 576 = 625, dan 25<sup>2</sup> = 625. Karena c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>, maka segitiga ini <b>Siku-siku</b>."
},
{
q: "Diketahui segitiga dengan panjang sisi 8 cm, 10 cm, dan 13 cm. Jenis segitiga tersebut adalah...",
options: ["Siku-siku", "Lancip", "Tumpul", "Sama kaki"],
a: 2,
exp: "8<sup>2</sup> + 10<sup>2</sup> = 64 + 100 = 164, sedangkan 13<sup>2</sup> = 169. Karena c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup> (169 > 164), maka segitiga ini <b>Tumpul</b>."
},
{
q: "Jika sisi-sisi segitiga adalah 5 cm, 7 cm, dan 9 cm, maka segitiga tersebut merupakan...",
options: ["Segitiga Siku-siku", "Segitiga Tumpul", "Segitiga Lancip", "Segitiga Sembarang"],
a: 2,
exp: "5<sup>2</sup> + 7<sup>2</sup> = 25 + 49 = 74, sedangkan 9<sup>2</sup> = 81. Karena c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup> (81 > 74), maka segitiga ini <b>Tumpul</b>."
},
{
q: "Manakah syarat yang menunjukkan bahwa sebuah segitiga adalah <b>Segitiga Lancip</b> dengan c adalah sisi terpanjang?",
options: ["c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>", "c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup>", "c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup>", "c = a + b"],
a: 2,
exp: "Syarat mutlak segitiga lancip adalah kuadrat sisi terpanjang lebih kecil dari jumlah kuadrat dua sisi lainnya (c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup>)."
},
{
q: "Suatu segitiga memiliki panjang sisi 10 cm, 15 cm, dan 20 cm. Segitiga tersebut adalah...",
options: ["Lancip", "Siku-siku", "Tumpul", "Beraturan"],
a: 2,
exp: "10<sup>2</sup> + 15<sup>2</sup> = 100 + 225 = 325, sedangkan 20<sup>2</sup> = 400. Karena 400 > 325 (c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup>), maka jenisnya <b>Tumpul</b>."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-purple-50 hover:border-purple-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Jenis Segitiga: " + refleksi,
strategi: "Evaluasi: Jenis Sudut pada Segitiga"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Teorema Pythagoras : Misteri Teorema Pythagoras 📐
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Teorema Pythagoras & Tripel Pythagoras 📐</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fef2f2;
background-image: radial-gradient(#fecdd3 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #e11d48 !important; color: white !important; border-bottom-color: #9f1239 !important; pointer-events: none; }
.btn-wrong { background-color: #4f46e5 !important; color: white !important; border-bottom-color: #3730a3 !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-rose-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-rose-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="triangle" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-rose-800 uppercase tracking-widest">Matematika Kelas 8 - Teorema Pythagoras</span>
<span id="progress-text" class="text-xs font-black text-white bg-rose-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-pink-400 via-rose-500 to-red-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-rose-100 text-rose-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Eksplorasi <span class="text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-red-600">Teorema Pythagoras</span> 📐
</h1>
<img src="https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=800&q=80" alt="Geometri" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1596495577886-d920f1fb7238?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-rose-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-rose-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-rose-600">menjelaskan pembuktian teorema Pythagoras</span>.</li>
<li>Peserta didik dapat <span class="text-rose-600">mengidentifikasi tripel Pythagoras</span>.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membongkar rahasia segitiga siku-siku? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-rose-900 bg-rose-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Pola Luas 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati hubungan luas persegi pada sisi-sisi segitiga siku-siku berikut!</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-rose-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-4">
<div class="bg-rose-50 p-6 rounded-2xl border-2 border-rose-200 space-y-3">
<p class="text-lg font-bold text-slate-700">🔍 <b>Fakta Unik yang Diamati:</b></p>
<ul class="space-y-2 text-slate-600 font-bold list-disc list-inside">
<li>Jika sisi alas $a = 3$, luas perseginya $3^2 = 9$.</li>
<li>Jika sisi tegak $b = 4$, luas perseginya $4^2 = 16$.</li>
<li>Jika sisi miring $c = 5$, luas perseginya $5^2 = 25$.</li>
</ul>
</div>
<p class="text-xl font-black text-rose-700 text-center">Ternyata: 9 + 16 = 25 (Luas Persegi a<sup>2</sup> + Luas Persegi b<sup>2</sup> = Luas Persegi c<sup>2</sup>)!</p>
</div>
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-lg border-4 border-white" alt="Geometri Visual" onerror="this.src='https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=500&q=80'">
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Bagaimana cara kita membuktikan secara pasti bahwa hubungan a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> itu benar berlaku untuk SEMUA segitiga siku-siku?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Kita bisa membuktikannya menggunakan puzzle potongan luas daerah (pendekatan geometri luas).</p>
</div>
</div>
<!-- Slide 4: Tinjauan Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Penerapan Pythagoras dan Tripel Pythagoras di Dunia Nyata</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🏗️</span>
<h4 class="font-black text-xl text-indigo-800">Siku-siku Tukang (3:4:5)</h4>
<p class="text-slate-600 font-bold text-sm">Tukang bangunan menggunakan kelipatan angka tripel Pythagoras (3, 4, 5) untuk memastikan sudut dinding rumah benar-benar tegak lurus sempurna.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">✈️</span>
<h4 class="font-black text-xl text-indigo-800">Navigasi Pesawat & Kapal</h4>
<p class="text-slate-600 font-bold text-sm">Pilot dan kapten kapal menggunakan prinsip jarak sisi segitiga siku-siku untuk memperhitungkan jalur terpendek pelayaran.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">📺</span>
<h4 class="font-black text-xl text-indigo-800">Ukuran Layar TV / HP</h4>
<p class="text-slate-600 font-bold text-sm">Perhitungan ukuran diagonal layar gadget menggunakan konsep panjang sisi miring dari dimensi panjang dan lebar layar.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Pembuktian Teorema Pythagoras -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-rose-900 bg-rose-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Pembuktian Pythagoras 🧩</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-rose-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Bagaimana cara matematikawan membuktikan rumus <span class="math-box bg-rose-50 px-2 rounded">a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></span>?</p>
<div class="grid md:grid-cols-2 gap-6 items-center">
<div class="bg-rose-50 p-6 rounded-2xl border-2 border-rose-200 space-y-3">
<h4 class="font-black text-rose-800 text-xl">Metode Luas Puzzle (Bhaskara)</h4>
<ol class="space-y-2 text-slate-700 font-bold list-decimal list-inside text-sm">
<li>Bayangkan sebuah persegi besar dengan sisi (a + b).</li>
<li>Di dalam persegi besar tersebut, disusun 4 buah segitiga siku-siku yang identik (sisi alas a, sisi tegak b, sisi miring c).</li>
<li>Di bagian tengah tersisa ruang kosong berbentuk persegi dengan sisi c.</li>
<li>Luas Persegi Besar = Luas 4 Segitiga + Luas Persegi Kecil di tengah.</li>
<li>(a + b)<sup>2</sup> = 4 × (½ × a × b) + c<sup>2</sup>.</li>
<li>a<sup>2</sup> + 2ab + b<sup>2</sup> = 2ab + c<sup>2</sup> &implies; Coret 2ab, terbuktilah <b class="text-rose-600">a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></b>! 🎉</li>
</ol>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-200 text-center space-y-4">
<span class="text-6xl block">📐</span>
<p class="font-bold text-slate-600">Pembuktian ini menunjukkan bahwa hubungan sisi siku-siku dan sisi miring murni berasal dari kekekalan luas bangun datar!</p>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Mengidentifikasi Tripel Pythagoras -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Tripel Pythagoras 🌟</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-amber-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Apa itu <b>Tripel Pythagoras</b>? Tripel Pythagoras adalah kelompok tiga bilangan bulat positif yang memenuhi kuadrat sisi terpanjang sama dengan jumlah kuadrat dua sisi lainnya (a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>).</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-amber-50 p-6 rounded-2xl border-2 border-amber-200 space-y-3">
<h4 class="font-black text-amber-800 text-xl">Daftar Angka Utama (Sering Keluar):</h4>
<ul class="space-y-2 text-slate-700 font-bold">
<li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">3, 4, 5</span> (Induk utama)</li>
<li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">5, 12, 13</span></li>
<li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">6, 8, 10</span> (Kelipatan 3,4,5)</li>
<li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">7, 24, 25</span></li>
<li>🔹 <span class="math-box bg-white px-2 py-1 rounded shadow-sm">8, 15, 17</span></li>
</ul>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-200 space-y-3">
<h4 class="font-black text-slate-700 text-xl">Tips Cepat Mengidentifikasi:</h4>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Jika ada soal yang menanyakan apakah sekumpulan angka membentuk segitiga siku-siku, ujilah dengan memasukkan angka terbesar ke posisi c (sisi miring) dan dua angka lainnya ke a dan b. Jika hasilnya seimbang (a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>), maka dia adalah <b>Tripel Pythagoras</b>!
</p>
</div>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz (Latihan Mandiri TP 1 & 2 dengan Pembahasan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-rose-600">Bukti & Tripel</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-rose-100 border-2 border-rose-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-rose-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Uji pemahamanmu tentang pembuktian dan tripel Pythagoras:</p>
<div id="q1-text" class="text-2xl math-box text-rose-900 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 leading-relaxed">?</div>
<div id="q1-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-rose-600 text-white rounded-2xl font-black text-xl hover:bg-rose-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: SPLIT-SCREEN INTERACTIVE FLAT PANEL QUIZ (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-amber-600 tracking-wide uppercase">⚡ BATTLE PANEL INTERAKTIF (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Kerjakan soal di kolom masing-masing secara serentak. Siapa cepat & benar, dia menang!</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KOLOM KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-rose-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-rose-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🏎️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-rose-700 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-rose-50 p-4 rounded-2xl border-2 border-rose-100 text-center">
<p class="text-xs font-bold text-rose-500 uppercase mb-1">Soal Mandiri K1</p>
<p id="ifp-q-1" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-rose-600 text-white font-black rounded-xl shadow hover:bg-rose-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-blue-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-blue-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚓 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-blue-700 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-blue-50 p-4 rounded-2xl border-2 border-blue-100 text-center">
<p class="text-xs font-bold text-blue-500 uppercase mb-1">Soal Mandiri K2</p>
<p id="ifp-q-2" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-blue-600 text-white font-black rounded-xl shadow hover:bg-blue-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-amber-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-amber-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-amber-700 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center">
<p class="text-xs font-bold text-amber-500 uppercase mb-1">Soal Mandiri K3</p>
<p id="ifp-q-3" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-amber-600 text-white font-black rounded-xl shadow hover:bg-amber-700 transition">Soal Berikutnya ➡️</button>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-rose-500 mb-6 drop-shadow-lg">JUARA BATTLE KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#4c1d95] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang pembuktian dan tripel Pythagoras hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian mana dari Teorema Pythagoras yang paling membuatmu penasaran?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-rose-50 border-2 border-rose-200 focus:border-rose-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Pythagoras</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan kehebatanmu dengan 5 soal evaluasi ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-rose-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-rose-700 bg-rose-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-rose-900 mb-2">Misi Pythagoras Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-rose-500 to-red-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-rose-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-rose-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-rose-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-rose-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-rose-600 to-red-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-rose-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-rose-700 shadow-[0_4px_0px_#9f1239]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Auto-Quiz 1: Menguji TP Pembuktian & Tripel Pythagoras
let countQ1 = 0;
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let questions = [
{
q: "Manakah di bawah ini kelompok angka yang merupakan <b>Tripel Pythagoras</b>?",
options: ["2, 3, 4", "5, 12, 13", "6, 7, 10", "8, 9, 12"],
ans: "5, 12, 13",
exp: "Uji kuadrat: 5<sup>2</sup> + 12<sup>2</sup> = 25 + 144 = 169 = 13<sup>2</sup>. Maka 5, 12, 13 adalah Tripel Pythagoras."
},
{
q: "Dalam pembuktian teorema Pythagoras menggunakan pendekatan luas persegi puzzle, jika luas 4 segitiga siku-siku dijumlahkan dengan luas persegi kecil di tengahnya, maka hasilnya sama dengan...",
options: ["Luas Persegi Besar (Sisi miring)", "Keliling Segitiga", "Volume Kubus", "Luas Lingkaran"],
ans: "Luas Persegi Besar (Sisi miring)",
exp: "Berdasarkan metode Bhaskara, total luas penyusun dalam persegi besar adalah luas persegi dengan sisi c (sisi miring)."
},
{
q: "Jika sebuah segitiga memiliki sisi 9, 12, dan 15, apakah kelompok ini membentuk Tripel Pythagoras?",
options: ["Ya, karena 9<sup>2</sup> + 12<sup>2</sup> = 15<sup>2</sup>", "Tidak, karena angkanya terlalu besar", "Ya, karena merupakan kelipatan dari 3, 4, 5", "A dan C benar"],
ans: "A dan C benar",
exp: "9, 12, 15 adalah hasil kali 3 dari tripel dasar (3, 4, 5). Kuadratnya juga terbukti seimbang (81 + 144 = 225)."
}
];
let selected = questions[Math.floor(Math.random() * questions.length)];
let correctAns = selected.ans;
let options = shuffle([...selected.options]);
let explanation = selected.exp;
currentQ1Data = { correctAns, explanation };
document.getElementById('q1-text').innerHTML = selected.q;
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt.replace(/'/g, "\\'")}' === '${correctAns.replace(/'/g, "\\'")}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.explanation}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes(currentQ1Data.correctAns.substring(0,5))) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.explanation}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// ==========================================
// INTERACTIVE FLAT PANEL (IFP) SPLIT-SCREEN GAME
// ==========================================
let ifpScores = { 1: 0, 2: 0, 3: 0 };
const IFP_WIN_SCORE = 5;
const ifpBank = [
{ q: "Manakah kelompok angka yang merupakan Tripel Pythagoras?", opts: ["2, 3, 4", "5, 12, 13", "6, 7, 10"], ans: 1 },
{ q: "Apakah 9, 12, 15 membentuk Tripel Pythagoras?", opts: ["Ya", "Tidak", "Belum tentu"], ans: 0 },
{ q: "Kelipatan dari (3, 4, 5) jika dikali 3 adalah...", opts: ["9, 12, 15", "6, 8, 10", "12, 16, 20"], ans: 0 },
{ q: "Dalam rumus a^2 + b^2 = c^2, huruf 'c' melambangkan...", opts: ["Sisi Miring", "Sisi Alas", "Sisi Tegak"], ans: 0 },
{ q: "Apakah 7, 24, 25 adalah Tripel Pythagoras?", opts: ["Ya", "Tidak", "Mungkin"], ans: 0 },
{ q: "Kelipatan dari (5, 12, 13) jika dikali 2 adalah...", opts: ["10, 24, 26", "15, 36, 39", "10, 20, 26"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
document.getElementById(`ifp-next-btn-${group}`).classList.add('hidden');
let randQ = ifpBank[Math.floor(Math.random() * ifpBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! +1 Poin";
ifpScores[group]++;
document.getElementById(`ifp-score-${group}`).innerText = `Skor: ${ifpScores[group]}`;
if(ifpScores[group] >= IFP_WIN_SCORE) {
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 400);
} else {
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
} else {
btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat!";
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
}
function resetIFPGame() {
ifpScores = { 1: 0, 2: 0, 3: 0 };
for(let i=1; i<=3; i++) {
document.getElementById(`ifp-score-${i}`).innerText = `Skor: 0`;
initIFPQuestion(i);
}
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Akhir Pythagoras
const evaluasiBank = [
{
q: "Manakah kelompok angka di bawah ini yang merupakan <b>Tripel Pythagoras</b>?",
options: ["10, 24, 26", "4, 5, 6", "8, 10, 14", "1, 2, 3"],
a: 0,
exp: "10<sup>2</sup> + 24<sup>2</sup> = 100 + 576 = 676 = 26<sup>2</sup>. Jadi 10, 24, 26 adalah Tripel Pythagoras."
},
{
q: "Dalam pembuktian teorema Pythagoras dengan luas daerah, jika panjang sisi siku-siku adalah a dan b, serta sisi miring adalah c, rumus luas persegi besar luar adalah...",
options: ["(a + b)<sup>2</sup>", "a<sup>2</sup> + b<sup>2</sup>", "4 × (ab)", "c<sup>2</sup>"],
a: 0,
exp: "Persegi besar luar dibentuk oleh sisi yang panjangnya merupakan gabungan sisi a dan b, yaitu (a + b)."
},
{
q: "Jika angka 8 dan 15 adalah sisi siku-siku suatu segitiga, berapakah panjang sisi miring agar membentuk Tripel Pythagoras?",
options: ["16", "17", "23", "25"],
a: 1,
exp: "√(8<sup>2</sup> + 15<sup>2</sup>) = √(64 + 225) = √289 = <b>17</b>."
},
{
q: "Pernyataan manakah yang paling tepat untuk menjelaskan konsep dasar Teorema Pythagoras?",
options: ["Luas persegi pada sisi miring sama dengan selisih luas persegi sisi lainnya", "Jumlah kuadrat sisi siku-siku sama dengan kuadrat sisi miring", "Keliling segitiga siku-siku selalu sama dengan 12", "Sisi miring adalah sisi yang paling pendek"],
a: 1,
exp: "Definisi baku Teorema Pythagoras menyatakan bahwa a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>."
},
{
q: "Kelipatan dari Tripel Pythagoras dasar (3, 4, 5) dapat diperoleh dengan cara...",
options: ["Menambahkan angka 2 ke setiap sisi", "Mengalikan setiap sisi dengan bilangan bulat positif yang sama", "Membagi setiap sisi dengan 2", "Mengurangi setiap sisi dengan 1"],
a: 1,
exp: "Tripel Pythagoras berlaku multiplikatif. Contoh (3,4,5) dikali 2 menjadi (6,8,10) yang juga Tripel Pythagoras."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-rose-50 hover:border-rose-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Pythagoras Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Pythagoras: " + refleksi,
strategi: "Evaluasi: Pembuktian & Tripel Pythagoras"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Misi Puncak Bentuk Akar & Kontekstual ⛰️</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fff7ed;
background-image: radial-gradient(#fed7aa 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #f59e0b !important; color: white !important; border-bottom-color: #b45309 !important; pointer-events: none; }
.btn-wrong { background-color: #8b5cf6 !important; color: white !important; border-bottom-color: #5b21b6 !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-orange-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-orange-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="mountain-snow" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-orange-800 uppercase tracking-widest">Matematika Kelas 8 - Misi Puncak (Part 3)</span>
<span id="progress-text" class="text-xs font-black text-white bg-orange-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-orange-100 text-orange-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi Puncak: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-purple-600">Operasi & Dunia Nyata</span> 🗺️
</h1>
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=800&q=80" alt="Petualangan" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-orange-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-purple-500"></i> Tujuan Misi Kita:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Menggunakan <span class="text-orange-600">operasi bilangan bentuk akar</span> lewat perhitungan sistematis.</li>
<li>Menentukan <span class="text-orange-600">penyebut bentuk akar</span> melalui metode merasionalkan.</li>
<li>Memecahkan <span class="text-orange-600">masalah kontekstual</span> terkait eksponen dan bentuk akar dalam kehidupan sehari-hari.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap selesaikan misi terakhir? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Operasi Bentuk Akar -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Operasi Bentuk Akar 🧩</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Akar itu ibarat barang. Kita cuma bisa menjumlahkan barang yang SEJENIS!</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Tambah/Kurang -->
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md">
<img src="https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Puzzle" onerror="this.src='https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=600&q=80'">
<div class="bg-purple-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Penjumlahan & Pengurangan</div>
<p class="text-slate-700 font-bold mb-3">Syarat: Angka di dalam akar <span class="text-purple-600 font-black">HARUS SAMA</span>.</p>
<div class="bg-purple-50 p-4 rounded-xl mb-4 text-center">
<p class="text-xl math-box text-purple-900">a√<span class="border-t-2 border-purple-900 pt-1">c</span> + b√<span class="border-t-2 border-purple-900 pt-1">c</span> = (a+b)√<span class="border-t-2 border-purple-900 pt-1">c</span></p>
</div>
<p class="text-slate-500 font-bold text-sm">Contoh Benar ✅:</p>
<p class="text-lg math-box text-slate-800">3√2 + 5√2 = 8√2</p>
</div>
<!-- Kali/Bagi -->
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md">
<img src="https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Alat Hitung" onerror="this.src='https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=600&q=80'">
<div class="bg-orange-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Perkalian & Pembagian</div>
<p class="text-slate-700 font-bold mb-3">Bebas! Luar dikali luar, dalam dikali dalam.</p>
<div class="bg-orange-50 p-4 rounded-xl mb-4 text-center">
<p class="text-xl math-box text-orange-900">√<span class="border-t-2 border-orange-900 pt-1">a</span> × √<span class="border-t-2 border-orange-900 pt-1">b</span> = √<span class="border-t-2 border-orange-900 pt-1">a × b</span></p>
</div>
<p class="text-slate-500 font-bold text-sm">Contoh Perkalian:</p>
<p class="text-lg math-box text-slate-800">2√3 × 4√5 = (2×4)√(3×5) = 8√15</p>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Operasi Akar dengan Pembahasan Lengkap) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-purple-600">Hitung Akarnya!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-purple-100 border-2 border-purple-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-purple-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Hitunglah hasil dari operasi akar berikut:</p>
<div id="q1-text" class="text-4xl math-box text-purple-700 mb-8 bg-slate-50 py-4 rounded-2xl border border-slate-100">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-purple-600 text-white rounded-2xl font-black text-xl hover:bg-purple-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Merasionalkan Penyebut -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Merasionalkan Penyebut ⚖️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Dalam matematika, "Akar" tidak sopan kalau ditaruh di bawah (sebagai penyebut pecahan).</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Cara mengusirnya? Kalikan atas dan bawah dengan akar yang sama!</p>
<div class="bg-orange-50 p-6 rounded-2xl border-2 border-orange-200 text-center flex flex-col items-center">
<div class="flex items-center gap-4 text-2xl math-box text-orange-900 font-black">
<div class="flex flex-col items-center">
<span>a</span>
<div class="w-full h-0.5 bg-orange-900 my-1"></div>
<span>√b</span>
</div>
<span>=</span>
<div class="flex flex-col items-center">
<span>a</span>
<div class="w-full h-0.5 bg-orange-900 my-1"></div>
<span>√b</span>
</div>
<span>×</span>
<div class="flex flex-col items-center text-rose-600">
<span>√b</span>
<div class="w-full h-0.5 bg-rose-600 my-1"></div>
<span>√b</span>
</div>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Balancing" onerror="this.src='https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=400&q=80'">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Rasionalisasi dengan Pembahasan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-orange-600">Rasionalkan!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-orange-100 border-2 border-orange-400 px-6 py-2 rounded-full">
<span class="font-black text-orange-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center flex flex-col items-center">
<p class="text-lg font-bold text-slate-500 mb-4">Bentuk rasional dari pecahan di bawah ini adalah:</p>
<div id="q2-text" class="text-5xl math-box text-orange-700 mb-8 bg-slate-50 px-10 py-6 rounded-2xl border border-slate-100 flex flex-col items-center">?</div>
<div id="q2-options" class="grid grid-cols-2 gap-4 w-full max-w-lg mx-auto"></div>
<div id="q2-feedback" class="hidden w-full max-w-lg mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-orange-600 text-white rounded-2xl font-black text-xl hover:bg-orange-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: Masalah Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Penerapan Dunia Nyata 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Buat apa belajar ini? Coba lihat masalah arsitek & ilmuwan ini!</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Kasus 1 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Bangunan" onerror="this.src='https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=600&q=80'">
<h4 class="font-black text-blue-800 text-xl mb-2">Kasus 1: Luas Lahan</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Seorang arsitek mendesain taman persegi dengan panjang sisi <span class="bg-blue-100 px-2 rounded math-box">3√5</span> meter. Berapakah luas taman itu?
</p>
<div class="bg-blue-50 p-4 rounded-xl font-bold text-slate-700">
<p class="math-box text-lg">Luas = (3√5) × (3√5) = <span class="text-blue-700 text-xl">45 m<sup>2</sup></span></p>
</div>
</div>
<!-- Kasus 2 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1584036561566-baf8f5f1b144?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Bakteri Mikroskop" onerror="this.src='https://images.unsplash.com/photo-1530497610245-94d3c16cda28?auto=format&fit=crop&w=600&q=80'">
<h4 class="font-black text-rose-800 text-xl mb-2">Kasus 2: Virus/Bakteri</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Awalnya ada 2 bakteri. Setiap jam jumlahnya berkembang menjadi <span class="bg-rose-100 px-2 rounded font-black">2 kali lipat</span>. Berapa banyak bakteri setelah 5 jam?
</p>
<div class="bg-rose-50 p-4 rounded-xl font-bold text-slate-700">
<p class="math-box text-lg">Jumlah = 2 × 2<sup>5</sup> = <span class="text-rose-700 text-xl">64 bakteri</span></p>
</div>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Soal Cerita dengan Pembahasan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-blue-600">Soal Cerita</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl">
<p class="text-lg font-bold text-slate-500 mb-4 text-center border-b-2 border-dashed pb-4">Baca baik-baik dan temukan jawabannya:</p>
<p id="q3-text" class="text-xl font-bold text-slate-800 mb-8 leading-relaxed text-center"></p>
<div id="q3-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition block">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: RACING GAME KELOMPOK (Mobil) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-500 tracking-wide uppercase">🏁 Balap Mobil Cerdas 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Hitung cepat, angkat tangan, dan kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-amber-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Soal Rebutan Saat Ini ⛽</p>
<div id="race-q-text" class="text-4xl md:text-5xl font-black math-box text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-orange-500 hover:bg-orange-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#9a3412] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-4xl font-black math-box text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Siapa yang menjawab benar paling cepat?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-orange-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#4c1d95] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana petualangan Misi Puncak hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Materi mana yang mau diulang lagi minggu depan?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-orange-50 border-2 border-orange-200 focus:border-orange-500 outline-none font-medium" rows="3" placeholder="Misalnya: Merasionalkan akar..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan kehebatanmu dengan 5 soal evaluasi ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-orange-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-orange-700 bg-orange-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-orange-900 mb-2">Misi Puncak Berhasil!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir Misi: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-orange-500 to-red-500 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-orange-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-orange-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke markas (Sistem Guru).</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Petualang</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-orange-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Energi Tersisa (Pemahaman)</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-orange-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Kehabisan Energi (Bingung)</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-orange-500 to-rose-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan Misi 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-orange-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-orange-600 shadow-[0_4px_0px_#c2410c]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Auto-Quiz 1 (Operasi Akar dengan Pembahasan)
let countQ1 = 0;
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let type = Math.floor(Math.random() * 3);
let qText, correctAns, explanation;
let options = [];
if(type === 0 || type === 1) {
let inner = [2, 3, 5, 7][Math.floor(Math.random() * 4)];
let a = Math.floor(Math.random() * 5) + 2;
let b = Math.floor(Math.random() * 3) + 1;
if (type === 1 && a < b) { let t = a; a = b; b = t; }
let sign = type === 0 ? '+' : '-';
qText = `${a}√<span class="border-t-2 border-purple-700 pt-1">${inner}</span> ${sign} ${b}√<span class="border-t-2 border-purple-700 pt-1">${inner}</span>`;
let res = type === 0 ? a + b : a - b;
correctAns = res === 1 ? `√${inner}` : `${res}√${inner}`;
options.push(correctAns);
options.push(`${res}√${inner*2}`);
options.push(`${a*b}√${inner}`);
options.push(`${res+2}√${inner}`);
explanation = `<b>Penyelesaian:</b> Karena angka di dalam akar sudah sama (yaitu <b>${inner}</b>), kita cukup menjumlahkan/mengurangkan angka di luar akar:<br>(${a} ${sign} ${b})√${inner} = <b>${res}√${inner}</b>.`;
} else {
let a = Math.floor(Math.random() * 3) + 2;
let b = Math.floor(Math.random() * 3) + 2;
qText = `√<span class="border-t-2 border-purple-700 pt-1">${a}</span> × √<span class="border-t-2 border-purple-700 pt-1">${b}</span>`;
correctAns = `√${a*b}`;
options.push(correctAns);
options.push(`${a}√${b}`);
options.push(`√${a+b}`);
options.push(`${a*b}`);
explanation = `<b>Penyelesaian:</b> Sifat perkalian akar adalah mengalikan angka di dalam akar: √${a} × √${b} = √(${a} × ${b}) = <b>√${a*b}</b>.`;
}
currentQ1Data = { correctAns, explanation };
document.getElementById('q1-text').innerHTML = `${qText}`;
options = shuffle([...new Set(options)]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt}' === '${correctAns}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt.replace('√', '√<span class="border-t-2 border-slate-700 pt-1">') + (opt.includes('√') ? '</span>' : '')}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.explanation}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.explanation}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Rasionalisasi dengan Pembahasan)
let countQ2 = 0;
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
let roots = [2, 3, 5];
let d = roots[Math.floor(Math.random() * roots.length)];
let k = Math.floor(Math.random() * 4) + 2;
let c = k * d;
let qTextHtml = `
<div class="flex flex-col items-center w-fit mx-auto">
<span>${c}</span>
<div class="w-8 h-1 bg-orange-700 my-1"></div>
<span>√<span class="border-t-2 border-orange-700 pt-1">${d}</span></span>
</div>
`;
document.getElementById('q2-text').innerHTML = qTextHtml;
let correctAns = k === 1 ? `√${d}` : `${k}√${d}`;
let options = [correctAns, `${c}√${d}`, `${k}`, `${k}√${d+1}`];
options = shuffle([...new Set(options)]);
let explanation = `<b>Penyelesaian:</b> Kalikan pembilang dan penyebut dengan √${d}:<br>(${c} / √${d}) × (√${d} / √${d}) = (${c}√${d} / ${d}) = <b>${correctAns}</b>.`;
currentQ2Data = { correctAns, explanation };
let optHtml = "";
options.forEach(opt => {
let disp = opt.replace('√', '√<span class="border-t-2 border-slate-700 pt-1">') + (opt.includes('√') ? '</span>' : '');
optHtml += `<button onclick="checkQ2(this, '${opt}' === '${correctAns}')" class="guess-btn w-full p-6 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-3xl border-b-4 border-slate-300 math-box transition">${disp}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.explanation}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.explanation}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Auto-Quiz 3 (Soal Cerita dengan Pembahasan)
let countQ3 = 0;
let currentQ3Data = null;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
let type = Math.floor(Math.random() * 2);
let qText, correctAns, explanation;
let options = [];
if(type === 0) {
let a = Math.floor(Math.random() * 3) + 2;
let b = [2, 3, 5][Math.floor(Math.random() * 3)];
qText = `Sebuah kebun persegi memiliki panjang sisi <span class="math-box bg-blue-100 px-2 rounded">${a}√${b}</span> meter. Berapakah luas kebun tersebut?`;
let area = (a*a) * b;
correctAns = `${area} m<sup>2</sup>`;
options.push(correctAns);
options.push(`${a*2 * b} m<sup>2</sup>`);
options.push(`${a*a + b} m<sup>2</sup>`);
options.push(`${area * 2} m<sup>2</sup>`);
explanation = `<b>Penyelesaian:</b> Luas persegi = sisi × sisi = (${a}√${b}) × (${a}√${b}) = (${a}×${a}) × (√${b}×√${b}) = ${a*a} × ${b} = <b>${area} m<sup>2</sup></b>.`;
} else {
let awal = Math.floor(Math.random() * 2) + 2;
let jam = Math.floor(Math.random() * 2) + 3;
qText = `Ada ${awal} sel bakteri. Setiap jam membelah jadi 2. Berapa sel setelah ${jam} jam?`;
let total = awal * Math.pow(2, jam);
correctAns = `${total} sel`;
options.push(correctAns);
options.push(`${awal * jam * 2} sel`);
options.push(`${Math.pow(awal, jam)} sel`);
options.push(`${total + awal} sel`);
explanation = `<b>Penyelesaian:</b> Jumlah = Awal × 2<sup>waktu</sup> = ${awal} × 2<sup>${jam}</sup> = ${awal} × ${Math.pow(2, jam)} = <b>${total} sel</b>.`;
}
currentQ3Data = { correctAns, explanation };
document.getElementById('q3-text').innerHTML = qText;
options = shuffle([...new Set(options)]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ3(this, '${opt}' === '${correctAns}')" class="guess-btn w-full py-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition">${opt}</button>`;
});
document.getElementById('q3-options').innerHTML = optHtml;
}
function checkQ3(btn, isCorrect) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ3Data.explanation}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ3Data.explanation}`;
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3();
// Racing Game
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let type = Math.floor(Math.random() * 3);
let qTextHtml = "", ansTextHtml = "";
if (type === 0) {
let c = [2,3,5][Math.floor(Math.random()*3)];
let a = Math.floor(Math.random()*5)+2;
let b = Math.floor(Math.random()*4)+1;
qTextHtml = `<span>${a}√<span class="border-t-2 border-white pt-1">${c}</span> + ${b}√<span class="border-t-2 border-white pt-1">${c}</span></span>`;
ansTextHtml = `<span>${a+b}√<span class="border-t-2 border-green-400 pt-1">${c}</span></span>`;
} else if (type === 1) {
let d = [2, 3, 5][Math.floor(Math.random()*3)];
let k = Math.floor(Math.random()*4)+2;
let c = k * d;
qTextHtml = `
<div class="flex flex-col items-center">
<span>${c}</span>
<div class="w-12 h-1 bg-yellow-300 my-1"></div>
<span>√<span class="border-t-2 border-white pt-1">${d}</span></span>
</div>
`;
ansTextHtml = `<span>${k}√<span class="border-t-2 border-green-400 pt-1">${d}</span></span>`;
} else {
let a = Math.floor(Math.random() * 3) + 2;
let b = Math.floor(Math.random() * 3) + 2;
qTextHtml = `<span>√<span class="border-t-2 border-white pt-1">${a}</span> × √<span class="border-t-2 border-white pt-1">${b}</span></span>`;
ansTextHtml = `<span>√<span class="border-t-2 border-green-400 pt-1">${a*b}</span></span>`;
}
document.getElementById('race-q-text').innerHTML = qTextHtml;
document.getElementById('race-ans-text').innerHTML = ansTextHtml;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi
const evaluasiBank = [
{
q: `<span>Hasil dari 4√<span class="border-t-2 border-slate-800 pt-1">3</span> + 2√<span class="border-t-2 border-slate-800 pt-1">3</span> adalah...</span>`,
options: [`<span>6√<span class="border-t-2 border-slate-700 pt-1">6</span></span>`, `<span>8√<span class="border-t-2 border-slate-700 pt-1">3</span></span>`, `<span>6√<span class="border-t-2 border-slate-700 pt-1">3</span></span>`, `<span>8√<span class="border-t-2 border-slate-700 pt-1">9</span></span>`],
a: 2,
exp: "Penjumlahan suku sejenis: (4 + 2)√3 = <b>6√3</b>."
},
{
q: `<span>Hasil dari √<span class="border-t-2 border-slate-800 pt-1">5</span> × √<span class="border-t-2 border-slate-800 pt-1">4</span> adalah...</span>`,
options: [`<span>√<span class="border-t-2 border-slate-700 pt-1">9</span></span>`, `<span>√<span class="border-t-2 border-slate-700 pt-1">20</span></span>`, `<span>2√<span class="border-t-2 border-slate-700 pt-1">5</span></span>`, `<span>B dan C benar</span>`],
a: 3,
exp: "√5 × √4 = √20. Bentuk sederhana dari √20 adalah √(4 × 5) = <b>2√5</b>. Maka pilihan B & C benar."
},
{
q: `<div class="flex flex-col items-center"><span class="mb-2">Bentuk rasional dari</span><div class="flex flex-col items-center bg-slate-100 px-4 py-2 rounded-xl"><span>15</span><div class="w-8 h-0.5 bg-slate-800 my-1"></div><span>√<span class="border-t-2 border-slate-800 pt-1">3</span></span></div><span class="mt-2">adalah...</span></div>`,
options: [`<span>3√<span class="border-t-2 border-slate-700 pt-1">15</span></span>`, `<span>15√<span class="border-t-2 border-slate-700 pt-1">3</span></span>`, `<span>5</span>`, `<span>5√<span class="border-t-2 border-slate-700 pt-1">3</span></span>`],
a: 3,
exp: "(15 / √3) × (√3 / √3) = 15√3 / 3 = <b>5√3</b>."
},
{
q: `<span>Sebuah kebun persegi punya sisi panjangnya 5√<span class="border-t-2 border-slate-800 pt-1">2</span> m. Luasnya?</span>`,
options: [`<span>10 m<sup>2</sup></span>`, `<span>50 m<sup>2</sup></span>`, `<span>25√<span class="border-t-2 border-slate-700 pt-1">4</span> m<sup>2</sup></span>`, `<span>B dan C benar</span>`],
a: 3,
exp: "Luas = sisi × sisi = (5√2) × (5√2) = (5 × 5) × (√2 × √2) = 25 × 2 = 50 m<sup>2</sup>."
},
{
q: `<span>Diketahui virus berkembang biak jadi 2x lipat tiap jam. Awalnya ada 5 virus. Berapa virus setelah 4 jam?</span>`,
options: [`<span>40 virus</span>`, `<span>80 virus</span>`, `<span>20 virus</span>`, `<span>100 virus</span>`],
a: 1,
exp: "Jumlah = 5 × 2<sup>4</sup> = 5 × 16 = <b>80 virus</b>."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-xl math-box hover:bg-orange-50 hover:border-orange-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000); // Jeda 4 detik agar cukup membaca pembahasan
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Puncak Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Misi Puncak: " + refleksi,
strategi: "Evaluasi Part 3: Operasi Akar & Masalah Kontekstual"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Bilangan Berpangkat 2 : Bentuk Baku dan Akar
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Operasi, Bentuk Baku & Akar 🚀</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
/* Nav Buttons */
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="sigma" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Eksplorasi Lanjutan (Part 2)</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-3xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kelas 8 SMP
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Operasi, Bentuk Baku & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Bentuk Akar</span> 🌳
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-pink-500"></i> Tujuan Pembelajaran Kita:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Dapat <span class="text-emerald-600">menerapkan operasi</span> penjumlahan, pengurangan, perkalian & pembagian pangkat.</li>
<li>Dapat <span class="text-emerald-600">menentukan bentuk baku</span> (notasi ilmiah) dari suatu bilangan.</li>
<li>Dapat <span class="text-emerald-600">mengevaluasi konsep bilangan bentuk akar</span> beserta contohnya.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Lanjutkan petualangan matematikamu! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Operasi Bilangan Berpangkat -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Operasi Pangkat: Hati-Hati! ⚠️</h2>
</div>
<div class="bg-white p-8 rounded-[2rem] shadow-sm border-2 border-slate-200 mt-4 space-y-6">
<p class="text-xl font-bold text-slate-700">Untuk <b>Penjumlahan</b> dan <b>Pengurangan</b>, kita <span class="bg-rose-200 px-2 rounded text-rose-900">TIDAK BISA</span> langsung menjumlahkan pangkatnya!</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-rose-50 p-5 rounded-2xl border-2 border-rose-200 relative overflow-hidden">
<div class="absolute top-0 right-0 bg-rose-500 text-white px-3 py-1 font-black rounded-bl-xl">SALAH ❌</div>
<h4 class="font-black text-rose-800 mb-2 mt-4">Jangan Lakukan Ini:</h4>
<p class="text-xl math-box text-slate-500 line-through">2<sup>3</sup> + 2<sup>2</sup> = 2<sup>5</sup></p>
<p class="text-sm font-bold text-rose-600 mt-2">Pangkat hanya ditambah jika dikali (×), bukan ditambah (+).</p>
</div>
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 relative overflow-hidden">
<div class="absolute top-0 right-0 bg-emerald-500 text-white px-3 py-1 font-black rounded-bl-xl">BENAR ✅</div>
<h4 class="font-black text-emerald-800 mb-2 mt-4">Hitung Dulu Nilainya:</h4>
<p class="text-xl math-box text-slate-800">2<sup>3</sup> + 2<sup>2</sup> = 8 + 4 = <span class="text-emerald-700 text-3xl">12</span></p>
<p class="text-sm font-bold text-emerald-700 mt-2">Hitung hasil masing-masing, baru dijumlahkan/dikurangkan.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Operasi) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-emerald-600">Operasi Hitung</span> 🎮</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Hitung nilainya dulu, jangan sampai terjebak!</p>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Berapakah hasil akhir dari:</p>
<div id="q1-text" class="text-5xl math-box text-emerald-700 mb-8">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Materi Notasi Ilmiah -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Bentuk Baku (Notasi Ilmiah) 🔬</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Cara singkat menulis angka yang super besar atau super kecil!</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm mt-4">
<div class="bg-blue-50 p-6 rounded-xl text-center mb-6">
<p class="text-3xl math-box text-blue-900 mb-2">a × 10<sup>n</sup></p>
<p class="font-bold text-slate-600">Syarat Penting: Angka <b>a</b> harus mulai dari 1 dan kurang dari 10 <br><span class="text-blue-600">(1 ≤ a < 10)</span></p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="p-4 border-2 border-slate-100 rounded-2xl">
<h4 class="font-black text-slate-700 mb-2">Angka Sangat Besar (Pangkat Positif)</h4>
<p class="text-lg text-slate-600">Jarak bumi ke matahari: 150.000.000 km</p>
<div class="flex items-center gap-3 mt-2">
<span class="text-2xl">➡️</span>
<p class="text-2xl math-box text-blue-700 bg-blue-50 px-3 py-1 rounded-lg">1,5 × 10<sup>8</sup></p>
</div>
</div>
<div class="p-4 border-2 border-slate-100 rounded-2xl">
<h4 class="font-black text-slate-700 mb-2">Angka Sangat Kecil (Pangkat Negatif)</h4>
<p class="text-lg text-slate-600">Ukuran bakteri: 0,0000032 meter</p>
<div class="flex items-center gap-3 mt-2">
<span class="text-2xl">➡️</span>
<p class="text-2xl math-box text-pink-700 bg-pink-50 px-3 py-1 rounded-lg">3,2 × 10<sup>-6</sup></p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Notasi Ilmiah) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-blue-600">Notasi Ilmiah</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Ubah ke Bentuk Baku (Notasi Ilmiah):</p>
<div id="q2-text" class="text-5xl math-box text-blue-700 mb-8 font-black tracking-wider">?</div>
<div id="q2-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q2-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: Materi Bentuk Akar -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Mengenal Bentuk Akar 🌳</h2>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm">
<h4 class="font-black text-teal-800 text-2xl mb-4">Apa itu Akar?</h4>
<p class="text-lg font-bold text-slate-700 mb-4">Akar adalah <span class="bg-teal-100 px-2 rounded">kebalikan dari pangkat</span>.</p>
<div class="bg-teal-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-teal-900">√<span class="border-t-2 border-teal-900 pt-1">25</span> = 5</p>
<p class="text-sm font-bold text-slate-500 mt-1">karena 5<sup>2</sup> = 25</p>
</div>
<p class="text-slate-600 font-bold">Contoh lain: √81 = 9, √100 = 10.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm relative">
<h4 class="font-black text-amber-800 text-2xl mb-4">Hati-Hati! 🕵️♂️</h4>
<p class="text-lg font-bold text-slate-700 mb-4">Tidak semua yang ada tanda akarnya disebut "Bilangan Bentuk Akar".</p>
<ul class="space-y-4 font-bold">
<li class="flex gap-3">
<span class="text-xl">✅</span>
<div><span class="math-box bg-slate-100 px-1">√3</span> atau <span class="math-box bg-slate-100 px-1">√7</span> adalah <b>Bentuk Akar</b> (karena hasilnya desimal tak berujung).</div>
</li>
<li class="flex gap-3">
<span class="text-xl">❌</span>
<div><span class="math-box bg-slate-100 px-1">√4</span> atau <span class="math-box bg-slate-100 px-1">√9</span> <b>BUKAN</b> Bentuk Akar (karena hasilnya bilangan bulat 2 dan 3).</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Akar) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-teal-600">Evaluasi Akar</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-teal-100 border-2 border-teal-400 px-6 py-2 rounded-full">
<span class="font-black text-teal-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Hitunglah nilai dari ekspresi berikut:</p>
<div id="q3-text" class="text-5xl math-box text-teal-700 mb-8">?</div>
<div id="q3-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-teal-600 text-white rounded-2xl font-black text-xl hover:bg-teal-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: Kuis Kelompok (Battle 3 Siswa) -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">⚔️ BATTLE KUIS KELOMPOK ⚔️</h2>
<p class="text-xl font-bold text-slate-600 mt-2">Ayo, 3 siswa perwakilan maju! Siapa yang paling cepat & tepat?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<!-- P1: Operasi -->
<div class="bg-white p-6 rounded-3xl border-4 border-rose-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-rose-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 1 (Operasi)</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q1" class="text-4xl math-box text-rose-800 mb-6 font-bold leading-relaxed"></p>
<div id="battle-ans1" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(1)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
<!-- P2: Baku -->
<div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-blue-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 2 (Notasi)</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q2" class="text-3xl math-box text-blue-800 mb-6 font-bold leading-relaxed tracking-wider"></p>
<div id="battle-ans2" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(2)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
<!-- P3: Akar -->
<div class="bg-white p-6 rounded-3xl border-4 border-amber-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-amber-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 3 (Akar)</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q3" class="text-4xl math-box text-amber-800 mb-6 font-bold leading-relaxed"></p>
<div id="battle-ans3" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(3)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
</div>
<div class="text-center mt-6">
<button onclick="generateBattle()" class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xl rounded-full shadow-lg transition transform hover:scale-105">🔄 Acak Soal Battle Baru</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang materi Bentuk Baku dan Akar hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">🤩</div>
<h3 class="font-black text-xl text-slate-700">Paham Banget!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan Paham</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">😵💫</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Ceritakan singkat, apa yang membuatmu bingung atau tertarik?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-emerald-400 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Latihan Soal Evaluasi Akhir</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal di bawah ini untuk melihat hasil akhirmu.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-md text-left">
<div class="flex justify-between items-center mb-4">
<span class="font-black text-emerald-700 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 math-box mb-6 leading-relaxed"></p>
<div id="eval-options" class="space-y-3">
<!-- Auto generated -->
</div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Hebat! Evaluasi Selesai.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-green-600 text-5xl bg-green-100 px-4 py-1 rounded-xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left">
<p class="font-bold text-slate-500 text-center mb-4">Silakan isi data untuk direkam ke sistem Bapak/Ibu Guru.</p>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Persentase Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Paham Semua</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Perlu Belajar Lagi</option>
<option value="25">25% - Banyak Bingungnya</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Utils
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// ==========================================
// KUIS AUTO 1: Operasi (Penjumlahan/Pengurangan)
// ==========================================
let countQ1 = 0;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let isPlus = Math.random() > 0.5;
let base = Math.floor(Math.random() * 4) + 2; // 2 to 5
let exp1 = Math.floor(Math.random() * 3) + 1; // 1 to 3
let exp2 = Math.floor(Math.random() * 3) + 1;
// To avoid negative results for simplicity
if (!isPlus && Math.pow(base, exp1) < Math.pow(base, exp2)) {
let temp = exp1; exp1 = exp2; exp2 = temp;
}
let correctAns = isPlus ? Math.pow(base, exp1) + Math.pow(base, exp2) : Math.pow(base, exp1) - Math.pow(base, exp2);
document.getElementById('q1-text').innerHTML = `${base}<sup>${exp1}</sup> ${isPlus ? '+' : '-'} ${base}<sup>${exp2}</sup> = ... ?`;
let options = [correctAns];
while (options.length < 4) {
let wrong;
if(Math.random() > 0.5) {
wrong = Math.pow(base, isPlus ? exp1 + exp2 : Math.max(exp1 - exp2, 0)); // Jebakan sifat kali/bagi
} else {
wrong = correctAns + (Math.floor(Math.random() * 10) + 1) * (Math.random() > 0.5 ? 1 : -1);
}
if (wrong !== correctAns && wrong >= 0 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, ${opt === correctAns})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 transition">${opt}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Benar! Kamu tidak terkecoh.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Ingat, tambah/kurang harus dihitung dulu nilainya.";
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// ==========================================
// KUIS AUTO 2: Notasi Ilmiah
// ==========================================
let countQ2 = 0;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
let isBig = Math.random() > 0.5;
let a = Math.floor(Math.random() * 8) + 2; // 2-9
let b = Math.floor(Math.random() * 9) + 1; // 1-9
let exp = Math.floor(Math.random() * 4) + 4; // 4-7
let qText, correctHtml, options;
if (isBig) {
let zeros = "0".repeat(exp - 1);
qText = `${a}${b}${zeros}`;
// format with dots for readability: e.g. 45000 -> 45.000
qText = Number(qText).toLocaleString('id-ID');
correctHtml = `${a},${b} × 10<sup>${exp}</sup>`;
options = [
{ html: correctHtml, isC: true },
{ html: `${a},${b} × 10<sup>${exp - 1}</sup>`, isC: false },
{ html: `${a}${b} × 10<sup>${exp - 1}</sup>`, isC: false }, // tidak baku (a >= 10)
{ html: `${a},${b} × 10<sup>-${exp}</sup>`, isC: false }
];
} else {
let zeros = "0".repeat(exp - 1);
qText = `0,${zeros}${a}${b}`;
correctHtml = `${a},${b} × 10<sup>-${exp}</sup>`;
options = [
{ html: correctHtml, isC: true },
{ html: `${a},${b} × 10<sup>${exp}</sup>`, isC: false },
{ html: `0,${a}${b} × 10<sup>-${exp - 1}</sup>`, isC: false }, // tidak baku
{ html: `${a},${b} × 10<sup>-${exp - 1}</sup>`, isC: false }
];
}
document.getElementById('q2-text').innerHTML = qText;
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ2(this, ${opt.isC})" class="guess-btn w-full py-5 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt.html}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Cerdas! Notasi ilmiah memang begitu aturannya.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Cek letak koma dan jumlah pangkatnya ya.";
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// ==========================================
// KUIS AUTO 3: Akar
// ==========================================
let countQ3 = 0;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
let perfectSquares = [4, 9, 16, 25, 36, 49, 64, 81, 100];
let n1 = perfectSquares[Math.floor(Math.random() * perfectSquares.length)];
let n2 = perfectSquares[Math.floor(Math.random() * perfectSquares.length)];
let isPlus = Math.random() > 0.5;
// Avoid negative result
if(!isPlus && n1 < n2) { let temp = n1; n1 = n2; n2 = temp; }
let correctAns = isPlus ? Math.sqrt(n1) + Math.sqrt(n2) : Math.sqrt(n1) - Math.sqrt(n2);
document.getElementById('q3-text').innerHTML = `√<span class="border-t-2 border-teal-700 pt-1">${n1}</span> ${isPlus?'+':'-'} √<span class="border-t-2 border-teal-700 pt-1">${n2}</span> = ... ?`;
let options = [correctAns];
while (options.length < 4) {
// Trap: what if they just add/sub the inside numbers and then root? Or just add/sub inside numbers?
let wrong1 = isPlus ? n1 + n2 : n1 - n2;
let wrong2 = correctAns + Math.floor(Math.random()*5) + 1;
let wrong3 = correctAns - Math.floor(Math.random()*3) - 1;
let w = [wrong1, wrong2, wrong3][Math.floor(Math.random()*3)];
if (w !== correctAns && w >= 0 && !options.includes(w)) {
options.push(w);
}
}
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ3(this, ${opt === correctAns})" class="guess-btn w-full py-5 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt}</button>`;
});
document.getElementById('q3-options').innerHTML = optHtml;
}
function checkQ3(btn, isCorrect) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Benar! Gampang kan mencari akarnya?";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Hitung akarnya satu-satu dulu baru dijumlah/dikurang.";
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3();
// ==========================================
// KUIS BATTLE KELOMPOK
// ==========================================
function generateBattle() {
// P1: Operasi (e.g. 2^3 + 2^2)
let base = Math.floor(Math.random()*3)+2;
let m1 = Math.floor(Math.random()*3)+1;
let m2 = Math.floor(Math.random()*2)+1;
let ans1 = Math.pow(base, m1) + Math.pow(base, m2);
document.getElementById(`battle-q1`).innerHTML = `${base}<sup>${m1}</sup> + ${base}<sup>${m2}</sup>`;
document.getElementById(`battle-ans1`).innerHTML = `${ans1}`;
document.getElementById(`battle-ans1`).classList.add('hidden');
// P2: Baku (e.g. 35000 -> 3,5 x 10^4)
let a2 = Math.floor(Math.random()*8)+2;
let b2 = Math.floor(Math.random()*9)+1;
let e2 = Math.floor(Math.random()*3)+3;
let str2 = a2 + "" + b2 + "0".repeat(e2-1);
document.getElementById(`battle-q2`).innerHTML = Number(str2).toLocaleString('id-ID');
document.getElementById(`battle-ans2`).innerHTML = `${a2},${b2} × 10<sup>${e2}</sup>`;
document.getElementById(`battle-ans2`).classList.add('hidden');
// P3: Akar (e.g. sqrt(100) - sqrt(36))
let pSqs = [16, 25, 36, 49, 64, 81, 100];
let sq1 = pSqs[Math.floor(Math.random()*pSqs.length)];
let sq2 = pSqs[Math.floor(Math.random()*3)]; // pick smaller one for sub
document.getElementById(`battle-q3`).innerHTML = `√<span class="border-t-2 border-amber-800 pt-1">${sq1}</span> - √<span class="border-t-2 border-amber-800 pt-1">${sq2}</span>`;
document.getElementById(`battle-ans3`).innerHTML = `${Math.sqrt(sq1) - Math.sqrt(sq2)}`;
document.getElementById(`battle-ans3`).classList.add('hidden');
}
function revealBattle(i) {
document.getElementById(`battle-ans${i}`).classList.remove('hidden');
}
generateBattle();
// ==========================================
// REFLEKSI
// ==========================================
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham Banget')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// ==========================================
// LATIHAN SOAL (EVALUASI) & LMS
// ==========================================
const evaluasiBank = [
{ q: "Hasil dari 2<sup>4</sup> + 2<sup>2</sup> adalah...", options: ["20", "64", "16", "32"], a: 0 },
{ q: "Bentuk baku dari bilangan 125.000.000 adalah...", options: ["1,25 × 10<sup>6</sup>", "1,25 × 10<sup>8</sup>", "12,5 × 10<sup>7</sup>", "0,125 × 10<sup>9</sup>"], a: 1 },
{ q: "Bentuk baku dari bilangan 0,000056 adalah...", options: ["5,6 × 10<sup>-4</sup>", "5,6 × 10<sup>5</sup>", "56 × 10<sup>-6</sup>", "5,6 × 10<sup>-5</sup>"], a: 3 },
{ q: "Hasil dari √<span class='border-t-2 border-slate-800 pt-1'>144</span> - √<span class='border-t-2 border-slate-800 pt-1'>36</span> adalah...", options: ["6", "√108", "8", "12"], a: 0 },
{ q: "Manakah di bawah ini yang <b>BUKAN</b> merupakan bilangan bentuk akar?", options: ["√7", "√15", "√49", "√20"], a: 2 }
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-xl math-box hover:bg-emerald-50 hover:border-emerald-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 1500);
}
loadEvaluasi();
// Integrasi LMS
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Sudah cukup mengerti.";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi: " + refleksi,
strategi: "Evaluasi Part 2: Operasi, Bentuk Baku & Akar"
}, "*");
} else {
alert("Simulasi berhasil! Jika ini dibuka di dalam LMS, nilaimu otomatis terekam.\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Bilangan Berpangkat 1
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Bilangan Berpangkat 🚀</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f8fafc;
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
/* Nav Buttons */
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-indigo-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-indigo-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="calculator" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-indigo-800 uppercase tracking-widest">Matematika - Bilangan Berpangkat</span>
<span id="progress-text" class="text-xs font-black text-white bg-indigo-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-blue-400 via-indigo-500 to-purple-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-3xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-indigo-100 text-indigo-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kelas 8 SMP
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Eksplorasi <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Bilangan Berpangkat</span> 🔢
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-indigo-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-pink-500"></i> Tujuan Pembelajaran Kita Hari Ini:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-indigo-600">menjelaskan konsep bilangan berpangkat bulat</span> dengan memberikan contoh yang sesuai.</li>
<li>Peserta didik dapat <span class="text-indigo-600">menganalisis sifat-sifat bilangan berpangkat bulat</span> berdasarkan aturan yang berlaku.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap belajar dengan seru? Yuk, kita mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Dasar -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Konsep Dasar Berpangkat 🧠</h2>
</div>
<div class="bg-white p-8 rounded-[2rem] shadow-sm border-2 border-slate-200 mt-4 space-y-6">
<p class="text-xl font-bold text-slate-700">Bilangan berpangkat adalah <span class="bg-yellow-200 px-2 rounded">perkalian berulang</span> dari suatu bilangan yang sama.</p>
<div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-200 text-center">
<p class="text-4xl math-box text-indigo-700">a<sup>n</sup> = a × a × a × ... × a</p>
<p class="text-lg font-bold text-slate-500 mt-2">(sebanyak n kali)</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-blue-50 p-5 rounded-2xl border-2 border-blue-200">
<h4 class="font-black text-blue-800 mb-2">Contoh Pangkat Positif</h4>
<p class="text-2xl math-box text-slate-800">2<sup>3</sup> = 2 × 2 × 2 = 8</p>
<p class="text-2xl math-box text-slate-800 mt-2">5<sup>2</sup> = 5 × 5 = 25</p>
</div>
<div class="bg-pink-50 p-5 rounded-2xl border-2 border-pink-200">
<h4 class="font-black text-pink-800 mb-2">Sifat Spesial (Pangkat Nol)</h4>
<p class="text-lg font-bold text-slate-700">Semua bilangan (kecuali 0) jika dipangkatkan 0 hasilnya 1.</p>
<p class="text-3xl math-box text-slate-800 mt-2">100<sup>0</sup> = 1</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Konsep) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-indigo-600">Konsep Dasar</span> 🎮</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kerjakan sepuasmu! Soal akan terus muncul otomatis.</p>
<div class="mt-4 inline-flex items-center gap-3 bg-indigo-100 border-2 border-indigo-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-indigo-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Berapakah hasil dari:</p>
<div id="q1-text" class="text-6xl math-box text-indigo-700 mb-8">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<!-- Pilihan jawaban di-generate via JS -->
</div>
<div id="q1-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-indigo-600 text-white rounded-2xl font-black text-xl hover:bg-indigo-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Materi Sifat Perkalian & Pembagian -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Sifat 1 & 2: Kali & Bagi ✖️➗</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Perhatikan pola aturannya. Sangat mudah lho!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<!-- Sifat 1 -->
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm">
<div class="bg-blue-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Sifat Perkalian</div>
<p class="text-lg font-bold text-slate-700 mb-2">Jika basisnya sama, pangkatnya <span class="text-blue-600">DITAMBAH</span>.</p>
<div class="bg-blue-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-blue-900">a<sup>m</sup> × a<sup>n</sup> = a<sup>m+n</sup></p>
</div>
<p class="font-bold text-slate-600">Contoh:</p>
<p class="text-xl math-box text-slate-800">2<sup>3</sup> × 2<sup>4</sup> = 2<sup>3+4</sup> = 2<sup>7</sup></p>
</div>
<!-- Sifat 2 -->
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-sm">
<div class="bg-pink-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Sifat Pembagian</div>
<p class="text-lg font-bold text-slate-700 mb-2">Jika basisnya sama, pangkatnya <span class="text-pink-600">DIKURANGI</span>.</p>
<div class="bg-pink-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-pink-900">a<sup>m</sup> ÷ a<sup>n</sup> = a<sup>m-n</sup></p>
</div>
<p class="font-bold text-slate-600">Contoh:</p>
<p class="text-xl math-box text-slate-800">5<sup>6</sup> ÷ 5<sup>2</sup> = 5<sup>6-2</sup> = 5<sup>4</sup></p>
</div>
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Sifat 1 & 2) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-blue-600">Sifat Kali & Bagi</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Sederhanakan bentuk berikut:</p>
<div id="q2-text" class="text-5xl math-box text-blue-700 mb-8">?</div>
<div id="q2-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q2-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: Materi Sifat Pangkat Dipangkatkan & Pangkat Negatif -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Sifat 3 & 4: Pangkat Ekstra 🚀</h2>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<!-- Sifat 3 -->
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm">
<div class="bg-emerald-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Pangkat Dipangkatkan</div>
<p class="text-lg font-bold text-slate-700 mb-2">Pangkatnya tinggal <span class="text-emerald-600">DIKALI</span>.</p>
<div class="bg-emerald-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-emerald-900">(a<sup>m</sup>)<sup>n</sup> = a<sup>m × n</sup></p>
</div>
<p class="font-bold text-slate-600">Contoh:</p>
<p class="text-xl math-box text-slate-800">(3<sup>2</sup>)<sup>4</sup> = 3<sup>2 × 4</sup> = 3<sup>8</sup></p>
</div>
<!-- Sifat 4 -->
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm">
<div class="bg-amber-500 text-white px-4 py-1 rounded-full inline-block font-black mb-4">Pangkat Negatif</div>
<p class="text-lg font-bold text-slate-700 mb-2">Ubah posisi (atas ke bawah) biar pangkat jadi <span class="text-amber-600">POSITIF</span>.</p>
<div class="bg-amber-50 p-4 rounded-xl text-center mb-4">
<p class="text-2xl math-box text-amber-900">a<sup>-n</sup> = 1 / a<sup>n</sup></p>
</div>
<p class="font-bold text-slate-600">Contoh:</p>
<p class="text-xl math-box text-slate-800">2<sup>-3</sup> = 1 / 2<sup>3</sup> = 1/8</p>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Sifat 3 & 4) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-emerald-600">Pangkat Ekstra</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-md text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Bentuk lain / hasil dari:</p>
<div id="q3-text" class="text-5xl math-box text-emerald-700 mb-8">?</div>
<div id="q3-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-4 rounded-xl text-xl font-bold border-l-8 pop-in"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: Kuis Kelompok (Battle 3 Siswa) -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">⚔️ BATTLE KUIS KELOMPOK ⚔️</h2>
<p class="text-xl font-bold text-slate-600 mt-2">Ayo, 3 siswa perwakilan maju ke depan layar! Siapa yang paling cepat & tepat?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<!-- Kolom 1 -->
<div class="bg-white p-6 rounded-3xl border-4 border-rose-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-rose-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 1</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q1" class="text-4xl math-box text-rose-800 mb-6 font-bold"></p>
<div id="battle-ans1" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(1)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
<!-- Kolom 2 -->
<div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-blue-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 2</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q2" class="text-4xl math-box text-blue-800 mb-6 font-bold"></p>
<div id="battle-ans2" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(2)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
<!-- Kolom 3 -->
<div class="bg-white p-6 rounded-3xl border-4 border-amber-300 shadow-md flex flex-col justify-between text-center relative overflow-hidden">
<div class="bg-amber-500 text-white p-2 absolute top-0 left-0 w-full font-black text-lg">PEMAIN 3</div>
<div class="mt-12 flex-1 flex flex-col justify-center">
<p id="battle-q3" class="text-4xl math-box text-amber-800 mb-6 font-bold"></p>
<div id="battle-ans3" class="hidden text-3xl math-box text-green-600 font-black bg-green-50 p-4 rounded-xl border-2 border-green-200 pop-in"></div>
</div>
<button onclick="revealBattle(3)" class="mt-6 w-full py-3 bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl transition">Buka Jawaban</button>
</div>
</div>
<div class="text-center mt-6">
<button onclick="generateBattle()" class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-black text-xl rounded-full shadow-lg transition transform hover:scale-105">🔄 Acak Soal Battle Baru</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu belajar sifat eksponen hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">🤩</div>
<h3 class="font-black text-xl text-slate-700">Paham Banget!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan Paham</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">😵💫</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Apa bagian yang menurutmu paling menantang?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-indigo-400 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Latihan Soal Evaluasi</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal di bawah ini untuk melihat hasil akhirmu.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-indigo-200 shadow-md text-left">
<div class="flex justify-between items-center mb-4">
<span class="font-black text-indigo-600 bg-indigo-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 math-box mb-6 leading-relaxed"></p>
<div id="eval-options" class="space-y-3">
<!-- Auto generated -->
</div>
</div>
</div>
<!-- Halaman Kirim Nilai (Tampil Setelah Evaluasi Selesai) -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-indigo-900 mb-2">Hebat! Evaluasi Selesai.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-green-600 text-5xl bg-green-100 px-4 py-1 rounded-xl inline-block ml-2"></span></p>
<div class="bg-white border-4 border-indigo-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left">
<p class="font-bold text-slate-500 text-center mb-4">Silakan isi data untuk dikirim ke sistem Bapak/Ibu Guru.</p>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-indigo-500 bg-slate-50">
</div>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Persentase Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-indigo-500">
<option value="100">100% - Paham Semua</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Perlu Belajar Lagi</option>
<option value="25">25% - Banyak Bingungnya</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-indigo-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-indigo-700 shadow-[0_4px_0px_#4338ca]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
// Navigasi Slide Basic
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// ==========================================
// UTILS: Acak Array
// ==========================================
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// ==========================================
// KUIS AUTO 1: Konsep Dasar
// ==========================================
let countQ1 = 0;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let bases = [2, 3, 4, 5, 10];
let base = bases[Math.floor(Math.random() * bases.length)];
let exp = Math.floor(Math.random() * 4) + 1; // 1 to 4
// Variasi sifat pangkat nol
if (Math.random() > 0.8) exp = 0;
let correctAns = Math.pow(base, exp);
document.getElementById('q1-text').innerHTML = `${base}<sup>${exp}</sup> = ... ?`;
let options = [correctAns];
while (options.length < 4) {
let wrong = correctAns + Math.floor(Math.random() * 20) - 10;
if (wrong === correctAns || wrong < 0 || options.includes(wrong)) {
wrong = base * exp; // Kesalahan umum siswa
if(wrong === correctAns) wrong += 5;
}
if (!options.includes(wrong)) options.push(wrong);
}
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, ${opt === correctAns})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 transition">${opt}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Benar! Hebat sekali.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Kurang tepat, ayo coba lagi!";
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1(); // Init slide 3
// ==========================================
// KUIS AUTO 2: Sifat Kali & Bagi
// ==========================================
let countQ2 = 0;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
let isKali = Math.random() > 0.5;
let base = ["a", "p", "x", "y", "m"][Math.floor(Math.random() * 5)];
let m = Math.floor(Math.random() * 5) + 3;
let n = Math.floor(Math.random() * 4) + 1;
let qText, correctAnsExp;
if (isKali) {
qText = `${base}<sup>${m}</sup> × ${base}<sup>${n}</sup>`;
correctAnsExp = m + n;
} else {
qText = `${base}<sup>${m}</sup> ÷ ${base}<sup>${n}</sup>`;
correctAnsExp = m - n;
}
document.getElementById('q2-text').innerHTML = `${qText} = ... ?`;
let correctHtml = `${base}<sup>${correctAnsExp}</sup>`;
let options = [
{ exp: correctAnsExp, isC: true },
{ exp: isKali ? m - n : m + n, isC: false }, // kebalik sifat
{ exp: m * n, isC: false }, // dikali pangkatnya
{ exp: isKali ? m + n + 1 : m - n - 1, isC: false }
];
// Remove duplicates logic (simplified)
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ2(this, ${opt.isC})" class="guess-btn w-full py-6 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-3xl border-b-4 border-slate-300 math-box transition">${base}<sup>${opt.exp}</sup></button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Mantap! Ingat sifatnya ya.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Coba dicek lagi aturannya (Tambah atau Kurang).";
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2(); // Init
// ==========================================
// KUIS AUTO 3: Pangkat Ekstra
// ==========================================
let countQ3 = 0;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
let isPangkatDipangkat = Math.random() > 0.5;
let qText, correctHtml, options;
if (isPangkatDipangkat) {
let base = ["k", "x", "p"][Math.floor(Math.random() * 3)];
let m = Math.floor(Math.random() * 3) + 2;
let n = Math.floor(Math.random() * 3) + 2;
qText = `(${base}<sup>${m}</sup>)<sup>${n}</sup>`;
correctHtml = `${base}<sup>${m*n}</sup>`;
options = [
{ html: correctHtml, isC: true },
{ html: `${base}<sup>${m+n}</sup>`, isC: false }, // siswa malah menjumlah
{ html: `${base}<sup>${Math.pow(m,n)}</sup>`, isC: false },
{ html: `${base}<sup>${m*n + 1}</sup>`, isC: false }
];
} else {
// Pangkat Negatif
let base = Math.floor(Math.random() * 4) + 2;
let n = Math.floor(Math.random() * 3) + 2;
qText = `${base}<sup>-${n}</sup>`;
correctHtml = `1 / ${base}<sup>${n}</sup>`;
options = [
{ html: correctHtml, isC: true },
{ html: `-${base}<sup>${n}</sup>`, isC: false }, // siswa memindahkan min ke depan
{ html: `1 / ${base * n}`, isC: false },
{ html: `${base}<sup>${n}</sup>`, isC: false }
];
}
document.getElementById('q3-text').innerHTML = `${qText} = ... ?`;
options = shuffle(options);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ3(this, ${opt.isC})" class="guess-btn w-full py-6 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-2xl border-b-4 border-slate-300 math-box transition">${opt.html}</button>`;
});
document.getElementById('q3-options').innerHTML = optHtml;
}
function checkQ3(btn, isCorrect) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "🎉 Luar Biasa! Kamu makin jago.";
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-4 rounded-xl text-xl font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = "😅 Jangan kecoh, ingat aturannya ya!";
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3(); // Init
// ==========================================
// KUIS BATTLE KELOMPOK
// ==========================================
let battleAnswers = [];
function generateBattle() {
battleAnswers = [];
for(let i=1; i<=3; i++) {
let base = Math.floor(Math.random() * 4) + 2; // 2 to 5
let m = Math.floor(Math.random() * 3) + 2;
let n = Math.floor(Math.random() * 2) + 1;
let tipe = Math.floor(Math.random() * 3); // 0: kali, 1: bagi, 2: pangkatin
let qText, ansExp;
if(tipe === 0) {
qText = `${base}<sup>${m}</sup> × ${base}<sup>${n}</sup>`;
ansExp = m+n;
} else if(tipe === 1) {
qText = `${base}<sup>${m+n}</sup> ÷ ${base}<sup>${m}</sup>`;
ansExp = n;
} else {
qText = `(${base}<sup>${m}</sup>)<sup>${n}</sup>`;
ansExp = m*n;
}
document.getElementById(`battle-q${i}`).innerHTML = qText;
document.getElementById(`battle-ans${i}`).innerHTML = `${base}<sup>${ansExp}</sup>`;
document.getElementById(`battle-ans${i}`).classList.add('hidden');
}
}
function revealBattle(i) {
document.getElementById(`battle-ans${i}`).classList.remove('hidden');
}
generateBattle();
// ==========================================
// REFLEKSI
// ==========================================
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham Banget')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// ==========================================
// LATIHAN SOAL (EVALUASI) & LMS
// ==========================================
const evaluasiBank = [
{ q: "Hasil dari 3<sup>4</sup> adalah...", options: ["12", "81", "27", "64"], a: 1 },
{ q: "Bentuk sederhana dari 2<sup>3</sup> × 2<sup>5</sup> adalah...", options: ["2<sup>15</sup>", "4<sup>8</sup>", "2<sup>8</sup>", "2<sup>2</sup>"], a: 2 },
{ q: "Bentuk sederhana dari p<sup>7</sup> ÷ p<sup>4</sup> adalah...", options: ["p<sup>11</sup>", "p<sup>3</sup>", "p<sup>28</sup>", "1/p<sup>3</sup>"], a: 1 },
{ q: "Hasil dari (5<sup>2</sup>)<sup>3</sup> adalah...", options: ["5<sup>5</sup>", "5<sup>6</sup>", "10<sup>3</sup>", "25<sup>3</sup>"], a: 1 },
{ q: "Bentuk pangkat positif dari 3<sup>-2</sup> adalah...", options: ["1/6", "-9", "-6", "1/9"], a: 3 }
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-xl math-box hover:bg-indigo-50 hover:border-indigo-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
evalSkor += 20; // 5 soal @ 20 poin
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 1500);
}
loadEvaluasi();
// Integrasi LMS
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Materi sudah cukup jelas.";
// Format disesuaikan dengan kebutuhan LMS Bapak/Ibu (siswa.php)
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi: " + refleksi, // Mengirim teks refleksi ke kolom hambatan/catatan
strategi: "Evaluasi Bilangan Berpangkat"
}, "*");
} else {
alert("Simulasi berhasil! Jika ini dibuka di dalam LMS, nilaimu otomatis terekam.\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 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>
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>
📊 Papan Nilai & Aktivitas Kelas
Nilai ganda per siswa otomatis diambil skor tertinggi| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Abdul Ishaq Marasabessy | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 20 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Jamila Bone | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Meisya Firda Assel | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Pandi Aziz Soumena | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 80 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Indri selly | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 80 | 75% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Zidam Wabula | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Putri Setiawati Mahulauw | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 80 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Diniarty Khaila Ang | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 80 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Asti Komala Tunny | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Ilham Fajar Sely | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 60 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Jahira Soumena | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Rahmat Salong | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Muhammad Barru Soulisa | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Fadlan Soulisa | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 80 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Fajrul Aufar Maasily | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 80 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Refan Mahulauw | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 80 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Alfiansyah Mahulauw | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 40 | 75% | Refleksi Penyebaran Data: soal masi bikin saya bingung | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Irham Soulisa | Petualangan Perkalian Cepat (1-10) Penguatan Numerasi — Kelas 7 | 80 | 100% | Refleksi Perkalian: 1 | Evaluasi: Perkalian Dasar (1-10) |
| asirnata soumena | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 60 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| alfian marinda | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| julia ramadany pirasou | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| Rifka Tunnisa Tunny | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| ilham sunet | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| refan mahulaw | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| madania mana anu | Teorema Pythagoras : Jenis Segitiga & Pythagoras Matematika — Kelas 8 | 100 | 100% | Refleksi Jenis Segitiga: Misi Selesai! | Evaluasi: Jenis Sudut pada Segitiga |
| syarlan soumena kong | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| fadil | Menemukan Fakta Eksplisit Penguatan Literasi Dasar — Kelas 7 | 60 | 100% | Refleksi Fakta Eksplisit: Misi Detektif Fakta Eksplisit Selesai! | Evaluasi: Menemukan Fakta Eksplisit |
| ismail assel | Petualangan Perkalian Cepat (1-10) Penguatan Numerasi — Kelas 7 | 80 | 100% | Refleksi Perkalian: Misi Perkalian Selesai! | Evaluasi: Perkalian Dasar (1-10) |
| jelita apriliani soulisa | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| M.Adlan Salaputa | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| madania mana anu | Statistika : Misi Statistika Part1 Matematika — Kelas 8 | 100 | 100% | Refleksi Statistika: Misi Statistika Selesai! | Evaluasi Individu: Statistika Dasar |
| madania mana anu | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| mega desfiona | Persamaan Garis Lurus Matematika — Kelas 8 | 60 | 100% | Refleksi PGL: Misi Selesai! | Evaluasi: Persamaan Garis Lurus |
| madania mana anu | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| fikram b maasily | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| mega desfiona | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| fikram bahtiar | penjumlahan 1-100 Penguatan Numerasi — Kelas 7 | 20 | 100% | Refleksi Penjumlahan: Misi Penjumlahan Selesai! | Evaluasi: Penjumlahan Bilangan (1-100) |
| putri | Statistika : Misi Statistika Part1 Matematika — Kelas 8 | 80 | 100% | Refleksi Statistika: Misi Statistika Selesai! | Evaluasi Individu: Statistika Dasar |
| asti komala tunny | Statistika : Misi Statistika Part1 Matematika — Kelas 8 | 100 | 100% | Refleksi Statistika: Misi Statistika Selesai! | Evaluasi Individu: Statistika Dasar |
| refan mahulauw | Statistika : Misi Statistika Part1 Matematika — Kelas 8 | 40 | 75% | Refleksi Statistika: Misi Statistika Selesai! | Evaluasi Individu: Statistika Dasar |
| ini asti tunny paa | Statistika : Misi Statistika Part1 Matematika — Kelas 8 | 100 | 100% | Refleksi Statistika: menurut saya itu sanggat menyenangkan dan seruh dan saya bisa memahami materi | Evaluasi Individu: Statistika Dasar |
| rafli soumena | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 20 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| harira soumena | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 60 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| elvi | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| nirma wally | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| BANNI SYAFIRA ASSEL | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |
| anggun aprilia soumena | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: yang menurut saya paling menarik di materi dua de yang judulnya tentang investigasi perubahan data | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| BANNI SYAFIRA ASSEL | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| syahad jumu | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Penyebaran Data Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Ismail assel | Statistika : Misi Puncak Statistika & Keputusan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak Statistika: Misi Puncak Selesai! | Evaluasi: Pemecahan Masalah & Keputusan Data |