import React, { useState, useEffect } from 'react';
import {
BookOpen,
Layers,
Award,
Play,
ChevronRight,
CheckCircle,
AlertCircle,
RotateCcw,
Menu,
X,
Check,
HelpCircle,
TrendingUp,
BookMarked,
User,
Lock,
Users,
UserPlus,
LogOut,
Shield,
Search,
Eye,
EyeOff
} from 'lucide-react';
// Firebase Imports
import { initializeApp } from 'firebase/app';
import {
getAuth,
signInWithCustomToken,
signInAnonymously,
onAuthStateChanged
} from 'firebase/auth';
import {
getFirestore,
collection,
doc,
setDoc,
updateDoc,
onSnapshot
} from 'firebase/firestore';
// ==========================================
// SAFE-GUARD FIREBASE SCRIPT FOR EXTERNAL COPIES
// ==========================================
let app = null;
let auth = null;
let db = null;
let appId = 'math-lab-kelas8-v2';
// Deteksi apakah konfigurasi Firebase dari platform tersedia
const hasFirebaseConfig = typeof __firebase_config !== 'undefined' && __firebase_config;
if (hasFirebaseConfig) {
try {
const firebaseConfig = JSON.parse(__firebase_config);
app = initializeApp(firebaseConfig);
auth = getAuth(app);
db = getFirestore(app);
appId = typeof __app_id !== 'undefined' ? __app_id : 'math-lab-kelas8-v2';
} catch (err) {
console.error("Gagal menginisialisasi Firebase Cloud:", err);
}
}
// ==========================================
// DATA MATERI (10 PERTEMUAN)
// ==========================================
const PERTEMUAN_DATA = [
{
id: 1,
subBab: "A",
title: "Pertemuan 1: Pengenalan Konsep Himpunan",
deskripsi: "Memahami apa itu himpunan, cara membedakan himpunan dan bukan himpunan, serta lambang keanggotaan.",
konten: (
<div className="space-y-4 text-slate-700 leading-relaxed">
<p>
Selamat datang di Bab 4! Sebelum masuk ke Relasi dan Fungsi, kita harus memahami dasar dari segalanya, yaitu <strong>Himpunan</strong>.
</p>
<div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
<h4 className="font-bold text-indigo-900 mb-1">Definisi Himpunan</h4>
<p className="text-indigo-950 text-sm">
Himpunan adalah kumpulan objek atau benda yang memiliki <strong>definisi yang jelas</strong> sehingga dapat ditentukan dengan pasti apakah suatu objek termasuk dalam kumpulan tersebut atau tidak.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="border border-emerald-200 bg-emerald-50/50 p-3 rounded-lg">
<span className="font-bold text-emerald-800 text-sm">Contoh HIMPUNAN (Definisi Jelas)</span>
<ul className="list-disc list-inside text-xs text-slate-700 mt-2 space-y-1">
<li>Kumpulan siswa kelas 8 yang memakai kacamata.</li>
<li>Kumpulan bilangan genap antara 1 sampai 10.</li>
<li>Kumpulan hewan berkaki empat.</li>
</ul>
</div>
<div className="border border-rose-200 bg-rose-50/50 p-3 rounded-lg">
<span className="font-bold text-rose-800 text-sm">Contoh BUKAN HIMPUNAN (Relatif/Subjektif)</span>
<ul className="list-disc list-inside text-xs text-slate-700 mt-2 space-y-1">
<li>Kumpulan lukisan yang indah (indah itu relatif).</li>
<li>Kumpulan siswa yang pintar (pintar tidak ada batas ukurnya).</li>
<li>Kumpulan makanan yang lezat.</li>
</ul>
</div>
</div>
<div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
<h4 className="font-bold text-slate-800 mb-1">Lambang Keanggotaan</h4>
<p className="text-xs text-slate-600 mb-2">
Anggota himpunan dilambangkan dengan elemen (<span className="font-bold text-indigo-600 text-base">∈</span>). Sedangkan yang bukan anggota dilambangkan dengan (<span className="font-bold text-rose-600 text-base">∉</span>).
</p>
<div className="bg-white p-3 rounded border text-sm font-mono text-slate-800">
Misal, Himpunan A = Himpunan bilangan ganjil kurang dari 10.<br />
A = {'{'}1, 3, 5, 7, 9{'}'}<br />
Maka: 3 ∈ A (3 adalah anggota A), tetapi 4 ∉ A (4 bukan anggota A).
</div>
</div>
</div>
)
},
{
id: 2,
subBab: "A",
title: "Pertemuan 2: Menyatakan Himpunan & Himpunan Bagian",
deskripsi: "Mempelajari 3 cara menyatakan himpunan dan memahami konsep himpunan bagian.",
konten: (
<div className="space-y-4">
<p className="text-slate-700">
Ada tiga cara utama untuk menyajikan atau menuliskan suatu himpunan secara formal dalam matematika:
</p>
<div className="space-y-3">
<div className="flex items-start gap-3 bg-white p-3 rounded-xl border shadow-sm">
<span className="bg-indigo-100 text-indigo-800 font-bold px-2.5 py-1 rounded-lg text-sm">1</span>
<div>
<h5 className="font-bold text-slate-900 text-sm">Metode Deskripsi (Kata-kata)</h5>
<p className="text-xs text-slate-600 mt-0.5">Menyebutkan syarat atau sifat keanggotaannya.</p>
<p className="text-xs font-mono text-indigo-600 mt-1">Contoh: P = Himpunan bilangan prima kurang dari 10</p>
</div>
</div>
<div className="flex items-start gap-3 bg-white p-3 rounded-xl border shadow-sm">
<span className="bg-indigo-100 text-indigo-800 font-bold px-2.5 py-1 rounded-lg text-sm">2</span>
<div>
<h5 className="font-bold text-slate-900 text-sm">Metode Tabulasi (Pendaftaran Anggota)</h5>
<p className="text-xs text-slate-600 mt-0.5">Menuliskan semua anggota di dalam kurung kurawal {'{ }'}.</p>
<p className="text-xs font-mono text-indigo-600 mt-1">Contoh: P = {'{'}2, 3, 5, 7{'}'}</p>
</div>
</div>
<div className="flex items-start gap-3 bg-white p-3 rounded-xl border shadow-sm">
<span className="bg-indigo-100 text-indigo-800 font-bold px-2.5 py-1 rounded-lg text-sm">3</span>
<div>
<h5 className="font-bold text-slate-900 text-sm">Notasi Pembentuk Himpunan</h5>
<p className="text-xs text-slate-600 mt-0.5">Menggunakan variabel peubah dan simbol matematika.</p>
<p className="text-xs font-mono text-indigo-600 mt-1">Contoh: P = {'{'} x | x < 10, x ∈ bilangan prima {'}'}</p>
</div>
</div>
</div>
<div className="bg-amber-50 p-4 rounded-xl border border-amber-200 mt-4">
<h4 className="font-bold text-amber-900 mb-1">Himpunan Bagian (Subset)</h4>
<p className="text-xs text-amber-950">
Himpunan A merupakan himpunan bagian dari B (ditulis <span className="font-bold">A ⊂ B</span>) jika setiap anggota A juga merupakan anggota B.
</p>
<div className="bg-white p-2.5 rounded border text-xs font-mono text-slate-700 mt-2">
Misal A = {'{'}1, 2{'}'} dan B = {'{'}1, 2, 3, 4{'}'}.<br />
Karena semua anggota A (1 dan 2) ada di B, maka A ⊂ B.
</div>
</div>
</div>
)
},
{
id: 3,
subBab: "B",
title: "Pertemuan 3: Konsep Relasi & Diagram Panah",
deskripsi: "Memahami apa itu relasi antara dua himpunan dan menyajikannya lewat Diagram Panah.",
konten: (
<div className="space-y-4">
<p className="text-slate-700">
Sekarang kita masuk ke topik utama: <strong>Relasi</strong>. Dalam matematika, relasi menyatakan hubungan antara dua himpunan.
</p>
<div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
<h4 className="font-bold text-indigo-900 mb-1">Definisi Relasi</h4>
<p className="text-indigo-950 text-sm">
Relasi dari himpunan A ke himpunan B adalah suatu aturan yang memasangkan anggota-anggota himpunan A dengan anggota-anggota himpunan B.
</p>
</div>
<h4 className="font-bold text-slate-800">Menyajikan Relasi: 1. Diagram Panah</h4>
<p className="text-slate-600 text-sm">
Diagram panah adalah cara paling visual dengan menggunakan lingkaran/oval yang mewakili himpunan and garis panah sebagai arah relasinya.
</p>
{/* Visual Diagram Panah */}
<div className="bg-white p-4 rounded-xl border shadow-sm flex flex-col items-center">
<span className="text-xs font-bold text-slate-500 mb-3">CONTOH RELASI: "Menyukai Makanan"</span>
<div className="flex items-center justify-around w-full max-w-sm">
<div className="flex flex-col items-center">
<span className="font-bold text-indigo-600 text-xs mb-1">Himpunan A (Anak)</span>
<div className="border-2 border-indigo-300 rounded-full px-4 py-6 bg-indigo-50/50 space-y-4 flex flex-col items-center">
<div className="bg-white px-2 py-1 rounded text-xs shadow-sm font-semibold">Ali</div>
<div className="bg-white px-2 py-1 rounded text-xs shadow-sm font-semibold">Siti</div>
<div className="bg-white px-2 py-1 rounded text-xs shadow-sm font-semibold">Budi</div>
</div>
</div>
<div className="w-24 h-24 relative">
<svg className="w-full h-full" viewBox="0 0 100 100">
<path d="M 10 25 L 90 25" stroke="#6366f1" strokeWidth="2" fill="none" />
<path d="M 10 25 L 90 75" stroke="#6366f1" strokeWidth="1.5" fill="none" />
<path d="M 10 50 L 90 50" stroke="#6366f1" strokeWidth="2" fill="none" />
<path d="M 10 75 L 90 25" stroke="#6366f1" strokeWidth="1.5" fill="none" />
</svg>
</div>
<div className="flex flex-col items-center">
<span className="font-bold text-pink-600 text-xs mb-1">Himpunan B (Makanan)</span>
<div className="border-2 border-pink-300 rounded-full px-4 py-6 bg-pink-50/50 space-y-4 flex flex-col items-center">
<div className="bg-white px-2 py-1 rounded text-xs shadow-sm font-semibold">Bakso</div>
<div className="bg-white px-2 py-1 rounded text-xs shadow-sm font-semibold">Soto</div>
<div className="bg-white px-2 py-1 rounded text-xs shadow-sm font-semibold">Rujak</div>
</div>
</div>
</div>
<p className="text-xs text-slate-500 mt-4 text-center">
Ali menyukai Bakso & Rujak, Siti menyukai Soto, Budi menyukai Bakso.
</p>
</div>
</div>
)
},
{
id: 4,
subBab: "B",
title: "Pertemuan 4: Diagram Kartesius & Himpunan Pasangan Berurutan",
deskripsi: "Mempelajari dua cara lain untuk menyajikan relasi matematika.",
konten: (
<div className="space-y-4">
<p className="text-slate-700">
Selain Diagram Panah, kita juga dapat menyajikan relasi dengan dua metode yang sangat penting:
</p>
<div className="space-y-4">
<div className="bg-white p-4 rounded-xl border shadow-sm">
<h4 className="font-bold text-slate-900 text-sm mb-2">1. Himpunan Pasangan Berurutan</h4>
<p className="text-xs text-slate-600 mb-3 leading-relaxed">
Kita memasangkan setiap anggota himpunan pertama (x) dengan anggota himpunan kedua (y) lalu menulisnya dalam format koordinat <span className="font-mono bg-slate-100 px-1 rounded">(x, y)</span> di dalam kurung kurawal.
</p>
<div className="bg-indigo-50 p-3 rounded-lg border border-indigo-100">
<span className="text-xs font-bold text-indigo-900 block mb-1">Contoh:</span>
<p className="text-xs font-mono text-indigo-950">
R = {'{'} (Ali, Bakso), (Ali, Rujak), (Siti, Soto), (Budi, Bakso) {'}'}
</p>
</div>
</div>
<div className="bg-white p-4 rounded-xl border shadow-sm">
<h4 className="font-bold text-slate-900 text-sm mb-2">2. Diagram Kartesius</h4>
<p className="text-xs text-slate-600 mb-3">
Anggota himpunan A diletakkan pada sumbu mendatar (horizontal/X), dan anggota himpunan B pada sumbu tegak (vertikal/Y). Setiap pasangan ditandai dengan noktah (titik hitam).
</p>
<div className="border border-slate-200 rounded-lg p-3 max-w-xs mx-auto bg-slate-50">
<div className="grid grid-cols-4 gap-2 text-center text-xs">
<span className="font-bold text-pink-600">Soto</span>
<span className="text-slate-300">-</span>
<span className="text-indigo-600 font-bold">●</span>
<span className="text-slate-300">-</span>
<span className="font-bold text-pink-600">Bakso</span>
<span className="text-indigo-600 font-bold">●</span>
<span className="text-slate-300">-</span>
<span className="text-indigo-600 font-bold">●</span>
<span className="font-bold text-pink-600">Rujak</span>
<span className="text-indigo-600 font-bold">●</span>
<span className="text-slate-300">-</span>
<span className="text-slate-300">-</span>
<span></span>
<span className="font-bold text-slate-600">Ali</span>
<span className="font-bold text-slate-600">Siti</span>
<span className="font-bold text-slate-600">Budi</span>
</div>
</div>
</div>
</div>
</div>
)
},
{
id: 5,
subBab: "C",
title: "Pertemuan 5: Pengenalan Fungsi (Pemetaan)",
deskripsi: "Menemukan perbedaan mendasar antara relasi biasa dengan fungsi, serta mengenal Domain, Kodomain, dan Range.",
konten: (
<div className="space-y-4">
<p className="text-slate-700">
Apakah semua relasi itu adalah Fungsi? Jawabannya adalah <strong>Tidak</strong>. Fungsi adalah jenis relasi yang istimewa!
</p>
<div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
<h4 className="font-bold text-indigo-900 mb-1">Definisi Fungsi (Pemetaan)</h4>
<p className="text-indigo-950 text-sm">
Fungsi dari himpunan A ke B adalah relasi khusus yang memasangkan <strong>setiap</strong> anggota himpunan A dengan <strong>tepat satu</strong> anggota himpunan B.
</p>
</div>
<div className="bg-amber-50 p-4 rounded-xl border border-amber-200">
<h4 className="font-bold text-amber-900 text-xs mb-2">Syarat Mutlak Fungsi (Fokus pada Himpunan A/Domain):</h4>
<ul className="list-decimal list-inside text-xs text-amber-950 space-y-1">
<li>Semua anggota A harus punya pasangan (tidak boleh jomblo).</li>
<li>Anggota A hanya boleh dipasangkan satu kali (tidak boleh selingkuh).</li>
<li><em>Catatan:</em> Anggota B bebas memilih, boleh bercabang atau tidak punya pasangan.</li>
</ul>
</div>
<div className="bg-white p-4 rounded-xl border shadow-sm">
<h4 className="font-bold text-slate-900 text-sm mb-3">Istilah Penting Fungsi</h4>
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
<div className="p-2.5 bg-slate-50 rounded border">
<span className="font-bold text-indigo-700 block mb-1">Domain (Daerah Asal)</span>
Seluruh anggota himpunan pertama (A).
</div>
<div className="p-2.5 bg-slate-50 rounded border">
<span className="font-bold text-pink-700 block mb-1">Kodomain (Daerah Kawan)</span>
Seluruh anggota himpunan kedua (B).
</div>
<div className="p-2.5 bg-slate-50 rounded border">
<span className="font-bold text-emerald-700 block mb-1">Range (Daerah Hasil)</span>
Anggota B yang benar-benar terpilih oleh pasangan dari A.
</div>
</div>
</div>
</div>
)
},
{
id: 6,
subBab: "C",
title: "Pertemuan 6: Notasi & Rumus Fungsi",
deskripsi: "Mempelajari bagaimana merumuskan fungsi secara matematika dan menghitung nilai fungsinya.",
konten: (
<div className="space-y-4">
<p className="text-slate-700">
Fungsi biasanya dinotasikan dengan huruf kecil seperti <span className="font-mono bg-slate-100 px-1.5 py-0.5 rounded text-indigo-600">f, g, h</span>.
</p>
<div className="bg-white p-4 rounded-xl border shadow-sm space-y-3">
<h4 className="font-bold text-slate-900 text-sm">Notasi vs Rumus Fungsi</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
<div className="p-3 bg-indigo-50/50 rounded-lg border border-indigo-100">
<span className="font-bold text-indigo-800 block">Notasi Fungsi</span>
<p className="font-mono text-base mt-2 text-indigo-950">f : x → ax + b</p>
<p className="text-slate-500 mt-1">Dibaca: fungsi f memetakan x ke ax + b</p>
</div>
<div className="p-3 bg-emerald-50/50 rounded-lg border border-emerald-100">
<span className="font-bold text-emerald-800 block">Rumus Fungsi</span>
<p className="font-mono text-base mt-2 text-emerald-950">f(x) = ax + b</p>
<p className="text-slate-500 mt-1">Digunakan langsung untuk menghitung nilai.</p>
</div>
</div>
</div>
<div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
<h4 className="font-bold text-slate-800 mb-2">Contoh Cara Menghitung Nilai Fungsi</h4>
<div className="text-xs space-y-2">
<p className="font-semibold text-slate-700">Diketahui fungsi f(x) = 3x - 2. Tentukan nilai f(4)!</p>
<div className="bg-white p-3 rounded font-mono border text-slate-800 space-y-1">
<p>Langkah Jawab:</p>
<p>1. f(x) = 3x - 2</p>
<p>2. Ganti nilai x dengan 4</p>
<p>3. f(4) = 3(4) - 2</p>
<p>4. f(4) = 12 - 2 = 10</p>
<p className="text-emerald-600 font-bold">Jadi, nilai f(4) adalah 10.</p>
</div>
</div>
</div>
</div>
)
},
{
id: 7,
subBab: "C",
title: "Pertemuan 7: Grafik Fungsi pada Koordinat Kartesius",
deskripsi: "Menggambar grafik dari suatu rumus fungsi linear ke dalam koordinat kartesius.",
konten: (
<div className="space-y-4">
<p className="text-slate-700">
Grafik fungsi diperoleh dengan menghubungkan titik-titik koordinat hasil perhitungan rumus fungsi pada bidang Kartesius.
</p>
<div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
<h4 className="font-bold text-indigo-950 text-sm mb-2">Tahapan Menggambar Grafik Fungsi:</h4>
<ol className="list-decimal list-inside text-xs text-indigo-900 space-y-2">
<li>Tentukan domain (jika belum ditentukan, pilih beberapa bilangan bulat, misal x = -1, 0, 1, 2).</li>
<li>Hitung nilai f(x) untuk setiap x yang dipilih (sebagai koordinat Y).</li>
<li>Buat tabel pasangan berurutan (x, f(x)).</li>
<li>Gambarkan titik-titik tersebut pada koordinat Kartesius lalu tarik garis lurus.</li>
</ol>
</div>
<div className="bg-white p-4 rounded-xl border shadow-sm">
<span className="text-xs font-bold text-slate-500 block mb-2">Simulasi Tabel Nilai untuk f(x) = 2x + 1</span>
<div className="overflow-x-auto">
<table className="w-full text-xs text-center border-collapse">
<thead>
<tr className="bg-slate-100">
<th className="border p-2">x</th>
<th className="border p-2">f(x) = 2x + 1</th>
<th className="border p-2">Koordinat (x, y)</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border p-2 font-mono font-bold">0</td>
<td className="border p-2">2(0) + 1 = 1</td>
<td className="border p-2 font-mono text-indigo-600">(0, 1)</td>
</tr>
<tr>
<td className="border p-2 font-mono font-bold">1</td>
<td className="border p-2">2(1) + 1 = 3</td>
<td className="border p-2 font-mono text-indigo-600">(1, 3)</td>
</tr>
<tr>
<td className="border p-2 font-mono font-bold">2</td>
<td className="border p-2">2(2) + 1 = 5</td>
<td className="border p-2 font-mono text-indigo-600">(2, 5)</td>
</tr>
</tbody>
</table>
</div>
<p className="text-slate-500 text-[10px] mt-2">
*Jika digambarkan di koordinat Kartesius, titik (0,1), (1,3), dan (2,5) akan membentuk satu garis lurus diagonal naik ke kanan.
</p>
</div>
</div>
)
},
{
id: 8,
subBab: "D",
title: "Pertemuan 8: Konsep Korespondensi Satu-satu",
deskripsi: "Mengenal jenis relasi paling eksklusif, yaitu Korespondensi Satu-satu.",
konten: (
<div className="space-y-4">
<p className="text-slate-700">
Mari kita tingkatkan pemahaman kita ke tingkat tertinggi dalam relasi: <strong>Korespondensi Satu-Satu</strong>.
</p>
<div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
<h4 className="font-bold text-indigo-900 mb-1">Definisi Korespondensi Satu-Satu</h4>
<p className="text-indigo-950 text-sm">
Dua himpunan A dan B dikatakan memiliki hubungan korespondensi satu-satu jika <strong>setiap anggota A dipasangkan dengan tepat satu anggota B</strong>, dan sebaliknya <strong>setiap anggota B dipasangkan dengan tepat satu anggota A</strong>.
</p>
</div>
<div className="bg-amber-50 p-4 rounded-xl border border-amber-200">
<h4 className="font-bold text-amber-900 text-xs mb-2">Syarat Mutlak Korespondensi Satu-Satu:</h4>
<ul className="list-decimal list-inside text-xs text-amber-950 space-y-1">
<li>Jumlah anggota himpunan A harus sama persis dengan jumlah anggota himpunan B. <span className="font-bold text-indigo-700">n(A) = n(B)</span>.</li>
<li>Tidak boleh ada satu pun anggota dari kedua himpunan yang tidak memiliki pasangan atau memiliki pasangan ganda.</li>
</ul>
</div>
<div className="bg-white p-4 rounded-xl border shadow-sm">
<h4 className="font-bold text-slate-800 text-sm mb-2">Contoh Nyata Korespondensi Satu-satu:</h4>
<ul className="list-disc list-inside text-xs text-slate-600 space-y-2">
<li>Himpunan <strong>Negara</strong> dengan himpunan <strong>Ibu Kota Negara</strong> (setiap negara hanya punya 1 ibukota, dan sebaliknya).</li>
<li>Himpunan <strong>Siswa di kelas</strong> dengan himpunan <strong>Nomor Induk Siswa Nasional / NISN</strong>.</li>
<li>Himpunan <strong>Kendaraan</strong> dengan himpunan <strong>Nomor Plat Polisi</strong>.</li>
</ul>
</div>
</div>
)
},
{
id: 9,
subBab: "D",
title: "Pertemuan 9: Menghitung Banyak Korespondensi Satu-satu",
deskripsi: "Mempelajari rumus faktorial untuk menentukan banyaknya kemungkinan korespondensi satu-satu.",
konten: (
<div className="space-y-4">
<p className="text-slate-700">
Berapa banyak susunan korespondensi satu-satu yang bisa kita buat dari dua himpunan yang jumlah anggotanya sama?
</p>
<div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
<h4 className="font-bold text-indigo-900 mb-1">Rumus Banyak Korespondensi Satu-satu</h4>
<p className="text-indigo-950 text-sm">
Jika <span className="font-bold">n(A) = n(B) = n</span>, maka banyak korespondensi satu-satu yang mungkin adalah:
</p>
<p className="font-mono text-xl text-center my-3 font-bold text-indigo-600">
n! = n × (n - 1) × (n - 2) × ... × 3 × 2 × 1
</p>
<p className="text-xs text-slate-500 text-center">*(n! dibaca: n faktorial)</p>
</div>
<div className="bg-white p-4 rounded-xl border shadow-sm">
<h4 className="font-bold text-slate-900 text-sm mb-2">Contoh Perhitungan</h4>
<p className="text-xs text-slate-600 mb-2">
Jika A = {'{'}a, b, c{'}'} dan B = {'{'}1, 2, 3{'}'}. Tentukan banyak korespondensi satu-satu yang mungkin terbentuk!
</p>
<div className="bg-slate-50 p-3 rounded font-mono text-xs border space-y-1">
<p>1. Tentukan n: n(A) = 3 dan n(B) = 3, maka n = 3.</p>
<p>2. Gunakan rumus: 3! = 3 × 2 × 1</p>
<p>3. Hitung hasil: 3 × 2 = 6, lalu 6 × 1 = 6.</p>
<p className="text-emerald-600 font-bold mt-1">Jadi, ada 6 kemungkinan susunan korespondensi satu-satu.</p>
</div>
</div>
</div>
)
},
{
id: 10,
subBab: "Rangkuman",
title: "Pertemuan 10: Rangkuman & Peta Konsep Bab 4",
deskripsi: "Mengkaji ulang semua materi dari Konsep Himpunan hingga Korespondensi Satu-satu sebelum tes.",
konten: (
<div className="space-y-4">
<p className="text-slate-700 font-semibold text-sm">
Selamat! Kamu telah menyelesaikan seluruh rangkaian materi Bab 4. Mari kita rangkum poin pentingnya:
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-3 bg-white border rounded-xl shadow-xs">
<h5 className="font-bold text-indigo-800 text-xs mb-1">A. Konsep Himpunan</h5>
<p className="text-[11px] text-slate-600 leading-relaxed">
Kumpulan berdefinisi jelas. Dapat dinyatakan dengan deskripsi, tabulasi anggota, dan notasi himpunan.
</p>
</div>
<div className="p-3 bg-white border rounded-xl shadow-xs">
<h5 className="font-bold text-indigo-800 text-xs mb-1">B. Relasi</h5>
<p className="text-[11px] text-slate-600 leading-relaxed">
Hubungan/pemasangan anggota himpunan A ke B. Bebas dipasangkan tanpa syarat ketat. Disajikan lewat diagram panah, Kartesius, & pasangan berurutan.
</p>
</div>
<div className="p-3 bg-white border rounded-xl shadow-xs">
<h5 className="font-bold text-indigo-800 text-xs mb-1">C. Fungsi (Pemetaan)</h5>
<p className="text-[11px] text-slate-600 leading-relaxed">
Relasi khusus di mana setiap anggota Domain (A) wajib dipasangkan tepat satu ke Kodomain (B). Memiliki rumus $f(x) = ax + b$.
</p>
</div>
<div className="p-3 bg-white border rounded-xl shadow-xs">
<h5 className="font-bold text-indigo-800 text-xs mb-1">D. Korespondensi Satu-satu</h5>
<p className="text-[11px] text-slate-600 leading-relaxed">
Relasi super eksklusif antara dua himpunan dengan $n(A) = n(B)$, di mana setiap anggota saling memiliki tepat satu pasangan unik tanpa ada sisa. Banyaknya kemungkinan dihitung dengan rumus $n!$.
</p>
</div>
</div>
<div className="bg-emerald-50 p-4 rounded-xl border border-emerald-200 text-center">
<p className="text-emerald-900 font-bold text-sm">🎉 Kamu Siap Mengambil Ujian!</p>
<p className="text-emerald-950 text-xs mt-1">Silakan pilih menu kuis per sub-bab atau langsung uji kemampuanmu di Tes Sumatif!</p>
</div>
</div>
)
}
];
// ==========================================
// DATA SOAL KUIS (PER SUB-BAB & SUMATIF)
// ==========================================
const QUIZ_DATA = {
"A": {
title: "Kuis Sub-Bab A: Konsep Himpunan",
questions: [
{
question: "Di bawah ini yang merupakan contoh HIMPUNAN yang terdefinisi dengan jelas adalah...",
options: [
"Kumpulan lukisan yang bernilai seni tinggi",
"Kumpulan siswa yang bertubuh tinggi di atas 165 cm",
"Kumpulan makanan daerah yang rasanya enak",
"Kumpulan kota besar yang menyenangkan untuk ditinggali"
],
answer: 1,
explanation: "Pilihan B terdefinisi jelas karena menggunakan batas angka pasti (di atas 165 cm). Pilihan lain seperti tinggi, enak, dan menyenangkan bersifat relatif."
},
{
question: "Jika Himpunan K = { x | 2 < x ≤ 10, x ∈ bilangan genap }, maka anggota himpunan K yang terdaftar adalah...",
options: [
"{2, 4, 6, 8, 10}",
"{4, 6, 8}",
"{4, 6, 8, 10}",
"{2, 4, 6, 8}"
],
answer: 2,
explanation: "Karena syaratnya adalah 2 < x ≤ 10, angka 2 tidak termasuk, tetapi angka 10 termasuk. Bilangan genapnya adalah {4, 6, 8, 10}."
},
{
question: "Diketahui A = {a, b}. Tentukan banyaknya semua himpunan bagian dari A yang mungkin!",
options: [
"2",
"4",
"8",
"16"
],
answer: 1,
explanation: "Rumus banyaknya himpunan bagian adalah 2ⁿ. Karena n(A) = 2, maka 2² = 4."
}
]
},
"B": {
title: "Kuis Sub-Bab B: Relasi",
questions: [
{
question: "Dua himpunan A = {2, 3, 4} dan B = {4, 6, 8, 10}. Relasi yang tepat memasangkan A ke B untuk pasangan (2,4), (3,6), (4,8) adalah...",
options: [
"Faktor dari",
"Kurang dari",
"Setengah dari",
"Dua kali dari"
],
answer: 2,
explanation: "2 adalah setengah dari 4, 3 setengah dari 6, dan 4 setengah dari 8. Jadi relasi yang tepat adalah 'Setengah dari'."
},
{
question: "Himpunan pasangan berurutan yang menyatakan relasi 'kuadrat dari' dari himpunan P = {1, 2, 3, 4} ke Q = {1, 4, 9, 16, 25} adalah...",
options: [
"{ (1,1), (2,4), (3,9), (4,16) }",
"{ (1,1), (4,2), (9,3), (16,4) }",
"{ (1,2), (2,4), (3,6), (4,8) }",
"{ (2,1), (4,2), (6,3), (8,4) }"
],
answer: 0,
explanation: "Kuadrat dari P ke Q berarti anggota P kuadratnya adalah anggota Q. 1²=1, 2²=4, 3²=9, 4²=16."
}
]
},
"C": {
title: "Kuis Sub-Bab C: Fungsi (Pemetaan)",
questions: [
{
question: "Suatu relasi disebut Fungsi jika...",
options: [
"Setiap anggota kodomain memiliki tepat satu pasangan di domain",
"Setiap anggota domain memiliki pasangan di kodomain",
"Setiap anggota domain dipasangkan dengan tepat satu anggota kodomain",
"Jumlah anggota domain sama dengan jumlah anggota kodomain"
],
answer: 2,
explanation: "Syarat utama fungsi adalah setiap anggota domain harus dipasangkan tepat satu dengan anggota di kodomain."
},
{
question: "Diketahui rumus fungsi f(x) = 5x - 7. Nilai dari f(3) adalah...",
options: [
"8",
"15",
"22",
"10"
],
answer: 0,
explanation: "Substitusi x = 3 ke rumus f(x): f(3) = 5(3) - 7 = 15 - 7 = 8."
},
{
question: "Jika f(x) = ax + b, dengan f(2) = 7 dan f(1) = 4, maka rumus fungsi f(x) adalah...",
options: [
"f(x) = 2x + 3",
"f(x) = 3x + 1",
"f(x) = 4x - 1",
"f(x) = 3x + 4"
],
answer: 1,
explanation: "Sistem persamaan: 2a + b = 7 dan a + b = 4. Kurangi kedua persamaan, didapat a = 3, b = 1. Jadi f(x) = 3x + 1."
}
]
},
"D": {
title: "Kuis Sub-Bab D: Korespondensi Satu-satu",
questions: [
{
question: "Pasangan himpunan berikut yang MUNGKIN membentuk korespondensi satu-satu adalah...",
options: [
"A = {warna lampu lalu lintas} dan B = {nama hari}",
"P = {huruf vokal} dan Q = {angka jari pada satu tangan utuh}",
"K = {faktor dari 6} dan L = {negara ASEAN}",
"X = {provinsi di pulau Jawa} dan Y = {ibukota negara}"
],
answer: 1,
explanation: "P = {a,i,u,e,o} memiliki 5 anggota, dan Q = {Ibu jari, Telunjuk, Tengah, Manis, Kelingking} juga memiliki 5 anggota. Karena n(P) = n(Q), mereka bisa membentuk korespondensi satu-satu."
},
{
question: "Diketahui himpunan M = {1, 2, 3, 4} dan N = {a, b, c, d}. Banyaknya korespondensi satu-satu yang mungkin terbentuk dari M ke N adalah...",
options: [
"16",
"24",
"12",
"4"
],
answer: 1,
explanation: "Banyak anggota n = 4. Rumus korespondensi satu-satu: 4! = 4 × 3 × 2 × 1 = 24."
}
]
},
"SUMATIF": {
title: "Tes Sumatif BAB 4: Relasi dan Fungsi",
questions: [
{
question: "Manakah di bawah ini yang dikategorikan sebagai himpunan kosong?",
options: [
"Himpunan bilangan prima genap",
"Himpunan nama bulan yang diawali huruf 'Z'",
"Himpunan bilangan cacah kurang dari 1",
"Himpunan siswa berambut keriting"
],
answer: 1,
explanation: "Tidak ada nama bulan yang berawalan huruf 'Z', sehingga anggotanya kosong."
},
{
question: "Diberikan himpunan A = {1, 2, 3} dan B = {a, b}. Relasi dari A ke B disajikan dengan himpunan pasangan berurutan { (1,a), (2,a), (3,b) }. Relasi tersebut merupakan...",
options: [
"Relasi biasa tetapi bukan Fungsi",
"Fungsi (Pemetaan)",
"Korespondensi satu-satu",
"Bukan Relasi maupun Fungsi"
],
answer: 1,
explanation: "Setiap anggota A {1, 2, 3} muncul tepat satu kali di sebelah kiri pasangan. Jadi ini adalah Fungsi."
},
{
question: "Pada fungsi f: x → 4x - 5, bayangan (hasil) dari -2 adalah...",
options: [
"-13",
"-3",
"3",
"13"
],
answer: 0,
explanation: "f(-2) = 4(-2) - 5 = -8 - 5 = -13."
},
{
question: "Diketahui fungsi g(x) = ax + b. Jika g(5) = 17 dan g(2) = 8, nilai dari g(10) adalah...",
options: [
"32",
"26",
"30",
"20"
],
answer: 0,
explanation: "Didapat a = 3 dan b = 2. Rumus fungsi: g(x) = 3x + 2. Nilai g(10) = 3(10) + 2 = 32."
},
{
question: "Dari diagram panah relasi berikut, mana yang merupakan KORESPONDENSI SATU-SATU?",
options: [
"Setiap anggota domain bercabang ke kodomain yang sama",
"Satu anggota domain tidak memiliki pasangan di kodomain",
"Setiap anggota domain dipasangkan tepat satu dengan anggota kodomain, dan sebaliknya setiap anggota kodomain tepat satu dengan domain",
"Anggota kodomain boleh tidak memiliki pasangan asal domain terisi semua"
],
answer: 2,
explanation: "Korespondensi satu-satu mensyaratkan hubungan dua arah yang seimbang: satu-satu tanpa sisa di kedua belah pihak."
},
{
question: "Jika n(P) = n(Q) = 5, berapakah jumlah seluruh kemungkinan korespondensi satu-satu yang dapat dibuat?",
options: [
"120",
"25",
"60",
"10"
],
answer: 0,
explanation: "5! = 5 × 4 × 3 × 2 × 1 = 120 kemungkinan."
},
{
question: "Suatu fungsi didefinisikan f(x) = 7 - 3x. Jika f(k) = -8, maka nilai k adalah...",
options: [
"3",
"-5",
"5",
"-3"
],
answer: 2,
explanation: "7 - 3k = -8 -> -3k = -15 -> k = 5."
},
{
question: "Himpunan daerah hasil (Range) dari relasi { (1,2), (2,4), (3,6), (4,8) } adalah...",
options: [
"{1, 2, 3, 4}",
"{2, 4, 6, 8}",
"{1, 2, 3, 4, 6, 8}",
"{2, 4, 8}"
],
answer: 1,
explanation: "Range adalah seluruh nilai ordinat (sebelah kanan) dari pasangan berurutan, yaitu {2, 4, 6, 8}."
},
{
question: "Bila A = {faktor dari 10} dan B = {bilangan prima kurang dari 7}. Maka jumlah anggota n(A) dan n(B) berturut-turut adalah...",
options: [
"4 dan 3",
"3 dan 3",
"4 dan 4",
"2 dan 3"
],
answer: 0,
explanation: "A = {1, 2, 5, 10} -> n(A) = 4. B = {2, 3, 5} -> n(B) = 3."
},
{
question: "Sebuah fungsi f(x) = x² - 2x. Nilai f(-3) adalah...",
options: [
"3",
"15",
"-15",
"9"
],
answer: 1,
explanation: "f(-3) = (-3)² - 2(-3) = 9 + 6 = 15."
}
]
}
};
export default function App() {
// ==========================================
// STATE MANAGEMENT
// ==========================================
const [fbUser, setFbUser] = useState(null);
const [allStudents, setAllStudents] = useState([]);
const [isLocalMode, setIsLocalMode] = useState(!db); // Flag jika Firebase tidak aktif
// App Navigation & Session
const [activeTab, setActiveTab] = useState('login'); // 'login', 'dashboard', 'materi', 'playground', 'tes', 'admin-panel'
const [loginUser, setLoginUser] = useState(null); // { id, name, username, role: 'siswa'|'admin', scores, completedPertemuan }
// Login Form States
const [loginRole, setLoginRole] = useState('siswa'); // 'siswa' | 'admin'
const [inputUsername, setInputUsername] = useState('');
const [inputPassword, setInputPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [loginError, setLoginError] = useState('');
// Admin: Tambah Siswa Form States
const [newSiswaName, setNewSiswaName] = useState('');
const [newSiswaUsername, setNewSiswaUsername] = useState('');
const [newSiswaPassword, setNewSiswaPassword] = useState('');
const [adminMessage, setAdminMessage] = useState({ type: '', text: '' });
const [adminSearchQuery, setAdminSearchQuery] = useState('');
// Course States
const [selectedPertemuan, setSelectedPertemuan] = useState(1);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
// Active Quiz States
const [activeQuizKey, setActiveQuizKey] = useState("A");
const [quizStep, setQuizStep] = useState(0);
const [selectedOption, setSelectedOption] = useState(null);
const [showExplanation, setShowExplanation] = useState(false);
const [quizCorrectCount, setQuizCorrectCount] = useState(0);
const [quizFinished, setQuizFinished] = useState(false);
// Playground States
const [playgroundSetA, setPlaygroundSetA] = useState(["1", "2", "3"]);
const [playgroundSetB, setPlaygroundSetB] = useState(["A", "B", "C"]);
const [playgroundPairs, setPlaygroundPairs] = useState([]);
const [activeConnectingFrom, setActiveConnectingFrom] = useState(null);
// ==========================================
// EFFECTS & DATABASE INITIALIZATION
// ==========================================
// 1. Auth Init & Listener (Rule 3)
useEffect(() => {
if (!auth) {
// Beralih ke Local Mode jika dijalankan secara eksternal (No auth object)
setFbUser({ uid: "local_sandbox_user" });
setIsLocalMode(true);
return;
}
const initAuth = async () => {
try {
if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
await signInWithCustomToken(auth, __initial_auth_token);
} else {
await signInAnonymously(auth);
}
} catch (err) {
console.error("Firebase auth error:", err);
}
};
initAuth();
const unsubscribe = onAuthStateChanged(auth, (user) => {
setFbUser(user);
});
return () => unsubscribe();
}, []);
// 2. Real-Time Sync / Local Fallback Loader
useEffect(() => {
if (isLocalMode || !db) {
// MEMBACA DARI LOCALSTORAGE JIKA DICOPY KE WEB EKSTERNAL
const localData = localStorage.getItem('math_lab_students');
if (localData) {
setAllStudents(JSON.parse(localData));
} else {
const defaultStudents = [
{
id: "siswa_1_default",
name: "Siswa Contoh 1",
username: "siswa1",
password: "123",
completedPertemuan: [1],
scores: {
A: null,
B: null,
C: null,
D: null,
SUMATIF: null
},
createdAt: new Date().toISOString()
}
];
setAllStudents(defaultStudents);
localStorage.setItem('math_lab_students', JSON.stringify(defaultStudents));
}
return;
}
if (!fbUser) return;
const studentsCollectionRef = collection(db, 'artifacts', appId, 'public', 'data', 'students');
const unsubscribe = onSnapshot(studentsCollectionRef, (snapshot) => {
const studentList = [];
snapshot.forEach((doc) => {
studentList.push({ id: doc.id, ...doc.data() });
});
setAllStudents(studentList);
// Auto seed default data if database is empty
if (studentList.length === 0) {
seedInitialData();
}
}, (error) => {
console.error("Firestore loading error, switching to Local Storage Mode:", error);
setIsLocalMode(true);
});
return () => unsubscribe();
}, [fbUser, isLocalMode]);
// Sinkronisasi data user aktif saat data AllStudents terupdate
useEffect(() => {
if (loginUser && loginUser.role === 'siswa') {
const freshData = allStudents.find(s => s.id === loginUser.id);
if (freshData) {
setLoginUser({
...loginUser,
name: freshData.name,
username: freshData.username,
scores: freshData.scores || {},
completedPertemuan: freshData.completedPertemuan || [1]
});
}
}
}, [allStudents]);
// Seeder helper untuk Firestore
const seedInitialData = async () => {
if (!db) return;
try {
const defaultStudentId = "siswa_1_default";
const studentDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'students', defaultStudentId);
await setDoc(studentDocRef, {
name: "Siswa Contoh 1",
username: "siswa1",
password: "123",
completedPertemuan: [1],
scores: {
A: null,
B: null,
C: null,
D: null,
SUMATIF: null
},
createdAt: new Date().toISOString()
});
} catch (err) {
console.error("Error seeding initial student:", err);
}
};
// ==========================================
// AUTHENTICATION LOGIC (STUDENT & ADMIN)
// ==========================================
const handleLogin = (e) => {
e.preventDefault();
setLoginError('');
if (!inputUsername.trim() || !inputPassword.trim()) {
setLoginError('Username dan Password wajib diisi.');
return;
}
if (loginRole === 'admin') {
// Admin static credentials
if (inputUsername.toLowerCase() === 'admin' && inputPassword === 'admin123') {
const adminSession = {
id: 'admin_session',
name: 'Administrator Guru',
username: 'admin',
role: 'admin'
};
setLoginUser(adminSession);
setActiveTab('admin-panel');
clearLoginForm();
} else {
setLoginError('Kredensial Admin salah. (Gunakan: admin / admin123)');
}
} else {
// Student Dynamic Credential Matching
const matchedStudent = allStudents.find(
s => s.username.toLowerCase() === inputUsername.toLowerCase() && s.password === inputPassword
);
if (matchedStudent) {
setLoginUser({
id: matchedStudent.id,
name: matchedStudent.name,
username: matchedStudent.username,
role: 'siswa',
scores: matchedStudent.scores || {},
completedPertemuan: matchedStudent.completedPertemuan || [1]
});
setActiveTab('dashboard');
clearLoginForm();
} else {
setLoginError('Username atau Password siswa salah. Silakan hubungi Admin/Guru.');
}
}
};
const handleLogout = () => {
setLoginUser(null);
setActiveTab('login');
setMobileMenuOpen(false);
};
const clearLoginForm = () => {
setInputUsername('');
setInputPassword('');
setLoginError('');
};
// ==========================================
// STUDENT REGISTER LOGIC (ADMIN ROLE ONLY)
// ==========================================
const handleAddSiswa = async (e) => {
e.preventDefault();
setAdminMessage({ type: '', text: '' });
if (!newSiswaName.trim() || !newSiswaUsername.trim() || !newSiswaPassword.trim()) {
setAdminMessage({ type: 'error', text: 'Semua kolom wajib diisi untuk mendaftarkan siswa.' });
return;
}
const usernameClean = newSiswaUsername.trim().toLowerCase();
// Check if username already exists
const exists = allStudents.some(s => s.username.toLowerCase() === usernameClean);
if (exists || usernameClean === 'admin') {
setAdminMessage({ type: 'error', text: 'Username sudah digunakan. Pilih username lain.' });
return;
}
const newSiswaId = "siswa_" + Date.now();
const newSiswaData = {
id: newSiswaId,
name: newSiswaName.trim(),
username: usernameClean,
password: newSiswaPassword,
completedPertemuan: [1],
scores: {
A: null,
B: null,
C: null,
D: null,
SUMATIF: null
},
createdAt: new Date().toISOString()
};
if (isLocalMode || !db) {
// Simpan ke Local Storage jika berjalan eksternal
const updatedList = [...allStudents, newSiswaData];
setAllStudents(updatedList);
localStorage.setItem('math_lab_students', JSON.stringify(updatedList));
setAdminMessage({ type: 'success', text: `Siswa "${newSiswaName}" berhasil ditambahkan ke database offline!` });
setNewSiswaName('');
setNewSiswaUsername('');
setNewSiswaPassword('');
} else {
// Simpan ke Firestore cloud
try {
const studentDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'students', newSiswaId);
await setDoc(studentDocRef, newSiswaData);
setAdminMessage({ type: 'success', text: `Siswa "${newSiswaName}" berhasil ditambahkan!` });
setNewSiswaName('');
setNewSiswaUsername('');
setNewSiswaPassword('');
} catch (err) {
setAdminMessage({ type: 'error', text: 'Gagal menyimpan siswa ke server cloud.' });
}
}
};
// ==========================================
// CLASS PROGRESS SYSTEM
// ==========================================
const completeCurrentPertemuan = async (id) => {
if (!loginUser || loginUser.role !== 'siswa') {
if (id < 10) setSelectedPertemuan(id + 1);
return;
}
const currentCompleted = loginUser.completedPertemuan || [1];
if (!currentCompleted.includes(id)) {
const updatedCompleted = [...currentCompleted, id];
// Update local state terlebih dahulu agar interaksi instan
setLoginUser({ ...loginUser, completedPertemuan: updatedCompleted });
if (isLocalMode || !db) {
const updatedStudents = allStudents.map(s =>
s.id === loginUser.id ? { ...s, completedPertemuan: updatedCompleted } : s
);
setAllStudents(updatedStudents);
localStorage.setItem('math_lab_students', JSON.stringify(updatedStudents));
} else {
// Save to cloud
try {
const studentDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'students', loginUser.id);
await updateDoc(studentDocRef, {
completedPertemuan: updatedCompleted
});
} catch (err) {
console.error("Gagal menyimpan progres belajar ke cloud:", err);
}
}
}
if (id < 10) {
setSelectedPertemuan(id + 1);
}
};
// ==========================================
// PLAYGROUND SIMULATOR DETECTS
// ==========================================
const analyzePlaygroundRelation = () => {
if (playgroundPairs.length === 0) return "Tidak ada relasi yang terbentuk";
const domainsMapped = playgroundPairs.map(p => p.from);
const codomainsMapped = playgroundPairs.map(p => p.to);
const domainCounts = {};
playgroundPairs.forEach(p => {
domainCounts[p.from] = (domainCounts[p.from] || 0) + 1;
});
const isFunction = playgroundSetA.every(elem => domainCounts[elem] === 1);
const codomainCounts = {};
playgroundPairs.forEach(p => {
codomainCounts[p.to] = (codomainCounts[p.to] || 0) + 1;
});
const isOneToOne = isFunction &&
playgroundSetB.every(elem => codomainCounts[elem] === 1) &&
playgroundSetA.length === playgroundSetB.length;
if (isOneToOne) {
return "Korespondensi Satu-satu (Jenis Pemetaan Paling Sempurna!)";
} else if (isFunction) {
return "Fungsi / Pemetaan (Setiap Domain dipasangkan tepat satu)";
} else {
return "Relasi Biasa (Beberapa Domain bercabang atau kosong)";
}
};
const handlePlaygroundPairToggle = (from, to) => {
const exists = playgroundPairs.find(p => p.from === from && p.to === to);
if (exists) {
setPlaygroundPairs(playgroundPairs.filter(p => !(p.from === from && p.to === to)));
} else {
setPlaygroundPairs([...playgroundPairs, { from, to }]);
}
setActiveConnectingFrom(null);
};
// ==========================================
// INTERACTIVE KUIS FLOW
// ==========================================
const startQuiz = (key) => {
setActiveQuizKey(key);
setQuizStep(0);
setSelectedOption(null);
setShowExplanation(false);
setQuizCorrectCount(0);
setQuizFinished(false);
setActiveTab('tes-aktif');
};
const handleOptionSelect = (optionIdx) => {
if (showExplanation) return;
setSelectedOption(optionIdx);
};
const submitAnswer = () => {
if (selectedOption === null) return;
const currentQuiz = QUIZ_DATA[activeQuizKey];
if (selectedOption === currentQuiz.questions[quizStep].answer) {
setQuizCorrectCount(quizCorrectCount + 1);
}
setShowExplanation(true);
};
const nextQuestion = async () => {
const currentQuiz = QUIZ_DATA[activeQuizKey];
if (quizStep + 1 < currentQuiz.questions.length) {
setQuizStep(quizStep + 1);
setSelectedOption(null);
setShowExplanation(false);
} else {
const finalScore = Math.round((quizCorrectCount / currentQuiz.questions.length) * 100);
if (loginUser && loginUser.role === 'siswa') {
const updatedScores = {
...loginUser.scores,
[activeQuizKey]: finalScore
};
setLoginUser({
...loginUser,
scores: updatedScores
});
if (isLocalMode || !db) {
const updatedStudents = allStudents.map(s =>
s.id === loginUser.id ? { ...s, scores: updatedScores } : s
);
setAllStudents(updatedStudents);
localStorage.setItem('math_lab_students', JSON.stringify(updatedStudents));
} else {
// Save to cloud
try {
const studentDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'students', loginUser.id);
await updateDoc(studentDocRef, {
[`scores.${activeQuizKey}`]: finalScore
});
} catch (err) {
console.error("Gagal menyimpan hasil nilai ke cloud:", err);
}
}
}
setQuizFinished(true);
}
};
const getOverallProgress = () => {
if (!loginUser || loginUser.role !== 'siswa') return 0;
const completedCount = loginUser.completedPertemuan?.length || 0;
const quizCount = Object.values(loginUser.scores || {}).filter(v => v !== null).length;
return Math.min(100, Math.round(((completedCount + quizCount) / 15) * 100)); // 10 meetings + 5 quizzes
};
const filteredStudents = allStudents.filter(student =>
student.name.toLowerCase().includes(adminSearchQuery.toLowerCase()) ||
student.username.toLowerCase().includes(adminSearchQuery.toLowerCase())
);
return (
<div className="min-h-screen bg-slate-50 flex flex-col font-sans text-slate-800">
{/* HEADER BAR */}
<header className="bg-gradient-to-r from-indigo-700 via-indigo-600 to-indigo-800 text-white shadow-md sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
<div className="flex items-center gap-2.5">
<div className="bg-white/15 p-1.5 rounded-lg">
<BookMarked className="h-6 w-6 text-white" />
</div>
<div>
<h1 className="text-base md:text-lg font-bold leading-tight">MATH-LAB: Relasi & Fungsi</h1>
<p className="text-[10px] text-indigo-100 uppercase font-semibold tracking-wider">
Kelas 8 • {isLocalMode ? 'Mode Offline / Lokal' : 'Mode Cloud Connected'}
</p>
</div>
</div>
{/* Desktop Navigation */}
{loginUser && (
<nav className="hidden md:flex items-center gap-1">
{loginUser.role === 'admin' ? (
<>
<button
onClick={() => setActiveTab('admin-panel')}
className={`px-3 py-1.5 rounded-lg text-sm font-semibold transition flex items-center gap-1.5 ${activeTab === 'admin-panel' ? 'bg-white/20 text-white shadow-inner' : 'text-indigo-100 hover:bg-white/10'}`}
>
<Users className="h-4 w-4" /> Manajemen Siswa
</button>
<button
onClick={() => setActiveTab('materi')}
className={`px-3 py-1.5 rounded-lg text-sm font-semibold transition ${activeTab === 'materi' ? 'bg-white/20 text-white shadow-inner' : 'text-indigo-100 hover:bg-white/10'}`}
>
Preview Materi
</button>
<button
onClick={() => setActiveTab('playground')}
className={`px-3 py-1.5 rounded-lg text-sm font-semibold transition ${activeTab === 'playground' ? 'bg-white/20 text-white shadow-inner' : 'text-indigo-100 hover:bg-white/10'}`}
>
Playground
</button>
</>
) : (
<>
<button
onClick={() => setActiveTab('dashboard')}
className={`px-3 py-1.5 rounded-lg text-sm font-semibold transition ${activeTab === 'dashboard' ? 'bg-white/20 text-white shadow-inner' : 'text-indigo-100 hover:bg-white/10'}`}
>
Dasbor
</button>
<button
onClick={() => setActiveTab('materi')}
className={`px-3 py-1.5 rounded-lg text-sm font-semibold transition ${activeTab === 'materi' ? 'bg-white/20 text-white shadow-inner' : 'text-indigo-100 hover:bg-white/10'}`}
>
10 Pertemuan
</button>
<button
onClick={() => setActiveTab('playground')}
className={`px-3 py-1.5 rounded-lg text-sm font-semibold transition ${activeTab === 'playground' ? 'bg-white/20 text-white shadow-inner' : 'text-indigo-100 hover:bg-white/10'}`}
>
Playground Relasi
</button>
<button
onClick={() => setActiveTab('tes')}
className={`px-3 py-1.5 rounded-lg text-sm font-semibold transition ${activeTab.startsWith('tes') ? 'bg-white/20 text-white shadow-inner' : 'text-indigo-100 hover:bg-white/10'}`}
>
Evaluasi & Tes
</button>
</>
)}
{/* User badge and logout button */}
<div className="ml-4 pl-4 border-l border-white/20 flex items-center gap-3">
<div className="text-right">
<span className="block text-xs font-bold leading-none">{loginUser.name}</span>
<span className="text-[10px] text-indigo-200 capitalize font-medium">{loginUser.role}</span>
</div>
<button
onClick={handleLogout}
className="p-1.5 rounded-lg hover:bg-rose-600/30 text-rose-200 hover:text-white transition"
title="Logout"
>
<LogOut className="h-4 w-4" />
</button>
</div>
</nav>
)}
{/* Mobile Menu Toggle */}
{loginUser && (
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden p-2 rounded-lg hover:bg-white/10 transition"
>
{mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</button>
)}
</div>
</header>
{/* Mobile Drawer */}
{mobileMenuOpen && loginUser && (
<div className="md:hidden bg-indigo-900 text-white border-t border-indigo-800 shadow-lg px-4 py-3 space-y-2 animate-fade-in">
{loginUser.role === 'admin' ? (
<>
<button
onClick={() => { setActiveTab('admin-panel'); setMobileMenuOpen(false); }}
className={`w-full text-left py-2 px-3 rounded-lg text-sm font-semibold block ${activeTab === 'admin-panel' ? 'bg-indigo-800' : ''}`}
>
Manajemen Siswa
</button>
<button
onClick={() => { setActiveTab('materi'); setMobileMenuOpen(false); }}
className={`w-full text-left py-2 px-3 rounded-lg text-sm font-semibold block ${activeTab === 'materi' ? 'bg-indigo-800' : ''}`}
>
Preview Materi
</button>
<button
onClick={() => { setActiveTab('playground'); setMobileMenuOpen(false); }}
className={`w-full text-left py-2 px-3 rounded-lg text-sm font-semibold block ${activeTab === 'playground' ? 'bg-indigo-800' : ''}`}
>
Playground Relasi
</button>
</>
) : (
<>
<button
onClick={() => { setActiveTab('dashboard'); setMobileMenuOpen(false); }}
className={`w-full text-left py-2 px-3 rounded-lg text-sm font-semibold block ${activeTab === 'dashboard' ? 'bg-indigo-800' : ''}`}
>
Dasbor Utama
</button>
<button
onClick={() => { setActiveTab('materi'); setMobileMenuOpen(false); }}
className={`w-full text-left py-2 px-3 rounded-lg text-sm font-semibold block ${activeTab === 'materi' ? 'bg-indigo-800' : ''}`}
>
Materi Pembelajaran
</button>
<button
onClick={() => { setActiveTab('playground'); setMobileMenuOpen(false); }}
className={`w-full text-left py-2 px-3 rounded-lg text-sm font-semibold block ${activeTab === 'playground' ? 'bg-indigo-800' : ''}`}
>
Playground Relasi (Interaktif)
</button>
<button
onClick={() => { setActiveTab('tes'); setMobileMenuOpen(false); }}
className={`w-full text-left py-2 px-3 rounded-lg text-sm font-semibold block ${activeTab.startsWith('tes') ? 'bg-indigo-800' : ''}`}
>
Evaluasi & Tes
</button>
</>
)}
<div className="border-t border-indigo-800 pt-2 flex items-center justify-between">
<div>
<span className="block text-xs font-bold leading-tight">{loginUser.name}</span>
<span className="text-[10px] text-indigo-300 capitalize">{loginUser.role}</span>
</div>
<button
onClick={handleLogout}
className="py-1 px-2 bg-rose-700/50 hover:bg-rose-600 rounded text-xs flex items-center gap-1.5 transition"
>
<LogOut className="h-3 w-3" /> Keluar
</button>
</div>
</div>
)}
{/* CORE WRAPPER */}
<main className="flex-1 max-w-7xl w-full mx-auto p-4 md:py-6 grid grid-cols-1 gap-6">
{/* ==========================================
TAB: LOGIN SCREEN
========================================== */}
{activeTab === 'login' && (
<div className="max-w-md w-full mx-auto my-auto py-8 animate-fade-in">
<div className="bg-white rounded-3xl border shadow-xl p-6 md:p-8 space-y-6">
{/* Header Title */}
<div className="text-center space-y-2">
<div className="inline-block bg-indigo-100 p-3 rounded-2xl text-indigo-600">
<BookMarked className="h-8 w-8" />
</div>
<h2 className="text-xl font-extrabold text-slate-900 tracking-tight">Portal Belajar MATH-LAB</h2>
<p className="text-xs text-slate-500 max-w-xs mx-auto">Masuk untuk menyimpan progres belajar dan mengakses materi Relasi & Fungsi Kelas 8.</p>
</div>
{/* Role Selector Tabs */}
<div className="grid grid-cols-2 p-1 bg-slate-100 rounded-xl">
<button
type="button"
onClick={() => { setLoginRole('siswa'); setLoginError(''); }}
className={`py-2 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-1.5 ${
loginRole === 'siswa'
? 'bg-white text-indigo-700 shadow-sm'
: 'text-slate-500 hover:text-slate-800'
}`}
>
<User className="h-3.5 w-3.5" /> Sebagai Siswa
</button>
<button
type="button"
onClick={() => { setLoginRole('admin'); setLoginError(''); }}
className={`py-2 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-1.5 ${
loginRole === 'admin'
? 'bg-white text-indigo-700 shadow-sm'
: 'text-slate-500 hover:text-slate-800'
}`}
>
<Shield className="h-3.5 w-3.5" /> Sebagai Admin
</button>
</div>
{/* Login Error Notification */}
{loginError && (
<div className="bg-rose-50 border border-rose-100 rounded-xl p-3 flex items-start gap-2.5">
<AlertCircle className="h-4 w-4 text-rose-600 shrink-0 mt-0.5" />
<p className="text-xs text-rose-800 font-medium leading-normal">{loginError}</p>
</div>
)}
{/* Input Form */}
<form onSubmit={handleLogin} className="space-y-4">
<div className="space-y-1.5">
<label className="text-xs font-bold text-slate-700">Username</label>
<div className="relative">
<User className="absolute left-3 top-3 h-4 w-4 text-slate-400" />
<input
type="text"
placeholder={loginRole === 'admin' ? 'Contoh: admin' : 'Masukkan username siswa'}
value={inputUsername}
onChange={(e) => setInputUsername(e.target.value)}
className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
/>
</div>
</div>
<div className="space-y-1.5">
<label className="text-xs font-bold text-slate-700">Password</label>
<div className="relative">
<Lock className="absolute left-3 top-3 h-4 w-4 text-slate-400" />
<input
type={showPassword ? 'text' : 'password'}
placeholder="Masukkan password anda"
value={inputPassword}
onChange={(e) => setInputPassword(e.target.value)}
className="w-full pl-9 pr-10 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-3.5 text-slate-400 hover:text-slate-600"
>
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</button>
</div>
</div>
<button
type="submit"
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-extrabold text-xs py-3 rounded-xl transition shadow-md hover:shadow-lg flex items-center justify-center gap-1"
>
Masuk Sekarang <ChevronRight className="h-4 w-4" />
</button>
</form>
{/* Credential Reference for Ease of Testing */}
<div className="bg-slate-50 border rounded-2xl p-4 text-xs space-y-2">
<span className="font-bold text-slate-700 block">🔑 Akun Default untuk Pengujian:</span>
<div className="grid grid-cols-1 gap-1 text-[11px] text-slate-600 font-mono">
<div>• Admin: <span className="font-bold text-indigo-700">admin</span> / Password: <span className="font-bold text-indigo-700">admin123</span></div>
<div>• Siswa: <span className="font-bold text-indigo-700">siswa1</span> / Password: <span className="font-bold text-indigo-700">123</span></div>
</div>
<p className="text-[10px] text-slate-400 italic">Admin dapat menambahkan akun siswa baru melalui dashboard admin.</p>
</div>
</div>
</div>
)}
{/* ==========================================
TAB: ADMIN PANEL (MANAGE STUDENTS)
========================================== */}
{activeTab === 'admin-panel' && loginUser && loginUser.role === 'admin' && (
<div className="space-y-6 animate-fade-in">
{/* Header Admin */}
<div className="bg-slate-900 text-white rounded-3xl p-6 shadow-lg flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div className="space-y-1">
<div className="flex items-center gap-2">
<Shield className="h-5 w-5 text-indigo-400" />
<span className="text-xs bg-indigo-500/20 text-indigo-300 font-bold px-2 py-0.5 rounded uppercase">Role: Guru Admin</span>
</div>
<h2 className="text-xl md:text-2xl font-black">Dashboard Manajemen Siswa</h2>
<p className="text-slate-400 text-xs">Pantau progres belajar siswa Anda secara real-time dan kelola akun kelas di bawah ini.</p>
</div>
<div className="bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 text-center w-full md:w-auto">
<span className="block text-[10px] text-slate-300 uppercase font-semibold">Total Terdaftar</span>
<span className="text-xl font-black">{allStudents.length} Siswa</span>
</div>
</div>
{isLocalMode && (
<div className="bg-amber-50 border border-amber-200 text-amber-900 rounded-xl p-3.5 text-xs flex items-start gap-2">
<AlertCircle className="h-4 w-4 text-amber-600 shrink-0 mt-0.5" />
<div>
<p className="font-bold">Aplikasi Berjalan dalam Mode Sandbox / Lokal</p>
<p className="text-[11px] mt-0.5">Karena dijalankan secara eksternal (di luar platform), database beralih menggunakan memori browser lokal (Local Storage) agar tidak crash. Anda tetap bisa mendaftarkan siswa dan menguji aplikasi secara penuh.</p>
</div>
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
{/* Form Tambah Siswa Baru */}
<div className="lg:col-span-4 bg-white rounded-2xl border shadow-sm p-4 md:p-6 space-y-4">
<h3 className="font-extrabold text-sm text-slate-900 flex items-center gap-1.5 pb-2 border-b">
<UserPlus className="h-4 w-4 text-indigo-600" /> Daftarkan Siswa Baru
</h3>
{adminMessage.text && (
<div className={`p-3 rounded-xl text-xs flex gap-1.5 items-start border ${
adminMessage.type === 'success'
? 'bg-emerald-50 border-emerald-100 text-emerald-800'
: 'bg-rose-50 border-rose-100 text-rose-800'
}`}>
{adminMessage.type === 'success' ? <CheckCircle className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" /> : <AlertCircle className="h-4 w-4 text-rose-600 shrink-0 mt-0.5" />}
<span className="font-medium">{adminMessage.text}</span>
</div>
)}
<form onSubmit={handleAddSiswa} className="space-y-3.5">
<div className="space-y-1">
<label className="text-xs font-bold text-slate-600">Nama Lengkap Siswa</label>
<input
type="text"
placeholder="Contoh: Budi Santoso"
value={newSiswaName}
onChange={(e) => setNewSiswaName(e.target.value)}
className="w-full px-3 py-2 rounded-lg border border-slate-200 text-xs focus:ring-1 focus:ring-indigo-500"
/>
</div>
<div className="space-y-1">
<label className="text-xs font-bold text-slate-600">Username Siswa</label>
<input
type="text"
placeholder="Contoh: budi8"
value={newSiswaUsername}
onChange={(e) => setNewSiswaUsername(e.target.value)}
className="w-full px-3 py-2 rounded-lg border border-slate-200 text-xs focus:ring-1 focus:ring-indigo-500"
/>
</div>
<div className="space-y-1">
<label className="text-xs font-bold text-slate-600">Password Akun</label>
<input
type="text"
placeholder="Tentukan password awal"
value={newSiswaPassword}
onChange={(e) => setNewSiswaPassword(e.target.value)}
className="w-full px-3 py-2 rounded-lg border border-slate-200 text-xs focus:ring-1 focus:ring-indigo-500"
/>
</div>
<button
type="submit"
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 rounded-xl text-xs transition flex items-center justify-center gap-1"
>
<UserPlus className="h-4 w-4" /> Daftarkan Siswa
</button>
</form>
</div>
{/* Tabel Progres Nilai Siswa */}
<div className="lg:col-span-8 bg-white rounded-2xl border shadow-sm p-4 md:p-6 space-y-4 overflow-hidden">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 pb-2 border-b">
<h3 className="font-extrabold text-sm text-slate-900 flex items-center gap-1.5">
<Users className="h-4 w-4 text-indigo-600" /> Daftar & Nilai Siswa Kelas
</h3>
{/* Search Input */}
<div className="relative w-full sm:w-64">
<Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-slate-400" />
<input
type="text"
placeholder="Cari siswa..."
value={adminSearchQuery}
onChange={(e) => setAdminSearchQuery(e.target.value)}
className="w-full pl-8 pr-3 py-1.5 rounded-lg border border-slate-200 text-xs focus:ring-1 focus:ring-indigo-500"
/>
</div>
</div>
{filteredStudents.length === 0 ? (
<div className="text-center py-12 text-slate-400 text-xs">
Tidak ada data siswa ditemukan.
</div>
) : (
<div className="overflow-x-auto">
<table className="w-full text-left text-xs border-collapse min-w-[600px]">
<thead>
<tr className="bg-slate-50 text-slate-600 font-bold border-b border-slate-200">
<th className="p-3">Nama (Username)</th>
<th className="p-3">Progres Bab</th>
<th className="p-3 text-center">Kuis A</th>
<th className="p-3 text-center">Kuis B</th>
<th className="p-3 text-center">Kuis C</th>
<th className="p-3 text-center">Kuis D</th>
<th className="p-3 text-center bg-indigo-50/50">Sumatif</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-100">
{filteredStudents.map((siswa) => {
const completedCount = siswa.completedPertemuan?.length || 0;
return (
<tr key={siswa.id} className="hover:bg-slate-50/50 transition">
<td className="p-3">
<div className="font-semibold text-slate-900">{siswa.name}</div>
<div className="text-[10px] text-slate-400 font-mono">User: {siswa.username} | Pass: {siswa.password}</div>
</td>
<td className="p-3">
<div className="flex items-center gap-1.5">
<div className="w-16 bg-slate-100 h-1.5 rounded-full overflow-hidden">
<div
className="bg-emerald-500 h-full"
style={{ width: `${(completedCount / 10) * 100}%` }}
></div>
</div>
<span className="text-[10px] text-slate-500 font-mono font-bold">{completedCount}/10</span>
</div>
</td>
<td className="p-3 text-center">
<span className={`font-mono font-bold px-1.5 py-0.5 rounded text-[10px] ${siswa.scores?.A !== undefined && siswa.scores?.A !== null ? 'bg-indigo-100 text-indigo-800' : 'bg-slate-100 text-slate-400'}`}>
{siswa.scores?.A !== undefined && siswa.scores?.A !== null ? `${siswa.scores.A}` : '-'}
</span>
</td>
<td className="p-3 text-center">
<span className={`font-mono font-bold px-1.5 py-0.5 rounded text-[10px] ${siswa.scores?.B !== undefined && siswa.scores?.B !== null ? 'bg-indigo-100 text-indigo-800' : 'bg-slate-100 text-slate-400'}`}>
{siswa.scores?.B !== undefined && siswa.scores?.B !== null ? `${siswa.scores.B}` : '-'}
</span>
</td>
<td className="p-3 text-center">
<span className={`font-mono font-bold px-1.5 py-0.5 rounded text-[10px] ${siswa.scores?.C !== undefined && siswa.scores?.C !== null ? 'bg-indigo-100 text-indigo-800' : 'bg-slate-100 text-slate-400'}`}>
{siswa.scores?.C !== undefined && siswa.scores?.C !== null ? `${siswa.scores.C}` : '-'}
</span>
</td>
<td className="p-3 text-center">
<span className={`font-mono font-bold px-1.5 py-0.5 rounded text-[10px] ${siswa.scores?.D !== undefined && siswa.scores?.D !== null ? 'bg-indigo-100 text-indigo-800' : 'bg-slate-100 text-slate-400'}`}>
{siswa.scores?.D !== undefined && siswa.scores?.D !== null ? `${siswa.scores.D}` : '-'}
</span>
</td>
<td className="p-3 text-center bg-indigo-50/30">
<span className={`font-mono font-extrabold px-2 py-0.5 rounded text-[11px] ${siswa.scores?.SUMATIF !== undefined && siswa.scores?.SUMATIF !== null ? 'bg-amber-100 text-amber-900 border border-amber-300' : 'bg-slate-100 text-slate-400'}`}>
{siswa.scores?.SUMATIF !== undefined && siswa.scores?.SUMATIF !== null ? `${siswa.scores.SUMATIF}%` : '-'}
</span>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
</div>
</div>
)}
{/* ==========================================
TAB: STUDENT DASHBOARD
========================================== */}
{activeTab === 'dashboard' && loginUser && (
<div className="space-y-6 animate-fade-in">
{/* Selamat Datang Card */}
<div className="bg-gradient-to-r from-violet-600 to-indigo-600 rounded-3xl p-6 text-white shadow-lg flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div className="space-y-1.5">
<span className="bg-indigo-400/30 border border-indigo-300/20 text-indigo-100 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider">Dashboard Siswa</span>
<h2 className="text-xl md:text-2xl font-extrabold">Selamat Belajar, {loginUser.name}! 👋</h2>
<p className="text-indigo-100 text-xs md:text-sm max-w-xl">
Ayo tuntaskan 10 pertemuan dan kuis interaktif di bawah. Progres belajar Anda tersimpan secara otomatis dan dipantau oleh Guru Kelas Anda.
</p>
</div>
<div className="bg-white/20 px-4 py-2.5 rounded-xl border border-white/20 text-center w-full md:w-auto">
<span className="block text-[10px] text-indigo-200 uppercase font-semibold">Total Progres</span>
<span className="text-2xl font-black">{getOverallProgress()}%</span>
</div>
</div>
{/* Progress Stats */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div className="bg-white p-4 rounded-xl border shadow-sm flex items-center gap-3">
<div className="p-2.5 bg-indigo-50 rounded-lg text-indigo-600">
<BookOpen className="h-5 w-5" />
</div>
<div>
<span className="block text-xs text-slate-500">Pertemuan Selesai</span>
<span className="text-sm font-bold">{(loginUser.completedPertemuan || [1]).length} / 10 Pertemuan</span>
</div>
</div>
<div className="bg-white p-4 rounded-xl border shadow-sm flex items-center gap-3">
<div className="p-2.5 bg-emerald-50 rounded-lg text-emerald-600">
<Award className="h-5 w-5" />
</div>
<div>
<span className="block text-xs text-slate-500">Kuis Terselesaikan</span>
<span className="text-sm font-bold">
{Object.values(loginUser.scores || {}).filter(v => v !== null && v !== undefined).length} / 5 Evaluasi
</span>
</div>
</div>
<div className="bg-white p-4 rounded-xl border shadow-sm flex items-center gap-3">
<div className="p-2.5 bg-amber-50 rounded-lg text-amber-600">
<TrendingUp className="h-5 w-5" />
</div>
<div>
<span className="block text-xs text-slate-500">Nilai Tes Sumatif</span>
<span className="text-sm font-bold">
{loginUser.scores?.SUMATIF !== null && loginUser.scores?.SUMATIF !== undefined
? `${loginUser.scores.SUMATIF}%`
: "Belum Ujian"}
</span>
</div>
</div>
</div>
{/* Peta Kurikulum Visual */}
<div className="bg-white rounded-xl border shadow-sm p-4 md:p-6">
<h3 className="text-sm font-bold text-slate-900 mb-4 flex items-center gap-1.5">
<Layers className="h-4 w-4 text-indigo-600" /> Alur Pembelajaran Bab 4
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
{/* Sub-Bab A */}
<div className="border border-indigo-100 rounded-xl p-3 bg-indigo-50/20 flex flex-col justify-between">
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-bold text-indigo-800">Sub-Bab A: Himpunan</span>
<span className="text-[10px] bg-indigo-100 text-indigo-800 px-1.5 py-0.5 rounded font-mono">P 1-2</span>
</div>
<p className="text-[11px] text-slate-500 mb-3">Mempelajari konsep dasar pembentuk relasi dan cara menyatakannya.</p>
</div>
<button
onClick={() => { setActiveTab('materi'); setSelectedPertemuan(1); }}
className="w-full text-center bg-indigo-600 hover:bg-indigo-700 text-white py-1.5 rounded-lg text-xs font-bold transition"
>
Buka Pertemuan 1
</button>
</div>
{/* Sub-Bab B */}
<div className="border border-indigo-100 rounded-xl p-3 bg-indigo-50/20 flex flex-col justify-between">
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-bold text-indigo-800">Sub-Bab B: Relasi</span>
<span className="text-[10px] bg-indigo-100 text-indigo-800 px-1.5 py-0.5 rounded font-mono">P 3-4</span>
</div>
<p className="text-[11px] text-slate-500 mb-3">Memetakan hubungan dua kelompok objek matematika dengan diagram kartesius.</p>
</div>
<button
onClick={() => { setActiveTab('materi'); setSelectedPertemuan(3); }}
className="w-full text-center bg-indigo-600 hover:bg-indigo-700 text-white py-1.5 rounded-lg text-xs font-bold transition"
>
Buka Pertemuan 3
</button>
</div>
{/* Sub-Bab C */}
<div className="border border-indigo-100 rounded-xl p-3 bg-indigo-50/20 flex flex-col justify-between">
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-bold text-indigo-800">Sub-Bab C: Fungsi</span>
<span className="text-[10px] bg-indigo-100 text-indigo-800 px-1.5 py-0.5 rounded font-mono">P 5-7</span>
</div>
<p className="text-[11px] text-slate-500 mb-3">Relasi teratur dengan aturan tepat satu pasangan dan cara menghitung rumusnya.</p>
</div>
<button
onClick={() => { setActiveTab('materi'); setSelectedPertemuan(5); }}
className="w-full text-center bg-indigo-600 hover:bg-indigo-700 text-white py-1.5 rounded-lg text-xs font-bold transition"
>
Buka Pertemuan 5
</button>
</div>
{/* Sub-Bab D */}
<div className="border border-indigo-100 rounded-xl p-3 bg-indigo-50/20 flex flex-col justify-between">
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-bold text-indigo-800">Sub-Bab D: Korespondensi</span>
<span className="text-[10px] bg-indigo-100 text-indigo-800 px-1.5 py-0.5 rounded font-mono">P 8-10</span>
</div>
<p className="text-[11px] text-slate-500 mb-3">Pasangan satu-lawan-satu seimbang sempurna menggunakan rumus faktorial.</p>
</div>
<button
onClick={() => { setActiveTab('materi'); setSelectedPertemuan(8); }}
className="w-full text-center bg-indigo-600 hover:bg-indigo-700 text-white py-1.5 rounded-lg text-xs font-bold transition"
>
Buka Pertemuan 8
</button>
</div>
</div>
</div>
</div>
)}
{/* ==========================================
TAB: MATERI PEMBELAJARAN (10 PERTEMUAN)
========================================== */}
{activeTab === 'materi' && (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 animate-fade-in">
{/* Sidebar Daftar Pertemuan */}
<div className="lg:col-span-4 space-y-3">
<div className="bg-white p-4 rounded-xl border shadow-sm">
<h3 className="font-extrabold text-slate-900 text-sm mb-3 flex items-center gap-1.5">
<BookOpen className="h-4 w-4 text-indigo-600" /> Daftar 10 Pertemuan
</h3>
<div className="space-y-2 max-h-[480px] overflow-y-auto pr-1">
{PERTEMUAN_DATA.map((p) => {
const isCompleted = loginUser?.completedPertemuan?.includes(p.id);
const isActive = selectedPertemuan === p.id;
return (
<button
key={p.id}
onClick={() => setSelectedPertemuan(p.id)}
className={`w-full text-left p-2.5 rounded-lg text-xs font-medium border flex items-center justify-between transition ${
isActive
? 'bg-indigo-600 text-white border-indigo-600 shadow-md'
: 'bg-white text-slate-700 border-slate-200 hover:bg-slate-50'
}`}
>
<div className="truncate pr-2">
<span className={`inline-block font-mono text-[9px] uppercase px-1.5 py-0.5 rounded mr-1.5 ${isActive ? 'bg-white/25 text-white' : 'bg-indigo-50 text-indigo-700'}`}>
Sub-Bab {p.subBab}
</span>
{p.title}
</div>
{isCompleted && (
<CheckCircle className={`h-4 w-4 shrink-0 ${isActive ? 'text-white' : 'text-emerald-500'}`} />
)}
</button>
);
})}
</div>
</div>
</div>
{/* Panel Konten Utama Pertemuan */}
<div className="lg:col-span-8 bg-white rounded-xl border shadow-sm p-4 md:p-6 flex flex-col justify-between min-h-[450px]">
<div>
<div className="border-b pb-3 mb-4">
<div className="flex items-center gap-2 text-xs text-indigo-600 font-bold mb-1">
<span>BAB 4: Relasi dan Fungsi</span>
<ChevronRight className="h-3 w-3" />
<span>Sub-Bab {PERTEMUAN_DATA[selectedPertemuan - 1].subBab}</span>
</div>
<h2 className="text-lg md:text-xl font-black text-slate-900">
{PERTEMUAN_DATA[selectedPertemuan - 1].title}
</h2>
<p className="text-xs text-slate-500 mt-1.5">
{PERTEMUAN_DATA[selectedPertemuan - 1].deskripsi}
</p>
</div>
<div className="prose max-w-none text-slate-800">
{PERTEMUAN_DATA[selectedPertemuan - 1].konten}
</div>
</div>
{/* Tombol Navigasi Pembelajaran */}
<div className="border-t pt-4 mt-6 flex justify-between items-center">
<button
disabled={selectedPertemuan === 1}
onClick={() => setSelectedPertemuan(selectedPertemuan - 1)}
className="px-3.5 py-1.5 rounded-lg text-xs font-bold border hover:bg-slate-50 disabled:opacity-50 disabled:pointer-events-none transition"
>
Sebelumnya
</button>
<button
onClick={() => completeCurrentPertemuan(selectedPertemuan)}
className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg text-xs font-bold flex items-center gap-1 shadow-sm transition"
>
Selesai & Lanjut <ChevronRight className="h-4 w-4" />
</button>
</div>
</div>
</div>
)}
{/* ==========================================
TAB: PLAYGROUND SIMULATOR (RELASI & FUNGSI)
========================================== */}
{activeTab === 'playground' && (
<div className="space-y-6 animate-fade-in">
<div className="bg-white rounded-xl border shadow-sm p-4 md:p-6">
<h2 className="text-lg font-black text-slate-900 mb-1 flex items-center gap-2">
<Play className="h-5 w-5 text-indigo-600 fill-indigo-600" /> Playground Relasi Interaktif
</h2>
<p className="text-xs text-slate-500 mb-6">
Hubungkan anggota Himpunan A ke Himpunan B untuk bereksperimen. Program otomatis mendeteksi apakah hubunganmu merupakan Relasi Biasa, Fungsi, atau Korespondensi Satu-satu!
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
{/* Kolom Himpunan A */}
<div className="flex flex-col items-center border border-indigo-100 rounded-2xl p-4 bg-indigo-50/10">
<span className="font-bold text-indigo-800 text-xs mb-3">Himpunan A (Domain)</span>
<div className="space-y-3 w-full">
{playgroundSetA.map((element) => {
const isConnecting = activeConnectingFrom === element;
return (
<div key={element} className="flex items-center justify-between bg-white p-3 rounded-xl border shadow-xs">
<span className="font-mono font-bold text-slate-800 text-sm">Anggota {element}</span>
<button
onClick={() => setActiveConnectingFrom(isConnecting ? null : element)}
className={`px-3 py-1 rounded-lg text-[11px] font-bold transition ${
isConnecting
? 'bg-amber-500 text-white'
: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200'
}`}
>
{isConnecting ? 'Memilih...' : 'Hubungkan'}
</button>
</div>
);
})}
</div>
</div>
{/* Garis / Koneksi Tengah */}
<div className="flex flex-col items-center bg-slate-50 p-4 rounded-xl border border-dashed border-slate-300">
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Relasi Terbentuk</span>
{playgroundPairs.length === 0 ? (
<div className="text-center py-6">
<HelpCircle className="h-8 w-8 text-slate-300 mx-auto mb-2" />
<p className="text-[11px] text-slate-400">Klik tombol "Hubungkan" pada anggota A lalu pilih tujuannya di B.</p>
</div>
) : (
<div className="w-full space-y-1.5 max-h-48 overflow-y-auto">
{playgroundPairs.map((pair, index) => (
<div key={index} className="flex items-center justify-between bg-white px-3 py-1 rounded border text-xs font-mono">
<span>{pair.from} → {pair.to}</span>
<button
onClick={() => handlePlaygroundPairToggle(pair.from, pair.to)}
className="text-rose-500 hover:text-rose-700 font-bold px-1"
>
Hapus
</button>
</div>
))}
</div>
)}
<button
onClick={() => setPlaygroundPairs([])}
className="mt-4 text-[10px] text-slate-500 hover:text-slate-800 flex items-center gap-1 transition"
>
<RotateCcw className="h-3 w-3" /> Reset Semua Hubungan
</button>
</div>
{/* Kolom Himpunan B */}
<div className="flex flex-col items-center border border-pink-100 rounded-2xl p-4 bg-pink-50/10">
<span className="font-bold text-pink-800 text-xs mb-3">Himpunan B (Kodomain)</span>
<div className="space-y-3 w-full">
{playgroundSetB.map((element) => {
const isValidTarget = activeConnectingFrom !== null;
return (
<div key={element} className="flex items-center justify-between bg-white p-3 rounded-xl border shadow-xs">
<span className="font-mono font-bold text-slate-800 text-sm">Anggota {element}</span>
<button
disabled={!isValidTarget}
onClick={() => handlePlaygroundPairToggle(activeConnectingFrom, element)}
className={`px-3 py-1 rounded-lg text-[11px] font-bold transition ${
isValidTarget
? 'bg-pink-100 text-pink-700 hover:bg-pink-200'
: 'bg-slate-100 text-slate-400 cursor-not-allowed'
}`}
>
Pilih Target
</button>
</div>
);
})}
</div>
</div>
</div>
{/* Panel Analisis */}
<div className="mt-8 bg-slate-900 text-white p-5 rounded-2xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
<div>
<span className="text-[10px] text-slate-400 uppercase font-bold tracking-wider">Hasil Analisis Relasi:</span>
<h4 className="text-base md:text-lg font-black text-amber-400 mt-1">
{analyzePlaygroundRelation()}
</h4>
</div>
<div className="text-xs text-slate-300 max-w-md">
Ingat: Fungsi mengharuskan setiap A memiliki tepat 1 cabang ke B. Korespondensi Satu-satu mengharuskan setiap A dan B memiliki tepat 1 cabang dan jumlah anggota A = B.
</div>
</div>
</div>
</div>
)}
{/* ==========================================
TAB: LIST EVALUASI & TES
========================================== */}
{activeTab === 'tes' && (
<div className="space-y-6 animate-fade-in">
<div className="bg-white rounded-xl border shadow-sm p-4 md:p-6">
<h2 className="text-lg font-black text-slate-900 mb-1">Evaluasi & Pengukuran Pemahaman</h2>
<p className="text-xs text-slate-500 mb-6">Uji pemahamanmu setelah membaca materi. Nilai Anda akan tersimpan langsung ke akun Anda.</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Kuis per Sub Bab A */}
<div className="border rounded-xl p-4 flex flex-col justify-between shadow-xs bg-indigo-50/10">
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-bold text-indigo-700">Sub-Bab A</span>
{loginUser?.scores?.A !== undefined && loginUser?.scores?.A !== null && (
<span className="text-xs bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded-full font-bold">Skor: {loginUser.scores.A}%</span>
)}
</div>
<h3 className="font-bold text-sm text-slate-900">Kuis Konsep Himpunan</h3>
<p className="text-xs text-slate-500 mt-1">3 Pertanyaan pilihan ganda seputar definisi himpunan formal dan himpunan bagian.</p>
</div>
<button
onClick={() => startQuiz("A")}
className="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold py-2 rounded-lg transition"
>
{loginUser?.scores?.A !== undefined && loginUser?.scores?.A !== null ? "Ulangi Kuis" : "Mulai Kuis"}
</button>
</div>
{/* Kuis per Sub Bab B */}
<div className="border rounded-xl p-4 flex flex-col justify-between shadow-xs bg-indigo-50/10">
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-bold text-indigo-700">Sub-Bab B</span>
{loginUser?.scores?.B !== undefined && loginUser?.scores?.B !== null && (
<span className="text-xs bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded-full font-bold">Skor: {loginUser.scores.B}%</span>
)}
</div>
<h3 className="font-bold text-sm text-slate-900">Kuis Relasi</h3>
<p className="text-xs text-slate-500 mt-1">2 Pertanyaan seputar penyajian relasi lewat diagram, koordinat Kartesius.</p>
</div>
<button
onClick={() => startQuiz("B")}
className="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold py-2 rounded-lg transition"
>
{loginUser?.scores?.B !== undefined && loginUser?.scores?.B !== null ? "Ulangi Kuis" : "Mulai Kuis"}
</button>
</div>
{/* Kuis per Sub Bab C */}
<div className="border rounded-xl p-4 flex flex-col justify-between shadow-xs bg-indigo-50/10">
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-bold text-indigo-700">Sub-Bab C</span>
{loginUser?.scores?.C !== undefined && loginUser?.scores?.C !== null && (
<span className="text-xs bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded-full font-bold">Skor: {loginUser.scores.C}%</span>
)}
</div>
<h3 className="font-bold text-sm text-slate-900">Kuis Fungsi / Pemetaan</h3>
<p className="text-xs text-slate-500 mt-1">3 Pertanyaan mendalam seputar formula f(x), mencari nilai x, dan diagram fungsi.</p>
</div>
<button
onClick={() => startQuiz("C")}
className="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold py-2 rounded-lg transition"
>
{loginUser?.scores?.C !== undefined && loginUser?.scores?.C !== null ? "Ulangi Kuis" : "Mulai Kuis"}
</button>
</div>
{/* Kuis per Sub Bab D */}
<div className="border rounded-xl p-4 flex flex-col justify-between shadow-xs bg-indigo-50/10">
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-bold text-indigo-700">Sub-Bab D</span>
{loginUser?.scores?.D !== undefined && loginUser?.scores?.D !== null && (
<span className="text-xs bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded-full font-bold">Skor: {loginUser.scores.D}%</span>
)}
</div>
<h3 className="font-bold text-sm text-slate-900">Kuis Korespondensi Satu-satu</h3>
<p className="text-xs text-slate-500 mt-1">2 Pertanyaan rumus faktorial dan pengenalan korespondensi seimbang.</p>
</div>
<button
onClick={() => startQuiz("D")}
className="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold py-2 rounded-lg transition"
>
{loginUser?.scores?.D !== undefined && loginUser?.scores?.D !== null ? "Ulangi Kuis" : "Mulai Kuis"}
</button>
</div>
</div>
{/* Tes Sumatif Final Banner */}
<div className="mt-8 bg-gradient-to-r from-purple-800 to-indigo-800 text-white rounded-2xl p-6 shadow-md flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div>
<span className="bg-amber-400 text-slate-900 text-[10px] font-black uppercase px-2 py-0.5 rounded-md">SUMATIF AKHIR</span>
<h3 className="text-lg font-black mt-1.5">Ujian Sumatif Komprehensif BAB 4</h3>
<p className="text-xs text-indigo-200 mt-1 max-w-xl">Mengujikan seluruh materi (10 pertanyaan acak terbaik). Selesaikan kuis ini untuk menguasai materi Relasi & Fungsi.</p>
</div>
<div className="w-full md:w-auto flex flex-col items-stretch gap-2 shrink-0">
{loginUser?.scores?.SUMATIF !== undefined && loginUser?.scores?.SUMATIF !== null && (
<div className="text-center text-xs font-bold bg-white/10 px-3 py-1 rounded">Skor Terakhir: {loginUser.scores.SUMATIF}%</div>
)}
<button
onClick={() => startQuiz("SUMATIF")}
className="bg-amber-400 hover:bg-amber-500 text-slate-900 text-xs font-extrabold px-6 py-2.5 rounded-xl transition shadow-md"
>
{loginUser?.scores?.SUMATIF !== undefined && loginUser?.scores?.SUMATIF !== null ? "Ulangi Ujian" : "Mulai Ujian Sumatif"}
</button>
</div>
</div>
</div>
</div>
)}
{/* ==========================================
TAB: ACTIVE QUIZ WORKSPACE
========================================== */}
{activeTab === 'tes-aktif' && (
<div className="max-w-2xl mx-auto w-full animate-fade-in">
<div className="bg-white rounded-2xl border shadow-md p-5 md:p-6">
{/* Quiz Header */}
<div className="flex justify-between items-center border-b pb-3 mb-5">
<div>
<h3 className="font-extrabold text-sm text-slate-800">
{QUIZ_DATA[activeQuizKey].title}
</h3>
<p className="text-[10px] text-slate-500 mt-0.5">Pertanyaan {quizStep + 1} dari {QUIZ_DATA[activeQuizKey].questions.length}</p>
</div>
<button
onClick={() => setActiveTab('tes')}
className="text-xs text-rose-500 hover:text-rose-700 font-bold"
>
Keluar Kuis
</button>
</div>
{/* Progress Bar */}
<div className="w-full bg-slate-100 h-1.5 rounded-full mb-6 overflow-hidden">
<div
className="bg-indigo-600 h-full transition-all duration-300"
style={{ width: `${((quizStep) / QUIZ_DATA[activeQuizKey].questions.length) * 100}%` }}
></div>
</div>
{/* Normal Quiz Flow */}
{!quizFinished ? (
<div className="space-y-6">
{/* Pertanyaan */}
<h4 className="font-bold text-slate-900 text-sm md:text-base leading-relaxed">
{QUIZ_DATA[activeQuizKey].questions[quizStep].question}
</h4>
{/* Pilihan Ganda */}
<div className="space-y-3">
{QUIZ_DATA[activeQuizKey].questions[quizStep].options.map((option, idx) => {
const isSelected = selectedOption === idx;
const isCorrect = idx === QUIZ_DATA[activeQuizKey].questions[quizStep].answer;
let optionStyle = "border-slate-200 bg-white hover:bg-slate-50";
if (showExplanation) {
if (isCorrect) {
optionStyle = "border-emerald-500 bg-emerald-50 text-emerald-900";
} else if (isSelected) {
optionStyle = "border-rose-500 bg-rose-50 text-rose-950";
} else {
optionStyle = "border-slate-100 bg-slate-50 text-slate-400";
}
} else if (isSelected) {
optionStyle = "border-indigo-600 bg-indigo-50/50 text-indigo-950";
}
return (
<button
key={idx}
disabled={showExplanation}
onClick={() => handleOptionSelect(idx)}
className={`w-full text-left p-3.5 rounded-xl border text-xs font-semibold flex items-start gap-3 transition ${optionStyle}`}
>
<span className={`h-5 w-5 shrink-0 rounded-full flex items-center justify-center border font-mono text-[10px] ${
isSelected ? 'bg-indigo-600 border-indigo-600 text-white' : 'border-slate-300 text-slate-500'
}`}>
{String.fromCharCode(65 + idx)}
</span>
<span className="flex-1 text-[11px] md:text-xs">{option}</span>
{showExplanation && isCorrect && <Check className="h-5 w-5 text-emerald-600 shrink-0" />}
</button>
);
})}
</div>
{/* Panel Penjelasan / Pembahasan */}
{showExplanation && (
<div className="bg-slate-50 border p-4 rounded-xl space-y-2 text-xs">
<div className="flex items-center gap-1.5 font-bold">
{selectedOption === QUIZ_DATA[activeQuizKey].questions[quizStep].answer ? (
<span className="text-emerald-600 flex items-center gap-1"><CheckCircle className="h-4 w-4" /> Jawabanmu Benar!</span>
) : (
<span className="text-rose-600 flex items-center gap-1"><AlertCircle className="h-4 w-4" /> Jawabanmu Kurang Tepat</span>
)}
</div>
<p className="text-slate-600 leading-relaxed">
<strong>Pembahasan:</strong> {QUIZ_DATA[activeQuizKey].questions[quizStep].explanation}
</p>
</div>
)}
{/* Tombol Aksi */}
<div className="flex justify-end mt-4">
{!showExplanation ? (
<button
disabled={selectedOption === null}
onClick={submitAnswer}
className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-6 py-2 rounded-xl text-xs transition disabled:opacity-50"
>
Kirim Jawaban
</button>
) : (
<button
onClick={nextQuestion}
className="bg-slate-900 hover:bg-slate-800 text-white font-bold px-6 py-2 rounded-xl text-xs transition"
>
{quizStep + 1 === QUIZ_DATA[activeQuizKey].questions.length ? 'Lihat Hasil' : 'Lanjut'}
</button>
)}
</div>
</div>
) : (
// Hasil Kuis Selesai
<div className="text-center py-6 space-y-6">
<div className="inline-block p-4 bg-indigo-50 text-indigo-600 rounded-full">
<Award className="h-12 w-12" />
</div>
<div className="space-y-1.5">
<h4 className="text-lg font-black text-slate-900">Kuis Selesai! 🎉</h4>
<p className="text-xs text-slate-500">Nilai yang kamu dapatkan untuk topik ini:</p>
<div className="text-4xl font-black text-indigo-600 my-4">
{Math.round((quizCorrectCount / QUIZ_DATA[activeQuizKey].questions.length) * 100)}%
</div>
<p className="text-xs text-slate-600">
Kamu berhasil menjawab <strong className="text-emerald-600">{quizCorrectCount}</strong> dari <strong className="text-slate-800">{QUIZ_DATA[activeQuizKey].questions.length}</strong> pertanyaan dengan benar.
</p>
</div>
<div className="pt-6 flex justify-center gap-3">
<button
onClick={() => startQuiz(activeQuizKey)}
className="border border-slate-200 hover:bg-slate-50 text-xs font-bold px-4 py-2 rounded-xl transition flex items-center gap-1.5"
>
<RotateCcw className="h-4 w-4" /> Ulangi
</button>
<button
onClick={() => setActiveTab('tes')}
className="bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold px-6 py-2 rounded-xl transition"
>
Kembali ke Evaluasi
</button>
</div>
</div>
)}
</div>
</div>
)}
</main>
{/* FOOTER */}
<footer className="bg-slate-900 text-slate-400 py-6 border-t border-slate-800 mt-12 text-xs">
<div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-3">
<p>© 2026 Kurikulum Merdeka - Matematika Kelas 8 Semester 2.</p>
<div className="flex gap-4">
<span className="hover:text-white transition cursor-pointer">Panduan Pengguna</span>
<span className="hover:text-white transition cursor-pointer">Bantuan</span>
</div>
</div>
</footer>
</div>
);
}
Blog
tes
Fitur RDM Madrasah
Akses lengkap untuk setiap peran pengguna dalam pengelolaan rapor digital madrasah
Akses Proktor (Admin)
Registrasi awal & pengelolaan data utama RDM
Dashboard RDM Madrasah
Syncron Profile Madrasah
Upload & Hapus Logo Madrasah/Yayasan
Mengatur Tahun Ajaran, Semester & Jenis Penilaian
Syncron & Tambah Mata Pelajaran
Mengatur Data Kelas
Mengatur Data Guru & Siswa
Pindah & Naik Kelas Siswa
Akses Data Alumni
Mengatur Data Ekstrakurikuler
Mengatur Data Cetak Rapor
Memantau Status Pengiriman Nilai
Mengatur Akses Akun Administrasi
Backup & Restore Data RDM
Catatan: Akses Staf hampir sama dengan Proktor, kecuali syncron profile, logo, pengaturan dan backup. Akses Kamad & Wakakur bersifat pemantauan saja.
Keunggulan RDM
Mengapa memilih aplikasi RDM untuk madrasah Anda?
Penilaian Berkelanjutan
Melakukan penilaian secara berkelanjutan tanpa menghapus data nilai sebelumnya
Backup & Restore
Data RDM dapat dibackup dan restore dengan mudah kapan saja
Barcode & Watermark
Cetak rapor dengan watermark & barcode, tanpa perlu kertas khusus
Testimoni Pengguna
Apa kata mereka yang sudah menggunakan RDM?
"Aplikasi RDM sangat membantu madrasah kami dalam mengelola rapor digital. Fitur cetak rapor dengan watermark sangat praktis!"
AS
Ahmad Syafii
Proktor — MTs Nurul Huda
"Sebagai wali kelas, saya sangat terbantu dengan fitur cetak rapor yang lengkap. Proses naik kelas juga mudah dilakukan."
SH
Siti Halimah
Wali Kelas — MI Al-Ikhlas
"Gratis dan fiturnya lengkap! Backup data juga mudah. Sangat direkomendasikan untuk semua madrasah."
MR
M. Ridwan
Kamad — MA Darul Ulum
FORMULIR PENDAFTARAN HOSTING
Menu
Formulir Pendaftaran Hosting RDM
Solusi Hosting Terbaik untuk Madrasah Anda
Informasi Pembayaran
Konfirmasi pembayaran melalui WhatsApp:
085960038113
Menu
No. Rekening Pembayaran
386501014079537
4930526938
1630006586120
7165529148
Metode pembayaran qris :
Silahkan klik tombol konfirmasi pembayaran di bawah jika sudah melakukan pembayaran
Copyright © 2026 – www.madrasahweb.com
expired
ppdbmtselqodar
How Many Times to Brush in Day
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vel dolor ut velit euismod condimentum.
Sed ut libero ut massa imperdiet fringilla a quis nisi.
Proin ac velit ultrices, tempus velit bibendum, porta ipsum.
Aliquam dapibus purus at vulputate ultricies.
Nunc sit amet mi sit amet purus tincidunt tincidunt et sit amet ex.
Outstanding Dental Care
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel dolor ut velit euismod condimentum. Sed ut libero ut massa imperdiet fringilla a quis nisi. Proin ac velit ultrices, tempus velit bibendum, porta ipsum. Aliquam dapibus purus at vulputate ultricies. Nunc sit amet mi sit amet purus tincidunt tincidunt et sit amet ex.Steps to Prevent Dental Caries
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel dolor ut velit euismod condimentum. Sed ut libero ut massa imperdiet fringilla a quis nisi. Proin ac velit ultrices, tempus velit bibendum, porta ipsum. Aliquam dapibus purus at vulputate ultricies. Nunc sit amet mi sit amet purus tincidunt tincidunt et sit amet ex.Hello world!
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!