Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 9
IPA
SIFAT FISIKA DAN KIMIA, - 4. menjelaskan faktor-faktor yang memengaruhi pembentukan tanah. 5. mengidentifikasi organisme-organisme tanah.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPA Kelas 9: Bab 9 - Faktor & Organisme Tanah (TP 4 & 5) 🐛</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fefce8;
background-image: radial-gradient(#fef08a 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: #ca8a04 !important; color: white !important; border-bottom-color: #854d0e !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.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 class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-yellow-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-yellow-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="bug" 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-yellow-800 uppercase tracking-widest">IPA Kelas 9 - Bab 9: Bagian 2 (Modul TP 4 & 5)</span>
<span id="progress-text" class="text-xs font-black text-white bg-yellow-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-amber-400 via-yellow-500 to-lime-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-yellow-100 text-yellow-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">
Faktor & <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-600 to-amber-700">Organisme Tanah</span> 🐛
</h1>
<div class="w-full max-w-lg h-48 rounded-3xl mx-auto shadow-lg border-4 border-white bg-yellow-600 flex items-center justify-center text-white text-6xl">
🪱 🧫 🔬
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-yellow-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-yellow-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-yellow-500"></i> Alur Pembelajaran Bertahap:</h3>
<ol class="space-y-2 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li><b class="text-yellow-800">TP 4:</b> Faktor-Faktor Pembentukan Tanah → <i>Kuis Otomatis Tak Terhingga (TP 4)</i></li>
<li><b class="text-yellow-800">TP 5:</b> Mengidentifikasi Organisme Tanah → <i>Kuis Otomatis Tak Terhingga (TP 5)</i></li>
<li><b>Battle Panel Interaktif (3 Kelompok) & Ujian Akhir (LMS)</b></li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Tekan "Selanjutnya" untuk mulai mempelajari TP 4! 👇</p>
</div>
</div>
<!-- Slide 2: Materi TP 4 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-amber-100 text-amber-800 font-black text-sm uppercase">Modul 4</span>
<h2 class="text-4xl font-black text-amber-900 mt-2">TP 4: Faktor-Faktor Pembentukan Tanah ⛰️</h2>
<p class="text-lg font-bold text-slate-500 mt-1">5 Faktor Utama yang Memengaruhi Laju dan Hasil Pelapukan Tanah</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md space-y-4">
<div class="grid grid-cols-1 md:grid-cols-5 gap-3 text-center text-sm font-bold">
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">🌤️</span>
<h5 class="text-amber-900 font-black">1. Iklim</h5>
<p class="text-xs text-slate-600">Suhu & curah hujan mempercepat proses pelapukan kimia & fisika.</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">🐛</span>
<h5 class="text-amber-900 font-black">2. Organisme</h5>
<p class="text-xs text-slate-600">Mengatur derajat asam-basa (pH) & peredaran unsur hara tanah.</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">🪨</span>
<h5 class="text-amber-900 font-black">3. Batuan Dasar</h5>
<p class="text-xs text-slate-600">Menentukan kandungan mineral asal pelapukan & jenis vegetasi.</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">🏔️</span>
<h5 class="text-amber-900 font-black">4. Topografi</h5>
<p class="text-xs text-slate-600">Bentuk permukaan/kemiringan lahan memengaruhi iklim lokal & erosi.</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">⏳</span>
<h5 class="text-amber-900 font-black">5. Waktu</h5>
<p class="text-xs text-slate-600">Pelapukan batuan lapisan bawah butuh waktu lebih lama dari lapisan atas.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Kuis Tak Terhingga TP 4 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-amber-100 text-amber-800 font-black text-sm uppercase">Kuis Acak Otomatis (Guru Mode)</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 4: Uji Faktor Pembentukan Tanah 🎲</h2>
<div class="mt-3 inline-flex items-center gap-3 bg-amber-100 border-2 border-amber-400 px-5 py-1.5 rounded-full">
<span class="text-lg">🔥</span>
<span class="font-black text-amber-900 text-base">SOAL DIJAWAB: <span id="count-tp4">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-2">Pertanyaan Siswa (Soal Acak Otomatis):</p>
<div id="tp4-q-text" class="text-xl font-bold text-amber-900 mb-6 bg-amber-50 p-6 rounded-2xl border border-amber-100 leading-relaxed">?</div>
<div id="tp4-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto"></div>
<div id="fb-tp4" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="tp4-next-btn" onclick="generateQuizTP4()" class="hidden mt-6 w-full max-w-lg mx-auto py-3.5 bg-amber-600 text-white rounded-2xl font-black text-xl hover:bg-amber-700 transition">Acak Soal Siswa Berikutnya 🔄</button>
</div>
</div>
<!-- Slide 4: Materi TP 5 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-yellow-100 text-yellow-800 font-black text-sm uppercase">Modul 5</span>
<h2 class="text-4xl font-black text-yellow-900 mt-2">TP 5: Mengidentifikasi Organisme Tanah 🪱</h2>
<p class="text-lg font-bold text-slate-500 mt-1">Makrofauna, Tumbuhan Rizosfer, dan Mikroorganisme Tanah</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-yellow-200 shadow-md space-y-4">
<div class="grid md:grid-cols-3 gap-4 text-xs font-bold">
<div class="bg-yellow-50 p-4 rounded-2xl border border-yellow-200 space-y-2">
<h5 class="text-yellow-900 text-sm font-black">🐾 1. Hewan & Makrofauna</h5>
<ul class="text-slate-700 space-y-1 list-disc list-inside">
<li><b>Nematoda:</b> Predator bakteri, edarkan Nitrogen.</li>
<li><b>Cacing Tanah:</b> Epigeik (serasah), Endogeik (tanah organik), Anesik (lubang vertikal).</li>
<li><b>Hewan lain:</b> Kutu kayu, ekor pegas, kelabang, luwing, siput/keong.</li>
</ul>
</div>
<div class="bg-lime-50 p-4 rounded-2xl border border-lime-200 space-y-2">
<h5 class="text-lime-900 text-sm font-black">🌱 2. Tumbuhan & Rizosfer</h5>
<ul class="text-slate-700 space-y-1 list-disc list-inside">
<li><b>Serasah:</b> Sampah ranting/daun lapuk kaya bahan organik.</li>
<li><b>Rizosfer:</b> Daerah sekitar akar tempat berkumpulnya mikroorganisme khusus.</li>
</ul>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-2">
<h5 class="text-amber-900 text-sm font-black">🔬 3. Mikroorganisme</h5>
<ul class="text-slate-700 space-y-1 list-disc list-inside">
<li><b>Protozoa & Rotifera:</b> Uraikan bahan organik & mangsa bakteri.</li>
<li><b>Alga:</b> Mikroorganisme berklorofil penambah bahan organik.</li>
<li><b>Bakteri (Bacillus):</b> Jumlah terbanyak, urai pestisida & mineral.</li>
<li><b>Fungi & Actinomycetes:</b> Urai bahan organik & kompos.</li>
<li><b>Virus:</b> Bakteriofag parasit pada sel bakteri.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 5: Kuis Tak Terhingga TP 5 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-yellow-100 text-yellow-800 font-black text-sm uppercase">Kuis Acak Otomatis (Guru Mode)</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 5: Uji Organisme Tanah 🎲</h2>
<div class="mt-3 inline-flex items-center gap-3 bg-yellow-100 border-2 border-yellow-400 px-5 py-1.5 rounded-full">
<span class="text-lg">🔥</span>
<span class="font-black text-yellow-900 text-base">SOAL DIJAWAB: <span id="count-tp5">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-2">Pertanyaan Siswa (Soal Acak Otomatis):</p>
<div id="tp5-q-text" class="text-xl font-bold text-yellow-900 mb-6 bg-yellow-50 p-6 rounded-2xl border border-yellow-100 leading-relaxed">?</div>
<div id="tp5-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto"></div>
<div id="fb-tp5" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="tp5-next-btn" onclick="generateQuizTP5()" class="hidden mt-6 w-full max-w-lg mx-auto py-3.5 bg-yellow-600 text-white rounded-2xl font-black text-xl hover:bg-yellow-700 transition">Acak Soal Siswa Berikutnya 🔄</button>
</div>
</div>
<!-- Slide 6: Battle Panel -->
<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-yellow-600 to-amber-600 tracking-wide uppercase">⚡ BATTLE PANEL INTERAKTIF (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan TP 4 & 5 secara serentak.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<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 1</span>
<span id="ifp-score-1" class="bg-yellow-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-yellow-50 p-4 rounded-2xl border-2 border-yellow-100 text-center">
<p class="text-xs font-bold text-yellow-500 uppercase mb-1">Soal K1</p>
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-yellow-600 text-white font-black rounded-xl shadow hover:bg-yellow-700 transition">Soal Berikutnya ➡️</button>
</div>
<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 2</span>
<span id="ifp-score-2" class="bg-amber-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-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center">
<p class="text-xs font-bold text-amber-500 uppercase mb-1">Soal K2</p>
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-amber-600 text-white font-black rounded-xl shadow hover:bg-amber-700 transition">Soal Berikutnya ➡️</button>
</div>
<div class="bg-white p-6 rounded-[2rem] border-4 border-lime-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-lime-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-lime-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-lime-50 p-4 rounded-2xl border-2 border-lime-100 text-center">
<p class="text-xs font-bold text-lime-500 uppercase mb-1">Soal K3</p>
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-lime-600 text-white font-black rounded-xl shadow hover:bg-lime-700 transition">Soal Berikutnya ➡️</button>
</div>
</div>
<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 BATTLE KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-yellow-600 hover:bg-yellow-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#854d0e] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi -->
<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 terhadap materi TP 4 dan TP 5 hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Paham Banget!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Organisme tanah mana yang paling membuatmu penasaran?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-yellow-50 border-2 border-yellow-200 focus:border-yellow-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi 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 Evaluasi TP 4 & 5</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Jawab 5 soal evaluasi berikut untuk memperoleh nilai akhir.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-yellow-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-yellow-700 bg-yellow-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<div 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-yellow-900 mb-2">Ujian 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-yellow-600 to-amber-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-yellow-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan kirim nilai 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-yellow-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-yellow-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-yellow-600 to-amber-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>
<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">
<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-yellow-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-yellow-700 shadow-[0_4px_0px_#854d0e]">
<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) {
let cur = array.length, rand;
while (cur != 0) {
rand = Math.floor(Math.random() * cur);
cur--;
[array[cur], array[rand]] = [array[rand], array[cur]];
}
return array;
}
let countTP4 = 0;
const tp4Bank = [
{ q: "Faktor pembentukan tanah yang memengaruhi laju pelapukan fisik & kimia melalui suhu dan curah hujan adalah...", opts: ["Iklim", "Waktu", "Topografi", "Batuan dasar"], ans: "Iklim", exp: "<b>Iklim</b> (suhu & curah hujan) mempercepat pelapukan batuan." },
{ q: "Faktor pembentukan tanah yang berperan mengatur derajat asam-basa (pH) dan peredaran unsur hara adalah...", opts: ["Organisme tanah", "Batuan dasar", "Suhu udara", "Kemiringan lereng"], ans: "Organisme tanah", exp: "<b>Organisme tanah</b> mengatur keasaman pH & hara." },
{ q: "Faktor pembentukan tanah yang menentukan kandungan mineral hasil pelapukan dan jenis vegetasi adalah...", opts: ["Batuan dasar", "Topografi", "Waktu", "Angin"], ans: "Batuan dasar", exp: "<b>Batuan dasar</b> menentukan jenis mineral asal pelapukan." },
{ q: "Bentuk permukaan tanah dan kemiringan lereng yang memengaruhi erosi serta iklim lokal tergolong faktor...", opts: ["Topografi", "Organisme", "Waktu", "Kelembapan"], ans: "Topografi", exp: "<b>Topografi</b> memengaruhi erosi & iklim lokal." },
{ q: "Mengapa pelapukan batuan lapisan bawah memerlukan waktu lebih lama dibanding batuan lapisan atas?", opts: ["Karena kurang terpapar suhu & hujan", "Karena batuan bawah lebih lembek", "Karena ada cacing tanah", "Karena terhalang akar"], ans: "Karena kurang terpapar suhu & hujan", exp: "Batuan bawah butuh <b>Waktu</b> lebih lama karena terlindung dari iklim langsung." }
];
function generateQuizTP4() {
document.getElementById('fb-tp4').classList.add('hidden');
document.getElementById('tp4-next-btn').classList.add('hidden');
let item = tp4Bank[Math.floor(Math.random() * tp4Bank.length)];
document.getElementById('tp4-q-text').innerHTML = item.q;
let shuffledOpts = shuffle([...item.opts]);
let optsHtml = "";
shuffledOpts.forEach(opt => {
let isCorrect = (opt === item.ans);
optsHtml += `<button onclick="checkQuizTP4(this, ${isCorrect}, '${item.exp.replace(/'/g, "\\'")}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg text-left">${opt}</button>`;
});
document.getElementById('tp4-options').innerHTML = optsHtml;
}
function checkQuizTP4(btn, isCorrect, explanation) {
const btns = document.getElementById('tp4-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('fb-tp4');
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>${explanation}`;
} else {
btn.classList.add('btn-wrong');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>KURANG TEPAT.</b><br>${explanation}`;
}
countTP4++;
document.getElementById('count-tp4').innerText = countTP4;
document.getElementById('tp4-next-btn').classList.remove('hidden');
}
generateQuizTP4();
let countTP5 = 0;
const tp5Bank = [
{ q: "Cacing tanah yang hidup di permukaan tanah dan memakan serasah daun adalah...", opts: ["Epigeik", "Endogeik", "Anesik", "Nematoda"], ans: "Epigeik", exp: "Cacing <b>Epigeik</b> hidup di permukaan tanah & makan serasah daun." },
{ q: "Cacing tanah yang hidup di dalam lapisan tanah dan memakan tanah kaya bahan organik dinamakan...", opts: ["Endogeik", "Epigeik", "Anesik", "Luwing"], ans: "Endogeik", exp: "Cacing <b>Endogeik</b> hidup di dalam tanah kaya organik." },
{ q: "Daerah di sekitar akar tanaman yang dihuni oleh populasi mikroorganisme khusus dinamakan...", opts: ["Rizosfer", "Horizon O", "Serasah", "Humus"], ans: "Rizosfer", exp: "<b>Rizosfer</b> adalah area di sekitar akar tanaman." },
{ q: "Mikroorganisme berklorofil di dalam tanah yang berperan menambah bahan organik adalah...", opts: ["Alga", "Fungi", "Protozoa", "Bakteriofag"], ans: "Alga", exp: "<b>Alga</b> adalah mikroorganisme berklorofil penyumbang bahan organik." },
{ q: "Bakteri tanah terbanyak berbentuk batang yang mampu menguraikan pestisida adalah...", opts: ["Bacillus", "Amoeba", "Saccharomyces", "Rhizopus"], ans: "Bacillus", exp: "Bakteri <b>Bacillus</b> menguraikan pestisida & mineral tanah." },
{ q: "Organisme dekomposer utama yang mengubah senyawa nitrogen kompleks menjadi amonium adalah...", opts: ["Fungi", "Virus", "Kutu kayu", "Siput"], ans: "Fungi", exp: "<b>Fungi</b> menguraikan bahan organik kompleks menjadi amonium." },
{ q: "Virus parasit yang khusus menyerang sel bakteri di dalam tanah dinamakan...", opts: ["Bakteriofag", "Rotifera", "Euglena", "Paramaecium"], ans: "Bakteriofag", exp: "<b>Bakteriofag</b> adalah virus parasit pada sel bakteri tanah." }
];
function generateQuizTP5() {
document.getElementById('fb-tp5').classList.add('hidden');
document.getElementById('tp5-next-btn').classList.add('hidden');
let item = tp5Bank[Math.floor(Math.random() * tp5Bank.length)];
document.getElementById('tp5-q-text').innerHTML = item.q;
let shuffledOpts = shuffle([...item.opts]);
let optsHtml = "";
shuffledOpts.forEach(opt => {
let isCorrect = (opt === item.ans);
optsHtml += `<button onclick="checkQuizTP5(this, ${isCorrect}, '${item.exp.replace(/'/g, "\\'")}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg text-left">${opt}</button>`;
});
document.getElementById('tp5-options').innerHTML = optsHtml;
}
function checkQuizTP5(btn, isCorrect, explanation) {
const btns = document.getElementById('tp5-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('fb-tp5');
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>${explanation}`;
} else {
btn.classList.add('btn-wrong');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>KURANG TEPAT.</b><br>${explanation}`;
}
countTP5++;
document.getElementById('count-tp5').innerText = countTP5;
document.getElementById('tp5-next-btn').classList.remove('hidden');
}
generateQuizTP5();
let ifpScores = { 1: 0, 2: 0, 3: 0 };
const IFP_WIN_SCORE = 5;
const ifpBank = [
{ q: "Cacing tanah yang membuat lubang vertikal dan menarik daun ke sarangnya adalah...", opts: ["Anesik", "Epigeik", "Endogeik"], ans: 0 },
{ q: "Faktor pembentukan tanah berupa derajat kemiringan lahan disebut...", opts: ["Topografi", "Iklim", "Waktu"], ans: 0 },
{ q: "Daerah di sekitar akar tumbuhan tempat berkumpulnya mikroorganisme khusus dinamakan...", opts: ["Rizosfer", "Horizon O", "Humus"], ans: 0 },
{ q: "Hewan pengedar nitrogen tanah yang merupakan predator bakteri adalah...", opts: ["Nematoda", "Luwing", "Siput"], 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";
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); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); });
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham')) 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');
}
const evaluasiBank = [
{ q: "Faktor pembentukan tanah berupa suhu dan curah hujan tergolong ke dalam faktor...", options: ["Iklim", "Topografi", "Waktu", "Batuan dasar"], a: 0, exp: "<b>Iklim</b> (suhu dan hujan) mempercepat laju pelapukan batuan." },
{ q: "Cacing tanah yang hidup di permukaan tanah dan memakan serasah daun adalah...", options: ["Epigeik", "Endogeik", "Anesik", "Nematoda"], a: 0, exp: "Cacing <b>Epigeik</b> hidup di permukaan tanah memakan sampah daun." },
{ q: "Organisme berklorofil di dalam tanah yang menambah bahan organik adalah...", options: ["Alga", "Fungi", "Protozoa", "Bakteriofag"], a: 0, exp: "<b>Alga</b> adalah organisme berklorofil penambah bahan organik." },
{ q: "Bakteri terbanyak di dalam tanah yang berbentuk batang adalah...", options: ["Bacillus", "Amoeba", "Euglena", "Paramaecium"], a: 0, exp: "Bakteri tanah terbanyak berbentuk batang (<b>Bacillus</b>)." },
{ q: "Virus parasit yang hidup pada sel bakteri di dalam tanah dinamakan...", options: ["Bakteriofag", "Rotifera", "Actinomycetes", "Protozoa"], a: 0, exp: "<b>Bakteriofag</b> adalah virus yang hidup pada sel bakteri tanah." }
];
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-yellow-50 hover:border-yellow-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();
}, 3000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; }
alert("Laporan Nilai Berhasil Dikirim ke Guru!\n\nNama: " + nama + "\nSkor Ujian Akhir: " + evalSkor);
}
</script>
</body>
</html>
Kelas 9
IPA
SIFAT FISIKA DAN KIMIA, - Setelah pembelajaran peserta didik dapat: 1. menjelaskan pengertian tanah. 2. menyebutkan fungsi tanah bagi kehidupan. 3. menjelaskan terbentuknya tanah
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPA Kelas 9: Bab 9 - Tanah (TP 1, 2, & 3) 🌿</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=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: #16a34a !important; color: white !important; border-bottom-color: #15803d !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.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 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="sprout" 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">IPA Kelas 9 - Bab 9: Bagian 1 (Modul TP 1, 2, & 3)</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 -->
<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">
Menjelajahi <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-700">Dunia Tanah</span> 🌱
</h1>
<div class="w-full max-w-lg h-48 rounded-3xl mx-auto shadow-lg border-4 border-white bg-emerald-600 flex items-center justify-center text-white text-6xl">
🌍 🪨 🪴
</div>
<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> Alur Pembelajaran Bertahap:</h3>
<ol class="space-y-2 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li><b class="text-emerald-700">TP 1:</b> Pengertian Tanah → <i>Kuis TP 1</i></li>
<li><b class="text-emerald-700">TP 2:</b> Peran/Fungsi Tanah bagi Kehidupan → <i>Kuis TP 2</i></li>
<li><b class="text-emerald-700">TP 3:</b> Proses Terbentuknya Tanah & Lapisan Horizon → <i>Kuis TP 3</i></li>
<li><b>Ujian Akhir & Battle Kelompok</b></li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Tekan "Selanjutnya" untuk mulai belajar TP 1! 👇</p>
</div>
</div>
<!-- Slide 2: Materi TP 1 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-emerald-100 text-emerald-800 font-black text-sm uppercase">Modul 1</span>
<h2 class="text-4xl font-black text-emerald-900 mt-2">TP 1: Pengertian & Komposisi Tanah 🌿</h2>
<p class="text-lg font-bold text-slate-500 mt-1">Memahami apa itu tanah dan komponen penyusunnya</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md 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-2 border-emerald-200 space-y-3">
<h4 class="font-black text-emerald-900 text-xl">📌 Definisi Tanah:</h4>
<p class="text-slate-700 font-bold leading-relaxed">
Tanah terdapat di permukaan kulit bumi. Tanah tersusun dari <b>bahan mineral</b> hasil pelapukan batuan dan <b>bahan organik</b> hasil pelapukan sisa-sisa tumbuhan serta hewan (humus).
</p>
<p class="text-slate-700 font-bold leading-relaxed">
Tanah merupakan medium atau tempat tumbuh dan berkembangnya tumbuh-tumbuhan.
</p>
</div>
<div class="grid grid-cols-2 gap-3 text-center font-bold text-sm">
<div class="bg-amber-100 p-3 rounded-xl border border-amber-300">🪨 <b>Bahan Mineral</b><br>Pelapukan Batuan</div>
<div class="bg-green-100 p-3 rounded-xl border border-green-300">🍂 <b>Bahan Organik</b><br>Sisa Hewan/Tumbuhan</div>
</div>
</div>
</div>
</div>
<!-- Slide 3: Kuis TP 1 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-emerald-100 text-emerald-800 font-black text-sm uppercase">Kuis Uji Pemahaman</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 1: Pengertian Tanah 🎯</h2>
</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">Pertanyaan:</p>
<div class="text-xl font-bold text-emerald-900 mb-8 bg-emerald-50 p-6 rounded-2xl border border-emerald-100 leading-relaxed">
Tanah di permukaan bumi tersusun atas dua bahan utama, yaitu...
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto">
<button onclick="checkQuizTP(this, true, 'TP1', 'Benar! Tanah tersusun atas bahan mineral (pelapukan batuan) dan bahan organik (humus).')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">A. Bahan mineral dan bahan organik</button>
<button onclick="checkQuizTP(this, false, 'TP1', 'Kurang tepat. Bahan mineral dan bahan organik adalah dua komponen utama penyusun tanah.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">B. Plastik dan semen</button>
<button onclick="checkQuizTP(this, false, 'TP1', 'Kurang tepat. Bahan mineral berasal dari pelapukan batuan, bukan air murni.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">C. Air laut dan logam cair</button>
<button onclick="checkQuizTP(this, false, 'TP1', 'Kurang tepat. Bahan utama tanah adalah mineral & organik.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">D. Hanyalah batuan utuh</button>
</div>
<div id="fb-tp1" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
</div>
</div>
<!-- Slide 4: Materi TP 2 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-teal-100 text-teal-800 font-black text-sm uppercase">Modul 2</span>
<h2 class="text-4xl font-black text-teal-900 mt-2">TP 2: Fungsi Tanah Bagi Kehidupan 🌾</h2>
<p class="text-lg font-bold text-slate-500 mt-1">Menjelaskan manfaat penting tanah untuk ekosistem dan manusia</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-2">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🌱</span>
<h4 class="font-black text-xl text-teal-800">1. Tempat Tumbuh Tumbuhan</h4>
<p class="text-slate-600 font-bold text-sm">Menyediakan jangkar penopang akar serta menyuplai air dan unsur hara (nutrisi) yang dibutuhkan tumbuhan.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🐛</span>
<h4 class="font-black text-xl text-teal-800">2. Habitat Organisme</h4>
<p class="text-slate-600 font-bold text-sm">Tempat tinggal bagi beragam makrofauna (cacing, kutu kayu) dan mikroorganisme (bakteri, fungi).</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">💧</span>
<h4 class="font-black text-xl text-teal-800">3. Penyaring & Penampung Air</h4>
<p class="text-slate-600 font-bold text-sm">Menyerap air hujan, menahannya dalam larutan tanah, dan menyaring air menjadi cadangan air bersih.</p>
</div>
</div>
</div>
<!-- Slide 5: Kuis TP 2 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-teal-100 text-teal-800 font-black text-sm uppercase">Kuis Uji Pemahaman</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 2: Fungsi Tanah 🎯</h2>
</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">Pertanyaan:</p>
<div class="text-xl font-bold text-teal-900 mb-8 bg-teal-50 p-6 rounded-2xl border border-teal-100 leading-relaxed">
Manakah yang BUKAN merupakan fungsi utama tanah bagi keberlangsungan ekosistem?
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto">
<button onclick="checkQuizTP(this, false, 'TP2', 'Salah. Menopang akar tumbuhan adalah fungsi utama tanah.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">A. Tempat tumbuh tanaman</button>
<button onclick="checkQuizTP(this, true, 'TP2', 'Tepat sekali! Memantulkan gelombang radio atmosfer bukan fungsi biologis/fisik tanah.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">B. Memantulkan gelombang radio utama</button>
<button onclick="checkQuizTP(this, false, 'TP2', 'Salah. Tanah adalah habitat alami cacing, bakteri, dan fungi.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">C. Habitat cacing & mikroorganisme</button>
<button onclick="checkQuizTP(this, false, 'TP2', 'Salah. Menyimpan air hujan adalah fungsi penyaringan tanah.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">D. Menyimpan & menyaring air tanah</button>
</div>
<div id="fb-tp2" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
</div>
</div>
<!-- Slide 6: Materi TP 3 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-green-100 text-green-800 font-black text-sm uppercase">Modul 3</span>
<h2 class="text-4xl font-black text-green-900 mt-2">TP 3: Proses Terbentuknya Tanah & Lapisan (Horizon) 📐</h2>
<p class="text-lg font-bold text-slate-500 mt-1">3 Jenis Pelapukan dan 6 Lapisan Horizon Vertikal Tanah</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-green-200 shadow-md space-y-4">
<p class="font-bold text-slate-700"><b>1. Tiga Jenis Pelapukan Pembentuk Tanah:</b></p>
<div class="grid md:grid-cols-3 gap-4 text-sm font-bold">
<div class="bg-blue-50 p-4 rounded-2xl border border-blue-200">
<h5 class="text-blue-900 text-base">☀️ Pelapukan Fisis</h5>
<p class="text-slate-600 text-xs mt-1">Penghancuran mekanis akibat suhu, angin, dan abrasi.</p>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200">
<h5 class="text-teal-900 text-base">🌧️ Pelapukan Kimia</h5>
<p class="text-slate-600 text-xs mt-1">Penghancuran oleh air terlarut CO2 (hidrolisis & pelarutan mineral).</p>
</div>
<div class="bg-green-50 p-4 rounded-2xl border border-green-200">
<h5 class="text-green-900 text-base">🌱 Pelapukan Biologis</h5>
<p class="text-slate-600 text-xs mt-1">Pelapukan oleh aktivitas organisme (penetrasi akar tumbuhan).</p>
</div>
</div>
<p class="font-bold text-slate-700 pt-2"><b>2. Enam Jenis Horizon (Lapisan Vertikal) Tanah:</b></p>
<div class="grid grid-cols-2 md:grid-cols-6 gap-2 text-center text-xs font-bold">
<div class="bg-amber-900 text-white p-2 rounded-xl"><b>Horizon O</b><br>Paling atas & subur (organik)</div>
<div class="bg-amber-700 text-white p-2 rounded-xl"><b>Horizon A</b><br>Gelap, humus & mineral</div>
<div class="bg-amber-500 text-white p-2 rounded-xl"><b>Horizon E</b><br>Berpasir & terang</div>
<div class="bg-amber-400 text-slate-900 p-2 rounded-xl"><b>Horizon B</b><br>Lempung & alur perembesan</div>
<div class="bg-stone-400 text-slate-900 p-2 rounded-xl"><b>Horizon C</b><br>Regolit (lapukan batuan)</div>
<div class="bg-slate-700 text-white p-2 rounded-xl"><b>Horizon D/R</b><br>Batuan dasar utuh & keras</div>
</div>
</div>
</div>
<!-- Slide 7: Kuis TP 3 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-green-100 text-green-800 font-black text-sm uppercase">Kuis Uji Pemahaman</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 3: Pelapukan & Horizon Tanah 🎯</h2>
</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">Pertanyaan:</p>
<div class="text-xl font-bold text-green-900 mb-8 bg-green-50 p-6 rounded-2xl border border-green-100 leading-relaxed">
Penghancuran batuan induk akibat penetrasi akar tumbuhan tergolong dalam jenis pelapukan...
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto">
<button onclick="checkQuizTP(this, false, 'TP3', 'Kurang tepat. Pelapukan fisis disebabkan suhu, angin, dan abrasi mekanis.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">A. Pelapukan Fisis</button>
<button onclick="checkQuizTP(this, true, 'TP3', 'BENAR! Pelapukan biologis disebabkan oleh aktivitas organisme seperti akar tumbuhan.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">B. Pelapukan Biologis</button>
<button onclick="checkQuizTP(this, false, 'TP3', 'Kurang tepat. Pelapukan kimia disebabkan oleh reaksi air dan CO2.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">C. Pelapukan Kimia</button>
<button onclick="checkQuizTP(this, false, 'TP3', 'Salah. Suhu tinggi memicu pelapukan fisis.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">D. Pelapukan Suhu</button>
</div>
<div id="fb-tp3" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
</div>
</div>
<!-- Slide 8: Battle Panel (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-emerald-600 to-teal-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! Jawab pertanyaan TP 1-3 secara serentak.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<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">Skor: 0</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 class="text-xs font-bold text-emerald-500 uppercase mb-1">Soal K1</p>
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-emerald-600 text-white font-black rounded-xl shadow hover:bg-emerald-700 transition">Soal Berikutnya ➡️</button>
</div>
<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">Skor: 0</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 class="text-xs font-bold text-teal-500 uppercase mb-1">Soal K2</p>
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-teal-600 text-white font-black rounded-xl shadow hover:bg-teal-700 transition">Soal Berikutnya ➡️</button>
</div>
<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">Skor: 0</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 class="text-xs font-bold text-green-500 uppercase mb-1">Soal K3</p>
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-green-600 text-white font-black rounded-xl shadow hover:bg-green-700 transition">Soal Berikutnya ➡️</button>
</div>
</div>
<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-amber-300 to-emerald-400 mb-6 drop-shadow-lg">JUARA BATTLE 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_#065f46] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Refleksi -->
<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 terhadap materi TP 1, TP 2, dan TP 3 hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Paham Banget!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan pendapatmu di sini:</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 pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Evaluasi 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 Evaluasi TP 1, 2, & 3</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Jawab 5 soal evaluasi berikut untuk memperoleh nilai akhir.</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>
<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 Akhirmu: <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">
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">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-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>
</main>
<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">
<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_#065f46]">
<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 checkQuizTP(btn, isCorrect, tpId, explanation) {
const container = btn.parentElement;
const btns = container.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById(`fb-${tpId.toLowerCase()}`);
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>JAWABAN BENAR!</b><br>${explanation}`;
} else {
btn.classList.add('btn-wrong');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>KURANG TEPAT.</b><br>${explanation}`;
}
}
let ifpScores = { 1: 0, 2: 0, 3: 0 };
const IFP_WIN_SCORE = 5;
const ifpBank = [
{ q: "Pelapukan batuan akibat penetrasi akar dinamakan pelapukan...", opts: ["Biologis", "Fisis", "Kimia"], ans: 0 },
{ q: "Lapisan tanah paling atas yang kaya bahan organik adalah...", opts: ["Horizon O", "Horizon A", "Horizon C"], ans: 0 },
{ q: "Bahan organik tanah hasil pelapukan sisa makhluk hidup dinamakan...", opts: ["Humus", "Batuan dasar", "Pasir murni"], ans: 0 },
{ q: "Pelapukan oleh air yang mengandung CO2 terlarut dinamakan pelapukan...", opts: ["Kimia", "Fisis", "Biologis"], 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";
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); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); });
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham')) 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');
}
const evaluasiBank = [
{ q: "Bahan organik tanah yang berasal dari pembusukan sisa tumbuhan dan hewan dinamakan...", options: ["Humus", "Batuan induk", "Regolit", "Pasir kuarsa"], a: 0, exp: "<b>Humus</b> adalah bahan organik hasil pelapukan sisa-sisa tumbuhan dan hewan." },
{ q: "Pelapukan batuan yang disebabkan oleh perubahan suhu, angin, dan abrasi mekanis dinamakan pelapukan...", options: ["Fisis", "Kimia", "Biologis", "Organik"], a: 0, exp: "Pelapukan <b>Fisis</b> disebabkan pengaruh suhu, angin, dan abrasi." },
{ q: "Lapisan tanah teratas yang tergolong paling subur karena kaya bahan organik untuk lahan pertanian adalah...", options: ["Horizon O", "Horizon C", "Horizon D", "Horizon B"], a: 0, exp: "<b>Horizon O</b> adalah lapisan paling atas yang subur dan kaya bahan organik." },
{ q: "Manakah yang merupakan fungsi tanah bagi tanaman?", options: ["Tempat tumbuh & penyedia air/nutrisi", "Pengubah fotosintesis matahari", "Pembuat energi nuklir", "Penyaring sinar radiasi"], a: 0, exp: "Tanah berfungsi sebagai medium tumbuh dan penyedia air serta unsur hara." },
{ q: "Lapisan tanah terdalam yang terdiri atas batuan keras utuh yang belum terlapukkan dinamakan...", options: ["Horizon D / R", "Horizon A", "Horizon O", "Horizon E"], a: 0, exp: "<b>Horizon D atau R</b> terdiri atas batuan dasar keras yang masih utuh dari pelapukan." }
];
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();
}, 3000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; }
alert("Laporan Nilai Berhasil Dikirim ke Guru!\n\nNama: " + nama + "\nSkor Ujian Akhir: " + evalSkor);
}
</script>
</body>
</html>
Kelas 9
IPA
Biotekhnologi
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPA Kelas 9: Bioteknologi & Agen Biologis 🧬</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: #16a34a !important; color: white !important; border-bottom-color: #15803d !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-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="dna" 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">IPA Kelas 9 - Bioteknologi & Agen Biologis</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-cyan-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 (Deep Learning)
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Mengenal & Mengubah Dunia Dengan <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Bioteknologi</span> 🧬
</h1>
<img src="https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?auto=format&fit=crop&w=800&q=80" alt="Bioteknologi Lab" 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-1579154204601-01588f351e67?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">menjelaskan pengertian bioteknologi</span> serta pemanfaatan agen biologis bagi kehidupan manusia.</li>
<li>Peserta didik dapat <span class="text-emerald-600">membedakan karakteristik bioteknologi konvensional dan modern</span>.</li>
<li>Peserta didik dapat <span class="text-emerald-600">mengidentifikasi agen biologis</span> (mikroorganisme) beserta produk yang dihasilkannya.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap mengeksplorasi rahasia makhluk hidup mikro? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Agen Biologis -->
<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 Agen Biologis 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati mikroorganisme pekerja rahasia di balik produk sehari-hari!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<!-- Card 1 -->
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md flex items-center gap-4">
<div class="text-5xl p-4 bg-emerald-50 rounded-2xl border border-emerald-100">🫘</div>
<div>
<h4 class="font-black text-xl text-emerald-900">Tempe</h4>
<p class="text-sm font-bold text-emerald-700">Agen Biologis: <i>Rhizopus oryzae</i> (Jamur)</p>
<p class="text-xs text-slate-600 font-bold mt-1">Mengikat kedelai dengan benang hifa putih dan memecah protein kompleks.</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-md flex items-center gap-4">
<div class="text-5xl p-4 bg-cyan-50 rounded-2xl border border-cyan-100">🥛</div>
<div>
<h4 class="font-black text-xl text-cyan-900">Yogurt & Keju</h4>
<p class="text-sm font-bold text-cyan-700">Agen Biologis: <i>Lactobacillus bulgaricus</i> (Bakteri)</p>
<p class="text-xs text-slate-600 font-bold mt-1">Mengubah gula laktosa menjadi asam laktat sehingga susu menggumpal masam.</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md flex items-center gap-4">
<div class="text-5xl p-4 bg-purple-50 rounded-2xl border border-purple-100">🍞</div>
<div>
<h4 class="font-black text-xl text-purple-900">Roti & Tapai</h4>
<p class="text-sm font-bold text-purple-700">Agen Biologis: <i>Saccharomyces cerevisiae</i> (Ragi)</p>
<p class="text-xs text-slate-600 font-bold mt-1">Fermentasi karbohidrat membebaskan gas CO₂ yang mekar mengembang.</p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md flex items-center gap-4">
<div class="text-5xl p-4 bg-rose-50 rounded-2xl border border-rose-100">💊</div>
<div>
<h4 class="font-black text-xl text-rose-900">Antibiotik Penisilin</h4>
<p class="text-sm font-bold text-rose-700">Agen Biologis: <i>Penicillium notatum</i> (Jamur)</p>
<p class="text-xs text-slate-600 font-bold mt-1">Menghasilkan sekret antibiotik pembunuh bakteri penyebab penyakit.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-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 makhluk hidup bersel tunggal yang tak kasatmata mampu merusak, mengubah, dan menyulap bahan pangan tawar menjadi makanan lezat bernilai gizi tinggi bahkan obat penyelamat jiwa?"
</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">Semuanya berkat pemanfaatan enzim, fermentasi mikroba, dan manipulasi genetik dalam prinsip Bioteknologi!</p>
</div>
</div>
<!-- Slide 4: Tinjauan Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pentingnya Peran Bioteknologi 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-5xl block">🌾</span>
<h4 class="font-black text-xl text-teal-800">Ketahanan Pangan</h4>
<p class="text-slate-600 font-bold text-sm">Mengolah bahan mentah menjadi makanan tahan lama (tempe, keju, kecap) serta menciptakan tanaman unggul tahan hama.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">💉</span>
<h4 class="font-black text-xl text-teal-800">Kesehatan & Medis Modern</h4>
<p class="text-slate-600 font-bold text-sm">Memproduksi insulin manusia buatan via rekayasa DNA bakteri, antibiotik penisilin, serta vaksin penyelamat epidemi.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🌱</span>
<h4 class="font-black text-xl text-teal-800">Lingkungan (Bioremediasi)</h4>
<p class="text-slate-600 font-bold text-sm">Pemanfaatan bakteri khusus (<i>Pseudomonas</i>) untuk menguraikan tumpahan minyak dan sampah plastik di lautan.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Perbandingan Bioteknologi -->
<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 Inti: Konvensional vs Modern 🧬</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Perhatikan perbedaan karakteristik dua cabang utama bioteknologi berikut:</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-amber-50 p-6 rounded-2xl border-2 border-amber-200 text-left space-y-3">
<div class="flex items-center gap-2">
<span class="text-3xl">🏺</span>
<h4 class="font-black text-amber-900 text-xl">Bioteknologi Konvensional</h4>
</div>
<ul class="space-y-2 text-slate-700 font-bold text-sm list-disc list-inside">
<li><b>Prinsip Utama:</b> Menggunakan proses fermentasi mikroba utuh secara alami.</li>
<li><b>Peralatan:</b> Sederhana, biasa dilakukan dalam skala rumah tangga.</li>
<li><b>Kondisi:</b> Tidak memerlukan kondisi terisolasi/steril yang ketat.</li>
<li><b>Contoh Produk:</b> Tempe, Tapai, Yogurt, Keju, Kecap, Roti.</li>
</ul>
</div>
<div class="bg-cyan-50 p-6 rounded-2xl border-2 border-cyan-200 text-left space-y-3">
<div class="flex items-center gap-2">
<span class="text-3xl">🔬</span>
<h4 class="font-black text-cyan-900 text-xl">Bioteknologi Modern</h4>
</div>
<ul class="space-y-2 text-slate-700 font-bold text-sm list-disc list-inside">
<li><b>Prinsip Utama:</b> Rekayasa genetika (memotong & menyambung molekul DNA).</li>
<li><b>Peralatan:</b> Canggih, dilakukan dalam laboratorium steril berteknologi tinggi.</li>
<li><b>Skola Produksi:</b> Massal industri dengan hasil terukur tinggi.</li>
<li><b>Contoh Produk:</b> Hormon Insulin, Kloning, Bayi Tabung, Vaksin DNA.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 6: Auto-Quiz Latihan Mandiri -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-emerald-600">Tebak Agen & Jenisnya!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Uji pemahaman agen biologis bioteknologi di bawah ini:</p>
<div id="q1-text" class="text-xl math-box text-emerald-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-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-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-emerald-600 to-teal-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 jawaban bioteknologi 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-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">Skor: 0</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 class="text-xs font-bold text-emerald-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-emerald-600 text-white font-black rounded-xl shadow hover:bg-emerald-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM 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">Skor: 0</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 class="text-xs font-bold text-teal-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-teal-600 text-white font-black rounded-xl shadow hover:bg-teal-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-cyan-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-cyan-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🧬 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-cyan-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</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 class="text-xs font-bold text-cyan-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-cyan-600 text-white font-black rounded-xl shadow hover:bg-cyan-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-emerald-400 mb-6 drop-shadow-lg">JUARA BATTLE 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_#065f46] 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 bab Bioteknologi 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 materi atau simulasi mana yang paling berkesan bagimu?</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 pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 9: 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">📝 Evaluasi Akhir Bioteknologi</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan pemahamanmu dengan 5 soal evaluasi ini.</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">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-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">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-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>
</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_#065f46]">
<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); });
// Auto-Quiz 1: Latihan Mandiri
let countQ1 = 0;
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let questions = [
{
q: "Jamur apakah yang berperan penting mengikat biji kedelai menjadi Tempe?",
options: ["Rhizopus oryzae", "Lactobacillus bulgaricus", "Saccharomyces cerevisiae"],
ans: "Rhizopus oryzae",
exp: "<b>Rhizopus oryzae</b> adalah jamur hifa putih yang menfermentasikan kedelai menjadi tempe lezat."
},
{
q: "Bakteri apakah yang menfermentasikan susu cairan cair menjadi Yogurt?",
options: ["Penicillium notatum", "Lactobacillus bulgaricus", "Escherichia coli"],
ans: "Lactobacillus bulgaricus",
exp: "<b>Lactobacillus bulgaricus</b> memproduksi asam laktat yang mengubah tekstur susu menjadi asam kental."
},
{
q: "Bioteknologi yang memotong & menyambung gen DNA mikroba di laboratorium dinamakan...",
options: ["Konvensional", "Modern", "Tradisional"],
ans: "Modern",
exp: "Bioteknologi <b>Modern</b> memanfaatkan teknik Rekayasa Genetika (DNA rekombinan)."
}
];
let selected = questions[Math.floor(Math.random() * questions.length)];
let correctAns = selected.ans;
let options = selected.options;
let explanation = selected.exp;
currentQ1Data = { correctAns, explanation };
document.getElementById('q1-text').innerHTML = selected.q;
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt}' === '${correctAns}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg 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: "Ragi pembawa fermentasi adonan roti mengembang...", opts: ["Saccharomyces", "Rhizopus", "Lactobacillus"], ans: 0 },
{ q: "Pembuatan keju tergolong bioteknologi...", opts: ["Konvensional", "Modern", "Sintetis"], ans: 0 },
{ q: "Insulin manusia diproduksi melalui teknik bioteknologi...", opts: ["Modern (DNA)", "Konvensional", "Murni"], ans: 0 },
{ q: "Jamur antibiotik pembunuh bakteri patogen...", opts: ["Penicillium", "Rhizopus", "Spirulina"], ans: 0 },
{ q: "Fermentasi mikroba berjalan secara aerob tanpa...", opts: ["Oksigen bebas", "Glukosa", "Suhu"], 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 Bioteknologi
const evaluasiBank = [
{
q: "Pemanfaatan makhluk hidup (agen biologis) untuk menghasilkan barang atau jasa yang berguna bagi manusia disebut...",
options: ["Biologi Ekologi", "Bioteknologi", "Biofisika", "Biodiversitas"],
a: 1,
exp: "<b>Bioteknologi</b> adalah ilmu pemanfaatan agen biologis untuk menghasilkan produk/jasa yang bermanfaat."
},
{
q: "Berikut ini yang merupakan ciri utama Bioteknologi Konvensional adalah...",
options: ["Menggunakan rekombinasi DNA", "Memerlukan laboratorium steril ultra-canggih", "Memanfaatkan proses fermentasi alami", "Membuat kloning hewan secara massal"],
a: 2,
exp: "Bioteknologi konvensional mengandalkan <b>proses fermentasi mikroba alami</b> dan peralatan sederhana."
},
{
q: "Hormon Insulin medis untuk penderita diabetes diproduksi melalui cabang bioteknologi...",
options: ["Tradisional", "Konvensional", "Modern (Rekayasa Genetika DNA)", "Fosil"],
a: 2,
exp: "Insulin sintetis diproduksi menggunakan <b>Bioteknologi Modern</b> melalui pemotongan & penyambungan DNA plasmid bakteri E. coli."
},
{
q: "Mikroorganisme <i>Saccharomyces cerevisiae</i> sangat populer dalam pemrosesan...",
options: ["Yogurt susu", "Roti & Tapai", "Antibiotik Penisilin", "Keju Mozzarella"],
a: 1,
exp: "<b>Saccharomyces cerevisiae</b> (ragi) menfermentasikan gula menjadi alkohol dan gas CO₂ pemekar roti & tapai."
},
{
q: "Pasangan produk bioteknologi dan agen biologis yang BENAR adalah...",
options: ["Tempe - Rhizopus oryzae", "Yogurt - Penicillium notatum", "Penisilin - Lactobacillus bulgaricus", "Keju - Saccharomyces cerevisiae"],
a: 0,
exp: "Pasangan yang paling tepat adalah <b>Tempe - Rhizopus oryzae</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();
}, 3500);
}
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 Bioteknologi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bioteknologi: " + refleksi,
strategi: "Evaluasi: Bab Bioteknologi IPA Kelas 9"
}, "*");
} else {
alert("Laporan Misi Bioteknologi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
📊 Papan Nilai & Aktivitas Kelas
Nilai ganda per siswa otomatis diambil skor tertinggi| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Belum ada nilai siswa yang masuk. | |||||