Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
๐ Pilih Materi Pelajaran Belajar
Kelas 7
Penguatan Numerasi
Petualangan Pengurangan Cepat (1-100)
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Dasar: Petualangan Pengurangan Cepat (1-100) โ๐</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: #eff6ff;
background-image: radial-gradient(#bfdbfe 1.2px, transparent 1.2px);
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: #2563eb !important; color: white !important; border-bottom-color: #1d4ed8 !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-blue-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-blue-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="minus-circle" 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-blue-900 uppercase tracking-widest">Matematika Dasar - Pengurangan Bilangan 1-100</span>
<span id="progress-text" class="text-xs font-black text-white bg-blue-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-sky-400 via-blue-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-blue-100 text-blue-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase A / B - Matematika Dasar
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Petualangan <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Pengurangan Cepat (1-100)</span> โ๐
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-blue-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-blue-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-blue-600"></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-blue-600">melakukan pengurangan bilangan dua angka (1โ100)</span> tanpa teknik meminjam dan dengan teknik meminjam.</li>
<li>Peserta didik dapat <span class="text-blue-600">menerapkan strategi pemisahan nilai tempat dan selisih cepat</span> untuk memecahkan soal sehari-hari secara tepat.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap berhitung selisih dengan cermat? Yuk, kita mulai! ๐</p>
</div>
</div>
<!-- Slide 2: Observasi Konkret Pengurangan Benda -->
<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">Tahap 1: Mengamati Benda yang Berkurang ๐๏ธโ๐จ๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pengurangan adalah mengambil sebagian benda untuk mencari sisa yang tertinggal!</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">Jumlah Awal Balon:</h4>
<p class="text-slate-600 font-bold">Kakak membeli 3 ikatan balon (isi 10) dan 8 balon lepas.</p>
<div class="p-3 bg-blue-50 rounded-xl text-blue-900 font-bold text-sm">
3 Puluhan + 8 Satuan = <strong>38 Balon</strong>
</div>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm space-y-3">
<span class="text-4xl">๐จ</span>
<h4 class="font-black text-xl text-indigo-800">Balon yang Meletus / Diberikan:</h4>
<p class="text-slate-600 font-bold">Diberikan 1 ikatan balon (10) dan 5 balon lepas kepada adik.</p>
<div class="p-3 bg-indigo-50 rounded-xl text-indigo-900 font-bold text-sm">
1 Puluhan + 5 Satuan = <strong>15 Balon</strong>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-2xl border-2 border-slate-200 text-center text-slate-700 font-bold">
Sisa balon kakak: (30 - 10) + (8 - 5) = 20 + 3 = <strong>23 Balon</strong>! ๐
</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-900 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik ๐ค
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kita ingin menghitung 52 - 27, angka satuan 2 tidak cukup dikurangi 7. Dari mana kita bisa mengambil angka tambahan untuk membantunya?"
</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 Rahasia:</p>
<p class="text-slate-700 font-bold mt-1">Kita bisa <strong>meminjam 1 puluhan (bernilai 10)</strong> dari tetangga sebelah kirinya! Angka 2 berubah menjadi 12 (10 + 2), sehingga 12 - 7 = 5!</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-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual ๐๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kapan Saja Kita Menggunakan Pengurangan Setiap Hari?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐ต</span>
<h4 class="font-black text-xl text-blue-800">Menghitung Kembalian</h4>
<p class="text-slate-600 font-bold text-sm">Membayar barang Rp65.000 dengan uang Rp100.000, kembaliannya Rp100.000 - Rp65.000 = Rp35.000.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐</span>
<h4 class="font-black text-xl text-blue-800">Sisa Halaman Buku</h4>
<p class="text-slate-600 font-bold text-sm">Buku cerita tebalnya 84 halaman, kamu sudah membaca 32 halaman (sisa 84 - 32 = 52 halaman).</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">โณ</span>
<h4 class="font-black text-xl text-blue-800">Selisih Usia</h4>
<p class="text-slate-600 font-bold text-sm">Usia kakek 68 tahun dan usia ayah 43 tahun, selisih usia mereka adalah 68 - 43 = 25 tahun.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Pengurangan Tanpa Meminjam + Latihan Acak Tak Terhingga -->
<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">Materi 1: Pengurangan Tanpa Meminjam โ๏ธ</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-blue-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-6">
<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">Metode Susun Pendek</h4>
<div class="bg-white p-4 rounded-xl font-mono text-xl text-slate-800 inline-block border border-blue-200">
6 8<br>
- 2 5<br>
-----<br>
<strong>4 3</strong>
</div>
<p class="text-slate-600 text-xs font-bold mt-2">1. Kurangi satuan: 8 - 5 = 3<br>2. Kurangi puluhan: 6 - 2 = 4</p>
</div>
<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">Metode Pecah Puluhan (Mental)</h4>
<p class="text-slate-700 font-bold text-sm">Kurangi puluhan dulu, lalu kurangi satuannya:</p>
<p class="text-sm font-bold text-sky-800 bg-white p-2.5 rounded-lg border border-sky-200">
68 - 25 = 68 - 20 - 5<br>
= 48 - 5 = <strong>43</strong>
</p>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Tanpa Meminjam -->
<div class="bg-blue-50/70 p-6 rounded-3xl border-2 border-blue-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-blue-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Tanpa Meminjam</h4>
<p class="text-slate-600 font-bold text-xs">Hitung selisih bilangan dua angka secara mandiri. Latihlah sepuasmu!</p>
</div>
<div class="bg-blue-200 text-blue-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-1">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-blue-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Berapakah hasil dari:</p>
<div id="uji-1-question" class="text-4xl math-box text-blue-700 font-black mb-4">... - ... = ?</div>
<div id="uji-1-options" class="grid grid-cols-3 gap-3 max-w-md mx-auto"></div>
<div id="uji-1-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-1-next-btn" onclick="generateUji1()" class="hidden mt-4 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Pengurangan dengan Teknik Meminjam + Latihan Acak Tak Terhingga -->
<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: Teknik Meminjam (Regrouping) ๐ฆ</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md mt-2 space-y-5">
<p class="text-base font-bold text-slate-700">Jika angka satuan yang di atas lebih kecil dari angka satuan yang di bawah, pinjamlah <strong>1 puluhan (= 10 satuan)</strong>!</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-indigo-50 p-5 rounded-2xl border-2 border-indigo-200">
<h4 class="font-black text-indigo-900 text-base mb-2">Contoh Bersusun: 63 - 28</h4>
<div class="bg-white p-4 rounded-xl font-mono text-xl text-slate-800 inline-block border border-indigo-200">
<span class="text-red-500 text-xs font-bold block">(6 dicoret jadi 5, 3 jadi 13)</span>
โต6 ยน3<br>
- 2 8<br>
-----<br>
<strong>3 5</strong>
</div>
<ul class="text-xs font-bold text-slate-600 list-disc list-inside mt-3 space-y-1">
<li>Satuan: 13 - 8 = 5.</li>
<li>Puluhan: 5 - 2 = 3.</li>
</ul>
</div>
<div class="bg-blue-50 p-5 rounded-2xl border-2 border-blue-200">
<h4 class="font-black text-blue-900 text-base mb-2">Trik Tambah Angka Sama (Equal Addition)</h4>
<p class="text-xs font-bold text-slate-700 leading-relaxed">
Bulatkan angka pengurang ke puluhan terdekat agar tidak perlu pusing meminjam:
</p>
<div class="bg-white p-3 rounded-xl border border-blue-200 mt-2 text-xs font-bold text-blue-900">
63 - 28 = ... (tambahkan 2 ke kedua angka)<br>
= (63 + 2) - (28 + 2)<br>
= 65 - 30 = <strong>35</strong> (Sangat mudah!)
</div>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Dengan Teknik Meminjam -->
<div class="bg-indigo-50/70 p-6 rounded-3xl border-2 border-indigo-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-indigo-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Teknik Meminjam (Acak Bebas)</h4>
<p class="text-slate-600 font-bold text-xs">Latih ketelitian teknik meminjam dengan berbagai soal acak tak terbatas!</p>
</div>
<div class="bg-indigo-200 text-indigo-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-2">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-indigo-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Berapakah hasil dari:</p>
<div id="uji-2-question" class="text-4xl math-box text-indigo-700 font-black mb-4">... - ... = ?</div>
<div id="uji-2-options" class="grid grid-cols-3 gap-3 max-w-md mx-auto"></div>
<div id="uji-2-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-2-next-btn" onclick="generateUji2()" class="hidden mt-4 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</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-blue-600 to-indigo-600 tracking-wide uppercase">โก BATTLE PANEL PENGURANGAN CEPAT (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 pengurangan 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-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-blue-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-blue-50 p-4 rounded-2xl border-2 border-blue-100 text-center">
<p id="ifp-q-1" class="text-2xl 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-indigo-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-indigo-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-indigo-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-100 text-center">
<p id="ifp-q-2" class="text-2xl 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-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 3</span>
<span id="ifp-score-3" 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-3" class="text-2xl 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-400 mb-6 drop-shadow-lg">JUARA PENGURANGAN CEPAT!</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_#1e40af] 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 pengurangan mandiri ini secara teliti.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-blue-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-blue-700 bg-blue-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 pengurangan bilangan 1โ100 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">Mudah & Cepat!</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 Bisa</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">Perlu Latihan Meminjam</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">Cara berhitung mana yang paling membantumu saat melakukan pengurangan?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-blue-50 border-2 border-blue-200 focus:border-blue-500 outline-none font-medium" rows="3" placeholder="Tuliskan 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-blue-900 mb-1">Hebat! Kamu Juara Berhitung.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-blue-700 text-5xl bg-blue-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-blue-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-blue-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-blue-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-blue-500">
<option value="100">100% - Paham Semua & Lancar</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Masih Perlu Waktu Saat Meminjam</option>
<option value="25">25% - Sering Lupa Mengurangi Puluhan</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 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 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-blue-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-blue-700 shadow-[0_4px_0px_#1d4ed8]">
<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); });
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;
}
// ==========================================
// GENERATOR SOAL TAK TERHINGGA: UJI CEPAT 1 & 2
// ==========================================
let countUji1 = 0;
let countUji2 = 0;
// Slide 5: Pengurangan Tanpa Meminjam (satuan1 >= satuan2 dan puluhan1 >= puluhan2)
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let p1 = Math.floor(Math.random() * 7) + 3; // 3 to 9
let p2 = Math.floor(Math.random() * (p1 - 1)) + 1; // 1 to p1-1
let s1 = Math.floor(Math.random() * 7) + 3; // 3 to 9
let s2 = Math.floor(Math.random() * s1); // 0 to s1-1 (satuan1 > satuan2)
let num1 = p1 * 10 + s1;
let num2 = p2 * 10 + s2;
let correct = num1 - num2;
document.getElementById('uji-1-question').innerHTML = `${num1} - ${num2} = ?`;
let options = [correct];
while (options.length < 3) {
let delta = (Math.floor(Math.random() * 4) + 1) * (Math.random() > 0.5 ? 1 : -1);
if (Math.random() > 0.6) delta = 10 * (Math.random() > 0.5 ? 1 : -1);
let wrong = correct + delta;
if (wrong > 0 && wrong <= 100 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optsContainer = document.getElementById('uji-1-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji1(btn, opt === correct, correct, num1, num2);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correct, n1, n2) {
const btns = document.getElementById('uji-1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-1-feedback');
fb.classList.remove('hidden');
let sSelisih = (n1 % 10) - (n2 % 10);
let pSelisih = (Math.floor(n1 / 10) - Math.floor(n2 / 10)) * 10;
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> ${n1} - ${n2} = <b>${correct}</b>. Cepat dan tepat!`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (parseInt(b.innerHTML) === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> Kurangi puluhan (${pSelisih}) dan satuan (${sSelisih}): hasil yang benar adalah <b>${correct}</b>.`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Slide 6: Pengurangan dengan Teknik Meminjam (satuan1 < satuan2)
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
// Satuan1 harus lebih kecil dari Satuan2
let s1 = Math.floor(Math.random() * 6); // 0 to 5
let s2 = Math.floor(Math.random() * (9 - (s1 + 1) + 1)) + (s1 + 1); // s1+1 to 9 (pasti s1 < s2)
let p1 = Math.floor(Math.random() * 6) + 4; // 4 to 9
let p2 = Math.floor(Math.random() * (p1 - 2)) + 1; // 1 to p1-2
let num1 = p1 * 10 + s1;
let num2 = p2 * 10 + s2;
let correct = num1 - num2;
document.getElementById('uji-2-question').innerHTML = `${num1} - ${num2} = ?`;
let options = [correct];
// Jebakan umum: terbalik mengurangkan satuan (s2 - s1)
let jebakanTerbalik = (p1 - p2) * 10 + (s2 - s1);
if (jebakanTerbalik > 0 && !options.includes(jebakanTerbalik)) {
options.push(jebakanTerbalik);
}
// Jebakan lupa kurangi puluhan setelah pinjam
let lupaKurangPuluhan = correct + 10;
if (lupaKurangPuluhan > 0 && lupaKurangPuluhan <= 100 && !options.includes(lupaKurangPuluhan)) {
options.push(lupaKurangPuluhan);
}
while (options.length < 3) {
let delta = (Math.floor(Math.random() * 4) + 1) * (Math.random() > 0.5 ? 1 : -1);
let wrong = correct + delta;
if (wrong > 0 && wrong <= 100 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optsContainer = document.getElementById('uji-2-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji2(btn, opt === correct, correct, num1, num2);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correct, n1, n2) {
const btns = document.getElementById('uji-2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-2-feedback');
fb.classList.remove('hidden');
let s1 = n1 % 10;
let s2 = n2 % 10;
let pinjamS1 = s1 + 10;
let sHasil = pinjamS1 - s2;
let sisaP = Math.floor(n1 / 10) - 1;
let p2 = Math.floor(n2 / 10);
let pHasil = sisaP - p2;
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> Pinjam 1 puluhan jadi (${pinjamS1} - ${s2} = ${sHasil}). Sisa puluhan (${sisaP} - ${p2} = ${pHasil}). Total = <b>${correct}</b>!`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (parseInt(b.innerHTML) === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> Jangan lupa: setelah meminjam 1 puluhan, angka satuan menjadi ${pinjamS1} (${pinjamS1} - ${s2} = ${sHasil}) dan puluhan tersisa ${sisaP}. Jawaban yang benar: <b>${correct}</b>.`;
}
countUji2++;
document.getElementById('count-uji-2').innerText = countUji2;
document.getElementById('uji-2-next-btn').classList.remove('hidden');
}
// Inisialisasi Uji Cepat Awal
generateUji1();
generateUji2();
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "38 - 15 = ...", opts: ["23", "25", "13"], ans: 0 },
{ q: "45 - 20 = ...", opts: ["20", "25", "30"], ans: 1 },
{ q: "52 - 17 = ...", opts: ["35", "45", "37"], ans: 0 },
{ q: "64 - 28 = ...", opts: ["34", "36", "46"], ans: 1 },
{ q: "70 - 25 = ...", opts: ["45", "55", "35"], ans: 0 },
{ q: "83 - 39 = ...", opts: ["54", "44", "46"], ans: 1 },
{ q: "95 - 42 = ...", opts: ["53", "55", "43"], ans: 0 },
{ q: "61 - 18 = ...", opts: ["43", "53", "41"], ans: 0 },
{ q: "76 - 49 = ...", opts: ["25", "27", "37"], ans: 1 },
{ q: "90 - 36 = ...", opts: ["54", "64", "56"], ans: 0 },
{ q: "88 - 53 = ...", opts: ["35", "25", "45"], ans: 0 },
{ q: "100 - 45 = ...", opts: ["55", "65", "45"], ans: 0 }
];
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} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "โ
Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "โ 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 Slide 9
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('Mudah')) 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 Slide 8
const evaluasiBank = [
{
q: "Hasil dari <b>76 - 32</b> adalah...",
options: ["44", "42", "54", "34"],
a: 0,
exp: "Pengurangan tanpa meminjam: (70 - 30) + (6 - 2) = 40 + 4 = <b>44</b>."
},
{
q: "Hasil pengurangan dengan teknik meminjam dari <b>62 - 28</b> adalah...",
options: ["44", "34", "36", "46"],
a: 1,
exp: "Pinjam 1 puluhan: satuan menjadi (12 - 8 = 4), sisa puluhan menjadi (5 - 2 = 3). Hasilnya <b>34</b>."
},
{
q: "Di sebuah toko terdapat 85 buku tulis. Hari ini telah terjual sebanyak 37 buku. Berapa sisa buku tulis di toko sekarang?",
options: ["48 buku", "52 buku", "46 buku", "58 buku"],
a: 0,
exp: "85 - 37 = (85 + 3) - (37 + 3) = 88 - 40 = <b>48 buku</b>."
},
{
q: "Berapakah hasil dari <b>90 - 45</b>?",
options: ["45", "55", "35", "50"],
a: 0,
exp: "90 - 45 = <b>45</b> (karena 45 + 45 = 90)."
},
{
q: "Hasil dari <b>100 - 36</b> adalah...",
options: ["64", "74", "66", "54"],
a: 0,
exp: "100 - 30 = 70, lalu 70 - 6 = <b>64</b>."
}
];
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-blue-300 shadow-md text-center space-y-4">
<span class="text-6xl">๐</span>
<h3 class="text-3xl font-black text-blue-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal pengurangan bilangan (1โ100) dengan sangat baik.</p>
<p class="text-slate-500 font-bold">Silakan klik tombol <b>Selanjutnya</b> di bawah untuk mengisi refleksi dan mengirim nilaimu ke Guru.</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-blue-50 hover:border-blue-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();
// Kirim Nilai ke LMS / Parent Window
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 Pengurangan (1-100) Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Pengurangan: " + refleksi,
strategi: "Evaluasi: Pengurangan Bilangan (1-100)"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 7
Penguatan Numerasi
Petualangan Perkalian Cepat (1-100)
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika: Petualangan Perkalian Cepat (1-100) โก๐</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(#99f6e4 1.2px, transparent 1.2px);
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: #0d9488 !important; color: white !important; border-bottom-color: #115e59 !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-teal-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-teal-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="zap" 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-teal-900 uppercase tracking-widest">Matematika - Strategi Perkalian Cepat Bilangan 1-100</span>
<span id="progress-text" class="text-xs font-black text-white bg-teal-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- 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-teal-100 text-teal-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase B / C - Matematika Tingkat Lanjut
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Petualangan <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-600 to-emerald-600">Perkalian Cepat (1-100)</span> โก๐
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-teal-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-teal-600"></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-teal-600">mengalikan bilangan dua angka dengan kelipatan 10 dan sifat distributif</span> (memecah nilai tempat) secara mental.</li>
<li>Peserta didik dapat <span class="text-teal-600">menerapkan strategi perkalian cepat dan bersusun</span> untuk menghasilkan produk perkalian hingga 100 secara akurat.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap berhitung secepat kilat? Yuk, kita mulai! ๐</p>
</div>
</div>
<!-- Slide 2: Observasi Pola Perkalian Puluhan -->
<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">Tahap 1: Mengamati Kekuatan Angka Nol ๐๏ธโ๐จ๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Perhatikan bagaimana perkalian dasar membesar saat bertemu puluhan!</p>
</div>
<div class="grid md:grid-cols-3 gap-4 mt-4">
<div class="bg-white p-5 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-2">
<span class="text-3xl block">๐ฑ</span>
<h4 class="font-black text-teal-800 text-lg">Tingkat 1</h4>
<p class="text-2xl font-mono text-slate-800 font-bold">4 × 2 = 8</p>
<p class="text-xs font-bold text-teal-700 bg-teal-50 p-1.5 rounded-lg">Fakta Dasar</p>
</div>
<div class="bg-white p-5 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-2">
<span class="text-3xl block">๐ฟ</span>
<h4 class="font-black text-teal-800 text-lg">Tingkat 2</h4>
<p class="text-2xl font-mono text-slate-800 font-bold">4 × 20 = 80</p>
<p class="text-xs font-bold text-teal-700 bg-teal-50 p-1.5 rounded-lg">Simpan & Pasang 1 Nol</p>
</div>
<div class="bg-white p-5 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-2">
<span class="text-3xl block">๐ณ</span>
<h4 class="font-black text-teal-800 text-lg">Tingkat 3</h4>
<p class="text-2xl font-mono text-slate-800 font-bold">20 × 5 = 100</p>
<p class="text-xs font-bold text-teal-700 bg-teal-50 p-1.5 rounded-lg">Mencapai Seratus!</p>
</div>
</div>
<div class="bg-white p-4 rounded-2xl border-2 border-slate-200 text-center text-slate-700 font-bold space-y-1">
<p>Rahasia Kilat: Kalikan angka depannya, lalu tempelkan jumlah angka nol di belakangnya!</p>
<p class="text-teal-700 font-extrabold text-sm font-mono">3 × 30 → (3 × 3) = 9 → tambah 0 = 90</p>
</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-900 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik ๐ค
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kita disuruh menghitung 14 × 5 di luar kepala tanpa coret-coretan kertas, bagaimana cara termudahnya? Apakah kita harus menghafal perkalian sampai 100?"
</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 Rahasia:</p>
<p class="text-slate-700 font-bold mt-1">Jangan dihafal semuanya! Cukup <strong>pecah bilangan 14 menjadi 10 dan 4</strong>. Hitung (10 × 5 = 50) lalu (4 × 5 = 20), kemudian gabungkan: 50 + 20 = <strong>70</strong>!</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-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual ๐๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengapa Kita Harus Bisa Menghitung Perkalian Cepat?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐๏ธ</span>
<h4 class="font-black text-xl text-teal-800">Total Belanja Cepat</h4>
<p class="text-slate-600 font-bold text-sm">Membeli 6 buku tulis seharga Rp15.000 per buku. Hitung mental: 6 × 15 = Rp90.000.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐ฅ</span>
<h4 class="font-black text-xl text-teal-800">Menghitung Rak Telur</h4>
<p class="text-slate-600 font-bold text-sm">Ada 4 kotak telur yang masing-masing berisi 24 butir. Total: 4 × 24 = 96 butir telur.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐</span>
<h4 class="font-black text-xl text-teal-800">Target Langkah Harian</h4>
<p class="text-slate-600 font-bold text-sm">Berlari mengelilingi lapangan sebanyak 5 putaran, tiap putaran 18 menit (5 × 18 = 90 menit).</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Jurus Pecah Nilai Tempat (Distributif) + Latihan Acak Tak Terhingga -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Jurus Pecah Puluhan & Satuan ๐ฅ</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-lg">Metode Mental Distributif</h4>
<div class="bg-white p-3 rounded-xl border border-teal-200 font-mono text-sm text-teal-900 font-bold">
Hitung: 6 × 14 = ...<br>
Pecah 14 menjadi (10 + 4):<br>
1. 6 × 10 = 60<br>
2. 6 × 4 = 24<br>
Gabungkan: 60 + 24 = <strong>84</strong>
</div>
</div>
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-lg">Trik Gandakan & Bagi Dua (Double & Half)</h4>
<p class="text-slate-700 font-bold text-xs">Jika mengalikan angka 5, kalikan 10 lalu bagi dua!</p>
<div class="bg-white p-3 rounded-xl border border-emerald-200 font-mono text-sm text-emerald-900 font-bold">
18 × 5 = ...<br>
Ubah jadi: 18 × 10 = 180<br>
Lalu bagi dua: 180 ÷ 2 = <strong>90</strong>
</div>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Jurus Pecah Puluhan -->
<div class="bg-teal-50/70 p-6 rounded-3xl border-2 border-teal-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-teal-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Perkalian Pecah Puluhan (Hasil ≤ 100)</h4>
<p class="text-slate-600 font-bold text-xs">Gunakan trik distributif di kepalamu. Soal akan terus berganti tak terhingga!</p>
</div>
<div class="bg-teal-200 text-teal-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-1">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-teal-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Berapakah hasil dari:</p>
<div id="uji-1-question" class="text-4xl math-box text-teal-800 font-black mb-4">... × ... = ?</div>
<div id="uji-1-options" class="grid grid-cols-3 gap-3 max-w-md mx-auto"></div>
<div id="uji-1-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-1-next-btn" onclick="generateUji1()" class="hidden mt-4 px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Trik Kilat Angka 11 & Perkalian Bersusun + Latihan Acak Tak Terhingga -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Keajaiban Angka 11 & Bersusun ๐ช</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md mt-2 space-y-5">
<p class="text-base font-bold text-slate-700">Untuk perkalian yang lebih besar, kuasai trik selip angka dan susun pendek:</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-base">Trik Kilat Angka 11 (Selip Tengah)</h4>
<p class="text-xs font-bold text-slate-700">Jumlahkan dua digitnya, lalu selipkan di tengah!</p>
<div class="bg-white p-3 rounded-xl border border-emerald-200 font-mono text-sm text-emerald-900 font-bold">
11 × 35 = ...<br>
Pisahkan 3 dan 5 → 3 [ ] 5<br>
Jumlahkan: 3 + 5 = 8<br>
Hasil: <strong>385</strong> (atau 11 × 7 = 77)
</div>
</div>
<div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-base">Metode Bersusun Pendek</h4>
<div class="bg-white p-3 rounded-xl border border-teal-200 font-mono text-sm text-slate-800 inline-block font-bold">
2 4<br>
× 4<br>
-----<br>
1. 4 × 4 = 16 (tulis 6, simpan 1)<br>
2. 4 × 2 = 8 (+ 1 simpanan = 9)<br>
Hasil: <strong>96</strong>
</div>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Tantangan Perkalian Campuran 1-100 -->
<div class="bg-emerald-50/70 p-6 rounded-3xl border-2 border-emerald-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-emerald-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Tantangan Kilat (Produk ≤ 100)</h4>
<p class="text-slate-600 font-bold text-xs">Uji kecepatan kalkulasimu secara instan tanpa pensil & kertas!</p>
</div>
<div class="bg-emerald-200 text-emerald-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-2">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-emerald-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Berapakah hasil dari:</p>
<div id="uji-2-question" class="text-4xl math-box text-emerald-800 font-black mb-4">... × ... = ?</div>
<div id="uji-2-options" class="grid grid-cols-3 gap-3 max-w-md mx-auto"></div>
<div id="uji-2-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-2-next-btn" onclick="generateUji2()" class="hidden mt-4 px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</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-teal-600 to-emerald-600 tracking-wide uppercase">โก BATTLE PANEL PERKALIAN KILAT (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 perkalian cepat 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-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>๐๏ธ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-teal-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-100 text-center">
<p id="ifp-q-1" class="text-2xl 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-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>๐ KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-emerald-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-100 text-center">
<p id="ifp-q-2" class="text-2xl 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-cyan-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-cyan-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-cyan-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-cyan-50 p-4 rounded-2xl border-2 border-cyan-100 text-center">
<p id="ifp-q-3" class="text-2xl 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-teal-400 mb-6 drop-shadow-lg">JUARA PERKALIAN KILAT!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-teal-600 hover:bg-teal-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#115e59] 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 perkalian cepat ini secara mandiri dengan teliti.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-teal-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-teal-700 bg-teal-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 menguasai jurus perkalian cepat (1โ100) 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">Hitung Cepat Sekali!</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 Menguasai</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 Perlu Latihan Mental</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">Trik berhitung mana yang paling membantumu hari ini?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-teal-50 border-2 border-teal-200 focus:border-teal-500 outline-none font-medium" rows="3" placeholder="Tuliskan 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-teal-900 mb-1">Hebat! Kamu Master Perkalian Kilat.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-teal-700 text-5xl bg-teal-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-teal-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-teal-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-teal-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-teal-500">
<option value="100">100% - Paham Semua & Sangat Cepat</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Masih Perlu Waktu Memecah Puluhan</option>
<option value="25">25% - Masih Sering Keliru</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 bg-gradient-to-r from-teal-600 to-emerald-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-teal-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-teal-700 shadow-[0_4px_0px_#115e59]">
<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); });
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;
}
// ==========================================
// GENERATOR SOAL TAK TERHINGGA: UJI CEPAT 1 & 2
// ==========================================
let countUji1 = 0;
let countUji2 = 0;
// Slide 5: Jurus Distributif (1 angka x 2 angka belasan, hasil <= 100)
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let a = Math.floor(Math.random() * 6) + 3; // 3 to 8
let maxB = Math.floor(100 / a);
if (maxB > 25) maxB = 25;
let b = Math.floor(Math.random() * (maxB - 11 + 1)) + 11; // 11 to maxB
let correct = a * b;
document.getElementById('uji-1-question').innerHTML = `${a} × ${b} = ?`;
let options = [correct];
while (options.length < 3) {
let delta = (Math.floor(Math.random() * 4) + 1) * (Math.random() > 0.5 ? 1 : -1) * 2;
if (Math.random() > 0.6) delta = 10 * (Math.random() > 0.5 ? 1 : -1);
let wrong = correct + delta;
if (wrong > 0 && wrong <= 100 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optsContainer = document.getElementById('uji-1-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-2xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji1(btn, opt === correct, correct, a, b);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correct, a, b) {
const btns = document.getElementById('uji-1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-1-feedback');
fb.classList.remove('hidden');
let puluhan = Math.floor(b / 10) * 10;
let satuan = b % 10;
let step1 = a * puluhan;
let step2 = a * satuan;
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> ${a} × ${b} = <b>${correct}</b>.<br><span class="text-xs font-mono text-green-700">(${a}×${puluhan} = ${step1}) + (${a}×${satuan} = ${step2}) = <b>${correct}</b></span>`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (parseInt(b.innerHTML) === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> Pecah menjadi: (${a}×${puluhan}=${step1}) + (${a}×${satuan}=${step2}) = <b>${correct}</b>.`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Slide 6: Perkalian Campuran Cepat (kelipatan 10, trik 11, puluhan genap)
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
let type = Math.floor(Math.random() * 3);
let a, b, correct;
if (type === 0) {
// Kelipatan 10
a = (Math.floor(Math.random() * 4) + 1) * 10; // 10, 20, 30, 40
b = Math.floor(Math.random() * Math.floor(100 / a)) + 2;
} else if (type === 1) {
// Trik 11
a = 11;
b = Math.floor(Math.random() * 8) + 2; // 2 to 9
} else {
// Puluhan 25 / 50 / 15
let bases = [15, 20, 25];
a = bases[Math.floor(Math.random() * bases.length)];
b = Math.floor(Math.random() * Math.floor(100 / a)) + 2;
}
correct = a * b;
document.getElementById('uji-2-question').innerHTML = `${a} × ${b} = ?`;
let options = [correct];
while (options.length < 3) {
let delta = (Math.floor(Math.random() * 4) + 1) * (Math.random() > 0.5 ? 1 : -1) * 5;
if (delta === 0) delta = 10;
let wrong = correct + delta;
if (wrong > 0 && wrong <= 100 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optsContainer = document.getElementById('uji-2-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-2xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji2(btn, opt === correct, correct, a, b);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correct, a, b) {
const btns = document.getElementById('uji-2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-2-feedback');
fb.classList.remove('hidden');
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> ${a} × ${b} = <b>${correct}</b>. Kecepatan responmu luar biasa!`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (parseInt(b.innerHTML) === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> Jawaban yang tepat: ${a} × ${b} = <b>${correct}</b>.`;
}
countUji2++;
document.getElementById('count-uji-2').innerText = countUji2;
document.getElementById('uji-2-next-btn').classList.remove('hidden');
}
// Inisialisasi Uji Cepat Awal
generateUji1();
generateUji2();
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "12 × 4 = ...", opts: ["48", "46", "52"], ans: 0 },
{ q: "15 × 3 = ...", opts: ["35", "45", "55"], ans: 1 },
{ q: "20 × 4 = ...", opts: ["60", "80", "100"], ans: 1 },
{ q: "25 × 3 = ...", opts: ["75", "70", "85"], ans: 0 },
{ q: "14 × 5 = ...", opts: ["60", "70", "80"], ans: 1 },
{ q: "11 × 8 = ...", opts: ["88", "80", "98"], ans: 0 },
{ q: "16 × 5 = ...", opts: ["70", "80", "90"], ans: 1 },
{ q: "30 × 3 = ...", opts: ["90", "60", "100"], ans: 0 },
{ q: "24 × 4 = ...", opts: ["86", "96", "94"], ans: 1 },
{ q: "13 × 6 = ...", opts: ["78", "68", "88"], ans: 0 },
{ q: "18 × 4 = ...", opts: ["62", "72", "82"], ans: 1 },
{ q: "50 × 2 = ...", opts: ["100", "90", "80"], ans: 0 }
];
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} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "โ
Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "โ 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 Slide 9
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('Cepat Sekali')) 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 Slide 8
const evaluasiBank = [
{
q: "Hasil dari <b>16 × 4</b> adalah...",
options: ["54", "64", "68", "74"],
a: 1,
exp: "Gunakan trik pecah: (10 × 4 = 40) + (6 × 4 = 24) = 40 + 24 = <b>64</b>."
},
{
q: "Berapakah hasil dari <b>25 × 4</b>?",
options: ["75", "90", "100", "125"],
a: 2,
exp: "25 × 4 = <b>100</b> (ingat 4 keping 25 sen bernilai 100)."
},
{
q: "Sebuah toko kue mengemas donat ke dalam 5 kotak. Tiap kotak berisi 18 donat. Berapa jumlah seluruh donat tersebut?",
options: ["80 donat", "85 donat", "90 donat", "95 donat"],
a: 2,
exp: "5 × 18 = 5 × (10 + 8) = 50 + 40 = <b>90 donat</b>."
},
{
q: "Hasil dari perkalian kilat <b>11 × 7</b> adalah...",
options: ["70", "77", "87", "117"],
a: 1,
exp: "Perkalian 11 dengan satu angka menghasilkan digit kembar: 11 × 7 = <b>77</b>."
},
{
q: "Berapakah hasil dari <b>15 × 6</b>?",
options: ["80", "85", "90", "96"],
a: 2,
exp: "15 × 6 = (10 × 6) + (5 × 6) = 60 + 30 = <b>90</b>."
}
];
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-teal-300 shadow-md text-center space-y-4">
<span class="text-6xl">๐</span>
<h3 class="text-3xl font-black text-teal-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal perkalian cepat dengan sangat baik.</p>
<p class="text-slate-500 font-bold">Silakan klik tombol <b>Selanjutnya</b> di bawah untuk mengisi refleksi dan mengirim nilaimu ke Guru.</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-teal-50 hover:border-teal-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();
// Kirim Nilai ke LMS / Parent Window
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 Perkalian Cepat (1-100) Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Perkalian Cepat: " + refleksi,
strategi: "Evaluasi: Perkalian Cepat (1-100)"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 7
Penguatan Numerasi
Petualangan Perkalian Cepat (1-10)
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Dasar: Petualangan Perkalian Cepat (1-10) โ๏ธ๐</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: #fff1f2;
background-image: radial-gradient(#fecdd3 1.2px, transparent 1.2px);
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: #64748b !important; color: white !important; border-bottom-color: #334155 !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-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="x" 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-900 uppercase tracking-widest">Matematika Dasar - Tabel & Fakta Perkalian 1-10</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-3xl 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 A / B - Matematika Dasar
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Petualangan <span class="text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-pink-600">Perkalian Dasar 1-10</span> โ๏ธ๐
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-rose-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-rose-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-rose-600"></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-rose-600">memahami perkalian sebagai penjumlahan berulang</span> dengan bilangan yang sama.</li>
<li>Peserta didik dapat <span class="text-rose-600">menguasai fakta dasar perkalian 1 sampai 10</span> serta sifat pertukaran (komutatif) untuk berhitung cepat.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menaklukkan tabel perkalian dengan seru? Yuk, kita mulai! ๐</p>
</div>
</div>
<!-- Slide 2: Observasi Konkret Pengelompokan Benda -->
<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: Mengamati Benda yang Berkelompok ๐๏ธโ๐จ๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Perhatikan 3 piring kue yang masing-masing berisi 4 donat lezat!</p>
</div>
<div class="grid md:grid-cols-3 gap-4 mt-4">
<div class="bg-white p-5 rounded-3xl border-2 border-rose-200 shadow-sm text-center space-y-2">
<span class="text-4xl block">๐ฝ๏ธ</span>
<h4 class="font-black text-rose-800 text-lg">Piring 1</h4>
<p class="text-2xl">๐ฉ ๐ฉ ๐ฉ ๐ฉ</p>
<p class="text-xs font-bold text-rose-700 bg-rose-50 p-1.5 rounded-lg">Ada 4 Donat</p>
</div>
<div class="bg-white p-5 rounded-3xl border-2 border-rose-200 shadow-sm text-center space-y-2">
<span class="text-4xl block">๐ฝ๏ธ</span>
<h4 class="font-black text-rose-800 text-lg">Piring 2</h4>
<p class="text-2xl">๐ฉ ๐ฉ ๐ฉ ๐ฉ</p>
<p class="text-xs font-bold text-rose-700 bg-rose-50 p-1.5 rounded-lg">Ada 4 Donat</p>
</div>
<div class="bg-white p-5 rounded-3xl border-2 border-rose-200 shadow-sm text-center space-y-2">
<span class="text-4xl block">๐ฝ๏ธ</span>
<h4 class="font-black text-rose-800 text-lg">Piring 3</h4>
<p class="text-2xl">๐ฉ ๐ฉ ๐ฉ ๐ฉ</p>
<p class="text-xs font-bold text-rose-700 bg-rose-50 p-1.5 rounded-lg">Ada 4 Donat</p>
</div>
</div>
<div class="bg-white p-4 rounded-2xl border-2 border-slate-200 text-center text-slate-700 font-bold space-y-1">
<p>Bentuk penjumlahan berulang: <strong>4 + 4 + 4 = 12</strong></p>
<p class="text-rose-600 font-extrabold text-lg">Ditulis kalimat perkalian: 3 × 4 = 12</p>
<p class="text-xs text-slate-500">(3 piring, masing-masing berisi 4 donat)</p>
</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-900 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">
"Apakah resep dokter 3 × 1 sehari sama artinya dengan 1 × 3 sehari? Bagaimana dengan hasil perkaliannya di matematika?"
</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 Rahasia:</p>
<p class="text-slate-700 font-bold mt-1">Pada resep dokter: 3 × 1 artinya 3 kali minum (pagi, siang, malam masing-masing 1 butir). Namun di matematika, hasilnya <strong>sama-sama bernilai 3</strong> karena perkalian memiliki sifat pertukaran (komutatif)!</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-rose-900 bg-rose-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual ๐๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengapa Kita Harus Mahir Perkalian 1โ10?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐ง</span>
<h4 class="font-black text-xl text-rose-800">Membeli Kemasan Grosir</h4>
<p class="text-slate-600 font-bold text-sm">Membeli 5 kardus susu kotak yang masing-masing kardus berisi 6 kotak susu (5 × 6 = 30 kotak).</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐ช</span>
<h4 class="font-black text-xl text-rose-800">Menghitung Uang Koin</h4>
<p class="text-slate-600 font-bold text-sm">Memiliki 8 keping uang logam Rp500, dapat dihitung cepat dengan 8 × 5 = 40 (Rp4.000).</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐งฑ</span>
<h4 class="font-black text-xl text-rose-800">Menata Keramik & Meja</h4>
<p class="text-slate-600 font-bold text-sm">Menata 4 baris meja dengan 7 meja di setiap baris kelas (4 × 7 = 28 meja).</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Penjumlahan Berulang & Sifat Khusus + Latihan Acak Tak Terhingga -->
<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: Penjumlahan Berulang & Bilangan Istimewa โ</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-rose-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-rose-50 p-5 rounded-2xl border-2 border-rose-200 space-y-2">
<h4 class="font-black text-rose-900 text-lg">Makna: Wadah × Isi</h4>
<div class="bg-white p-3 rounded-xl border border-rose-200 font-mono text-sm text-rose-900 font-bold">
4 × 6 = ...<br>
Artinya: 6 + 6 + 6 + 6<br>
(Ada <strong>4 angka enam</strong> dijumlahkan)<br>
Maka: <strong>4 × 6 = 24</strong>
</div>
</div>
<div class="bg-pink-50 p-5 rounded-2xl border-2 border-pink-200 space-y-2">
<h4 class="font-black text-pink-900 text-lg">Sifat Sakti: Angka 0 dan 1</h4>
<ul class="text-xs font-bold text-slate-700 space-y-2">
<li class="bg-white p-2 rounded-lg border border-pink-200">
๐ <b>Dikalikan 1:</b> Hasilnya tetap bilangan itu sendiri.<br>
<span class="font-mono text-rose-800">7 × 1 = 7 | 1 × 9 = 9</span>
</li>
<li class="bg-white p-2 rounded-lg border border-pink-200">
๐ <b>Dikalikan 0:</b> Hasilnya selalu menjadi 0.<br>
<span class="font-mono text-rose-800">8 × 0 = 0 | 0 × 10 = 0</span>
</li>
</ul>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Konsep Penjumlahan Berulang -->
<div class="bg-rose-50/70 p-6 rounded-3xl border-2 border-rose-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-rose-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Penjumlahan Berulang</h4>
<p class="text-slate-600 font-bold text-xs">Hitung hasil perkalian dasar melalui penjumlahan berulang. Latihlah sepuasmu!</p>
</div>
<div class="bg-rose-200 text-rose-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-1">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-rose-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Berapakah hasil dari:</p>
<div id="uji-1-question" class="text-4xl math-box text-rose-800 font-black mb-4">... × ... = ?</div>
<div id="uji-1-options" class="grid grid-cols-3 gap-3 max-w-md mx-auto"></div>
<div id="uji-1-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-1-next-btn" onclick="generateUji1()" class="hidden mt-4 px-6 py-2.5 bg-rose-600 hover:bg-rose-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Sifat Pertukaran & Trik Cepat + Latihan Acak Tak Terhingga -->
<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-pink-900 bg-pink-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Sifat Komutatif & Trik Cepat โก</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-pink-200 shadow-md mt-2 space-y-5">
<p class="text-base font-bold text-slate-700">Urutan bilangan yang dikalikan boleh dibolak-balik, hasilnya akan selalu tetap sama!</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-pink-50 p-5 rounded-2xl border-2 border-pink-200 space-y-2">
<h4 class="font-black text-pink-900 text-base">Sifat Pertukaran (Komutatif)</h4>
<div class="bg-white p-4 rounded-xl border border-pink-200 font-mono text-sm text-pink-900 font-bold space-y-1">
<p class="text-rose-600">3 × 8 = 24</p>
<p class="text-rose-600">8 × 3 = 24</p>
<p class="text-slate-700 text-xs mt-2">Maka: 3 × 8 = 8 × 3</p>
</div>
<p class="text-slate-600 text-xs font-bold mt-1">Cukup hafal separuh tabel perkalian, kamu sudah menguasai semuanya!</p>
</div>
<div class="bg-rose-50 p-5 rounded-2xl border-2 border-rose-200 space-y-2">
<h4 class="font-black text-rose-900 text-base">Trik Jari & Trik Kelipatan 10</h4>
<ul class="text-xs font-bold text-slate-700 space-y-1.5">
<li>๐ <b>Perkalian 5:</b> Hasil akhirnya selalu berakhiran angka <b>0</b> atau <b>5</b>.</li>
<li>๐ <b>Perkalian 9:</b> Jumlah digit puluhan dan satuannya selalu berjumlah 9 (18 → 1+8=9, 27 → 2+7=9, dst).</li>
<li>๐ <b>Perkalian 10:</b> Cukup tambahkan angka <b>0</b> di belakang bilangannya (7 × 10 = 70).</li>
</ul>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Fakta Perkalian Cepat (1-10) -->
<div class="bg-pink-50/70 p-6 rounded-3xl border-2 border-pink-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-pink-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Tantangan Tabel 1-10</h4>
<p class="text-slate-600 font-bold text-xs">Jawab fakta perkalian secara cepat tanpa melihat tabel!</p>
</div>
<div class="bg-pink-200 text-pink-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-2">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-pink-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Berapakah hasil dari:</p>
<div id="uji-2-question" class="text-4xl math-box text-pink-800 font-black mb-4">... × ... = ?</div>
<div id="uji-2-options" class="grid grid-cols-3 gap-3 max-w-md mx-auto"></div>
<div id="uji-2-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-2-next-btn" onclick="generateUji2()" class="hidden mt-4 px-6 py-2.5 bg-pink-600 hover:bg-pink-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</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-rose-600 to-pink-600 tracking-wide uppercase">โก BATTLE PANEL PERKALIAN CEPAT (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 perkalian 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-rose-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-rose-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-rose-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-rose-50 p-4 rounded-2xl border-2 border-rose-100 text-center">
<p id="ifp-q-1" class="text-2xl 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-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 2</span>
<span id="ifp-score-2" class="bg-pink-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-pink-50 p-4 rounded-2xl border-2 border-pink-100 text-center">
<p id="ifp-q-2" class="text-2xl 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-red-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-red-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-red-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-red-50 p-4 rounded-2xl border-2 border-red-100 text-center">
<p id="ifp-q-3" class="text-2xl 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-rose-400 mb-6 drop-shadow-lg">JUARA PERKALIAN CEPAT!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-rose-600 hover:bg-rose-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9f1239] 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 perkalian dasar ini secara mandiri dengan teliti.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-rose-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-rose-700 bg-rose-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
</div>
<!-- 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 berlatih perkalian 1โ10 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">Sudah Hafal Cepat!</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 Bisa</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">Perlu Latihan Lagi</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">Perkalian angka berapa yang menurutmu paling mudah atau paling seru?</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 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-rose-900 mb-1">Hebat! Kamu Juara Perkalian.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-rose-700 text-5xl bg-rose-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-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-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-rose-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-rose-500">
<option value="100">100% - Paham Semua & Lancar Menghafal</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Masih Perlu Menjumlahkan Pelan-pelan</option>
<option value="25">25% - Masih Banyak Lupa</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 bg-gradient-to-r from-rose-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>
</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, .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;
}
// ==========================================
// GENERATOR SOAL TAK TERHINGGA: UJI CEPAT 1 & 2
// ==========================================
let countUji1 = 0;
let countUji2 = 0;
// Slide 5: Penjumlahan Berulang (Faktor 2 s.d 6)
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let a = Math.floor(Math.random() * 5) + 2; // 2 to 6
let b = Math.floor(Math.random() * 6) + 2; // 2 to 7
let correct = a * b;
document.getElementById('uji-1-question').innerHTML = `${a} × ${b} = ?`;
let options = [correct];
while (options.length < 3) {
let delta = (Math.floor(Math.random() * 3) + 1) * (Math.random() > 0.5 ? 1 : -1) * b; // salah hitung jumlah kelompok
if (delta === 0) delta = 2;
let wrong = correct + delta;
if (wrong > 0 && wrong <= 100 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optsContainer = document.getElementById('uji-1-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-2xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji1(btn, opt === correct, correct, a, b);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correct, a, b) {
const btns = document.getElementById('uji-1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-1-feedback');
fb.classList.remove('hidden');
// Bangun deret penjumlahan berulang
let arr = [];
for (let i = 0; i < a; i++) arr.push(b);
let str = arr.join(" + ");
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> ${a} × ${b} = <b>${correct}</b>.<br><span class="text-xs font-mono text-green-700">(${str} = ${correct})</span>`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (parseInt(b.innerHTML) === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> ${a} × ${b} artinya menjumlahkan angka ${b} sebanyak ${a} kali:<br><span class="text-xs font-mono text-rose-700">(${str} = <b>${correct}</b>)</span>`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Slide 6: Fakta Perkalian Cepat (Tabel 1 - 10)
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
let a = Math.floor(Math.random() * 9) + 2; // 2 to 10
let b = Math.floor(Math.random() * 9) + 2; // 2 to 10
let correct = a * b;
document.getElementById('uji-2-question').innerHTML = `${a} × ${b} = ?`;
let options = [correct];
while (options.length < 3) {
let delta = (Math.floor(Math.random() * 4) + 1) * (Math.random() > 0.5 ? 1 : -1);
if (Math.random() > 0.6) delta = a * (Math.random() > 0.5 ? 1 : -1);
let wrong = correct + delta;
if (wrong > 0 && wrong <= 100 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optsContainer = document.getElementById('uji-2-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-2xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji2(btn, opt === correct, correct, a, b);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correct, a, b) {
const btns = document.getElementById('uji-2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-2-feedback');
fb.classList.remove('hidden');
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> ${a} × ${b} = <b>${correct}</b>. Kecepatan hitungmu mantap!`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (parseInt(b.innerHTML) === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> Jawaban yang tepat: ${a} × ${b} = <b>${correct}</b>. Ingat sifat komutatif: ${b} × ${a} = ${correct}.`;
}
countUji2++;
document.getElementById('count-uji-2').innerText = countUji2;
document.getElementById('uji-2-next-btn').classList.remove('hidden');
}
// Inisialisasi Uji Cepat Awal
generateUji1();
generateUji2();
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "4 × 3 = ...", opts: ["12", "14", "10"], ans: 0 },
{ q: "5 × 6 = ...", opts: ["25", "30", "35"], ans: 1 },
{ q: "7 × 2 = ...", opts: ["12", "14", "16"], ans: 1 },
{ q: "6 × 4 = ...", opts: ["24", "20", "28"], ans: 0 },
{ q: "8 × 5 = ...", opts: ["35", "40", "45"], ans: 1 },
{ q: "7 × 6 = ...", opts: ["42", "48", "36"], ans: 0 },
{ q: "9 × 3 = ...", opts: ["24", "27", "30"], ans: 1 },
{ q: "8 × 7 = ...", opts: ["54", "56", "58"], ans: 1 },
{ q: "9 × 8 = ...", opts: ["72", "74", "64"], ans: 0 },
{ q: "7 × 7 = ...", opts: ["47", "49", "51"], ans: 1 },
{ q: "6 × 8 = ...", opts: ["48", "46", "52"], ans: 0 },
{ q: "9 × 9 = ...", opts: ["81", "89", "79"], ans: 0 }
];
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} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "โ
Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "โ 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 Slide 9
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('Sudah Hafal')) 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 Slide 8
const evaluasiBank = [
{
q: "Bentuk penjumlahan berulang dari <b>4 × 5</b> yang benar adalah...",
options: [
"5 + 5 + 5 + 5",
"4 + 4 + 4 + 4 + 4",
"4 + 5",
"5 × 5 × 5 × 5"
],
a: 0,
exp: "4 × 5 artinya ada 4 kelompok yang masing-masing bernilai 5: <b>5 + 5 + 5 + 5 = 20</b>."
},
{
q: "Hasil dari <b>7 × 8</b> adalah...",
options: ["54", "56", "58", "64"],
a: 1,
exp: "7 × 8 = <b>56</b> (ingat juga 8 × 7 = 56)."
},
{
q: "Ibu membeli 6 bungkus biskuit. Setiap bungkus berisi 8 keping biskuit. Berapa total seluruh biskuit yang dibeli Ibu?",
options: ["42 keping", "46 keping", "48 keping", "54 keping"],
a: 2,
exp: "Total biskuit = 6 bungkus × 8 keping = <b>48 keping biskuit</b>."
},
{
q: "Berapakah hasil dari <b>9 × 0</b>?",
options: ["9", "0", "90", "1"],
a: 1,
exp: "Semua bilangan yang dikalikan dengan angka 0 hasilnya akan selalu bernilai <b>0</b>."
},
{
q: "Berdasarkan sifat pertukaran (komutatif), jika <b>9 × 6 = 54</b>, maka bentuk perkalian yang menghasilkan nilai sama adalah...",
options: ["6 × 9", "9 + 6", "54 × 1", "9 × 9"],
a: 0,
exp: "Sifat komutatif menyatakan posisi bilangan boleh bertukar tempat: 9 × 6 = <b>6 × 9 = 54</b>."
}
];
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-rose-300 shadow-md text-center space-y-4">
<span class="text-6xl">๐</span>
<h3 class="text-3xl font-black text-rose-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal perkalian dasar dengan sangat baik.</p>
<p class="text-slate-500 font-bold">Silakan klik tombol <b>Selanjutnya</b> di bawah untuk mengisi refleksi dan mengirim nilaimu ke Guru.</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-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>KURANG TEPAT.</b><br>${explanation}`;
}
document.getElementById('final-score-display').innerText = evalSkor;
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 2500);
}
loadEvaluasi();
// Kirim Nilai ke LMS / Parent Window
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 Perkalian Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Perkalian: " + refleksi,
strategi: "Evaluasi: Perkalian Dasar (1-10)"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 7
Penguatan Numerasi
Pembagian Dasar
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Dasar: Petualangan Pembagian Adil โ๐ฏ</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: #ecfeff;
background-image: radial-gradient(#a5f3fc 1.2px, transparent 1.2px);
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: #0891b2 !important; color: white !important; border-bottom-color: #0e7490 !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-cyan-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-cyan-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="divide" 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-cyan-900 uppercase tracking-widest">Matematika Dasar - Konsep & Fakta Pembagian</span>
<span id="progress-text" class="text-xs font-black text-white bg-cyan-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-cyan-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 & 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-cyan-100 text-cyan-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase A / B - Matematika Dasar
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Petualangan <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-blue-600">Pembagian Adil</span> โ๐ฏ
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-cyan-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-cyan-600"></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-cyan-600">memahami konsep pembagian sebagai pengurangan berulang</span> sampai bernilai nol.</li>
<li>Peserta didik dapat <span class="text-cyan-600">menghitung pembagian dasar (fakta pembagian bilangan 1โ100)</span> serta memahami hubungannya sebagai kebalikan dari perkalian.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membagi benda dengan rata dan adil? Yuk, kita mulai! ๐</p>
</div>
</div>
<!-- Slide 2: Observasi Konsep Berbagi Adil -->
<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-cyan-900 bg-cyan-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Membagi Benda Sama Rata ๐๏ธโ๐จ๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Perhatikan bagaimana 12 buah apel dibagikan sama rata ke dalam 3 keranjang!</p>
</div>
<div class="grid md:grid-cols-3 gap-4 mt-4">
<div class="bg-white p-5 rounded-3xl border-2 border-cyan-200 shadow-sm text-center space-y-2">
<span class="text-4xl block">๐งบ</span>
<h4 class="font-black text-cyan-800 text-lg">Keranjang 1</h4>
<p class="text-2xl">๐ ๐ ๐ ๐</p>
<p class="text-xs font-bold text-cyan-700 bg-cyan-50 p-1.5 rounded-lg">Mendapat 4 Apel</p>
</div>
<div class="bg-white p-5 rounded-3xl border-2 border-cyan-200 shadow-sm text-center space-y-2">
<span class="text-4xl block">๐งบ</span>
<h4 class="font-black text-cyan-800 text-lg">Keranjang 2</h4>
<p class="text-2xl">๐ ๐ ๐ ๐</p>
<p class="text-xs font-bold text-cyan-700 bg-cyan-50 p-1.5 rounded-lg">Mendapat 4 Apel</p>
</div>
<div class="bg-white p-5 rounded-3xl border-2 border-cyan-200 shadow-sm text-center space-y-2">
<span class="text-4xl block">๐งบ</span>
<h4 class="font-black text-cyan-800 text-lg">Keranjang 3</h4>
<p class="text-2xl">๐ ๐ ๐ ๐</p>
<p class="text-xs font-bold text-cyan-700 bg-cyan-50 p-1.5 rounded-lg">Mendapat 4 Apel</p>
</div>
</div>
<div class="bg-white p-4 rounded-2xl border-2 border-slate-200 text-center text-slate-700 font-bold">
Ditulis kalimat matematikanya: <strong>12 ÷ 3 = 4</strong> (karena masing-masing keranjang tepat berisi 4 apel).
</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-900 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik ๐ค
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika perkalian adalah penjumlahan berulang, apakah pembagian adalah pengurangan berulang? Bagaimana cara cepat menghitungnya jika kita sudah hafal perkalian?"
</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 Rahasia:</p>
<p class="text-slate-700 font-bold mt-1">Pembagian adalah <strong>kebalikan langsung dari perkalian</strong>! Jika kamu tahu $4 \times 5 = 20$, maka otomatis kamu sudah tahu bahwa $20 \div 4 = 5$!</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-cyan-900 bg-cyan-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual ๐๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kapan Saja Kita Menggunakan Pembagian Setiap Hari?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐ฌ</span>
<h4 class="font-black text-xl text-cyan-800">Berbagi Makanan</h4>
<p class="text-slate-600 font-bold text-sm">Membagi 24 bungkus biskuit secara rata kepada 6 orang teman saat piknik.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐ฅ</span>
<h4 class="font-black text-xl text-cyan-800">Membentuk Kelompok Belajar</h4>
<p class="text-slate-600 font-bold text-sm">Guru membagi 32 siswa kelas menjadi 8 kelompok diskusi yang beranggotakan sama banyak.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐ต</span>
<h4 class="font-black text-xl text-cyan-800">Menabung Harian</h4>
<p class="text-slate-600 font-bold text-sm">Ingin mengumpulkan uang saku Rp50.000 selama 5 hari, berarti menyisihkan Rp10.000 per hari.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Pembagian sebagai Pengurangan Berulang + Latihan Acak Tak Terhingga -->
<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-cyan-900 bg-cyan-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Pengurangan Berulang โ</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-cyan-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-cyan-50 p-5 rounded-2xl border-2 border-cyan-200 space-y-2">
<h4 class="font-black text-cyan-900 text-lg">Konsep: Kurangi Terus Sampai 0!</h4>
<p class="text-slate-700 font-bold text-sm">Berapa kali kita bisa mengurangi bilangan tersebut dengan pembaginya?</p>
<div class="bg-white p-3 rounded-xl border border-cyan-200 font-mono text-sm text-cyan-900 font-bold">
15 ÷ 5 = ...<br>
15 - 5 - 5 - 5 = 0<br>
(Ada <strong>3 kali</strong> pengurangan angka 5)<br>
Maka: <strong>15 ÷ 5 = 3</strong>
</div>
</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">Sifat Spesial Bilangan</h4>
<ul class="text-xs font-bold text-slate-700 space-y-2">
<li class="bg-white p-2 rounded-lg border border-blue-200">
๐ <b>Dibagi 1:</b> Hasilnya bilangan itu sendiri.<br>
<span class="font-mono text-blue-800">8 ÷ 1 = 8</span>
</li>
<li class="bg-white p-2 rounded-lg border border-blue-200">
๐ <b>Dibagi bilangan yang sama:</b> Hasilnya selalu 1.<br>
<span class="font-mono text-blue-800">8 ÷ 8 = 1</span>
</li>
<li class="bg-white p-2 rounded-lg border border-blue-200">
๐ <b>Nol dibagi bilangan:</b> Hasilnya selalu 0.<br>
<span class="font-mono text-blue-800">0 ÷ 5 = 0</span>
</li>
</ul>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Pengurangan Berulang -->
<div class="bg-cyan-50/70 p-6 rounded-3xl border-2 border-cyan-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-cyan-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Pengurangan Berulang</h4>
<p class="text-slate-600 font-bold text-xs">Hitung berapa kali pengurangan dilakukan sampai bernilai nol. Latihlah sepuasmu!</p>
</div>
<div class="bg-cyan-200 text-cyan-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-1">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-cyan-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Berapakah hasil dari:</p>
<div id="uji-1-question" class="text-4xl math-box text-cyan-800 font-black mb-4">... ÷ ... = ?</div>
<div id="uji-1-options" class="grid grid-cols-3 gap-3 max-w-md mx-auto"></div>
<div id="uji-1-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-1-next-btn" onclick="generateUji1()" class="hidden mt-4 px-6 py-2.5 bg-cyan-600 hover:bg-cyan-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Hubungan Perkalian & Pembagian + Latihan Acak Tak Terhingga -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Hubungan Perkalian & Pembagian ๐</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-md mt-2 space-y-5">
<p class="text-base font-bold text-slate-700">Jika kita menguasai tabel perkalian, kita bisa menyelesaikan pembagian secepat kilat tanpa perlu mengurangi satu per satu!</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-base">Keluarga Segitiga Operasi (Fact Family)</h4>
<div class="bg-white p-4 rounded-xl border border-teal-200 font-mono text-sm text-teal-900 font-bold space-y-1">
<p class="text-amber-600">6 × 7 = 42</p>
<p class="text-teal-700">42 ÷ 6 = 7</p>
<p class="text-teal-700">42 ÷ 7 = 6</p>
</div>
<p class="text-slate-600 text-xs font-bold mt-1">Satu pasangan perkalian menghasilkan dua fakta pembagian!</p>
</div>
<div class="bg-cyan-50 p-5 rounded-2xl border-2 border-cyan-200 space-y-2">
<h4 class="font-black text-cyan-900 text-base">Trik Menjawab Cepat</h4>
<p class="text-xs font-bold text-slate-700 leading-relaxed">
Jika ditanya <b>56 ÷ 8 = ...?</b><br>
Cukup tanyakan pada dirimu: <em>"8 dikali berapa yang hasilnya 56?"</em><br>
Jawabannya adalah <strong>7</strong>!
</p>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Fakta Pembagian Cepat -->
<div class="bg-teal-50/70 p-6 rounded-3xl border-2 border-teal-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-teal-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Hubungan Perkalian & Pembagian</h4>
<p class="text-slate-600 font-bold text-xs">Temukan angka yang tepat menggunakan fakta perkalian yang sudah kamu kuasai!</p>
</div>
<div class="bg-teal-200 text-teal-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-2">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-teal-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Berapakah hasil dari:</p>
<div id="uji-2-question" class="text-4xl math-box text-teal-800 font-black mb-4">... ÷ ... = ?</div>
<div id="uji-2-options" class="grid grid-cols-3 gap-3 max-w-md mx-auto"></div>
<div id="uji-2-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-2-next-btn" onclick="generateUji2()" class="hidden mt-4 px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</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-cyan-600 to-blue-600 tracking-wide uppercase">โก BATTLE PANEL PEMBAGIAN CEPAT (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 pembagian 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-cyan-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-cyan-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-cyan-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-cyan-50 p-4 rounded-2xl border-2 border-cyan-100 text-center">
<p id="ifp-q-1" class="text-2xl 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-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>๐ KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-100 text-center">
<p id="ifp-q-2" class="text-2xl 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-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 3</span>
<span id="ifp-score-3" class="bg-blue-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-blue-50 p-4 rounded-2xl border-2 border-blue-100 text-center">
<p id="ifp-q-3" class="text-2xl 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-cyan-400 mb-6 drop-shadow-lg">JUARA PEMBAGIAN CEPAT!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-cyan-600 hover:bg-cyan-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#0e7490] 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 pembagian mandiri ini dengan cermat.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-cyan-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-cyan-700 bg-cyan-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 konsep pembagian 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">Mudah & Adil!</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">Perlu Menghafal Perkalian</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 menyenangkan hari ini?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-cyan-50 border-2 border-cyan-200 focus:border-cyan-500 outline-none font-medium" rows="3" placeholder="Tuliskan 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-cyan-900 mb-1">Hebat! Kamu Menguasai Pembagian.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-cyan-700 text-5xl bg-cyan-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-cyan-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-cyan-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-cyan-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-cyan-500">
<option value="100">100% - Paham Semua & Lancar</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Masih Perlu Bantuan Mengingat Perkalian</option>
<option value="25">25% - Masih Bingung Pengurangan Berulang</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 bg-gradient-to-r from-cyan-600 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-cyan-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-cyan-700 shadow-[0_4px_0px_#0e7490]">
<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); });
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;
}
// ==========================================
// GENERATOR SOAL TAK TERHINGGA: UJI CEPAT 1 & 2
// ==========================================
let countUji1 = 0;
let countUji2 = 0;
// Slide 5: Konsep Pengurangan Berulang (Bilangan kecil s.d 30)
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let pembagi = Math.floor(Math.random() * 5) + 2; // 2, 3, 4, 5, 6
let hasil = Math.floor(Math.random() * 5) + 2; // 2, 3, 4, 5, 6
let total = pembagi * hasil;
document.getElementById('uji-1-question').innerHTML = `${total} ÷ ${pembagi} = ?`;
let options = [hasil];
while (options.length < 3) {
let delta = (Math.floor(Math.random() * 3) + 1) * (Math.random() > 0.5 ? 1 : -1);
let wrong = hasil + delta;
if (wrong > 0 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optsContainer = document.getElementById('uji-1-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-2xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji1(btn, opt === hasil, hasil, total, pembagi);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correct, total, pembagi) {
const btns = document.getElementById('uji-1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-1-feedback');
fb.classList.remove('hidden');
// Bangun string pengurangan berulang
let steps = [];
let temp = total;
for (let i = 0; i < correct; i++) {
steps.push(pembagi);
}
let stepStr = `${total} - ` + steps.join(" - ") + " = 0";
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> ${total} ÷ ${pembagi} = <b>${correct}</b>.<br><span class="text-xs font-mono text-green-700">(${stepStr})</span>`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (parseInt(b.innerHTML) === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> Ada <b>${correct} kali</b> pengurangan angka ${pembagi}:<br><span class="text-xs font-mono text-rose-700">(${stepStr})</span>`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Slide 6: Fakta Pembagian Cepat (Bilangan 1 - 100)
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
let faktor1 = Math.floor(Math.random() * 8) + 3; // 3 to 10
let faktor2 = Math.floor(Math.random() * 8) + 2; // 2 to 9
let total = faktor1 * faktor2;
document.getElementById('uji-2-question').innerHTML = `${total} ÷ ${faktor1} = ?`;
let options = [faktor2];
while (options.length < 3) {
let delta = (Math.floor(Math.random() * 3) + 1) * (Math.random() > 0.5 ? 1 : -1);
let wrong = faktor2 + delta;
if (wrong > 0 && wrong <= 10 && !options.includes(wrong)) {
options.push(wrong);
}
}
options = shuffle(options);
let optsContainer = document.getElementById('uji-2-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-2xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji2(btn, opt === faktor2, faktor2, total, faktor1);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correct, total, pembagi) {
const btns = document.getElementById('uji-2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-2-feedback');
fb.classList.remove('hidden');
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> Karena ${pembagi} × <b>${correct}</b> = ${total}, maka ${total} ÷ ${pembagi} = <b>${correct}</b>.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (parseInt(b.innerHTML) === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> Ingat perkaliannya: ${pembagi} × <b>${correct}</b> = ${total}. Jawaban yang tepat: <b>${correct}</b>.`;
}
countUji2++;
document.getElementById('count-uji-2').innerText = countUji2;
document.getElementById('uji-2-next-btn').classList.remove('hidden');
}
// Inisialisasi Uji Cepat Awal
generateUji1();
generateUji2();
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "16 ÷ 4 = ...", opts: ["4", "3", "5"], ans: 0 },
{ q: "25 ÷ 5 = ...", opts: ["4", "5", "6"], ans: 1 },
{ q: "18 ÷ 3 = ...", opts: ["6", "7", "5"], ans: 0 },
{ q: "24 ÷ 6 = ...", opts: ["3", "4", "5"], ans: 1 },
{ q: "35 ÷ 7 = ...", opts: ["5", "6", "7"], ans: 0 },
{ q: "36 ÷ 4 = ...", opts: ["8", "9", "7"], ans: 1 },
{ q: "40 ÷ 8 = ...", opts: ["4", "5", "6"], ans: 1 },
{ q: "42 ÷ 6 = ...", opts: ["6", "7", "8"], ans: 1 },
{ q: "49 ÷ 7 = ...", opts: ["7", "6", "8"], ans: 0 },
{ q: "54 ÷ 9 = ...", opts: ["5", "6", "7"], ans: 1 },
{ q: "63 ÷ 7 = ...", opts: ["8", "9", "7"], ans: 1 },
{ q: "72 ÷ 8 = ...", opts: ["9", "8", "7"], ans: 0 }
];
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} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "โ
Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "โ 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 Slide 9
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('Mudah')) 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 Slide 8
const evaluasiBank = [
{
q: "Bentuk pengurangan berulang dari <b>18 ÷ 6</b> yang tepat adalah...",
options: [
"18 - 6 - 6 - 6 = 0",
"18 - 3 - 3 - 3 - 3 - 3 - 3 = 0",
"18 - 6 = 12",
"18 - 9 - 9 = 0"
],
a: 0,
exp: "18 ÷ 6 artinya 18 dikurangi angka 6 secara berulang hingga bernilai 0: <b>18 - 6 - 6 - 6 = 0</b> (terjadi 3 kali pengurangan)."
},
{
q: "Hasil dari <b>48 ÷ 8</b> adalah...",
options: ["5", "6", "7", "8"],
a: 1,
exp: "Gunakan kebalikan perkalian: 8 × <b>6</b> = 48. Jadi, 48 ÷ 8 = <b>6</b>."
},
{
q: "Pak Guru memiliki 35 pensil yang akan dibagikan kepada 7 orang siswa sama banyak. Berapa pensil yang didapat masing-masing siswa?",
options: ["4 buah", "5 buah", "6 buah", "7 buah"],
a: 1,
exp: "Kalimat matematika: 35 ÷ 7 = <b>5 buah pensil</b>."
},
{
q: "Berapakah hasil dari <b>0 ÷ 9</b>?",
options: ["0", "9", "1", "Tidak dapat dihitung"],
a: 0,
exp: "Nol benda yang dibagi kepada berapapun orang akan menghasilkan <b>0</b>."
},
{
q: "Jika <b>9 × 8 = 72</b>, maka nilai dari <b>72 ÷ 9</b> adalah...",
options: ["7", "8", "9", "81"],
a: 1,
exp: "Karena perkalian adalah kebalikan pembagian, jika 9 × 8 = 72 maka 72 ÷ 9 = <b>8</b>."
}
];
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-cyan-300 shadow-md text-center space-y-4">
<span class="text-6xl">๐</span>
<h3 class="text-3xl font-black text-cyan-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal pembagian dasar dengan baik.</p>
<p class="text-slate-500 font-bold">Silakan klik tombol <b>Selanjutnya</b> di bawah untuk mengisi refleksi dan mengirim nilaimu ke Guru.</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-cyan-50 hover:border-cyan-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();
// Kirim Nilai ke LMS / Parent Window
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 Pembagian Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Pembagian: " + refleksi,
strategi: "Evaluasi: Pembagian Dasar"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 7
Penguatan Numerasi
Mengenal nilai besaran Pecahan / Desimal
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika: Menjelajah Pecahan & Desimal ๐๐ข</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 1.2px, transparent 1.2px);
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="pie-chart" 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-900 uppercase tracking-widest">Matematika - Nilai Besaran Pecahan & Desimal</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-violet-400 via-purple-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-purple-100 text-purple-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase B / C - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Mengenal Nilai <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600">Pecahan & Desimal</span> ๐๐ข
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-purple-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-purple-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-purple-600"></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-purple-600">mengidentifikasi dan membandingkan nilai besaran pecahan biasa</span> berdasarkan bagian dari keseluruhan.</li>
<li>Peserta didik dapat <span class="text-purple-600">mengubah bentuk pecahan ke bentuk desimal persepuluhan dan perseratusan</span> serta sebaliknya.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membagi dan membaca bilangan desimal? Yuk, kita mulai! ๐</p>
</div>
</div>
<!-- Slide 2: Observasi Konkret Pizza & Cokelat -->
<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: Membagi Benda Secara Adil ๐๏ธโ๐จ๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pecahan muncul saat satu benda utuh dipotong menjadi beberapa bagian sama besar!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-sm space-y-3 text-center">
<!-- SVG Pizza 4 Potong -->
<svg viewBox="0 0 160 160" class="w-32 h-32 mx-auto">
<circle cx="80" cy="80" r="70" fill="#fcd34d" stroke="#f59e0b" stroke-width="4"/>
<!-- 1 potong warna oranye terarsir -->
<path d="M 80 80 L 150 80 A 70 70 0 0 1 80 150 Z" fill="#f97316" stroke="#ea580c" stroke-width="2"/>
<line x1="80" y1="10" x2="80" y2="150" stroke="#b45309" stroke-width="2"/>
<line x1="10" y1="80" x2="150" y2="80" stroke="#b45309" stroke-width="2"/>
</svg>
<h4 class="font-black text-xl text-purple-800">1 Potong dari 4 Bagian Pizza</h4>
<p class="text-slate-600 font-bold text-sm">Ditulis sebagai pecahan <strong>¼</strong> (satu per empat).</p>
<div class="p-2 bg-purple-50 rounded-xl text-purple-900 font-bold text-xs">
1 = Pembilang (bagian yang diambil) | 4 = Penyebut (total potongan sama besar)
</div>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm space-y-3 text-center">
<!-- Batang Desimal 10 Kotak -->
<div class="max-w-xs mx-auto grid grid-cols-10 gap-1 my-6 bg-slate-100 p-2 rounded-xl border border-slate-300">
<div class="h-10 bg-indigo-600 rounded"></div>
<div class="h-10 bg-indigo-600 rounded"></div>
<div class="h-10 bg-indigo-600 rounded"></div>
<div class="h-10 bg-slate-300 rounded"></div>
<div class="h-10 bg-slate-300 rounded"></div>
<div class="h-10 bg-slate-300 rounded"></div>
<div class="h-10 bg-slate-300 rounded"></div>
<div class="h-10 bg-slate-300 rounded"></div>
<div class="h-10 bg-slate-300 rounded"></div>
<div class="h-10 bg-slate-300 rounded"></div>
</div>
<h4 class="font-black text-xl text-indigo-800">3 Bagian dari 10 Petak</h4>
<p class="text-slate-600 font-bold text-sm">Ditulis pecahan <strong>3/10</strong> atau dalam desimal <strong>0,3</strong>.</p>
<div class="p-2 bg-indigo-50 rounded-xl text-indigo-900 font-bold text-xs">
Tanda koma (,) memisahkan angka satuan utuh dengan bagian pecahannya!
</div>
</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-900 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik ๐ค
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kamu diberi pilihan potongan kue, mana yang lebih besar: kue berukuran ½ bagian atau kue berukuran ¼ bagian? Mengapa penyebut yang lebih besar justru menghasilkan potongan yang lebih kecil?"
</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 Rahasia:</p>
<p class="text-slate-700 font-bold mt-1">Semakin banyak orang yang diajak berbagi (penyebut makin besar), maka bagian kue yang diperoleh tiap orang justru akan semakin <strong>kecil</strong>!</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-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual ๐๏ธ</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Penerapan Pecahan & Desimal di Kehidupan Sehari-hari</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">๐ง</span>
<h4 class="font-black text-xl text-purple-800">Resep Membuat Kue</h4>
<p class="text-slate-600 font-bold text-sm">Mengukur bahan dapur: ½ kg tepung terigu, ¼ sendok teh garam, dan 0,25 liter susu cair.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">โ๏ธ</span>
<h4 class="font-black text-xl text-purple-800">Timbangan Digital</h4>
<p class="text-slate-600 font-bold text-sm">Menimbang buah di supermarket: berat semangka tertera 2,75 kg (artinya 2 kg lebih ¾ kg).</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">โฝ</span>
<h4 class="font-black text-xl text-purple-800">Pengisian Bahan Bakar</h4>
<p class="text-slate-600 font-bold text-sm">Melihat jarum bensin mobil: ½ tangki terisi, atau melihat meteran pompa digital terisi 15,4 liter.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Membandingkan Nilai Pecahan + Latihan Acak Tak Terhingga -->
<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 1: Membandingkan Nilai Pecahan โ๏ธ</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-purple-50 p-5 rounded-2xl border-2 border-purple-200 space-y-2">
<h4 class="font-black text-purple-900 text-lg">1. Penyebut Sama</h4>
<p class="text-slate-700 font-bold text-sm">Jika penyebutnya sama, cukup lihat <b>pembilang</b> yang lebih besar:</p>
<div class="bg-white p-3 rounded-xl border border-purple-200 text-center font-bold text-purple-800 text-base">
¾ > ¼ <span class="text-slate-500 text-xs block mt-1">(3 potong lebih banyak dibanding 1 potong)</span>
</div>
</div>
<div class="bg-indigo-50 p-5 rounded-2xl border-2 border-indigo-200 space-y-2">
<h4 class="font-black text-indigo-900 text-lg">2. Pembilang Sama</h4>
<p class="text-slate-700 font-bold text-sm">Jika pembilangnya sama, pecahan dengan <b>penyebut lebih kecil bernilai lebih besar</b>:</p>
<div class="bg-white p-3 rounded-xl border border-indigo-200 text-center font-bold text-indigo-800 text-base">
½ > ¼ <span class="text-slate-500 text-xs block mt-1">(Dibagi 2 menghasilkan bagian lebih besar daripada dibagi 4)</span>
</div>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Membandingkan Pecahan -->
<div class="bg-purple-50/70 p-6 rounded-3xl border-2 border-purple-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-purple-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Bandingkan Nilai Pecahan</h4>
<p class="text-slate-600 font-bold text-xs">Pilihlah tanda pertidaksamaan yang tepat (>, <, atau =). Latihlah sepuasmu!</p>
</div>
<div class="bg-purple-200 text-purple-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-1">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-purple-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Manakah tanda yang benar untuk mengisi titik-titik?</p>
<div id="uji-1-question" class="text-4xl math-box text-purple-800 font-black mb-4">... ? ...</div>
<div id="uji-1-options" class="grid grid-cols-3 gap-3 max-w-xs mx-auto"></div>
<div id="uji-1-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-1-next-btn" onclick="generateUji1()" class="hidden mt-4 px-6 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Konversi Pecahan ke Desimal + Latihan Acak Tak Terhingga -->
<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: Menghubungkan Pecahan & Desimal ๐</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md mt-2 space-y-5">
<p class="text-base font-bold text-slate-700">Pecahan desimal adalah pecahan yang penyebutnya merupakan kelipatan 10 (seperti 10, 100, 1000):</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-indigo-50 p-5 rounded-2xl border-2 border-indigo-200 space-y-2">
<h4 class="font-black text-indigo-900 text-base">Pecahan Persepuluhan (/10)</h4>
<p class="text-xs font-bold text-slate-600">Satu angka di belakang koma:</p>
<ul class="text-xs font-mono font-bold text-indigo-900 space-y-1 bg-white p-3 rounded-xl border border-indigo-200">
<li>1/10 = 0,1</li>
<li>5/10 = 1/2 = 0,5</li>
<li>7/10 = 0,7</li>
</ul>
</div>
<div class="bg-purple-50 p-5 rounded-2xl border-2 border-purple-200 space-y-2">
<h4 class="font-black text-purple-900 text-base">Pecahan Perseratusan (/100)</h4>
<p class="text-xs font-bold text-slate-600">Dua angka di belakang koma:</p>
<ul class="text-xs font-mono font-bold text-purple-900 space-y-1 bg-white p-3 rounded-xl border border-purple-200">
<li>1/4 = 25/100 = 0,25</li>
<li>3/4 = 75/100 = 0,75</li>
<li>1/5 = 20/100 = 0,2</li>
</ul>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Konversi Pecahan ke Desimal -->
<div class="bg-indigo-50/70 p-6 rounded-3xl border-2 border-indigo-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-indigo-950 text-lg flex items-center gap-2">๐ฎ Uji Cepat Mandiri: Pecahan ke Desimal</h4>
<p class="text-slate-600 font-bold text-xs">Ubah nilai pecahan menjadi bentuk desimal yang setara!</p>
</div>
<div class="bg-indigo-200 text-indigo-900 px-3 py-1 rounded-full text-xs font-black shadow-sm">
๐ฅ Terjawab: <span id="count-uji-2">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-indigo-200 text-center">
<p class="text-sm font-bold text-slate-500 mb-1">Berapakah bentuk desimal dari:</p>
<div id="uji-2-question" class="text-4xl math-box text-indigo-800 font-black mb-4">... = ?</div>
<div id="uji-2-options" class="grid grid-cols-3 gap-3 max-w-md mx-auto"></div>
<div id="uji-2-feedback" class="hidden mt-4 p-3 rounded-xl text-sm font-bold border-l-4 pop-in text-left"></div>
<button id="uji-2-next-btn" onclick="generateUji2()" class="hidden mt-4 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-xl text-sm transition">
๐ Soal Baru Berikutnya
</button>
</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-purple-600 to-indigo-600 tracking-wide uppercase">โก BATTLE PANEL PECAHAN & DESIMAL (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-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">Soal 1/5</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 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>
</div>
<!-- KELOMPOK 2 -->
<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-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-indigo-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-100 text-center">
<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>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-fuchsia-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-fuchsia-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-fuchsia-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-fuchsia-50 p-4 rounded-2xl border-2 border-fuchsia-100 text-center">
<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>
</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-400 mb-6 drop-shadow-lg">JUARA 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_#5b21b6] 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 pecahan dan desimal di bawah ini secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-purple-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-purple-700 bg-purple-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
</div>
<!-- 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 Pecahan & Desimal 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-purple-50 border-2 border-purple-200 focus:border-purple-500 outline-none font-medium" rows="3" placeholder="Tuliskan 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-purple-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-purple-700 text-5xl bg-purple-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-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-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-purple-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-purple-500">
<option value="100">100% - Paham Semua & Lancar</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Perlu Bantuan Konversi Desimal</option>
<option value="25">25% - Masih Banyak Bingungnya</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 bg-gradient-to-r from-purple-600 to-indigo-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-purple-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-purple-700 shadow-[0_4px_0px_#5b21b6]">
<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); });
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;
}
// ==========================================
// GENERATOR SOAL TAK TERHINGGA: UJI CEPAT 1 & 2
// ==========================================
let countUji1 = 0;
let countUji2 = 0;
// Slide 5: Bandingkan Nilai Pecahan
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let mode = Math.random() > 0.5 ? 'same_den' : 'same_num';
let a1, b1, a2, b2;
if (mode === 'same_den') {
// Penyebut sama
b1 = b2 = [3, 4, 5, 6, 8, 10][Math.floor(Math.random() * 6)];
a1 = Math.floor(Math.random() * (b1 - 1)) + 1;
a2 = Math.floor(Math.random() * (b2 - 1)) + 1;
} else {
// Pembilang sama
a1 = a2 = Math.floor(Math.random() * 3) + 1; // 1 to 3
b1 = Math.floor(Math.random() * 6) + a1 + 1;
b2 = Math.floor(Math.random() * 6) + a1 + 1;
}
let val1 = a1 / b1;
let val2 = a2 / b2;
let correct = val1 > val2 ? '>' : val1 < val2 ? '<' : '=';
document.getElementById('uji-1-question').innerHTML = `
<span class="inline-flex items-center gap-4 text-3xl font-black">
<span>${a1}/${b1}</span>
<span class="text-amber-500 font-bold bg-amber-100 px-3 py-1 rounded-xl">[ ? ]</span>
<span>${a2}/${b2}</span>
</span>
`;
let opts = ['>', '<', '='];
let optsContainer = document.getElementById('uji-1-options');
optsContainer.innerHTML = "";
opts.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-2xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji1(btn, opt === correct, correct, `${a1}/${b1}`, `${a2}/${b2}`);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correct, f1, f2) {
const btns = document.getElementById('uji-1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-1-feedback');
fb.classList.remove('hidden');
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> Nilai ${f1} <b>${correct}</b> ${f2}. Analisismu tepat!`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> Tanda yang benar adalah <b>${f1} ${correct} ${f2}</b>.`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Slide 6: Konversi Pecahan ke Desimal
const pairsBank = [
{ f: "1/2", d: "0,5" },
{ f: "1/4", d: "0,25" },
{ f: "3/4", d: "0,75" },
{ f: "1/5", d: "0,2" },
{ f: "2/5", d: "0,4" },
{ f: "3/5", d: "0,6" },
{ f: "4/5", d: "0,8" },
{ f: "1/10", d: "0,1" },
{ f: "3/10", d: "0,3" },
{ f: "7/10", d: "0,7" },
{ f: "9/10", d: "0,9" }
];
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
let chosen = pairsBank[Math.floor(Math.random() * pairsBank.length)];
document.getElementById('uji-2-question').innerHTML = `${chosen.f} = ... ?`;
let options = [chosen.d];
while (options.length < 3) {
let randD = pairsBank[Math.floor(Math.random() * pairsBank.length)].d;
if (!options.includes(randD)) {
options.push(randD);
}
}
options = shuffle(options);
let optsContainer = document.getElementById('uji-2-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xl border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji2(btn, opt === chosen.d, chosen.d, chosen.f);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correct, frac) {
const btns = document.getElementById('uji-2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('uji-2-feedback');
fb.classList.remove('hidden');
if (isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-4 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 = `๐ <b>BENAR!</b> Bentuk desimal dari ${frac} adalah <b>${correct}</b>.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correct) b.classList.add('btn-correct');
});
fb.className = "mt-4 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 = `โ <b>KURANG TEPAT.</b> Nilai desimal dari ${frac} adalah <b>${correct}</b>.`;
}
countUji2++;
document.getElementById('count-uji-2').innerText = countUji2;
document.getElementById('uji-2-next-btn').classList.remove('hidden');
}
// Inisialisasi Uji Cepat awal
generateUji1();
generateUji2();
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Pecahan 1/2 jika diubah ke desimal adalah...", opts: ["0,2", "0,5", "0,25"], ans: 1 },
{ q: "Antara 1/4 dan 1/2, manakah yang lebih besar?", opts: ["1/4", "1/2", "Sama besar"], ans: 1 },
{ q: "Bentuk pecahan biasa dari 0,75 adalah...", opts: ["1/2", "3/4", "7/5"], ans: 1 },
{ q: "Pecahan 3/10 bernilai sama dengan desimal...", opts: ["0,03", "0,3", "3,0"], ans: 1 },
{ q: "Antara 2/5 dan 4/5, manakah yang lebih kecil?", opts: ["2/5", "4/5", "Sama"], ans: 0 },
{ q: "Bentuk desimal dari 1/4 adalah...", opts: ["0,4", "0,25", "0,14"], ans: 1 },
{ q: "Angka 1 pada pecahan 1/8 berkedudukan sebagai...", opts: ["Pembilang", "Penyebut", "Sisa"], ans: 0 },
{ q: "0,5 + 0,5 jika dijumlahkan bernilai...", opts: ["1,0", "0,10", "0,25"], ans: 0 },
{ q: "Pecahan 4/10 disederhanakan menjadi...", opts: ["1/2", "2/5", "1/5"], 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} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "โ
Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "โ 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 Slide 9
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 Slide 8
const evaluasiBank = [
{
q: "Manakah tanda pertidaksamaan yang tepat untuk membandingkan <b>¼ ... ½</b>?",
options: [">", "<", "=", "≥"],
a: 1,
exp: "Karena pembilangnya sama-sama 1, pecahan dengan penyebut lebih kecil (½) bernilai lebih besar. Jadi, <b>¼ < ½</b>."
},
{
q: "Bentuk desimal dari pecahan <b>¾</b> adalah...",
options: ["0,34", "0,43", "0,75", "0,70"],
a: 2,
exp: "¾ = (3 × 25) / (4 × 25) = 75/100 = <b>0,75</b>."
},
{
q: "Ibu membagi semangka utuh menjadi 8 potong sama besar. Andi memakan 3 potong. Berapa bagian semangka yang dimakan Andi?",
options: ["3/8 bagian", "8/3 bagian", "5/8 bagian", "3/5 bagian"],
a: 0,
exp: "Bagian yang diambil = 3 potong (pembilang), total potongan = 8 (penyebut). Maka pecahannya adalah <b>3/8 bagian</b>."
},
{
q: "Bentuk pecahan paling sederhana dari bilangan desimal <b>0,6</b> adalah...",
options: ["6/10", "3/5", "1/6", "2/3"],
a: 1,
exp: "0,6 = 6/10. Dibagi 2 pada pembilang dan penyebut menjadi <b>3/5</b>."
},
{
q: "Urutan pecahan berikut dari yang <b>paling kecil ke paling besar</b>: ½ ; 0,25 ; 0,8 adalah...",
options: ["0,25 ; ½ ; 0,8", "½ ; 0,25 ; 0,8", "0,8 ; ½ ; 0,25", "0,25 ; 0,8 ; ½"],
a: 0,
exp: "Ubah semua ke bentuk desimal: 0,25 < 0,5 (½) < 0,8. Maka urutannya adalah <b>0,25 ; ½ ; 0,8</b>."
}
];
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-purple-300 shadow-md text-center space-y-4">
<span class="text-6xl">๐</span>
<h3 class="text-3xl font-black text-purple-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal pecahan & desimal dengan baik.</p>
<p class="text-slate-500 font-bold">Silakan klik tombol <b>Selanjutnya</b> di bawah untuk mengisi refleksi dan mengirim nilaimu ke Guru.</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-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>KURANG TEPAT.</b><br>${explanation}`;
}
document.getElementById('final-score-display').innerText = evalSkor;
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 2500);
}
loadEvaluasi();
// Kirim Nilai ke LMS / Parent Window
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 Pecahan & Desimal Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Pecahan Desimal: " + refleksi,
strategi: "Evaluasi: Mengenal Nilai Besaran Pecahan / Desimal"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 7
Penguatan Numerasi
penjumlahan 1-100
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Dasar: Petualangan Penjumlahan (1-100) โ</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: #fffbeb;
background-image: radial-gradient(#fde68a 1.2px, transparent 1.2px);
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:
๐ Papan Nilai & Aktivitas Kelas
Nilai ganda per siswa otomatis diambil skor tertinggi| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Irham Soulisa | Petualangan Perkalian Cepat (1-10) Penguatan Numerasi โ Kelas 7 | 80 | 100% | Refleksi Perkalian: 1 | Evaluasi: Perkalian Dasar (1-10) |
| ismail assel | Petualangan Perkalian Cepat (1-10) Penguatan Numerasi โ Kelas 7 | 80 | 100% | Refleksi Perkalian: Misi Perkalian Selesai! | Evaluasi: Perkalian Dasar (1-10) |
| fikram bahtiar | penjumlahan 1-100 Penguatan Numerasi โ Kelas 7 | 20 | 100% | Refleksi Penjumlahan: Misi Penjumlahan Selesai! | Evaluasi: Penjumlahan Bilangan (1-100) |