Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 7
Penguatan Literasi Dasar
Menemukan Fakta Eksplisit
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia: Menemukan Fakta Eksplisit 🔍📋</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: #f7fee7;
background-image: radial-gradient(#d9f99d 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: #65a30d !important; color: white !important; border-bottom-color: #4d7c0f !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-family: 'Nunito', sans-serif; line-height: 1.6; }
.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-lime-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-lime-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="check-check" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-lime-950 uppercase tracking-widest">Literasi Membaca - Menemukan Fakta Eksplisit</span>
<span id="progress-text" class="text-xs font-black text-white bg-lime-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-lime-400 via-emerald-500 to-teal-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-lime-100 text-lime-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase B / D - Literasi Membaca Kritis
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Detektif Fakta: <span class="text-transparent bg-clip-text bg-gradient-to-r from-lime-600 to-emerald-600">Menemukan Fakta Eksplisit</span> 🔍📋
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-lime-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-lime-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-lime-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-lime-700">menjelaskan pengertian fakta eksplisit</span> sebagai informasi faktual yang tertulis harfiah, gamblang, dan pasti di dalam teks.</li>
<li>Peserta didik dapat <span class="text-lime-700">menemukan bukti fakta eksplisit</span> berupa angka data, waktu, tempat, dan nama subjek tanpa tercampur oleh opini atau asumsi.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap memburu data nyata dan bukti tertulis? Yuk, kita mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Fakta Nyata vs Opini -->
<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-lime-900 bg-lime-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Membedakan Data Nyata vs Pendapat 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Fakta eksplisit adalah hal yang sudah pasti terjadi dan buktinya tertulis jelas di lembar bacaan!</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-lime-200 shadow-sm space-y-4 mt-2">
<div class="bg-lime-50/80 p-4 rounded-2xl border border-lime-200 text-slate-800 text-sm leading-relaxed text-box">
<p class="font-bold">
"Monumen Nasional (Monas) memiliki tinggi <span class="bg-lime-200 text-lime-900 px-2 py-0.5 rounded font-black">132 meter</span>. Bangunan ini diresmikan untuk umum pada tanggal <span class="bg-lime-200 text-lime-900 px-2 py-0.5 rounded font-black">12 Juli 1975</span> oleh Presiden Soeharto. Menurut sebagian wisatawan, Monas adalah tugu paling megah di Asia Tenggara."
</p>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-1">
<span class="text-xs font-black uppercase text-emerald-800 tracking-wider">Fakta Eksplisit (Data Nyata):</span>
<ul class="text-xs font-bold text-slate-700 list-disc list-inside space-y-1">
<li>Tinggi Monas adalah 132 meter.</li>
<li>Diresmikan tanggal 12 Juli 1975 oleh Presiden Soeharto.</li>
</ul>
</div>
<div class="bg-rose-50 p-4 rounded-2xl border border-rose-200 space-y-1">
<span class="text-xs font-black uppercase text-rose-800 tracking-wider">Opini / Bukan Fakta Eksplisit:</span>
<p class="text-xs font-bold text-rose-900"><em>"Monas adalah tugu paling megah di Asia Tenggara."</em></p>
<p class="text-[11px] text-slate-500 italic mt-1">(Kata 'paling megah' adalah penilaian rasa/pendapat pribadi, bukan data pasti)</p>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-2xl border-2 border-slate-200 text-center text-slate-700 font-bold">
💡 <strong>Kunci Utama:</strong> Kata <em>"eksplisit"</em> berarti <strong>terbuka dan gamblang</strong>. Fakta eksplisit tidak perlu ditafsirkan ulang!
</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 di dalam teks tertulis: 'Suhu ruangan terukur 18 derajat Celsius', apakah kita boleh menyimpulkan bahwa semua orang di ruangan itu pasti menggigil kedinginan?"
</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">💡 Batasan Fakta Eksplisit:</p>
<p class="text-slate-700 font-bold mt-1">Jangan berasumsi! Fakta eksplisitnya hanyalah <strong>suhu terukur 18°C</strong>. Kondisi apakah orang kedinginan atau tidak adalah dugaan/tafsiran tersirat yang belum tentu benar bagi setiap orang.</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-lime-900 bg-lime-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 Wajib Menemukan Fakta Eksplisit?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-lime-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🔬</span>
<h4 class="font-black text-xl text-lime-800">Laporan Praktikum IPA</h4>
<p class="text-slate-600 font-bold text-sm">Mencatat data hasil percobaan: "Zat cair mendidih tepat pada suhu 100°C setelah 8 menit dipanaskan".</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-lime-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">⚖️</span>
<h4 class="font-black text-xl text-lime-800">Bukti Hukum & Aturan</h4>
<p class="text-slate-600 font-bold text-sm">Membaca pasal tata tertib sekolah: "Batas keterlambatan maksimal 15 menit sebelum gerbang ditutup".</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-lime-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🛡️</span>
<h4 class="font-black text-xl text-lime-800">Menghindari Berita Hoaks</h4>
<p class="text-slate-600 font-bold text-sm">Menyaring informasi di media sosial dengan hanya memercayai data eksplisit dari sumber resmi terverifikasi.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Karakteristik Fakta Eksplisit + 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-lime-900 bg-lime-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Ciri Khas Fakta Eksplisit 📌</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-lime-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-3 gap-3 text-xs font-bold text-slate-700">
<div class="bg-lime-50 p-4 rounded-2xl border border-lime-200">
<span class="text-lime-800 text-sm font-black block mb-1">1. Angka & Data Terukur</span>
Memuat besaran pasti: tanggal, jam, berat, tinggi, jarak, uang, atau persentase.
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200">
<span class="text-emerald-800 text-sm font-black block mb-1">2. Nama Diri & Lokasi</span>
Menyebutkan nama orang, organisasi, negara, atau tempat spesifik berhuruf kapital.
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200">
<span class="text-teal-800 text-sm font-black block mb-1">3. Bebas Kata Sifat Relatif</span>
Tidak menggunakan kata praduga seperti: <em>mungkin, kira-kira, sangat indah, terhebat</em>.
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Menemukan Fakta Eksplisit -->
<div class="bg-lime-50/70 p-6 rounded-3xl border-2 border-lime-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-lime-950 text-lg flex items-center gap-2">🎮 Uji Cepat Mandiri: Deteksi Fakta Eksplisit</h4>
<p class="text-slate-600 font-bold text-xs">Pilihlah informasi yang benar-benar merupakan fakta eksplisit dari teks!</p>
</div>
<div class="bg-lime-200 text-lime-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-lime-200 text-left">
<div id="uji-1-passage" class="p-4 bg-lime-50/60 rounded-xl border border-lime-200 font-bold text-slate-800 text-sm mb-3">Memuat teks...</div>
<p id="uji-1-prompt" class="text-base font-black text-lime-900 mb-3">Manakah yang merupakan fakta eksplisit dari teks di atas?</p>
<div id="uji-1-options" class="grid grid-cols-1 gap-2.5"></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-lime-600 hover:bg-lime-700 text-white font-black rounded-xl text-sm transition">
🔄 Teks Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Jebakan Asumsi vs Fakta Eksplisit + 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: Waspada Jebakan Asumsi Pribadi 🛑</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md mt-2 space-y-5">
<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">Hanya Percayai Kalimat di Teks</h4>
<p class="text-xs font-bold text-slate-700 leading-relaxed">
Sering kali kita tergoda memilih jawaban karena <em>"masuk akal di dunia nyata"</em>, padahal informasi itu <strong>tidak pernah ditulis oleh pengarang</strong> di dalam teks. Ingat: jika tidak ada di teks, itu bukan fakta eksplisit teks tersebut!
</p>
</div>
<div class="bg-lime-50 p-5 rounded-2xl border-2 border-lime-200 space-y-2">
<h4 class="font-black text-lime-900 text-base">Jurus Mencocokkan Kata (Word-Matching)</h4>
<p class="text-xs font-bold text-slate-700 leading-relaxed">
Cocokkan langsung pilihan jawaban dengan kalimat asal di teks. Fakta eksplisit memiliki kemiripan kata yang sangat presisi tanpa menambah-nambahi tafsiran baru!
</p>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Membedakan Fakta Eksplisit vs Asumsi -->
<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: Uji Bukti Harfiah</h4>
<p class="text-slate-600 font-bold text-xs">Pilihlah fakta yang benar-benar tertulis harfiah di teks tanpa asumsi tambahan!</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-left">
<div id="uji-2-passage" class="p-4 bg-emerald-50/60 rounded-xl border border-emerald-200 font-bold text-slate-800 text-sm mb-3">Memuat teks...</div>
<p id="uji-2-prompt" class="text-base font-black text-emerald-900 mb-3">Pernyataan manakah yang terbukti secara eksplisit?</p>
<div id="uji-2-options" class="grid grid-cols-1 gap-2.5"></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">
🔄 Teks 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-lime-600 to-emerald-600 tracking-wide uppercase">⚡ BATTLE PANEL DETEKTIF FAKTA (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Temukan fakta eksplisit dari kutipan kilat 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-lime-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-lime-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-lime-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-lime-50 p-4 rounded-2xl border-2 border-lime-100 text-left">
<p id="ifp-q-1" class="text-xs font-black 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-xs 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-left">
<p id="ifp-q-2" class="text-xs font-black 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-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<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 3</span>
<span id="ifp-score-3" 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-left">
<p id="ifp-q-3" class="text-xs font-black 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-xs 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-lime-400 mb-6 drop-shadow-lg">JUARA DETEKTIF FAKTA!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-lime-600 hover:bg-lime-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#3f6212] 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">Pindai bacaan dan temukan fakta eksplisitnya secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-lime-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-lime-800 bg-lime-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<div id="eval-passage-box" class="p-4 bg-lime-50/70 rounded-2xl border border-lime-200 text-slate-800 font-bold text-sm mb-4 leading-relaxed"></div>
<p id="eval-q-text" class="text-xl font-black text-slate-900 mb-4 leading-relaxed"></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 pengalamanmu memilah fakta eksplisit dari teks bacaan 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 & Teliti!</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 Tergoda Asumsi</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">Jenis data eksplisit apa (angka, tanggal, atau nama) yang paling mudah kamu temukan?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-lime-50 border-2 border-lime-200 focus:border-lime-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-lime-900 mb-1">Hebat! Kamu Detektif Fakta Andal.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-lime-700 text-5xl bg-lime-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-lime-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-lime-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-lime-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-lime-500">
<option value="100">100% - Paham Semua & Sangat Cepat Menemukan Bukti</option>
<option value="75">75% - Paham Sebagian Besar Data Fakta</option>
<option value="50">50% - Masih Terkadang Tertukar dengan Opini</option>
<option value="25">25% - Sering Terjebak Asumsi Pribadi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 bg-gradient-to-r from-lime-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-lime-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-lime-700 shadow-[0_4px_0px_#4d7c0f]">
<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 FAKTA TAK TERHINGGA: UJI CEPAT 1 & 2
// ==========================================
let countUji1 = 0;
let countUji2 = 0;
// Bank Soal Slide 5: Menemukan Fakta Eksplisit Spesifik
const faktaEksplisitBank = [
{
p: "Candi Prambanan dibangun pada abad ke-9 Masehi dan memiliki tinggi candi utama mencapai 47 meter. Bangunan ini dipersembahkan untuk Trimurti, tiga dewa utama dalam agama Hindu.",
c: "Candi utama Prambanan memiliki tinggi 47 meter",
w: [
"Candi Prambanan adalah candi yang paling megah di dunia",
"Candi Prambanan dibangun oleh seribu jin dalam satu malam",
"Semua wisatawan selalu merasa takjub melihat relief candi"
]
},
{
p: "Jembatan Suramadu menghubungkan Pulau Jawa dan Madura dengan panjang 5.438 meter. Jembatan ini resmi dibuka pada tanggal 10 Juni 2009 oleh Presiden Susilo Bambang Yudhoyono.",
c: "Panjang Jembatan Suramadu adalah 5.438 meter",
w: [
"Pemandangan malam hari di Jembatan Suramadu sangat memukau",
"Jembatan Suramadu adalah mahakarya terhebat bangsa Indonesia",
"Semua kendaraan roda dua melaju tanpa hambatan di Suramadu"
]
},
{
p: "Badak jawa (Rhinoceros sondaicus) memiliki satu cula dengan panjang sekitar 20 hingga 25 cm. Populasi satwa langka ini kini hanya tersisa di Taman Nasional Ujung Kulon, Banten.",
c: "Populasi badak jawa kini hanya tersisa di Taman Nasional Ujung Kulon",
w: [
"Badak jawa adalah hewan yang paling kuat di hutan Banten",
"Cula badak jawa memiliki khasiat ajaib yang menyembuhkan penyakit",
"Semua badak jawa jantan senang mandi di sungai berair jernih"
]
},
{
p: "Danau Toba memiliki panjang sekitar 100 kilometer dan lebar 30 kilometer. Danau vulkanik ini terbentuk akibat letusan dahsyat gunung api purba sekitar 74.000 tahun yang lalu.",
c: "Danau Toba memiliki panjang sekitar 100 km dan lebar 30 km",
w: [
"Danau Toba adalah tempat wisata paling nyaman untuk menenangkan pikiran",
"Air Danau Toba terasa sangat dingin dan menyegarkan tubuh",
"Semua orang di Sumatra Utara bekerja sebagai nelayan Danau Toba"
]
}
];
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let item = faktaEksplisitBank[Math.floor(Math.random() * faktaEksplisitBank.length)];
document.getElementById('uji-1-passage').innerHTML = `"${item.p}"`;
let options = [
{ text: item.c, isCorrect: true },
{ text: item.w[0], isCorrect: false },
{ text: item.w[1], isCorrect: false },
{ text: item.w[2], isCorrect: false }
];
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 text-left p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt.text;
btn.onclick = () => checkUji1(btn, opt.isCorrect, item.c);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correctText) {
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> Pernyataan ini tertulis langsung (fakta eksplisit): <em>"${correctText}"</em>.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correctText) 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> Kalimat itu adalah opini atau tidak tercantum di teks. Fakta eksplisitnya adalah: <em>"${correctText}"</em>.`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Bank Soal Slide 6: Menguji Bukti Harfiah Tanpa Asumsi
const harfiahBank = [
{
p: "Kereta Rel Listrik (KRL) Commuter Line mengangkut rata-rata 950.000 penumpang setiap hari kerja di wilayah Jabodetabek. Penumpang wajib menempelkan kartu uang elektronik di pintu masuk stasiun.",
c: "Penumpang wajib menempelkan kartu uang elektronik di pintu masuk stasiun",
w: [
"Semua penumpang KRL selalu merasa senang dan tidak pernah lelah",
"KRL Commuter Line adalah moda transportasi tercepat di dunia",
"Harga tiket KRL sangat murah bagi seluruh warga Jakarta"
]
},
{
p: "Gedung Sate di Bandung selesai dibangun pada tahun 1924 dengan memadukan gaya arsitektur tradisional Nusantara dan klasik Eropa. Di puncak atapnya terdapat ornamen 6 tusuk sate yang melambangkan biaya pembangunan sebesar 6 juta gulden.",
c: "Ornamen 6 tusuk sate di atap melambangkan biaya pembangunan 6 juta gulden",
w: [
"Gedung Sate adalah kantor pemerintahan paling indah di Indonesia",
"Semua pejabat di Gedung Sate sangat ramah melayani masyarakat",
"Gedung Sate selalu ramai dikunjungi jutaan turis setiap malam hari"
]
},
{
p: "Pesawat N219 Nurtanio adalah pesawat buatan PT Dirgantara Indonesia (PTDI) yang mampu mengangkut 19 penumpang. Pesawat ini dirancang khusus untuk menjangkau daerah terpencil dengan landasan pacu pendek.",
c: "Pesawat N219 Nurtanio dirancang mampu mengangkut 19 penumpang",
w: [
"Pesawat N219 adalah pesawat paling mewah yang pernah dibuat",
"Semua pilot di Indonesia bercita-cita menerbangkan pesawat N219",
"Pesawat N219 tidak memerlukan bahan bakar minyak avtur"
]
},
{
p: "Hutan hujan tropis di Indonesia memiliki luas sekitar 98 juta hektare dan menjadi rumah bagi lebih dari 300.000 spesies satwa liar yang unik.",
c: "Hutan hujan tropis di Indonesia memiliki luas sekitar 98 juta hektare",
w: [
"Hutan hujan tropis Indonesia adalah tempat yang paling berbahaya di bumi",
"Semua satwa liar di hutan hujan hidup rukun tanpa saling memangsa",
"Hutan hujan tidak pernah mengalami kekeringan sepanjang tahun"
]
}
];
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
let item = harfiahBank[Math.floor(Math.random() * harfiahBank.length)];
document.getElementById('uji-2-passage').innerHTML = `"${item.p}"`;
let options = [
{ text: item.c, isCorrect: true },
{ text: item.w[0], isCorrect: false },
{ text: item.w[1], isCorrect: false },
{ text: item.w[2], isCorrect: false }
];
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 text-left p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt.text;
btn.onclick = () => checkUji2(btn, opt.isCorrect, item.c);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correctText) {
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> Pernyataan ini tertulis harfiah (fakta eksplisit) tanpa tambahan asumsi.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correctText) 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> Kalimat itu adalah asumsi pribadi. Fakta eksplisit yang tepat adalah: <em>"${correctText}"</em>.`;
}
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: "Teks: 'Museum Nasional Indonesia didirikan pada tahun 1778 di Jakarta.'<br><b>Tahun berapa Museum Nasional didirikan?</b>",
opts: ["1778", "1945", "1888"],
ans: 0
},
{
q: "Fakta eksplisit adalah informasi yang tertulis secara...",
opts: ["Tersembunyi dan harus ditebak", "Gamblang, harfiah, dan jelas di teks", "Kiasan dalam puisi"],
ans: 1
},
{
q: "Teks: 'Kecepatan lari cheetah mampu mencapai 112 km/jam dalam waktu 3 detik.'<br><b>Berapa kecepatan maksimal lari cheetah?</b>",
opts: ["80 km/jam", "112 km/jam", "150 km/jam"],
ans: 1
},
{
q: "Manakah yang merupakan ciri khas fakta eksplisit?",
opts: ["Memuat data angka dan nama diri pasti", "Menggunakan kata 'mungkin' dan 'sebaiknya'", "Merupakan pendapat subjektif pembaca"],
ans: 0
},
{
q: "Teks: 'Raja Ampat memiliki lebih dari 1.500 pulau kecil di Papua Barat Daya.'<br><b>Di provinsi manakah Raja Ampat berada?</b>",
opts: ["Papua Barat Daya", "Maluku Utara", "Nusa Tenggara Timur"],
ans: 0
},
{
q: "Teks: 'Pesawat mendarat di landasan pacu pukul 16.45 WIB.'<br><b>Informasi eksplisit waktu pendaratan adalah...</b>",
opts: ["Pagi hari", "Pukul 16.45 WIB", "Tengah malam"],
ans: 1
},
{
q: "Jika sebuah informasi TIDAK TERTULIS di dalam teks, maka informasi itu...",
opts: ["Bukan fakta eksplisit teks tersebut", "Pasti fakta tersembunyi", "Boleh kita tambahkan sendiri"],
ans: 0
},
{
q: "Teks: 'Budi membeli 4 buku tulis bergaris seharga Rp16.000.'<br><b>Berapa banyak buku tulis yang dibeli Budi?</b>",
opts: ["2 buku", "4 buku", "6 buku"],
ans: 1
}
];
function initIFPQuestion(group) {
const fb = document.getElementById(`ifp-feedback-${group}`);
if(fb) fb.classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} berhasil menuntaskan 5 soal detektif fakta!`;
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-xs 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-xs 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-xs border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-xs 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('Teliti')) 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 = [
{
passage: "Kereta Cepat Jakarta–Bandung memiliki 4 stasiun pemberhentian, yaitu Stasiun Halim, Karawang, Padalarang, dan Tegalluar. Jalur lintasannya membentang sepanjang 142,3 kilometer.",
q: "Berdasarkan teks di atas, fakta eksplisit mengenai panjang lintasan kereta cepat adalah...",
options: ["100 kilometer", "142,3 kilometer", "150 kilometer", "200 kilometer"],
a: 1,
exp: "Pada teks tertulis gamblang dan terukur: <em>'Jalur lintasannya membentang sepanjang 142,3 kilometer.'</em>"
},
{
passage: "Festival Danau Sentani diselenggarakan setiap tahun pada pertengahan bulan Juni di Kabupaten Jayapura, Papua. Acara ini menampilkan tarian adat di atas perahu tradisional.",
q: "Di manakah lokasi penyelenggaraan Festival Danau Sentani menurut teks?",
options: ["Kabupaten Jayapura, Papua", "Kota Sorong, Papua Barat", "Kabupaten Merauke", "Pulau Biak"],
a: 0,
exp: "Fakta eksplisit tempat tertulis langsung: <em>'Kabupaten Jayapura, Papua'</em>."
},
{
passage: "Penyu belimbing (Dermochelys coriacea) adalah penyu terbesar di dunia dengan berat mencapai 700 kg dan panjang tubuh hingga 2 meter. Hewan purba ini tidak memiliki tempurung keras melainkan kulit kenyal seperti tulang rawan.",
q: "Pernyataan yang merupakan fakta eksplisit dari teks adalah...",
options: [
"Penyu belimbing adalah hewan yang paling pintar di lautan luas",
"Penyu belimbing memiliki berat mencapai 700 kg",
"Semua penyu belimbing bertelur di pantai yang sepi turis",
"Penyu belimbing dapat menyelam hingga ke dasar palung laut"
],
a: 1,
exp: "Pernyataan berat 700 kg tercantum harfiah dan jelas di kalimat pertama teks."
},
{
passage: "Fakta eksplisit dapat dibedakan dari opini atau asumsi karena memiliki ciri utama...",
options: [
"Didasarkan pada perasaan kagum atau suka pembaca",
"Berupa data pasti yang tertulis secara nyata dan dapat diverifikasi langsung di teks",
"Hanya berupa perkiraan atau ramalan masa depan",
"Disampaikan menggunakan kalimat perintah yang tegas"
],
a: 1,
exp: "Ciri esensial fakta eksplisit adalah data pasti yang terbukti tertulis nyata dan dapat diverifikasi langsung dari kalimatnya."
},
{
passage: "Perpustakaan Nasional Republik Indonesia di Jalan Medan Merdeka Selatan memiliki gedung setinggi 27 lantai dengan fasilitas ruang baca modern dan koleksi naskah kuno nusantara.",
q: "Berapa jumlah lantai gedung Perpustakaan Nasional menurut kutipan teks tersebut?",
options: ["20 lantai", "24 lantai", "27 lantai", "30 lantai"],
a: 2,
exp: "Tertulis harfiah pada teks: <em>'memiliki gedung setinggi 27 lantai...'</em>"
}
];
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-lime-300 shadow-md text-center space-y-4">
<span class="text-6xl">🎉</span>
<h3 class="text-3xl font-black text-lime-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal fakta eksplisit dengan ketelitian tinggi.</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-passage-box').innerHTML = `"${current.passage}"`;
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-sm hover:bg-lime-50 hover:border-lime-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-sm 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-sm 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 Detektif Fakta Eksplisit Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Fakta Eksplisit: " + refleksi,
strategi: "Evaluasi: Menemukan Fakta Eksplisit"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 7
Penguatan Literasi Dasar
Menebak Arti Kosakata Baru
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia: Detektif Makna Kosakata Baru 🔍📖</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: #fdf2f8;
background-image: radial-gradient(#fbcfe8 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: #db2777 !important; color: white !important; border-bottom-color: #9d174d !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-family: 'Nunito', sans-serif; line-height: 1.6; }
.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-pink-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-pink-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="sparkles" 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-pink-950 uppercase tracking-widest">Literasi Membaca - Menebak Arti Kosakata Baru</span>
<span id="progress-text" class="text-xs font-black text-white bg-pink-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-rose-400 via-pink-500 to-purple-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & 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-pink-100 text-pink-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase B / D - Literasi & Keterampilan Bahasa
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Detektif Makna: <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-600 to-purple-600">Menebak Kosakata Baru</span> 🔍📖
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-pink-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-pink-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-pink-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-pink-700">mengenali petunjuk konteks (clue)</span> dalam kalimat untuk menebak arti kata yang belum dikenal tanpa langsung membuka kamus.</li>
<li>Peserta didik dapat <span class="text-pink-700">membedakan makna kata melalui petunjuk sinonim, antonim, contoh, serta penjelasan langsung</span> dalam teks bacaan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap memecahkan teka-teki kata sulit? Yuk, kita mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Konteks Kalimat -->
<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">Tahap 1: Mengamati Petunjuk di Sekitar Kata 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kata-kata di samping kata sulit selalu meninggalkan jejak rahasia tentang artinya!</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-sm space-y-4 mt-2">
<div class="bg-pink-50/80 p-4 rounded-2xl border border-pink-200 text-slate-800 text-sm leading-relaxed text-box">
<p class="font-bold">
"Setelah mendaki gunung seharian tanpa istirahat, tubuh Dika merasa sangat <span class="bg-pink-200 text-pink-900 px-2 py-0.5 rounded underline font-black">letih</span>. Kakinya gemetar, tenaganya habis, dan ia langsung tertidur pulas di dalam tenda."
</p>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-pink-50 p-4 rounded-2xl border border-pink-200 space-y-1">
<span class="text-xs font-black uppercase text-pink-800 tracking-wider">Petunjuk Konteks (Jejak Kalimat):</span>
<p class="text-xs font-bold text-slate-700">Mendaki seharian tanpa henti, kaki gemetar, tenaga habis, dan langsung tidur pulas.</p>
</div>
<div class="bg-purple-50 p-4 rounded-2xl border border-purple-200 space-y-1">
<span class="text-xs font-black uppercase text-purple-800 tracking-wider">Arti Kata "Letih":</span>
<p class="text-xs font-bold text-purple-950">Sangat lelah, penat, atau kehabisan tenaga jasmani.</p>
<p class="text-[11px] text-slate-500 italic mt-1">(Kita tahu artinya tanpa harus membuka kamus tebal!)</p>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-2xl border-2 border-slate-200 text-center text-slate-700 font-bold">
💡 <strong>Kunci Utama:</strong> Jangan panik saat bertemu kata asing. <em>Baca kalimat sebelum dan sesudahnya</em> untuk menemukan petunjuk!
</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 sedang asyik membaca buku cerita di taman tanpa membawa kamus atau ponsel, apakah kita harus berhenti membaca setiap kali melihat kata yang belum pernah kita dengar?"
</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">💡 Jurus Membaca Lancar:</p>
<p class="text-slate-700 font-bold mt-1">Tentu tidak! Seorang pembaca yang baik menggunakan <strong>petunjuk konteks (context clues)</strong> untuk menebak makna kata secara cepat dan tepat sehingga alur membaca tidak terputus!</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-pink-900 bg-pink-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 Keterampilan Menebak Makna Ini Sangat Diperlukan?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">📰</span>
<h4 class="font-black text-xl text-pink-800">Membaca Berita Sains</h4>
<p class="text-slate-600 font-bold text-sm">Menemukan istilah ilmiah seperti <em>"hibernasi"</em> atau <em>"ekosistem"</em> pada artikel pengetahuan alam.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">📜</span>
<h4 class="font-black text-xl text-pink-800">Cerita Dongeng / Klasik</h4>
<p class="text-slate-600 font-bold text-sm">Menjumpai kata arkais atau kata lama seperti <em>"pertiwi"</em>, <em>"anindita"</em>, atau <em>"saujana"</em>.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">📱</span>
<h4 class="font-black text-xl text-pink-800">Istilah Teknologi</h4>
<p class="text-slate-600 font-bold text-sm">Memahami kata serapan baru di internet seperti <em>"unduh"</em>, <em>"pranala"</em>, atau <em>"peramban"</em> dari fungsi tombolnya.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - 4 Jenis Petunjuk Konteks + 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 1: 4 Tipe Petunjuk Konteks 🧩</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-pink-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-4 text-xs font-bold text-slate-700">
<div class="bg-pink-50 p-3.5 rounded-2xl border border-pink-200">
<span class="text-pink-800 text-sm font-black block mb-1">1. Definisi Langsung</span>
Penulis langsung menjelaskan arti kata menggunakan kata: <em>yaitu, adalah, merupakan</em>.<br>
<span class="italic text-slate-500">Contoh: "Herbivor adalah hewan pemakan tumbuhan."</span>
</div>
<div class="bg-purple-50 p-3.5 rounded-2xl border border-purple-200">
<span class="text-purple-800 text-sm font-black block mb-1">2. Sinonim (Persamaan)</span>
Kalimat berikutnya memakai kata serupa yang lebih akrab di telinga kita.<br>
<span class="italic text-slate-500">Contoh: "Wajahnya tampak muram dan bersedih."</span>
</div>
<div class="bg-rose-50 p-3.5 rounded-2xl border border-rose-200">
<span class="text-rose-800 text-sm font-black block mb-1">3. Antonim (Lawan Kata)</span>
Memakai kata pembanding: <em>tetapi, berbeda dengan, sebaliknya</em>.<br>
<span class="italic text-slate-500">Contoh: "Kucing itu jinak, tidak liar seperti harimau."</span>
</div>
<div class="bg-amber-50 p-3.5 rounded-2xl border border-amber-200">
<span class="text-amber-800 text-sm font-black block mb-1">4. Contoh Rincian</span>
Menyebutkan contoh benda nyata: <em>seperti, misalnya, antara lain</em>.<br>
<span class="italic text-slate-500">Contoh: "Fauna langka seperti komodo dan anoa."</span>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Tebak Arti Kata dalam Kalimat -->
<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: Tebak Makna dari Kalimat</h4>
<p class="text-slate-600 font-bold text-xs">Cari petunjuk dalam kalimat untuk menebak arti kata yang ditebalkan!</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-1">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-pink-200 text-left">
<div id="uji-1-sentence" class="p-4 bg-pink-50/60 rounded-xl border border-pink-200 font-bold text-slate-800 text-sm mb-3">Memuat kalimat...</div>
<p id="uji-1-prompt" class="text-base font-black text-pink-900 mb-3">Arti kata yang ditebalkan adalah...</p>
<div id="uji-1-options" class="grid grid-cols-1 gap-2.5"></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-pink-600 hover:bg-pink-700 text-white font-black rounded-xl text-sm transition">
🔄 Kalimat Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Membedakan Makna Kata Berdasarkan Lawan & Pasangan + 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 2: Menangkap Makna dari Lawan Kata 🔄</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-base">Trik Kontras (Kata Berlawanan)</h4>
<p class="text-xs font-bold text-slate-700 leading-relaxed">
Jika kalimat menyebutkan: <em>"Meskipun tubuhnya tampak <b>ringkih</b>, kakek itu sanggup mengangkat karung beras yang sangat berat."</em><br>
Kata <em>"meskipun"</em> menunjukkan pertentangan. Karena kakek bisa angkat karung berat, maka <strong>ringkih</strong> artinya kelihatan lemah atau rapuh!
</p>
</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-base">Trik Penggantian Kata (Substitusi)</h4>
<p class="text-xs font-bold text-slate-700 leading-relaxed">
Cobalah mengganti kata sulit tersebut dengan pilihan kata yang kamu duga di dalam kalimat. Jika kalimatnya tetap masuk akal dan terdengar wajar, maka tebakanmu 99% benar!
</p>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Trik Kontras & Sinonim -->
<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: Menentukan Sinonim Tepat</h4>
<p class="text-slate-600 font-bold text-xs">Pilihlah kata yang paling tepat untuk menggantikan kata bergaris bawah!</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-2">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-purple-200 text-left">
<div id="uji-2-sentence" class="p-4 bg-purple-50/60 rounded-xl border border-purple-200 font-bold text-slate-800 text-sm mb-3">Memuat kalimat...</div>
<p id="uji-2-prompt" class="text-base font-black text-purple-900 mb-3">Kata yang bermakna sama dengan kata yang digarisbawahi adalah...</p>
<div id="uji-2-options" class="grid grid-cols-1 md:grid-cols-2 gap-2.5"></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-purple-600 hover:bg-purple-700 text-white font-black rounded-xl text-sm transition">
🔄 Kalimat 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-pink-600 to-purple-600 tracking-wide uppercase">⚡ BATTLE PANEL DETEKTIF KATA (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Tebak arti kosakata baru dari petunjuk kalimat kilat 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-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 1</span>
<span id="ifp-score-1" 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-left">
<p id="ifp-q-1" class="text-xs font-black 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-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<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 2</span>
<span id="ifp-score-2" 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-left">
<p id="ifp-q-2" class="text-xs font-black 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-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<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 3</span>
<span id="ifp-score-3" 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-left">
<p id="ifp-q-3" class="text-xs font-black 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-xs 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-pink-400 mb-6 drop-shadow-lg">JUARA DETEKTIF KATA!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-pink-600 hover:bg-pink-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9d174d] 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">Pahami petunjuk konteks pada kalimat dan tentukan arti kata yang dimaksud.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-pink-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-pink-800 bg-pink-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<div id="eval-passage-box" class="p-4 bg-pink-50/70 rounded-2xl border border-pink-200 text-slate-800 font-bold text-sm mb-4 leading-relaxed"></div>
<p id="eval-q-text" class="text-xl font-black text-slate-900 mb-4 leading-relaxed"></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 pengalamanmu memecahkan arti kata dari petunjuk kalimat 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 Ditebak!</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 Butuh Kamus</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">Kata baru apa yang paling menarik atau baru pertama kali kamu dengar hari ini?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-pink-50 border-2 border-pink-200 focus:border-pink-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-pink-900 mb-1">Hebat! Kamu Penguasa Makna Kosakata.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-pink-700 text-5xl bg-pink-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-pink-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-pink-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-pink-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-pink-500">
<option value="100">100% - Paham Semua & Lancar Menemukan Petunjuk</option>
<option value="75">75% - Paham Sebagian Besar Makna Kata</option>
<option value="50">50% - Masih Perlu Bantuan Membaca Kalimat Penjelas</option>
<option value="25">25% - Sering Keliru Menebak Makna Kata Asing</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 bg-gradient-to-r from-pink-600 to-purple-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-pink-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-pink-700 shadow-[0_4px_0px_#9d174d]">
<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 KOSAKATA TAK TERHINGGA: UJI CEPAT 1 & 2
// ==========================================
let countUji1 = 0;
let countUji2 = 0;
// Bank Soal Slide 5: Tebak Makna dari Petunjuk Konteks
const tebakMaknaBank = [
{
s: "Setelah terjadi kebakaran hebat, rumah warga berubah menjadi <b>puing</b>, hanya menyisakan tumpukan pecahan batu bata dan abu hitam.",
w: "puing",
c: "Sisa-sisa reruntuhan bangunan yang rusak atau hancur",
opt: [
"Sisa-sisa reruntuhan bangunan yang rusak atau hancur",
"Bahan bangunan baru yang masih tersimpan di toko",
"Pohon besar yang tumbuh di tengah halaman rumah"
]
},
{
s: "Hewan nokturnal seperti burung hantu dan kelelawar sangat <b>aktif</b> mencari mangsa pada malam hari, lalu beristirahat saat siang.",
w: "nokturnal",
c: "Memiliki kebiasaan aktif dan mencari makan pada malam hari",
opt: [
"Memiliki kebiasaan aktif dan mencari makan pada malam hari",
"Hewan yang hanya bisa hidup di dalam air sungai",
"Jenis hewan peliharaan yang tidak membutuhkan makanan"
]
},
{
s: "Petani sangat cemas menghadapi musim <b>paceklik</b>, yaitu masa ketika sawah gagal panen dan bahan makanan menjadi sangat langka.",
w: "paceklik",
c: "Masa kekurangan bahan makanan akibat gagal panen",
opt: [
"Masa kekurangan bahan makanan akibat gagal panen",
"Musim panen raya dengan hasil padi melimpah ruah",
"Waktu liburan akhir tahun bagi seluruh warga desa"
]
},
{
s: "Karena rajin dan hemat, pundi-pundi tabungan Siti semakin <b>berlimpah</b>, uangnya bertambah banyak hingga cukup untuk membeli laptop impiannya.",
w: "berlimpah",
c: "Tersedia dalam jumlah yang sangat banyak atau berlebih",
opt: [
"Tersedia dalam jumlah yang sangat banyak atau berlebih",
"Habis tak tersisa karena sering dibelanjakan",
"Hilang dicuri oleh orang yang tidak dikenal"
]
}
];
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let item = tebakMaknaBank[Math.floor(Math.random() * tebakMaknaBank.length)];
document.getElementById('uji-1-sentence').innerHTML = `"${item.s}"`;
document.getElementById('uji-1-prompt').innerHTML = `Arti kata <strong>${item.w}</strong> pada kalimat di atas adalah...`;
let options = shuffle([...item.opt]);
let optsContainer = document.getElementById('uji-1-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full text-left p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji1(btn, opt === item.c, item.c, item.w);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correctText, word) {
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> Berdasarkan petunjuk kalimat, arti kata <em>${word}</em> adalah: "${correctText}".`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correctText) 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> Petunjuk konteks menunjukkan bahwa arti <em>${word}</em> adalah: "${correctText}".`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Bank Soal Slide 6: Menentukan Persamaan Kata (Sinonim Kontekstual)
const sinonimBank = [
{
s: "Udara di puncak pegunungan terasa sangat <u>sejuk</u> dan menyegarkan tubuh.",
w: "sejuk",
c: "Dingin dan segar",
opt: ["Dingin dan segar", "Panas membara", "Pengap berdebu", "Kering kerontang"]
},
{
s: "Pemandangan air terjun di tengah hutan itu sungguh <u>elok</u> dipandang mata.",
w: "elok",
c: "Indah atau cantik",
opt: ["Indah atau cantik", "Mengerikan", "Kusam dan kotor", "Gelap gulita"]
},
{
s: "Semua warga desa hidup dengan <u>rukun</u> tanpa pernah berselisih paham.",
w: "rukun",
c: "Damai dan harmonis",
opt: ["Damai dan harmonis", "Bermusuhan", "Saling curiga", "Sombong"]
},
{
s: "Arsitek itu merancang jembatan dengan konstruksi yang sangat <u>kokoh</u> agar tahan gempa.",
w: "kokoh",
c: "Kuat dan tidak mudah goyah",
opt: ["Kuat dan tidak mudah goyah", "Rapuh dan retak", "Tipis melengkung", "Licin"]
}
];
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
let item = sinonimBank[Math.floor(Math.random() * sinonimBank.length)];
document.getElementById('uji-2-sentence').innerHTML = `"${item.s}"`;
document.getElementById('uji-2-prompt').innerHTML = `Kata yang bermakna sama dengan kata <u>${item.w}</u> adalah...`;
let options = shuffle([...item.opt]);
let optsContainer = document.getElementById('uji-2-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full text-left p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt;
btn.onclick = () => checkUji2(btn, opt === item.c, item.c, item.w);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correctText, word) {
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> Kata <em>${word}</em> memiliki arti yang sama dengan: <b>"${correctText}"</b>.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correctText) 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> Kata yang sepadan dengan <em>${word}</em> adalah: <b>"${correctText}"</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: "Teks: 'Kakek berjalan dengan <b>tertatih-tatih</b> sambil memegang tongkat kayu.'<br><b>Arti kata tertatih-tatih adalah...</b>",
opts: ["Berjalan lambat dan agak terhuyung", "Berlari kencang sekali", "Melompat-lompat gembira"],
ans: 0
},
{
q: "Teks: 'Tanaman itu menjadi <b>layu</b> karena kekurangan air di bawah terik matahari.'<br><b>Arti kata layu adalah...</b>",
opts: ["Tumbuh semakin tinggi", "Tidak segar lagi dan terkulai", "Berbuah sangat manis"],
ans: 1
},
{
q: "Teks: 'Ibu selalu mengajarkan kami untuk hidup <b>hemat</b> dan tidak boros.'<br><b>Lawan kata (antonim) dari hemat adalah...</b>",
opts: ["Boros", "Rajin", "Kikir"],
ans: 0
},
{
q: "Teks: 'Raja hutan itu sangat <b>perkasa</b>, semua hewan takut padanya.'<br><b>Kata perkasa bermakna sama dengan...</b>",
opts: ["Lemah", "Kuat dan gagah", "Kecil"],
ans: 1
},
{
q: "Cara paling cepat menebak arti kata baru tanpa membuka kamus adalah...",
opts: ["Melihat petunjuk kalimat di sekitarnya", "Menghapus kata tersebut", "Menebak huruf awalnya saja"],
ans: 0
},
{
q: "Teks: 'Gudang tua itu sangat <b>gulita</b>, tidak ada satu pun lampu menyala.'<br><b>Arti kata gulita adalah...</b>",
opts: ["Gelap sekali", "Sangat terang", "Banyak debu"],
ans: 0
},
{
q: "Teks: 'Matahari mulai <b>tenggelam</b> di ufuk barat menandakan malam tiba.'<br><b>Arti kata ufuk adalah...</b>",
opts: ["Kaki langit atau batas pemandangan", "Tengah lautan luas", "Puncak gunung tinggi"],
ans: 0
},
{
q: "Teks: 'Rani adalah murid yang <b>tekun</b>, ia selalu belajar setiap malam.'<br><b>Arti kata tekun adalah...</b>",
opts: ["Rajin dan bersungguh-sungguh", "Suka melamun", "Malas membaca"],
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} berhasil menuntaskan 5 tebak kosakata!`;
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-xs 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-xs 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-xs border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-xs 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 = [
{
passage: "Orang utan kalimantan kini berstatus <b>terancam punah</b> karena habitat hutan tempat tinggalnya banyak yang beralih fungsi menjadi perkebunan kelapa sawit.",
q: "Arti istilah kata <b>habitat</b> pada bacaan di atas adalah...",
options: [
"Tempat hidup alami bagi hewan atau tumbuhan",
"Kandang buatan manusia di dalam kebun binatang",
"Jenis makanan utama yang disukai oleh satwa liar",
"Alat transportasi untuk memindahkan hewan langka"
],
a: 0,
exp: "Konteks kalimat 'hutan tempat tinggalnya' menunjukkan bahwa habitat adalah tempat hidup alami bagi hewan/tumbuhan."
},
{
passage: "Meskipun hidup dalam kondisi yang serba <b>bersahaja</b>, keluarga Pak Danu selalu bersyukur dan merasa cukup dengan makan nasi berlauk tempe sederhana.",
q: "Makna kata <b>bersahaja</b> pada kalimat tersebut adalah...",
options: [
"Mewah dan bergelimang harta",
"Sederhana dan tidak berlebih-lebihan",
"Sangat menderita dan penuh keluhan",
"Kaya raya serta terkenal di desanya"
],
a: 1,
exp: "Petunjuk 'merasa cukup dengan lauk sederhana' menunjukkan bahwa bersahaja berarti hidup sederhana dan tidak berlebih-lebihan."
},
{
passage: "Cahaya lentera itu tampak <b>redup</b>, tidak seperti lampu senter baru yang menyala sangat terang benderang menyinari jalan setapak.",
q: "Kata <b>redup</b> pada kalimat di atas memiliki arti...",
options: [
"Menyala sangat menyilaukan mata",
"Agak gelap atau tidak terang sinarnya",
"Mati total dan tidak mengeluarkan api",
"Berwarna-warni seperti pelangi indah"
],
a: 1,
exp: "Petunjuk kontras 'tidak seperti lampu senter yang sangat terang' membuktikan bahwa redup artinya agak gelap atau kurang terang."
},
{
passage: "Petunjuk dalam teks yang menjelaskan arti kata melalui penyebutan hal-hal yang termasuk ke dalam kelompok kata tersebut dinamakan petunjuk...",
options: [
"Contoh atau rincian",
"Lawan kata (antonim)",
"Tanda baca titik dua",
"Peribahasa daerah"
],
a: 0,
exp: "Petunjuk konteks yang menggunakan contoh-contoh spesifik untuk memperjelas makna disebut petunjuk contoh/rincian."
},
{
passage: "Bunga bangkai mengeluarkan bau yang sangat <b>busuk</b> seperti bangkai binatang untuk menarik perhatian lalat agar membantu proses penyerbukan.",
q: "Kata yang bermakna <b>berlawanan (antonim)</b> dengan kata <b>busuk</b> adalah...",
options: [
"Harum / Wangi",
"Anyir",
"Tengik",
"Asam"
],
a: 0,
exp: "Lawan kata dari busuk (bau tidak sedap) adalah harum atau wangi."
}
];
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-pink-300 shadow-md text-center space-y-4">
<span class="text-6xl">🎉</span>
<h3 class="text-3xl font-black text-pink-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal tebak makna kosakata 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-passage-box').innerHTML = `"${current.passage}"`;
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-sm hover:bg-pink-50 hover:border-pink-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-sm 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-sm 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 Detektif Kosakata Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Kosakata Baru: " + refleksi,
strategi: "Evaluasi: Menebak Arti Kosakata Baru"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 7
Penguatan Literasi Dasar
Menemukan Ide Pokok Paragraf
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia: Menemukan Ide Pokok Paragraf 🎯💡</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: #f5f3ff;
background-image: radial-gradient(#ddd6fe 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: #4f46e5 !important; color: white !important; border-bottom-color: #3730a3 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-family: 'Nunito', sans-serif; line-height: 1.6; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-indigo-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-indigo-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="compass" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-indigo-950 uppercase tracking-widest">Literasi Membaca - Menentukan Ide Pokok</span>
<span id="progress-text" class="text-xs font-black text-white bg-indigo-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-cyan-400 via-indigo-500 to-purple-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-3xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-indigo-100 text-indigo-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase B / D - Literasi Membaca Paragraf
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Menemukan <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-cyan-600">Ide Pokok Paragraf</span> 🎯💡
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-indigo-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-indigo-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-indigo-700">membedakan kalimat utama dan kalimat penjelas</span> dalam suatu paragraf secara tepat.</li>
<li>Peserta didik dapat <span class="text-indigo-700">menentukan ide pokok (gagasan utama)</span> baik yang terletak di awal (deduktif), di akhir (induktif), maupun campuran.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membedah isi paragraf dengan cepat? Yuk, kita mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Anatomi Paragraf -->
<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">Tahap 1: Membedah Anatomi Paragraf 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Paragraf ibarat sebuah payung: ada satu tiang penyangga utama dan beberapa jeruji penopangnya!</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm space-y-4 mt-2">
<div class="bg-indigo-50/80 p-4 rounded-2xl border border-indigo-200 text-slate-800 text-sm leading-relaxed text-box">
<p class="font-bold">
<span class="bg-indigo-200 text-indigo-900 px-2 py-0.5 rounded">Lidah buaya memiliki beragam manfaat untuk kesehatan manusia.</span> Gel lidah buaya dapat mempercepat penyembuhan luka bakar ringan pada kulit. Selain itu, ekstrak tanaman ini sering dijadikan bahan alami untuk menyuburkan akar rambut. Kandungan antioksidannya juga dipercaya baik untuk melancarkan sistem pencernaan.
</p>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-indigo-50 p-4 rounded-2xl border border-indigo-200 space-y-1">
<span class="text-xs font-black uppercase text-indigo-800 tracking-wider">Kalimat Utama (Gagasan Payung):</span>
<p class="text-xs font-bold text-indigo-950">"Lidah buaya memiliki beragam manfaat untuk kesehatan manusia."</p>
</div>
<div class="bg-cyan-50 p-4 rounded-2xl border border-cyan-200 space-y-1">
<span class="text-xs font-black uppercase text-cyan-800 tracking-wider">Ide Pokok (Inti Sari):</span>
<p class="text-xs font-bold text-cyan-950">Manfaat lidah buaya bagi kesehatan manusia.</p>
<p class="text-[11px] text-slate-500 italic mt-1">(Kalimat lainnya hanyalah perincian contoh: luka bakar, rambut, dan pencernaan)</p>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-2xl border-2 border-slate-200 text-center text-slate-700 font-bold">
💡 <strong>Kunci Utama:</strong> Ide pokok adalah <em>topik inti yang sedang dibicarakan</em> oleh seluruh kalimat dalam paragraf!
</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 ide pokok itu selalu sama persis dengan kalimat pertama? Di mana saja kalimat utama biasa bersembunyi di dalam paragraf?"
</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 Penyelidikan:</p>
<p class="text-slate-700 font-bold mt-1">Kebanyakan memang di awal (Deduktif). Namun, penulis juga sering meletakkan kalimat utama di <strong>akhir paragraf sebagai kesimpulan</strong> (Induktif) yang diawali kata seperti <em>oleh karena itu, jadi, atau dengan demikian</em>!</p>
</div>
</div>
<!-- Slide 4: Tinjauan Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengapa Kita Harus Terampil Menemukan Ide Pokok?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">📰</span>
<h4 class="font-black text-xl text-indigo-800">Membaca Berita Cepat</h4>
<p class="text-slate-600 font-bold text-sm">Mengetahui pokok persoalan peristiwa dalam sekejap tanpa harus terjebak rincian kecil yang berbelit-belit.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">📝</span>
<h4 class="font-black text-xl text-indigo-800">Menulis Rangkuman Belajar</h4>
<p class="text-slate-600 font-bold text-sm">Membuat catatan ringkas bab pelajaran IPA/IPS dengan hanya mencatat ide pokok tiap sub-judul.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🗣️</span>
<h4 class="font-black text-xl text-indigo-800">Menyusun Paragraf Pidato</h4>
<p class="text-slate-600 font-bold text-sm">Membuat gagasan tulisan yang runtut, terarah, dan fokus agar pendengar tidak bingung menangkap pesan.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Posisi Ide Pokok (Deduktif & Induktif) + 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 1: Posisi Kalimat Utama (Deduktif & Induktif) 📍</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-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-lg">1. Paragraf Deduktif (Awal)</h4>
<p class="text-xs font-bold text-slate-700">Gagasan umum diletakkan di <b>kalimat pertama</b>, disusul kalimat penjelas (khusus):</p>
<div class="bg-white p-3 rounded-xl border border-indigo-200 text-xs font-bold text-indigo-900">
<span class="text-indigo-600 font-black">[Awal]:</span> Menjaga kebersihan gigi sangat penting. Sisa makanan dapat merusak email gigi. Kuman juga mudah berkembang biak jika gigi jarang disikat.
</div>
</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-lg">2. Paragraf Induktif (Akhir)</h4>
<p class="text-xs font-bold text-slate-700">Diawali bukti/penjelasan rincian, lalu ditutup kesimpulan di <b>kalimat terakhir</b>:</p>
<div class="bg-white p-3 rounded-xl border border-cyan-200 text-xs font-bold text-cyan-900">
Udara pegunungan sejuk. Pemandangan kebun teh tampak hijau asri. <span class="text-cyan-700 font-black">[Akhir]:</span> <em>Oleh karena itu</em>, Puncak selalu menjadi tempat wisata favorit keluarga.
</div>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Tentukan Ide Pokok Paragraf -->
<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: Menentukan Ide Pokok Paragraf</h4>
<p class="text-slate-600 font-bold text-xs">Cari kalimat utamanya, lalu tentukan ide pokoknya. Latihlah sepuasmu!</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-1">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-indigo-200 text-left">
<div id="uji-1-passage" class="p-4 bg-indigo-50/60 rounded-xl border border-indigo-200 font-bold text-slate-800 text-sm mb-3">Memuat paragraf...</div>
<p id="uji-1-prompt" class="text-base font-black text-indigo-900 mb-3">Ide pokok paragraf di atas adalah...</p>
<div id="uji-1-options" class="grid grid-cols-1 gap-2.5"></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-indigo-600 hover:bg-indigo-700 text-white font-black rounded-xl text-sm transition">
🔄 Paragraf Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Ciri Kalimat Penjelas vs Ide Pokok + 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 2: Memilah Kalimat Penjelas 🔍</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-base">Ciri-Ciri Kalimat Penjelas</h4>
<ul class="text-xs font-bold text-slate-700 list-disc list-inside space-y-1.5">
<li>Berisi uraian detail, angka statistik, contoh, atau bukti pendukung.</li>
<li>Sering memakai kata rujukan: <em>hal ini, tersebut, ia, mereka</em>.</li>
<li>Memakai kata penghubung antar-kalimat: <em>selain itu, bahkan, misalnya, akibatnya</em>.</li>
</ul>
</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-base">Langkah Ringkas Menemukan Ide Pokok</h4>
<ol class="text-xs font-bold text-slate-700 list-decimal list-inside space-y-1.5">
<li>Baca paragraf dari awal hingga akhir dengan cermat.</li>
<li>Tanyakan: <em>"Paragraf ini sedang membahas apa secara umum?"</em></li>
<li>Temukan kalimat yang memayungi kalimat-kalimat lainnya.</li>
<li>Ringkas kalimat utama tersebut menjadi frasa ide pokok!</li>
</ol>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Membedakan Kalimat Utama vs Penjelas -->
<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: Menemukan Kalimat Utama</h4>
<p class="text-slate-600 font-bold text-xs">Pilihlah kalimat yang bertindak sebagai kalimat utama pada paragraf berikut!</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-2">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-cyan-200 text-left">
<div id="uji-2-passage" class="p-4 bg-cyan-50/60 rounded-xl border border-cyan-200 font-bold text-slate-800 text-sm mb-3">Memuat paragraf...</div>
<p id="uji-2-prompt" class="text-base font-black text-cyan-900 mb-3">Kalimat utama paragraf di atas terletak pada nomor kalimat...</p>
<div id="uji-2-options" class="grid grid-cols-1 md:grid-cols-2 gap-2.5"></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-cyan-600 hover:bg-cyan-700 text-white font-black rounded-xl text-sm transition">
🔄 Paragraf 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-indigo-600 to-cyan-600 tracking-wide uppercase">⚡ BATTLE PANEL IDE POKOK KILAT (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Temukan gagasan pokok dari kutipan kilat 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-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 1</span>
<span id="ifp-score-1" 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-left">
<p id="ifp-q-1" class="text-xs font-black 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-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<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 2</span>
<span id="ifp-score-2" 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-left">
<p id="ifp-q-2" class="text-xs font-black 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-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<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 3</span>
<span id="ifp-score-3" 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-left">
<p id="ifp-q-3" class="text-xs font-black 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-xs 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-indigo-400 mb-6 drop-shadow-lg">JUARA KELOMPOK IDE POKOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#3730a3] 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">Baca setiap paragraf berikut dan tentukan ide pokoknya secara cermat.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-indigo-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-indigo-800 bg-indigo-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<div id="eval-passage-box" class="p-4 bg-indigo-50/70 rounded-2xl border border-indigo-200 text-slate-800 font-bold text-sm mb-4 leading-relaxed"></div>
<p id="eval-q-text" class="text-xl font-black text-slate-900 mb-4 leading-relaxed"></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 pemahamanmu tentang cara menemukan ide pokok paragraf 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 Menemukan!</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 Terkecoh Kalimat Penjelas</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 apa yang paling membantumu mengenali kalimat utama dalam paragraf?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-indigo-50 border-2 border-indigo-200 focus:border-indigo-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-indigo-900 mb-1">Hebat! Kamu Ahli Menemukan Gagasan Utama.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-indigo-700 text-5xl bg-indigo-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-indigo-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-indigo-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-indigo-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-indigo-500">
<option value="100">100% - Paham Semua & Lancar Menentukan Ide Pokok</option>
<option value="75">75% - Paham Sebagian Besar Paragraf</option>
<option value="50">50% - Masih Perlu Bantuan Membedakan Kalimat Penjelas</option>
<option value="25">25% - Sering Keliru Menentukan Paragraf Induktif</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 bg-gradient-to-r from-indigo-600 to-cyan-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-indigo-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-indigo-700 shadow-[0_4px_0px_#3730a3]">
<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 PARAGRAF TAK TERHINGGA: UJI CEPAT 1 & 2
// ==========================================
let countUji1 = 0;
let countUji2 = 0;
// Bank Soal Slide 5: Menentukan Ide Pokok
const idePokokBank = [
{
p: "Hutan mangrove memiliki peran yang sangat penting dalam menjaga kelestarian kawasan pesisir. Akar pohon mangrove mampu menahan hempasan ombak besar sehingga mencegah abrasi pantai. Selain itu, kawasan bakau ini juga menjadi tempat berkembang biak yang aman bagi ikan dan kepiting kecil.",
c: "Peran penting hutan mangrove bagi kawasan pesisir.",
w: [
"Jenis-jenis ikan kecil yang hidup di kawasan bakau.",
"Bahaya abrasi pantai akibat hempasan ombak besar.",
"Cara menanam pohon bakau di pinggir pantai."
]
},
{
p: "Membiasakan sarapan pagi memberikan banyak manfaat bagi stamina tubuh anak sekolah. Dengan sarapan, energi untuk berpikir dan konsentrasi belajar akan terpenuhi dengan baik. Selain itu, lambung terhindar dari perih dan tubuh tidak mudah lemas selama mengikuti aktivitas di kelas.",
c: "Manfaat sarapan pagi bagi stamina dan konsentrasi anak.",
w: [
"Penyebab utama penyakit lambung dan maag pada siswa.",
"Menu makanan sehat yang disukai oleh anak-anak sekolah.",
"Jadwal belajar harian siswa selama di dalam kelas."
]
},
{
p: "Banyak sampah plastik menumpuk di saluran air permukiman. Kesadaran warga untuk tidak membuang sampah sembarangan juga masih rendah. Ketika musim penghujan tiba dengan intensitas tinggi, selokan tidak mampu menampung luapan air. Oleh sebab itu, banjir kerap melanda kawasan perumahan tersebut.",
c: "Faktor penyebab terjadinya banjir di kawasan perumahan.",
w: [
"Banyaknya sampah plastik yang dapat didaur ulang menjadi kerajinan.",
"Waktu kedatangan musim hujan berintensitas tinggi di perkotaan.",
"Cara warga bergotong royong membersihkan selokan rumah."
]
},
{
p: "Kucing rumahan memiliki kebiasaan tidur yang sangat unik dan panjang. Dalam sehari, kucing bisa menghabiskan waktu tidur antara 12 hingga 16 jam. Hal ini merupakan cara alami mereka untuk menghemat cadangan energi, meniru naluri berburu nenek moyang mereka di alam liar.",
c: "Kebiasaan tidur unik kucing rumahan dalam kesehariannya.",
w: [
"Kekuatan berburu nenek moyang kucing di alam liar yang ganas.",
"Makanan bergizi tinggi yang membuat kucing selalu sehat dan bugar.",
"Perbedaan tingkah laku kucing jantan dan kucing betina."
]
}
];
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let item = idePokokBank[Math.floor(Math.random() * idePokokBank.length)];
document.getElementById('uji-1-passage').innerHTML = `"${item.p}"`;
let options = [
{ text: item.c, isCorrect: true },
{ text: item.w[0], isCorrect: false },
{ text: item.w[1], isCorrect: false },
{ text: item.w[2], isCorrect: false }
];
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 text-left p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt.text;
btn.onclick = () => checkUji1(btn, opt.isCorrect, item.c);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correctText) {
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> Ide pokok yang merangkum keseluruhan isi paragraf adalah: <em>"${correctText}"</em>.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correctText) 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> Pilihan itu hanyalah kalimat penjelas. Ide pokok utamanya adalah: <em>"${correctText}"</em>.`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Bank Soal Slide 6: Menentukan Kalimat Utama Paragraf
const kalimatUtamaBank = [
{
p: "(1) Olahraga jalan kaki secara rutin memiliki banyak manfaat bagi kesehatan jantung. (2) Aktivitas ini membantu melancarkan peredaran darah di dalam pembuluh darah. (3) Denyut nadi menjadi lebih stabil dan tekanan darah tetap terjaga normal. (4) Selain itu, jalan kaki juga ramah bagi persendian lutut.",
c: "(1)",
exp: "Kalimat (1) memuat gagasan payung tentang 'manfaat jalan kaki bagi kesehatan jantung', sedangkan kalimat (2), (3), dan (4) menjelaskan rincian manfaatnya."
},
{
p: "(1) Tanah liat mudah dibentuk saat basah dan menjadi keras setelah dibakar. (2) Serat eceng gondok dapat dianyam menjadi tas dan wadah serbaguna yang bernilai jual tinggi. (3) Kayu jati memiliki serat kokoh yang tahan rayap untuk membuat ukiran indah. (4) Jadi, kekayaan alam Indonesia menyediakan bahan baku kerajinan yang sangat beragam.",
c: "(4)",
exp: "Paragraf ini berjenis induktif; kalimat (1), (2), dan (3) adalah contoh rincian bahan, lalu ditutup oleh kalimat kesimpulan utama pada nomor (4)."
},
{
p: "(1) Bersepeda ke sekolah adalah pilihan transportasi yang sangat ramah lingkungan. (2) Kendaraan roda dua ini sama sekali tidak mengeluarkan asap polusi udara. (3) Bersepeda juga tidak menimbulkan polusi suara bising di jalan raya. (4) Di samping itu, tubuh siswa menjadi lebih segar dan bugar setiap pagi.",
c: "(1)",
exp: "Kalimat utama ada di awal paragraf (1) yang menyatakan sepeda sebagai transportasi ramah lingkungan."
},
{
p: "(1) Wortel mengandung vitamin A tinggi yang sangat baik untuk mata. (2) Sayur bayam kaya akan zat besi yang mencegah tubuh dari rasa letih dan anemia. (3) Brokoli mengandung serat melimpah yang melancarkan pencernaan. (4) Dengan demikian, mengonsumsi aneka sayuran hijau sangat penting untuk menjaga daya tahan tubuh.",
c: "(4)",
exp: "Kalimat (4) merupakan kalimat utama paragraf induktif yang diawali konjungsi penutup 'Dengan demikian'."
}
];
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
let item = kalimatUtamaBank[Math.floor(Math.random() * kalimatUtamaBank.length)];
document.getElementById('uji-2-passage').innerHTML = `${item.p}`;
let options = [
{ text: "Kalimat (1)", val: "(1)" },
{ text: "Kalimat (2)", val: "(2)" },
{ text: "Kalimat (3)", val: "(3)" },
{ text: "Kalimat (4)", val: "(4)" }
];
let optsContainer = document.getElementById('uji-2-options');
optsContainer.innerHTML = "";
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = "guess-btn w-full text-center p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt.text;
btn.onclick = () => checkUji2(btn, opt.val === item.c, item.c, item.exp);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correctVal, explanation) {
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> Kalimat utama terletak pada <b>Kalimat ${correctVal}</b>.<br><span class="text-xs font-normal text-green-700">${explanation}</span>`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML.includes(correctVal)) 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> Kalimat utama yang tepat adalah <b>Kalimat ${correctVal}</b>.<br><span class="text-xs font-normal text-rose-700">${explanation}</span>`;
}
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: "Paragraf yang memiliki kalimat utama di <b>awal paragraf</b> disebut paragraf...",
opts: ["Deduktif", "Induktif", "Campuran"],
ans: 0
},
{
q: "Paragraf yang memiliki kalimat utama di <b>akhir paragraf</b> disebut paragraf...",
opts: ["Deduktif", "Induktif", "Deskriptif"],
ans: 1
},
{
q: "Kalimat yang bertugas menjelaskan atau merinci gagasan utama disebut...",
opts: ["Kalimat Utama", "Kalimat Penjelas", "Kalimat Pembuka"],
ans: 1
},
{
q: "Ide pokok paragraf biasanya dapat kita temukan di dalam...",
opts: ["Kalimat Utama", "Kalimat Penjelas Kedua", "Daftar Pustaka"],
ans: 0
},
{
q: "Teks: 'Kucing, anjing, dan burung adalah hewan peliharaan populer.'<br><b>Topik intinya adalah...</b>",
opts: ["Cara merawat burung", "Hewan peliharaan populer", "Makanan anjing"],
ans: 1
},
{
q: "Konjungsi yang menjadi penanda kalimat utama di akhir (induktif) adalah...",
opts: ["Oleh karena itu", "Misalnya", "Pertama-tama"],
ans: 0
},
{
q: "Jumlah ide pokok dalam satu paragraf yang baik biasanya berjumlah...",
opts: ["Satu ide pokok", "Lima ide pokok", "Bebas berapapun"],
ans: 0
},
{
q: "Ide pokok sering juga disebut dengan istilah...",
opts: ["Gagasan Utama", "Kata Sifat", "Amanat Tambahan"],
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} berhasil menuntaskan 5 analisis ide pokok!`;
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-xs 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-xs 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-xs border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-xs 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 = [
{
passage: "Sampah anorganik membutuhkan waktu puluhan hingga ratusan tahun untuk dapat terurai secara alami di dalam tanah. Kantong plastik misalnya, memerlukan waktu 10 hingga 20 tahun untuk hancur. Sementara itu, botol plastik bahkan membutuhkan waktu lebih dari 450 tahun. Oleh karena itu, pengurangan penggunaan plastik sekali pakai sangat mendesak untuk dilakukan.",
q: "Ide pokok paragraf di atas adalah...",
options: [
"Pentingnya mengurangi penggunaan plastik karena sampah anorganik sulit terurai alami.",
"Waktu hancur botol plastik yang mencapai 450 tahun di dalam tanah.",
"Perbedaan jenis sampah organik basah dan sampah anorganik kering.",
"Cara mendaur ulang kantong plastik kresek menjadi pot bunga hias."
],
a: 0,
exp: "Paragraf diakhiri kalimat kesimpulan (induktif) yang merangkum desakan mengurangi plastik akibat sulitnya terurai."
},
{
passage: "Menjaga kualitas tidur malam sangat penting untuk menjaga kesehatan fisik dan mental seseorang. Tidur yang cukup selama 7–8 jam membantu memulihkan jaringan otot yang lelah beraktivitas. Selain itu, tidur nyenyak juga meningkatkan kemampuan memori dan kestabilan emosi pada keesokan harinya.",
q: "Kalimat utama pada paragraf di atas terletak pada...",
options: [
"Awal paragraf (Deduktif)",
"Akhir paragraf (Induktif)",
"Tengah paragraf saja",
"Tidak ada kalimat utama"
],
a: 0,
exp: "Kalimat pertama merupakan kalimat utama yang memayungi penjelasan tentang pemulihan otot dan fungsi memori."
},
{
passage: "Burung hantu memiliki kemampuan luar biasa untuk berburu mangsa pada malam hari. Pendengaran mereka sangat tajam hingga mampu mendeteksi gerakan tikus di balik rerumputan tebal. Selain itu, bulu sayap mereka dirancang khusus sehingga tidak menimbulkan suara saat terbang menyergap mangsa.",
q: "Ide pokok dari paragraf tersebut adalah...",
options: [
"Ketajaman pendengaran burung hantu saat berada di atas pohon tinggi.",
"Bentuk sayap burung hantu yang berwarna cokelat gelap keabu-abuan.",
"Kemampuan luar biasa burung hantu dalam berburu mangsa pada malam hari.",
"Makanan favorit burung hantu di kawasan persawahan dan perkebunan."
],
a: 2,
exp: "Ide pokok bersumber dari kalimat pertama mengenai kehebatan adaptasi burung hantu saat berburu di malam hari."
},
{
passage: "Ciri-ciri kalimat penjelas yang benar dalam sebuah paragraf adalah...",
options: [
"Memuat rincian khusus, data pendukung, atau contoh yang memperjelas ide pokok.",
"Selalu menjadi judul utama dalam sebuah buku atau karangan ilmiah.",
"Hanya boleh ditulis satu kata saja di setiap baris paragraf.",
"Tidak memiliki kaitan makna sama sekali dengan kalimat utama."
],
a: 0,
exp: "Fungsi utama kalimat penjelas adalah menguraikan dan menyajikan rincian pendukung bagi kalimat utama."
},
{
passage: "Minum air putih yang cukup saat bangun tidur pagi memberikan segudang manfaat. Kebiasaan ini membantu mengaktifkan organ dalam tubuh dan membersihkan racun sisa metabolisme. Minum air di pagi hari juga dapat meningkatkan metabolisme tubuh dan mencegah dehidrasi setelah berpuasa semalaman.",
q: "Gagasan pokok paragraf di atas membahas tentang...",
options: [
"Bahaya dehidrasi bagi kesehatan organ dalam manusia.",
"Manfaat minum air putih yang cukup saat bangun tidur di pagi hari.",
"Waktu terbaik untuk tidur malam selama delapan jam penuh.",
"Jumlah racun yang dikeluarkan tubuh saat berkeringat."
],
a: 1,
exp: "Topik utama yang diuraikan secara menyeluruh adalah manfaat kebiasaan minum air putih saat bangun pagi."
}
];
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-indigo-300 shadow-md text-center space-y-4">
<span class="text-6xl">🎉</span>
<h3 class="text-3xl font-black text-indigo-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal penentuan ide pokok dengan sangat cermat.</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-passage-box').innerHTML = `"${current.passage}"`;
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-sm hover:bg-indigo-50 hover:border-indigo-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-sm 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-sm 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 Menentukan Ide Pokok Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Ide Pokok: " + refleksi,
strategi: "Evaluasi: Menentukan Ide Pokok Paragraf"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 7
Penguatan Literasi Dasar
Menyimpulkan Isi Cerita
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia: Menyimpulkan Isi Cerita 📚✨</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fff7ed;
background-image: radial-gradient(#fed7aa 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: #ea580c !important; color: white !important; border-bottom-color: #c2410c !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-family: 'Nunito', sans-serif; line-height: 1.6; }
.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-orange-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-orange-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="book-open" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-orange-950 uppercase tracking-widest">Literasi Membaca - Menyimpulkan Isi Cerita</span>
<span id="progress-text" class="text-xs font-black text-white bg-orange-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-amber-400 via-orange-500 to-rose-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-3xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-orange-100 text-orange-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase B / D - Literasi Membaca Cerita
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Petualang Kata: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-rose-600">Menyimpulkan Isi Cerita</span> 📚✨
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-orange-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-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-orange-700">menentukan inti cerita</span> berdasarkan hubungan tokoh, peristiwa penting, dan penyelesaian masalah.</li>
<li>Peserta didik dapat <span class="text-orange-700">merumuskan kesimpulan dan pesan moral (amanat)</span> yang terkandung di dalam cerita menggunakan bahasa sendiri.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap merangkum inti kisah dengan tepat? Yuk, kita mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Cerita Singkat -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Membaca Alur Kisah 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menyimpulkan bukan menyalin ulang seluruh cerita, melainkan menangkap sari pati intinya!</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm space-y-4 mt-2">
<div class="bg-orange-50/80 p-4 rounded-2xl border border-orange-200 text-slate-800 text-sm leading-relaxed text-box">
<p class="font-bold">"Semut kecil terpeleset ke sungai yang berarus deras. Burung merpati yang melihatnya segera menjatuhkan sehelai daun kering sehingga semut bisa naik dan selamat sampai ke tepi. Beberapa hari kemudian, semut melihat seorang pemburu membidikkan senapan ke arah merpati. Semut langsung menggigit kaki pemburu hingga tembakannya meleset dan merpati pun bisa terbang menyelamatkan diri."</p>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-xs font-black uppercase text-amber-800 tracking-wider">Inti Peristiwa:</span>
<p class="text-xs font-bold text-slate-700">Merpati menolong semut yang hanyut, lalu semut membalas kebaikan itu dengan menyelamatkan merpati dari bidikan pemburu.</p>
</div>
<div class="bg-rose-50 p-4 rounded-2xl border border-rose-200 space-y-1">
<span class="text-xs font-black uppercase text-rose-800 tracking-wider">Kesimpulan Cerita:</span>
<p class="text-xs font-bold text-rose-900">Perbuatan baik akan selalu mendatangkan kebaikan kembali bagi yang suka menolong sesama.</p>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-2xl border-2 border-slate-200 text-center text-slate-700 font-bold">
💡 <strong>Rumus Cepat:</strong> Kesimpulan = <em>Siapa tokohnya + Apa tantangan intinya + Bagaimana akhirnya</em>!
</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 temanmu menceritakan film bioskop berdurasi 2 jam hanya dalam waktu 1 menit, mengapa kamu bisa langsung paham jalan ceritanya?"
</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">💡 Rahasia Menyimpulkan:</p>
<p class="text-slate-700 font-bold mt-1">Karena temanmu hanya menceritakan <strong>garis besar peristiwa pentingnya saja</strong>, membuang dialog tambahan yang tidak perlu, dan menyampaikan akhir ceritanya!</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-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Di Mana Saja Keterampilan Menyimpulkan Ini Digunakan?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🎬</span>
<h4 class="font-black text-xl text-orange-800">Sinopsis Film & Buku</h4>
<p class="text-slate-600 font-bold text-sm">Membaca ringkasan di balik sampul novel atau trailer film sebelum memutuskan untuk membeli tiket.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🗣️</span>
<h4 class="font-black text-xl text-orange-800">Menyampaikan Laporan</h4>
<p class="text-slate-600 font-bold text-sm">Ketua kelompok merangkum hasil diskusi panjang anggota kelas menjadi 3 poin kesimpulan ringkas.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🧭</span>
<h4 class="font-black text-xl text-orange-800">Mengambil Pelajaran Hidup</h4>
<p class="text-slate-600 font-bold text-sm">Mengetahui nasihat berharga dari dongeng atau cerita rakyat masa lalu agar kita terhindar dari sifat sombong.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Tiga Pilar Kesimpulan Cerita + 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-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Materi 1: 3 Pilar Menyimpulkan Cerita 🏛️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-3 gap-3 text-xs font-bold text-slate-700">
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200">
<span class="text-amber-800 text-sm font-black block mb-1">1. Tokoh Utama</span>
Siapa yang menjadi fokus kisah dan apa watak/sifat perilakunya.
</div>
<div class="bg-orange-50 p-4 rounded-2xl border border-orange-200">
<span class="text-orange-800 text-sm font-black block mb-1">2. Masalah / Konflik</span>
Kejadian mendebarkan atau kesulitan apa yang harus dihadapi tokoh.
</div>
<div class="bg-rose-50 p-4 rounded-2xl border border-rose-200">
<span class="text-rose-800 text-sm font-black block mb-1">3. Akhir Kisah (Solusi)</span>
Bagaimana masalah tersebut berhasil diselesaikan dan apa hasil akhirnya.
</div>
</div>
<!-- Uji Cepat Generator Cerita Acak Tak Terhingga: Menentukan Inti Cerita -->
<div class="bg-orange-50/70 p-6 rounded-3xl border-2 border-orange-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-orange-950 text-lg flex items-center gap-2">🎮 Uji Cepat Mandiri: Menentukan Inti Cerita</h4>
<p class="text-slate-600 font-bold text-xs">Baca cerita pendek berikut, lalu pilih kalimat kesimpulan inti yang paling tepat!</p>
</div>
<div class="bg-orange-200 text-orange-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-orange-200 text-left">
<div id="uji-1-story" class="p-4 bg-orange-50/60 rounded-xl border border-orange-200 font-bold text-slate-800 text-sm mb-3">Memuat cerita...</div>
<p id="uji-1-prompt" class="text-base font-black text-orange-900 mb-3">Kesimpulan yang paling tepat dari cerita di atas adalah...</p>
<div id="uji-1-options" class="grid grid-cols-1 gap-2.5"></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-orange-600 hover:bg-orange-700 text-white font-black rounded-xl text-sm transition">
🔄 Cerita Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Menyimpulkan Pesan Moral (Amanat) + 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 2: Memetik Amanat (Pesan Moral) 💎</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-base">Ciri Kalimat Amanat</h4>
<p class="text-xs font-bold text-slate-700">Amanat adalah nasihat positif yang ingin disampaikan pengarang kepada pembaca. Biasanya diawali kata:</p>
<ul class="text-xs font-bold text-rose-900 list-disc list-inside space-y-1">
<li><em>"Kita hendaknya..."</em></li>
<li><em>"Janganlah kita..."</em></li>
<li><em>"Sebaiknya kita selalu..."</em></li>
</ul>
</div>
<div class="bg-amber-50 p-5 rounded-2xl border-2 border-amber-200 space-y-2">
<h4 class="font-black text-amber-900 text-base">Cara Cepat Memetik Pesan</h4>
<p class="text-xs font-bold text-slate-700">Perhatikan akibat dari perbuatan tokoh:</p>
<ul class="text-xs font-bold text-slate-700 list-disc list-inside space-y-1">
<li>Jika tokoh malas lalu celaka → pesannya: <em>hindari rasa malas</em>.</li>
<li>Jika tokoh jujur lalu dipercaya → pesannya: <em>berlakulah jujur</em>.</li>
</ul>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Memetik Pesan Moral -->
<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: Memetik Nasihat Cerita</h4>
<p class="text-slate-600 font-bold text-xs">Pilihlah pesan moral (amanat) yang terkandung di dalam kisah berikut!</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-2">0</span>
</div>
</div>
<div class="bg-white p-5 rounded-2xl border border-rose-200 text-left">
<div id="uji-2-story" class="p-4 bg-rose-50/60 rounded-xl border border-rose-200 font-bold text-slate-800 text-sm mb-3">Memuat cerita...</div>
<p id="uji-2-prompt" class="text-base font-black text-rose-900 mb-3">Pesan moral yang dapat dipetik dari cerita di atas adalah...</p>
<div id="uji-2-options" class="grid grid-cols-1 gap-2.5"></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-rose-600 hover:bg-rose-700 text-white font-black rounded-xl text-sm transition">
🔄 Cerita 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-orange-600 to-rose-600 tracking-wide uppercase">⚡ BATTLE PANEL KESIMPULAN CERITA (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Analisis cuplikan cerita dan pilih kesimpulannya 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-amber-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-amber-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-amber-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-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-left">
<p id="ifp-q-1" class="text-xs font-black 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-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-orange-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-orange-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-orange-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-orange-50 p-4 rounded-2xl border-2 border-orange-100 text-left">
<p id="ifp-q-2" class="text-xs font-black 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-xs text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<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 3</span>
<span id="ifp-score-3" 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-left">
<p id="ifp-q-3" class="text-xs font-black 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-xs 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-orange-400 mb-6 drop-shadow-lg">JUARA KELOMPOK LITERASI!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-orange-600 hover:bg-orange-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9a3412] 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">Baca setiap cerita dengan cermat dan simpulkan intinya secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-orange-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-orange-800 bg-orange-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<div id="eval-passage-box" class="p-4 bg-orange-50/70 rounded-2xl border border-orange-200 text-slate-800 font-bold text-sm mb-4 leading-relaxed"></div>
<p id="eval-q-text" class="text-xl font-black text-slate-900 mb-4 leading-relaxed"></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 belajar teknik menyimpulkan isi cerita 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 Merangkum!</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 Banyak Membaca</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">Cerita seperti apa yang paling kamu sukai untuk disimpulkan pesannya?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-orange-50 border-2 border-orange-200 focus:border-orange-500 outline-none font-medium" rows="3" placeholder="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-orange-900 mb-1">Hebat! Kamu Ahli Menyimpulkan Kisah.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-orange-700 text-5xl bg-orange-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-orange-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-orange-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-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-orange-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-orange-500">
<option value="100">100% - Paham Semua & Lancar Menarik Kesimpulan</option>
<option value="75">75% - Paham Sebagian Besar Alur Kisah</option>
<option value="50">50% - Masih Perlu Waktu Memisahkan Fakta Penting</option>
<option value="25">25% - Sering Bingung Menentukan Amanat</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 bg-gradient-to-r from-orange-600 to-rose-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim 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-orange-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-orange-700 shadow-[0_4px_0px_#9a3412]">
<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 CERITA TAK TERHINGGA: UJI CEPAT 1 & 2
// ==========================================
let countUji1 = 0;
let countUji2 = 0;
// Bank Soal Slide 5: Menentukan Inti Kesimpulan Cerita
const simpulanBank = [
{
story: "Kancil yang sombong menantang Kura-kura lomba lari. Karena merasa pasti menang, Kancil tertidur lelap di bawah pohon rindang. Kura-kura terus melangkah pelan tanpa menyerah hingga akhirnya berhasil menyentuh garis finis lebih dulu.",
c: "Kura-kura yang gigih berhasil memenangkan lomba lari karena Kancil meremehkan lawan dan tertidur.",
w: [
"Kancil adalah hewan pelari tercepat di hutan yang disukai semua binatang.",
"Kura-kura menang lomba lari karena dibantu oleh teman-temannya di garis finis.",
"Pohon rindang di hutan adalah tempat yang paling nyaman untuk tidur siang."
]
},
{
story: "Bimo sering menunda-nunda mengerjakan tugas sekolah dan asyik bermain game. Saat malam sebelum pengumpulan tugas, listrik di rumahnya tiba-tiba padam dan Bimo pun panik tidak bisa belajar. Keesokan harinya, ia ditegur oleh guru karena tidak mengumpulkan PR.",
c: "Kebiasaan Bimo menunda tugas membuatnya mendapat masalah saat terjadi hal di luar dugaan.",
w: [
"Listrik padam adalah penyebab utama seluruh siswa di sekolah tidak mengumpulkan PR.",
"Bermain game di malam hari membuat mata Bimo sakit dan mengantuk.",
"Guru memaafkan Bimo dan memberinya nilai sempurna untuk tugasnya."
]
},
{
story: "Raja hutan Singa tertancap duri landak di telapak kakinya dan mengerang kesakitan. Tidak ada hewan yang berani mendekat kecuali Tikus kecil yang berani mencabut duri tersebut. Sejak saat itu, Singa dan Tikus menjadi sahabat setia.",
c: "Keberanian Tikus kecil menolong Singa yang terluka menciptakan persahabatan sejati di antara mereka.",
w: [
"Duri landak adalah benda yang sangat berbahaya bagi seluruh penghuni hutan rimba.",
"Tikus mengalahkan Singa dan menjadikannya pelindung dari ancaman predator lain.",
"Singa mengusir semua hewan dari hutan karena mereka takut mendekatinya."
]
},
{
story: "Dodi rajin menyisihkan sebagian uang sakunya di celengan bambu setiap hari selama enam bulan. Saat sepedanya rusak dan butuh suku cadang baru, Dodi mampu membelinya sendiri dengan uang tabungannya tanpa membebani orang tua.",
c: "Kebiasaan berhemat dan menabung Dodi membuahkan hasil saat ia membutuhkan biaya mendesak.",
w: [
"Celengan dari bambu adalah tempat menyimpan uang terbaik dibanding bank resmi.",
"Dodi meminta sepeda baru kepada orang tuanya sebagai hadiah ulang tahun.",
"Sepeda rusak milik Dodi dijual kepada tukang rongsok di dekat rumahnya."
]
}
];
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let item = simpulanBank[Math.floor(Math.random() * simpulanBank.length)];
document.getElementById('uji-1-story').innerHTML = `"${item.story}"`;
let options = [
{ text: item.c, isCorrect: true },
{ text: item.w[0], isCorrect: false },
{ text: item.w[1], isCorrect: false },
{ text: item.w[2], isCorrect: false }
];
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 text-left p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt.text;
btn.onclick = () => checkUji1(btn, opt.isCorrect, item.c);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correctText) {
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> Kesimpulan yang utuh memuat tokoh, konflik, dan penyelesaiannya: <em>"${correctText}"</em>.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correctText) 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> Kesimpulan yang merangkum keseluruhan cerita adalah: <em>"${correctText}"</em>.`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Bank Soal Slide 6: Memetik Pesan Moral (Amanat)
const amanatBank = [
{
story: "Gagak merasa bulunya jelek dan menempelkan bulu burung merak yang berwarna-warni di tubuhnya. Namun burung merak lain mengenalinya dan mencabuti bulu palsu itu hingga Gagak merasa malu dan dijauhi teman-temannya.",
c: "Kita hendaknya selalu bersyukur dan percaya diri dengan apa yang kita miliki tanpa berpura-pura menjadi orang lain.",
w: [
"Bulu burung merak adalah hiasan paling indah yang harus dicari di dalam hutan.",
"Burung gagak sebaiknya tidak terbang di dekat kawanan burung merak.",
"Meniru gaya orang lain adalah cara tercepat untuk mendapatkan teman baru."
]
},
{
story: "Andi menemukan dompet tebal berisi uang di kantin sekolah. Meski sedang butuh uang jajan, Andi langsung menyerahkan dompet itu ke ruang guru. Pemilik dompet sangat bersyukur dan guru mengumumkan kejujuran Andi di depan upacara bendera.",
c: "Kejujuran adalah sifat mulia yang akan mendatangkan ketenangan hati dan kehormatan diri.",
w: [
"Uang yang ditemukan di tempat umum sebaiknya disimpan untuk keperluan pribadi.",
"Menemukan dompet di kantin adalah tanda keberuntungan besar bagi siswa.",
"Kita hanya perlu berbuat jujur jika ada orang yang melihat perbuatan kita."
]
},
{
story: "Pohon Beringin yang besar sering mengejek semak belukar yang pendek dan rapuh. Suatu hari angin puting beliung menerjang. Pohon beringin tumbang karena batangnya yang kaku menahan angin kencang, sedangkan semak belukar tetap selamat karena lentur bergoyang mengikuti arah angin.",
c: "Janganlah bersikap sombong dan merendahkan orang lain karena setiap ciptaan memiliki kelebihan masing-masing.",
w: [
"Pohon beringin harus ditanam di dalam pot agar tidak mudah tumbang terkena angin.",
"Angin puting beliung adalah musuh terbesar bagi semua tanaman tinggi di hutan.",
"Semua semak belukar di halaman sekolah sebaiknya dipotong sampai bersih."
]
},
{
story: "Dina dan Rian bertengkar berebut giliran bermain ayunan di taman hingga rantai ayunan putus dan keduanya terjatuh. Setelah menyadari kesalahannya, mereka saling meminta maaf dan berjanji akan selalu bergantian antre dengan rukun.",
c: "Sikap saling mengalah dan mau berbagi akan menghindarkan kita dari pertengkaran dan kerugian bersama.",
w: [
"Bermain ayunan di taman sebaiknya dihindari karena mudah patah.",
"Anak yang paling kuat berhak bermain ayunan lebih lama dibanding yang lain.",
"Minta maaflah hanya jika orang lain terlebih dahulu meminta maaf kepada kita."
]
}
];
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
let item = amanatBank[Math.floor(Math.random() * amanatBank.length)];
document.getElementById('uji-2-story').innerHTML = `"${item.story}"`;
let options = [
{ text: item.c, isCorrect: true },
{ text: item.w[0], isCorrect: false },
{ text: item.w[1], isCorrect: false },
{ text: item.w[2], isCorrect: false }
];
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 text-left p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt.text;
btn.onclick = () => checkUji2(btn, opt.isCorrect, item.c);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correctText) {
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> Amanat yang tepat mencerminkan nasihat positif dari akibat kisah: <em>"${correctText}"</em>.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correctText) 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> Nasihat yang paling sesuai dengan pesan pengarang adalah: <em>"${correctText}"</em>.`;
}
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: "Kisah Kancil mencuri ketimun dan terperangkap pulut petani.<br><b>Apa pesan moral cerita tersebut?</b>",
opts: ["Jangan mengambil barang milik orang lain", "Petani harus membuat pagar tinggi", "Kancil adalah hewan pintar"],
ans: 0
},
{
q: "Kisah Malin Kundang dikutuk menjadi batu karena durhaka kepada ibunya.<br><b>Apa kesimpulan amanat cerita ini?</b>",
opts: ["Kapal besar mudah karam di laut", "Kita wajib berbakti dan menghormati orang tua", "Mencari kekayaan di negeri orang dilarang"],
ans: 1
},
{
q: "Menyimpulkan isi cerita dilakukan dengan cara...",
opts: ["Menghafal nama semua tokoh pembantu", "Menggabungkan peristiwa penting menjadi satu inti cerita", "Menulis kembali kata demi kata"],
ans: 1
},
{
q: "Semut bekerja keras mengumpulkan bekal musim dingin, Belalang bermalas-malasan.<br><b>Akibat perilaku Belalang adalah...</b>",
opts: ["Kelaparan saat musim dingin tiba", "Menjadi sahabat baik semut", "Mendapat hadiah makanan gratis"],
ans: 0
},
{
q: "Unsur cerita yang berisi pesan atau nasihat dari pengarang disebut...",
opts: ["Amanat", "Latar tempat", "Alur mundur"],
ans: 0
},
{
q: "Kisah Burung Gagak menjatuhkan kerikil ke kendi air agar bisa minum.<br><b>Watak Burung Gagak adalah...</b>",
opts: ["Cerdik dan pantang menyerah", "Sombong dan pemarah", "Malas dan penakut"],
ans: 0
},
{
q: "Perbedaan utama rangkuman dan kesimpulan adalah...",
opts: ["Kesimpulan memuat inti sari dan makna cerita", "Rangkuman selalu lebih pendek dari judul", "Keduanya sama sekali tidak berbeda"],
ans: 0
},
{
q: "Pernyataan yang tepat mengenai akhir cerita (koda) adalah...",
opts: ["Bagian penyelesaian masalah dan pelajaran cerita", "Halaman daftar isi buku", "Awal kemunculan masalah tokoh"],
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} berhasil menuntaskan 5 analisis kesimpulan!`;
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-xs 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-xs 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-xs border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-xs 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 = [
{
passage: "Kakek menanam bibit pohon beringin di bukit gundul dekat desa. Para warga sempat menertawakannya karena pohon itu butuh puluhan tahun untuk tumbuh besar. Tiga puluh tahun kemudian, bukit itu menjadi hutan rindang yang menjadi sumber mata air jernih dan melindungi desa dari bahaya longsor.",
q: "Kesimpulan yang paling tepat dari cerita di atas adalah...",
options: [
"Usaha menanam pohon oleh Kakek terbukti membawa manfaat besar bagi kelestarian desa di masa depan.",
"Warga desa menolak mengambil air bersih dari bukit karena bukit itu sangat jauh.",
"Pohon beringin adalah satu-satunya tanaman yang mampu bertahan hidup di perbukitan gundul.",
"Menanam pohon di bukit adalah pekerjaan yang membuang waktu dan tenaga sia-sia."
],
a: 0,
exp: "Kesimpulan merangkum tindakan Kakek yang semula diragukan warga namun akhirnya memberikan mata air dan mencegah longsor bagi desa."
},
{
passage: "Kelinci yang merasa dirinya pelari tercepat menertawakan Kura-kura yang berjalan lambat. Saat lomba lari dimulai, Kelinci tidur karena yakin menang. Kura-kura terus berjalan stabil tanpa berhenti hingga berhasil menjadi pemenang.",
q: "Amanat atau pesan moral yang terkandung dalam cerita tersebut adalah...",
options: [
"Lomba lari hanya boleh diikuti oleh hewan berkaki empat.",
"Jangan meremehkan orang lain dan bersikap sombong karena ketekunan dapat mengalahkan kesombongan.",
"Tidur di bawah pohon rindang membuat tubuh kita menjadi lebih sehat dan bugar.",
"Berlarilah secepat mungkin agar bisa segera tidur siang sebelum matahari terbenam."
],
a: 1,
exp: "Amanat cerita adalah pesan moral tentang bahaya kesombongan dan keutamaan bersikap tekun."
},
{
passage: "Laras lupa membawa buku tugas matematika. Ia ragu apakah harus berbohong kepada Bu Guru atau mengaku jujur. Akhirnya Laras memberanikan diri meminta maaf dan berjanji mengumpulkannya besok pagi. Bu Guru menghargai kejujuran Laras dan mengingatkannya untuk lebih teliti.",
q: "Inti penyelesaian masalah (solusi) dalam cerita di atas adalah...",
options: [
"Laras meminjam buku PR milik temannya dan menyalinnya di toilet.",
"Laras memilih berkata jujur dan meminta maaf secara bertanggung jawab kepada guru.",
"Bu Guru menghukum Laras berdiri di depan kelas selama pelajaran berlangsung.",
"Laras memutuskan untuk pulang ke rumah dan tidak mengikuti pelajaran matematika."
],
a: 1,
exp: "Penyelesaian masalah terjadi ketika Laras memilih untuk berterus terang dan meminta maaf secara kesatria."
},
{
passage: "Dua ekor kambing saling berhadapan di atas jembatan batang kayu yang sempit di atas jurang. Tidak ada yang mau mengalah mundur agar kambing lain bisa lewat. Keduanya saling menanduk hingga akhirnya sama-sama terperosok jatuh ke dalam sungai deras di bawahnya.",
q: "Kesimpulan yang tepat mengenai akibat dari peristiwa dalam cerita tersebut adalah...",
options: [
"Keduanya mengalami celaka karena sama-sama egois dan tidak mau saling mengalah.",
"Jembatan kayu di atas jurang itu sangat kuat sehingga kedua kambing selamat.",
"Salah satu kambing berhasil menyeberangi jembatan dengan melompati lawannya.",
"Air sungai yang deras berhasil memadamkan kebakaran hutan di dekat jembatan."
],
a: 0,
exp: "Kedua kambing celaka jatuh ke jurang akibat sifat keras kepala dan tidak mau mengalah."
},
{
passage: "Menyimpulkan isi cerita yang baik harus didasarkan pada...",
options: [
"Perasaan suka atau tidak suka kita terhadap watak tokoh cerita.",
"Fakta alur keseluruhan peristiwa penting dari awal hingga akhir cerita.",
"Jumlah halaman dan ketebalan buku cerita yang kita baca.",
"Hanya kalimat pertama pada paragraf pembuka cerita saja."
],
a: 1,
exp: "Kesimpulan yang tepat harus bertumpu pada keseluruhan jalinan peristiwa penting dari awal, konflik, hingga penyelesaian."
}
];
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-orange-300 shadow-md text-center space-y-4">
<span class="text-6xl">🎉</span>
<h3 class="text-3xl font-black text-orange-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal menyimpulkan cerita dengan sangat cermat.</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-passage-box').innerHTML = `"${current.passage}"`;
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-sm hover:bg-orange-50 hover:border-orange-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-sm 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-sm 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 Menyimpulkan Cerita Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Kesimpulan Cerita: " + refleksi,
strategi: "Evaluasi: Menyimpulkan Isi Cerita"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
Kelas 7
Penguatan Literasi Dasar
Menemukan Informasi Tersurat
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia: Detektif Informasi Tersurat 🔍📖</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: #fefce8;
background-image: radial-gradient(#fef08a 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: #059669 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-family: 'Nunito', sans-serif; line-height: 1.6; }
.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-amber-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-amber-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="search" 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-amber-900 uppercase tracking-widest">Literasi Membaca - Menemukan Informasi Tersurat</span>
<span id="progress-text" class="text-xs font-black text-white bg-amber-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-yellow-400 via-amber-500 to-emerald-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-amber-100 text-amber-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase B / D - Literasi Membaca
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi Detektif: <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-emerald-600">Informasi Tersurat</span> 🔍📖
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-100 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-amber-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-amber-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-amber-700">menjelaskan pengertian informasi tersurat</span> yang tertulis secara langsung dan jelas di dalam teks bacaan.</li>
<li>Peserta didik dapat <span class="text-amber-700">menemukan informasi spesifik</span> menggunakan kata kunci pertanyaan Adiksimba (Apa, Di mana, Kapan, Siapa, Mengapa, Bagaimana).</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membaca teliti seperti seorang detektif? Yuk, kita mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Teks Nyata -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Mengamati Jejak Tulisan 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Informasi tersurat ibarat jejak kaki yang terlihat jelas di tanah, tanpa perlu ditebak-tebak!</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-4 mt-2">
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 text-slate-800 text-base leading-relaxed text-box">
<p class="font-bold">"Rani dan teman-temannya mengunjungi Museum Bahari pada hari <strong>Sabtu, 12 Oktober</strong>. Mereka berangkat menggunakan bus sekolah pukul <strong>07.30 WIB</strong>."</p>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-200 space-y-1">
<span class="text-xs font-black uppercase text-emerald-800 tracking-wider">Pertanyaan:</span>
<p class="text-sm font-bold text-slate-700">Kapan Rani pergi ke museum?</p>
<p class="text-xs font-bold text-emerald-700 bg-white p-2 rounded-lg border border-emerald-200">
Jawaban tertulis langsung: <strong>Hari Sabtu, 12 Oktober</strong>.
</p>
</div>
<div class="bg-blue-50 p-4 rounded-2xl border border-blue-200 space-y-1">
<span class="text-xs font-black uppercase text-blue-800 tracking-wider">Pertanyaan:</span>
<p class="text-sm font-bold text-slate-700">Kendaraan apa yang digunakan?</p>
<p class="text-xs font-bold text-blue-700 bg-white p-2 rounded-lg border border-blue-200">
Jawaban tertulis langsung: <strong>Bus sekolah</strong>.
</p>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-2xl border-2 border-slate-200 text-center text-slate-700 font-bold">
💡 <strong>Kunci Utama:</strong> Informasi tersurat adalah fakta yang <em>kata-katanya tertulis nyata</em> di dalam teks bacaan!
</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-orange-100 text-orange-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 membaca teks sepanjang 5 halaman dan hanya ingin mencari jam keberangkatan kereta, apakah kita wajib membaca kata demi kata dari awal sampai akhir?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Jurus Pemindai (Scanning):</p>
<p class="text-slate-700 font-bold mt-1">Tentu tidak! Cukup arahkan pandangan mata untuk mencari <strong>kata kunci</strong> seperti angka jam, kata 'pukul', atau simbol waktu. Itulah cara tercepat menemukan informasi tersurat!</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-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Di Mana Saja Kita Menggunakan Keterampilan Informasi Tersurat?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">💊</span>
<h4 class="font-black text-xl text-amber-800">Petunjuk Obat</h4>
<p class="text-slate-600 font-bold text-sm">Menemukan dosis minum obat: "Diminum 3 kali sehari setelah makan" (fakta tertulis di kemasan).</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🎫</span>
<h4 class="font-black text-xl text-amber-800">Tiket Kereta & Bioskop</h4>
<p class="text-slate-600 font-bold text-sm">Mencari nomor gerbong, nomor kursi, dan jam mulai pemutaran film secara tepat.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🍳</span>
<h4 class="font-black text-xl text-amber-800">Resep & Cara Pemakaian</h4>
<p class="text-slate-600 font-bold text-sm">Membaca takaran air: "Rebus mi selama 3 menit dalam 400 ml air mendidih".</p>
</div>
</div>
</div>
<!-- Slide 5: Materi 1 - Rumus Kata Kunci ADIKSIMBA + 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-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Menyelidiki dengan ADIKSIMBA 🕵️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-amber-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-3 gap-3 text-xs font-bold text-slate-700">
<div class="bg-amber-50 p-3 rounded-2xl border border-amber-200">
<span class="text-amber-800 text-sm font-black block">APA?</span>
Menanyakan benda, nama kegiatan, atau hal yang terjadi.
</div>
<div class="bg-amber-50 p-3 rounded-2xl border border-amber-200">
<span class="text-amber-800 text-sm font-black block">DI MANA?</span>
Menanyakan lokasi, tempat, atau arah keberadaan.
</div>
<div class="bg-amber-50 p-3 rounded-2xl border border-amber-200">
<span class="text-amber-800 text-sm font-black block">KAPAN?</span>
Menanyakan waktu (hari, tanggal, jam, tahun, masa).
</div>
<div class="bg-emerald-50 p-3 rounded-2xl border border-emerald-200">
<span class="text-emerald-800 text-sm font-black block">SIAPA?</span>
Menanyakan orang, tokoh, pelaku, atau subjek.
</div>
<div class="bg-emerald-50 p-3 rounded-2xl border border-emerald-200">
<span class="text-emerald-800 text-sm font-black block">MENGAPA?</span>
Menanyakan alasan, faktor penyebab, atau tujuan.
</div>
<div class="bg-emerald-50 p-3 rounded-2xl border border-emerald-200">
<span class="text-emerald-800 text-sm font-black block">BAGAIMANA?</span>
Menanyakan cara, proses kerja, atau keadaan tokoh.
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Menemukan Informasi ADIKSIMBA -->
<div class="bg-amber-50/70 p-6 rounded-3xl border-2 border-amber-300 space-y-3">
<div class="flex justify-between items-center flex-wrap gap-2">
<div>
<h4 class="font-black text-amber-950 text-lg flex items-center gap-2">🎮 Uji Cepat Mandiri: Temukan Jawaban di Dalam Teks</h4>
<p class="text-slate-600 font-bold text-xs">Perhatikan teks pendeknya dan temukan jawaban tersuratnya secara tepat!</p>
</div>
<div class="bg-amber-200 text-amber-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-amber-200 text-left">
<div id="uji-1-passage" class="p-4 bg-amber-50/60 rounded-xl border border-amber-200 font-bold text-slate-800 text-sm mb-3">Memuat teks...</div>
<p id="uji-1-question" class="text-base font-black text-amber-900 mb-3">Pertanyaan: ...</p>
<div id="uji-1-options" class="grid grid-cols-1 md:grid-cols-2 gap-2.5"></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-amber-600 hover:bg-amber-700 text-white font-black rounded-xl text-sm transition">
🔄 Soal Baru Berikutnya
</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi 2 - Membedakan Tersurat vs Tersirat + 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: Hati-hati dengan Informasi Tersirat! ⚠️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md mt-2 space-y-5">
<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">Informasi Tersurat (Nyata Ada)</h4>
<ul class="text-xs font-bold text-slate-700 list-disc list-inside space-y-1">
<li>Tertulis langsung di lembar teks.</li>
<li>Tidak perlu menebak atau menyimpulkan sendiri.</li>
<li>Buktinya bisa ditunjuk dengan jari pada kalimatnya.</li>
</ul>
</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">Informasi Tersirat (Tersembunyi)</h4>
<ul class="text-xs font-bold text-slate-700 list-disc list-inside space-y-1">
<li>Tidak tertulis langsung dengan kata-kata teks.</li>
<li>Harus disimpulkan dari petunjuk konteks cerita.</li>
<li>Contoh: "Budi berkeringat dan memegang payung basah" → tersirat bahwa sedang hujan lebat.</li>
</ul>
</div>
</div>
<!-- Uji Cepat Generator Soal Tak Terhingga: Bedakan Tersurat vs Tersirat -->
<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: Uji Ketelitian Bukti Teks</h4>
<p class="text-slate-600 font-bold text-xs">Pilihlah fakta yang benar-benar tertulis langsung (tersurat) pada teks!</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-left">
<div id="uji-2-passage" class="p-4 bg-emerald-50/60 rounded-xl border border-emerald-200 font-bold text-slate-800 text-sm mb-3">Memuat teks...</div>
<p id="uji-2-question" class="text-base font-black text-emerald-900 mb-3">Pernyataan manakah yang merupakan informasi tersurat?</p>
<div id="uji-2-options" class="grid grid-cols-1 gap-2.5"></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-amber-600 to-emerald-600 tracking-wide uppercase">⚡ BATTLE PANEL DETEKTIF BACA (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Temukan informasi tersurat dari teks kilat 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-amber-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-amber-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-amber-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-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-left">
<p id="ifp-q-1" class="text-sm font-black 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-left">
<p id="ifp-q-2" class="text-sm font-black 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-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 3</span>
<span id="ifp-score-3" 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-left">
<p id="ifp-q-3" class="text-sm font-black 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-emerald-400 mb-6 drop-shadow-lg">JUARA DETEKTIF MEMBACA!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#065f46] 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">Baca teks dan temukan informasi tersuratnya secara mandiri.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-amber-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-amber-800 bg-amber-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<div id="eval-passage-box" class="p-4 bg-amber-50/70 rounded-2xl border border-amber-200 text-slate-800 font-bold text-sm mb-4 leading-relaxed"></div>
<p id="eval-q-text" class="text-xl font-black text-slate-900 mb-4 leading-relaxed"></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 belajar teknik membaca informasi tersurat 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 Ditemukan!</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">Perlu Lebih Teliti</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 Terkecoh</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">Kata tanya mana dalam ADIKSIMBA yang paling sering kamu gunakan hari ini?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-amber-50 border-2 border-amber-200 focus:border-amber-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-amber-900 mb-1">Hebat! Kamu Detektif Membaca Handal.</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-4">
Skor Akhirmu: <span id="final-score-display" class="text-emerald-700 text-5xl bg-emerald-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-amber-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-amber-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-amber-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-amber-500">
<option value="100">100% - Paham Semua & Sangat Cepat Menemukan</option>
<option value="75">75% - Paham Sebagian Besar Fakta</option>
<option value="50">50% - Masih Terkadang Tertukar Tersurat dan Tersirat</option>
<option value="25">25% - Masih Perlu Bimbingan Membaca</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-2 bg-gradient-to-r from-amber-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-amber-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-amber-700 shadow-[0_4px_0px_#b45309]">
<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;
// Bank Soal Acak Slide 5: Detektif ADIKSIMBA
const adiksimbaBank = [
{
p: "Pada hari Senin pagi, Pak Budi menanam 25 bibit pohon mangga di kebun sekolah bersama para anggota Pramuka.",
q: "Siapa yang menanam bibit pohon mangga bersama anggota Pramuka?",
c: "Pak Budi",
w: ["Kepala Desa", "Pak RT", "Penjaga Perpustakaan"]
},
{
p: "Perpustakaan Keliling tiba di halaman balai desa pada pukul 09.00 WIB dan disambut meriah oleh anak-anak.",
q: "Di mana Perpustakaan Keliling tiba?",
c: "Halaman balai desa",
w: ["Lapangan sepak bola", "Halaman kantor pos", "Taman kota"]
},
{
p: "Lani rajin menyiram bunga mawar setiap sore agar tanamannya tidak layu di bawah terik matahari.",
q: "Kapan Lani menyiram bunga mawarnya?",
c: "Setiap sore",
w: ["Setiap pagi", "Dua hari sekali", "Tengah malam"]
},
{
p: "Bagas tidak masuk sekolah hari ini karena harus berobat ke puskesmas akibat demam tinggi.",
q: "Mengapa Bagas tidak masuk sekolah hari ini?",
c: "Berobat ke puskesmas karena demam tinggi",
w: ["Pergi liburan ke pantai", "Ketinggalan bus sekolah", "Membantu nenek berkebun"]
},
{
p: "Siti membuat kue bolu pandan dengan mengocok telur dan gula hingga mengembang sebelum dicampur tepung.",
q: "Apa kue yang dibuat oleh Siti?",
c: "Kue bolu pandan",
w: ["Kue lapis legit", "Donat cokelat", "Roti tawar"]
},
{
p: "Para nelayan membersihkan perahu kayu mereka dengan menggosok lumut menggunakan sikat sabut kelapa.",
q: "Bagaimana cara nelayan membersihkan perahu kayunya?",
c: "Menggosok lumut dengan sikat sabut kelapa",
w: ["Menyemprotkan cat warna biru", "Membakar perahu dengan obor", "Merendamnya di air garam"]
}
];
function generateUji1() {
document.getElementById('uji-1-feedback').classList.add('hidden');
document.getElementById('uji-1-next-btn').classList.add('hidden');
let item = adiksimbaBank[Math.floor(Math.random() * adiksimbaBank.length)];
document.getElementById('uji-1-passage').innerHTML = `"${item.p}"`;
document.getElementById('uji-1-question').innerHTML = `Pertanyaan: <strong>${item.q}</strong>`;
let options = [
{ text: item.c, isCorrect: true },
{ text: item.w[0], isCorrect: false },
{ text: item.w[1], isCorrect: false },
{ text: item.w[2], isCorrect: false }
];
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 text-left p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt.text;
btn.onclick = () => checkUji1(btn, opt.isCorrect, item.c);
optsContainer.appendChild(btn);
});
}
function checkUji1(btn, isCorrect, correctText) {
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> Informasi tersurat tertulis jelas: <em>"${correctText}"</em>.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correctText) 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> Lihat kembali kata di teks. Jawaban tersurat yang tepat adalah: <em>"${correctText}"</em>.`;
}
countUji1++;
document.getElementById('count-uji-1').innerText = countUji1;
document.getElementById('uji-1-next-btn').classList.remove('hidden');
}
// Bank Soal Acak Slide 6: Bukti Tersurat vs Pendapat/Tersirat
const tersuratBank = [
{
p: "Harimau sumatra memiliki loreng hitam yang lebih rapat dibanding harimau lainnya. Berat harimau jantan dewasa mencapai 140 kg.",
c: "Berat harimau sumatra jantan dewasa mencapai 140 kg",
w: [
"Harimau sumatra adalah hewan paling galak di dunia",
"Harimau sumatra menyukai makanan daging ayam",
"Harimau sumatra tidak bisa berenang di sungai"
]
},
{
p: "Candi Borobudur dibangun pada abad ke-8 Masehi pada masa pemerintahan Wangsa Syailendra di Magelang, Jawa Tengah.",
c: "Candi Borobudur dibangun pada abad ke-8 Masehi di Magelang",
w: [
"Candi Borobudur adalah bangunan tertua di planet bumi",
"Candi Borobudur dibuat oleh sejuta prajurit perkasa",
"Candi Borobudur dicat ulang setiap satu bulan sekali"
]
},
{
p: "Kaktus memiliki daun yang berbentuk duri untuk mengurangi penguapan air di gurun pasir yang panas dan kering.",
c: "Daun kaktus berbentuk duri untuk mengurangi penguapan air",
w: [
"Kaktus tidak memerlukan air sama sekali seumur hidup",
"Kaktus adalah tanaman yang paling indah di taman bunga",
"Kaktus hanya bisa tumbuh di pot plastik"
]
},
{
p: "Kereta Cepat Whoosh menghubungkan stasiun Halim di Jakarta dengan stasiun Tegalluar di Bandung dengan kecepatan hingga 350 km/jam.",
c: "Kereta Cepat Whoosh memiliki kecepatan hingga 350 km/jam",
w: [
"Semua penumpang kereta cepat selalu tertidur lelap",
"Kereta cepat Whoosh tidak mengeluarkan suara sama sekali",
"Tiket Whoosh bisa dibeli gratis setiap akhir pekan"
]
}
];
function generateUji2() {
document.getElementById('uji-2-feedback').classList.add('hidden');
document.getElementById('uji-2-next-btn').classList.add('hidden');
let item = tersuratBank[Math.floor(Math.random() * tersuratBank.length)];
document.getElementById('uji-2-passage').innerHTML = `"${item.p}"`;
let options = [
{ text: item.c, isCorrect: true },
{ text: item.w[0], isCorrect: false },
{ text: item.w[1], isCorrect: false },
{ text: item.w[2], isCorrect: false }
];
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 text-left p-3.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold rounded-xl text-sm border-b-4 border-slate-300 transition";
btn.innerHTML = opt.text;
btn.onclick = () => checkUji2(btn, opt.isCorrect, item.c);
optsContainer.appendChild(btn);
});
}
function checkUji2(btn, isCorrect, correctText) {
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> Pernyataan ini tertulis langsung (tersurat) di dalam teks.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => {
if (b.innerHTML === correctText) 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> Pernyataan itu tidak tertulis di teks. Informasi tersurat yang tepat adalah: <em>"${correctText}"</em>.`;
}
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: "Teks: 'Dina membeli 3 buku tulis seharga Rp15.000 di Koperasi.'<br><b>Berapa harga buku tulis yang dibeli Dina?</b>",
opts: ["Rp15.000", "Rp10.000", "Rp20.000"],
ans: 0
},
{
q: "Teks: 'Upacara bendera Hari Kemerdekaan RI diadakan di Lapangan Merdeka.'<br><b>Di mana upacara bendera diadakan?</b>",
opts: ["Aula Sekolah", "Lapangan Merdeka", "Taman Kota"],
ans: 1
},
{
q: "Teks: 'Kelinci putih milik Edo sangat gemar memakan wortel dan kangkung.'<br><b>Apa warna kelinci milik Edo?</b>",
opts: ["Cokelat", "Hitam", "Putih"],
ans: 2
},
{
q: "Teks: 'Pesawat mendarat darurat di Bandara Soekarno-Hatta pukul 14.15 WIB.'<br><b>Kapan pesawat tersebut mendarat?</b>",
opts: ["Pukul 14.15 WIB", "Pukul 12.00 WIB", "Pukul 16.30 WIB"],
ans: 0
},
{
q: "Teks: 'Pak Jaya menyiram tanaman cabai menggunakan selang air panjang.'<br><b>Apa alat yang digunakan Pak Jaya?</b>",
opts: ["Ember plastik", "Selang air panjang", "Gayung mandi"],
ans: 1
},
{
q: "Teks: 'Informasi yang tertulis nyata dan langsung di dalam teks disebut...'",
opts: ["Informasi Tersirat", "Informasi Tersurat", "Informasi Palsu"],
ans: 1
},
{
q: "Teks: 'Budi mengenakan jaket tebal berwarna biru karena udara dingin.'<br><b>Apa warna jaket yang dikenakan Budi?</b>",
opts: ["Biru", "Merah", "Hijau"],
ans: 0
},
{
q: "Teks: 'Pameran robotika nasional akan berlangsung selama 3 hari berturut-turut.'<br><b>Berapa lama pameran berlangsung?</b>",
opts: ["5 hari", "3 hari", "7 hari"],
ans: 1
}
];
function initIFPQuestion(group) {
const fb = document.getElementById(`ifp-feedback-${group}`);
if(fb) fb.classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} berhasil menuntaskan 5 soal detektif!`;
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-xs 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-xs 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-xs border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-xs 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('Teliti')) 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 = [
{
passage: "Festival Layang-Layang Internasional diselenggarakan di Pantai Parangtritis pada tanggal 20–22 Juli 2026. Acara ini diikuti oleh 12 negara sahabat.",
q: "Berapa banyak negara sahabat yang mengikuti Festival Layang-Layang Internasional tersebut?",
options: ["10 negara", "12 negara", "15 negara", "20 negara"],
a: 1,
exp: "Pada teks tertulis langsung: <em>'Acara ini diikuti oleh 12 negara sahabat.'</em>"
},
{
passage: "Ikan paus biru adalah hewan terbesar di bumi. Berat lidah paus biru dewasa bahkan setara dengan berat seekor gajah Asia.",
q: "Hewan apakah yang berat lidahnya setara dengan berat seekor gajah Asia menurut teks?",
options: ["Hiu megalodon", "Ikan paus biru", "Lumba-lumba hidung botol", "Gajah Afrika"],
a: 1,
exp: "Tertulis langsung pada kalimat kedua teks: <em>'Berat lidah paus biru dewasa bahkan setara...'</em>"
},
{
passage: "Kereta api Lodaya berangkat dari Stasiun Solo Balapan menuju Stasiun Bandung pada pukul 07.00 WIB dan dijadwalkan tiba pukul 15.30 WIB.",
q: "Stasiun manakah yang menjadi tujuan akhir perjalanan kereta api Lodaya dalam bacaan?",
options: ["Stasiun Gambir", "Stasiun Yogyakarta", "Stasiun Bandung", "Stasiun Solo Balapan"],
a: 2,
exp: "Tertulis jelas pada teks: <em>'...berangkat dari Stasiun Solo Balapan menuju Stasiun Bandung...'</em>"
},
{
passage: "Informasi tersurat adalah informasi yang dapat kita temukan secara langsung karena...",
options: [
"Tertulis secara nyata dan jelas dalam kalimat teks",
"Harus kita tebak dan simpulkan maknanya",
"Hanya diceritakan melalui gambar tanpa tulisan",
"Merupakan pendapat pribadi pembaca"
],
a: 0,
exp: "Ciri khas informasi tersurat adalah fakta atau kata-katanya tertulis secara nyata dan jelas di dalam teks."
},
{
passage: "Dokter menyarankan agar kita minum air putih minimal 8 gelas setiap hari guna menjaga cairan tubuh dan fungsi ginjal.",
q: "Berapa jumlah minimal air putih yang disarankan untuk diminum setiap hari menurut teks?",
options: ["5 gelas", "6 gelas", "8 gelas", "10 gelas"],
a: 2,
exp: "Fakta tersurat di dalam teks menyatakan: <em>'...minum air putih minimal 8 gelas setiap hari...'</em>"
}
];
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-amber-300 shadow-md text-center space-y-4">
<span class="text-6xl">🎉</span>
<h3 class="text-3xl font-black text-amber-900">Evaluasi Selesai!</h3>
<p class="text-lg font-bold text-slate-600">Kamu telah menuntaskan seluruh 5 soal analisis informasi tersurat dengan sangat cermat.</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-passage-box').innerHTML = `"${current.passage}"`;
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-sm hover:bg-amber-50 hover:border-amber-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-sm 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-sm 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 Detektif Membaca Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Informasi Tersurat: " + refleksi,
strategi: "Evaluasi: Menemukan Informasi Tersurat"
}, "*");
} else {
alert("Laporan Nilai Berhasil Dikirim! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama + "\nPemahaman: " + baterai + "%");
}
}
</script>
</body>
</html>
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>
📊 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) |
| fadil | Menemukan Fakta Eksplisit Penguatan Literasi Dasar — Kelas 7 | 60 | 100% | Refleksi Fakta Eksplisit: Misi Detektif Fakta Eksplisit Selesai! | Evaluasi: Menemukan Fakta Eksplisit |
| ismail assel | Petualangan Perkalian Cepat (1-10) Penguatan Numerasi — Kelas 7 | 80 | 100% | Refleksi Perkalian: Misi Perkalian Selesai! | Evaluasi: Perkalian Dasar (1-10) |
| fikram bahtiar | penjumlahan 1-100 Penguatan Numerasi — Kelas 7 | 20 | 100% | Refleksi Penjumlahan: Misi Penjumlahan Selesai! | Evaluasi: Penjumlahan Bilangan (1-100) |
| Siswa 1 | Bilangan Rasional Matematika — Kelas 7 | 3 | 100% | Hambatan Siswa: Tidak ada hambatan | Strategi Siswa: Tidak ada strategi khusus |
| sasasa | Bilangan Rasional Matematika — Kelas 7 | 3 | 100% | Hambatan Siswa: sas | Strategi Siswa: sas |
| Coba1 | Bilangan Rasional Matematika — Kelas 7 | 1 | 100% | Hambatan Siswa: 1 | Strategi Siswa: 2 |
| sasdsadasd | Bilangan Rasional Matematika — Kelas 7 | 2 | 50% | Hambatan Siswa: dasda | Strategi Siswa: asdas |
| dddddddd | Bilangan Rasional Matematika — Kelas 7 | 3 | 75% | Hambatan Siswa: Hambatan | Strategi Siswa: Strategi |