Kelas 9
Bahasa Indonesia
MENULIS TEKS LAPORAN HASIL OBSERVASI - 4 Kebahasaan Teks Laporan Hasil Observasi (LHO)
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Kebahasaan Teks LHO ✍️</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 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #d97706 !important; color: white !important; border-bottom-color: #92400e !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { 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; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-amber-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-amber-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="book-open" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-amber-800 uppercase tracking-widest">Bahasa Indonesia - TP 4: Kebahasaan LHO</span>
<span id="progress-text" class="text-xs font-black text-white bg-amber-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-yellow-400 via-amber-500 to-orange-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-amber-100 text-amber-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi 4: <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600">Kaidah Kebahasaan LHO</span> ✍️
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Menulis" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-amber-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Misi Kita:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Mengenali unsur kebahasaan seperti <span class="text-amber-600">kata nomina (benda)</span> dan <span class="text-amber-600">verba (kerja)</span>.</li>
<li>Membedakan <span class="text-amber-600">kalimat definisi</span> dan <span class="text-amber-600">kalimat deskripsi</span>.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menguasai kaidah bahasanya? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Kebahasaan LHO -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Unsur Kebahasaan Utama 📚</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Ciri khas bahasa yang sering digunakan dalam teks laporan hasil observasi.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Nomina & Verba -->
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md">
<div class="bg-amber-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Nomina & Verba</div>
<p class="text-slate-700 font-bold mb-3"><span class="text-amber-600 font-black">Nomina</span> adalah kata benda (contoh: kucing, sekolah, bus), sedangkan <span class="text-amber-600 font-black">Verba</span> adalah kata kerja (contoh: mengamati, berlari, adalah).</p>
<div class="bg-amber-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-amber-900">Fokus pada objek nyata secara objektif.</p>
</div>
</div>
<!-- Definisi & Deskripsi -->
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md">
<div class="bg-orange-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Kalimat Definisi & Deskripsi</div>
<p class="text-slate-700 font-bold mb-3"><span class="text-orange-600 font-black">Definisi</span> menjelaskan pengertian (menggunakan kata "adalah/merupakan"), sedangkan <span class="text-orange-600 font-black">Deskripsi</span> menggambarkan sifat/ciri fisik.</p>
<div class="bg-orange-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-orange-900">Membantu pembaca membayangkan objek.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Definisi vs Deskripsi) -->
<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">Misi Latihan: <span class="text-amber-600">Definisi atau Deskripsi?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-amber-100 border-2 border-amber-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-amber-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">
<div id="q1-teks" class="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-left italic font-medium text-slate-700 mb-6"></div>
<p class="text-lg font-bold text-slate-500 mb-4">Jenis kalimat apakah kutipan di atas?</p>
<div id="q1-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl 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-amber-600 text-white rounded-2xl font-black text-xl hover:bg-amber-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Kata Sambung & Istilah Ilmiah -->
<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">Bahasa Ilmiah & Konjungsi 🔬</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Penggunaan kata penghubung (konjungsi) yang memperjelas hubungan antarkalimat.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<div class="bg-orange-50 p-5 rounded-2xl border-2 border-orange-200 space-y-3">
<h3 class="text-xl font-black text-orange-900 flex items-center gap-2"><i data-lucide="check-circle" class="text-orange-600"></i> Ciri Kebahasaan Lain:</h3>
<ul class="list-disc list-inside space-y-2 text-slate-700 font-bold">
<li>Menggunakan kata sambung seperti <i>dan, tetapi, sedangkan, ketika</i>.</li>
<li>Menggunakan istilah teknis/ilmiah sesuai bidang yang diamati (misal: <i>habitat, ekosistem, karnivora</i>).</li>
</ul>
</div>
</div>
<img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Belajar">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Analisis Jenis Kata) -->
<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">Misi Latihan: <span class="text-orange-600">Kenali Jenis Kata!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-orange-100 border-2 border-orange-400 px-6 py-2 rounded-full">
<span class="font-black text-orange-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center flex flex-col items-center">
<p class="text-lg font-bold text-slate-500 mb-4">Manakah di bawah ini yang merupakan contoh <b>Kata Kerja (Verba)</b>?</p>
<div id="q2-text" class="text-xl text-box text-orange-800 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 italic w-full">?</div>
<div id="q2-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full max-w-xl mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-xl mx-auto py-4 bg-orange-600 text-white rounded-2xl font-black text-xl hover:bg-orange-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: Masalah Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Dunia Nyata 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pentingnya menggunakan bahasa yang baku dan tepat.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Kasus 1 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Menulis">
<h4 class="font-black text-blue-800 text-xl mb-2">Kasus 1: Menulis Laporan Resmi</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Saat menyusun laporan ilmiah sekolah atau tugas kelompok, pemilihan kata (diksi) yang objektif dan baku membuat laporanmu terlihat sangat profesional dan dapat dipercaya.
</p>
</div>
<!-- Kasus 2 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Diskusi">
<h4 class="font-black text-indigo-800 text-xl mb-2">Kasus 2: Menghindari Salah Paham</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Penggunaan kalimat definisi dan deskripsi yang jelas mencegah pembaca salah mengartikan informasi hasil pengamatan yang sudah kamu lakukan.
</p>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Analisis Istilah/Kalimat) -->
<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">Misi Latihan: <span class="text-blue-600">Uji Kalimat</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl">
<p class="text-lg font-bold text-slate-500 mb-4 text-center border-b-2 border-dashed pb-4">Baca pertanyaan berikut:</p>
<p id="q3-text" class="text-xl font-bold text-slate-800 mb-8 leading-relaxed text-center"></p>
<div id="q3-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition block">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: RACING GAME KELOMPOK (Balap Kebahasaan) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-500 tracking-wide uppercase">🏁 Balap Kebahasaan LHO 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat, angkat tangan, dan kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-amber-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Soal Rebutan Saat Ini ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-amber-500 hover:bg-amber-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#b45309] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Siapa yang menjawab benar paling cepat?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-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" id="winner-icon">🏆</div>
<h2 id="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">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#92400e] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana petualangan Misi 4 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 kaidah kebahasaan mana yang mau diulang?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-amber-50 border-2 border-amber-200 focus:border-amber-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi 4</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan pemahamanmu tentang kebahasaan LHO melalui 5 soal ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-amber-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-amber-700 bg-amber-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-amber-900 mb-2">Misi 4 Berhasil!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir Misi: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-amber-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-amber-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke markas (Sistem Guru).</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-amber-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Energi Tersisa (Pemahaman)</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-amber-500">
<option value="100">100% - Sangat Paham Kebahasaan LHO!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-amber-500 to-orange-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan Misi 🚀
</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-amber-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-amber-600 shadow-[0_4px_0px_#b45309]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Auto-Quiz 1 (Definisi vs Deskripsi)
let countQ1 = 0;
const q1Bank = [
{
teks: "\"Mamalia adalah jenis hewan menyusui yang melahirkan anaknya.\"",
ans: "Kalimat Definisi",
ops: ["Kalimat Definisi", "Kalimat Deskripsi"],
exp: "Kalimat tersebut menggunakan kata penghubung 'adalah' untuk menjelaskan pengertian suatu istilah."
},
{
teks: "\"Kucing tersebut memiliki bulu berwarna hitam pekat dengan ekor yang sangat panjang.\"",
ans: "Kalimat Deskripsi",
ops: ["Kalimat Definisi", "Kalimat Deskripsi"],
exp: "Kalimat tersebut menggambarkan sifat fisik/ciri khusus secara rinci (deskripsi)."
}
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-teks').innerText = currentQ1Data.teks;
let options = shuffle([...currentQ1Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt}' === '${currentQ1Data.ans}')" 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">${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.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) 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.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Verba vs Nomina)
let countQ2 = 0;
const q2Bank = [
{
text: "Manakah di bawah ini yang merupakan contoh kata kerja (verba)?",
ans: "Mengamati",
ops: ["Mengamati", "Sekolah", "Kucing", "Gedung"]
},
{
text: "Manakah di bawah ini yang merupakan contoh kata benda (nomina)?",
ans: "Pohon",
ops: ["Pohon", "Berlari", "Terbang", "Adalah"]
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-text').innerText = currentQ2Data.text;
let options = shuffle([...currentQ2Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ2(this, '${opt}' === '${currentQ2Data.ans}')" 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">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-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>Pilihan tersebut adalah jenis kata yang tepat sesuai pertanyaan.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) 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>Jawaban yang benar adalah <b>${currentQ2Data.ans}</b>.`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Auto-Quiz 3 (Uji Kalimat)
let countQ3 = 0;
const q3Bank = [
{
q: "Apa fungsi kata penghubung (konjungsi) seperti 'sedangkan' atau 'tetapi' dalam teks LHO?",
ops: ["Menyatakan perbandingan atau pertentangan", "Membuat cerita fiksi makin seru", "Mengubah fakta menjadi opini"],
ans: "Menyatakan perbandingan atau pertentangan",
exp: "Konjungsi berfungsi untuk merangkai kalimat agar padu dan jelas."
},
{
q: "Kalimat definisi biasanya menggunakan kata penghubung berupa...",
ops: ["Adalah, merupakan, yaitu", "Namun, tetapi, padahal", "Kemarin, besok, lusa"],
ans: "Adalah, merupakan, yaitu",
exp: "Kata kunci definisi umumnya adalah 'adalah', 'merupakan', atau 'ialah'."
}
];
let currentQ3Data = null;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
currentQ3Data = q3Bank[countQ3 % q3Bank.length];
document.getElementById('q3-text').innerText = currentQ3Data.q;
let options = shuffle([...currentQ3Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ3(this, '${opt}' === '${currentQ3Data.ans}')" 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-left">${opt}</button>`;
});
document.getElementById('q3-options').innerHTML = optHtml;
}
function checkQ3(btn, isCorrect) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-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>${currentQ3Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) 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>${currentQ3Data.exp}`;
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3();
// Racing Game
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Kata benda dalam istilah kebahasaan disebut...", a: "NOMINA" },
{ q: "Kata kerja dalam istilah kebahasaan disebut...", a: "VERBA" },
{ q: "Kalimat yang menjelaskan pengertian menggunakan kata 'adalah' disebut kalimat...", a: "DEFINISI" },
{ q: "Kalimat yang menggambarkan sifat fisik objek disebut kalimat...", a: "DESKRIPSI" },
{ q: "Istilah khusus di bidang ilmu tertentu disebut istilah...", a: "ILMIAH" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerText = rq.q;
document.getElementById('race-ans-text').innerText = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// 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
const evaluasiBank = [
{
q: "Kata benda dalam kaidah kebahasaan teks laporan hasil observasi disebut juga sebagai...",
options: ["Verba", "Nomina", "Adjektiva", "Konjungsi"],
a: 1,
exp: "Nomina adalah istilah kebahasaan untuk kata benda."
},
{
q: "Kalimat yang menggunakan kata kunci 'adalah' atau 'merupakan' untuk memberikan batasan arti disebut...",
options: ["Kalimat definisi", "Kalimat deskripsi", "Kalimat perintah", "Kalimat tanya"],
a: 0,
exp: "Kalimat definisi berfungsi memberikan pengertian atau batasan suatu objek."
},
{
q: "Perhatikan kalimat: 'Daun mangga berbentuk lonjong dengan ujung meruncing.' Kalimat tersebut termasuk jenis kalimat...",
options: ["Definisi", "Deskripsi", "Opini", "Saran"],
a: 1,
exp: "Kalimat tersebut menggambarkan ciri fisik secara rinci (deskripsi)."
},
{
q: "Manakah di bawah ini yang merupakan contoh kata kerja (verba)?",
options: ["Rumah", "Membaca", "Buku", "Kursi"],
a: 1,
exp: "Membaca adalah kata yang menyatakan suatu perbuatan/tindakan (verba)."
},
{
q: "Penggunaan istilah ilmiah dalam teks LHO bertujuan untuk...",
options: ["Membuat teks sulit dibaca", "Menunjukkan keakuratan dan objektivitas data ilmiah", "Menambah jumlah halaman", "Mengubah fakta jadi dongeng"],
a: 1,
exp: "Istilah ilmiah digunakan agar laporan bersifat objektif dan akurat."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-amber-50 hover:border-amber-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
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 Misi 4: " + refleksi,
strategi: "Evaluasi Part 4: Kebahasaan Teks LHO"
}, "*");
} else {
alert("Laporan Misi Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
MENULIS TEKS LAPORAN HASIL OBSERVASI - 3 Mengidentifikasi Struktur Teks Laporan Hasil Observasi (LHO)
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Struktur Teks LHO 🏗️</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: #fdf4ff;
background-image: radial-gradient(#f5d0fe 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: #a855f7 !important; color: white !important; border-bottom-color: #7e22ce !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { 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; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-purple-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-purple-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="layers" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Bahasa Indonesia - TP 3: Struktur Teks LHO</span>
<span id="progress-text" class="text-xs font-black text-white bg-purple-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-fuchsia-400 via-purple-500 to-indigo-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-purple-100 text-purple-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D[cite: 1]
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi 3: <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-fuchsia-600">Piramida Struktur LHO</span> 🏗️
</h1>
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80" alt="Struktur Bangunan" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-purple-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-fuchsia-500"></i> Tujuan Misi Kita:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Memahami <span class="text-purple-600">struktur bagian</span> dalam teks LHO dengan runtut[cite: 1].</li>
<li>Membedakan bagian <span class="text-purple-600">pernyataan umum (klasifikasi)</span> dan <span class="text-purple-600">deskripsi bagian</span>[cite: 1].</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menyusun bangunan teks? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Struktur Teks LHO -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Anatomi Teks LHO 🏛️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Laporan hasil observasi disusun ke dalam 2 atau 3 bagian utama.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Pernyataan Umum -->
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md">
<div class="bg-purple-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Bagian 1: Pernyataan Umum</div>
<p class="text-slate-700 font-bold mb-3">Berisi pembuka atau <span class="text-purple-600 font-black">pengertian umum</span> mengenai objek yang sedang diamati[cite: 1].</p>
<div class="bg-purple-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-purple-900">Contoh: Definisi, kelas, atau kelompok dari objek.</p>
</div>
</div>
<!-- Deskripsi Bagian -->
<div class="bg-white p-6 rounded-3xl border-2 border-fuchsia-200 shadow-md">
<div class="bg-fuchsia-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Bagian 2: Deskripsi Bagian</div>
<p class="text-slate-700 font-bold mb-3">Berisi rincian detail mengenai <span class="text-fuchsia-600 font-black">ciri fisik, bagian-bagian, atau manfaat</span> objek[cite: 1].</p>
<div class="bg-fuchsia-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-fuchsia-900">Contoh: Rincian bentuk, warna, atau perilaku objek.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Bagian Struktur) -->
<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">Misi Latihan: <span class="text-purple-600">Bagian Mana Ini?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-purple-100 border-2 border-purple-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-purple-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<div id="q1-teks" class="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-left italic font-medium text-slate-700 mb-6"></div>
<p class="text-lg font-bold text-slate-500 mb-4">Termasuk struktur apakah kutipan di atas?</p>
<div id="q1-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-purple-600 text-white rounded-2xl font-black text-xl hover:bg-purple-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Deskripsi Manfaat -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-fuchsia-900 bg-fuchsia-100 inline-block px-6 py-2 rounded-2xl">Deskripsi Manfaat 🌟</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagian penutup opsional yang menjelaskan fungsi atau kegunaan objek.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-fuchsia-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<div class="bg-fuchsia-50 p-5 rounded-2xl border-2 border-fuchsia-200 space-y-3">
<h3 class="text-xl font-black text-fuchsia-900 flex items-center gap-2"><i data-lucide="check-circle" class="text-fuchsia-600"></i> Fungsi Bagian Ini:</h3>
<p class="text-slate-700 font-bold leading-relaxed">
Menjelaskan kegunaan objek yang diamati bagi kehidupan manusia atau lingkungan sekitar, sehingga laporan terasa lengkap dan bermakna[cite: 1].
</p>
</div>
</div>
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Manfaat">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Analisis Deskripsi Manfaat) -->
<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">Misi Latihan: <span class="text-fuchsia-600">Cari Manfaatnya!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-fuchsia-100 border-2 border-fuchsia-400 px-6 py-2 rounded-full">
<span class="font-black text-fuchsia-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center flex flex-col items-center">
<p class="text-lg font-bold text-slate-500 mb-4">Manakah kalimat di bawah ini yang menunjukkan struktur <b>Deskripsi Manfaat</b>?</p>
<div id="q2-text" class="text-xl text-box text-fuchsia-800 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 italic w-full">?</div>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full max-w-xl mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-xl mx-auto py-4 bg-fuchsia-600 text-white rounded-2xl font-black text-xl hover:bg-fuchsia-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: Masalah Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Dunia Nyata 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengapa laporan harus punya struktur yang runtut?</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Kasus 1 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Laporan">
<h4 class="font-black text-blue-800 text-xl mb-2">Kasus 1: Penyusunan Laporan Praktikum / Observasi</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Saat kamu melakukan pengamatan di lingkungan sekolah atau luar sekolah, pembaca (termasuk guru) akan lebih mudah memahami datamu jika disusun dari pengenalan umum lalu ke rincian bagian[cite: 1].
</p>
</div>
<!-- Kasus 2 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1507537297725-24a1c029d3ca?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Arsitektur">
<h4 class="font-black text-indigo-800 text-xl mb-2">Kasus 2: Seperti Bangunan Rumah</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Struktur teks itu ibarat fondasi dan ruangan rumah. Pernyataan umum adalah halaman depannya, sedangkan deskripsi bagian adalah ruangan-ruangan di dalamnya.
</p>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Soal Cerita Analisis Struktur) -->
<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">Misi Latihan: <span class="text-blue-600">Analisis Urutan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl">
<p class="text-lg font-bold text-slate-500 mb-4 text-center border-b-2 border-dashed pb-4">Baca skenario berikut:</p>
<p id="q3-text" class="text-xl font-bold text-slate-800 mb-8 leading-relaxed text-center"></p>
<div id="q3-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition block">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: RACING GAME KELOMPOK (Balap Struktur Teks) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-fuchsia-500 tracking-wide uppercase">🏁 Balap Struktur Teks 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat, angkat tangan, dan kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-purple-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Soal Rebutan Saat Ini ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-purple-500 hover:bg-purple-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#6b21a8] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Siapa yang menjawab benar paling cepat?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-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" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-purple-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#4c1d95] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana petualangan Misi 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">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 struktur mana yang masih ingin kamu pelajari?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-purple-50 border-2 border-purple-200 focus:border-purple-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi 3</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan pemahamanmu tentang struktur teks LHO melalui 5 soal ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-purple-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-purple-700 bg-purple-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-purple-900 mb-2">Misi 3 Berhasil!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir Misi: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-purple-500 to-fuchsia-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-purple-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke markas (Sistem Guru).</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Energi Tersisa (Pemahaman)</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-purple-500">
<option value="100">100% - Sangat Paham Struktur Teks LHO!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-purple-500 to-fuchsia-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 Laporan Misi 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-purple-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-purple-600 shadow-[0_4px_0px_#6b21a8]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Auto-Quiz 1 (Tebak Bagian Struktur)
let countQ1 = 0;
const q1Bank = [
{
teks: "\"Kucing adalah hewan mamalia karnivora yang sering dipelihara manusia. Hewan ini termasuk dalam golongan felidae.\"",
ans: "Pernyataan Umum (Klasifikasi)",
ops: ["Pernyataan Umum (Klasifikasi)", "Deskripsi Bagian", "Deskripsi Manfaat", "Penutup Cerita"],
exp: "Bagian awal teks yang mengenalkan definisi atau kelompok objek disebut Pernyataan Umum[cite: 1]."
},
{
teks: "\"Bulu kucing Persia sangat lebat dan panjang menutupi seluruh tubuhnya, serta memiliki warna bola mata yang bervariasi.\"",
ans: "Deskripsi Bagian",
ops: ["Pernyataan Umum (Klasifikasi)", "Deskripsi Bagian", "Deskripsi Manfaat", "Kesimpulan Akhir"],
exp: "Bagian yang merinci ciri fisik khusus dari objek termasuk dalam Deskripsi Bagian[cite: 1]."
}
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-teks').innerText = currentQ1Data.teks;
let options = shuffle([...currentQ1Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt}' === '${currentQ1Data.ans}')" 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-left">${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.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) 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.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Deskripsi Manfaat)
let countQ2 = 0;
const q2Bank = [
{
text: "Keberadaan pohon ketapang di halaman sekolah sangat berguna untuk meneduhkan suasana dan menyerap polusi udara.",
ans: "Deskripsi Manfaat",
ops: ["Deskripsi Manfaat", "Pernyataan Umum", "Judul Teks", "Opini Penulis"]
},
{
text: "Kunyit sering dimanfaatkan oleh masyarakat sebagai bahan obat tradisional penambah nafsu makan dan penjaga stamina tubuh.",
ans: "Deskripsi Manfaat",
ops: ["Deskripsi Manfaat", "Klasifikasi Awal", "Pengantar Singkat", "Kesimpulan Fiksi"]
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-text').innerText = `"${currentQ2Data.text}"`;
let options = shuffle([...currentQ2Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ2(this, '${opt}' === '${currentQ2Data.ans}')" 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-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-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>Kalimat tersebut menjelaskan fungsi/kegunaan objek bagi kehidupan[cite: 1].`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) 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>Struktur yang tepat adalah <b>${currentQ2Data.ans}</b>[cite: 1].`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Auto-Quiz 3 (Soal Cerita Analisis Struktur)
let countQ3 = 0;
const q3Bank = [
{
q: "Bagian teks LHO yang letaknya selalu berada di awal tulisan untuk mengenalkan objek secara garis besar disebut...",
ops: ["Pernyataan umum / klasifikasi", "Deskripsi manfaat", "Lampiran data", "Daftar pustaka"],
ans: "Pernyataan umum / klasifikasi",
exp: "Pernyataan umum berfungsi sebagai pembuka atau pengenalan kelas/kelompok objek."
},
{
q: "Apa perbedaan utama antara 'deskripsi bagian' dan 'deskripsi manfaat'?",
ops: [
"Deskripsi bagian merinci fisik/bagian objek, sedangkan deskripsi manfaat merinci kegunaannya.",
"Deskripsi bagian terletak di akhir, sedangkan manfaat di awal.",
"Tidak ada bedanya sama sekali."
],
ans: "Deskripsi bagian merinci fisik/bagian objek, sedangkan deskripsi manfaat merinci kegunaannya.",
exp: "Deskripsi bagian membahas wujud/rincian, sementara deskripsi manfaat membahas fungsi objek[cite: 1]."
}
];
let currentQ3Data = null;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
currentQ3Data = q3Bank[countQ3 % q3Bank.length];
document.getElementById('q3-text').innerText = currentQ3Data.q;
let options = shuffle([...currentQ3Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ3(this, '${opt}' === '${currentQ3Data.ans}')" 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-left">${opt}</button>`;
});
document.getElementById('q3-options').innerHTML = optHtml;
}
function checkQ3(btn, isCorrect) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-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>${currentQ3Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) 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>${currentQ3Data.exp}`;
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3();
// Racing Game
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Struktur awal teks LHO yang berisi pengenalan objek disebut pernyataan...", a: "UMUM" },
{ q: "Bagian yang merinci ciri fisik objek disebut deskripsi...", a: "BAGIAN" },
{ q: "Bagian opsional yang menjelaskan fungsi objek disebut deskripsi...", a: "MANFAAT" },
{ q: "Apakah laporan hasil observasi memerlukan struktur yang runtut?", a: "YA" },
{ q: "Pengelompokan objek berdasarkan kriteria tertentu disebut...", a: "KLASIFIKASI" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerText = rq.q;
document.getElementById('race-ans-text').innerText = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// 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
const evaluasiBank = [
{
q: "Struktur teks laporan hasil observasi secara umum terdiri atas...",
options: ["Orientasi, komplikasi, resolusi", "Pernyataan umum dan deskripsi bagian", "Tesis, argumen, penegasan ulang", "Prolog dan epilog"],
a: 1,
exp: "Struktur baku teks LHO terdiri dari pernyataan umum (klasifikasi) dan deskripsi bagian[cite: 1]."
},
{
q: "Bagian awal teks LHO yang berisi pembuka atau pengenalan mengenai objek disebut...",
options: ["Deskripsi manfaat", "Pernyataan umum", "Deskripsi bagian", "Kesimpulan"],
a: 1,
exp: "Pernyataan umum berada di awal teks sebagai pengantar atau klasifikasi objek[cite: 1]."
},
{
q: "Bagian teks LHO yang memaparkan rincian ciri fisik, bentuk, atau bagian objek secara detail adalah...",
options: ["Deskripsi bagian", "Pernyataan umum", "Abstraksi", "Koda"],
a: 0,
exp: "Deskripsi bagian merinci berbagai aspek khusus atau bagian dari objek yang diamati[cite: 1]."
},
{
q: "Manakah bagian struktur LHO yang sifatnya opsional (boleh ada atau tidak ada)?",
options: ["Pernyataan umum", "Deskripsi bagian", "Deskripsi manfaat", "Judul teks"],
a: 2,
exp: "Deskripsi manfaat sering kali bersifat opsional sebagai penutup teks."
},
{
q: "Kalimat yang menjelaskan kegunaan atau fungsi suatu objek bagi manusia termasuk dalam struktur...",
options: ["Deskripsi manfaat", "Pernyataan umum", "Deskripsi bagian", "Definisi umum"],
a: 0,
exp: "Manfaat atau fungsi objek dibahas dalam bagian deskripsi manfaat[cite: 1]."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-purple-50 hover:border-purple-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Misi 3: " + refleksi,
strategi: "Evaluasi Part 3: Struktur Teks LHO"
}, "*");
} else {
alert("Laporan Misi Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
MENULIS TEKS LAPORAN HASIL OBSERVASI - 2 Mengenali Topik dan Gagasan Utama
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Ide Besar & Topik 💡</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #eff6ff;
background-image: radial-gradient(#dbeafe 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: #3b82f6 !important; color: white !important; border-bottom-color: #1d4ed8 !important; pointer-events: none; }
.btn-wrong { background-color: #8b5cf6 !important; color: white !important; border-bottom-color: #5b21b6 !important; pointer-events: none; opacity: 0.8; }
.text-box { 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; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-blue-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-blue-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="layout-list" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-blue-800 uppercase tracking-widest">Bahasa Indonesia - TP 2: Topik & Gagasan Utama</span>
<span id="progress-text" class="text-xs font-black text-white bg-blue-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-cyan-400 via-blue-500 to-indigo-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-blue-100 text-blue-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D[cite: 1]
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi 2: <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Topik & Gagasan Utama</span> 💡
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Membaca" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-blue-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-indigo-500"></i> Tujuan Misi Kita:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Mengidentifikasi <span class="text-blue-600">topik</span> sebagai ide besar keseluruhan teks LHO[cite: 1].</li>
<li>Menentukan <span class="text-blue-600">gagasan utama</span> pada setiap paragraf dengan cermat[cite: 1].</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap berburu ide utama? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Topik & Gagasan Utama -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Topik vs Gagasan Utama 🧩</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Jangan sampai tertukar! Pahami perbedaan inti besar dan inti paragraf.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Topik -->
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-md">
<div class="bg-blue-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Topik Keseluruhan</div>
<p class="text-slate-700 font-bold mb-3">Ide besar atau pokok bahasan dari <span class="text-blue-600 font-black">seluruh isi teks</span> LHO[cite: 1].</p>
<div class="bg-blue-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-blue-900">Contoh: "Sepeda Motor di Indonesia"[cite: 1]</p>
</div>
<p class="text-slate-500 font-bold text-sm">Sifatnya mencakup semua bagian teks.</p>
</div>
<!-- Gagasan Utama -->
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-md">
<div class="bg-indigo-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Gagasan Utama Paragraf</div>
<p class="text-slate-700 font-bold mb-3">Pikiran pokok atau inti pembahasan yang ada di <span class="text-indigo-600 font-black">setiap paragraf</span>[cite: 1].</p>
<div class="bg-indigo-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-indigo-900">Contoh: "Alasan sepeda motor sangat diminati warga."</p>
</div>
<p class="text-slate-500 font-bold text-sm">Biasanya terletak di kalimat utama (awal/akhir paragraf).</p>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Gagasan Utama) -->
<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">Misi Latihan: <span class="text-blue-600">Cari Gagasan Utama!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-blue-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">
<div id="q1-paragraf" class="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-left italic font-medium text-slate-700 mb-6"></div>
<p class="text-lg font-bold text-slate-500 mb-4">Pilihlah gagasan utama yang tepat untuk paragraf di atas:</p>
<div id="q1-options" class="grid grid-cols-1 gap-3 max-w-xl mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl 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-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Strategi Menemukan Topik -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Tips Menemukan Topik 🧭</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana cara cepat menyimpulkan topik keseluruhan teks LHO?</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<div class="bg-indigo-50 p-5 rounded-2xl border-2 border-indigo-200 space-y-3">
<h3 class="text-xl font-black text-indigo-900 flex items-center gap-2"><i data-lucide="check-circle" class="text-indigo-600"></i> Langkah Praktis:</h3>
<ul class="list-disc list-inside space-y-2 text-slate-700 font-bold">
<li>Baca judul teks secara saksama.</li>
<li>Perhatikan kata atau frasa yang paling sering diulang-ulang.</li>
<li>Gabungkan inti dari setiap gagasan utama tiap paragraf.</li>
</ul>
</div>
</div>
<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Analisis">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Tebak Topik Utama) -->
<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">Misi Latihan: <span class="text-indigo-600">Tebak Topik Teks!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-indigo-100 border-2 border-indigo-400 px-6 py-2 rounded-full">
<span class="font-black text-indigo-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center flex flex-col items-center">
<p class="text-lg font-bold text-slate-500 mb-4">Berdasarkan keseluruhan uraian teks LHO, apakah topik utamanya?</p>
<div id="q2-text" class="text-xl text-box text-indigo-800 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 italic w-full">?</div>
<div id="q2-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full max-w-xl mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-xl mx-auto py-4 bg-indigo-600 text-white rounded-2xl font-black text-xl hover:bg-indigo-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: Masalah Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Penerapan Dunia Nyata 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengapa mencari topik & gagasan utama itu penting dalam kehidupan?</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Kasus 1 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Berita">
<h4 class="font-black text-emerald-800 text-xl mb-2">Kasus 1: Memahami Berita & Artikel</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Saat membaca artikel berita atau laporan ilmiah populer di internet, kita tidak perlu membaca setiap kata secara mendetail jika kita bisa langsung menangkap <span class="bg-emerald-100 px-2 rounded">topik dan gagasan utamanya</span>.
</p>
</div>
<!-- Kasus 2 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1497633762265-9d179a990aa6?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Buku">
<h4 class="font-black text-teal-800 text-xl mb-2">Kasus 2: Menyusun Rangkuman / Peta Pikiran</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Dalam mata pelajaran lain seperti IPA atau IPS, kemampuan merumuskan gagasan utama dari teks laporan sangat membantu saat kita harus membuat ringkasan tugas atau peta konsep[cite: 1].
</p>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Soal Cerita Analisis) -->
<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">Misi Latihan: <span class="text-emerald-600">Analisis Kasus</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="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl">
<p class="text-lg font-bold text-slate-500 mb-4 text-center border-b-2 border-dashed pb-4">Baca pernyataan berikut:</p>
<p id="q3-text" class="text-xl font-bold text-slate-800 mb-8 leading-relaxed text-center"></p>
<div id="q3-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q3-next-btn" onclick="generateQ3()" 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 block">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: RACING GAME KELOMPOK (Balap Mobil) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-indigo-500 tracking-wide uppercase">🏁 Balap Gagasan Utama 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Analisis cepat, angkat tangan, dan kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-blue-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Soal Rebutan Saat Ini ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-blue-500 hover:bg-blue-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#1d4ed8] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Siapa yang menjawab benar paling cepat?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-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" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-blue-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#3730a3] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana petualangan Misi 2 hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian mana yang ingin kamu diskusikan lagi bersama guru?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-blue-50 border-2 border-blue-200 focus:border-blue-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi 2</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan pemahamanmu tentang topik dan gagasan utama melalui 5 soal ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-blue-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-blue-700 bg-blue-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl 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-blue-900 mb-2">Misi 2 Berhasil!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir Misi: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-blue-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-blue-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke markas (Sistem Guru).</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-blue-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Energi Tersisa (Pemahaman)</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-blue-500">
<option value="100">100% - Sangat Paham Topik & Gagasan Utama!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan Misi 🚀
</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-blue-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-blue-600 shadow-[0_4px_0px_#1d4ed8]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Auto-Quiz 1 (Gagasan Utama Paragraf)
let countQ1 = 0;
const q1Bank = [
{
par: "\"Bus kota merupakan salah satu transportasi umum yang sangat diandalkan masyarakat perkotaan. Kendaraan ini mampu mengangkut puluhan penumpang dalam sekali perjalanan dengan tarif yang terjangkau.\"",
ans: "Bus kota adalah transportasi umum yang diandalkan warga perkotaan.",
ops: [
"Bus kota adalah transportasi umum yang diandalkan warga perkotaan.",
"Tarif bus kota sangat mahal bagi masyarakat.",
"Jumlah penumpang bus kota dibatasi hanya 5 orang."
],
exp: "Kalimat utama di awal paragraf menyatakan bahwa bus kota sangat diandalkan masyarakat perkotaan."
},
{
par: "\"Perpustakaan sekolah SMP Negeri 72 Maluku Tengah memiliki koleksi buku yang sangat lengkap. Mulai dari buku pelajaran, ensiklopedia, hingga novel fiksi tertata rapi di dalam rak-rak kaca.\"",
ans: "Perpustakaan sekolah memiliki koleksi buku yang sangat lengkap.",
ops: [
"Rak-rak kaca di perpustakaan sangat mudah pecah.",
"Perpustakaan sekolah memiliki koleksi buku yang sangat lengkap.",
"Novel fiksi tidak boleh dibaca oleh siswa."
],
exp: "Inti pembahasan paragraf tersebut adalah kelengkapan koleksi buku di perpustakaan."
}
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-paragraf').innerText = currentQ1Data.par;
let options = shuffle([...currentQ1Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt}' === '${currentQ1Data.ans}')" 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-left">${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.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) 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.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Topik Keseluruhan)
let countQ2 = 0;
const q2Bank = [
{
text: "Teks LHO membahas tentang jenis-jenis sepeda motor, bahan bakar yang digunakan, serta keunggulan dan sejarah singkatnya di jalanan Indonesia.",
ans: "Sepeda Motor di Indonesia",
ops: ["Sepeda Motor di Indonesia", "Cara Memasak Nasi Goreng", "Ekosistem Hutan Hujan", "Peraturan Lalu Lintas Udara"]
},
{
text: "Teks LHO membahas mengenai fasilitas di dalam bendi, rute perjalanan bendi di Pantai Padang, serta kondisi fisik kuda penariknya.",
ans: "Bendi di Kota Padang",
ops: ["Bendi di Kota Padang", "Pesawat Tempur Modern", "Teknologi Jaringan Komputer", "Budaya Tani di Desa"]
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-text').innerText = `"${currentQ2Data.text}"`;
let options = shuffle([...currentQ2Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ2(this, '${opt}' === '${currentQ2Data.ans}')" 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">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-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>Topik tersebut merangkum keseluruhan isi teks dengan tepat[cite: 1].`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) 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>Topik yang paling tepat adalah <b>${currentQ2Data.ans}</b>[cite: 1].`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Auto-Quiz 3 (Soal Cerita Analisis)
let countQ3 = 0;
const q3Bank = [
{
q: "Manakah pernyataan yang PALING BENAR mengenai hubungan topik dan gagasan utama?",
ops: [
"Topik adalah ide besar keseluruhan teks, sedangkan gagasan utama adalah inti dari tiap paragraf.",
"Topik dan gagasan utama adalah hal yang sama persis tanpa perbedaan.",
"Gagasan utama selalu terletak di paragraf terakhir saja."
],
ans: 0,
exp: "Topik mencakup keseluruhan teks, sedangkan gagasan utama berdiri di setiap paragraf[cite: 1]."
},
{
q: "Bagaimana cara mendeteksi letak gagasan utama dalam sebuah paragraf?",
ops: [
"Mencari kalimat utama yang didukung oleh kalimat-kalimat penjelas.",
"Menghitung jumlah kata dalam satu kalimat.",
"Melihat warna tinta cetakan teks."
],
ans: 0,
exp: "Gagasan utama termuat di dalam kalimat utama yang bersifat umum dan diperjelas kalimat lain."
}
];
let currentQ3Data = null;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
currentQ3Data = q3Bank[countQ3 % q3Bank.length];
document.getElementById('q3-text').innerText = currentQ3Data.q;
let options = shuffle([...currentQ3Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ3(this, '${opt}' === '${currentQ3Data.ans}')" 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-left">${opt}</button>`;
});
document.getElementById('q3-options').innerHTML = optHtml;
}
function checkQ3(btn, isCorrect) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-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>${currentQ3Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) 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>${currentQ3Data.exp}`;
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3();
// Racing Game
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Ide besar dari keseluruhan teks LHO disebut...", a: "TOPIK" },
{ q: "Inti pembahasan yang ada di tiap paragraf disebut gagasan...", a: "UTAMA" },
{ q: "Kalimat yang menjelaskan gagasan utama disebut kalimat...", a: "PENJELAS" },
{ q: "Apakah topik teks LHO bersifat umum atau khusus?", a: "UMUM" },
{ q: "Mencari gagasan utama berarti mencari inti ... paragraf.", a: "SEBUAH" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerText = rq.q;
document.getElementById('race-ans-text').innerText = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// 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
const evaluasiBank = [
{
q: "Ide besar atau pokok bahasan dari keseluruhan teks laporan hasil observasi disebut...",
options: ["Gagasan utama", "Topik", "Kalimat penjelas", "Kesimpulan"],
a: 1,
exp: "Topik adalah gagasan/ide besar yang menjiwai seluruh isi teks LHO[cite: 1]."
},
{
q: "Inti pembahasan yang membangun setiap paragraf di dalam teks disebut...",
options: ["Gagasan utama", "Topik", "Judul teks", "Kata pengantar"],
a: 0,
exp: "Gagasan utama adalah pokok pikiran yang mendasari pembentukan sebuah paragraf[cite: 1]."
},
{
q: "Perhatikan kalimat: 'Sepeda motor sangat diminati warga karena praktis.' Kalimat tersebut biasanya berfungsi sebagai...",
options: ["Kalimat penjelas", "Kalimat utama (gagasan utama)", "Kalimat penutup", "Kalimat tanya"],
a: 1,
exp: "Kalimat tersebut memuat pernyataan umum yang menjadi gagasan utama paragraf."
},
{
q: "Manakah cara terbaik untuk menentukan topik keseluruhan dari sebuah teks LHO?",
options: ["Membaca judul dan mengamati gagasan utama setiap paragraf", "Menghitung jumlah titik dalam paragraf", "Melihat gambar ilustrasinya saja", "Membaca paragraf terakhir saja"],
a: 0,
exp: "Topik dapat disimpulkan dengan melihat judul serta gabungan inti dari tiap paragraf[cite: 1]."
},
{
q: "Jika sebuah teks LHO mengupas tuntas tentang fasilitas kantin sekolah, kebersihannya, dan jenis makanannya, maka topik teks tersebut adalah...",
options: ["Kantin Sekolah", "Perpustakaan Daerah", "Lalu Lintas Kota", "Olah Raga Basket"],
a: 0,
exp: "Seluruh rincian paragraf mengerucut pada satu topik yaitu Kantin Sekolah."
}
];
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-blue-50 hover:border-blue-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>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 Misi 2: " + refleksi,
strategi: "Evaluasi Part 2: Topik & Gagasan Utama"
}, "*");
} else {
alert("Laporan Misi Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
MENULIS TEKS LAPORAN HASIL OBSERVASI - 1 Mengenali Ciri-Ciri dan Informasi Penting Teks LHO
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Detektif LHO 🕵️♂️</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: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { 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; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</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-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="search" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Bahasa Indonesia - TP 1: Ciri LHO</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-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-teal-400 via-emerald-500 to-green-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-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi Detektif: <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Ciri & Informasi LHO</span> 🕵️♂️
</h1>
<img src="https://images.unsplash.com/photo-1542626991-cbc4e32524cc?auto=format&fit=crop&w=800&q=80" alt="Observasi" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<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-teal-500"></i> Tujuan Misi Kita:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Mengenali ciri-ciri utama sebuah <span class="text-emerald-600">teks laporan hasil observasi (LHO)</span>[cite: 1].</li>
<li>Menemukan informasi penting dari hasil <span class="text-emerald-600">pengamatan objek atau peristiwa</span> di sekitar kita[cite: 1].</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap memulai investigasi? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Ciri LHO -->
<div class="slide flex-col p-8 gap-6 max-w-6xl 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">Ciri Teks LHO 📝</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Sebuah laporan pengamatan punya syarat khusus. Tidak boleh mengarang bebas!</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Faktual -->
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-md">
<img src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Fakta">
<div class="bg-teal-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Faktual & Objektif</div>
<p class="text-slate-700 font-bold mb-3">Informasi berdasarkan <span class="text-teal-600 font-black">fakta pengamatan</span>, bukan opini, karangan, atau perasaan penulis[cite: 1].</p>
<div class="bg-teal-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-teal-900 italic">"Kantin menjual tiga jenis minuman: es teh, jus, air mineral."[cite: 1]</p>
</div>
</div>
<!-- Spesifik -->
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md">
<img src="https://images.unsplash.com/photo-1497005367839-6e852de72767?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Spesifik">
<div class="bg-emerald-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Spesifik & Jelas</div>
<p class="text-slate-700 font-bold mb-3">Menjelaskan sesuatu secara rinci dengan pengamatan yang cermat, bisa berupa data[cite: 1].</p>
<div class="bg-emerald-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-emerald-900 italic">Teks berjudul: "Penumpang Bus Kota" atau "Sepeda Motor di Indonesia".[cite: 1]</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Ciri) -->
<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">Misi Latihan: <span class="text-teal-600">Fakta atau Fiksi?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-teal-100 border-2 border-teal-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-teal-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 border-b-2 border-dashed pb-4">Apakah kalimat di bawah ini cocok masuk ke Teks LHO?</p>
<div id="q1-text" class="text-2xl text-box text-teal-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, true)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Cocok (LHO)</button>
<button onclick="checkQ1(this, false)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Tidak Cocok</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl 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-teal-600 text-white rounded-2xl font-black text-xl hover:bg-teal-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Informasi Penting dalam LHO -->
<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">Mencari Informasi Penting 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Saat membaca LHO, jadilah detektif yang mencari data!</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Teks LHO selalu menyimpan informasi kunci hasil pengamatan[cite: 1].</p>
<div class="bg-emerald-50 p-6 rounded-2xl border-2 border-emerald-200">
<h3 class="text-xl font-black text-emerald-900 mb-2">Contoh Cuplikan Teks: "Bendi di Kota Padang"</h3>
<p class="text-slate-700 font-medium italic mb-4">"Bendi adalah salah satu alat transportasi tradisional di Kota Padang yang ditarik oleh seekor kuda. Kendaraan beroda dua ini masih sering ditemukan di kawasan Pantai Padang pada sore hari."[cite: 1]</p>
<div class="border-t-2 border-emerald-200 pt-4">
<p class="font-bold text-slate-800">Informasi Penting yang didapat:</p>
<ul class="list-disc list-inside text-slate-600 font-bold mt-2">
<li>Bendi = transportasi tradisional ditarik kuda.</li>
<li>Lokasi penemuan = Pantai Padang (sore hari).</li>
</ul>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1590499272304-44bf190eec26?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Detektif Kaca Pembesar">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Gali Informasi) -->
<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">Misi Latihan: <span class="text-emerald-600">Gali Informasi!</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="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" 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 6: Masalah Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Dunia Nyata 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Observasi ada di mana-mana! Perhatikan sekelilingmu.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Kasus 1 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1544717297-fa95b6ee9643?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Bus Kota">
<h4 class="font-black text-blue-800 text-xl mb-2">Penumpang Bus Kota</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Pernahkah kamu mengamati situasi di dalam angkot atau bus kota? Pengamatan nyata tentang jumlah penumpang, jenis transportasi, atau kondisi halte bisa menjadi teks LHO yang bagus[cite: 1].
</p>
</div>
<!-- Kasus 2 -->
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Sekolah">
<h4 class="font-black text-rose-800 text-xl mb-2">Lingkungan Sekolah</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Kamu bisa melakukan observasi kontekstual di kantin, perpustakaan, atau lapangan olahraga sekolah untuk melihat fasilitas apa saja yang tersedia[cite: 1].
</p>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Topik Observasi) -->
<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">Misi Latihan: <span class="text-blue-600">Pilih Topik</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl">
<p class="text-lg font-bold text-slate-500 mb-4 text-center border-b-2 border-dashed pb-4">Tentukan mana yang BISA dijadikan objek observasi nyata:</p>
<p id="q3-text" class="text-2xl font-bold text-slate-800 mb-8 leading-relaxed text-center"></p>
<div id="q3-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ3(this, true)" class="guess-btn w-full py-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition">Bisa (Nyata)</button>
<button onclick="checkQ3(this, false)" class="guess-btn w-full py-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition">Tidak (Fiksi/Gaib)</button>
</div>
<div id="q3-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition block">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: RACING GAME KELOMPOK (Balap Mobil Cerdas) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-green-500 tracking-wide uppercase">🏁 Balap Kata Cerdas 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat, angkat tangan, dan kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-emerald-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-teal-500 hover:bg-teal-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#0f766e] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-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" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-green-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-teal-600 hover:bg-teal-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#0f766e] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana petualangan investigasimu hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian mana dari Ciri Teks LHO yang masih membingungkan?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-teal-50 border-2 border-teal-200 focus:border-teal-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi 1</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan insting detektifmu dengan 5 soal evaluasi ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-teal-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-teal-700 bg-teal-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl 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-teal-900 mb-2">Misi Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir Misi: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-teal-500 to-green-500 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-teal-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-teal-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke markas (Sistem Guru).</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-teal-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Pemahaman Akhir</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-teal-500">
<option value="100">Sangat Paham Ciri LHO!</option>
<option value="75">Paham Sebagian Besar</option>
<option value="50">Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-teal-500 to-emerald-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan Misi 🚀
</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-teal-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-teal-600 shadow-[0_4px_0px_#0f766e]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Auto-Quiz 1 (Fakta/Fiksi)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Kantin sekolah menjual tiga jenis minuman.\"", a: true, exp: "Kalimat ini memuat fakta yang bisa dibuktikan lewat pengamatan[cite: 1]." },
{ t: "\"Di sebuah desa, hiduplah seekor naga sakti.\"", a: false, exp: "Kalimat ini menceritakan kisah fiksi/dongeng, bukan hasil pengamatan nyata." },
{ t: "\"Sebaiknya kita tidak membuang sampah sembarangan.\"", a: false, exp: "Kalimat ini berisi saran/opini, sedangkan LHO harus berisi informasi faktual[cite: 1]." },
{ t: "\"Bus TransJakarta itu memiliki kapasitas 30 tempat duduk.\"", a: true, exp: "Menyajikan data riil hasil observasi[cite: 1]." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, answerChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ1Data.a);
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.exp}`;
} else {
btn.classList.add('btn-wrong');
// find correct button
if (currentQ1Data.a === true) {
btns[0].classList.add('btn-correct');
} else {
btns[1].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.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Gali Informasi)
let countQ2 = 0;
const q2Bank = [
{
story: "Di Perpustakaan Daerah, terdapat 5 rak khusus buku fiksi yang selalu ramai dikunjungi remaja setiap akhir pekan.",
q: "Apa informasi penting dari hasil observasi di atas?",
ops: [
"Buku fiksi sangat membosankan.",
"Ada 5 rak buku fiksi yang ramai dikunjungi remaja.",
"Perpustakaan butuh lebih banyak buku sejarah."
],
ans: 1,
exp: "Kita harus mengambil informasi sesuai teks (5 rak buku fiksi, ramai oleh remaja)."
},
{
story: "Sepeda motor merupakan alat transportasi yang praktis dan efisien untuk menghindari kemacetan di Jakarta.",
q: "Berdasarkan cuplikan di atas, sepeda motor dianggap...",
ops: [
"Praktis dan efisien.",
"Mahal perawatannya.",
"Hanya untuk di pedesaan."
],
ans: 0,
exp: "Sesuai dengan fakta yang tertera di teks[cite: 1]."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" 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-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-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>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].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>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Auto-Quiz 3 (Topik)
let countQ3 = 0;
const q3Bank = [
{ t: "Kegiatan siswa saat jam istirahat di kantin sekolah.", a: true },
{ t: "Petualangan Bawang Merah dan Bawang Putih.", a: false },
{ t: "Penggunaan fasilitas umum halte TransJakarta.", a: true },
{ t: "Candi Prambanan dan Legenda Roro Jonggrang.", a: false }
];
let currentQ3Data = null;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q3-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xl border-b-4 border-slate-300 transition";
});
currentQ3Data = q3Bank[countQ3 % q3Bank.length];
document.getElementById('q3-text').innerHTML = `"${currentQ3Data.t}"`;
}
function checkQ3(btn, answerChoosed) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ3Data.a);
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>Tepat!</b> Itu benar.`;
} else {
btn.classList.add('btn-wrong');
if (currentQ3Data.a === true) btns[0].classList.add('btn-correct');
else btns[1].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> Ingat, LHO mengobservasi hal yang nyata[cite: 1]!`;
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3();
// Racing Game
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "LHO singkatan dari Laporan Hasil...", a: "OBSERVASI" },
{ q: "Teks LHO harus berdasarkan ... nyata.", a: "FAKTA" },
{ q: "Apakah LHO boleh berisi karangan fiksi?", a: "TIDAK" },
{ q: "Penulis harus mengamati secara ... untuk LHO.", a: "OBJEKTIF" },
{ q: "Data dalam LHO bisa berupa angka statistik. (Benar/Salah)", a: "BENAR" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// 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
const evaluasiBank = [
{
q: `Ciri utama dari teks laporan hasil observasi adalah...`,
options: [`Ditulis berdasarkan imajinasi`, `Berisi fakta dari pengamatan`, `Berisi saran kepada pembaca`, `Menceritakan masa lalu`],
a: 1,
exp: "Teks LHO selalu didasarkan pada fakta objektif dari pengamatan[cite: 1]."
},
{
q: `Teks model berjudul "Penumpang Bus Kota" merupakan contoh teks LHO karena...`,
options: [`Menceritakan kisah mistis bus kota`, `Berisi karangan fiktif`, `Melaporkan kondisi faktual transportasi publik`, `Membujuk orang naik bus`],
a: 2,
exp: "Teks LHO melaporkan kondisi atau fakta nyata dari sebuah fenomena atau objek di sekitar kita[cite: 1]."
},
{
q: `Manakah dari objek berikut yang BISA diamati secara langsung untuk dibuatkan teks LHO?`,
options: [`Kantin Sekolah`, `Kerajaan Majapahit`, `Legenda Danau Toba`, `Dunia Peri`],
a: 0,
exp: "Objek LHO harus kontekstual dan bisa diamati secara riil saat ini, seperti kantin atau fasilitas sekolah[cite: 1]."
},
{
q: `Kalimat dalam teks LHO harus bersifat objektif, artinya...`,
options: [`Menurut pandangan pribadi`, `Sesuai dengan apa adanya (fakta)`, `Dibuat sangat panjang`, `Banyak menggunakan kiasan`],
a: 1,
exp: "Objektif berarti tidak memasukkan opini atau perasaan pribadi, melainkan sesuai fakta[cite: 1]."
},
{
q: `Jika kamu diminta mengamati "Penggunaan gawai oleh siswa", apa informasi yang mungkin kamu temukan?`,
options: [`Jumlah siswa yang membawa gawai`, `Mimpi siswa tentang gawai`, `Sejarah penemuan gawai`, `Harga gawai termurah di dunia`],
a: 0,
exp: "Saat mengobservasi, kita mencari data riil yang ada di depan kita (misalnya: jumlah siswa pengguna)[cite: 1]."
}
];
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); // Jeda 4 detik agar cukup membaca pembahasan
}
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 Misi 1: " + refleksi,
strategi: "Evaluasi Part 1: Ciri Teks LHO"
}, "*");
} else {
alert("Laporan Misi Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Games
Program Kerja Sekolah
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PID Rencana Kerja Matching Board - Maluku Tengah</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* Sentuhan Kearifan Lokal (Pola Gelombang Laut Faint/Tipis) */
body {
font-family: 'Work Sans', sans-serif;
background-color: #f0f7f4;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.347-4.333 2.92-8.333 7.72-8.333 4.8 0 7.373 4 7.72 8.333H40.23c-.347-4.333-2.92-8.333-7.72-8.333-4.8 0-7.373 4-7.72 8.333h-3.606zM0 20c.347-4.333 2.92-8.333 7.72-8.333 4.8 0 7.373 4 7.72 8.333H11.83c-.347-4.333-2.92-8.333-7.72-8.333-4.8 0-7.373 4-7.72 8.333H0z' fill='%230f766e' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}
/* Desain Sticky Notes Realistis */
.task-card {
position: relative;
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
cursor: grab;
border-bottom-right-radius: 12px 2px;
}
/* Elemen Selotip Transparan */
.task-card::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
width: 35px;
height: 14px;
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
z-index: 10;
border-radius: 2px;
backdrop-filter: blur(2px);
}
.task-bank-container .task-card:hover {
transform: translateY(-3px) rotate(0deg) !important;
box-shadow: 0 12px 20px rgba(0,0,0,0.15);
z-index: 20;
}
.task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: 0.6; transform: scale(0.95) rotate(0deg) !important; z-index: 50; }
.slot-box { transition: all 0.3s ease; }
.slot-box.drag-over {
background-color: #f8fafc;
border-color: #0f766e;
transform: scale(1.02);
box-shadow: inset 0 0 15px rgba(15, 118, 110, 0.1);
}
.slot-box .task-card {
transform: none !important;
margin-top: 8px;
padding: 8px 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
font-size: 0.8em;
cursor: pointer;
width: 100%;
}
.slot-box .task-card p { font-size: 0.75rem; line-height: 1.25; }
.task-bank-container::-webkit-scrollbar { width: 8px; }
.task-bank-container::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 8px; }
.task-bank-container::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; }
.task-bank-container::-webkit-scrollbar-thumb:hover { background: #64748b; }
.correct-ans { border: 2px solid #22c55e !important; background-color: #dcfce7 !important; }
.wrong-ans { border: 2px solid #ef4444 !important; background-color: #fee2e2 !important; }
</style>
</head>
<body class="min-h-screen p-4 md:p-6 text-slate-800">
<main class="max-w-[1400px] mx-auto bg-white/95 backdrop-blur-sm rounded-3xl shadow-2xl p-6 md:p-8 border border-teal-100">
<!-- Header -->
<header class="text-center mb-8">
<h1 class="text-2xl md:text-3xl font-extrabold text-slate-900 leading-tight">
PID: RENCANA KERJA & TANGGUNG JAWAB UNIT
</h1>
<h2 class="text-lg md:text-xl font-semibold mt-1 text-teal-700">
SMP NEGERI 72 MALUKU TENGAH
</h2>
<div class="w-48 h-1.5 bg-gradient-to-r from-blue-700 via-teal-500 to-green-400 mx-auto mt-4 rounded-full"></div>
</header>
<!-- Main Layout -->
<div class="flex flex-col lg:flex-row gap-6 xl:gap-8">
<!-- SISI KIRI: DEPARTEMEN -->
<section class="w-full lg:w-3/5 bg-slate-50/80 p-5 rounded-2xl border border-slate-200 shadow-inner h-[800px] overflow-y-auto task-bank-container relative">
<div class="flex justify-between items-center mb-4 sticky top-0 bg-slate-50/95 backdrop-blur-md z-30 py-3 border-b border-slate-200 rounded-b-lg">
<h3 class="text-lg font-bold text-slate-700 flex items-center gap-2">
<span>🎯</span> DEPARTEMEN & UNIT KERJA
</h3>
<span class="text-xs bg-teal-100 text-teal-800 px-3 py-1 rounded-full font-bold">3 Tugas per Departemen</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 pb-4 mt-2">
<div id="kurikulum" data-name="Kurikulum" class="slot-box drop-zone rounded-xl border-2 border-dashed border-blue-400 bg-blue-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">📚</span>
<p class="font-extrabold text-sm text-blue-900 uppercase tracking-wider">Kurikulum</p>
</div>
<div id="kesiswaan" data-name="Kesiswaan" class="slot-box drop-zone rounded-xl border-2 border-dashed border-teal-400 bg-teal-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">👥</span>
<p class="font-extrabold text-sm text-teal-900 uppercase tracking-wider">Kesiswaan</p>
</div>
<div id="sarpras" data-name="Sarpras" class="slot-box drop-zone rounded-xl border-2 border-dashed border-indigo-400 bg-indigo-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">🏗️</span>
<p class="font-extrabold text-sm text-indigo-900 uppercase tracking-wider">Sarpras</p>
</div>
<div id="humas" data-name="Humas" class="slot-box drop-zone rounded-xl border-2 border-dashed border-cyan-400 bg-cyan-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">📢</span>
<p class="font-extrabold text-sm text-cyan-900 uppercase tracking-wider">Humas</p>
</div>
<div id="tata-usaha" data-name="Tata Usaha" class="slot-box drop-zone rounded-xl border-2 border-dashed border-slate-400 bg-slate-100/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">🗄️</span>
<p class="font-extrabold text-sm text-slate-800 uppercase tracking-wider">Tata Usaha</p>
</div>
<div id="uks" data-name="UKS" class="slot-box drop-zone rounded-xl border-2 border-dashed border-green-400 bg-green-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">🏥</span>
<p class="font-extrabold text-sm text-green-900 uppercase tracking-wider">UKS</p>
</div>
<div id="lab-ipa" data-name="Lab IPA" class="slot-box drop-zone rounded-xl border-2 border-dashed border-purple-400 bg-purple-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">🔬</span>
<p class="font-extrabold text-sm text-purple-900 uppercase tracking-wider">Lab IPA</p>
</div>
<div id="piket" data-name="Piket" class="slot-box drop-zone rounded-xl border-2 border-dashed border-orange-400 bg-orange-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">🕐</span>
<p class="font-extrabold text-sm text-orange-900 uppercase tracking-wider">Piket</p>
</div>
<div id="wali-kelas" data-name="Wali Kelas" class="slot-box drop-zone rounded-xl border-2 border-dashed border-rose-400 bg-rose-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">🧑🏫</span>
<p class="font-extrabold text-sm text-rose-900 uppercase tracking-wider">Wali Kelas</p>
</div>
<div id="guru-wali" data-name="Guru Wali (BK)" class="slot-box drop-zone rounded-xl border-2 border-dashed border-amber-400 bg-amber-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">🤝</span>
<p class="font-extrabold text-sm text-amber-900 uppercase tracking-wider">Guru Wali</p>
</div>
</div>
</section>
<!-- SISI KANAN: BANK TUGAS (30 Tugas) -->
<section class="w-full lg:w-2/5 flex flex-col">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold text-slate-700 flex items-center gap-2">
<span>🗂️</span> TUGAS & SOLUSI
</h3>
<div class="flex gap-2">
<button id="checkBtn" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-bold transition shadow-md flex items-center gap-1">
✔️ Periksa
</button>
<button id="resetBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-bold transition shadow-md">
🔄
</button>
</div>
</div>
<div id="bankTugas" class="task-bank-container drop-zone bg-[url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Ccircle cx=\'2\' cy=\'2\' r=\'1\' fill=\'%23cbd5e1\' fill-opacity=\'0.5\'/%3E%3C/svg%3E')] bg-slate-50 rounded-2xl p-5 h-[750px] overflow-y-auto border-2 border-slate-200">
<div class="grid grid-cols-2 gap-4 pt-2" id="bankGrid">
<!-- KURIKULUM (1-3) -->
<div class="task-card bg-amber-100 rounded-lg p-4 shadow border border-amber-200" draggable="true" id="task-1" data-target="kurikulum" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan In-House Training (IHT) penyusunan modul ajar & supervisi klinis.</p>
</div>
<div class="task-card bg-blue-100 rounded-lg p-4 shadow border border-blue-200" draggable="true" id="task-2" data-target="kurikulum" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Memanfaatkan aplikasi penyusun jadwal otomatis & validasi jadwal KBM.</p>
</div>
<div class="task-card bg-pink-100 rounded-lg p-4 shadow border border-pink-200" draggable="true" id="task-3" data-target="kurikulum" style="transform: rotate(-0.5deg);">
<p class="text-xs font-semibold text-slate-800">Melaksanakan klinik akademik intensif & analisis butir soal secara berkala.</p>
</div>
<!-- KESISWAAN (4-6) -->
<div class="task-card bg-purple-100 rounded-lg p-4 shadow border border-purple-200" draggable="true" id="task-4" data-target="kesiswaan" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Mengaktifkan sistem buku kendali poin pelanggaran & kordinasi rutin dengan BK.</p>
</div>
<div class="task-card bg-orange-100 rounded-lg p-4 shadow border border-orange-200" draggable="true" id="task-5" data-target="kesiswaan" style="transform: rotate(1.5deg);">
<p class="text-xs font-semibold text-slate-800">Membentuk klub pembinaan prestasi olahraga/seni sejak awal semester.</p>
</div>
<div class="task-card bg-teal-100 rounded-lg p-4 shadow border border-teal-200" draggable="true" id="task-6" data-target="kesiswaan" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Mengoptimalkan kegiatan pembiasaan harian/mingguan (upacara, literasi, doa).</p>
</div>
<!-- SARPRAS (7-9) -->
<div class="task-card bg-indigo-100 rounded-lg p-4 shadow border border-indigo-200" draggable="true" id="task-7" data-target="sarpras" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Melakukan digitalisasi buku inventaris & pelabelan ulang aset sekolah.</p>
</div>
<div class="task-card bg-red-100 rounded-lg p-4 shadow border border-red-200" draggable="true" id="task-8" data-target="sarpras" style="transform: rotate(1deg);">
<p class="text-xs font-semibold text-slate-800">Menyediakan buku kendali/laporan kerusakan sarpras harian di ruang piket.</p>
</div>
<div class="task-card bg-cyan-100 rounded-lg p-4 shadow border border-cyan-200" draggable="true" id="task-9" data-target="sarpras" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Menyusun jadwal piket pemeliharaan taman & toilet untuk tenaga kebersihan.</p>
</div>
<!-- HUMAS (10-12) -->
<div class="task-card bg-pink-100 rounded-lg p-4 shadow border border-pink-200" draggable="true" id="task-10" data-target="humas" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Mengelola media sosial sekolah & mendokumentasikan setiap prestasi siswa/guru.</p>
</div>
<div class="task-card bg-lime-100 rounded-lg p-4 shadow border border-lime-200" draggable="true" id="task-11" data-target="humas" style="transform: rotate(1.8deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan pertemuan paguyuban orang tua/wali murid secara berkala.</p>
</div>
<div class="task-card bg-yellow-100 rounded-lg p-4 shadow border border-yellow-200" draggable="true" id="task-12" data-target="humas" style="transform: rotate(-2.5deg);">
<p class="text-xs font-semibold text-slate-800">Menjalin kerja sama (MoU) dengan puskesmas, polsek, dan tokoh masyarakat.</p>
</div>
<!-- TATA USAHA (13-15) -->
<div class="task-card bg-slate-200 rounded-lg p-4 shadow border border-slate-300" draggable="true" id="task-13" data-target="tata-usaha" style="transform: rotate(1deg);">
<p class="text-xs font-semibold text-slate-800">Mengelola administrasi persuratan masuk/keluar dan kearsipan sekolah.</p>
</div>
<div class="task-card bg-gray-200 rounded-lg p-4 shadow border border-gray-300" draggable="true" id="task-14" data-target="tata-usaha" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Memproses pembaruan data pokok pendidikan (Dapodik) siswa dan guru.</p>
</div>
<div class="task-card bg-stone-200 rounded-lg p-4 shadow border border-stone-300" draggable="true" id="task-15" data-target="tata-usaha" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Melayani legalisir ijazah, mutasi siswa, & pembuatan surat keterangan aktif.</p>
</div>
<!-- UKS (16-18) -->
<div class="task-card bg-purple-100 rounded-lg p-4 shadow border border-purple-200" draggable="true" id="task-16" data-target="uks" style="transform: rotate(-0.5deg);">
<p class="text-xs font-semibold text-slate-800">Melengkapi kotak P3K secara berkala & menyusun SOP penanganan siswa sakit.</p>
</div>
<div class="task-card bg-teal-100 rounded-lg p-4 shadow border border-teal-200" draggable="true" id="task-17" data-target="uks" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Melatih ulang dan menjadwalkan piket harian Kader Kesehatan Remaja (PMR).</p>
</div>
<div class="task-card bg-orange-100 rounded-lg p-4 shadow border border-orange-200" draggable="true" id="task-18" data-target="uks" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan kampanye kesehatan rutin (cuci tangan, gizi, bahaya merokok).</p>
</div>
<!-- LAB IPA (19-21) -->
<div class="task-card bg-green-100 rounded-lg p-4 shadow border border-green-200" draggable="true" id="task-19" data-target="lab-ipa" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Melakukan stock opname (pendataan ulang) bahan kimia sesuai standar keamanan.</p>
</div>
<div class="task-card bg-yellow-100 rounded-lg p-4 shadow border border-yellow-200" draggable="true" id="task-20" data-target="lab-ipa" style="transform: rotate(1.2deg);">
<p class="text-xs font-semibold text-slate-800">Menyusun jadwal penggunaan lab terpadu & form peminjaman alat yang praktis.</p>
</div>
<div class="task-card bg-cyan-100 rounded-lg p-4 shadow border border-cyan-200" draggable="true" id="task-21" data-target="lab-ipa" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Mengintegrasikan jadwal praktikum minimal satu kali dalam setiap bab mapel IPA.</p>
</div>
<!-- PIKET (22-24) -->
<div class="task-card bg-indigo-100 rounded-lg p-4 shadow border border-indigo-200" draggable="true" id="task-22" data-target="piket" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengetatkan patroli keliling kelas & memberlakukan kartu izin keluar saat KBM.</p>
</div>
<div class="task-card bg-amber-100 rounded-lg p-4 shadow border border-amber-200" draggable="true" id="task-23" data-target="piket" style="transform: rotate(1deg);">
<p class="text-xs font-semibold text-slate-800">Menyiapkan bank tugas/lembar kerja mandiri cadangan untuk kelas jika guru absen.</p>
</div>
<div class="task-card bg-blue-100 rounded-lg p-4 shadow border border-blue-200" draggable="true" id="task-24" data-target="piket" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Membuat buku laporan harian piket yang terintegrasi ke Kesiswaan & Kepsek.</p>
</div>
<!-- WALI KELAS (25-27) -->
<div class="task-card bg-teal-100 rounded-lg p-4 shadow border border-teal-200" draggable="true" id="task-25" data-target="wali-kelas" style="transform: rotate(-0.5deg);">
<p class="text-xs font-semibold text-slate-800">Melakukan sesi bimbingan kelompok/individu secara rutin tiap minggu di kelas.</p>
</div>
<div class="task-card bg-purple-100 rounded-lg p-4 shadow border border-purple-200" draggable="true" id="task-26" data-target="wali-kelas" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Menggunakan format administrasi digital terpusat (leger, absen, denah duduk).</p>
</div>
<div class="task-card bg-yellow-100 rounded-lg p-4 shadow border border-yellow-200" draggable="true" id="task-27" data-target="wali-kelas" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan home visit (kunjungan rumah) bagi siswa yang bermasalah/mangkir.</p>
</div>
<!-- GURU WALI (28-30) -->
<div class="task-card bg-orange-100 rounded-lg p-4 shadow border border-orange-200" draggable="true" id="task-28" data-target="guru-wali" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Membuka layanan "Pojok Curhat" yang ramah anak & menjaga kerahasiaan siswa.</p>
</div>
<div class="task-card bg-pink-100 rounded-lg p-4 shadow border border-pink-200" draggable="true" id="task-29" data-target="guru-wali" style="transform: rotate(1.5deg);">
<p class="text-xs font-semibold text-slate-800">Membuat lembar penanganan kasus bersama (case conference) dengan orang tua.</p>
</div>
<div class="task-card bg-cyan-100 rounded-lg p-4 shadow border border-cyan-200" draggable="true" id="task-30" data-target="guru-wali" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Memberikan bimbingan klasikal tentang manajemen stres, motivasi, & karier.</p>
</div>
</div>
</div>
</section>
</div>
<footer class="mt-8 text-center border-t border-teal-100 pt-6">
<p class="text-sm text-slate-500 font-medium">Panitia Raker SMP Negeri 72 Maluku Tengah © 2026 - Papan Interaktif Dinamis</p>
</footer>
</main>
<!-- SCRIPT DRAG & DROP + AUDIO -->
<script>
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function playAudioFeedback(type) {
if (audioCtx.state === 'suspended') audioCtx.resume();
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
if (type === 'drop') {
osc.type = 'sine';
osc.frequency.setValueAtTime(450, audioCtx.currentTime);
osc.frequency.exponentialRampToValueAtTime(600, audioCtx.currentTime + 0.1);
gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
osc.start(); osc.stop(audioCtx.currentTime + 0.1);
} else if (type === 'success') {
osc.type = 'triangle';
osc.frequency.setValueAtTime(523.25, audioCtx.currentTime);
osc.frequency.setValueAtTime(659.25, audioCtx.currentTime + 0.1);
gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.3);
osc.start(); osc.stop(audioCtx.currentTime + 0.3);
} else if (type === 'error') {
osc.type = 'sawtooth';
osc.frequency.setValueAtTime(150, audioCtx.currentTime);
gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.3);
osc.start(); osc.stop(audioCtx.currentTime + 0.3);
}
}
document.addEventListener('DOMContentLoaded', () => {
const taskCards = document.querySelectorAll('.task-card');
const dropZones = document.querySelectorAll('.drop-zone');
const bankGrid = document.getElementById('bankGrid');
const resetBtn = document.getElementById('resetBtn');
const checkBtn = document.getElementById('checkBtn');
document.body.addEventListener('click', () => {
if (audioCtx.state === 'suspended') audioCtx.resume();
}, { once: true });
taskCards.forEach(card => {
card.addEventListener('dragstart', dragStart);
card.addEventListener('dragend', dragEnd);
});
dropZones.forEach(zone => {
zone.addEventListener('dragover', dragOver);
zone.addEventListener('dragenter', dragEnter);
zone.addEventListener('dragleave', dragLeave);
zone.addEventListener('drop', dragDrop);
});
function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
setTimeout(() => e.target.classList.add('dragging'), 0);
removeValidationStyling(e.target);
}
function dragEnd(e) {
e.target.classList.remove('dragging');
dropZones.forEach(zone => zone.classList.remove('drag-over'));
}
function dragOver(e) { e.preventDefault(); }
function dragEnter(e) {
e.preventDefault();
let zone = e.target.closest('.drop-zone');
if (zone && zone.id !== 'bankTugas') zone.classList.add('drag-over');
}
function dragLeave(e) {
let zone = e.target.closest('.drop-zone');
if (zone) zone.classList.remove('drag-over');
}
function dragDrop(e) {
e.preventDefault();
let zone = e.target.closest('.drop-zone');
if (zone) {
zone.classList.remove('drag-over');
const id = e.dataTransfer.getData('text/plain');
const draggableElement = document.getElementById(id);
if (draggableElement) {
playAudioFeedback('drop');
if (zone.id === 'bankTugas') {
bankGrid.appendChild(draggableElement);
let randomRotate = (Math.random() * 5 - 2.5).toFixed(1);
draggableElement.style.transform = `rotate(${randomRotate}deg)`;
} else {
zone.appendChild(draggableElement);
}
}
}
}
function removeValidationStyling(card) {
card.classList.remove('correct-ans', 'wrong-ans');
const feedbackMsg = card.querySelector('.feedback-msg');
if (feedbackMsg) feedbackMsg.remove();
}
resetBtn.addEventListener('click', () => {
if(!confirm("Kembalikan semua tugas ke Bank Tugas?")) return;
taskCards.forEach(card => {
removeValidationStyling(card);
bankGrid.appendChild(card);
let randomRotate = (Math.random() * 5 - 2.5).toFixed(1);
card.style.transform = `rotate(${randomRotate}deg)`;
});
});
checkBtn.addEventListener('click', () => {
let correctCount = 0;
let wrongCount = 0;
let unplacedCount = 0;
taskCards.forEach(card => {
removeValidationStyling(card);
const targetId = card.getAttribute('data-target');
const currentParent = card.parentNode;
const targetName = document.getElementById(targetId).getAttribute('data-name');
if (currentParent.id === 'bankGrid' || currentParent.id === 'bankTugas') {
unplacedCount++;
} else if (currentParent.id === targetId) {
correctCount++;
card.classList.add('correct-ans');
} else {
wrongCount++;
card.classList.add('wrong-ans');
const msg = document.createElement('div');
msg.className = 'feedback-msg text-[10px] font-bold text-red-700 mt-2 p-1 bg-white bg-opacity-90 rounded border border-red-300 text-center leading-tight';
msg.innerHTML = `❌ Seharusnya:<br>${targetName}`;
card.appendChild(msg);
}
});
if (wrongCount > 0) {
playAudioFeedback('error');
} else if (correctCount > 0 && wrongCount === 0) {
playAudioFeedback('success');
}
alert(`📊 HASIL EVALUASI\n\n✅ Benar: ${correctCount}\n❌ Salah: ${wrongCount}\n⚠️ Belum Dipilih: ${unplacedCount}`);
});
});
</script>
</body>
</html>
.png)
Kelas 7
IPA
Suhu, Pemuaian dan Kalor 7 : TP 11 & Suhu Tubuh: Perpindahan Kalor secara Konduksi, Konveksi, Radiasi serta Termoregulasi Hewan Ektoterm & Endoterm
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 7 - Perpindahan Kalor & Termoregulasi</title>
<script>
MathJax = { tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] } };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #064e3b 0%, #1e1b4b 50%, #0f172a 100%);
--card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --purple: #c084fc; --text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #10b981, #c084fc); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #10b981, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #10b981, #c084fc); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #10b981, #3b82f6); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 7</span>
<h1>PERPINDAHAN KALOR & TERMOREGULASI</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 3: Suhu, Pemuaian dan Kalor</p>
<div class="glass-card" style="margin: 20px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran (TP 11 & Suhu Tubuh):</b></p>
<p>Siswa mampu menganalisis 3 cara perpindahan kalor (konduksi, konveksi, radiasi) serta mekanisme pengaturan suhu tubuh (termoregulasi) pada manusia dan hewan (Ektoterm vs Endoterm).</p>
</div>
<p style="color: var(--primary);">Klik 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Pengamatan Api Unggun & Kadal Berjemur</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🔥 🏕️</span>
<p><b>Duduk Dekat Api Unggun</b></p>
<button class="interactive-btn" onclick="alert('Tubuh terasa hangat meski tidak menyentuh api! Terjadi perpindahan kalor secara RADIASI (pancaran tanpa perantara).')">Amati Radiasi</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">🦎 🪨</span>
<p><b>Kadal Berbaring di Batu Panas</b></p>
<button class="interactive-btn" onclick="alert('Kadal (Ektoterm) menyerap kalor dari batu secara KONDUKSI langsung untuk menaikkan suhu tubuhnya!')">Amati Ektoterm</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Mengapa Menggigil saat Kedinginan?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Mengapa saat kamu berada di ruangan AC yang sangat dingin, tubuhmu tiba-tiba menggigil secara otomatis?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">🥶 ➔ 🧠 ➔ 💪 (Menggigil)</p>
<p>Bagaimana perintah hipotalamus otak menghasilkan panas melalui gerak otot rangka?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Aplikasi Perpindahan Kalor & Adaptasi Hewan</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Peralatan Masak:</b> Gagang wajan terbuat dari plastik/kayu (isolator) agar tidak panas saat dipegang (mencegah konduksi).</li>
<li style="margin-bottom: 10px;"><b>Ventilasi Rumah:</b> Cerobong dan angin laut/darat terjadi akibat aliran udara panas (konveksi).</li>
<li><b>Hewan Kutub:</b> Beruang kutub (Endoterm) memiliki lapisan lemak tebal untuk menjaga metabolisme panas internal.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 11 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 11</span>
<h2>8. 3 Cara Perpindahan Kalor</h2>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--primary);">1. Konduksi</h4>
<p style="font-size: 0.88rem;">Perpindahan kalor lewat hantaran <b>tanpa disertai perpindahan partikel</b> zat (terjadi pada zat padat/konduktor). Contoh: Sendok besi panas di teh manis.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--success);">2. Konveksi</h4>
<p style="font-size: 0.88rem;">Perpindahan kalor lewat aliran di mana <b>partikel zat ikut berpindah</b> (pada cair/gas). Contoh: Memasak air mendidih, angin laut.</p>
</div>
</div>
<div class="glass-card" style="margin-top: 10px;">
<h4 style="color: var(--yellow);">3. Radiasi</h4>
<p style="font-size: 0.88rem;">Perpindahan kalor secara pancaran <b>tanpa melalui zat perantara</b> (medium). Contoh: Sinar matahari sampai ke bumi, panas api unggun.</p>
</div>
</div>
<!-- SLIDE 6: MATERI PADAT TERMOREGULASI -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat Termoregulasi</span>
<h2>9. Pengaturan Suhu Tubuh (Termoregulasi)</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p>Suhu tubuh normal manusia: $36{,}5^{\circ}\text{C} - 37{,}5^{\circ}\text{C}$.</p>
<p style="font-size: 0.9rem; margin-top: 4px;">• <b>Kondisi Panas:</b> Pembuluh darah melebar, berkeringat, pakai baju tipis.<br>• <b>Kondisi Dingin:</b> Pembuluh darah menyempit, otot menggigil untuk produksi panas.</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--accent);">🦎 Hewan Ektoterm</h4>
<p style="font-size: 0.88rem;">Berdarah dingin, mengandalkan panas **eksternal/lingkungan** (contoh: reptil berjemur di batu, berendam lumpur).</p>
</div>
<div class="glass-card">
<h4 style="color: var(--purple);">🐻 Hewan Endoterm</h4>
<p style="font-size: 0.88rem;">Berdarah panas, menghasilkan panas dari **metabolisme tubuh** (contoh: mamalia, burung). Melakukan *torpor* saat cuaca dingin ekstrem.</p>
</div>
</div>
</div>
<!-- SLIDE 7: KUIS TP 11 & TERMOREGULASI -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 11</span>
<h2>Uji Perpindahan Kalor & Suhu Tubuh (5 Soal)</h2>
<div class="glass-card">
<h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q1-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q1-opts"></div>
<p id="q1-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ1()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 8: BATTLE KELOMPOK MULTI-USER -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Konduksi)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Konveksi)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Radiasi)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Termoregulasi)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 9: UJIAN AKHIR INDIVIDU -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex-opts"></div>
<p id="ex-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 10: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji pemahamanmu mengenai perpindahan kalor & termoregulasi:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Selamat kamu menyelesaikan seluruh Bab 3! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Terus tingkatkan pemahaman IPA ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan risau, ulangi membaca bagian konveksi dan ektoterm! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 11: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option><option value="7-B">7-B ⚡</option><option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Selamat, kamu telah menuntaskan Bab 3! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 11</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
const q1Data = [
{ q: "1. Perpindahan kalor yang terjadi tanpa disertai perpindahan partikel zat perantaranya dinamakan...", opts: ["Konduksi", "Konveksi", "Radiasi"], ans: 0 },
{ q: "2. Terjadinya angin laut dan angin darat merupakan contoh perpindahan kalor secara...", opts: ["Konveksi", "Konduksi", "Radiasi"], ans: 0 },
{ q: "3. Panas matahari sampai ke permukaan bumi tanpa zat perantara melalui proses...", opts: ["Radiasi", "Konduksi", "Evaporasi"], ans: 0 },
{ q: "4. Hewan ektoterm (berdarah dingin) mengatur suhu tubuhnya dengan cara...", opts: ["Mengandalkan sumber panas eksternal/lingkungan", "Meningkatkan metabolisme internal", "Menggigil terus menerus"], ans: 0 },
{ q: "5. Saat suhu lingkungan sangat dingin, otot manusia berkontraksi menggigil dengan tujuan...", opts: ["Meningkatkan suhu tubuh melalui pergerakan otot", "Mengeluarkan keringat", "Menyempitkan napas"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 11 Selesai!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; }
let d = q1Data[q1Idx];
document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari 5`;
document.getElementById('q1-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; });
document.getElementById('q1-opts').innerHTML = html;
document.getElementById('q1-feedback').innerText = "";
document.getElementById('q1-next-btn').style.display = "none";
reRenderMath();
}
function checkQ1(i) {
if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; }
else { document.getElementById('q1-feedback').innerText = "❌ Kurang Tepat!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; }
document.getElementById('q1-next-btn').style.display = "inline-block";
}
function nextQ1() { q1Idx++; renderQ1(); }
const teamData = {
t1: [
{ q: "Konduksi terjadi pada zat...", opts: ["Padat", "Gas"], ans: 0 },
{ q: "Ujung sendok dipanaskan terasa panas...", opts: ["Konduksi", "Radiasi"], ans: 0 },
{ q: "Partikel zat konduksi...", opts: ["Tidak ikut berpindah", "Ikut mengalir"], ans: 0 },
{ q: "Bahan mudah hantar panas...", opts: ["Konduktor", "Isolator"], ans: 0 },
{ q: "Gagang ebonit wajan adalah...", opts: ["Isolator", "Konduktor"], ans: 0 }
],
t2: [
{ q: "Konveksi diikuti perpindahan...", opts: ["Partikel zat", "Cahaya"], ans: 0 },
{ q: "Memasak air mendidih contoh...", opts: ["Konveksi", "Konduksi"], ans: 0 },
{ q: "Angin darat dan laut adalah...", opts: ["Konveksi udara", "Radiasi"], ans: 0 },
{ q: "Cerobong asap pabrik memanfaatkan...", opts: ["Konveksi", "Konduksi"], ans: 0 },
{ q: "Minyak goreng berputar saat panas...", opts: ["Konveksi", "Radiasi"], ans: 0 }
],
t3: [
{ q: "Radiasi perpindahan tanpa...", opts: ["Perantara/medium", "Suhu"], ans: 0 },
{ q: "Panas api unggun sampai lewat...", opts: ["Radiasi", "Konduksi"], ans: 0 },
{ q: "Panas matahari sampai ke bumi...", opts: ["Radiasi", "Konveksi"], ans: 0 },
{ q: "Baju hitam menyerap radiasi...", opts: ["Lebih banyak", "Lebih sedikit"], ans: 0 },
{ q: "Lampu inkubator telur contoh...", opts: ["Radiasi", "Konduksi"], ans: 0 }
],
t4: [
{ q: "Reptil/Kadal tergolong hewan...", opts: ["Ektoterm", "Endoterm"], ans: 0 },
{ q: "Mamalia/Manusia tergolong...", opts: ["Endoterm", "Ektoterm"], ans: 0 },
{ q: "Kadal berjemur batu panas secara...", opts: ["Konduksi", "Konveksi"], ans: 0 },
{ q: "Torpor adalah penurunan...", opts: ["Metabolisme saat dingin", "Massa"], ans: 0 },
{ q: "Keringat keluar saat kondisi...", opts: ["Panas", "Sangat dingin"], ans: 0 }
]
};
let tIdx = { t1:0, t2:0, t3:0, t4:0 };
let tScore = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam(teamKey) {
let idx = tIdx[teamKey];
let list = teamData[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam(teamKey, optIdx) {
if(optIdx === teamData[teamKey][tIdx[teamKey]].ans) tScore[teamKey]++;
tIdx[teamKey]++;
renderTeam(teamKey);
}
function updateGroupTotal() {
let total = tScore.t1 + tScore.t2 + tScore.t3 + tScore.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
let rawExamData = [
{ q: "1. Saat memasak air di panci, bagian air bawah bergerak ke atas dan air dingin di atas turun. Ini terjadi karena perpindahan...", opts: ["Konveksi", "Konduksi", "Radiasi"], ans: 0 },
{ q: "2. Hewan endoterm (berdarah panas) mempertahankan suhu tubuhnya terutama melalui...", opts: ["Metabolisme internal tubuh", "Berjemur di batu panas", "Masuk ke dalam liang tanah"], ans: 0 },
{ q: "3. Tubuh manusia mengeluarkan keringat saat cuaca panas. Mekanisme ini bertujuan untuk...", opts: ["Membuang panas tubuh lewat evaporasi", "Menjaga agar kulit tetap basah", "Meningkatkan massa air"], ans: 0 },
{ q: "4. Dinding termos dilapisi bahan mengkilap tembaga/perak bertujuan untuk mencegah perpindahan kalor secara...", opts: ["Radiasi", "Konduksi", "Konveksi"], ans: 0 },
{ q: "5. Ujung besi yang dibakar di atas api lama-kelamaan membuat tangan yang memegang ujung lainnya terasa panas secara...", opts: ["Konduksi", "Konveksi", "Radiasi"], ans: 0 }
];
let exData = rawExamData.sort(() => Math.random() - 0.5);
let exIdx = 0;
function renderExam() {
if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 7 Selesai!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; }
let d = exData[exIdx];
document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari 5`;
document.getElementById('ex-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; });
document.getElementById('ex-opts').innerHTML = html;
document.getElementById('ex-feedback').innerText = "";
document.getElementById('ex-next-btn').style.display = "none";
reRenderMath();
}
function checkExam(i) {
document.getElementById('ex-feedback').innerText = "👍 Jawaban Terekam!";
document.getElementById('ex-feedback').style.color = "var(--success)";
document.getElementById('ex-next-btn').style.display = "inline-block";
}
function nextExam() { exIdx++; renderExam(); }
renderQ1(); renderTeam('t1'); renderTeam('t2'); renderTeam('t3'); renderTeam('t4'); renderExam(); updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
Suhu, Pemuaian dan Kalor 6 : Pengaruh Kalor pada Suhu & Wujud Zat, Faktor Penguapan, Perhitungan
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 6 - Kalor & Perhitungannya</title>
<script>
MathJax = { tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] } };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #f43f5e 0%, #311b92 50%, #0f172a 100%);
--card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --purple: #c084fc; --text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #f43f5e, #38bdf8); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #fbbf24, #f43f5e, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #f43f5e, #38bdf8); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #f43f5e, #3b82f6); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 6 (Modul Padat TP 6 - 10)</span>
<h1>KALOR & PERUBAHAN ZAT</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 3: Suhu, Pemuaian dan Kalor</p>
<div class="glass-card" style="margin: 15px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran Padat (TP 6, 7, 8, 9, 10):</b></p>
<p>1. Menyelidiki pengaruh kalor terhadap suhu & wujud zat.<br>2. Menganalisis 4 faktor percepatan penguapan.<br>3. Menghitung besar kalor ($Q = m \cdot c \cdot \Delta t$ dan $Q = m \cdot L$).</p>
</div>
<p style="color: var(--primary);">Klik 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Pengamatan Memasak Air & Menjemur Baju</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🫖 ♨️</span>
<p><b>Memasak Air di Kompor</b></p>
<button class="interactive-btn" onclick="alert('Semakin lama dipanaskan, suhu air semakin tinggi hingga 100 °C, lalu berubah wujud menjadi uap air!')">Amati Pemberian Kalor</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">👕 ☀️</span>
<p><b>Menjemur Pakaian Basah</b></p>
<button class="interactive-btn" onclick="alert('Baju dijereng luas di bawah sinar matahari dan angin kencang akan sangat cepat kering karena penguapan dipercepat!')">Amati Penguapan</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Mengapa Suhu Es batu Tidak Naik saat Mencair?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Saat es batu dipanaskan dan mulai mencair menjadi air pada suhu $0^{\circ}\text{C}$, mengapa termometer menunjukkan angka yang TETAP $0^{\circ}\text{C}$ sampai semua es habis mencair?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">🧊 ➔ 💧 ($Q = m \cdot L$)</p>
<p>Ke mana perginya energi kalor yang terus diberikan saat perubahan wujud terjadi?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Kalor dalam Kehidupan & Industri</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Keringat Manusia:</b> Tubuh mengeluarkan keringat agar saat menguap dapat menyerap kalor berlebih dari kulit.</li>
<li style="margin-bottom: 10px;"><b>Mesin Pendingin Es:</b> Menggunakan perhitungan $Q = m \cdot L$ untuk membekukan air menjadi balok es.</li>
<li><b>Pengeringan Garam Laut:</b> Petani garam memperluas permukaan tambak air laut agar penguapan berlangsung cepat.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 6 & 7 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 6 & 7</span>
<h2>6. Kalor, Perubahan Wujud & Penguapan</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p><b>Kalor ($Q$):</b> Bentuk energi yang berpindah dari benda bersuhu lebih tinggi ke benda bersuhu lebih rendah (Satuan SI: Joule / $\text{J}$).</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--yellow);">🔥 Perubahan Wujud Zat</h4>
<p style="font-size: 0.88rem;">• <b>Butuh Kalor:</b> Melebur (padat$\rightarrow$cair), Menguap (cair$\rightarrow$gas), Menyublim (padat$\rightarrow$gas).<br>• <b>Lepas Kalor:</b> Membeku (cair$\rightarrow$padat), Mengembun (gas$\rightarrow$cair), Mengkristal (gas$\rightarrow$padat).</p>
</div>
<div class="glass-card">
<h4 style="color: var(--primary);">⚡ 4 Cara Mempercepat Penguapan</h4>
<p style="font-size: 0.88rem;">1. Memanaskan zat cair.<br>2. Memperbesar luas permukaan.<br>3. Mengalirkan udara kering di atasnya.<br>4. Mengurangi tekanan uap di permukaan.</p>
</div>
</div>
</div>
<!-- SLIDE 6: MATERI PADAT TP 8, 9, 10 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 8, 9, 10</span>
<h2>7. Perhitungan Rumus Kalor ($Q$)</h2>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--success);">1. Perubahan Suhu ($Q = m \cdot c \cdot \Delta t$)</h4>
<p style="font-size: 0.9rem;">$Q = \text{kalor } (\text{J})$, $m = \text{massa } (\text{kg})$, $c = \text{kalor jenis } (\text{J/kg}\cdot^{\circ}\text{C})$, $\Delta t = t_2 - t_1 = \text{kenaikan suhu}$.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--accent);">2. Perubahan Wujud ($Q = m \cdot L$)</h4>
<p style="font-size: 0.9rem;">Saat melebur/mendidih, suhu **tetap**. $L = \text{kalor lebur/lebur laten } (\text{J/kg})$, $U = \text{kalor uap}$.</p>
</div>
</div>
<div class="glass-card" style="margin-top: 10px; text-align: center;">
<p style="color: var(--yellow); font-weight: bold;">Grafik Kalor: Garam/Es Mendidih</p>
<p style="font-size: 0.9rem;">Garis miring = $Q = m \cdot c \cdot \Delta t$ (Suhu naik) | Garis mendatar = $Q = m \cdot L$ (Wujud berubah, suhu tetap).</p>
</div>
</div>
<!-- SLIDE 7: KUIS TP 6-10 -->
<div class="slide">
<span class="slide-tag">🎮 Kuis Padat TP 6-10</span>
<h2>Uji Pemahaman Kalor (5 Soal)</h2>
<div class="glass-card">
<h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q1-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q1-opts"></div>
<p id="q1-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ1()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 8: BATTLE KELOMPOK MULTI-USER -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Wujud Kalor)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Faktor Penguapan)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Rumus $Q=m c \Delta t$)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Kalor Laten)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 9: UJIAN AKHIR INDIVIDU -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex-opts"></div>
<p id="ex-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 10: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji pemahamanmu tentang perhitungan kalor:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Materi hitungan kalor dikuasai dengan baik! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Tingkatkan latihan rumus $Q=m.c.\\Delta t$ ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Mari diskusikan grafik kalor bersama guru! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 11: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option><option value="7-B">7-B ⚡</option><option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Sampai jumpa di Pertemuan 7! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 11</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
const q1Data = [
{ q: "1. Peristiwa perubahan wujud zat dari cair menjadi gas yang membutuhkan kalor dinamakan...", opts: ["Menguap", "Membeku", "Mengembun"], ans: 0 },
{ q: "2. Cara yang TEPAT untuk mempercepat penguapan air pakaian basah adalah...", opts: ["Memperluas permukaan pakaian (dijereng)", "Dilipat rapat", "Ditaruh di tempat tertutup"], ans: 0 },
{ q: "3. Banyaknya kalor yang dibutuhkan untuk menaikkan suhu $2\\text{ kg}$ air sebesar $10^{\\circ}\\text{C}$ ($c = 4200\\text{ J/kg}^{\\circ}\\text{C}$) adalah...", opts: ["84.000 Joule", "42.000 Joule", "8.400 Joule"], ans: 0 },
{ q: "4. Rumus yang digunakan untuk menghitung kalor saat zat sedang melebur/mencair pada suhu tetap adalah...", opts: ["$Q = m \\cdot L$", "$Q = m \\cdot c \\cdot \\Delta t$", "$Q = m / L$"], ans: 0 },
{ q: "5. Pada grafik perubahan wujud es menjadi air, garis mendatar menunjukkan bahwa kalor digunakan untuk...", opts: ["Mengubah wujud zat (suhu tetap)", "Menaikkan suhu zat", "Mendinginkan zat"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis Padat TP 6-10 Selesai!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; }
let d = q1Data[q1Idx];
document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari 5`;
document.getElementById('q1-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; });
document.getElementById('q1-opts').innerHTML = html;
document.getElementById('q1-feedback').innerText = "";
document.getElementById('q1-next-btn').style.display = "none";
reRenderMath();
}
function checkQ1(i) {
if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; }
else { document.getElementById('q1-feedback').innerText = "❌ Kurang Tepat!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; }
document.getElementById('q1-next-btn').style.display = "inline-block";
}
function nextQ1() { q1Idx++; renderQ1(); }
const teamData = {
t1: [
{ q: "Melebur perubahan padat ke...", opts: ["Cair", "Gas"], ans: 0 },
{ q: "Membeku melepaskan...", opts: ["Kalor", "Es"], ans: 0 },
{ q: "Menguap perubahan cair ke...", opts: ["Gas", "Padat"], ans: 0 },
{ q: "Menyublim perubahan padat ke...", opts: ["Gas", "Cair"], ans: 0 },
{ q: "Mengembun melepaskan...", opts: ["Kalor", "Bensin"], ans: 0 }
],
t2: [
{ q: "Memperluas permukaan mempercepat...", opts: ["Penguapan", "Pembekuan"], ans: 0 },
{ q: "Pemanasan zat cair mempercepat...", opts: ["Menguap", "Mengkristal"], ans: 0 },
{ q: "Mengalirkan udara kering di atas air...", opts: ["Mempercepat penguapan", "Membuat beku"], ans: 0 },
{ q: "Mengurangi tekanan uap...", opts: ["Mempercepat uap", "Membuat mendidih lama"], ans: 0 },
{ q: "Keringat menguap menyerap...", opts: ["Kalor tubuh", "Air"], ans: 0 }
],
t3: [
{ q: "Rumus kalor kenaikan suhu...", opts: ["Q = m.c.\\Delta t", "Q = m.L"], ans: 0 },
{ q: "Simbol c artinya...", opts: ["Kalor jenis", "Panjang"], ans: 0 },
{ q: "Satuan SI kalor adalah...", opts: ["Joule", "Kalori saja"], ans: 0 },
{ q: "\\Delta t adalah...", opts: ["Suhu akhir - suhu awal", "Suhu awal"], ans: 0 },
{ q: "Kalor sebanding dengan...", opts: ["Massa & kenaikan suhu", "Warna"], ans: 0 }
],
t4: [
{ q: "Rumus kalor lebur adalah...", opts: ["Q = m.L", "Q = m.c.\\Delta t"], ans: 0 },
{ q: "Saat melebur, suhu zat bersifat...", opts: ["Tetap", "Meningkat drastis"], ans: 0 },
{ q: "Simbol L adalah...", opts: ["Kalor lebur laten", "Luas"], ans: 0 },
{ q: "Satuan kalor lebur laten L...", opts: ["J/kg", "J/°C"], ans: 0 },
{ q: "Garis mendatar grafik kalor...", opts: ["Perubahan wujud", "Suhu naik"], ans: 0 }
]
};
let tIdx = { t1:0, t2:0, t3:0, t4:0 };
let tScore = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam(teamKey) {
let idx = tIdx[teamKey];
let list = teamData[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam(teamKey, optIdx) {
if(optIdx === teamData[teamKey][tIdx[teamKey]].ans) tScore[teamKey]++;
tIdx[teamKey]++;
renderTeam(teamKey);
}
function updateGroupTotal() {
let total = tScore.t1 + tScore.t2 + tScore.t3 + tScore.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
let rawExamData = [
{ q: "1. Air sebanyak $0{,}5\\text{ kg}$ bersuhu $20^{\\circ}\\text{C}$ dipanaskan hingga $80^{\\circ}\\text{C}$. Jika $c = 4200\\text{ J/kg}^{\\circ}\\text{C}$, kalor yang dibutuhkan adalah...", opts: ["126.000 Joule", "63.000 Joule", "252.000 Joule"], ans: 0 },
{ q: "2. Es massanya $2\\text{ kg}$ mencair seluruhnya pada titik leburnya $0^{\\circ}\\text{C}$. Jika $L = 336.000\\text{ J/kg}$, besar kalor lebur adalah...", opts: ["672.000 Joule", "336.000 Joule", "168.000 Joule"], ans: 0 },
{ q: "3. Peristiwa berikut yang MELEPASKAN kalor ke lingkungan adalah...", opts: ["Uap air mengembun menjadi titik air", "Es batu mencair", "Air menguap saat dimasak"], ans: 0 },
{ q: "4. Mengapa pakaian yang dijemur dengan cara dijereng lebar lebih cepat kering dibanding lipatan?", opts: ["Karena memperbesar luas permukaan penguapan", "Karena mendapat suhu lebih dingin", "Karena massanya berkurang"], ans: 0 },
{ q: "5. Satuan Standar Internasional (SI) untuk menyatakan besar kalor adalah...", opts: ["Joule", "Kalori", "Watt"], ans: 0 }
];
let exData = rawExamData.sort(() => Math.random() - 0.5);
let exIdx = 0;
function renderExam() {
if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 6 Selesai!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; }
let d = exData[exIdx];
document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari 5`;
document.getElementById('ex-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; });
document.getElementById('ex-opts').innerHTML = html;
document.getElementById('ex-feedback').innerText = "";
document.getElementById('ex-next-btn').style.display = "none";
reRenderMath();
}
function checkExam(i) {
document.getElementById('ex-feedback').innerText = "👍 Jawaban Terekam!";
document.getElementById('ex-feedback').style.color = "var(--success)";
document.getElementById('ex-next-btn').style.display = "inline-block";
}
function nextExam() { exIdx++; renderExam(); }
renderQ1(); renderTeam('t1'); renderTeam('t2'); renderTeam('t3'); renderTeam('t4'); renderExam(); updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
Suhu, Pemuaian dan Kalor 5 : P 5: Menunjukkan pemuaian dalam teknologi, prinsip kerja bimetal, dan pengaplikasiannya
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 5 - Pemuaian dalam Teknologi & Bimetal</title>
<script>
MathJax = { tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] } };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #0f172a 0%, #311b92 50%, #4c1d95 100%);
--card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --purple: #c084fc; --text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #c084fc, #f43f5e); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #c084fc, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #c084fc, #f43f5e); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #c084fc, #3b82f6); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 5</span>
<h1>PEMUAIAN DALAM TEKNOLOGI</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 3: Suhu, Pemuaian dan Kalor</p>
<div class="glass-card" style="margin: 20px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran (TP 5):</b></p>
<p>Siswa mampu mendeskripsikan dan menganalisis penerapan prinsip pemuaian zat dalam teknologi modern, khususnya sakelar otomatis keping bimetal dan kelengkungan kabel listrik.</p>
</div>
<p style="color: var(--primary);">Klik 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Pengamatan Setrika & Kabel Listrik</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🔌 👔</span>
<p><b>Setrika Otomatis Mati Sendiri</b></p>
<button class="interactive-btn" onclick="alert('Lampu indikator setrika padam saat sudah sangat panas karena bimetal membengkok dan memutuskan arus listrik!')">Amati Bimetal Setrika</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">⚡ 🛣️</span>
<p><b>Kabel Listrik Siang vs Malam</b></p>
<button class="interactive-btn" onclick="alert('Kabel terlihat kendor/melengkung saat siang terik (panas), namun terlihat kencang/lurus saat malam hari (dingin)!')">Amati Kabel Listrik</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Ke Mana Bimetal Membengkok?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Jika dua logam dengan koefisien muai berbeda dikeling menjadi satu (Bimetal) lalu dipanaskan, ke arah logam mana bimetal itu akan membengkok?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">🧲 ↪️ ($\alpha_{\text{kecil}}$)</p>
<p>Mengapa bimetal membengkok ke arah logam bertanda koefisien muai lebih kecil saat dipanaskan?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Aplikasi Teknologi Bimetal & Pemuaian</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Thermostat Kulkas & AC:</b> Mengatur suhu pendingin ruangan secara otomatis menggunakan sakelar bimetal.</li>
<li style="margin-bottom: 10px;"><b>Alarm Kebakaran Otomatis:</b> Panas dari api membuat bimetal membengkok menyentuh kontak listrik untuk menyalakan sirine.</li>
<li><b>Pengelingan Pelat Kapal:</b> Paku keling dipanaskan hingga membara sebelum dipasang agar saat dingin mengikat sangat kuat.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 5 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 5</span>
<h2>5. Prinsip Kerja Bimetal & Kabel Listrik</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p><b>Bimetal:</b> Dua keping logam berbeda koefisien muainya ($\alpha$) yang dikeling menjadi satu.</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--accent);">🔥 Saat Dipanaskan</h4>
<p style="font-size: 0.9rem;">Bimetal membengkok ke arah logam yang <b>koefisien muai panjangnya lebih kecil</b> ($\alpha_{\text{kecil}}$).</p>
</div>
<div class="glass-card">
<h4 style="color: var(--primary);">❄️ Saat Didinginkan</h4>
<p style="font-size: 0.9rem;">Bimetal melengkung/membengkok ke arah logam yang <b>koefisien muai panjangnya lebih besar</b> ($\alpha_{\text{besar}}$).</p>
</div>
</div>
</div>
<!-- SLIDE 6: KUIS TP 5 -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 5</span>
<h2>Uji Pemuaian Teknologi (5 Soal)</h2>
<div class="glass-card">
<h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q1-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q1-opts"></div>
<p id="q1-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ1()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 7: BATTLE KELOMPOK MULTI-USER -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Definisi Bimetal)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Arah Bengkok)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Aplikasi Alat)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Kabel & Keling)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 8: UJIAN AKHIR INDIVIDU -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex-opts"></div>
<p id="ex-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 9: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji pemahamanmu tentang teknologi bimetal:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Aplikasi bimetal sangat menyenangkan! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Terus amati teknologi sekitar ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Mari diskusikan arah pembengkokannya lagi! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 10: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option><option value="7-B">7-B ⚡</option><option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Sampai jumpa di Pertemuan 6! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 10</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
const q1Data = [
{ q: "1. Bimetal terdiri dari dua keping logam yang dikeling menjadi satu dengan syarat...", opts: ["Koefisien muainya berbeda", "Jenis logam harus sama", "Ketebalannya beda jauh"], ans: 0 },
{ q: "2. Ketika bimetal dipanaskan, ia akan membengkok ke arah logam yang...", opts: ["Koefisien muainya lebih kecil", "Koefisien muainya lebih besar", "Massanya lebih berat"], ans: 0 },
{ q: "3. Sebaliknya jika bimetal didinginkan, ia akan membengkok ke arah logam yang...", opts: ["Koefisien muainya lebih besar", "Koefisien muainya lebih kecil", "Lebih panjang"], ans: 0 },
{ q: "4. Alat rumah tangga berikut yang memanfaatkan prinsip kerja bimetal sebagai pemutus arus otomatis adalah...", opts: ["Setrika listrik", "Kipas angin", "Lampu pijar"], ans: 0 },
{ q: "5. Mengapa kabel listrik di pinggir jalan dipasang agak kendor di siang hari?", opts: ["Agar tidak putus saat menyusut pada malam hari yang dingin", "Agar menghemat kabel", "Agar mudah tertiup angin"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 5 Selesai!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; }
let d = q1Data[q1Idx];
document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari 5`;
document.getElementById('q1-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; });
document.getElementById('q1-opts').innerHTML = html;
document.getElementById('q1-feedback').innerText = "";
document.getElementById('q1-next-btn').style.display = "none";
reRenderMath();
}
function checkQ1(i) {
if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; }
else { document.getElementById('q1-feedback').innerText = "❌ Kurang Tepat!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; }
document.getElementById('q1-next-btn').style.display = "inline-block";
}
function nextQ1() { q1Idx++; renderQ1(); }
const teamData = {
t1: [
{ q: "Bimetal adalah ... keping logam", opts: ["Dua", "Tiga"], ans: 0 },
{ q: "Syarat bimetal logamnya harus...", opts: ["Beda koefisien muai", "Sama jenis"], ans: 0 },
{ q: "Keping bimetal disatukan dengan...", opts: ["Paku keling", "Lem kertas"], ans: 0 },
{ q: "Bimetal peka terhadap...", opts: ["Perubahan suhu", "Tekanan angin"], ans: 0 },
{ q: "Logam A (\\alpha besar) dan B (\\alpha kecil)...", opts: ["Membentuk bimetal", "Mencair"], ans: 0 }
],
t2: [
{ q: "Dipanaskan, bimetal bengkok ke...", opts: ["\\alpha kecil", "\\alpha besar"], ans: 0 },
{ q: "Didinginkan, bimetal bengkok ke...", opts: ["\\alpha besar", "\\alpha kecil"], ans: 0 },
{ q: "Besi (\\alpha kecil) + Kuningan (\\alpha besar) dipanaskan...", opts: ["Bengkok ke Besi", "Bengkok ke Kuningan"], ans: 0 },
{ q: "Besi + Kuningan didinginkan...", opts: ["Bengkok ke Kuningan", "Bengkok ke Besi"], ans: 0 },
{ q: "Bimetal lurus kembali jika suhu...", opts: ["Normal kembali", "Makin mendidih"], ans: 0 }
],
t3: [
{ q: "Setrika otomatis pakai...", opts: ["Bimetal", "Roda gigi"], ans: 0 },
{ q: "Alarm kebakaran bimetal menyalakan...", opts: ["Sirine", "Kipas"], ans: 0 },
{ q: "Thermostat kulkas mengatur...", opts: ["Suhu otomatis", "Kecepatan es"], ans: 0 },
{ q: "Saat setrika terlalu panas bimetal...", opts: ["Putuskan arus", "Meningkatkan arus"], ans: 0 },
{ q: "Lampu sein mobil memanfaatkan...", opts: ["Bimetal", "Motor listrik"], ans: 0 }
],
t4: [
{ q: "Siang hari kabel listrik...", opts: ["Melengkung/kendor", "Lurus tegang"], ans: 0 },
{ q: "Malam hari kabel listrik...", opts: ["Lurus/kencang", "Sangat kendor"], ans: 0 },
{ q: "Kabel kendor di siang mencegah...", opts: ["Putus saat dingin", "Terbakar"], ans: 0 },
{ q: "Pengelingan pelat dipanaskan agar...", opts: ["Cepat rapat saat dingin", "Mudah berkarat"], ans: 0 },
{ q: "Ban sepeda meletus karena muai...", opts: ["Gas/Udara", "Karet padat"], ans: 0 }
]
};
let tIdx = { t1:0, t2:0, t3:0, t4:0 };
let tScore = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam(teamKey) {
let idx = tIdx[teamKey];
let list = teamData[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam(teamKey, optIdx) {
if(optIdx === teamData[teamKey][tIdx[teamKey]].ans) tScore[teamKey]++;
tIdx[teamKey]++;
renderTeam(teamKey);
}
function updateGroupTotal() {
let total = tScore.t1 + tScore.t2 + tScore.t3 + tScore.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
let rawExamData = [
{ q: "1. Keping bimetal terdiri dari tembaga ($\alpha = 0{,}000019/^{\circ}\text{C}$) dan besi ($\alpha = 0{,}000012/^{\circ}\text{C}$). Jika dipanaskan bimetal membengkok ke arah...", opts: ["Besi", "Tembaga", "Lurus"], ans: 0 },
{ q: "2. Sakelar bimetal pada setrika listrik bekerja dengan cara...", opts: ["Memutuskan aliran listrik ketika suhu melebihi batas", "Menambah daya listrik", "Mendinginkan alas setrika"], ans: 0 },
{ q: "3. Kabel transmisi listrik PLN sengaja dipasang agak kendur pada siang hari bertujuan agar...", opts: ["Tidak putus saat menyusut pada malam hari", "Menghemat penggunaan kawat", "Mudah dibetulkan"], ans: 0 },
{ q: "4. Pada alarm kebakaran, panas dari kobaran api menyebabkan bimetal membengkok dan...", opts: ["Menghubungkan kontak listrik sehingga bel berbunyi", "Menyemprotkan air", "Memadamkan api"], ans: 0 },
{ q: "5. Pengelingan pelat logam dilakukan pada saat paku keling dalam keadaan membara agar...", opts: ["Saat dingin paku menyusut dan menjepit pelat sangat kuat", "Paku tidak mudah patah", "Pelat tidak berkarat"], ans: 0 }
];
let exData = rawExamData.sort(() => Math.random() - 0.5);
let exIdx = 0;
function renderExam() {
if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 5 Selesai!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; }
let d = exData[exIdx];
document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari 5`;
document.getElementById('ex-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; });
document.getElementById('ex-opts').innerHTML = html;
document.getElementById('ex-feedback').innerText = "";
document.getElementById('ex-next-btn').style.display = "none";
reRenderMath();
}
function checkExam(i) {
document.getElementById('ex-feedback').innerText = "👍 Jawaban Terekam!";
document.getElementById('ex-feedback').style.color = "var(--success)";
document.getElementById('ex-next-btn').style.display = "inline-block";
}
function nextExam() { exIdx++; renderExam(); }
renderQ1(); renderTeam('t1'); renderTeam('t2'); renderTeam('t3'); renderTeam('t4'); renderExam(); updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
Suhu, Pemuaian dan Kalor 4 : Melakukan percobaan sederhana untuk menunjukkan pemuaian zat padat, cair, dan gas & menghitung pertambahan muai
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 4 - Percobaan & Rumus Pemuaian</title>
<script>
MathJax = { tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] } };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #0284c7 0%, #064e3b 50%, #0f172a 100%);
--card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --purple: #c084fc; --text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #10b981, #38bdf8); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #10b981, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #10b981, #38bdf8); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #10b981, #0284c7); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 4</span>
<h1>PERCOBAAN & RUMUS PEMUAIAN</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 3: Suhu, Pemuaian dan Kalor</p>
<div class="glass-card" style="margin: 20px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran (TP 4):</b></p>
<p>Siswa mampu membuktikan pemuaian melalui percobaan sederhana (Musschenbroek/sederhana) serta menghitung nilai pemuaian panjang dan volume menggunakan koefisien muai ($\alpha$ dan $\gamma$).</p>
</div>
<p style="color: var(--primary);">Klik 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Simulasi Percobaan Musschenbroek</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🔥 📏</span>
<p><b>Batang Tembaga Dipanaskan</b></p>
<button class="interactive-btn" onclick="alert('Jarum penunjuk bergeser tajam! Tembaga memanjang signifikan karena koefisien muai panjangnya lumayan besar.')">Panaskan Tembaga</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">🔥 🥢</span>
<p><b>Batang Besi Dipanaskan</b></p>
<button class="interactive-btn" onclick="alert('Jarum bergeser sedikit lebih lambat dari tembaga. Jenis logam berbeda memiliki angka koefisien muai berbeda!')">Panaskan Besi</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Apakah Semua Logam Memuai Sama?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Jika batang besi, tembaga, dan aluminium yang panjangnya sama dipanaskan dengan suhu yang sama, manakah yang memanjang paling besar?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">📏 $\alpha_{\text{Al}} > \alpha_{\text{Cu}} > \alpha_{\text{Fe}}$</p>
<p>Mengapa koefisien muai panjang ($\alpha$) menjadi penentu utama pertambahan panjang?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Perhitungan Presisi dalam Konstruksi</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Insinyur Jembatan:</b> Menghitung rumusan $L_2 = L_1(1 + \alpha \Delta t)$ untuk menentukan jarak celah landasan jembatan baja.</li>
<li style="margin-bottom: 10px;"><b>Pabrik Tangki BBM:</b> Menghitung pertambahan volume drum bensin saat terik matahari agar tangki tidak meledak.</li>
<li><b>Pemasangan Kabel PLN:</b> Memperhitungkan koefisien muai kawat tembaga agar kabel tidak putus saat musim dingin.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 4 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 4</span>
<h2>4. Koefisien Muai & Rumus Pemuaian</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<h4 style="color: var(--primary);">📏 Rumus Muai Panjang Zat Padat</h4>
<p style="font-size: 1.2rem; color: var(--yellow); text-align: center; margin: 6px 0;">$$L_2 = L_1 (1 + \alpha \Delta t)$$</p>
<p style="font-size: 0.9rem;">$L_1 = \text{panjang awal (m/cm)}$, $L_2 = \text{panjang akhir}$, $\alpha = \text{koefisien muai panjang } (/\text{°C})$, $\Delta t = t_2 - t_1 = \text{kenaikan suhu } (\text{°C})$.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--success);">📦 Rumus Muai Volume Zat</h4>
<p style="font-size: 1.2rem; color: var(--yellow); text-align: center; margin: 6px 0;">$$V_2 = V_1 (1 + \gamma \Delta t)$$</p>
<p style="font-size: 0.9rem;">$V_1 = \text{volume awal}$, $V_2 = \text{volume akhir}$, $\gamma = 3\alpha = \text{koefisien muai ruang/volume}$.</p>
</div>
</div>
<!-- SLIDE 6: KUIS TP 4 -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 4</span>
<h2>Uji Rumus & Percobaan (5 Soal)</h2>
<div class="glass-card">
<h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q1-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q1-opts"></div>
<p id="q1-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ1()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 7: BATTLE KELOMPOK MULTI-USER -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Musschenbroek)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Muai Panjang)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Muai Volume)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Koefisien)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 8: UJIAN AKHIR INDIVIDU -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex-opts"></div>
<p id="ex-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 9: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji pemahamanmu untuk perhitungan pemuaian:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Perhitungan koefisien muai sudah paham! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Tingkatkan latihan hitungan ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Tetap semangat, mari pelajari latihan soalnya! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 10: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option><option value="7-B">7-B ⚡</option><option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Sampai jumpa di Pertemuan 5! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 10</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
const q1Data = [
{ q: "1. Alat laboratorium yang digunakan untuk menyelidiki pemuaian panjang logam adalah...", opts: ["Alat Musschenbroek", "Termometer Six", "Barometer"], ans: 0 },
{ q: "2. Bilangan yang menunjukkan pertambahan panjang zat padat tiap 1 meter jika suhu naik 1 °C adalah...", opts: ["Koefisien muai panjang (\\alpha)", "Kalor jenis", "Massa jenis"], ans: 0 },
{ q: "3. Hubungan antara koefisien muai volume (\\gamma) dengan koefisien muai panjang (\\alpha) adalah...", opts: ["\\gamma = 3\\alpha", "\\gamma = 2\\alpha", "\\gamma = \\alpha / 3"], ans: 0 },
{ q: "4. Batang besi panjang $1\\text{ m}$ dipanaskan sehingga suhunya naik. Rumus mencari panjang akhir ($L_2$) adalah...", opts: ["$L_2 = L_1 (1 + \\alpha \\Delta t)$", "$L_2 = L_1 + \\alpha$", "$L_2 = L_1 / \\Delta t$"], ans: 0 },
{ q: "5. Semakin besar koefisien muai panjang suatu logam, maka pertambahan panjangnya saat dipanaskan akan...", opts: ["Semakin besar", "Semakin kecil", "Tetap sama"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 4 Selesai!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; }
let d = q1Data[q1Idx];
document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari 5`;
document.getElementById('q1-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; });
document.getElementById('q1-opts').innerHTML = html;
document.getElementById('q1-feedback').innerText = "";
document.getElementById('q1-next-btn').style.display = "none";
reRenderMath();
}
function checkQ1(i) {
if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; }
else { document.getElementById('q1-feedback').innerText = "❌ Kurang Tepat!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; }
document.getElementById('q1-next-btn').style.display = "inline-block";
}
function nextQ1() { q1Idx++; renderQ1(); }
const teamData = {
t1: [
{ q: "Musschenbroek uji pemuaian...", opts: ["Logam/Padat", "Zat cair"], ans: 0 },
{ q: "Jarum bergerak jika logam...", opts: ["Memanjang/Memuai", "Mengecil"], ans: 0 },
{ q: "Beda jenis logam maka jarum...", opts: ["Beda pergeserannya", "Sama persis"], ans: 0 },
{ q: "Panas api memberikan energi...", opts: ["Kalor", "Listrik"], ans: 0 },
{ q: "Percobaan muai gas pakai...", opts: ["Botol + Balon", "Penggaris"], ans: 0 }
],
t2: [
{ q: "Simbol koefisien muai panjang...", opts: ["\\alpha", "\\gamma"], ans: 0 },
{ q: "Satuan koefisien muai panjang...", opts: ["/°C", "m/s"], ans: 0 },
{ q: "Rumus muai panjang...", opts: ["L2 = L1(1 + \\alpha \\Delta t)", "L2 = L1 x \\alpha"], ans: 0 },
{ q: "\\Delta t artinya...", opts: ["Kenaikan suhu", "Panjang akhir"], ans: 0 },
{ q: "Pertambahan panjang = ...", opts: ["L2 - L1", "L1 + L2"], ans: 0 }
],
t3: [
{ q: "Simbol muai volume...", opts: ["\\gamma", "\\alpha"], ans: 0 },
{ q: "\\gamma nilainya sama dengan...", opts: ["3\\alpha", "2\\alpha"], ans: 0 },
{ q: "Rumus muai volume...", opts: ["V2 = V1(1 + \\gamma \\Delta t)", "V2 = V1 x \\gamma"], ans: 0 },
{ q: "Pertambahan volume = ...", opts: ["V2 - V1", "V1 + V2"], ans: 0 },
{ q: "Muai luas bermuatan...", opts: ["2\\alpha", "3\\alpha"], ans: 0 }
],
t4: [
{ q: "Aluminium memuai lebih ... dari besi", opts: ["Besar", "Kecil"], ans: 0 },
{ q: "Koefisien muai besi...", opts: ["Kecil", "Sangat besar"], ans: 0 },
{ q: "Jika \\Delta t membesar, muai...", opts: ["Semakin besar", "Semakin kecil"], ans: 0 },
{ q: "L1 adalah...", opts: ["Panjang awal", "Suhu awal"], ans: 0 },
{ q: "Pemanasan memperbesar...", opts: ["Ukuran zat", "Massa zat"], ans: 0 }
]
};
let tIdx = { t1:0, t2:0, t3:0, t4:0 };
let tScore = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam(teamKey) {
let idx = tIdx[teamKey];
let list = teamData[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam(teamKey, optIdx) {
if(optIdx === teamData[teamKey][tIdx[teamKey]].ans) tScore[teamKey]++;
tIdx[teamKey]++;
renderTeam(teamKey);
}
function updateGroupTotal() {
let total = tScore.t1 + tScore.t2 + tScore.t3 + tScore.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
let rawExamData = [
{ q: "1. Batang kuningan panjangnya $2\\text{ m}$ dipanaskan hingga suhunya naik $50^{\\circ}\\text{C}$. Jika $\\alpha = 0{,}000019/^{\\circ}\\text{C}$, pertambahan panjangnya adalah...", opts: ["0,0019 m", "0,019 m", "0,19 m"], ans: 0 },
{ q: "2. Percobaan Musschenbroek membuktikan bahwa pertambahan panjang logam tergantung pada...", opts: ["Jenis bahan logam dan kenaikan suhu", "Warna cat logam", "Berat timbangan logam"], ans: 0 },
{ q: "3. Jika koefisien muai panjang suatu zat padat adalah $\\alpha = 0{,}000012/^{\\circ}\\text{C}$, maka koefisien muai volumenya ($\\gamma$) adalah...", opts: ["0,000036 /°C", "0,000024 /°C", "0,000012 /°C"], ans: 0 },
{ q: "4. Rumus pertambahan panjang ($\Delta L$) zat padat secara tepat adalah...", opts: ["$\\Delta L = L_1 \\cdot \\alpha \\cdot \\Delta t$", "$\\Delta L = L_1 / (\\alpha \\cdot \\Delta t)$", "$\\Delta L = \\alpha \\cdot \\Delta t$"], ans: 0 },
{ q: "5. Pemuaian volume zat cair dapat diamati dalam laboratorium menggunakan alat...", opts: ["Labu didih berpipa kapiler", "Musschenbroek", "Termometer Klinis"], ans: 0 }
];
let exData = rawExamData.sort(() => Math.random() - 0.5);
let exIdx = 0;
function renderExam() {
if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 4 Selesai!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; }
let d = exData[exIdx];
document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari 5`;
document.getElementById('ex-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; });
document.getElementById('ex-opts').innerHTML = html;
document.getElementById('ex-feedback').innerText = "";
document.getElementById('ex-next-btn').style.display = "none";
reRenderMath();
}
function checkExam(i) {
document.getElementById('ex-feedback').innerText = "👍 Jawaban Terekam!";
document.getElementById('ex-feedback').style.color = "var(--success)";
document.getElementById('ex-next-btn').style.display = "inline-block";
}
function nextExam() { exIdx++; renderExam(); }
renderQ1(); renderTeam('t1'); renderTeam('t2'); renderTeam('t3'); renderTeam('t4'); renderExam(); updateSlide();
</script>
</body>
</html>
Kelas 7
IPA
Suhu, Pemuaian dan Kalor 3 : Menyelidiki proses pemuaian pada zat padat, cair, dan gas Next, lanjut untuk TP yang ketiga.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 3 - Proses Pemuaian Zat</title>
<script>
MathJax = { tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] } };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
:root {
--bg-gradient: linear-gradient(135deg, #064e3b 0%, #0284c7 50%, #0f172a 100%);
--card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.2);
--primary: #38bdf8; --accent: #f43f5e; --yellow: #fbbf24; --success: #10b981; --purple: #c084fc; --text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: var(--bg-gradient); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.deck-container { width: 94vw; height: 85vh; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slide { display: none; padding: 30px; height: 100%; flex-direction: column; justify-content: flex-start; overflow-y: auto; animation: bounceIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.slide-tag { display: inline-block; padding: 6px 16px; background: linear-gradient(90deg, #10b981, #38bdf8); color: #fff; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; width: fit-content; }
h1 { font-size: 2.3rem; background: linear-gradient(to right, #38bdf8, #10b981, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
h2 { font-size: 1.7rem; color: var(--yellow); margin-bottom: 12px; }
p, li { font-size: 1.05rem; line-height: 1.55; color: #f1f5f9; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.multi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glass-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); }
.zone-tim1 { background: rgba(244, 63, 94, 0.15); border: 2px solid #f43f5e; border-radius: 16px; padding: 14px; }
.zone-tim2 { background: rgba(251, 191, 36, 0.15); border: 2px solid #fbbf24; border-radius: 16px; padding: 14px; }
.zone-tim3 { background: rgba(16, 185, 129, 0.15); border: 2px solid #10b981; border-radius: 16px; padding: 14px; }
.zone-tim4 { background: rgba(192, 132, 252, 0.15); border: 2px solid #c084fc; border-radius: 16px; padding: 14px; }
.interactive-btn { background: linear-gradient(135deg, #10b981, #38bdf8); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin: 4px; font-size: 0.95rem; }
.interactive-btn:hover { transform: scale(1.04); }
.opt-btn { width: 100%; text-align: left; background: rgba(255,255,255,0.08); border: 1.5px solid var(--card-border); color: white; padding: 9px 14px; border-radius: 10px; margin-top: 6px; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.opt-btn:hover { background: rgba(56, 189, 248, 0.3); border-color: var(--primary); }
.controls { margin-top: 12px; display: flex; gap: 20px; align-items: center; }
.nav-control-btn { background: linear-gradient(135deg, #10b981, #0284c7); color: white; border: none; padding: 10px 28px; border-radius: 50px; font-weight: bold; cursor: pointer; }
.nav-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }
input, select { width: 100%; padding: 12px; background: rgba(0,0,0,0.5); border: 2px solid var(--primary); border-radius: 12px; color: white; font-size: 1rem; margin-top: 8px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- SLIDE 1 -->
<div class="slide active" style="text-align: center;">
<span class="slide-tag" style="margin: 0 auto 15px auto;">🚀 Pertemuan 3</span>
<h1>PROSES PEMUAIAN ZAT</h1>
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">Bab 3: Suhu, Pemuaian dan Kalor</p>
<div class="glass-card" style="margin: 20px auto; width: 85%;">
<p>🎯 <b>Tujuan Pembelajaran (TP 3):</b></p>
<p>Siswa mampu menyelidiki dan menganalisis mekanisme gerakan partikel saat proses pemuaian terjadi pada zat padat, cair, dan gas akibat penerimaan energi panas.</p>
</div>
<p style="color: var(--primary);">Klik 'Selanjutnya ➡️' untuk memulai!</p>
</div>
<!-- SLIDE 2: OBSERVASI -->
<div class="slide">
<span class="slide-tag">🕵️♂️ Tahapan Observasi</span>
<h2>Pengamatan Perilaku Partikel & Balon</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🎈</span>
<p><b>Balon di Atas Botol Dipanaskan</b></p>
<button class="interactive-btn" onclick="alert('Gas di dalam botol memuai ketika dipanaskan, mendorong udara ke atas sehingga balon mengembang!')">Amati Pemuaian Gas</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">☕</span>
<p><b>Air Penuh Panas Meluap</b></p>
<button class="interactive-btn" onclick="alert('Zat cair memuai lebih besar daripada wadah kaca/logamnya saat dipanaskan sehingga air tumpah!')">Amati Pemuaian Cair</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Apa yang Terjadi pada Partikel?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Mengapa benda padat yang keras seperti rel kereta atau logam bisa memanjang saat kena terik matahari?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">⚛️ ➔ ⚛️ ⚛️ ⚛️</p>
<p>Bagaimana pengaruh getaran partikel terhadap kebutuhan ruang/volume benda?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Pemuaian dalam Kehidupan Sehari-hari</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Celah Rel Kereta:</b> Sambungan rel sengaja diberi celah agar tidak melengkung saat memuai di siang hari.</li>
<li style="margin-bottom: 10px;"><b>Kaca Jendela:</b> Bingkai kayu jendela diberi celah longgar agar kaca tidak pecah saat memuai panas.</li>
<li><b>Ban Sepeda Terik Matahari:</b> Udara/gas di dalam ban memuai dan bisa meletus jika diparkir di tempat sangat panas.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 3 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 3</span>
<h2>3. Mekanisme Pemuaian Padat, Cair & Gas</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p><b>Pemuaian:</b> Pertambahan ukuran (panjang, luas, atau volume) suatu zat akibat kenaikan suhu (menerima kalor).</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--primary);">🧱 Zat Padat</h4>
<p style="font-size: 0.9rem;">Partikel selalu bergetar. Saat dipanaskan, getaran semakin cepat sehingga jarak antarpartikel membesar. Mengalami muai panjang, luas, dan volume.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--success);">💧 Zat Cair & 🎈 Gas</h4>
<p style="font-size: 0.9rem;">• <b>Zat Cair:</b> Hanya mengalami muai volume. Besarnya tergantung koefisien muai volume ($\gamma$).<br>• <b>Zat Gas:</b> Memuai paling besar dibanding padat/cair karena gaya antarpartikel sangat lemah.</p>
</div>
</div>
</div>
<!-- SLIDE 6: KUIS TP 3 -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 3</span>
<h2>Uji Pemahaman Pemuaian (5 Soal)</h2>
<div class="glass-card">
<h3 id="q1-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="q1-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="q1-opts"></div>
<p id="q1-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="q1-next-btn" style="display: none; margin-top: 10px;" onclick="nextQ1()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 7: BATTLE KELOMPOK MULTI-USER -->
<div class="slide">
<span class="slide-tag">🔥 Battle Kelompok Multi-User</span>
<h2>Adu Cepat 4 Tim (5 Soal Masing-Masing) ⚔️</h2>
<div class="multi-grid">
<div class="zone-tim1">
<h4 style="color: #f43f5e;">🔴 Tim 1 (Partikel)</h4>
<span id="t1-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t1-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t1-opts"></div>
</div>
<div class="zone-tim2">
<h4 style="color: #fbbf24;">🟡 Tim 2 (Padat)</h4>
<span id="t2-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t2-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t2-opts"></div>
</div>
<div class="zone-tim3">
<h4 style="color: #10b981;">🟢 Tim 3 (Cair)</h4>
<span id="t3-progress" style="font-size: 0.8rem; color: var(--yellow);">Soal 1/5</span>
<p id="t3-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t3-opts"></div>
</div>
<div class="zone-tim4">
<h4 style="color: #c084fc;">🟣 Tim 4 (Gas)</h4>
<span id="t4-progress" style="font-size: 0.8rem; color: var(--primary);">Soal 1/5</span>
<p id="t4-q" style="font-size: 0.9rem; font-weight: bold; margin: 4px 0;"></p>
<div id="t4-opts"></div>
</div>
</div>
<p id="group-score-display" style="text-align: center; margin-top: 8px; font-weight: bold; font-size: 1.1rem; color: var(--yellow);"></p>
</div>
<!-- SLIDE 8: UJIAN AKHIR INDIVIDU -->
<div class="slide">
<span class="slide-tag">🏆 Challenge Akhir</span>
<h2>Ujian Akhir Individu (5 Soal Acak)</h2>
<div class="glass-card">
<h3 id="ex-num" style="color: var(--yellow);">Soal 1 dari 5</h3>
<p id="ex-text" style="font-size: 1.1rem; margin: 10px 0; font-weight: bold;"></p>
<div id="ex-opts"></div>
<p id="ex-feedback" style="font-weight: bold; margin-top: 10px;"></p>
<button class="interactive-btn" id="ex-next-btn" style="display: none; margin-top: 10px;" onclick="nextExam()">Lanjut Soal ➔</button>
</div>
</div>
<!-- SLIDE 9: REFLEKSI -->
<div class="slide">
<span class="slide-tag">🌈 Refleksi Diri</span>
<h2>Bagaimana Perasaanmu Hari Ini?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; font-weight: bold;">Pilih emoji pemahamanmu mengenai pemuaian:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Konsep getaran partikel sudah dipahami! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Mantap! Semangat terus ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan ragu bertanya pada guru! 💪')">😕 Susah Banget</button>
</div>
</div>
</div>
<!-- SLIDE 10: DATA DIRI -->
<div class="slide">
<span class="slide-tag">✍️ Identitas Siswa</span>
<h2>Lengkapi Data Diri</h2>
<div class="glass-card">
<label style="font-weight: bold;">Nama Lengkap Siswa:</label>
<input type="text" placeholder="Ketik nama lengkapmu di sini...">
<label style="margin-top: 12px; display: block; font-weight: bold;">Pilih Kelas:</label>
<select>
<option value="">-- Pilih Kelas --</option>
<option value="7-A">7-A 🚀</option><option value="7-B">7-B ⚡</option><option value="7-C">7-C 🔥</option>
</select>
<button class="interactive-btn" style="margin-top: 18px; width: 100%;" onclick="alert('Data tersimpan! Sampai jumpa di Pertemuan 4! 🎉')">Simpan & Selesai</button>
</div>
</div>
</div>
<div class="controls">
<button class="nav-control-btn" id="prevBtn" onclick="changeSlide(-1)">⬅️ Kembali</button>
<span id="slideCounter" style="color: var(--yellow); font-weight: bold;">Slide 1 dari 10</span>
<button class="nav-control-btn" id="nextBtn" onclick="changeSlide(1)">Selanjutnya ➡️</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function reRenderMath() { if (window.MathJax && window.MathJax.typesetPromise) window.MathJax.typesetPromise(); }
function updateSlide() {
slides.forEach((s, idx) => s.classList.toggle('active', idx === currentSlide));
slideCounter.textContent = `Slide ${currentSlide + 1} dari ${slides.length}`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
reRenderMath();
}
function changeSlide(dir) {
currentSlide += dir;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
updateSlide();
}
const q1Data = [
{ q: "1. Ketika zat dipanaskan, partikel-partikel penyusunnya akan bergerak...", opts: ["Lebih lambat", "Lebih cepat", "Berhenti"], ans: 1 },
{ q: "2. Karena gerakan partikel semakin cepat saat dipanaskan, maka jarak antarpartikel menjadi...", opts: ["Makin menyempit", "Makin membesar", "Tetap"], ans: 1 },
{ q: "3. Zat cair yang dipanaskan di dalam wadah hanya mengalami pemuaian...", opts: ["Panjang saja", "Volume", "Luas saja"], ans: 1 },
{ q: "4. Wujud zat yang mengalami pemuaian paling besar ketika dipanaskan adalah...", opts: ["Zat Padat", "Zat Cair", "Zat Gas"], ans: 2 },
{ q: "5. Mengapa celah dipasang pada sambungan rel kereta api?", opts: ["Agar rel tidak melengkung saat memuai", "Agar kereta berjalan lambat", "Agar roda berbunyi"], ans: 0 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 3 Selesai!"; document.getElementById('q1-opts').innerHTML = ""; document.getElementById('q1-next-btn').style.display = "none"; return; }
let d = q1Data[q1Idx];
document.getElementById('q1-num').innerText = `Soal ${q1Idx + 1} dari 5`;
document.getElementById('q1-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkQ1(${i})">${o}</button>`; });
document.getElementById('q1-opts').innerHTML = html;
document.getElementById('q1-feedback').innerText = "";
document.getElementById('q1-next-btn').style.display = "none";
reRenderMath();
}
function checkQ1(i) {
if(i === q1Data[q1Idx].ans) { document.getElementById('q1-feedback').innerText = "🎉 Jawaban Tepat!"; document.getElementById('q1-feedback').style.color = "var(--success)"; }
else { document.getElementById('q1-feedback').innerText = "❌ Kurang Tepat!"; document.getElementById('q1-feedback').style.color = "var(--accent)"; }
document.getElementById('q1-next-btn').style.display = "inline-block";
}
function nextQ1() { q1Idx++; renderQ1(); }
const teamData = {
t1: [
{ q: "Partikel dipanaskan bergerak...", opts: ["Cepat", "Lambat"], ans: 0 },
{ q: "Jarak antarpartikel saat panas...", opts: ["Membesar", "Mengecil"], ans: 0 },
{ q: "Zat didinginkan partikelnya...", opts: ["Lambat", "Sangat cepat"], ans: 0 },
{ q: "Pemuaian butuh energi...", opts: ["Panas/Kalor", "Listrik"], ans: 0 },
{ q: "Proses mengecilnya zat dinamakan...", opts: ["Penyusutan", "Penguapan"], ans: 0 }
],
t2: [
{ q: "Zat padat dipanaskan memuai...", opts: ["Panjang, luas, volume", "Volume saja"], ans: 0 },
{ q: "Rel kereta diberi celah untuk...", opts: ["Cegah melengkung", "Hiasan"], ans: 0 },
{ q: "Kaca jendela dipasang...", opts: ["Agak longgar", "Sangat sempit"], ans: 0 },
{ q: "Logam memuai jika...", opts: ["Suhu naik", "Suhu turun"], ans: 0 },
{ q: "Batang besi memanjang adalah...", opts: ["Muai panjang", "Muai volume"], ans: 0 }
],
t3: [
{ q: "Zat cair memuai secara...", opts: ["Volume", "Panjang"], ans: 0 },
{ q: "Air panas penuh di teko akan...", opts: ["Meluap/tumpah", "Kering"], ans: 0 },
{ q: "Pemuaian cair tergantung...", opts: ["Koefisien muai volume", "Warna"], ans: 0 },
{ q: "Muai cair dibanding padat...", opts: ["Lebih besar", "Lebih kecil"], ans: 0 },
{ q: "Termometer memanfaatkan muai...", opts: ["Zat cair", "Zat padat saja"], ans: 0 }
],
t4: [
{ q: "Gas memuai paling...", opts: ["Besar", "Kecil"], ans: 0 },
{ q: "Ban sepeda di panas matahari bisa...", opts: ["Meletus", "Kempis"], ans: 0 },
{ q: "Balon mengembang di botol panas karena...", opts: ["Gas memuai", "Air terserap"], ans: 0 },
{ q: "Gaya antarpartikel gas bersifat...", opts: ["Sangat lemah", "Kuat"], ans: 0 },
{ q: "Udara panas ruangannya...", opts: ["Membesar", "Mengecil"], ans: 0 }
]
};
let tIdx = { t1:0, t2:0, t3:0, t4:0 };
let tScore = { t1:0, t2:0, t3:0, t4:0 };
function renderTeam(teamKey) {
let idx = tIdx[teamKey];
let list = teamData[teamKey];
let pElem = document.getElementById(`${teamKey}-progress`);
let qElem = document.getElementById(`${teamKey}-q`);
let optElem = document.getElementById(`${teamKey}-opts`);
if(idx >= list.length) {
pElem.innerText = "✅ Selesai!";
qElem.innerText = `Skor: ${tScore[teamKey]} / 5`;
optElem.innerHTML = "";
updateGroupTotal();
return;
}
pElem.innerText = `Soal ${idx + 1} dari 5`;
qElem.innerText = list[idx].q;
let html = "";
list[idx].opts.forEach((o, i) => {
html += `<button class="opt-btn" onclick="ansTeam('${teamKey}', ${i})">${o}</button>`;
});
optElem.innerHTML = html;
reRenderMath();
}
function ansTeam(teamKey, optIdx) {
if(optIdx === teamData[teamKey][tIdx[teamKey]].ans) tScore[teamKey]++;
tIdx[teamKey]++;
renderTeam(teamKey);
}
function updateGroupTotal() {
let total = tScore.t1 + tScore.t2 + tScore.t3 + tScore.t4;
document.getElementById('group-score-display').innerText = `🔥 Total Skor Gabungan Kelompok: ${total * 5} / 100`;
}
let rawExamData = [
{ q: "1. Mengapa air yang diisi penuh di dalam panci akan meluap saat mendidih?", opts: ["Karena panci menyusut tajam", "Karena pemuaian volume air lebih besar dari panci", "Karena air bertambah berat"], ans: 1 },
{ q: "2. Pemuaian pada zat padat terjadi karena kenaikan suhu menyebabkan partikel...", opts: ["Berhenti bergetar", "Bergetar lebih cepat dan butuh ruang lebih luas", "Menjadi semakin dekat"], ans: 1 },
{ q: "3. Pemasangan kaca pada bingkai jendela dibuat agak longgar bertujuan untuk...", opts: ["Memberi ruang saat kaca memuai di siang hari", "Agar angin mudah masuk", "Agar kaca mudah dilepas"], ans: 0 },
{ q: "4. Di antara zat padat, cair, dan gas, yang mengalami pemuaian paling besar adalah...", opts: ["Gas", "Cair", "Padat"], ans: 0 },
{ q: "5. Proses bertambahnya ukuran suatu benda akibat menerima energi panas disebut...", opts: ["Pemuaian", "Penyusutan", "Kondensasi"], ans: 0 }
];
let exData = rawExamData.sort(() => Math.random() - 0.5);
let exIdx = 0;
function renderExam() {
if(exIdx >= exData.length) { document.getElementById('ex-text').innerText = "🎉 Selamat! Ujian Akhir Pertemuan 3 Selesai!"; document.getElementById('ex-opts').innerHTML = ""; document.getElementById('ex-next-btn').style.display = "none"; return; }
let d = exData[exIdx];
document.getElementById('ex-num').innerText = `Soal ${exIdx + 1} dari 5`;
document.getElementById('ex-text').innerText = d.q;
let html = "";
d.opts.forEach((o, i) => { html += `<button class="opt-btn" onclick="checkExam(${i})">${o}</button>`; });
document.getElementById('ex-opts').innerHTML = html;
document.getElementById('ex-feedback').innerText = "";
document.getElementById('ex-next-btn').style.display = "none";
reRenderMath();
}
function checkExam(i) {
document.getElementById('ex-feedback').innerText = "👍 Jawaban Terekam!";
document.getElementById('ex-feedback').style.color = "var(--success)";
document.getElementById('ex-next-btn').style.display = "inline-block";
}
function nextExam() { exIdx++; renderExam(); }
renderQ1(); renderTeam('t1'); renderTeam('t2'); renderTeam('t3'); renderTeam('t4'); renderExam(); updateSlide();
</script>
</body>
</html>