Kelas 7
Penguatan Numerasi
penjumlahan 1-100
Mulai Belajar Sekarang
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Dasar: Petualangan Penjumlahan (1-100) ➕</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fffbeb;
background-image: radial-gradient(#fde68a 1.2px, transparent 1.2px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform:
Kelas 9
IPA
SIFAT FISIKA DAN KIMIA, - 4. menjelaskan faktor-faktor yang memengaruhi pembentukan tanah. 5. mengidentifikasi organisme-organisme tanah.
Mulai Belajar Sekarang
<!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
Mulai Belajar Sekarang
<!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
Mulai Belajar Sekarang
<!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>
Kelas 7
Bahasa Inggris
Home Sweet Home : 4 Procedure Text (Recycling & Crafting) ♻️
Mulai Belajar Sekarang
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Procedure Text (Recycling & Crafting) ♻️📦</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(#dcfce7 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; }
.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="recycle" 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">Bab 3 - TP 4: Procedure Text (Recycling & Crafting)</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka (10 Slides)
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Procedure Text: <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Recycling & Crafting</span> ♻️📦
</h1>
<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>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu memahami alur informasi dari <span class="text-emerald-600">teks prosedur</span> dan mempresentasikan gagasan secara tertulis atau multimodal untuk menjelaskan langkah-langkah melakukan sesuatu (misalnya, <span class="text-emerald-600">memilah sampah atau membuat kerajinan dari bahan bekas</span>).
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's learn step-by-step instructions! 👇</p>
</div>
</div>
<!-- Slide 2: Apa itu Teks Prosedur? -->
<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">Slide 2: Mengenal Teks Prosedur (Procedure Text) 📜</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Apa fungsi dan tujuan dari teks prosedur?</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-emerald-800">Definisi & Tujuan (Definition & Purpose)</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed">
Teks prosedur adalah teks yang memberikan petunjuk, instruksi, atau langkah-langkah bagaimana sesuatu dapat dilakukan atau dibuat secara berurutan.
</p>
<p class="text-xs font-bold text-emerald-700 bg-emerald-50 p-2 rounded-lg">Tujuan utamanya: To explain how to do or make something clearly.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Struktur Umum (Generic Structure)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>Goal / Title:</b> Judul atau tujuan (misal: *How to Make a Pencil Case*).</li>
<li>• <b>Materials / Tools:</b> Bahan dan alat yang diperlukan.</li>
<li>• <b>Steps / Methods:</b> Langkah-langkah pembuatan secara berurutan.</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Unsur Kebahasaan Teks Prosedur -->
<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">Slide 3: Unsur Kebahasaan (Language Features) ⚙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kaidah kebahasaan yang wajib ada dalam teks prosedur.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<h4 class="font-black text-lg text-emerald-800">1. Imperative Sentences</h4>
<p class="text-slate-600 font-bold text-sm">Kalimat perintah yang diawali kata kerja dasar (Verb-1).</p>
<p class="text-xs font-bold text-emerald-700 bg-emerald-50 p-2 rounded-lg">Contoh: *Cut, Fold, Glue, Clean*.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-lg text-teal-800">2. Action Verbs</h4>
<p class="text-slate-600 font-bold text-sm">Kata kerja tindakan fisik yang menunjukkan aktivitas.</p>
<p class="text-xs font-bold text-teal-700 bg-teal-50 p-2 rounded-lg">Contoh: *Put, Wash, Mix, Take*.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-green-200 shadow-sm space-y-3">
<h4 class="font-black text-lg text-green-800">3. Connectives / Connectors</h4>
<p class="text-slate-600 font-bold text-sm">Kata hubung urutan untuk menyusun langkah.</p>
<p class="text-xs font-bold text-green-700 bg-green-50 p-2 rounded-lg">Contoh: *First, Next, Then, Finally*.</p>
</div>
</div>
</div>
<!-- Slide 4: Contoh 1 - Memilah Sampah (Sorting Waste) -->
<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">Slide 4: Contoh Teks 1 - Sorting Waste (Memilah Sampah) 🗑️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menerapkan prosedur pemilahan sampah di rumah.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md space-y-4">
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-100 space-y-2">
<h4 class="font-black text-emerald-900 text-lg">How to Sort Household Waste Properly</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed">
<b>Goal:</b> Cleaning and keeping the environment healthy by sorting waste.<br>
<b>Materials/Tools:</b> Two bins (Organic and Inorganic bins), gloves.<br>
<b>Steps:</b><br>
1. <b>First</b>, wear your gloves to keep your hands clean.<br>
2. <b>Second</b>, separate food scraps and leaves into the organic bin.<br>
3. <b>Next</b>, put plastic bottles, paper, and cans into the inorganic bin.<br>
4. <b>Finally</b>, throw the bins into the proper large garbage disposal outside.
</p>
</div>
</div>
</div>
<!-- Slide 5: Latihan Analisis Teks Memilah Sampah -->
<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">Slide 5: Analisis Teks Memilah Sampah 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Uji pemahaman informasi tersurat dari teks sebelumnya.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md space-y-6">
<p class="text-lg font-bold text-slate-700">Pertanyaan: Where should we put plastic bottles and paper based on the text?</p>
<div class="space-y-3">
<button onclick="alert('Kurang tepat, food scraps dan leaves masuk ke organic bin.')" class="w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold hover:bg-emerald-50">A. Into the organic bin</button>
<button onclick="alert('Hebat! Benar, plastic bottles dan paper dimasukkan ke inorganic bin.')" class="w-full text-left p-4 bg-emerald-500 text-white border-2 border-emerald-700 rounded-xl font-bold">B. Into the inorganic bin ✅</button>
<button onclick="alert('Kurang tepat.')" class="w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold hover:bg-emerald-50">C. Under the bed</button>
</div>
</div>
</div>
<!-- Slide 6: Contoh 2 - Kerajinan dari Bahan Bekas (Recycled Craft) -->
<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">Slide 6: Contoh Teks 2 - Recycled Craft (Kerajinan Botol) 🎨</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Membuat tempat pensil dari botol plastik bekas.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-md space-y-4">
<div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-100 space-y-2">
<h4 class="font-black text-teal-900 text-lg">How to Make a Pencil Holder from Used Plastic Bottles</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed">
<b>Goal:</b> Turning unused plastic bottles into a useful desk organizer.<br>
<b>Tools & Materials:</b> An empty plastic bottle, cutter, scissors, colorful papers, glue.<br>
<b>Steps:</b><br>
1. <b>First</b>, wash the empty plastic bottle and dry it completely.<br>
2. <b>Second</b>, cut the bottom half of the bottle carefully using scissors.<br>
3. <b>Then</b>, wrap the outside of the bottle with colorful paper using glue.<br>
4. <b>Finally</b>, put your pencils and pens inside your new pencil holder!
</p>
</div>
</div>
</div>
<!-- Slide 7: Kosakata Tambahan (Vocabulary Booster) -->
<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">Slide 7: Kosakata Penting (Vocabulary Booster) 📚</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kata kerja dan istilah yang sering muncul dalam teks prosedur.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-emerald-800">Action Verbs (Kata Kerja Tindakan)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>Cut:</b> Memotong</li>
<li>• <b>Fold:</b> Melipat</li>
<li>• <b>Glue:</b> Menempelkan / Mengelem</li>
<li>• <b>Wrap:</b> Membungkus</li>
<li>• <b>Wash:</b> Mencuci</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Sequence Connectors (Kata Urutan)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>First:</b> Pertama</li>
<li>• <b>Second:</b> Kedua</li>
<li>• <b>Next / Then:</b> Selanjutnya / Lalu</li>
<li>• <b>After that:</b> Setelah itu</li>
<li>• <b>Finally:</b> Terakhir / Akhirnya</li>
</ul>
</div>
</div>
</div>
<!-- Slide 8: BATTLE PANEL MULTI-USER (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan teks prosedur ini secepat mungkin.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>♻️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-100 text-center">
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>📦 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-100 text-center">
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🎨 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-green-50 p-4 rounded-2xl border-2 border-green-100 text-center">
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-teal-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#047857] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Bab 3 (TP 4)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang teks prosedur memilah sampah dan kerajinan!</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-800 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">Bab 3 Completed! 🎉</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-500 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 10: Refleksi Akhir Bab 3 -->
<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">Slide 10: Refleksi Akhir Bab 3 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah menuntaskan seluruh materi Bab 3 (Home Sweet Home)?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan satu hal baru yang paling menarik dari materi kerajinan atau pemilahan sampah:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .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); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "What is the main purpose of a procedure text?", opts: ["To explain how to make or do something", "To tell a fictional story", "To describe a specific person"], ans: 0 },
{ q: "Which one is part of the generic structure of a procedure text?", opts: ["Goal, Materials, Steps", "Orientation, Complication", "Identification, Description"], ans: 0 },
{ q: "Words like 'First, Next, Then, Finally' are called...", opts: ["Sequence connectors", "Nouns", "Pronouns"], ans: 0 },
{ q: "In sorting waste, food scraps should be put into...", opts: ["Organic bin", "Inorganic bin", "Pencil case"], ans: 0 },
{ q: "To make a pencil holder from a bottle, what tool is used to cut it?", opts: ["Scissors or cutter", "Spoon", "Pillow"], ans: 0 },
{ q: "Which word is an action verb in a craft procedure?", opts: ["Cut", "Happy", "Tall"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "What is the primary purpose of a procedure text?",
options: ["To explain how to do or make something step by step", "To entertain readers with a funny story", "To describe a specific animal", "To report breaking news"],
a: 0,
exp: "Tujuan utama teks prosedur adalah menjelaskan cara melakukan atau membuat sesuatu langkah demi langkah."
},
{
q: "Which part of a procedure text lists the things needed?",
options: ["Goal", "Materials / Tools", "Orientation", "Conclusion"],
a: 1,
exp: "Bagian 'Materials / Tools' berisi daftar bahan dan alat yang diperlukan."
},
{
q: "In sorting waste, plastic bottles and papers should be placed into...",
options: ["Organic bin", "Inorganic bin", "Water tank", "Wardrobe"],
a: 1,
exp: "Botol plastik dan kertas adalah sampah anorganik (inorganic waste)."
},
{
q: "What do we call words like 'First, Second, Next, Finally' in a procedure text?",
options: ["Action verbs", "Sequence connectors", "Adjectives", "Pronouns"],
a: 1,
exp: "Kata-kata tersebut disebut sebagai sequence connectors (penghubung urutan)."
},
{
q: "When making a pencil holder from a plastic bottle, what is the first step?",
options: ["Wash the empty plastic bottle and dry it", "Throw it into the river", "Paint your bedroom", "Cook some rice"],
a: 0,
exp: "Langkah pertama yang benar adalah mencuci botol plastik kosong dan mengeringkannya."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bab 3 TP 4 (10 Slides): " + refleksi,
strategi: "Evaluasi: Bab 3 TP 4 Procedure Text"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Home Sweet Home : 3 Imperative Sentences for House Cleaning
Mulai Belajar Sekarang
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Imperative Sentences for House Cleaning 🧽🧹</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(#dcfce7 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; }
.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="megaphone" 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">Bab 3 - TP 3: Imperative Sentences for Cleaning</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Imperative Sentences: <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">House Cleaning Instructions</span> 📢🧼
</h1>
<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>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-emerald-600">merespon dan menggunakan kalimat perintah (imperative sentences)</span> untuk memberikan <span class="text-emerald-600">instruksi terkait kebersihan rumah</span> sesuai konteks.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's give instructions! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Kalimat Perintah (Imperative) -->
<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: Apa itu Imperative Sentences? ⚡</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengenal bentuk kalimat perintah positif dan negatif.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-emerald-800">Positive Imperative (+)</h4>
<p class="text-slate-600 font-bold text-sm">Diawali langsung dengan kata kerja dasar (Verb-1).</p>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>Sweep the floor!</b> (Sapu lantainya!)</li>
<li>• <b>Clean your bedroom!</b> (Bersihkan kamarmu!)</li>
<li>• <b>Wash the dishes!</b> (Cuci piringnya!)</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Negative Imperative (-)</h4>
<p class="text-slate-600 font-bold text-sm">Diawali dengan kata <b>"Don't"</b> untuk melarang.</p>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>Don't litter!</b> (Jangan membuang sampah sembarangan!)</li>
<li>• <b>Don't make a mess!</b> (Jangan membuat berantakan!)</li>
<li>• <b>Don't leave dirty clothes!</b> (Jangan tinggalkan baju kotor!)</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika ibumu menyuruhmu untuk segera merapikan meja belajar dan tidak meninggalkan sampah di sana, kalimat perintah apa yang akan diucapkan?"
</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">Ibu bisa berkata: <span class="text-emerald-600 font-black">"Clean your study desk and don't leave any trash!"</span></p>
</div>
</div>
<!-- Slide 4: Materi Inti - Instruksi Kebersihan Rumah -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Instruksi Kebersihan Rumah 🏡🧼</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md space-y-6">
<p class="text-lg font-bold text-slate-700">Berikut adalah contoh kalimat instruksi yang sering digunakan untuk menjaga kebersihan rumah:</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 space-y-3">
<h4 class="font-black text-emerald-900 text-lg">Di Ruang Tamu & Kamar Tidur</h4>
<ul class="space-y-2 text-xs md:text-sm font-bold text-slate-700">
<li>• <i>"Make your bed every morning."</i> (Rapikan tempat tidurmu setiap pagi.)</li>
<li>• <i>"Put the books on the bookshelf."</i> (Letakkan buku-buku di rak buku.)</li>
<li>• <i>"Tidy up the living room."</i> (Rapikan ruang tamu.)</li>
</ul>
</div>
<div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-200 space-y-3">
<h4 class="font-black text-teal-900 text-lg">Di Dapur & Halaman</h4>
<ul class="space-y-2 text-xs md:text-sm font-bold text-slate-700">
<li>• <i>"Wash the plates after eating."</i> (Cuci piring setelah makan.)</li>
<li>• <i>"Take out the trash now."</i> (Buang sampahnya sekarang.)</li>
<li>• <i>"Sweep the yard cleanly."</i> (Sapu halaman dengan bersih.)</li>
</ul>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Mini Kuis Praktik Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">Temanmu membuang sampah sembarangan. Teguran larangan (negative imperative) yang tepat adalah...</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, itu bukan kalimat larangan.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">Sweep the floor</button>
<button onclick="alert('Hebat! Benar, \"Don\'t litter!\" adalah larangan membuang sampah sembarangan.')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl hover:bg-emerald-700">Don't litter! ✅</button>
</div>
</div>
</div>
</div>
<!-- Slide 5: BATTLE PANEL MULTI-USER (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan kalimat perintah kebersihan ini secepat mungkin.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>📢 KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-100 text-center">
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🧹 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-100 text-center">
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🧼 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-green-50 p-4 rounded-2xl border-2 border-green-100 text-center">
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-teal-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#047857] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 6: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Bab 3 (TP 3)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang kalimat perintah kebersihan rumah!</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-800 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-500 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 7: Refleksi (Paling Akhir) -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari kalimat perintah kebersihan rumah hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan satu contoh kalimat perintah atau larangan terkait kebersihan rumah:</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="Contoh: Don't litter! atau Sweep the floor..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .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); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "An imperative sentence always starts with...", opts: ["Verb-1 (kata kerja dasar)", "A pronoun (I/you)", "A conjunction"], ans: 0 },
{ q: "Which sentence is a negative imperative (larangan)?", opts: ["Sweep the floor!", "Don't litter!", "Wash the dishes!"], ans: 1 },
{ q: "Mother says: '... the trash outside.' (buang sampah ke luar)", opts: ["Take out", "Eat", "Sleep"], ans: 0 },
{ q: "Which one is an instruction to clean the bedroom?", opts: ["Make your bed", "Drive a car", "Swim in the pool"], ans: 0 },
{ q: "To tell someone not to make a room dirty, we say...", opts: ["Don't make a mess!", "Clean the messy room!", "Make it dirty!"], ans: 0 },
{ q: "Which word starts a negative imperative sentence?", opts: ["Don't", "Do", "Are"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Which sentence is a correct positive imperative for cleaning?",
options: ["You sweep the floor", "Sweep the floor!", "Sweeping the floor", "He sweeps the floor"],
a: 1,
exp: "Kalimat perintah positif diawali langsung dengan kata kerja dasar (Verb-1) seperti 'Sweep the floor!'."
},
{
q: "Which sentence is a negative imperative (larangan) to keep the house clean?",
options: ["Clean your room!", "Don't throw rubbish everywhere!", "Wash the dishes!", "Make your bed!"],
a: 1,
exp: "'Don't throw rubbish everywhere!' adalah bentuk larangan (negative imperative)."
},
{
q: "Father says: '... the window because it is dusty.'",
options: ["Clean", "Cleans", "Cleaning", "Cleaned"],
a: 0,
exp: "Kalimat perintah menggunakan bentuk dasar kata kerja (Verb-1) yaitu 'Clean'."
},
{
q: "What is the function of imperative sentences in daily context?",
options: ["To ask a question", "To give instructions or commands", "To tell a past story", "To express a feeling"],
a: 1,
exp: "Fungsi kalimat imperatif adalah untuk memberikan instruksi atau perintah."
},
{
q: "To tell someone to put the books back on the shelf, we say...",
options: ["Put the books on the shelf!", "Take the books away!", "Hide the books!", "Don't read books!"],
a: 0,
exp: "'Put the books on the shelf!' adalah instruksi yang tepat untuk merapikan buku."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bab 3 TP 3: " + refleksi,
strategi: "Evaluasi: Bab 3 TP 3 Imperative Sentences"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Home Sweet Home : 2 House Chores & Simple Present Tense
Mulai Belajar Sekarang
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: House Chores & Simple Present Tense 🧹</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(#dcfce7 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; }
.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="check-square" 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">Bab 3 - TP 2: House Chores & Simple Present Tense</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
House Chores & <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Simple Present Tense</span> 🧹✨
</h1>
<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>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu memahami informasi tersurat dari teks tulis dan mengomunikasikan pengalaman tentang <span class="text-emerald-600">pekerjaan rumah tangga (house chores)</span> menggunakan <span class="text-emerald-600">Simple Present Tense</span> dalam kalimat sederhana dan majemuk.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's clean our house! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Kosakata House Chores -->
<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: Kosakata House Chores (Pekerjaan Rumah) 🧽</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengenal berbagai aktivitas rutin membersihkan rumah.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-emerald-800">Common Chores (Pekerjaan Umum)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>Sweep the floor:</b> Menyapu lantai</li>
<li>• <b>Mop the floor:</b> Mengepel lantai</li>
<li>• <b>Wash the dishes:</b> Mencuci piring</li>
<li>• <b>Make the bed:</b> Merapikan tempat tidur</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Other Chores (Pekerjaan Lainnya)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>Water the plants:</b> Menyirami tanaman</li>
<li>• <b>Take out the trash:</b> Membuang sampah</li>
<li>• <b>Iron the clothes:</b> Menyetrika pakaian</li>
<li>• <b>Clean the window:</b> Membersihkan jendela</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Bagaimana cara kamu menceritakan kebiasaan atau rutinitas harianmu membersihkan rumah setiap pagi dalam Bahasa Inggris?"
</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">Kita menggunakan <span class="text-emerald-600 font-black">Simple Present Tense</span> (bentuk kalimat untuk kebiasaan atau rutinitas).</p>
</div>
</div>
<!-- Slide 4: Materi Inti - Simple Present Tense (Positif, Negatif, Tanya) -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Simple Present Tense untuk Rutinitas ⚡</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md space-y-6">
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-base">1. Kalimat Positif (+)</h4>
<p class="text-xs font-bold text-slate-700">Subjek (I/You/We/They) + Verb-1<br>Subjek (He/She/It) + Verb-s/es</p>
<p class="text-xs font-bold text-emerald-800 bg-white p-2 rounded-lg">Contoh: <i>"She sweeps the floor every morning."</i></p>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-base">2. Kalimat Negatif (-)</h4>
<p class="text-xs font-bold text-slate-700">Subjek + <b>don't / doesn't</b> + Verb-1</p>
<p class="text-xs font-bold text-teal-800 bg-white p-2 rounded-lg">Contoh: <i>"I don't wash the dishes at night."</i></p>
</div>
<div class="bg-green-50 p-4 rounded-2xl border-2 border-green-200 space-y-2">
<h4 class="font-black text-green-900 text-base">3. Kalimat Tanya (?)</h4>
<p class="text-xs font-bold text-slate-700"><b>Do / Does</b> + Subjek + Verb-1?</p>
<p class="text-xs font-bold text-green-800 bg-white p-2 rounded-lg">Contoh: <i>"Do you clean your room?"</i></p>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Mini Kuis Praktik Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">"Budi ... the floor every afternoon." Kata kerja yang tepat untuk melengkapi kalimat adalah...</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, subjek Budi (He) membutuhkan tambahan -s/-es pada verb.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">sweep</button>
<button onclick="alert('Hebat! Benar, untuk subjek tunggal orang ketiga (Budi), verb-nya ditambah -s menjadi sweeps.')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl hover:bg-emerald-700">sweeps ✅</button>
</div>
</div>
</div>
</div>
<!-- Slide 5: BATTLE PANEL MULTI-USER (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan tentang pekerjaan rumah ini secepat mungkin.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🧹 KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-100 text-center">
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🧽 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-100 text-center">
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>✨ KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-green-50 p-4 rounded-2xl border-2 border-green-100 text-center">
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-teal-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#047857] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 6: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Bab 3 (TP 2)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang house chores dan simple present tense!</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-800 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-500 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 7: Refleksi (Paling Akhir) -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari pekerjaan rumah tangga hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan satu pekerjaan rumah yang biasa kamu lakukan setiap hari:</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="Contoh: I sweep the floor every morning..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .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); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "What is 'menyapu lantai' in English?", opts: ["Sweep the floor", "Wash the dishes", "Make the bed"], ans: 0 },
{ q: "She ... the dishes after dinner every night.", opts: ["wash", "washes", "washing"], ans: 1 },
{ q: "I ... sweep the floor in the morning (bentuk negatif).", opts: ["don't", "doesn't", "isn't"], ans: 0 },
{ q: "What does 'water the plants' mean?", opts: ["Menyirami tanaman", "Mencuci pakaian", "Membuang sampah"], ans: 0 },
{ q: "He ... his bed every morning.", opts: ["make", "makes", "making"], ans: 1 },
{ q: "... you clean your room on Sunday?", opts: ["Do", "Does", "Is"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Mother ... the clothes every morning.",
options: ["iron", "irons", "ironing", "ironed"],
a: 1,
exp: "Subjek 'Mother' (kata ganti She) menggunakan bentuk verb+s/-es yaitu 'irons' dalam Simple Present Tense."
},
{
q: "I ... not wash the dishes in the afternoon.",
options: ["do", "does", "is", "are"],
a: 0,
exp: "Subjek 'I' pada kalimat negatif Simple Present Tense menggunakan 'do not (don't)'."
},
{
q: "What does 'sweep the floor' mean in Indonesian?",
options: ["Mencuci piring", "Menyapu lantai", "Mengepel lantai", "Menyirami tanaman"],
a: 1,
exp: "'Sweep the floor' artinya menyapu lantai."
},
{
q: "Does Andi ... his bedroom every morning?",
options: ["clean", "cleans", "cleaning", "cleaned"],
a: 0,
exp: "Dalam kalimat tanya Simple Present Tense yang sudah menggunakan 'Does', kata kerja kembali ke bentuk dasar (Verb-1) yaitu 'clean'."
},
{
q: "Which sentence uses Simple Present Tense correctly for daily routine?",
options: ["They sweeps the floor", "We waters the plants", "He makes his bed every day", "She wash the dishes"],
a: 2,
exp: "'He makes his bed every day' adalah struktur kalimat positif Simple Present Tense yang tepat untuk subjek tunggal orang ketiga."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bab 3 TP 2: " + refleksi,
strategi: "Evaluasi: Bab 3 TP 2 House Chores"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Home Sweet Home : 1 Home Sweet Home (Rooms & There is/There are)
Mulai Belajar Sekarang
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Home Sweet Home (Rooms & There is/There are) 🏠</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(#dcfce7 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; }
.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="home" 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">Bab 3 - TP 1: Rooms, Furniture & There is/There are</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Home Sweet Home: <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Rooms & Furniture</span> 🏡🛏️
</h1>
<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>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu memahami informasi rinci dari teks lisan dan mengungkapkan gagasan secara lisan untuk mendeskripsikan <span class="text-emerald-600">berbagai ruangan dan perabotan</span> menggunakan kosakata, preposisi, dan struktur kalimat <span class="text-emerald-600">There is/There are</span> yang sesuai konteks.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's explore our house! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Ruangan & Perabotan -->
<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: Rooms & Furniture (Ruangan & Perabotan) 🛋️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengenal bagian-bagian rumah dan isinya dalam bahasa Inggris.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-emerald-800">Rooms (Ruangan Rumah)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>Living room:</b> Ruang tamu</li>
<li>• <b>Bed room:</b> Kamar tidur</li>
<li>• <b>Kitchen:</b> Dapur</li>
<li>• <b>Bathroom:</b> Kamar mandi</li>
<li>• <b>Dining room:</b> Ruang makan</li>
</ul>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-teal-800">Furniture (Perabotan)</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b>Sofa / Couch:</b> Sofa (di ruang tamu)</li>
<li>• <b>Bed:</b> Tempat tidur (di kamar tidur)</li>
<li>• <b>Stove:</b> Kompor (di dapur)</li>
<li>• <b>Refrigerator:</b> Kulkas</li>
<li>• <b>Wardrobe:</b> Lemari pakaian</li>
</ul>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kamu ingin memberitahu temanmu bahwa ada satu buah tempat tidur di kamarmu, atau ada banyak buku di atas meja, frasa Bahasa Inggris apa yang harus kamu gunakan?"
</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">Kita menggunakan <span class="text-emerald-600 font-black">"There is"</span> untuk benda tunggal (singular) dan <span class="text-emerald-600 font-black">"There are"</span> untuk benda jamak (plural).</p>
</div>
</div>
<!-- Slide 4: Materi Inti - There is / There are & Prepositions of Place -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi 1: There is/There are & Prepositions 📍</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-emerald-50 p-5 rounded-2xl border-2 border-emerald-200 space-y-2">
<h4 class="font-black text-emerald-900 text-lg">1. Penggunaan There is & There are</h4>
<ul class="text-xs md:text-sm font-bold text-slate-700 space-y-2">
<li>• <b>There is</b> + benda tunggal (Contoh: <i>There is a bed in my bedroom.</i>)</li>
<li>• <b>There are</b> + benda jamak/banyak (Contoh: <i>There are two chairs in the kitchen.</i>)</li>
</ul>
</div>
<div class="bg-teal-50 p-5 rounded-2xl border-2 border-teal-200 space-y-2">
<h4 class="font-black text-teal-900 text-lg">2. Prepositions of Place (Preposisi Tempat)</h4>
<ul class="text-xs md:text-sm font-bold text-slate-700 space-y-2">
<li>• <b>In:</b> Di dalam (Contoh: <i>in the room</i>)</li>
<li>• <b>On:</b> Di atas permukaan (Contoh: <i>on the table</i>)</li>
<li>• <b>Under:</b> Di bawah (Contoh: <i>under the bed</i>)</li>
<li>• <b>Next to:</b> Di sebelah (Contoh: <i>next to the sofa</i>)</li>
</ul>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Mini Kuis Praktik Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">"There ... three books on the table." Kata yang tepat untuk melengkapi kalimat tersebut adalah...</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, is digunakan untuk benda tunggal.')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">is</button>
<button onclick="alert('Hebat! Benar, are digunakan karena three books berjumlah jamak (plural).')" class="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl hover:bg-emerald-700">are ✅</button>
</div>
</div>
</div>
</div>
<!-- Slide 5: BATTLE PANEL MULTI-USER (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan tentang ruangan dan there is/there are ini secepat mungkin.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🏠 KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-100 text-center">
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🛋️ KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-100 text-center">
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🛏️ KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-green-50 p-4 rounded-2xl border-2 border-green-100 text-center">
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-teal-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#047857] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 6: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Bab 3 (TP 1)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang ruangan, perabotan, dan there is/there are!</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-800 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-500 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
<!-- Slide 7: Refleksi (Paling Akhir) -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah mendeskripsikan ruangan dan perabotan rumah hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan satu kalimat menggunakan 'There is' atau 'There are' tentang kamarmu:</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="Contoh: There is a bed and a desk in my room..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .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); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Where do we usually cook food?", opts: ["Kitchen", "Bathroom", "Living room"], ans: 0 },
{ q: "There ... a bed in my bedroom.", opts: ["is", "are", "am"], ans: 0 },
{ q: "There ... three chairs in the dining room.", opts: ["is", "are", "be"], ans: 1 },
{ q: "Where do we put our clothes?", opts: ["Wardrobe (lemari)", "Stove", "Bed"], ans: 0 },
{ q: "The cat is sleeping ... the table (di bawah meja).", opts: ["on", "under", "in"], ans: 1 },
{ q: "We take a bath in the...", opts: ["Bathroom", "Kitchen", "Living room"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "There ... a big sofa in our living room.",
options: ["is", "are", "am", "be"],
a: 0,
exp: "Subjek 'a big sofa' bersifat tunggal (singular), sehingga menggunakan 'is'."
},
{
q: "Where do we usually wash our body and take a bath?",
options: ["Kitchen", "Bathroom", "Living room", "Garage"],
a: 1,
exp: "Kamar mandi (bathroom) adalah tempat untuk mandi."
},
{
q: "There ... four windows and a door in my classroom.",
options: ["is", "are", "am", "be"],
a: 1,
exp: "Subjek 'four windows' bersifat jamak (plural), sehingga menggunakan 'are'."
},
{
q: "The cat is sleeping ... the bed (di atas tempat tidur).",
options: ["in", "on", "under", "between"],
a: 1,
exp: "Preposisi 'on' digunakan untuk menunjukkan posisi di atas permukaan."
},
{
q: "Which one is an example of kitchen furniture/equipment?",
options: ["Bed", "Stove", "Sofa", "Wardrobe"],
a: 1,
exp: "Kompor (stove) adalah peralatan yang ada di dapur."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bab 3 TP 1: " + refleksi,
strategi: "Evaluasi: Bab 3 TP 1 Home Sweet Home"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Culinary and Me : 5 Writing & Presenting a Simple Recipe
Mulai Belajar Sekarang
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Writing & Presenting a Simple Recipe 📝🍳</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fff7ed;
background-image: radial-gradient(#ffedd5 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; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-orange-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-orange-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="chef-hat" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-orange-800 uppercase tracking-widest">Bab 2 - TP 5: Writing & Presenting a Recipe</span>
<span id="progress-text" class="text-xs font-black text-white bg-orange-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-orange-100 text-orange-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Write & Present: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600">My Own Recipe</span> ✍️🎤
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-orange-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Pembelajaran:</h3>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-orange-600">mengomunikasikan gagasan dalam bentuk teks prosedur tertulis</span> menggunakan kalimat sederhana dan majemuk tentang cara membuat makanan, serta <span class="text-orange-600">menyajikannya secara lisan</span>.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's become a master chef! 👇</p>
</div>
</div>
<!-- Slide 2: Kalimat Sederhana & Majemuk (Simple & Compound Sentences) -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Kalimat Sederhana & Majemuk 🔗</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menggabungkan ide dalam menulis resep.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-orange-800">Simple Sentence (Kalimat Sederhana)</h4>
<p class="text-slate-600 font-bold text-sm">Memiliki satu gagasan utuh (Subjek + Predikat).</p>
<p class="text-xs font-bold text-orange-700 bg-orange-50 p-2 rounded-lg">Contoh: "Cut the onion." atau "Heat the oil."</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-amber-800">Compound Sentence (Kalimat Majemuk)</h4>
<p class="text-slate-600 font-bold text-sm">Menggabungkan dua kalimat dengan kata hubung (*and, but, because*).</p>
<p class="text-xs font-bold text-amber-700 bg-amber-50 p-2 rounded-lg">Contoh: "Slice the onion, <b>and</b> fry it until fragrant."</p>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kamu diminta mempraktikkan cara membuat es teh manis di depan kelas sambil berbicara dalam Bahasa Inggris, kalimat pembuka apa yang akan kamu gunakan?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Kamu bisa mulai dengan: <span class="text-orange-600 font-black">"Hello everyone, today I will show you how to make..."</span></p>
</div>
</div>
<!-- Slide 4: Materi Inti - Contoh Resep Tertulis & Presentasi Lisan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Menulis & Presentasi Resep 📝🗣️</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md space-y-5">
<div class="bg-orange-50 p-6 rounded-2xl border-2 border-orange-200 space-y-3">
<h4 class="font-black text-orange-900 text-lg">Contoh Teks Prosedur Sederhana:</h4>
<p class="text-slate-700 font-bold text-sm leading-relaxed italic">
"<b>How to Make Sweet Tea</b><br>
<b>Ingredients:</b> A bag of tea, hot water, sugar, and ice cubes.<br>
<b>Steps:</b><br>
1. Put the tea bag into a glass of hot water.<br>
2. Add two spoons of sugar, <b>and</b> stir it well.<br>
3. Add some ice cubes <b>because</b> it is better to drink it cold."
</p>
</div>
<div class="bg-amber-50 p-5 rounded-2xl border-2 border-amber-200 space-y-2">
<h4 class="font-black text-amber-900 text-base">Tips Presentasi Lisan (Oral Presentation):</h4>
<ul class="text-xs md:text-sm font-bold text-slate-700 space-y-1 list-disc list-inside">
<li>Gunakan intonasi yang jelas dan percaya diri.</li>
<li>Gunakan kata sambung urutan: <i>First, Second, Next, Finally</i>.</li>
<li>Tutup presentasi dengan ucapan terima kasih: <i>"Thank you for watching!"</i></li>
</ul>
</div>
</div>
</div>
<!-- Slide 5: BATTLE PANEL MULTI-USER (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan resep dan kalimat majemuk ini secepat mungkin.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-orange-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-orange-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>✍️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-orange-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-orange-50 p-4 rounded-2xl border-2 border-orange-100 text-center">
<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>
</div>
<!-- KELOMPOK 2 -->
<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-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🎤 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-amber-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center">
<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>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-yellow-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-yellow-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>⭐ KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-yellow-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-yellow-50 p-4 rounded-2xl border-2 border-yellow-100 text-center">
<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>
</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-orange-300 to-amber-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-orange-600 hover:bg-orange-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9a3412] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 6: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Bab 2 (TP 5)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji akhir kompetensi penulisan dan penyajian resep sederhana!</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-orange-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-orange-700 bg-orange-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-orange-900 mb-2">Bab 2 Completed!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-orange-500 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-orange-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-orange-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-orange-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-orange-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-orange-500 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>
<!-- Slide 7: Refleksi (Paling Akhir) -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Akhir Bab 2 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah menuntaskan seluruh materi Bab 2 (Culinary and Me)?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan kesan atau resep makanan apa yang paling ingin kamu coba buat:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-orange-50 border-2 border-orange-200 focus:border-orange-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-orange-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-orange-600 shadow-[0_4px_0px_#c2410c]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "Which word is a conjunction used in compound sentences?", opts: ["And / But", "Cut", "Pan"], ans: 0 },
{ q: "What is a good opening phrase for presenting a recipe?", opts: ["Today I will show you how to make...", "Goodbye everyone", "Stop cooking"], ans: 0 },
{ q: "Which one is a compound sentence?", opts: ["Cut the onion.", "Slice the onion, and fry it.", "The onion is red."], ans: 1 },
{ q: "What should you say at the end of your presentation?", opts: ["Thank you for watching", "I don't like food", "Open the door"], ans: 0 },
{ q: "To show sequence in steps, we can use words like...", opts: ["First, Second, Next", "Tall, Short, Big", "Sweet, Sour, Salty"], ans: 0 },
{ q: "A simple sentence consists of...", opts: ["One complete thought (Subjek + Predikat)", "Five paragraphs", "Only numbers"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "Which one is a compound sentence (kalimat majemuk) using a conjunction?",
options: ["Boil the water.", "Mix the flour and sugar, and stir it well.", "The water is hot.", "Cut the potatoes."],
a: 1,
exp: "Kalimat majemuk menggabungkan dua klausa menggunakan kata sambung seperti 'and'."
},
{
q: "When you present your recipe in front of the class, a good opening is...",
options: ["Good morning friends, today I will show you how to make...", "Go away", "I hate cooking", "Silence please"],
a: 0,
exp: "Kalimat pembuka yang sopan dan sesuai konteks resep adalah menyapa dan menjelaskan hal yang akan dibuat."
},
{
q: "Which conjunction is best to show reason (alasan) in a sentence?",
options: ["and", "but", "because", "or"],
a: 2,
exp: "'Because' digunakan untuk menyatakan alasan."
},
{
q: "What is the final step when presenting a recipe orally?",
options: ["Saying thank you to the audience", "Running away", "Eating all the food immediately", "Crying"],
a: 0,
exp: "Menutup presentasi dengan ucapan terima kasih adalah bentuk etika komunikasi yang baik."
},
{
q: "In writing a simple recipe, sequence words like 'First, Next, Then, Finally' are used to...",
options: ["Describe a person's physical appearance", "Show the order of steps clearly", "State personal feelings", "Count money"],
a: 1,
exp: "Sequence words digunakan untuk menunjukkan urutan langkah-langkah secara runtut."
}
];
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-orange-50 hover:border-orange-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bab 2 TP 5: " + refleksi,
strategi: "Evaluasi: Bab 2 TP 5 Writing & Presenting"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Inggris
Culinary and Me : 4 Procedure Text (Recipe & Imperative Sentences) 🍳
Mulai Belajar Sekarang
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Inggris Kelas 7: Procedure Text (Recipe & Imperative Sentences) 🍳</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fff7ed;
background-image: radial-gradient(#ffedd5 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; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-orange-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-orange-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="list-ordered" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-orange-800 uppercase tracking-widest">Bab 2 - TP 4: Procedure Text (Recipe & Imperative)</span>
<span id="progress-text" class="text-xs font-black text-white bg-orange-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-orange-100 text-orange-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D • Kurikulum Merdeka
</div>
<h1 class="text-4xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Procedure Text: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600">Recipe & Imperative Sentences</span> 🍳📜
</h1>
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-orange-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Pembelajaran:</h3>
<p class="text-lg font-bold text-slate-600 leading-relaxed">
Peserta didik mampu <span class="text-orange-600">mengidentifikasi struktur teks dan unsur kebahasaan (kalimat imperatif)</span> dari sebuah teks prosedur (resep): tujuan, bahan/alat, langkah-langkah.
</p>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Let's learn how to cook through text! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Struktur Teks Prosedur -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Struktur Teks Prosedur (Recipe) 📋</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagian-bagian penting dalam sebuah resep masakan.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-orange-800">1. Goal / Title</h4>
<p class="text-slate-600 font-bold text-sm">Judul atau tujuan pembuatan makanan.</p>
<p class="text-xs font-bold text-orange-700 bg-orange-50 p-2 rounded-lg">Contoh: "How to Make Fried Rice"</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-amber-800">2. Ingredients & Tools</h4>
<p class="text-slate-600 font-bold text-sm">Bahan-bahan dan alat yang dibutuhkan.</p>
<p class="text-xs font-bold text-amber-700 bg-amber-50 p-2 rounded-lg">Contoh: Rice, egg, pan, stove.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-yellow-200 shadow-sm space-y-3">
<h4 class="font-black text-xl text-yellow-800">3. Steps / Methods</h4>
<p class="text-slate-600 font-bold text-sm">Langkah-langkah pembuatan secara berurutan.</p>
<p class="text-xs font-bold text-yellow-700 bg-yellow-50 p-2 rounded-lg">Contoh: First, heat the oil. Second...</p>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Jika kamu membaca kalimat instruksi dalam resep seperti: 'Cut the onions' atau 'Heat the oil', jenis kalimat apakah itu dan apa fungsinya?"
</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">Kalimat tersebut adalah <span class="text-orange-600 font-black">kalimat perintah (imperative sentence)</span> yang selalu diawali dengan kata kerja (*verb*).</p>
</div>
</div>
<!-- Slide 4: Materi Inti - Kalimat Imperatif (Imperative Sentences) -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Materi 1: Kalimat Imperatif (Imperative Sentences) ⚡</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md space-y-6">
<p class="text-lg font-bold text-slate-700">Kalimat imperatif adalah kalimat perintah untuk menyuruh seseorang melakukan sesuatu. Dalam resep, kalimat ini selalu diawali dengan <b>kata kerja bentuk pertama (Verb-1)</b>.</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-orange-50 p-5 rounded-2xl border-2 border-orange-200 space-y-3">
<h4 class="font-black text-orange-900 text-lg">Contoh Kata Kerja dalam Resep:</h4>
<ul class="space-y-2 text-slate-700 font-bold text-sm">
<li>• <b class="text-orange-600">Cut:</b> Potong</li>
<li>• <b class="text-orange-600">Heat:</b> Panaskan</li>
<li>• <b class="text-orange-600">Mix:</b> Aduk / Campurkan</li>
<li>• <b class="text-orange-600">Pour:</b> Tuangkan</li>
<li>• <b class="text-orange-600">Stir:</b> Aduk</li>
</ul>
</div>
<div class="bg-amber-50 p-5 rounded-2xl border-2 border-amber-200 space-y-3">
<h4 class="font-black text-amber-900 text-lg">Contoh Kalimat Imperatif:</h4>
<ul class="space-y-2 text-slate-700 font-bold text-xs md:text-sm">
<li>• <i>"<b class="text-orange-600">Heat</b> the oil in a pan."</i> (Panaskan minyak di wajan.)</li>
<li>• <i>"<b class="text-orange-600">Slice</b> the onions thinly."</i> (Iris tipis bawang merah.)</li>
<li>• <i>"<b class="text-orange-600">Mix</b> the ingredients together."</i> (Campurkan bahan-bahan tersebut.)</li>
</ul>
</div>
</div>
<div class="bg-slate-50 p-5 rounded-2xl border-2 border-slate-200 space-y-2">
<h4 class="font-black text-slate-800">Mini Kuis Praktik Cepat:</h4>
<p class="text-slate-700 font-bold text-sm">Manakah kalimat di bawah ini yang merupakan kalimat imperatif (perintah)?</p>
<div class="flex gap-3">
<button onclick="alert('Kurang tepat, kalimat tersebut adalah pernyataan (declarative).')" class="px-4 py-2 bg-white border-2 border-slate-300 font-bold rounded-xl hover:bg-slate-100">I like fried rice</button>
<button onclick="alert('Hebat! Benar, diawali dengan kata kerja \"Add\" yang berarti perintah.')" class="px-4 py-2 bg-orange-500 text-white font-bold rounded-xl hover:bg-orange-600">Add some salt to the pan ✅</button>
</div>
</div>
</div>
</div>
<!-- Slide 5: BATTLE PANEL MULTI-USER (3 Kelompok, @5 Soal) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 tracking-wide uppercase">⚡ BATTLE PANEL MULTI-USER (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan teks prosedur ini secepat mungkin.</p>
</div>
<!-- Layar Dibagi 3 Kolom Mandiri (Multi-User) -->
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-orange-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-orange-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🍳 KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-orange-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-orange-50 p-4 rounded-2xl border-2 border-orange-100 text-center">
<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>
</div>
<!-- KELOMPOK 2 -->
<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-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>📜 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-amber-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center">
<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>
</div>
<!-- KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-yellow-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-yellow-500 text-white py-2 px-4 flex justify-between items-center font-black">
<span>⚡ KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-yellow-700 px-3 py-0.5 rounded-full text-sm">Soal 1/5</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-yellow-50 p-4 rounded-2xl border-2 border-yellow-100 text-center">
<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>
</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-orange-300 to-amber-500 mb-6 drop-shadow-lg">JUARA KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-orange-600 hover:bg-orange-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9a3412] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 6: Ujian Akhir Individu & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir TP 4 (Procedure Text)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahamanmu tentang struktur teks prosedur dan kalimat imperatif!</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-orange-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-orange-700 bg-orange-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-orange-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Individu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-orange-500 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-orange-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-orange-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim nilai hasil ujianmu ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-orange-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-orange-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-orange-500 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>
<!-- Slide 7: Refleksi (Paling Akhir) -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana perasaanmu setelah mempelajari struktur teks prosedur dan kalimat perintah hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan contoh satu kalimat imperatif (perintah) yang biasa ada di resep memasak:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-orange-50 border-2 border-orange-200 focus:border-orange-500 outline-none font-medium" rows="3" placeholder="Contoh: Slice the onion..."></textarea>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-orange-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-orange-600 shadow-[0_4px_0px_#c2410c]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// ==========================================
// MULTI-USER IFP GAME (3 Kelompok, @5 Soal)
// ==========================================
let ifpProgress = { 1: 0, 2: 0, 3: 0 };
const TOTAL_IFP_QUESTIONS = 5;
const multiUserBank = [
{ q: "What is the main purpose of a procedure text (recipe)?", opts: ["To tell a story", "To explain how to make or do something", "To describe a person"], ans: 1 },
{ q: "Which one is part of the structure of a procedure text?", opts: ["Goal, Ingredients, Steps", "Identification, Description", "Orientation, Complication"], ans: 0 },
{ q: "An imperative sentence always starts with...", opts: ["A verb-1 (kata kerja)", "A noun", "An adjective"], ans: 0 },
{ q: "Which one is an imperative sentence?", opts: ["She cooks rice", "Heat the oil", "The food is delicious"], ans: 1 },
{ q: "What does 'slice' mean in a recipe?", opts: ["Memotong tipis", "Merebus", "Mencuci"], ans: 0 },
{ q: "The steps in a recipe are usually written in...", opts: ["Chronological order (berurutan)", "Random order", "Alphabetical order"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
if(ifpProgress[group] >= TOTAL_IFP_QUESTIONS) {
document.getElementById(`ifp-q-${group}`).innerHTML = `🎉 SELESAI!<br>Kelompok ${group} menuntaskan 5 soal!`;
document.getElementById(`ifp-opts-${group}`).innerHTML = "";
checkWinnerIFP(group);
return;
}
document.getElementById(`ifp-score-${group}`).innerText = `Soal ${ifpProgress[group] + 1}/5`;
let randQ = multiUserBank[Math.floor(Math.random() * multiUserBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-3 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
let winnerDeclared = false;
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! Lanjut...";
ifpProgress[group]++;
setTimeout(() => { initIFPQuestion(group); }, 800);
} else {
btn.className = "w-full text-left p-3 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-3 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Salah! Coba lagi.";
setTimeout(() => { initIFPQuestion(group); }, 1200);
}
}
function checkWinnerIFP(group) {
if(!winnerDeclared) {
winnerDeclared = true;
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA PERTAMA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 300);
}
}
function resetIFPGame() {
ifpProgress = { 1: 0, 2: 0, 3: 0 };
winnerDeclared = false;
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Individu
const evaluasiBank = [
{
q: "What are the main generic structures of a procedure text (recipe)?",
options: ["Orientation, Complication, Resolution", "Goal, Ingredients/Tools, Steps", "Identification, Description", "Arguments, Recommendation"],
a: 1,
exp: "Struktur teks prosedur adalah Goal, Ingredients/Tools, dan Steps."
},
{
q: "Which one is an imperative sentence (kalimat perintah)?",
options: ["You slice the onion", "Slice the onion thinly", "She slices the onion", "Slicing the onion"],
a: 1,
exp: "Kalimat perintah langsung diawali dengan kata kerja dasar (Verb-1) yaitu 'Slice'."
},
{
q: "In a recipe, 'pan', 'stove', and 'knife' belong to...",
options: ["Ingredients (bahan)", "Tools (alat)", "Steps (langkah)", "Goals (tujuan)"],
a: 1,
exp: "Wajan, kompor, dan pisau adalah peralatan (tools)."
},
{
q: "What does the word 'heat' mean in the instruction 'Heat the oil'?",
options: ["Potong", "Panaskan", "Aduk", "Tuang"],
a: 1,
exp: "'Heat' berarti memanaskan."
},
{
q: "Why does a procedure text use action verbs like pour, mix, and stir?",
options: ["To give clear instructions on how to do the steps", "To describe a person's appearance", "To tell a past story", "To state a personal opinion"],
a: 0,
exp: "Action verbs digunakan untuk memberikan instruksi langkah-langkah yang jelas."
}
];
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-orange-50 hover:border-orange-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bab 2 TP 4: " + refleksi,
strategi: "Evaluasi: Bab 2 TP 4 Procedure Text"
}, "*");
} else {
alert("Laporan Misi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>