Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 8
Matematika
Relasi dan Fungsi : Konsep Dasar Himpunan Relasi dan Fungsi
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Himpunan, Relasi, dan Fungsi 🌀</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #faf5ff;
background-image: radial-gradient(#e9d5ff 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.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="layers" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Matematika Kelas 8 - Himpunan, Relasi, & Fungsi</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-purple-400 via-fuchsia-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-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-purple-100 text-purple-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka (Usia 13-15 Tahun)
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Mengenal <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600">Himpunan, Relasi, dan Fungsi</span> 🌀
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-purple-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-purple-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-base md:text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-purple-600">mengidentifikasi konsep himpunan, relasi, dan fungsi</span> dalam matematika.</li>
<li>Peserta didik dapat <span class="text-purple-600">menjelaskan relasi dan fungsi</span> secara tuntas (<span class="text-indigo-600">domain, kodomain, range</span>).</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menaklukkan konsep dasar matematika ini? Ayo mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Identitas / Registrasi Siswa -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="bg-white p-8 md:p-12 rounded-[2.5rem] border-4 border-purple-200 shadow-xl max-w-lg w-full 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>
<div class="text-center mb-6">
<span class="text-4xl">👋</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Identitas Siswa</h2>
<p class="text-sm font-bold text-slate-500">Isi data dirimu sebelum memulai pembelajaran dan kuis.</p>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama-reg" placeholder="Contoh: Salsabila Putri" class="w-full p-4 border-2 border-slate-200 rounded-2xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Kelas / Kelompok</label>
<input type="text" id="input-kelas-reg" placeholder="Contoh: 8B / Kelompok 2" class="w-full p-4 border-2 border-slate-200 rounded-2xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<button onclick="simpanRegistrasi()" class="w-full py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-lg rounded-2xl shadow-lg transition">Simpan & Lanjut 🚀</button>
</div>
</div>
</div>
<!-- Slide 3: Observasi & Pertanyaan Pemantik -->
<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">Observasi & Pertanyaan Pemantik 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati pengelompokan benda di sekitarmu.</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">
<span class="text-4xl">📦</span>
<h4 class="font-black text-xl text-purple-800">Observasi Pengelompokan</h4>
<p class="text-slate-600 font-bold text-sm">Jika kamu mengumpulkan semua alat tulis ke dalam satu kotak pensil, kumpulan objek terdefinisi jelas ini disebut <strong>Himpunan</strong>.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-3">
<span class="text-4xl">🤔</span>
<h4 class="font-black text-xl text-amber-800">Pertanyaan Pemantik</h4>
<p class="text-slate-600 font-bold text-sm">"Mengapa tidak semua relasi antarkelompok bisa disebut sebagai fungsi? Apa bedanya daerah kawan (kodomain) dengan daerah hasil (range)?"</p>
</div>
</div>
</div>
<!-- Slide 4: Materi Inti 1 - Konsep Himpunan -->
<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: Konsep Himpunan 📦</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Himpunan adalah kumpulan objek atau benda yang terdefinisi dengan jelas (dapat ditentukan dengan pasti anggota atau bukan anggotanya).<br>
<b>Contoh:</b> Himpunan hewan berkaki empat = {kucing, sapi, kambing}. (Sangat jelas anggotanya).
</p>
<!-- Latihan Mandiri 1 -->
<div class="bg-purple-50 p-6 rounded-2xl border-2 border-purple-200 space-y-4 mt-6">
<h4 class="font-black text-purple-900 text-lg">Latihan Mandiri 1 (Himpunan):</h4>
<div id="m1-soal-box" class="space-y-4">
<p class="font-bold text-slate-700 text-sm">1. Manakah di bawah ini yang merupakan contoh sebuah himpunan?</p>
<div class="grid grid-cols-2 gap-2" id="m1-opts">
<button onclick="cekLatihan(this, true, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-purple-100">A. Kumpulan bilangan prima kurang dari 10</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-purple-100">B. Kumpulan lukisan yang indah</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-purple-100">C. Kumpulan anak yang pandai</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-purple-100">D. Kumpulan makanan yang enak</button>
</div>
<div id="m1-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti 2 - Konsep Relasi -->
<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-fuchsia-900 bg-fuchsia-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Konsep Relasi 🔗</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-fuchsia-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Relasi adalah aturan yang memasangkan anggota suatu himpunan ke himpunan lainnya tanpa syarat khusus (bebas menghubungkan berapa pun pasangan).<br>
<b>Contoh:</b> Himpunan Anak {Ani, Boni} dihubungkan ke Himpunan Warna {Merah, Biru, Hijau} dengan relasi "menyukai warna". Satu anak boleh suka lebih dari satu warna.
</p>
<div class="bg-fuchsia-50 p-6 rounded-2xl border-2 border-fuchsia-200 space-y-4 mt-6">
<h4 class="font-black text-fuchsia-900 text-lg">Latihan Mandiri 2 (Relasi):</h4>
<p class="font-bold text-slate-700 text-sm">Apa arti utama dari sebuah "Relasi" dalam matematika?</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-fuchsia-100">A. Aturan pemasangan antaranggota dua himpunan</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-fuchsia-100">B. Hanya boleh tepat satu pasangan</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-fuchsia-100">C. Kumpulan angka acak</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-fuchsia-100">D. Rumus perkalian kuadrat</button>
</div>
<div id="m2-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti 3 - Konsep Fungsi (Pemetaan) -->
<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 3: Konsep Fungsi (Pemetaan) 🎯</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Aturan Khusus:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Fungsi adalah relasi khusus yang memasangkan setiap anggota himpunan asal (domain) dengan <strong>tepat satu</strong> anggota himpunan kawan (kodomain).<br>
Tidak boleh ada anggota domain yang jomblo (tidak punya pasangan) atau mendua (punya lebih dari satu pasangan).
</p>
<div class="bg-indigo-50 p-6 rounded-2xl border-2 border-indigo-200 space-y-4 mt-6">
<h4 class="font-black text-indigo-900 text-lg">Latihan Mandiri 3 (Fungsi):</h4>
<p class="font-bold text-slate-700 text-sm">Manakah syarat mutlak agar suatu relasi bisa disebut sebagai fungsi?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="cekLatihan(this, true, 'm3')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-indigo-100 text-left">A. Setiap anggota domain memiliki tepat satu pasangan di kodomain</button>
<button onclick="cekLatihan(this, false, 'm3')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-indigo-100 text-left">B. Anggota domain bebas memiliki berapa pun pasangan</button>
</div>
<div id="m3-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 7: Materi Inti 4 - Domain, Kodomain, dan Range -->
<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-violet-900 bg-violet-100 inline-block px-6 py-2 rounded-2xl">Materi 4: Domain, Kodomain, & Range 🔍</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-violet-200 shadow-md space-y-4">
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-purple-50 p-4 rounded-2xl border border-purple-200 text-center">
<h4 class="font-black text-purple-900 mb-1">1. Domain (Daerah Asal)</h4>
<p class="text-xs font-semibold text-slate-700">Seluruh anggota himpunan sebelah kiri yang memetakan.</p>
</div>
<div class="bg-fuchsia-50 p-4 rounded-2xl border border-fuchsia-200 text-center">
<h4 class="font-black text-fuchsia-900 mb-1">2. Kodomain (Daerah Kawan)</h4>
<p class="text-xs font-semibold text-slate-700">Seluruh anggota himpunan sebelah kanan (tujuan).</p>
</div>
<div class="bg-indigo-50 p-4 rounded-2xl border border-indigo-200 text-center">
<h4 class="font-black text-indigo-900 mb-1">3. Range (Daerah Hasil)</h4>
<p class="text-xs font-semibold text-slate-700">Hanya anggota kodomain yang benar-benar <strong>tertulis panah/pasangan</strong>.</p>
</div>
</div>
<div class="bg-violet-50 p-6 rounded-2xl border-2 border-violet-200 space-y-4 mt-4">
<h4 class="font-black text-violet-900 text-lg">Latihan Mandiri 4 (Domain, Kodomain, Range):</h4>
<p class="font-bold text-slate-700 text-sm">Bagian kodomain yang hanya berisi anggota yang menerima pasangan dari domain disebut...</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm4')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-violet-100">A. Range (Daerah Hasil)</button>
<button onclick="cekLatihan(this, false, 'm4')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-violet-100">B. Domain</button>
</div>
<div id="m4-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 8: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<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-3xl 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 KELOMPOK MULTI-USER ⚡</h2>
<p class="text-sm font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke depan! Selesaikan 5 soal himpunan, relasi, dan fungsi secara serentak.</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 text-sm">
<span>🏎️ Kelompok 1</span>
<span id="ifp-score-1" class="bg-purple-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-purple-50 p-4 rounded-2xl border border-purple-100 text-center">
<p id="ifp-q-1" class="text-base 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-2.5 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-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 text-sm">
<span>🚓 Kelompok 2</span>
<span id="ifp-score-2" class="bg-fuchsia-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-fuchsia-50 p-4 rounded-2xl border border-fuchsia-100 text-center">
<p id="ifp-q-2" class="text-base 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-2.5 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-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 text-sm">
<span>🚙 Kelompok 3</span>
<span id="ifp-score-3" class="bg-indigo-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-indigo-50 p-4 rounded-2xl border border-indigo-100 text-center">
<p id="ifp-q-3" class="text-base 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-2.5 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-8xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-5xl 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-xl rounded-full shadow-[0_6px_0px_#581c87] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">📝 Ujian Mandiri & Pelaporan ke Guru</h2>
<p class="text-base font-bold text-slate-500 mb-6">Uji kemampuan individumu dengan mengerjakan 5 soal pilihan ganda berikut.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-purple-200 shadow-xl 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-800 bg-purple-100 px-3 py-1 rounded-lg text-sm">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl md:text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-purple-900 mb-2">Latihan Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Mandiri: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-purple-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai hasil latihanmu ke guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-purple-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-purple-600 to-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>
</div>
<!-- Slide 10: Refleksi Perasaan 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-4xl md:text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-lg font-bold text-slate-600 max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari konsep himpunan, relasi, dan fungsi 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-5xl mb-2">😎</div>
<h3 class="font-black text-lg text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-5xl mb-2">🤔</div>
<h3 class="font-black text-lg text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-5xl mb-2">🤯</div>
<h3 class="font-black text-lg text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan pesan atau bagian paling menarik hari ini:</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>
</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-base disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-5 h-5"></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-base disabled:opacity-40 disabled:pointer-events-none hover:bg-purple-700 shadow-[0_4px_0px_#6b21a8]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-5 h-5"></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); });
// Simpan Registrasi Identitas
function simpanRegistrasi() {
let nama = document.getElementById('input-nama-reg').value.trim();
let kelas = document.getElementById('input-kelas-reg').value.trim();
if(!nama || !kelas) {
alert("Silakan isi nama dan kelas terlebih dahulu!");
return;
}
document.getElementById('input-nama').value = nama + " (" + kelas + ")";
nextSlide();
}
// Latihan Mandiri di Setiap Slide Materi
function cekLatihan(btn, isTrue, mId) {
let parent = btn.parentElement;
let btns = parent.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(mId + '-feedback');
fb.classList.remove('hidden');
if(isTrue) {
btn.className = "p-3 bg-green-500 text-white font-bold rounded-xl text-sm border-2 border-green-700";
fb.className = "font-bold text-sm p-3 rounded-xl bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Pemahamanmu luar biasa.";
} else {
btn.className = "p-3 bg-rose-500 text-white font-bold rounded-xl text-sm border-2 border-rose-700";
fb.className = "font-bold text-sm p-3 rounded-xl bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat. Coba tinjau kembali materinya.";
}
}
// ==========================================
// MULTI-USER KELOMPOK GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Kumpulan objek yang terdefinisi dengan jelas dinamakan...", opts: ["Himpunan", "Relasi", "Fungsi", "Range"], ans: 0 },
{ q: "Seluruh anggota himpunan sebelah kiri pada pemetaan disebut...", opts: ["Domain (Asal)", "Kodomain", "Range", "Konstanta"], ans: 0 },
{ q: "Anggota kodomain yang benar-benar menerima pasangan dari domain disebut...", opts: ["Range (Hasil)", "Domain", "Himpunan Kosong", "Variabel"], ans: 0 },
{ q: "Relasi khusus yang memasangkan setiap domain dengan tepat satu kodomain adalah...", opts: ["Fungsi", "Relasi Bebas", "Himpunan Bagian", "Semua salah"], ans: 0 },
{ q: "Manakah di bawah ini yang bukan merupakan fungsi?", opts: ["Satu domain memiliki 2 pasangan", "Setiap domain punya 1 pasangan", "Domain terpetakan sempurna", "Domain tepat 1 bayangan"], ans: 0 },
{ q: "Daerah kawan dalam istilah matematika dinamakan...", opts: ["Kodomain", "Domain", "Range", "Universal"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).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-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xs border 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-2.5 bg-green-500 text-white font-black rounded-xl text-xs border 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-2.5 bg-rose-500 text-white font-black rounded-xl text-xs border border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border 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 = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu Akhir
const evaluasiBank = [
{
q: "Kumpulan objek yang dapat didefinisikan dengan jelas anggotanya disebut...",
options: ["Himpunan", "Relasi", "Fungsi", "Range"],
a: 0,
exp: "Definisi baku dari himpunan adalah kumpulan objek yang anggotanya dapat ditentukan dengan jelas dan pasti."
},
{
q: "Aturan yang memasangkan anggota suatu himpunan ke himpunan lainnya secara bebas disebut...",
options: ["Relasi", "Fungsi", "Domain", "Kodomain"],
a: 0,
exp: "Relasi adalah aturan pemasangan umum tanpa syarat harus tepat satu."
},
{
q: "Relasi khusus yang memasangkan setiap domain dengan tepat satu kodomain dinamakan...",
options: ["Fungsi (Pemetaan)", "Himpunan Bagian", "Range", "Variabel"],
a: 0,
exp: "Fungsi adalah bentuk khusus relasi di mana setiap elemen domain memiliki tepat satu pasangan."
},
{
q: "Dalam suatu pemetaan dari himpunan A ke B, himpunan A disebut sebagai...",
options: ["Domain (Daerah Asal)", "Kodomain (Daerah Kawan)", "Range (Hasil)", "Konstanta"],
a: 0,
exp: "Himpunan asal tempat elemen dipetakan dinamakan domain."
},
{
q: "Dari diagram panah fungsi, himpunan bagian dari kodomain yang menerima panah dari domain disebut...",
options: ["Range (Daerah Hasil)", "Domain", "Himpunan Semesta", "Kodomain utuh"],
a: 0,
exp: "Range adalah seluruh anggota daerah kawan yang benar-benar memiliki pasangan."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-purple-50 hover:border-purple-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan identitas nama terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Himpunan, Relasi, dan Fungsi: " + refleksi,
strategi: "Evaluasi: Himpunan, Relasi, dan Fungsi Kelas 8"
}, "*");
} else {
alert(`Laporan Misi Berhasil Terkirim ke Guru! 🎉\n\nIdentitas: ${nama}\nSkor Mandiri: ${evalSkor}\nTingkat Pemahaman: ${baterai}%`);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Relasi dan Fungsi : Penyajian konsep dan Analisis Grafik
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Relasi dan Fungsi 📐</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(#cffafe 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #0284c7 !important; color: white !important; border-bottom-color: #0369a1 !important; pointer-events: none; }
.btn-wrong { background-color: #e11d48 !important; color: white !important; border-bottom-color: #9f1239 !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; }
.ifp-col { border-right: 3px dashed #cbd5e1; }
.ifp-col:last-child { border-right: none; }
</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="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-cyan-800 uppercase tracking-widest">Matematika Kelas 8 - Relasi dan Fungsi</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-cyan-400 via-sky-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-4xl 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 D - Kurikulum Merdeka (Usia 13-15 Tahun)
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Menjelajah Dunia <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-blue-600">Relasi dan Fungsi</span> 📐
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-cyan-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-cyan-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-base md:text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-cyan-600">menerapkan konsep relasi dan fungsi</span> dalam bentuk diagram panah, tabel, himpunan pasangan berurutan, dan grafik.</li>
<li>Peserta didik dapat <span class="text-cyan-600">menganalisis perbedaan antara fungsi linear dan fungsi non-linear</span> secara grafik.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap belajar dengan seru? Ayo mulai! 👇</p>
</div>
</div>
<!-- Slide 2: Identitas / Registrasi Siswa -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="bg-white p-8 md:p-12 rounded-[2.5rem] border-4 border-cyan-200 shadow-xl max-w-lg w-full 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>
<div class="text-center mb-6">
<span class="text-4xl">👋</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Identitas Siswa</h2>
<p class="text-sm font-bold text-slate-500">Isi data dirimu sebelum kuis & pelaporan dimulai.</p>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama-reg" placeholder="Contoh: Budi Santoso" class="w-full p-4 border-2 border-slate-200 rounded-2xl font-bold focus:outline-cyan-500 bg-slate-50">
</div>
<div>
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Kelas / Kelompok</label>
<input type="text" id="input-kelas-reg" placeholder="Contoh: 8A / Kelompok 1" class="w-full p-4 border-2 border-slate-200 rounded-2xl font-bold focus:outline-cyan-500 bg-slate-50">
</div>
<button onclick="simpanRegistrasi()" class="w-full py-4 bg-cyan-600 hover:bg-cyan-500 text-white font-black text-lg rounded-2xl shadow-lg transition">Simpan & Lanjut 🚀</button>
</div>
</div>
</div>
<!-- Slide 3: Observasi & Pertanyaan Pemantik -->
<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">Observasi & Pertanyaan Pemantik 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati hubungan di sekitar kita sebelum masuk ke materi inti.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-sm space-y-3">
<span class="text-4xl">🍎</span>
<h4 class="font-black text-xl text-cyan-800">Observasi Hubungan</h4>
<p class="text-slate-600 font-bold text-sm">Setiap anak di kelas memiliki tepat satu makanan kesukaan utama. Hubungan antara "Anak" dan "Makanan" adalah contoh nyata relasi & fungsi.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-3">
<span class="text-4xl">🤔</span>
<h4 class="font-black text-xl text-amber-800">Pertanyaan Pemantik</h4>
<p class="text-slate-600 font-bold text-sm">"Pernahkah kamu memesan ojek online di mana 1 jarak tempuh tertentu pasti menghasilkan tepat 1 harga total? Bagaimana aturan pemasangan tersebut dalam matematika?"</p>
</div>
</div>
</div>
<!-- Slide 4: Materi Inti 1 - Diagram Panah -->
<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: Diagram Panah 🎯</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-cyan-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Diagram panah menyajikan relasi dengan menghubungkan anggota himpunan A (Domain) ke himpunan B (Kodomain) menggunakan anak panah.<br>
<b>Contoh:</b> Himpunan A = {1, 2, 3} dihubungkan ke B = {2, 4, 6} dengan aturan relasi <em>"setengah dari"</em>. Maka 1 dipanah ke 2, 2 dipanah ke 4, dan 3 dipanah ke 6.
</p>
<!-- Latihan Mandiri 5 Soal Pilihan Ganda -->
<div class="bg-cyan-50 p-6 rounded-2xl border-2 border-cyan-200 space-y-4 mt-6">
<h4 class="font-black text-cyan-900 text-lg">Latihan Mandiri 1 (Diagram Panah):</h4>
<div id="m1-soal-box" class="space-y-4">
<p class="font-bold text-slate-700 text-sm">1. Relasi khusus yang memasangkan setiap anggota domain dengan tepat satu kodomain pada diagram panah disebut...</p>
<div class="grid grid-cols-2 gap-2" id="m1-opts">
<button onclick="cekLatihan(this, true, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-cyan-100">A. Fungsi (Pemetaan)</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-cyan-100">B. Relasi Bebas</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-cyan-100">C. Kodomain</button>
<button onclick="cekLatihan(this, false, 'm1')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-cyan-100">D. Range</button>
</div>
<div id="m1-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti 2 - Tabel -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-sky-900 bg-sky-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Tabel 📊</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-sky-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Tabel menyajikan nilai variabel input (\(x\)) pada baris/kolom pertama dan nilai output (\(y\)) pada baris/kolom kedua.<br>
<b>Contoh:</b> Jika fungsi \(f(x) = 2x + 1\), maka untuk \(x = \{1, 2, 3\}\) dibentuk tabel dengan hasil \(f(1)=3, f(2)=5, f(3)=7\).
</p>
<div class="bg-sky-50 p-6 rounded-2xl border-2 border-sky-200 space-y-4 mt-6">
<h4 class="font-black text-sky-900 text-lg">Latihan Mandiri 2 (Tabel):</h4>
<p class="font-bold text-slate-700 text-sm">Jika tabel fungsi menunjukkan \(x = 2\) berpasangan dengan \(f(2) = 7\) pada rumus \(f(x) = 3x + c\), berapakah nilai \(c\)?</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-sky-100">A. 1</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-sky-100">B. 3</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-sky-100">C. 5</button>
<button onclick="cekLatihan(this, false, 'm2')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-sky-100">D. 7</button>
</div>
<div id="m2-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti 3 - Himpunan Pasangan Berurutan -->
<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 3: Himpunan Pasangan Berurutan 🔗</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-blue-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Menyatakan relasi atau fungsi dengan menuliskan elemen domain dan kodomain berpasangan dalam kurung kurawal bernotasi \((x, y)\).<br>
<b>Contoh:</b> \(\{(1, 2), (2, 4), (3, 6)\}\) menyatakatan relasi "dua kali dari".
</p>
<div class="bg-blue-50 p-6 rounded-2xl border-2 border-blue-200 space-y-4 mt-6">
<h4 class="font-black text-blue-900 text-lg">Latihan Mandiri 3 (Himpunan Pasangan Berurutan):</h4>
<p class="font-bold text-slate-700 text-sm">Manakah di bawah ini yang merupakan himpunan pasangan berurutan suatu fungsi?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="cekLatihan(this, true, 'm3')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-blue-100 text-left">A. \(\{(1, 2), (2, 3), (3, 4)\}\)</button>
<button onclick="cekLatihan(this, false, 'm3')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-blue-100 text-left">B. \(\{(1, 2), (1, 3), (2, 4)\}\)</button>
</div>
<div id="m3-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 7: Materi Inti 4 - Grafik dan Koordinat -->
<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 4: Grafik dan Koordinat 📈</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md space-y-4">
<h3 class="font-black text-xl text-slate-800">Pengertian & Cara Penyelesaian:</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">
Menyajikan titik koordinat (\(x, y\)) pada bidang Kartesius. Sumbu horizontal adalah sumbu \(x\) (domain) dan sumbu vertikal adalah sumbu \(y\) (kodomain).
</p>
<div class="bg-indigo-50 p-6 rounded-2xl border-2 border-indigo-200 space-y-4 mt-6">
<h4 class="font-black text-indigo-900 text-lg">Latihan Mandiri 4 (Grafik Koordinat):</h4>
<p class="font-bold text-slate-700 text-sm">Jika fungsi \(f(x) = x + 3\) digambarkan pada bidang koordinat, titik manakah yang dilalui garis tersebut?</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm4')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-indigo-100">A. (2, 5)</button>
<button onclick="cekLatihan(this, false, 'm4')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-indigo-100">B. (2, 3)</button>
</div>
<div id="m4-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 8: Materi Inti 5 - Fungsi Linear vs Non-Linear Secara Grafik -->
<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 5: Fungsi Linear vs Non-Linear ⚖️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-md space-y-4">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-teal-50 p-5 rounded-2xl border border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-lg">Fungsi Linear</h4>
<p class="text-xs font-bold text-slate-700">Persamaan berderajat satu (\(f(x) = ax + b\)). Grafiknya berupa <b>garis lurus sempurna</b>.</p>
</div>
<div class="bg-emerald-50 p-5 rounded-2xl border border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-lg">Fungsi Non-Linear</h4>
<p class="text-xs font-bold text-slate-700">Persamaan berderajat dua atau lebih (\(f(x) = x^2\)). Grafiknya berupa <b>kurva melengkung / parabola</b>.</p>
</div>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border-2 border-slate-200 space-y-4 mt-4">
<h4 class="font-black text-slate-900 text-lg">Latihan Mandiri 5 (Linear & Non-Linear):</h4>
<p class="font-bold text-slate-700 text-sm">Manakah di bawah ini yang grafiknya berupa garis lengkung/parabola?</p>
<div class="grid grid-cols-2 gap-2">
<button onclick="cekLatihan(this, true, 'm5')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-teal-100">A. \(f(x) = x^2 - 4\)</button>
<button onclick="cekLatihan(this, false, 'm5')" class="p-3 bg-white border-2 border-slate-200 rounded-xl font-bold text-sm hover:bg-teal-100">B. \(f(x) = 3x + 2\)</button>
</div>
<div id="m5-feedback" class="hidden font-bold text-sm p-3 rounded-xl"></div>
</div>
</div>
</div>
<!-- Slide 9: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<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-3xl 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 KELOMPOK MULTI-USER ⚡</h2>
<p class="text-sm font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke depan! Selesaikan 5 soal relasi dan fungsi secara serentak.</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 text-sm">
<span>🏎️ Kelompok 1</span>
<span id="ifp-score-1" class="bg-cyan-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-cyan-50 p-4 rounded-2xl border border-cyan-100 text-center">
<p id="ifp-q-1" class="text-base 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-2.5 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-sky-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-sky-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🚓 Kelompok 2</span>
<span id="ifp-score-2" class="bg-sky-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-sky-50 p-4 rounded-2xl border border-sky-100 text-center">
<p id="ifp-q-2" class="text-base 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-2.5 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-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 text-sm">
<span>🚙 Kelompok 3</span>
<span id="ifp-score-3" class="bg-blue-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-blue-50 p-4 rounded-2xl border border-blue-100 text-center">
<p id="ifp-q-3" class="text-base 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-2.5 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-8xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-cyan-400 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-cyan-600 hover:bg-cyan-500 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#0e7490] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 10: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">📝 Ujian Mandiri & Pelaporan ke Guru</h2>
<p class="text-base font-bold text-slate-500 mb-6">Uji kemampuan individumu dengan mengerjakan 5 soal pilihan ganda berikut.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-cyan-200 shadow-xl 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-800 bg-cyan-100 px-3 py-1 rounded-lg text-sm">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl md:text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-cyan-900 mb-2">Latihan Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Mandiri: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-cyan-600 to-blue-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-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-4 relative z-10">Kirim laporan nilai hasil latihanmu ke 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">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-cyan-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-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>
</div>
<!-- Slide 11: Refleksi Perasaan 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-4xl md:text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-lg font-bold text-slate-600 max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari bab Relasi dan Fungsi 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-5xl mb-2">😎</div>
<h3 class="font-black text-lg text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-5xl mb-2">🤔</div>
<h3 class="font-black text-lg text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-5xl mb-2">🤯</div>
<h3 class="font-black text-lg text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan pesan atau bagian paling menarik 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>
</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-base disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-5 h-5"></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-base disabled:opacity-40 disabled:pointer-events-none hover:bg-cyan-700 shadow-[0_4px_0px_#0891b2]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-5 h-5"></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); });
// Simpan Registrasi Identitas
function simpanRegistrasi() {
let nama = document.getElementById('input-nama-reg').value.trim();
let kelas = document.getElementById('input-kelas-reg').value.trim();
if(!nama || !kelas) {
alert("Silakan isi nama dan kelas terlebih dahulu!");
return;
}
document.getElementById('input-nama').value = nama + " (" + kelas + ")";
nextSlide();
}
// Latihan Mandiri di Setiap Slide Materi
function cekLatihan(btn, isTrue, mId) {
let parent = btn.parentElement;
let btns = parent.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(mId + '-feedback');
fb.classList.remove('hidden');
if(isTrue) {
btn.className = "p-3 bg-green-500 text-white font-bold rounded-xl text-sm border-2 border-green-700";
fb.className = "font-bold text-sm p-3 rounded-xl bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Pemahamanmu luar biasa.";
} else {
btn.className = "p-3 bg-rose-500 text-white font-bold rounded-xl text-sm border-2 border-rose-700";
fb.className = "font-bold text-sm p-3 rounded-xl bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat. Coba tinjau kembali materinya.";
}
}
// ==========================================
// MULTI-USER KELOMPOK GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Relasi khusus yang memasangkan setiap domain dengan tepat satu kodomain dinamakan...", opts: ["Fungsi (Pemetaan)", "Range", "Kodomain", "Variabel"], ans: 0 },
{ q: "Manakah cara penyajian relasi yang menggunakan titik pada bidang Kartesius?", opts: ["Grafik", "Diagram Panah", "Tabel", "Himpunan Pasangan Berurutan"], ans: 0 },
{ q: "Grafik fungsi linear pada koordinat Kartesius selalu berbentuk...", opts: ["Garis Lurus", "Kurva Parabola", "Lingkaran", "Titik Acak"], ans: 0 },
{ q: "Fungsi kuadrat seperti \(f(x) = x^2\) termasuk jenis fungsi...", opts: ["Non-Linear", "Linear", "Konstan", "Identitas"], ans: 0 },
{ q: "Jika \(f(x) = 3x - 1\), maka nilai dari \(f(3)\) adalah...", opts: ["8", "6", "9", "7"], ans: 0 },
{ q: "Himpunan daerah asal disebut juga dengan istilah...", opts: ["Domain", "Kodomain", "Range", "Variabel"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).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-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xs border 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-2.5 bg-green-500 text-white font-black rounded-xl text-xs border 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-2.5 bg-rose-500 text-white font-black rounded-xl text-xs border border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border 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 = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu Akhir
const evaluasiBank = [
{
q: "Relasi khusus yang memasangkan setiap anggota himpunan asal (domain) dengan tepat satu anggota kawan (kodomain) dinamakan...",
options: ["Fungsi", "Range", "Kodomain", "Konstanta"],
a: 0,
exp: "Definisi mutlak dari sebuah fungsi atau pemetaan adalah relasi yang memasangkan domain dengan tepat satu kodomain."
},
{
q: "Jika diketahui fungsi \(f(x) = 4x - 3\), maka nilai dari \(f(2)\) adalah...",
options: ["3", "5", "8", "6"],
a: 1,
exp: "Substitusikan \(x = 2\) ke rumus: \(f(2) = 4(2) - 3 = 8 - 3 = 5\)."
},
{
q: "Manakah di antara bentuk berikut yang menyatakan grafik fungsi linear?",
options: ["Garis lurus", "Kurva melengkung / parabola", "Lingkaran penuh", "Titik-titik acak"],
a: 0,
exp: "Grafik fungsi linear berderajat satu selalu digambarkan berupa garis lurus."
},
{
q: "Diketahui himpunan pasangan berurutan \(\{(1, 2), (2, 4), (3, 6)\}\). Rumus fungsi yang tepat untuk pasangan tersebut adalah...",
options: ["\(f(x) = x + 1\)", "\(f(x) = 2x\)", "\(f(x) = x^2\)", "\(f(x) = 3x - 1\)"],
a: 1,
exp: "Setiap nilai \(x\) dikalikan dengan 2 menghasilkan nilai \(y\) (\(1\times2=2, 2\times2=4, 3\times2=6\)). Jadi rumusnya \(f(x) = 2x\)."
},
{
q: "Manakah fungsi di bawah ini yang tergolong sebagai fungsi non-linear?",
options: ["\(f(x) = 2x + 5\)", "\(f(x) = -3x + 1\)", "\(f(x) = x^2 - 3x + 2\)", "\(f(x) = 7x\)"],
a: 2,
exp: "Persamaan \(f(x) = x^2 - 3x + 2\) memiliki variabel berpangkat 2 (kuadrat), sehingga termasuk fungsi non-linear."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-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>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan identitas nama terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Relasi dan Fungsi: " + refleksi,
strategi: "Evaluasi: Relasi dan Fungsi Kelas 8"
}, "*");
} else {
alert(`Laporan Misi Berhasil Terkirim ke Guru! 🎉\n\nIdentitas: ${nama}\nSkor Mandiri: ${evalSkor}\nTingkat Pemahaman: ${baterai}%`);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Relasi dan Relasi : Evaluasi dan pemecahan Masalah Fungsi
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Relasi dan Fungsi 📐</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=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<!-- MathJax untuk Rendering Matematika yang Sempurna -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 4px solid #047857; cursor: pointer; }
.guess-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.btn-correct { background-color: #059669 !important; color: white !important; border-bottom-color: #065f46 !important; pointer-events: none; }
.btn-wrong { background-color: #e11d48 !important; color: white !important; border-bottom-color: #9f1239 !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.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
.ifp-col { border-right: 3px dashed #a7f3d0; }
.ifp-col:last-child { border-right: none; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md 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-xs font-extrabold text-emerald-800 uppercase tracking-widest">Matematika Kelas 8 - Relasi dan Fungsi</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<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-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-2">
Mastering <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Relasi dan Fungsi</span> 📐
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-2.5 text-base font-bold text-slate-600 list-decimal list-inside pl-2">
<li>Peserta didik dapat <span class="text-emerald-700">mengevaluasi ketepatan nilai suatu fungsi</span> berdasarkan data yang tersedia.</li>
<li>Peserta didik dapat <span class="text-emerald-700">memecahkan masalah</span> yang berkaitan dengan relasi dan fungsi.</li>
</ol>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Siap menaklukkan tantangan relasi dan fungsi? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Visual -->
<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-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Konsep Relasi 👁️🗨️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Perhatikan hubungan antara anggota himpunan dalam kehidupan sehari-hari!</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-4">
<div class="bg-emerald-50 p-6 rounded-2xl border border-emerald-200 space-y-3">
<p class="text-base font-bold text-slate-700">🔍 <b>Pengertian Relasi & Fungsi:</b></p>
<ul class="space-y-2 text-slate-600 font-bold list-disc list-inside text-sm">
<li><b>Relasi</b> adalah aturan yang memasangkan anggota himpunan satu ke himpunan lainnya.</li>
<li><b>Fungsi (Pemetaan)</b> adalah relasi khusus yang memasangkan setiap anggota domain (\(x\)) dengan <b>tepat satu</b> anggota kodomain (\(y\)).</li>
<li>Notasi fungsi ditulis sebagai \(f(x) = ax + b\) atau \(f: x \to ax + b\).</li>
</ul>
</div>
<p class="text-lg font-black text-emerald-800 text-center">Setiap fungsi adalah relasi, tetapi tidak semua relasi adalah fungsi!</p>
</div>
<img src="https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-md border-4 border-white" alt="Ilustrasi Matematika" onerror="this.src='https://images.unsplash.com/photo-1541888946425-d0fbb18f86f6?auto=format&fit=crop&w=500&q=80'">
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-xs font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-3xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika sebuah fungsi kuadrat diberikan sebagai \(f(x) = x^2 - 3x + 2\) dan seorang siswa menghitung \(f(4) = 8\), bagaimana cara kita mengevaluasi apakah perhitungan tersebut benar atau salah?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-base">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Lakukan substitusi nilai \(x = 4\) ke dalam persamaan fungsi dengan cermat dan teliti!</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-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Penerapan Nyata Nilai Fungsi dalam 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-teal-200 shadow-sm text-center space-y-3">
<span class="text-4xl block">🚕</span>
<h4 class="font-black text-lg text-teal-800">Tarif Taksi Online</h4>
<p class="text-slate-600 font-bold text-sm">Biaya perjalanan ditentukan oleh fungsi linier berdasarkan jarak tempuh dalam kilometer (\(x\)).</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-4xl block">📈</span>
<h4 class="font-black text-lg text-teal-800">Pertumbuhan Populasi</h4>
<p class="text-slate-600 font-bold text-sm">Evaluasi nilai fungsi waktu (\(t\)) digunakan untuk memprediksi jumlah pertumbuhan bakteri atau penduduk.</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-4xl block">⚡</span>
<h4 class="font-black text-lg text-teal-800">Konsumsi Energi</h4>
<p class="text-slate-600 font-bold text-sm">Menghitung besaran tagihan listrik bulanan berdasarkan jumlah kWh yang digunakan.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Mengevaluasi Nilai Fungsi -->
<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-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi Inti 1: Mengevaluasi Nilai Fungsi 🛠️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-emerald-50 p-5 rounded-2xl border border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-base">Konsep Evaluasi Nilai</h4>
<p class="text-xs font-bold text-slate-700 leading-relaxed">
Mengevaluasi fungsi berarti memeriksa dan menghitung kebenaran nilai output (\(y\) atau \(f(x)\)) ketika nilai input (\(x\)) tertentu disubstitusikan ke dalam rumus fungsi.
</p>
</div>
<div class="bg-teal-50 p-5 rounded-2xl border border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-base">Contoh Analisis Kasus</h4>
<p class="text-xs font-bold text-slate-700 leading-relaxed">
Diketahui \(f(x) = x^2 - 3x + 2\). Siswa mengklaim \(f(4) = 8\). Mari kita buktikan:<br>
\(f(4) = (4)^2 - 3(4) + 2 = 16 - 12 + 2 = 6\).<br>
Maka klaim tersebut <b>keliru</b> karena hasil yang tepat adalah \(6\).
</p>
</div>
</div>
<div class="bg-slate-50 p-4 rounded-2xl border border-slate-200 space-y-2">
<h4 class="font-black text-slate-800 text-sm">Latihan Mini Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">Jika \(f(x) = 2x + 5\), berapakah nilai dari \(f(3)\)?</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat. Coba hitung 2(3) + 5.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl text-sm">10</button>
<button onclick="alert('Hebat! Benar, f(3) = 2(3) + 5 = 6 + 5 = 11.')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl text-sm">11 ✅</button>
<button onclick="alert('Kurang tepat.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl text-sm">12</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti - Pemecahan Masalah 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-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Materi Inti 2: Pemecahan Masalah 💡</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-lg mt-2 space-y-5">
<p class="text-base font-bold text-slate-700">Langkah taktis menyelesaikan soal cerita relasi dan fungsi:</p>
<div class="bg-teal-50 p-6 rounded-2xl border border-teal-200 space-y-3">
<h4 class="font-black text-teal-900 text-lg">Studi Kasus: Tarif Taksi</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed">
Sebuah perusahaan taksi menetapkan tarif awal sebesar Rp10.000, ditambah Rp5.000 untuk setiap kilometer perjalanan (\(x\)). Fungsi biaya perjalanan dirumuskan sebagai \(f(x) = 5000x + 10000\). Berapa total biaya jika jarak perjalanan \(6\) km?
</p>
<div class="bg-white p-4 rounded-xl border border-teal-100 shadow-sm space-y-1 text-xs font-bold text-slate-600">
<p>1. Identifikasi fungsi: \(f(x) = 5000x + 10000\).</p>
<p>2. Substitusikan nilai \(x = 6\): \(f(6) = 5000(6) + 10000\).</p>
<p>3. Lakukan perhitungan: \(30000 + 10000 = \) <b class="text-emerald-700">Rp40.000</b>.</p>
</div>
</div>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<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-3xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-sm font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab masing-masing 5 soal relasi dan fungsi secara serentak.</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-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 text-sm">
<span>🏎️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-base 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-2.5 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-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 text-sm">
<span>🚓 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-base 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-2.5 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-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-base 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-2.5 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-8xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-emerald-400 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#065f46] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Relasi dan Fungsi</h2>
<p class="text-base font-bold text-slate-500 mb-6">Uji kemampuan individumu dengan mengerjakan 5 soal pilihan ganda berikut.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-sm">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl md:text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-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-emerald-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 9: Refleksi (Paling Akhir) -->
<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-4xl md:text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-lg font-bold text-slate-600 max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari materi Relasi dan Fungsi 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-5xl mb-2">😎</div>
<h3 class="font-black text-lg text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-5xl mb-2">🤔</div>
<h3 class="font-black text-lg text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-5xl mb-2">🤯</div>
<h3 class="font-black text-lg text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan kesan atau bagian paling menarik hari ini:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</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-base disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300">
<i data-lucide="chevron-left" class="w-5 h-5"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-5 h-5"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
// Render ulang MathJax setiap pindah slide agar notasi matematika terupdate
if (window.MathJax) {
MathJax.typesetPromise();
}
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Diketahui fungsi \\(f(x) = 3x - 2\\). Nilai dari \\(f(4)\\) adalah...", opts: ["10", "12", "14"], ans: 0 },
{ q: "Jika \\(f(x) = x^2 + 2x - 3\\), berapakah nilai dari \\(f(2)\\)?", opts: ["5", "7", "9"], ans: 0 },
{ q: "Suatu fungsi \\(f\\) dirumuskan dengan \\(f(x) = 5 - 2x\\). Jika \\(f(a) = -3\\), nilai \\(a\\) adalah...", opts: ["2", "3", "4"], ans: 2 },
{ q: "Diketahui fungsi \\(f(x) = ax + b\\). Jika \\(f(2) = 5\\) dan \\(f(4) = 11\\), nilai \\(a\\) adalah...", opts: ["2", "3", "4"], ans: 1 },
{ q: "Biaya sewa taksi dihitung dengan \\(f(x) = 4000x + 8000\\) (\\(x\\) dalam km). Biaya untuk jarak \\(5\\) km adalah...", opts: ["Rp24.000", "Rp28.000", "Rp32.000"], ans: 1 },
{ q: "Manakah relasi berikut yang merupakan fungsi (pemetaan)?", opts: ["\\(\\{(1,2), (1,3), (2,4)\\} \\)", "\\(\\{(1,2), (2,3), (3,4)\\} \\)", "\\(\\{(1,2), (2,2), (1,4)\\} \\)"], ans: 1 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).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-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
if (window.MathJax) MathJax.typesetPromise();
}
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-2.5 bg-green-500 text-white font-black rounded-xl text-xs border 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-2.5 bg-rose-500 text-white font-black rounded-xl text-xs border border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border 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 = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Diketahui suatu fungsi kuadrat: \\(f(x) = x^2 - 3x + 2\\). Apakah hasil perhitungan \\(f(4) = 8\\) tepat?",
options: ["Tepat, karena \\(16 - 12 + 2 = 8\\)", "Tidak tepat, hasil yang benar adalah \\(6\\)", "Tepat, karena \\(4^2 - 3(4) = 8\\)", "Tidak tepat, hasil yang benar adalah \\(10\\)"],
a: 1,
exp: "Substitusi yang benar: \\(f(4) = 4^2 - 3(4) + 2 = 16 - 12 + 2 = 6\\)."
},
{
q: "Diketahui fungsi \\(f(x) = 5x - 3\\). Jika nilai \\(f(a) = 12\\), maka nilai \\(a\\) adalah...",
options: ["2", "3", "4", "5"],
a: 1,
exp: "\\(5a - 3 = 12 \\implies 5a = 15 \\implies a = 3\\)."
},
{
q: "Sebuah perusahaan taksi menetapkan tarif awal Rp10.000 dan Rp5.000 per kilometer. Jika fungsi biaya \\(f(x) = 5000x + 10000\\), berapa total biaya untuk jarak \\(6\\) km?",
options: ["Rp35.000", "Rp40.000", "Rp45.000", "Rp50.000"],
a: 1,
exp: "\\(f(6) = 5000(6) + 10000 = 30000 + 10000 = \\text{Rp40.000}\\)."
},
{
q: "Jika fungsi \\(f\\) dirumuskan dengan \\(f(x) = x^2 - 4\\), manakah evaluasi nilai fungsi berikut yang benar?",
options: ["\\(f(3) = 9\\)", "\\(f(-2) = 0\\)", "\\(f(1) = -5\\)", "\\(f(0) = 4\\)"],
a: 1,
exp: "\\(f(-2) = (-2)^2 - 4 = 4 - 4 = 0\\)."
},
{
q: "Suatu fungsi didefinisikan \\(f(x) = 3x + c\\). Jika \\(f(2) = 11\\), berapakah nilai dari \\(f(5)\\)?",
options: ["17", "20", "23", "26"],
a: 1,
exp: "\\(3(2) + c = 11 \\implies 6 + c = 11 \\implies c = 5\\). Maka \\(f(x) = 3x + 5\\). Sehingga \\(f(5) = 3(5) + 5 = 15 + 5 = 20\\)."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
if (window.MathJax) MathJax.typesetPromise();
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
if (window.MathJax) MathJax.typesetPromise();
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Relasi dan Fungsi: " + refleksi,
strategi: "Evaluasi: Relasi & Fungsi"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Persamaan Garis Lurus 📐 : Gradien, Penyusunan Persamaan, dan Pemecahan Masalah Kontekstual.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Master Persamaan Garis Lurus 📐</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=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<!-- MathJax untuk Rendering Matematika yang Sempurna -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#d1fae5 1.5px, transparent 1.5px);
background-size: 24px 24px;
}
.slide { display: none; opacity: 0; transform: scale(0.96) translateY(15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 4px solid #047857; cursor: pointer; }
.guess-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.btn-correct { background-color: #059669 !important; color: white !important; border-bottom-color: #065f46 !important; pointer-events: none; }
.btn-wrong { background-color: #e11d48 !important; color: white !important; border-bottom-color: #9f1239 !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.15); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
.ifp-col { border-right: 3px dashed #a7f3d0; }
.ifp-col:last-child { border-right: none; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/95 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2.5 rounded-2xl shadow-md 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-xs font-extrabold text-emerald-800 uppercase tracking-widest">Matematika Kelas 8 - Persamaan Garis Lurus (Part Lanjutan)</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-3.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
<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-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-xs font-extrabold uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-2">
Mastering <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Persamaan Garis Lurus</span> 📐
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-xl text-left mt-6 max-w-2xl mx-auto">
<h3 class="font-black text-lg text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-600"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-2.5 text-base font-bold text-slate-600 list-decimal list-inside pl-2">
<li>Menentukan <span class="text-emerald-700">gradien (\(m\))</span> dari suatu garis lurus.</li>
<li>Menentukan <span class="text-emerald-700">persamaan garis lurus</span> berdasarkan informasi yang diketahui.</li>
<li>Memecahkan <span class="text-emerald-700">masalah kontekstual</span> yang berkaitan dengan persamaan garis lurus.</li>
</ol>
</div>
<p class="text-base font-bold text-slate-500 mt-4 animate-pulse">Siap menaklukkan tantangan garis lurus? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Visual -->
<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-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Kemiringan 👁️🗨️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Perhatikan tingkat kecuraman tangga atau bidang miring berikut!</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-4">
<div class="bg-emerald-50 p-6 rounded-2xl border border-emerald-200 space-y-3">
<p class="text-base font-bold text-slate-700">🔍 <b>Konsep Kemiringan (Gradien):</b></p>
<ul class="space-y-2 text-slate-600 font-bold list-disc list-inside text-sm">
<li>Semakin curam tanjakan, semakin besar nilai kemiringannya.</li>
<li>Dalam matematika, kemiringan vertikal dibagi kemiringan horizontal disebut <b>Gradien (\(m\))</b>.</li>
<li>Rumus dasarnya: \(m = \frac{\text{Perubahan Vertikal } (\Delta y)}{\text{Perubahan Horizontal } (\Delta x)}\).</li>
</ul>
</div>
<p class="text-lg font-black text-emerald-800 text-center">Nilai gradien menentukan seberapa cepat nilai \(y\) naik atau turun terhadap \(x\)!</p>
</div>
<img src="https://images.unsplash.com/photo-1541888946425-d0fbb18f86f6?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-md border-4 border-white" alt="Kemiringan Tangga" onerror="this.src='https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=500&q=80'">
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-xs font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-3xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kamu tahu tarif awal naik taksi dan tambahan biaya per kilometer, bagaimana cara menyusun rumus matematika utuh untuk menghitung total biayanya?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-base">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Kamu bisa menyusun Persamaan Garis Lurus (\(y = mx + c\)) menggunakan informasi gradien dan titik koordinat yang ada!</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-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-base font-bold text-slate-500 mt-2">Penerapan Nyata Gradien & Penyusunan Persamaan Garis</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-4xl block">🛹</span>
<h4 class="font-black text-lg text-teal-800">Lintasan Skateboard (Ramp)</h4>
<p class="text-slate-600 font-bold text-sm">Pembangunan bidang luncur skateboard harus memperhitungkan gradien yang aman dan mulus bagi pemain.</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-4xl block">💰</span>
<h4 class="font-black text-lg text-teal-800">Prediksi Laba Bisnis</h4>
<p class="text-slate-600 font-bold text-sm">Pengusaha menyusun model persamaan garis lurus untuk memperkirakan pertumbuhan keuntungan toko tiap bulan.</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-4xl block">🌡️</span>
<h4 class="font-black text-lg text-teal-800">Konversi Suhu</h4>
<p class="text-slate-600 font-bold text-sm">Hubungan linier antara skala termometer Celsius (°C) dan Fahrenheit (°F) mengikuti kaidah persamaan garis lurus.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Menentukan Gradien & Menyusun Persamaan -->
<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-3xl md:text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi Inti: Rumus & Strategi Kunci 🛠️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-lg mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-emerald-50 p-5 rounded-2xl border border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-base">1. Berbagai Cara Menentukan Gradien (\(m\))</h4>
<ul class="text-xs font-bold text-slate-700 space-y-1.5 list-disc list-inside">
<li>Persamaan \(y = mx + c \implies\) gradiennya adalah koefisien \(x\) (\(m\)).</li>
<li>Persamaan \(Ax + By + C = 0 \implies m = -\frac{A}{B}\).</li>
<li>Melalui 2 titik \((x_1, y_1)\) dan \((x_2, y_2) \implies m = \frac{y_2 - y_1}{x_2 - x_1}\).</li>
</ul>
</div>
<div class="bg-teal-50 p-5 rounded-2xl border border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-base">2. Menyusun Persamaan Garis Lurus</h4>
<ul class="text-xs font-bold text-slate-700 space-y-1.5 list-disc list-inside">
<li><b>Diketahui gradien \(m\) dan 1 titik \((x_1, y_1)\):</b><br>Rumus: \(y - y_1 = m(x - x_1)\).</li>
<li><b>Diketahui 2 titik \((x_1, y_1)\) dan \((x_2, y_2)\):</b><br>Rumus: \(\frac{y - y_1}{y_2 - y_1} = \frac{x - x_1}{x_2 - x_1}\).</li>
</ul>
</div>
</div>
<div class="bg-slate-50 p-4 rounded-2xl border border-slate-200 space-y-2">
<h4 class="font-black text-slate-800 text-sm">Latihan Mini Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">Tentukan gradien dari garis yang melalui titik \((1, 3)\) dan \((3, 7)\)I</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat. Coba hitung selisih y dibagi selisih x.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl text-sm">1</button>
<button onclick="alert('Hebat! Benar, m = (7 - 3) / (3 - 1) = 4 / 2 = 2.')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl text-sm">2 ✅</button>
<button onclick="alert('Kurang tepat.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl text-sm">4</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti - Pemecahan Masalah Kontekstual PGL -->
<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-3xl md:text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Pemecahan Masalah Kontekstual 💡</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-lg mt-2 space-y-5">
<p class="text-base font-bold text-slate-700">Langkah taktis menyelesaikan soal cerita persamaan garis lurus:</p>
<div class="bg-teal-50 p-6 rounded-2xl border border-teal-200 space-y-3">
<h4 class="font-black text-teal-900 text-lg">Studi Kasus: Sewa Mobil</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed">
Rental mobil mengenakan tarif tetap ditambah biaya per jam pemakaian. Jika sewa 2 jam biayanya Rp150.000, dan sewa 5 jam biayanya Rp300.000. Berapakah biaya sewa selama 8 jam?
</p>
<div class="bg-white p-4 rounded-xl border border-teal-100 shadow-sm space-y-1 text-xs font-bold text-slate-600">
<p>1. Ubah jadi titik koordinat: \((2, 150)\) dan \((5, 300)\).</p>
<p>2. Cari gradien (\(m\)): \(m = \frac{300 - 150}{5 - 2} = \frac{150}{3} = 50\) (artinya biaya per jam Rp50.000).</p>
<p>3. Susun persamaan: \(y - 150 = 50(x - 2) \implies y = 50x + 50\).</p>
<p>4. Hitung untuk 8 jam (\(x = 8\)): \(y = 50(8) + 50 = 400 + 50 = \) <b class="text-emerald-700">Rp450.000</b>.</p>
</div>
</div>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<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-3xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-sm font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab masing-masing 5 soal gradien & persamaan garis secara serentak.</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-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 text-sm">
<span>🏎️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-emerald-50 p-4 rounded-2xl border border-emerald-100 text-center">
<p id="ifp-q-1" class="text-base 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-2.5 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-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 text-sm">
<span>🚓 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-100 text-center">
<p id="ifp-q-2" class="text-base 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-2.5 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-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black text-sm">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-xs">Soal 1/5</span>
</div>
<div class="mt-8 flex-1 flex flex-col justify-center space-y-3">
<div class="bg-green-50 p-4 rounded-2xl border border-green-100 text-center">
<p id="ifp-q-3" class="text-base 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-2.5 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-8xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-emerald-400 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#065f46] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Persamaan Garis Lurus</h2>
<p class="text-base font-bold text-slate-500 mb-6">Uji kemampuan individumu dengan mengerjakan 5 soal pilihan ganda berikut.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-xl text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-800 bg-emerald-100 px-3 py-1 rounded-lg text-sm">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl md:text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-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-emerald-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 9: Refleksi (Paling Akhir) -->
<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-4xl md:text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-lg font-bold text-slate-600 max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari materi lanjutan Persamaan Garis Lurus 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-5xl mb-2">😎</div>
<h3 class="font-black text-lg text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-5xl mb-2">🤔</div>
<h3 class="font-black text-lg text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-5xl mb-2">🤯</div>
<h3 class="font-black text-lg text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan kesan atau bagian paling menarik hari ini:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</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-base disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-5 h-5"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-base disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-5 h-5"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
if (window.MathJax) {
MathJax.typesetPromise();
}
}
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;
}
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Gradien dari persamaan \\(3x - 6y = 12\\) adalah...", opts: ["\\(\\frac{1}{2}\\)", "\\(2\\)", "\\(-2\\)"], ans: 0 },
{ q: "Gradien garis yang melalui titik \\((2, 5)\\) dan \\((4, 11)\\) adalah...", opts: ["\\(2\\)", "\\(3\\)", "\\(4\\)"], ans: 1 },
{ q: "Persamaan garis bergradien \\(m = -3\\) melalui titik \\((0, 4)\\) adalah...", opts: ["\\(y = -3x + 4\\)", "\\(y = 3x - 4\\)", "\\(y = -3x - 4\\)"], ans: 0 },
{ q: "Jika dua garis saling tegak lurus, maka hasil kali gradiennya (\\(m_1 \\times m_2\\)) adalah...", opts: ["\\(1\\)", "\\(0\\)", "\\(-1\\)"], ans: 2 },
{ q: "Gradien garis yang sejajar dengan sumbu-X bernilai...", opts: ["\\(0\\)", "Tak terhingga", "\\(1\\)"], ans: 0 },
{ q: "Persamaan garis yang melalui titik \\((1, 2)\\) dengan gradien \\(m = 4\\) adalah...", opts: ["\\(y = 4x - 2\\)", "\\(y = 4x + 2\\)", "\\(y = 2x + 4\\)"], ans: 0 },
{ q: "Gradien dari garis dengan persamaan \\(y = -5x + 9\\) adalah...", opts: ["\\(9\\)", "\\(5\\)", "\\(-5\\)"], ans: 2 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).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-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-xs border border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
if (window.MathJax) MathJax.typesetPromise();
}
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-2.5 bg-green-500 text-white font-black rounded-xl text-xs border 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-2.5 bg-rose-500 text-white font-black rounded-xl text-xs border border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-xs border 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 = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Tentukan gradien (\\(m\\)) dari persamaan garis \\(2x - 4y + 8 = 0\\).",
options: ["\\(-\\frac{1}{2}\\)", "\\(\\frac{1}{2}\\)", "\\(2\\)", "\\(-2\\)"],
a: 1,
exp: "Gunakan rumus \\(m = -\\frac{A}{B} = -\\frac{2}{-4} = \\frac{1}{2}\\)."
},
{
q: "Persamaan garis yang melalui titik \\((3, 5)\\) dengan gradien \\(m = 2\\) adalah...",
options: ["\\(y = 2x - 1\\)", "\\(y = 2x + 1\\)", "\\(y = 2x + 5\\)", "\\(y = 3x + 2\\)"],
a: 0,
exp: "\\(y - 5 = 2(x - 3) \\implies y - 5 = 2x - 6 \\implies y = 2x - 1\\)."
},
{
q: "Tentukan persamaan garis yang melalui dua titik koordinat: \\((2, 3)\\) dan \\((4, 7)\\).",
options: ["\\(y = 2x - 1\\)", "\\(y = 2x + 1\\)", "\\(y = x + 3\\)", "\\(y = 3x - 2\\)"],
a: 0,
exp: "\\(m = \\frac{7 - 3}{4 - 2} = \\frac{4}{2} = 2\\). Lalu \\(y - 3 = 2(x - 2) \\implies y = 2x - 1\\)."
},
{
q: "Manakah di bawah ini persamaan garis yang <b>tegak lurus</b> dengan garis \\(y = 2x + 3\\)?",
options: ["\\(y = 2x - 5\\)", "\\(y = -2x + 4\\)", "\\(y = -\\frac{1}{2}x + 6\\)", "\\(y = \\frac{1}{2}x + 3\\)"],
a: 2,
exp: "Garis tegak lurus memiliki syarat \\(m_1 \\times m_2 = -1\\). Karena \\(m_1 = 2\\), maka \\(m_2 = -\\frac{1}{2}\\). Pilihan yang tepat adalah \\(y = -\\frac{1}{2}x + 6\\)."
},
{
q: "Biaya sewa alat berat adalah Rp100.000 sebagai biaya antar ditambah Rp50.000 per jam pemakaian. Jika sebuah proyek memakan waktu 6 jam, total biaya sewanya adalah...",
options: ["Rp300.000", "Rp350.000", "Rp400.000", "Rp450.000"],
a: 2,
exp: "Persamaan: \\(y = 50000x + 100000\\). Untuk \\(x = 6 \\implies y = 50000(6) + 100000 = 300000 + 100000 = \\text{Rp400.000}\\)."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
if (window.MathJax) MathJax.typesetPromise();
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
if (window.MathJax) MathJax.typesetPromise();
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi PGL Lanjutan: " + refleksi,
strategi: "Evaluasi: Gradien & Persamaan Garis"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Persamaan Garis Lurus : Interpretasi Grafik Linear
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Interpretasi Grafik Linear 📈</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(#cffafe 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #0284c7 !important; color: white !important; border-bottom-color: #0369a1 !important; pointer-events: none; }
.btn-wrong { background-color: #e11d48 !important; color: white !important; border-bottom-color: #9f1239 !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; }
.ifp-col { border-right: 3px dashed #cbd5e1; }
.ifp-col:last-child { border-right: none; }
</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="line-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-cyan-800 uppercase tracking-widest">Matematika Kelas 8 - Interpretasi Grafik Linear</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-cyan-400 via-sky-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-4xl 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 D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Membaca Makna <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-blue-600">Grafik Linear</span> di Dunia Nyata 📈
</h1>
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80" alt="Grafik Bisnis" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-cyan-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-cyan-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-cyan-600">menginterpretasikan grafik linear</span> yang dihubungkan dengan masalah kontekstual dalam kehidupan sehari-hari.</li>
<li>Peserta didik dapat menyimpulkan makna dari <b>titik potong</b> dan <b>kemiringan (gradien)</b> pada suatu grafik nyata.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Mari kita bongkar rahasia di balik garis lurus! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-cyan-900 bg-cyan-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Pola Grafik 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Perhatikan arah garis pada dua kejadian di bawah ini!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-sm space-y-3">
<span class="text-4xl">📈</span>
<h4 class="font-black text-xl text-cyan-800">Kasus A: Menabung di Bank</h4>
<p class="text-slate-600 font-bold">Setiap bulan tabungan bertambah Rp100.000. Grafiknya akan menanjak dari kiri bawah ke kanan atas.</p>
<p class="text-xs font-bold text-cyan-700 bg-cyan-50 p-2 rounded-lg">Gradien Positif (+): Semakin lama waktunya, saldonya semakin tinggi.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-sm space-y-3">
<span class="text-4xl">📉</span>
<h4 class="font-black text-xl text-rose-800">Kasus B: Tangki Air Bocor</h4>
<p class="text-slate-600 font-bold">Setiap menit air berkurang 5 liter. Grafiknya akan menurun dari kiri atas ke kanan bawah.</p>
<p class="text-xs font-bold text-rose-700 bg-rose-50 p-2 rounded-lg">Gradien Negatif (-): Semakin lama waktunya, volume air semakin sedikit.</p>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kamu melihat grafik persentase baterai HP yang terus menurun membentuk garis lurus, bisakah kamu menebak jam berapa HP-mu akan mati total tanpa harus menunggu layarnya gelap?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Kamu bisa memprediksinya dengan melihat letak **titik potong grafik pada Sumbu-X** (waktu saat baterai mencapai 0%).</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">Di mana kita menjumpai grafik linear dalam 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-blue-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🚕</span>
<h4 class="font-black text-xl text-blue-800">Tarif Taksi / Ojol</h4>
<p class="text-slate-600 font-bold text-sm">Grafik tarif tidak pernah dimulai dari angka nol. Tarif buka pintu (awal) adalah titik potong di sumbu-Y.</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">Tagihan Listrik</h4>
<p class="text-slate-600 font-bold text-sm">Biaya beban tetap per bulan ditambah dengan tarif listrik per kWh pemakaian membentuk garis lurus yang naik.</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">Kecepatan & Jarak</h4>
<p class="text-slate-600 font-bold text-sm">Dalam pelajaran Fisika, grafik jarak terhadap waktu (s-t) yang berupa garis lurus menandakan kecepatan yang konstan.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Makna Komponen PGL -->
<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: Makna Tersembunyi Grafik 🔍</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-cyan-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Pada persamaan $y = mx + c$, setiap huruf memiliki makna nyata di dunia nyata:</p>
<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-3">
<h4 class="font-black text-cyan-900 text-lg">Konstanta $c$ (Titik Potong Sumbu Y)</h4>
<p class="text-slate-700 font-bold text-sm">Ini adalah <b>NILAI AWAL</b> sebelum ada proses apa-apa (saat $x = 0$).</p>
<ul class="text-xs font-bold text-cyan-800 list-disc list-inside space-y-1">
<li>Modal awal saat buka usaha.</li>
<li>Tarif "buka pintu" sebelum taksi berjalan.</li>
<li>Volume air di ember sebelum kran dibuka.</li>
</ul>
</div>
<div class="bg-sky-50 p-5 rounded-2xl border-2 border-sky-200 space-y-3">
<h4 class="font-black text-sky-900 text-lg">Gradien $m$ (Kemiringan Garis)</h4>
<p class="text-slate-700 font-bold text-sm">Ini adalah <b>KECEPATAN PERUBAHAN</b> dari setiap kejadian.</p>
<ul class="text-xs font-bold text-sky-800 list-disc list-inside space-y-1">
<li>Harga argo taksi setiap nambah 1 kilometer.</li>
<li>Berapa liter air bocor setiap 1 menit.</li>
<li>Kecepatan lari seseorang dalam m/s.</li>
</ul>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Mini Kuis Analisis:</h4>
<p class="text-slate-700 font-bold text-sm">Grafik tarif ojek memiliki rumus: <b>Biaya = 5000 × Jarak + 10000</b>. Apakah makna angka 10.000?</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, biaya per km adalah 5000 (gradien).')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">Biaya per kilometer</button>
<button onclick="alert('Hebat! Benar, 10000 adalah konstanta (titik potong sumbu Y) alias tarif dasar/tarif awal pesan.')" class="px-4 py-2 bg-cyan-600 text-white font-bold rounded-xl hover:bg-cyan-700">Tarif dasar/awal pesan ✅</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti - Membuat Prediksi dari Grafik -->
<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 2: Membuat Prediksi Jitu 🎯</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-blue-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Dengan grafik linear, kita bisa memprediksi kejadian di masa depan atau mengkalkulasi ke masa lalu (ekstrapolasi/interpolasi).</p>
<div class="bg-blue-50 p-6 rounded-2xl border-2 border-blue-200 flex flex-col md:flex-row gap-6 items-center">
<div class="flex-1 space-y-3">
<h4 class="font-black text-blue-900 text-xl">Studi Kasus: Tangki Air</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed">
Sebuah tangki air berisi 1000 liter. Karena ada kebocoran, air berkurang 50 liter per jam. Persamaan grafiknya adalah:<br>
<span class="math-box bg-white px-2 py-1 rounded inline-block mt-2">Volume = -50(waktu) + 1000</span>
</p>
<p class="text-slate-800 font-bold text-sm mt-3"><b>Pertanyaan:</b> Kapan tangki tersebut akan benar-benar KOSONG (Volume = 0)?</p>
</div>
<div class="bg-white p-5 rounded-xl border border-blue-100 shadow-sm w-full md:w-1/2">
<p class="font-black text-blue-800 mb-2 border-b pb-2">Langkah Prediksi:</p>
<ol class="space-y-1 text-sm font-bold text-slate-600 list-decimal list-inside">
<li>Ubah Volume menjadi 0.</li>
<li>$0 = -50(waktu) + 1000$</li>
<li>Pindah ruas: $50(waktu) = 1000$</li>
<li>waktu = $1000 \div 50$</li>
<li>waktu = <b class="text-rose-600">20 jam</b>.</li>
</ol>
<p class="text-xs text-blue-700 mt-2">Artinya, titik potong pada Sumbu-X berada di angka 20!</p>
</div>
</div>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<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 MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan interpretasi grafik ini secepat mungkin.</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-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-sky-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-sky-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-sky-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-sky-50 p-4 rounded-2xl border-2 border-sky-100 text-center">
<p id="ifp-q-2" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-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-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-blue-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#1e3a8a] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Interpretasi Grafik</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji seberapa jeli kamu membaca grafik di dunia nyata!</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>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-cyan-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-cyan-500 to-blue-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-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-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-cyan-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-cyan-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-cyan-500 to-blue-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 9: Refleksi (Paling Akhir) -->
<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 interpretasi grafik kehidupan nyata hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan hal baru yang kamu sadari setelah membaca grafik nyata:</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>
</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_#0891b2]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Titik potong sumbu-Y pada grafik tarif ojek online mewakili...", opts: ["Tarif dasar (buka pintu)", "Tarif per km", "Jarak maksimal"], ans: 0 },
{ q: "Jika tabungan bertambah setiap bulan, maka gradien grafiknya bernilai...", opts: ["Positif", "Negatif", "Nol"], ans: 0 },
{ q: "Grafik sisa baterai HP terhadap waktu bermain game memiliki kemiringan...", opts: ["Naik (Positif)", "Turun (Negatif)", "Lurus Mendatar"], ans: 1 },
{ q: "Pada rumus Taksi: Harga = 4000(jarak) + 8000. Angka 4000 disebut sebagai...", opts: ["Gradien / Kecepatan Tarif", "Tarif Awal", "Jarak Maksimal"], ans: 0 },
{ q: "Jika mobil parkir (jaraknya 0 meter) tapi argo jalan terus, grafiknya akan berbentuk...", opts: ["Menanjak", "Garis Mendatar (Nol)", "Menurun"], ans: 1 },
{ q: "Titik potong Sumbu-X pada grafik tangki bocor mewakili...", opts: ["Waktu saat tangki habis/kosong", "Volume awal air", "Kecepatan bocor"], ans: 0 },
{ q: "Jika m = 0 pada grafik jarak terhadap waktu (s-t), artinya benda tersebut...", opts: ["Bergerak cepat", "Bergerak mundur", "Diam / Berhenti"], ans: 2 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).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 = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Sebuah perusahaan taksi memasang tarif dasar Rp15.000, dan tambahan biaya Rp5.000 per kilometer. Dalam grafik linear, angka 15.000 merepresentasikan...",
options: ["Gradien garis", "Titik potong Sumbu-X", "Titik potong Sumbu-Y", "Kemiringan garis"],
a: 2,
exp: "Titik potong sumbu-Y (konstanta c) adalah nilai awal sebelum perjalanan dimulai (x = 0), yaitu tarif dasar taksi sebesar 15.000."
},
{
q: "Jika sebuah grafik tabungan memiliki gradien yang bernilai negatif (-), hal ini menandakan bahwa...",
options: ["Jumlah uang tabungan terus bertambah setiap bulan", "Orang tersebut terus menarik saldo tabungannya", "Tidak ada transaksi sama sekali", "Bunga bank naik"],
a: 1,
exp: "Gradien negatif berarti nilai Y (saldo) semakin turun seiring berjalannya nilai X (waktu). Ini menandakan penarikan atau pengurangan saldo."
},
{
q: "Biaya sewa lapangan futsal adalah Rp50.000 untuk administrasi dan Rp100.000 per jam. Persamaan grafiknya adalah y = 100.000x + 50.000. Jika sewa selama 3 jam, biaya (y) yang dikeluarkan adalah...",
options: ["Rp150.000", "Rp300.000", "Rp350.000", "Rp450.000"],
a: 2,
exp: "Masukkan nilai x = 3 ke dalam persamaan: y = 100.000(3) + 50.000 = 300.000 + 50.000 = <b>Rp350.000</b>."
},
{
q: "Pada grafik baterai HP yang terus digunakan bermain game, Sumbu Y menunjukkan sisa % baterai, dan Sumbu X waktu. Apa arti dari titik potong grafik terhadap Sumbu-X?",
options: ["Waktu HP pertama kali dinyalakan", "Waktu saat baterai mencapai angka 0% (HP mati)", "Kapasitas maksimal baterai HP", "Kecepatan baterai berkurang"],
a: 1,
exp: "Titik potong sumbu-X berarti nilai y (baterai) bernilai 0. Ini merepresentasikan momen saat baterai habis total."
},
{
q: "Sebuah tangki air membocorkan 20 liter air setiap menit. Dalam grafik Volume vs Waktu, angka -20 mewakili apa?",
options: ["Konstanta", "Waktu tangki kosong", "Titik Potong Sumbu Y", "Gradien (Kemiringan)"],
a: 3,
exp: "Kecepatan perubahan volume (-20 liter/menit) menunjukkan tingkat penurunan garis pada grafik, yang secara matematis disebut Gradien (m)."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-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>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Interpretasi Grafik: " + refleksi,
strategi: "Evaluasi: Interpretasi Grafik Kontekstual"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Persamaan Garis Lurus
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Persamaan Garis Lurus 📈</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">
<!-- MathJax untuk Rendering Matematika yang Sempurna -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #eef2ff;
background-image: radial-gradient(#c7d2fe 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #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; }
.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; }
.ifp-col { border-right: 3px dashed #cbd5e1; }
.ifp-col:last-child { border-right: none; }
</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="trending-up" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-indigo-800 uppercase tracking-widest">Matematika Kelas 8 - Persamaan Garis Lurus</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-blue-400 via-indigo-500 to-purple-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-indigo-100 text-indigo-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Menjelajah <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">Persamaan Garis Lurus</span> 📈
</h1>
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80" alt="Grafik Garis" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-indigo-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-indigo-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-indigo-600">memahami konsep dan bentuk umum</span> Persamaan Garis Lurus pada bidang Cartesius.</li>
<li>Peserta didik dapat <span class="text-indigo-600">menentukan kemiringan (gradien)</span> dari suatu garis lurus.</li>
<li>Peserta didik dapat <span class="text-indigo-600">menyusun persamaan garis lurus</span> berdasarkan titik koordinat dan gradiennya.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menggambar dan menganalisis garis? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Titik Koordinat 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati sebaran titik-titik pada bidang Cartesius berikut!</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-4">
<div class="bg-indigo-50 p-6 rounded-2xl border-2 border-indigo-200 space-y-3">
<p class="text-lg font-bold text-slate-700">🔍 <b>Pola Hubungan Titik:</b></p>
<ul class="space-y-2 text-slate-600 font-bold list-disc list-inside text-sm">
<li>Jika kita hubungkan titik \((1, 2)\), \((2, 4)\), \((3, 6)\), dan \((4, 8)\), terbentuklah sebuah <b>garis lurus sempurna</b>.</li>
<li>Persamaan yang menghubungkannya adalah <span class="math-box bg-white px-2 py-1 rounded text-indigo-700">\(y = 2x\)</span>.</li>
<li>Setiap perubahan nilai \(x\) selalu berbanding lurus dengan perubahan nilai \(y\).</li>
</ul>
</div>
<p class="text-xl font-black text-indigo-700 text-center">Inilah yang dinamakan Persamaan Garis Lurus (PGL)!</p>
</div>
<img src="https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-lg border-4 border-white" alt="Grafik Cartesius" onerror="this.src='https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=500&q=80'">
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Mengapa jalanan di pegunungan dibuat berkelok-kelok landai dan tidak langsung dibuat menanjak curam? Apa hubungannya dengan konsep kemiringan (gradien) garis?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Kemiringan atau tingkat kecuraman suatu garis dalam matematika disebut sebagai <b>Gradien (\(m\))</b>!</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 Persamaan Garis Lurus dalam 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">Tarif Taksi / Ojek Online</h4>
<p class="text-slate-600 font-bold text-sm">Biaya perjalanan dihitung dari tarif awal ditambah tarif per kilometer (\(y = mx + c\)).</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">Penyusutan Nilai Barang</h4>
<p class="text-slate-600 font-bold text-sm">Menghitung penurunan harga jual kendaraan atau mesin pabrik setiap tahunnya secara konstan.</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">Konstruksi Atap & Ramp</h4>
<p class="text-slate-600 font-bold text-sm">Perhitungan sudut kemiringan jalur kursi roda (ramp) atau atap rumah agar air hujan mengalir lancar.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Konsep Bentuk Umum & Gradien -->
<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: Bentuk Umum & Gradien (\(m\)) 📐</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">Bentuk Umum PGL</h4>
<p class="math-box text-xl text-indigo-700 font-bold">\(y = mx + c\)</p>
<p class="text-xs font-bold text-slate-600">Atau bentuk implisit: \(Ax + By + C = 0\).<br>Di mana \(x\) dan \(y\) adalah variabel berpangkat satu.</p>
</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-lg">Rumus Gradien (Kemiringan)</h4>
<p class="math-box text-sm text-purple-700 font-bold">\(m = \frac{\Delta y}{\Delta x} = \frac{y_2 - y_1}{x_2 - x_1}\)</p>
<p class="text-xs font-bold text-slate-600">Gradien menyatakan tingkat kecuraman garis.</p>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Contoh & Latihan Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">Tentukan gradien (\(m\)) dari persamaan garis: <b>\(y = 3x + 5\)</b></p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, itu konstanta (c).')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">5</button>
<button onclick="alert('Hebat! Benar, koefisien x adalah gradien (m = 3).')" class="px-4 py-2 bg-indigo-600 text-white font-bold rounded-xl">3 ✅</button>
<button onclick="alert('Kurang tepat.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">8</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti - Menyusun Persamaan Garis Lurus -->
<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: Menyusun Persamaan Garis ✍️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Bagaimana cara mencari rumus persamaan garis jika diketahui gradien dan titik koordinatnya?</p>
<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-3">
<h4 class="font-black text-purple-900 text-lg">Rumus Melalui 1 Titik \((x_1, y_1)\) dan Bergradien \(m\)</h4>
<p class="math-box text-lg text-purple-700 font-bold">\(y - y_1 = m(x - x_1)\)</p>
<p class="text-xs font-bold text-slate-600">Masukkan nilai gradien \(m\) dan koordinat titik ke dalam rumus lalu sederhanakan.</p>
</div>
<div class="bg-indigo-50 p-5 rounded-2xl border-2 border-indigo-200 space-y-3">
<h4 class="font-black text-indigo-900 text-lg">Rumus Melalui 2 Titik \((x_1, y_1)\) dan \((x_2, y_2)\)</h4>
<p class="math-box text-sm text-indigo-700 font-bold">\(\frac{y - y_1}{y_2 - y_1} = \frac{x - x_1}{x_2 - x_1}\)</p>
<p class="text-xs font-bold text-slate-600">Cari gradiennya terlebih dahulu, atau langsung gunakan rumus proporsi di atas.</p>
</div>
</div>
<div class="bg-slate-50 p-4 rounded-2xl border-2 border-slate-200 text-center font-bold text-slate-700 text-sm">
💡 <i>Catatan: Garis yang saling sejajar memiliki gradien yang sama (\(m_1 = m_2\)), sedangkan garis tegak lurus memiliki hasil kali gradien -1 (\(m_1 \times m_2 = -1\)).</i>
</div>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<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-purple-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab masing-masing 5 soal Persamaan Garis Lurus secara serentak.</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-center">
<p id="ifp-q-1" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-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-center">
<p id="ifp-q-2" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-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-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-indigo-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</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: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Persamaan Garis Lurus</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal mandiri ini untuk menguji pemahaman akhirmu.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-indigo-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-indigo-700 bg-indigo-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-indigo-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-indigo-600 to-purple-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-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-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-indigo-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-indigo-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-indigo-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>
</div>
<!-- Slide 9: Refleksi (Paling Akhir) -->
<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 Persamaan Garis Lurus hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan kesan atau bagian paling menarik dari materi garis lurus:</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>
</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, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
if (window.MathJax) {
MathJax.typesetPromise();
}
}
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;
}
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Gradien dari persamaan \\(y = 4x - 5\\) adalah...", opts: ["\\(4\\)", "\\(-5\\)", "\\(5\\)"], ans: 0 },
{ q: "Bentuk umum persamaan garis lurus adalah...", opts: ["\\(y = mx + c\\)", "\\(y = x^2 + c\\)", "\\(ax^2 + by = c\\)"], ans: 0 },
{ q: "Gradien garis yang melalui titik \\((0, 0)\\) dan \\((2, 6)\\) adalah...", opts: ["\\(2\\)", "\\(3\\)", "\\(6\\)"], ans: 1 },
{ q: "Dua garis yang saling sejajar memiliki nilai gradien yang...", opts: ["Berbeda", "Sama (\\(m_1 = m_2\\))", "Berkebalikan"], ans: 1 },
{ q: "Persamaan garis dengan gradien \\(m = 2\\) melalui titik \\((0, 4)\\) adalah...", opts: ["\\(y = 2x + 4\\)", "\\(y = 4x + 2\\)", "\\(y = 2x - 4\\)"], ans: 0 },
{ q: "Gradien dari persamaan \\(2x + 4y = 8\\) adalah...", opts: ["\\(-\\frac{1}{2}\\)", "\\(2\\)", "\\(-2\\)"], ans: 0 },
{ q: "Hasil kali gradien dua garis yang saling tegak lurus adalah...", opts: ["\\(1\\)", "\\(0\\)", "\\(-1\\)"], ans: 2 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).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);
});
if (window.MathJax) MathJax.typesetPromise();
}
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 = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Tentukan gradien (\\(m\\)) dari persamaan garis <b>\\(y = -2x + 7\\)</b>.",
options: ["\\(7\\)", "\\(-2\\)", "\\(2\\)", "\\(-7\\)"],
a: 1,
exp: "Bentuk persamaan \\(y = mx + c\\) menunjukkan bahwa koefisien \\(x\\) adalah gradien, maka \\(m = -2\\)."
},
{
q: "Berapakah gradien garis yang melalui titik koordinat \\((1, 2)\\) dan \\((3, 6)\\)?",
options: ["\\(1\\)", "\\(2\\)", "\\(3\\)", "\\(4\\)"],
a: 1,
exp: "\\(m = \\frac{y_2 - y_1}{x_2 - x_1} = \\frac{6 - 2}{3 - 1} = \\frac{4}{2} = 2\\)."
},
{
q: "Persamaan garis yang bergradien \\(m = 3\\) dan melalui titik pangkal \\((0, 0)\\) adalah...",
options: ["\\(y = 3x\\)", "\\(x + 3y = 0\\)", "\\(y = x + 3\\)", "\\(3y = x\\)"],
a: 0,
exp: "Melalui titik pusat \\((0,0)\\) dengan gradien \\(m\\) rumusnya adalah \\(y = mx\\), maka \\(y = 3x\\)."
},
{
q: "Manakah di bawah ini persamaan garis yang <b>sejajar</b> dengan garis \\(y = 5x - 2\\)?",
options: ["\\(y = -5x + 1\\)", "\\(y = 5x + 8\\)", "\\(y = 2x + 5\\)", "\\(5y = x\\)"],
a: 1,
exp: "Garis yang saling sejajar memiliki gradien yang sama (\\(m = 5\\)). Pilihan yang memiliki \\(m = 5\\) adalah \\(y = 5x + 8\\)."
},
{
q: "Sebuah garis melalui titik \\((2, 3)\\) dengan gradien \\(m = 4\\). Tentukan persamaan garis tersebut!",
options: ["\\(y = 4x - 5\\)", "\\(y = 4x + 3\\)", "\\(y = 3x + 4\\)", "\\(y = 4x + 5\\)"],
a: 0,
exp: "Gunakan rumus \\(y - y_1 = m(x - x_1) \\implies y - 3 = 4(x - 2) \\implies y - 3 = 4x - 8 \\implies y = 4x - 5\\)."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-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);
});
if (window.MathJax) MathJax.typesetPromise();
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
if (window.MathJax) MathJax.typesetPromise();
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi PGL: " + refleksi,
strategi: "Evaluasi: Persamaan Garis Lurus"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Statistika : Misi Puncak Statistika & Keputusan Data
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Misi Puncak Statistika & Keputusan Data 📊</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<!-- MathJax untuk Rendering Matematika yang Sempurna -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fafaf9;
background-image: radial-gradient(#e7e5e4 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #d97706 !important; color: white !important; border-bottom-color: #b45309 !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; }
.ifp-col { border-right: 3px dashed #cbd5e1; }
.ifp-col:last-child { border-right: none; }
</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="award" 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-800 uppercase tracking-widest">Matematika Kelas 8 - Misi Puncak Statistika</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-orange-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka (Misi Puncak)
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Analisis, Prediksi & <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600">Pengambilan Keputusan</span> 🎯
</h1>
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=800&q=80" alt="Keputusan Bisnis" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-amber-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-amber-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-amber-600">memecahkan masalah kontekstual</span> yang berkaitan dengan ukuran pemusatan dan penyebaran data.</li>
<li>Peserta didik dapat <span class="text-amber-600">memprediksi dampak perubahan data</span> terhadap ukuran pemusatan dan penyebaran data.</li>
<li>Peserta didik dapat <span class="text-amber-600">membuat keputusan yang tepat</span> berdasarkan hasil analisis data dalam konteks kehidupan sehari-hari.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menjadi analis data handal? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Kasus Nyata 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Perhatikan situasi dilema manajer toko sepatu berikut!</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-amber-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-4">
<div class="bg-amber-50 p-6 rounded-2xl border-2 border-amber-200 space-y-3">
<p class="text-lg font-bold text-slate-700">🔍 <b>Kasus Toko Sepatu:</b></p>
<p class="text-slate-600 font-bold text-sm">
Sebuah toko ingin memesan stok sepatu baru ukuran remaja. Jika data penjualan bulan lalu menunjukkan angka ukuran sepatu yang paling banyak dicari adalah <b>ukuran 39</b>, manakah ukuran pemusatan yang harus dipakai pemilik toko untuk memesan stok terbanyak: Mean, Median, atau Modus?
</p>
</div>
<p class="text-xl font-black text-amber-700 text-center">Jawabannya adalah <b>Modus</b>! Karena pemilik toko wajib menyediakan ukuran sepatu yang paling sering dibeli pembeli.</p>
</div>
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-lg border-4 border-white" alt="Retail Sepatu" onerror="this.src='https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=500&q=80'">
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-orange-100 text-orange-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika data gaji karyawan di sebuah perusahaan kecil tiba-tiba dimasukkan gaji sang Direktur Utama yang nilainya 10 kali lipat lebih besar, ukuran pemusatan mana yang akan langsung rusak atau melonjak naik secara tidak wajar?"
</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">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Mari kita selidiki sensitivitas Mean vs Median terhadap data ekstrem (outlier)!</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">Pengambilan Keputusan Berbasis Analisis Data</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">Polhukam & Survei</h4>
<p class="text-slate-600 font-bold text-sm">Lembaga survei pemilu mengambil sampel data untuk memprediksi hasil akhir pemungutan suara secara akurat.</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">Manajemen Logistik</h4>
<p class="text-slate-600 font-bold text-sm">Perusahaan ekspedisi menganalisis simpangan dan jangkauan waktu pengiriman paket agar tepat waktu.</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">Kebijakan Sekolah</h4>
<p class="text-slate-600 font-bold text-sm">Kepala sekolah mengevaluasi penyebaran nilai ujian nasional untuk memutuskan program bimbingan belajar tambahan.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Pemecahan Masalah & Keputusan 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">Materi 1: Strategi Pengambilan Keputusan 🎯</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-4">
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-200">
<h4 class="font-black text-amber-900 mb-1">Kapan Pakai Mean?</h4>
<p class="text-xs font-bold text-slate-700">Cocok untuk data homogen yang tidak memiliki nilai ekstrem (outlier) yang terlalu jauh.</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-200">
<h4 class="font-black text-amber-900 mb-1">Kapan Pakai Median?</h4>
<p class="text-xs font-bold text-slate-700">Cocok jika data memiliki nilai ekstrem yang sangat tinggi atau rendah (misal: data gaji / pendapatan).</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-200">
<h4 class="font-black text-amber-900 mb-1">Kapan Pakai Modus?</h4>
<p class="text-xs font-bold text-slate-700">Cocok untuk menentukan preferensi massal, ukuran pakaian, atau tren barang terlaris.</p>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Contoh Kasus & Latihan Keputusan:</h4>
<p class="text-slate-700 font-bold text-sm">Suatu kompleks perumahan berisi 9 keluarga berpenghasilan 4 juta rupiah, dan 1 orang pengusaha kaya berpenghasilan 100 juta rupiah. Ukuran pemusatan mana yang paling adil mewakili kesejahteraan warga di sana?</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, Mean akan melonjak tinggi karena gaji pengusaha kaya (bias).')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">Mean (Rata-rata)</button>
<button onclick="alert('Hebat! Benar, Median sangat stabil dan tidak terpengaruh oleh nilai ekstrem pengusaha kaya.')" class="px-4 py-2 bg-amber-600 text-white font-bold rounded-xl">Median (Tengah) ✅</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti - Prediksi Dampak Perubahan Data -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Dampak Perubahan Skala Menyeluruh 📈</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Jika setiap nilai data pada suatu kelompok <b>dikalikan \(k\) lalu ditambah \(m\)</b>:</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-orange-50 p-5 rounded-2xl border-2 border-orange-200 space-y-3">
<h4 class="font-black text-orange-900 text-lg">1. Ukuran Pemusatan (Mean, Median, Modus)</h4>
<p class="text-slate-700 font-bold text-sm">Ikut <b>berubah</b> terkena kedua operasi tersebut (\(k\) dan \(m\)).</p>
<p class="math-box text-xs bg-white p-2 rounded border border-orange-200 text-orange-800">\(\text{Baru} = (\text{Lama} \times k) + m\)</p>
<p class="text-xs font-bold text-slate-600"><b>Contoh:</b> Jika rata-rata awal \(10\), lalu tiap data dikali \(2\) dan ditambah \(3\), maka rata-rata baru \(= (10 \times 2) + 3 = 23\).</p>
</div>
<div class="bg-amber-50 p-5 rounded-2xl border-2 border-amber-200 space-y-3">
<h4 class="font-black text-amber-900 text-lg">2. Ukuran Penyebaran (Jangkauan, Simpangan)</h4>
<p class="text-slate-700 font-bold text-sm">Hanya dipengaruhi oleh <b>perkalian (\(k\)) saja</b>, dan <b>tidak terpengaruh</b> oleh penjumlahan (\(m\)).</p>
<p class="math-box text-xs bg-white p-2 rounded border border-amber-200 text-amber-800">\(\text{Baru} = \text{Lama} \times |k|\)</p>
<p class="text-xs font-bold text-slate-600"><b>Contoh:</b> Jika jangkauan awal \(8\), lalu tiap data dikali \(-2\) dan ditambah \(5\), jangkauan baru \(= 8 \times |-2| = 16\) (penambahan \(+5\) diabaikan).</p>
</div>
</div>
<div class="bg-slate-50 p-3 rounded-2xl border-2 border-slate-200 text-center font-bold text-slate-700 text-xs">
💡 <i>Catatan: Ukuran penyebaran tidak berubah saat ditambah \(m\) karena jika seluruh titik data digeser bersamaan, jarak antar data (rentangnya) tidak berubah! Gunakan nilai mutlak (\(|k|\)) karena sebaran tidak pernah negatif.</i>
</div>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<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-orange-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab masing-masing 5 soal pemecahan masalah & keputusan data secara serentak.</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-center">
<p id="ifp-q-1" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-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-center">
<p id="ifp-q-2" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-yellow-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-yellow-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-yellow-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-yellow-50 p-4 rounded-2xl border-2 border-yellow-100 text-center">
<p id="ifp-q-3" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#92400e] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi Puncak</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal mandiri ini untuk menguji kemampuan analisis akhirmu.</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-700 bg-amber-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-amber-900 mb-2">Misi Puncak Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-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-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-amber-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-amber-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-amber-500 to-orange-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 9: Refleksi (Paling Akhir) -->
<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 menyelesaikan Misi Puncak Statistika hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan kesan atau bagian paling menantang dari Misi Puncak 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>
</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, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
if (window.MathJax) {
MathJax.typesetPromise();
}
}
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;
}
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Jika rata-rata \\(4\\) data adalah \\(10\\), lalu masuk \\(1\\) data bernilai \\(15\\), rata-rata baru adalah...", opts: ["\\(11\\)", "\\(12\\)", "\\(13\\)"], ans: 0 },
{ q: "Toko sepatu ingin stok ukuran terbanyak. Ukuran pemusatan yang dipakai adalah...", opts: ["Mean", "Median", "Modus"], ans: 2 },
{ q: "Jika seluruh nilai ulangan ditambah \\(10\\), maka jangkauan data akan...", opts: ["Bertambah 10", "Tetap", "Berkurang 10"], ans: 1 },
{ q: "Untuk data gaji karyawan yang jomplang akibat gaji direktur, ukuran pemusatan terbaik adalah...", opts: ["Median", "Mean", "Jumlah"], ans: 0 },
{ q: "Jika rata-rata data \\(20\\) dikali \\(2\\), maka nilai rata-rata baru menjadi...", opts: ["\\(20\\)", "\\(22\\)", "\\(40\\)"], ans: 2 },
{ q: "Jika jangkauan data awal adalah \\(15\\), lalu setiap nilai dikali \\(2\\), jangkauan baru adalah...", opts: ["\\(15\\)", "\\(30\\)", "\\(17\\)"], ans: 1 },
{ q: "Manakah ukuran yang paling peka terhadap nilai ekstrem (pencilan)?", opts: ["Mean", "Median", "Modus"], ans: 0 },
{ q: "Sebuah keputusan tepat dalam analisis data dibuat berdasarkan...", opts: ["Perkiraan saja", "Hasil analisis fakta data", "Kata orang"], ans: 1 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).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);
});
if (window.MathJax) MathJax.typesetPromise();
}
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 = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Pemilik toko pakaian ingin memesan ukuran baju yang paling banyak dibeli pembeli untuk stok utama. Ukuran pemusatan data yang paling tepat digunakan adalah...",
options: ["Mean", "Median", "Modus", "Jangkauan"],
a: 2,
exp: "Modus sangat tepat digunakan untuk mengetahui frekuensi terbanyak (item yang paling sering diminati/terlaris)."
},
{
q: "Jika rata-rata \\(5\\) orang siswa adalah \\(70\\), kemudian bergabung \\(1\\) siswa baru dengan nilai \\(82\\), berapakah rata-rata nilai gabungan mereka sekarang?",
options: ["\\(72\\)", "\\(74\\)", "\\(76\\)", "\\(78\\)"],
a: 0,
exp: "Total nilai lama \\(= 5 \\times 70 = 350\\). Total nilai baru \\(= 350 + 82 = 432\\). Banyak siswa \\(= 6\\). Rata-rata \\(= \\frac{432}{6} = 72\\)."
},
{
q: "Manakah ukuran pemusatan data yang paling sensitif (mudah berubah drastis) apabila terdapat satu data ekstrem yang sangat besar?",
options: ["Modus", "Median", "Mean (Rata-rata)", "Simpangan kuartil"],
a: 2,
exp: "Mean sangat dipengaruhi oleh nilai ekstrem karena melibatkan proses penjumlahan seluruh nilai data."
},
{
q: "Jika seluruh data dalam suatu penelitian dikalikan \\(4\\) dan kemudian dikurangi \\(5\\), apa dampak perubahan tersebut terhadap nilai jangkauan data?",
options: ["Jangkauan dikali 4 lalu dikurangi 5", "Jangkauan hanya dikali 4 saja (tanpa dipengaruhi pengurangan)", "Jangkauan bertambah 5", "Jangkauan bernilai tetap"],
a: 1,
exp: "Operasi penambahan/pengurangan tidak mengubah ukuran penyebaran. Jangkauan hanya ikut berubah jika dikali/dibagi (dikali \\(4\\))."
},
{
q: "Sebuah perusahaan ingin menaikkan seluruh gaji karyawan sebesar \\(10\\%\\) ditambah bonus tetap \\(200\\) ribu rupiah. Bagaimana dampak kebijakan ini terhadap median gaji karyawan?",
options: ["Median ikut dikali 10% lalu ditambah 200 ribu", "Median tidak berubah", "Median hanya ditambah bonus saja", "Median dikali 2"],
a: 0,
exp: "Ukuran pemusatan (termasuk median) patuh mengikuti seluruh operasi matematika yang diberikan pada data."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-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);
});
if (window.MathJax) MathJax.typesetPromise();
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
if (window.MathJax) MathJax.typesetPromise();
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Puncak Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Misi Puncak Statistika: " + refleksi,
strategi: "Evaluasi: Pemecahan Masalah & Keputusan Data"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
.png)
Kelas 8
Matematika
Statistika : Penyebaran Data & Perubahan Data
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Penyebaran Data & Perubahan Data 📊</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#bbf7d0 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #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; }
.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; }
.ifp-col { border-right: 3px dashed #cbd5e1; }
.ifp-col:last-child { border-right: none; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="trending-up" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Matematika Kelas 8 - Ukuran Penyebaran & Perubahan Data</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-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-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Penyebaran & Analisis <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Perubahan Data</span> 📈
</h1>
<img src="https://images.unsplash.com/photo-1543286386-713bdd548da4?auto=format&fit=crop&w=800&q=80" alt="Statistika Lanjutan" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-emerald-600">menentukan ukuran penyebaran data</span> (jangkauan, kuartil, dan simpangan kuartil).</li>
<li>Peserta didik dapat <span class="text-emerald-600">menginvestigasi adanya perubahan ukuran pemusatan data</span> akibat perubahan nilai data.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap mendalami sebaran dan dinamika data? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Rentang Nilai 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bandingkan dua kelas dengan rata-rata nilai yang sama!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<span class="text-4xl">🏫</span>
<h4 class="font-black text-xl text-emerald-800">Kelas A:</h4>
<p class="text-slate-600 font-bold">Nilai: 75, 76, 78, 80, 81</p>
<p class="text-xs font-bold text-emerald-700 bg-emerald-50 p-2 rounded-lg">Nilainya rapat/merata, tidak ada yang terlalu jomplang.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<span class="text-4xl">🏫</span>
<h4 class="font-black text-xl text-teal-800">Kelas B:</h4>
<p class="text-slate-600 font-bold">Nilai: 40, 60, 80, 90, 120 (remedial ekstrem)</p>
<p class="text-xs font-bold text-teal-700 bg-teal-50 p-2 rounded-lg">Nilainya sangat menyebar (rentang jauh antara nilai terendah dan tertinggi).</p>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika seluruh nilai ulangan di satu kelas tiba-tiba ditambah 5 poin oleh guru, apakah nilai rata-rata (mean) ikut naik? Bagaimana dengan simpangan atau jangkauannya?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Mari kita selidiki aturan perubahan ukuran pemusatan dan ukuran penyebaran data!</p>
</div>
</div>
<!-- Slide 4: Tinjauan Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pentingnya Analisis Sebaran & Perubahan Data di Dunia Nyata</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">📈</span>
<h4 class="font-black text-xl text-indigo-800">Pasar Saham & Keuangan</h4>
<p class="text-slate-600 font-bold text-sm">Investor melihat volatilitas (penyebaran/rentang fluktuasi harga saham) sebelum memutuskan risiko investasi.</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">Meteorologi Cuaca</h4>
<p class="text-slate-600 font-bold text-sm">Badan cuaca menganalisis rentang suhu ekstrem harian untuk mendeteksi perubahan iklim atau anomali cuaca.</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">Kontrol Kualitas Pabrik</h4>
<p class="text-slate-600 font-bold text-sm">Pabrik memastikan ukuran produk yang dihasilkan memiliki simpangan sekecil mungkin agar presisi.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti Bagian 1 - Ukuran Penyebaran (Jangkauan, Kuartil, Simpangan Kuartil) -->
<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 1: Ukuran Penyebaran Data 📏</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-3 gap-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-200">
<h4 class="font-black text-emerald-900 mb-1">1. Jangkauan (Range)</h4>
<p class="text-xs font-bold text-slate-600">Selisih nilai maksimum dan minimum.</p>
<p class="math-box text-sm mt-2 text-emerald-700">J = x<sub>maks</sub> - x<sub>min</sub></p>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-200">
<h4 class="font-black text-emerald-900 mb-1">2. Kuartil (Q₁, Q₂, Q₃)</h4>
<p class="text-xs font-bold text-slate-600">Nilai yang membagi data terurut menjadi 4 bagian sama.</p>
<p class="text-xs font-bold text-emerald-700 mt-2">Q₂ adalah Median.</p>
</div>
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-200">
<h4 class="font-black text-emerald-900 mb-1">3. Simpangan Kuartil</h4>
<p class="text-xs font-bold text-slate-600">Setengah dari selisih kuartil atas dan bawah.</p>
<p class="math-box text-sm mt-2 text-emerald-700">Q<sub>d</sub> = ½ (Q₃ - Q₁)</p>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Contoh & Latihan Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">Diketahui data terurut: <b>3, 5, 7, 9, 11, 13, 15</b>. Berapakah <b>Jangkauan</b> data tersebut?</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, itu median.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">9</button>
<button onclick="alert('Hebat! Benar, 15 - 3 = 12.')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl">12 ✅</button>
<button onclick="alert('Kurang tepat.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">15</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti Bagian 2 - Investigasi Perubahan Ukuran Pemusatan Data -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Investigasi Perubahan Data 🔄</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-lg font-bold text-slate-700">Apa yang terjadi pada ukuran pemusatan (Mean, Median, Modus) jika setiap nilai data mengalami perubahan tertentu?</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-lg">Aturan Operasi Penjumlahan & Pengurangan (+ / -)</h4>
<p class="text-slate-700 font-bold text-sm">Jika setiap nilai data <b>ditambah/dikurangi</b> dengan suatu bilangan $k$:</p>
<ul class="text-xs font-bold text-teal-800 list-disc list-inside space-y-1">
<li>Mean baru = Mean lama $\pm$ $k$</li>
<li>Median baru = Median lama $\pm$ $k$</li>
<li>Modus baru = Modus lama $\pm$ $k$</li>
</ul>
</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">Aturan Operasi Perkalian & Pembagian (× / ÷)</h4>
<p class="text-slate-700 font-bold text-sm">Jika setiap nilai data <b>dikalikan/dibagi</b> dengan suatu bilangan $p$:</p>
<ul class="text-xs font-bold text-emerald-800 list-disc list-inside space-y-1">
<li>Mean baru = Mean lama $\times$ $p$</li>
<li>Median baru = Median lama $\times$ $p$</li>
<li>Modus baru = Modus lama $\times$ $p$</li>
</ul>
</div>
</div>
<div class="bg-slate-50 p-4 rounded-2xl border-2 border-slate-200 text-center font-bold text-slate-700 text-sm">
💡 <i>Kesimpulan: Ukuran pemusatan data sangat patuh dan ikut berubah persis sesuai operasi aritmatika yang dikenakan pada datanya!</i>
</div>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, @5 Soal) -->
<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-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab masing-masing 5 soal sebaran & perubahan data secara serentak.</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-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 1</span>
<span id="ifp-score-1" 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-1" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-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-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-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-green-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-green-50 p-4 rounded-2xl border-2 border-green-100 text-center">
<p id="ifp-q-3" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-emerald-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</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_#047857] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Individu</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal mandiri ini untuk menguji pemahaman akhirmu.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-700 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-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-emerald-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 9: Refleksi (Paling Akhir) -->
<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 penyebaran dan perubahan data hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan kesan atau bagian paling menarik hari ini:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
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;
}
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Jangkauan dari data: 4, 7, 10, 13, 16 adalah...", opts: ["10", "12", "14"], ans: 1 },
{ q: "Jika rata-rata suatu data adalah 50, lalu setiap nilai ditambah 5, maka rata-rata baru menjadi...", opts: ["50", "55", "250"], ans: 1 },
{ q: "Jika median data adalah 20, lalu setiap nilai dikali 2, maka median baru menjadi...", opts: ["20", "22", "40"], ans: 2 },
{ q: "Simpangan kuartil dihitung menggunakan rumus...", opts: ["½(Q₃ - Q₁)", "Q₃ - Q₁", "Q₂ - Q₁"], ans: 0 },
{ q: "Jangkauan adalah selisih antara...", opts: ["Max dan Min", "Q₃ dan Q₁", "Mean dan Median"], ans: 0 },
{ q: "Jika nilai data dikurangi 3, maka jangkauan data akan...", opts: ["Berkurang 3", "Tetap", "Bertambah 3"], ans: 1 },
{ q: "Q₂ pada pembagian kelompok data setara dengan...", opts: ["Modus", "Median", "Rata-rata"], ans: 1 },
{ q: "Jika data 10, 15, 20, 25, 30, nilai Q₁ adalah...", opts: ["15", "17.5", "20"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).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 = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Diketahui data terurut: 10, 12, 14, 16, 18, 20, 22. Berapakah nilai <b>Jangkauan (Range)</b> data tersebut?",
options: ["10", "12", "14", "16"],
a: 1,
exp: "Jangkauan = Nilai Maksimum - Nilai Minimum = 22 - 10 = <b>12</b>."
},
{
q: "Suatu data memiliki rata-rata (mean) 60. Jika setiap nilai data dikalikan 3, berapakah nilai rata-rata yang baru?",
options: ["60", "120", "180", "200"],
a: 2,
exp: "Jika setiap nilai data dikalikan 3, maka rata-rata baru juga ikut dikalikan 3: 60 × 3 = <b>180</b>."
},
{
q: "Rumus untuk menentukan <b>Simpangan Kuartil (Q<sub>d</sub>)</b> adalah...",
options: ["Q₃ - Q₁", "½ (Q₃ - Q₁)", "Q₂ - Q₁", "Q₃ + Q₁"],
a: 1,
exp: "Simpangan kuartil didefinisikan sebagai setengah dari selisih kuartil atas dan kuartil bawah: Q<sub>d</sub> = ½ (Q₃ - Q₁)."
},
{
q: "Jika median suatu data adalah 45, kemudian setiap nilai data dikurangi 10, berapakah median yang baru?",
options: ["35", "45", "55", "450"],
a: 0,
exp: "Operasi pengurangan pada data membuat ukuran pemusatan (median) ikut berkurang sebesar bilangan yang sama: 45 - 10 = <b>35</b>."
},
{
q: "Manakah pernyataan yang paling tepat mengenai pengaruh penambahan nilai konstan pada ukuran penyebaran (seperti jangkauan)?",
options: ["Jangkauan ikut bertambah besar", "Jangkauan ikut berkurang", "Jangkauan nilainya tetap (tidak berubah)", "Jangkauan menjadi nol"],
a: 2,
exp: "Jika semua data ditambah/dikurangi bilangan konstan, jarak antar data tidak berubah, sehingga nilai ukuran penyebaran seperti jangkauan akan <b>tetap</b>."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Penyebaran Data: " + refleksi,
strategi: "Evaluasi: Ukuran Penyebaran & Perubahan Data"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Statistika : Misi Statistika Part1
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Misi Statistika & Pemusatan Data 📊</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f0f9ff;
background-image: radial-gradient(#bae6fd 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #0284c7 !important; color: white !important; border-bottom-color: #0369a1 !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; }
.ifp-col { border-right: 3px dashed #cbd5e1; }
.ifp-col:last-child { border-right: none; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-sky-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-sky-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="bar-chart-3" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-sky-800 uppercase tracking-widest">Matematika Kelas 8 - Eksplorasi Statistika</span>
<span id="progress-text" class="text-xs font-black text-white bg-sky-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-blue-400 via-sky-500 to-indigo-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-sky-100 text-sky-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Eksplorasi Dunia <span class="text-transparent bg-clip-text bg-gradient-to-r from-sky-600 to-blue-600">Statistika</span> 📊
</h1>
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80" alt="Statistika" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-sky-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-sky-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-sky-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-sky-600">menjelaskan data kualitatif dan data kuantitatif</span>.</li>
<li>Peserta didik dapat <span class="text-sky-600">menentukan ukuran pemusatan data</span> (modus, median, dan rata-rata).</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membaca dan menganalisis data? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-sky-900 bg-sky-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Data Sekitar 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati dua jenis informasi di bawah ini!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-sm space-y-3">
<span class="text-4xl">📝</span>
<h4 class="font-black text-xl text-blue-800">Informasi A:</h4>
<p class="text-slate-600 font-bold">Warna favorit siswa: Merah, Biru, Biru, Hijau, Merah.</p>
<p class="text-xs font-bold text-blue-600 bg-blue-50 p-2 rounded-lg">Bentuknya berupa kategori/keterangan kata.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<span class="text-4xl">🔢</span>
<h4 class="font-black text-xl text-emerald-800">Informasi B:</h4>
<p class="text-slate-600 font-bold">Nilai ulangan matematika: 75, 80, 90, 85, 70.</p>
<p class="text-xs font-bold text-emerald-600 bg-emerald-50 p-2 rounded-lg">Bentuknya berupa angka atau bilangan.</p>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Bagaimana cara OSIS menentukan ekstrakurikuler mana yang paling diminati seluruh siswa, atau bagaimana guru menentukan nilai rata-rata kelas?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Semua itu diselesaikan menggunakan ilmu Statistika, baik pengelompokan jenis data maupun ukuran pemusatannya!</p>
</div>
</div>
<!-- Slide 4: Tinjauan Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Penerapan Statistika di Dunia Nyata</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🏥</span>
<h4 class="font-black text-xl text-indigo-800">Dunia Kesehatan</h4>
<p class="text-slate-600 font-bold text-sm">Dokter dan peneliti menganalisis rata-rata tekanan darah pasien atau penyebaran data tinggi badan anak balita.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">⚽</span>
<h4 class="font-black text-xl text-indigo-800">Analisis Olahraga</h4>
<p class="text-slate-600 font-bold text-sm">Statistik mencatat rata-rata gol pemain, penguasaan bola, dan performa tim sepak bola kesayanganmu.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">📈</span>
<h4 class="font-black text-xl text-indigo-800">Bisnis & Ekonomi</h4>
<p class="text-slate-600 font-bold text-sm">Perusahaan menghitung rata-rata penjualan produk bulanan untuk menentukan strategi pasar ke depan.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Bagian 1 (Data Kualitatif vs Kuantitatif) + Contoh & Latihan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-sky-900 bg-sky-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Jenis Data (Kualitatif & Kuantitatif) 📋</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-sky-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-sky-50 p-5 rounded-2xl border-2 border-sky-200 space-y-2">
<h4 class="font-black text-sky-900 text-lg">1. Data Kualitatif</h4>
<p class="text-slate-700 font-bold text-sm">Data yang menunjukkan sifat, kategori, atau keadaan objek (bukan angka hitung).</p>
<p class="text-xs font-bold text-sky-700"><b>Contoh:</b> Golongan darah, jenis kendaraan, merek HP.</p>
</div>
<div class="bg-blue-50 p-5 rounded-2xl border-2 border-blue-200 space-y-2">
<h4 class="font-black text-blue-900 text-lg">2. Data Kuantitatif</h4>
<p class="text-slate-700 font-bold text-sm">Data yang disajikan dalam bentuk angka atau bilangan hasil pengukuran/hitungan.</p>
<p class="text-xs font-bold text-blue-700"><b>Contoh:</b> Suhu tubuh, jumlah siswa di kelas, berat badan.</p>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-3">
<h4 class="font-black text-slate-800">Latihan Mini Konsep:</h4>
<p class="text-slate-700 font-bold text-sm">Apakah data "Nomor Sepatu Siswa Kelas 8" termasuk kualitatif atau kuantitatif?</p>
<div class="flex gap-4">
<button onclick="alert('Kurang tepat, nomor sepatu berupa angka ukuran.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">Kualitatif</button>
<button onclick="alert('Hebat! Benar, karena nomor sepatu dinyatakan dalam angka.')" class="px-4 py-2 bg-sky-600 text-white font-bold rounded-xl hover:bg-sky-700">Kuantitatif ✅</button>
</div>
</div>
</div>
</div>
<!-- Slide 6: Materi Inti - Bagian 2 (Modus, Median, Mean) + Contoh & Latihan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Materi 2: Ukuran Pemusatan Data 📐</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md mt-2 space-y-5">
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-200">
<h4 class="font-black text-indigo-900 mb-1">Mean (Rata-rata)</h4>
<p class="text-xs font-bold text-slate-600">Jumlah seluruh data dibagi banyak data.</p>
<p class="math-box text-sm mt-2 text-indigo-700">Mean = Total Data / n</p>
</div>
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-200">
<h4 class="font-black text-indigo-900 mb-1">Median (Tengah)</h4>
<p class="text-xs font-bold text-slate-600">Nilai tengah setelah data diurutkan dari terkecil.</p>
</div>
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-200">
<h4 class="font-black text-indigo-900 mb-1">Modus (Sering)</h4>
<p class="text-xs font-bold text-slate-600">Nilai yang frekuensinya paling banyak muncul.</p>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Contoh & Latihan Hitung Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">Diberikan data nilai: <b>6, 8, 6, 9, 7</b>. Berapakah <b>Modus</b> dari data tersebut?</p>
<div class="flex gap-3">
<button onclick="alert('Benar! Angka 6 muncul sebanyak 2 kali, paling sering dibanding yang lain.')" class="px-4 py-2 bg-indigo-600 text-white font-bold rounded-xl">6 ✅</button>
<button onclick="alert('Kurang tepat, 7 hanya muncul sekali.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">7</button>
<button onclick="alert('Kurang tepat, 8 hanya muncul sekali.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl">8</button>
</div>
</div>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN MULTI-USER IFP QUIZ (3 Kelompok, Masing-masing 5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-sky-600 to-indigo-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab masing-masing 5 soal secara serentak. Siapa cepat habiskan 5 soal dia MENANG!</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-blue-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-blue-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🏎️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-blue-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-blue-50 p-4 rounded-2xl border-2 border-blue-100 text-center">
<p id="ifp-q-1" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-sky-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-sky-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚓 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-sky-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-sky-50 p-4 rounded-2xl border-2 border-sky-100 text-center">
<p id="ifp-q-2" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-indigo-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-indigo-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-indigo-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-indigo-50 p-4 rounded-2xl border-2 border-indigo-100 text-center">
<p id="ifp-q-3" class="text-lg font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-sky-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#1e3a8a] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Individu</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Kerjakan 5 soal mandiri ini untuk menguji pemahaman akhirmu.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-sky-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-sky-700 bg-sky-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-sky-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-sky-500 to-blue-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-sky-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-sky-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-sky-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-sky-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-sky-500 to-blue-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 10: Refleksi (Paling Akhir) -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari materi Statistika hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan kesan atau bagian paling seru hari ini:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-sky-50 border-2 border-sky-200 focus:border-sky-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-sky-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-sky-600 shadow-[0_4px_0px_#0369a1]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Data golongan darah termasuk jenis data...", opts: ["Kualitatif", "Kuantitatif"], ans: 0 },
{ q: "Data tinggi badan siswa termasuk jenis data...", opts: ["Kualitatif", "Kuantitatif"], ans: 1 },
{ q: "Mean dari data: 4, 6, 8 adalah...", opts: ["5", "6", "7"], ans: 1 },
{ q: "Modus dari data: 2, 3, 3, 4, 5 adalah...", opts: ["2", "3", "4"], ans: 1 },
{ q: "Median dari data terurut: 5, 7, 9 adalah...", opts: ["5", "7", "9"], ans: 1 },
{ q: "Jika nilai ulangan 6, 8, 10, jumlah data adalah...", opts: ["22", "24", "26"], ans: 1 },
{ q: "Data jumlah anak dalam keluarga termasuk...", opts: ["Kualitatif", "Kuantitatif"], ans: 1 },
{ q: "Modus menunjukkan nilai yang...", opts: ["Paling sering muncul", "Nilai tengah", "Rata-rata"], ans: 0 },
{ q: "Median adalah nilai...", opts: ["Paling sering", "Tengah setelah diurutkan", "Jumlah total"], ans: 1 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).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 = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Manakah di bawah ini yang merupakan contoh dari <b>Data Kualitatif</b>?",
options: ["Tinggi badan siswa", "Berat badan balita", "Jenis hobi favorit", "Suhu udara harian"],
a: 2,
exp: "Data kualitatif dinyatakan dalam bentuk kategori/kata, seperti jenis hobi. Pilihan lainnya berupa angka (kuantitatif)."
},
{
q: "Diketahui data nilai ulangan matematika: 70, 80, 75, 90, 80, 85, 80. Berapakah <b>Modus</b> dari data tersebut?",
options: ["75", "80", "85", "90"],
a: 1,
exp: "Angka 80 muncul sebanyak 3 kali (paling sering dibanding yang lain), sehingga modusnya adalah <b>80</b>."
},
{
q: "Nilai ulangan IPA 5 siswa adalah 70, 80, 90, 60, 80. Berapakah <b>Mean (Rata-rata)</b> nilai mereka?",
options: ["76", "78", "80", "82"],
a: 0,
exp: "Jumlah total = 70+80+90+60+80 = 380. Banyak siswa = 5. Rata-rata = 380 / 5 = <b>76</b>."
},
{
q: "Jika data berat badan (dalam kg) diurutkan sebagai berikut: 40, 42, 45, 48, 50, 55. Berapakah nilai <b>Median</b> data tersebut?",
options: ["45", "46,5", "48", "50"],
a: 1,
exp: "Karena jumlah data genap (6 data), median terletak di antara data ke-3 dan ke-4: (45 + 48) / 2 = 93 / 2 = <b>46,5</b>."
},
{
q: "Manakah di bawah ini yang dikategorikan sebagai <b>Data Kuantitatif</b>?",
options: ["Warna kendaraan bermotor", "Jenis kelamin", "Jumlah saudara kandung di rumah", "Status pernikahan"],
a: 2,
exp: "Jumlah saudara kandung dinyatakan dalam angka cacah, sehingga tergolong data kuantitatif."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-sky-50 hover:border-sky-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Statistika: " + refleksi,
strategi: "Evaluasi Individu: Statistika Dasar"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Matematika
Teorema Pythagoras : Jenis Segitiga & Pythagoras
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 8: Jenis Segitiga & Pythagoras 📐</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #faf5ff;
background-image: radial-gradient(#e9d5ff 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #7c3aed !important; color: white !important; border-bottom-color: #5b21b6 !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-purple-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-purple-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="compass" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Matematika Kelas 8 - Jenis Sudut & Segitiga</span>
<span id="progress-text" class="text-xs font-black text-white bg-purple-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-indigo-400 via-purple-500 to-pink-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-purple-100 text-purple-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Menyelidiki <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600">Jenis Segitiga</span> 📐
</h1>
<img src="https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=800&q=80" alt="Geometri" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1596495577886-d920f1fb7238?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-purple-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-purple-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-purple-600">membedakan jenis sudut pada segitiga</span> (lancip, siku-siku, tumpul) menggunakan teorema Pythagoras atau kebalikannya.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menguji jenis segitiga dari panjang sisinya? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi (Diperbaiki Notasi Pangkatnya) -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Sisi & Sudut 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati hubungan kuadrat sisi pada segitiga siku-siku berikut!</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-4">
<div class="bg-purple-50 p-6 rounded-2xl border-2 border-purple-200 space-y-3">
<p class="text-lg font-bold text-slate-700">🔍 <b>Fakta Hubungan Kuadrat Sisi:</b></p>
<ul class="space-y-2 text-slate-600 font-bold list-disc list-inside text-sm">
<li>Jika sisi alas $a = 3$, kuadratnya adalah 3<sup>2</sup> = 9.</li>
<li>Jika sisi tegak $b = 4$, kuadratnya adalah 4<sup>2</sup> = 16.</li>
<li>Jika sisi miring $c = 5$, kuadratnya adalah 5<sup>2</sup> = 25.</li>
</ul>
</div>
<p class="text-xl font-black text-purple-700 text-center">Ternyata: 3<sup>2</sup> + 4<sup>2</sup> = 5<sup>2</sup> (9 + 16 = 25)! Inilah dasar segitiga siku-siku.</p>
</div>
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=500&q=80" class="w-72 h-72 object-cover rounded-3xl shadow-lg border-4 border-white" alt="Geometri Visual" onerror="this.src='https://images.unsplash.com/photo-1509228468518-180dd4864904?auto=format&fit=crop&w=500&q=80'">
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik (Diperbaiki Notasi Pangkatnya) -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Bagaimana jika sebuah segitiga memiliki sisi 3 cm, 4 cm, dan 6 cm? Apakah 3<sup>2</sup> + 4<sup>2</sup> tetap sama dengan 6<sup>2</sup>? Apa yang terjadi pada bentuk sudutnya?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Mari kita selidiki perbandingan c<sup>2</sup> dengan a<sup>2</sup> + b<sup>2</sup> untuk menjawabnya!</p>
</div>
</div>
<!-- Slide 4: Tinjauan Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pentingnya Menentukan Jenis Sudut Konstruksi di Dunia Nyata</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">⛺</span>
<h4 class="font-black text-xl text-indigo-800">Konstruksi Tenda & Atap</h4>
<p class="text-slate-600 font-bold text-sm">Pembuatan rangka atap rumah atau tenda kemah membutuhkan presisi sudut lancip/tumpul agar struktur kokoh menahan angin.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🌉</span>
<h4 class="font-black text-xl text-indigo-800">Rangka Jembatan Baja</h4>
<p class="text-slate-600 font-bold text-sm">Insinyur sipil menguji segitiga kerangka jembatan agar beban tekanan terdistribusi merata sesuai jenis sudutnya.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🎨</span>
<h4 class="font-black text-xl text-indigo-800">Desain Grafis & Game 3D</h4>
<p class="text-slate-600 font-bold text-sm">Pemrograman objek 3D menggunakan algoritma matematika berbasis jenis segitiga untuk merender bentuk poligon benda.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Aturan Jenis Segitiga -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Materi Inti: Aturan Jenis Segitiga 📐</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Misalkan c adalah sisi terpanjang (panjang sisi terbesar), dan a, b adalah dua sisi lainnya. Uji aturannya sebagai berikut:</p>
<div class="grid md:grid-cols-3 gap-5">
<div class="bg-blue-50 p-5 rounded-2xl border-2 border-blue-200 text-center space-y-2">
<span class="text-3xl">📐</span>
<h4 class="font-black text-blue-900 text-lg">Segitiga Siku-siku</h4>
<p class="math-box text-xl text-blue-700 font-bold">c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup></p>
<p class="text-xs font-bold text-slate-600">Sudut tepat 90° di hadapan sisi c.</p>
</div>
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 text-center space-y-2">
<span class="text-3xl">📉</span>
<h4 class="font-black text-emerald-900 text-lg">Segitiga Lancip</h4>
<p class="math-box text-xl text-emerald-700 font-bold">c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup></p>
<p class="text-xs font-bold text-slate-600">Semua sudut kurang dari 90°.</p>
</div>
<div class="bg-rose-50 p-5 rounded-2xl border-2 border-rose-200 text-center space-y-2">
<span class="text-xl">📈</span>
<h4 class="font-black text-rose-900 text-lg">Segitiga Tumpul</h4>
<p class="math-box text-xl text-rose-700 font-bold">c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup></p>
<p class="text-xs font-bold text-slate-600">Ada satu sudut lebih dari 90°.</p>
</div>
</div>
</div>
</div>
<!-- Slide 6: Auto-Quiz (Latihan Mandiri dengan Pembahasan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-purple-600">Tentukan Jenisnya!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-purple-100 border-2 border-purple-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-purple-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Tentukan jenis segitiga dari ukuran sisi berikut:</p>
<div id="q1-text" class="text-2xl math-box text-purple-900 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 leading-relaxed">?</div>
<div id="q1-options" class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-xl mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-purple-600 text-white rounded-2xl font-black text-xl hover:bg-purple-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN INTERACTIVE FLAT PANEL QUIZ (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 tracking-wide uppercase">⚡ BATTLE PANEL INTERAKTIF (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Tentukan jenis segitiga secara serentak.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KOLOM KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-purple-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-purple-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🏎️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-purple-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-purple-50 p-4 rounded-2xl border-2 border-purple-100 text-center">
<p class="text-xs font-bold text-purple-500 uppercase mb-1">Soal Mandiri K1</p>
<p id="ifp-q-1" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-purple-600 text-white font-black rounded-xl shadow hover:bg-purple-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-blue-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-blue-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚓 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-blue-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-blue-50 p-4 rounded-2xl border-2 border-blue-100 text-center">
<p class="text-xs font-bold text-blue-500 uppercase mb-1">Soal Mandiri K2</p>
<p id="ifp-q-2" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-blue-600 text-white font-black rounded-xl shadow hover:bg-blue-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-pink-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-pink-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-pink-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-pink-50 p-4 rounded-2xl border-2 border-pink-100 text-center">
<p class="text-xs font-bold text-pink-500 uppercase mb-1">Soal Mandiri K3</p>
<p id="ifp-q-3" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-pink-600 text-white font-black rounded-xl shadow hover:bg-pink-700 transition">Soal Berikutnya ➡️</button>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-purple-500 mb-6 drop-shadow-lg">JUARA BATTLE KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#4c1d95] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang jenis sudut pada segitiga hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian mana yang paling membantumu membedakan jenis segitiga?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-purple-50 border-2 border-purple-200 focus:border-purple-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 9: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Jenis Segitiga</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan kehebatanmu dengan 5 soal evaluasi ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-purple-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-purple-700 bg-purple-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-purple-900 mb-2">Misi Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-purple-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-purple-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-purple-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-purple-700 shadow-[0_4px_0px_#581c87]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Auto-Quiz 1: Menentukan Jenis Segitiga
let countQ1 = 0;
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let types = [
{ sides: [6, 8, 10], ans: "Siku-siku", exp: "6<sup>2</sup> + 8<sup>2</sup> = 36 + 64 = 100, dan 10<sup>2</sup> = 100. Karena sama (c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>), maka segitiga ini <b>Siku-siku</b>." },
{ sides: [5, 7, 10], ans: "Tumpul", exp: "5<sup>2</sup> + 7<sup>2</sup> = 25 + 49 = 74, sedangkan 10<sup>2</sup> = 100. Karena c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup> (100 > 74), maka segitiga ini <b>Tumpul</b>." },
{ sides: [6, 7, 8], ans: "Lancip", exp: "6<sup>2</sup> + 7<sup>2</sup> = 36 + 49 = 85, sedangkan 8<sup>2</sup> = 64. Karena c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup> (64 < 85), maka segitiga ini <b>Lancip</b>." }
];
let selected = types[Math.floor(Math.random() * types.length)];
let correctAns = selected.ans;
let options = ["Siku-siku", "Lancip", "Tumpul"];
let explanation = selected.exp;
currentQ1Data = { correctAns, explanation };
document.getElementById('q1-text').innerHTML = `Panjang sisi: <b>${selected.sides[0]} cm, ${selected.sides[1]} cm, ${selected.sides[2]} cm</b>. Termasuk jenis segitiga apakah ini?`;
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt}' === '${correctAns}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition text-center">${opt}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.explanation}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes(currentQ1Data.correctAns)) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.explanation}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// IFP Split-Screen Game
let ifpScores = { 1: 0, 2: 0, 3: 0 };
const IFP_WIN_SCORE = 5;
const ifpBank = [
{ q: "Sisi 6, 8, 10 jenis segitiganya adalah...", opts: ["Siku-siku", "Lancip", "Tumpul"], ans: 0 },
{ q: "Sisi 5, 7, 10 jenis segitiganya adalah...", opts: ["Siku-siku", "Lancip", "Tumpul"], ans: 2 },
{ q: "Sisi 6, 7, 8 jenis segitiganya adalah...", opts: ["Siku-siku", "Lancip", "Tumpul"], ans: 1 },
{ q: "Jika c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup>, maka segitiga bernilai...", opts: ["Lancip", "Siku-siku", "Tumpul"], ans: 0 },
{ q: "Jika c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup>, maka segitiga bernilai...", opts: ["Tumpul", "Siku-siku", "Lancip"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
document.getElementById(`ifp-next-btn-${group}`).classList.add('hidden');
let randQ = ifpBank[Math.floor(Math.random() * ifpBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! +1 Poin";
ifpScores[group]++;
document.getElementById(`ifp-score-${group}`).innerText = `Skor: ${ifpScores[group]}`;
if(ifpScores[group] >= IFP_WIN_SCORE) {
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 400);
} else {
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
} else {
btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat!";
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
}
function resetIFPGame() {
ifpScores = { 1: 0, 2: 0, 3: 0 };
for(let i=1; i<=3; i++) {
document.getElementById(`ifp-score-${i}`).innerText = `Skor: 0`;
initIFPQuestion(i);
}
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Akhir Jenis Segitiga
const evaluasiBank = [
{
q: "Suatu segitiga memiliki panjang sisi 7 cm, 24 cm, dan 25 cm. Jenis segitiga tersebut adalah...",
options: ["Lancip", "Siku-siku", "Tumpul", "Sembarang"],
a: 1,
exp: "7<sup>2</sup> + 24<sup>2</sup> = 49 + 576 = 625, dan 25<sup>2</sup> = 625. Karena c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>, maka segitiga ini <b>Siku-siku</b>."
},
{
q: "Diketahui segitiga dengan panjang sisi 8 cm, 10 cm, dan 13 cm. Jenis segitiga tersebut adalah...",
options: ["Siku-siku", "Lancip", "Tumpul", "Sama kaki"],
a: 2,
exp: "8<sup>2</sup> + 10<sup>2</sup> = 64 + 100 = 164, sedangkan 13<sup>2</sup> = 169. Karena c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup> (169 > 164), maka segitiga ini <b>Tumpul</b>."
},
{
q: "Jika sisi-sisi segitiga adalah 5 cm, 7 cm, dan 9 cm, maka segitiga tersebut merupakan...",
options: ["Segitiga Siku-siku", "Segitiga Tumpul", "Segitiga Lancip", "Segitiga Sembarang"],
a: 2,
exp: "5<sup>2</sup> + 7<sup>2</sup> = 25 + 49 = 74, sedangkan 9<sup>2</sup> = 81. Karena c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup> (81 > 74), maka segitiga ini <b>Tumpul</b>."
},
{
q: "Manakah syarat yang menunjukkan bahwa sebuah segitiga adalah <b>Segitiga Lancip</b> dengan c adalah sisi terpanjang?",
options: ["c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>", "c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup>", "c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup>", "c = a + b"],
a: 2,
exp: "Syarat mutlak segitiga lancip adalah kuadrat sisi terpanjang lebih kecil dari jumlah kuadrat dua sisi lainnya (c<sup>2</sup> < a<sup>2</sup> + b<sup>2</sup>)."
},
{
q: "Suatu segitiga memiliki panjang sisi 10 cm, 15 cm, dan 20 cm. Segitiga tersebut adalah...",
options: ["Lancip", "Siku-siku", "Tumpul", "Beraturan"],
a: 2,
exp: "10<sup>2</sup> + 15<sup>2</sup> = 100 + 225 = 325, sedangkan 20<sup>2</sup> = 400. Karena 400 > 325 (c<sup>2</sup> > a<sup>2</sup> + b<sup>2</sup>), maka jenisnya <b>Tumpul</b>."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-purple-50 hover:border-purple-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Jenis Segitiga: " + refleksi,
strategi: "Evaluasi: Jenis Sudut pada Segitiga"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
📊 Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| nofi yanti | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 60 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| wa putri | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| fadil tomia | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| putri nuraini | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 80 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| Adnan Dito Selly | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| ilham ulukapy | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| Sri Yulianti Pirasou | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| julia ramadany pirasou | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| fikram bahtiar maasily | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| ASIRNATA SOUMENA | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 80 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| mega desfiona | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| wa putri | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 40 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| fahdil tamrin | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| RAHIMA SOUMENA | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| ismail assel | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| syarlan soumena | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| M.Adlan Salaputa | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 80 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| alfian marinda | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 40 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| jelita apriliani soulisa | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| Rifka Tunnisa Tunny | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| hawa nur fadila kiat | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 60 | 75% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| mega desfiona | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 60 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| madania mana anu | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 20 | 75% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| tiara wally | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 20 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| syafril umar dani wael | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| jidan wabula | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| ILHAM FAJAR SELY | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 80 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| asti komala tunny | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| DINIARTY KHAILA ANG | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| PANDI AZIZ SOUMENA | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 40 | 50% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| jahira soumena | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 60 | 75% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| rindiani ai | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 40 | 50% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| Fitra Soumena | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| JENITA | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 40 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| indri selly | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 60 | 50% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| ABDUL ISHAQ MARASABESSY | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 40 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| rahmat salong | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 60 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| fadlan soulisa | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 60 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| PUTRI SETIAWATI MAHULAUW | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 60 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| FAJRUL AUFAR MAASILY | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 80 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| KANIA KOMAIRA PANCAR | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| MEISYA FIRDA ASSEL | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| muhammad barru soulisa | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 80 | 75% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| syafril umar dani wael | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| jidan wabula | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 80 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| asti komala tunny | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 80 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| alfiansyah mahulauw | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 100 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| jidan wabula | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 80 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| refan mahulauw | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 40 | 75% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |
| syafril umar dani waek | Bilangan Berpangkat 2 : Bentuk Baku dan Akar Matematika — Kelas 8 | 60 | 100% | Refleksi: Sudah cukup mengerti. | Evaluasi Part 2: Operasi, Bentuk Baku & Akar |