Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 9
IPA
SIFAT FISIKA DAN KIMIA, - 4. menjelaskan faktor-faktor yang memengaruhi pembentukan tanah. 5. mengidentifikasi organisme-organisme tanah.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPA Kelas 9: Bab 9 - Faktor & Organisme Tanah (TP 4 & 5) 🐛</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fefce8;
background-image: radial-gradient(#fef08a 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #ca8a04 !important; color: white !important; border-bottom-color: #854d0e !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-yellow-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-yellow-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="bug" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-yellow-800 uppercase tracking-widest">IPA Kelas 9 - Bab 9: Bagian 2 (Modul TP 4 & 5)</span>
<span id="progress-text" class="text-xs font-black text-white bg-yellow-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-amber-400 via-yellow-500 to-lime-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-yellow-100 text-yellow-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Faktor & <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-600 to-amber-700">Organisme Tanah</span> 🐛
</h1>
<div class="w-full max-w-lg h-48 rounded-3xl mx-auto shadow-lg border-4 border-white bg-yellow-600 flex items-center justify-center text-white text-6xl">
🪱 🧫 🔬
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-yellow-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-yellow-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-yellow-500"></i> Alur Pembelajaran Bertahap:</h3>
<ol class="space-y-2 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li><b class="text-yellow-800">TP 4:</b> Faktor-Faktor Pembentukan Tanah → <i>Kuis Otomatis Tak Terhingga (TP 4)</i></li>
<li><b class="text-yellow-800">TP 5:</b> Mengidentifikasi Organisme Tanah → <i>Kuis Otomatis Tak Terhingga (TP 5)</i></li>
<li><b>Battle Panel Interaktif (3 Kelompok) & Ujian Akhir (LMS)</b></li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Tekan "Selanjutnya" untuk mulai mempelajari TP 4! 👇</p>
</div>
</div>
<!-- Slide 2: Materi TP 4 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-amber-100 text-amber-800 font-black text-sm uppercase">Modul 4</span>
<h2 class="text-4xl font-black text-amber-900 mt-2">TP 4: Faktor-Faktor Pembentukan Tanah ⛰️</h2>
<p class="text-lg font-bold text-slate-500 mt-1">5 Faktor Utama yang Memengaruhi Laju dan Hasil Pelapukan Tanah</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md space-y-4">
<div class="grid grid-cols-1 md:grid-cols-5 gap-3 text-center text-sm font-bold">
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">🌤️</span>
<h5 class="text-amber-900 font-black">1. Iklim</h5>
<p class="text-xs text-slate-600">Suhu & curah hujan mempercepat proses pelapukan kimia & fisika.</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">🐛</span>
<h5 class="text-amber-900 font-black">2. Organisme</h5>
<p class="text-xs text-slate-600">Mengatur derajat asam-basa (pH) & peredaran unsur hara tanah.</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">🪨</span>
<h5 class="text-amber-900 font-black">3. Batuan Dasar</h5>
<p class="text-xs text-slate-600">Menentukan kandungan mineral asal pelapukan & jenis vegetasi.</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">🏔️</span>
<h5 class="text-amber-900 font-black">4. Topografi</h5>
<p class="text-xs text-slate-600">Bentuk permukaan/kemiringan lahan memengaruhi iklim lokal & erosi.</p>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-1">
<span class="text-3xl">⏳</span>
<h5 class="text-amber-900 font-black">5. Waktu</h5>
<p class="text-xs text-slate-600">Pelapukan batuan lapisan bawah butuh waktu lebih lama dari lapisan atas.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Kuis Tak Terhingga TP 4 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-amber-100 text-amber-800 font-black text-sm uppercase">Kuis Acak Otomatis (Guru Mode)</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 4: Uji Faktor Pembentukan Tanah 🎲</h2>
<div class="mt-3 inline-flex items-center gap-3 bg-amber-100 border-2 border-amber-400 px-5 py-1.5 rounded-full">
<span class="text-lg">🔥</span>
<span class="font-black text-amber-900 text-base">SOAL DIJAWAB: <span id="count-tp4">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-2">Pertanyaan Siswa (Soal Acak Otomatis):</p>
<div id="tp4-q-text" class="text-xl font-bold text-amber-900 mb-6 bg-amber-50 p-6 rounded-2xl border border-amber-100 leading-relaxed">?</div>
<div id="tp4-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto"></div>
<div id="fb-tp4" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="tp4-next-btn" onclick="generateQuizTP4()" class="hidden mt-6 w-full max-w-lg mx-auto py-3.5 bg-amber-600 text-white rounded-2xl font-black text-xl hover:bg-amber-700 transition">Acak Soal Siswa Berikutnya 🔄</button>
</div>
</div>
<!-- Slide 4: Materi TP 5 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-yellow-100 text-yellow-800 font-black text-sm uppercase">Modul 5</span>
<h2 class="text-4xl font-black text-yellow-900 mt-2">TP 5: Mengidentifikasi Organisme Tanah 🪱</h2>
<p class="text-lg font-bold text-slate-500 mt-1">Makrofauna, Tumbuhan Rizosfer, dan Mikroorganisme Tanah</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-yellow-200 shadow-md space-y-4">
<div class="grid md:grid-cols-3 gap-4 text-xs font-bold">
<div class="bg-yellow-50 p-4 rounded-2xl border border-yellow-200 space-y-2">
<h5 class="text-yellow-900 text-sm font-black">🐾 1. Hewan & Makrofauna</h5>
<ul class="text-slate-700 space-y-1 list-disc list-inside">
<li><b>Nematoda:</b> Predator bakteri, edarkan Nitrogen.</li>
<li><b>Cacing Tanah:</b> Epigeik (serasah), Endogeik (tanah organik), Anesik (lubang vertikal).</li>
<li><b>Hewan lain:</b> Kutu kayu, ekor pegas, kelabang, luwing, siput/keong.</li>
</ul>
</div>
<div class="bg-lime-50 p-4 rounded-2xl border border-lime-200 space-y-2">
<h5 class="text-lime-900 text-sm font-black">🌱 2. Tumbuhan & Rizosfer</h5>
<ul class="text-slate-700 space-y-1 list-disc list-inside">
<li><b>Serasah:</b> Sampah ranting/daun lapuk kaya bahan organik.</li>
<li><b>Rizosfer:</b> Daerah sekitar akar tempat berkumpulnya mikroorganisme khusus.</li>
</ul>
</div>
<div class="bg-amber-50 p-4 rounded-2xl border border-amber-200 space-y-2">
<h5 class="text-amber-900 text-sm font-black">🔬 3. Mikroorganisme</h5>
<ul class="text-slate-700 space-y-1 list-disc list-inside">
<li><b>Protozoa & Rotifera:</b> Uraikan bahan organik & mangsa bakteri.</li>
<li><b>Alga:</b> Mikroorganisme berklorofil penambah bahan organik.</li>
<li><b>Bakteri (Bacillus):</b> Jumlah terbanyak, urai pestisida & mineral.</li>
<li><b>Fungi & Actinomycetes:</b> Urai bahan organik & kompos.</li>
<li><b>Virus:</b> Bakteriofag parasit pada sel bakteri.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 5: Kuis Tak Terhingga TP 5 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-yellow-100 text-yellow-800 font-black text-sm uppercase">Kuis Acak Otomatis (Guru Mode)</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 5: Uji Organisme Tanah 🎲</h2>
<div class="mt-3 inline-flex items-center gap-3 bg-yellow-100 border-2 border-yellow-400 px-5 py-1.5 rounded-full">
<span class="text-lg">🔥</span>
<span class="font-black text-yellow-900 text-base">SOAL DIJAWAB: <span id="count-tp5">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-2">Pertanyaan Siswa (Soal Acak Otomatis):</p>
<div id="tp5-q-text" class="text-xl font-bold text-yellow-900 mb-6 bg-yellow-50 p-6 rounded-2xl border border-yellow-100 leading-relaxed">?</div>
<div id="tp5-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto"></div>
<div id="fb-tp5" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="tp5-next-btn" onclick="generateQuizTP5()" class="hidden mt-6 w-full max-w-lg mx-auto py-3.5 bg-yellow-600 text-white rounded-2xl font-black text-xl hover:bg-yellow-700 transition">Acak Soal Siswa Berikutnya 🔄</button>
</div>
</div>
<!-- Slide 6: Battle Panel -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-600 to-amber-600 tracking-wide uppercase">⚡ BATTLE PANEL INTERAKTIF (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan TP 4 & 5 secara serentak.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<div class="bg-white p-6 rounded-[2rem] border-4 border-yellow-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-yellow-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🏎️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-yellow-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-yellow-50 p-4 rounded-2xl border-2 border-yellow-100 text-center">
<p class="text-xs font-bold text-yellow-500 uppercase mb-1">Soal K1</p>
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-yellow-600 text-white font-black rounded-xl shadow hover:bg-yellow-700 transition">Soal Berikutnya ➡️</button>
</div>
<div class="bg-white p-6 rounded-[2rem] border-4 border-amber-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-amber-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚓 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-amber-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-amber-50 p-4 rounded-2xl border-2 border-amber-100 text-center">
<p class="text-xs font-bold text-amber-500 uppercase mb-1">Soal K2</p>
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-amber-600 text-white font-black rounded-xl shadow hover:bg-amber-700 transition">Soal Berikutnya ➡️</button>
</div>
<div class="bg-white p-6 rounded-[2rem] border-4 border-lime-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-lime-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-lime-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-lime-50 p-4 rounded-2xl border-2 border-lime-100 text-center">
<p class="text-xs font-bold text-lime-500 uppercase mb-1">Soal K3</p>
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-lime-600 text-white font-black rounded-xl shadow hover:bg-lime-700 transition">Soal Berikutnya ➡️</button>
</div>
</div>
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-500 mb-6 drop-shadow-lg">JUARA BATTLE KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-yellow-600 hover:bg-yellow-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#854d0e] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu terhadap materi TP 4 dan TP 5 hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Paham Banget!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Organisme tanah mana yang paling membuatmu penasaran?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-yellow-50 border-2 border-yellow-200 focus:border-yellow-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Evaluasi TP 4 & 5</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Jawab 5 soal evaluasi berikut untuk memperoleh nilai akhir.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-yellow-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-yellow-700 bg-yellow-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-yellow-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-yellow-600 to-amber-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-yellow-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan kirim nilai ke Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-yellow-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-yellow-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-yellow-600 to-amber-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-yellow-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-yellow-700 shadow-[0_4px_0px_#854d0e]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function shuffle(array) {
let cur = array.length, rand;
while (cur != 0) {
rand = Math.floor(Math.random() * cur);
cur--;
[array[cur], array[rand]] = [array[rand], array[cur]];
}
return array;
}
let countTP4 = 0;
const tp4Bank = [
{ q: "Faktor pembentukan tanah yang memengaruhi laju pelapukan fisik & kimia melalui suhu dan curah hujan adalah...", opts: ["Iklim", "Waktu", "Topografi", "Batuan dasar"], ans: "Iklim", exp: "<b>Iklim</b> (suhu & curah hujan) mempercepat pelapukan batuan." },
{ q: "Faktor pembentukan tanah yang berperan mengatur derajat asam-basa (pH) dan peredaran unsur hara adalah...", opts: ["Organisme tanah", "Batuan dasar", "Suhu udara", "Kemiringan lereng"], ans: "Organisme tanah", exp: "<b>Organisme tanah</b> mengatur keasaman pH & hara." },
{ q: "Faktor pembentukan tanah yang menentukan kandungan mineral hasil pelapukan dan jenis vegetasi adalah...", opts: ["Batuan dasar", "Topografi", "Waktu", "Angin"], ans: "Batuan dasar", exp: "<b>Batuan dasar</b> menentukan jenis mineral asal pelapukan." },
{ q: "Bentuk permukaan tanah dan kemiringan lereng yang memengaruhi erosi serta iklim lokal tergolong faktor...", opts: ["Topografi", "Organisme", "Waktu", "Kelembapan"], ans: "Topografi", exp: "<b>Topografi</b> memengaruhi erosi & iklim lokal." },
{ q: "Mengapa pelapukan batuan lapisan bawah memerlukan waktu lebih lama dibanding batuan lapisan atas?", opts: ["Karena kurang terpapar suhu & hujan", "Karena batuan bawah lebih lembek", "Karena ada cacing tanah", "Karena terhalang akar"], ans: "Karena kurang terpapar suhu & hujan", exp: "Batuan bawah butuh <b>Waktu</b> lebih lama karena terlindung dari iklim langsung." }
];
function generateQuizTP4() {
document.getElementById('fb-tp4').classList.add('hidden');
document.getElementById('tp4-next-btn').classList.add('hidden');
let item = tp4Bank[Math.floor(Math.random() * tp4Bank.length)];
document.getElementById('tp4-q-text').innerHTML = item.q;
let shuffledOpts = shuffle([...item.opts]);
let optsHtml = "";
shuffledOpts.forEach(opt => {
let isCorrect = (opt === item.ans);
optsHtml += `<button onclick="checkQuizTP4(this, ${isCorrect}, '${item.exp.replace(/'/g, "\\'")}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg text-left">${opt}</button>`;
});
document.getElementById('tp4-options').innerHTML = optsHtml;
}
function checkQuizTP4(btn, isCorrect, explanation) {
const btns = document.getElementById('tp4-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('fb-tp4');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
} else {
btn.classList.add('btn-wrong');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>KURANG TEPAT.</b><br>${explanation}`;
}
countTP4++;
document.getElementById('count-tp4').innerText = countTP4;
document.getElementById('tp4-next-btn').classList.remove('hidden');
}
generateQuizTP4();
let countTP5 = 0;
const tp5Bank = [
{ q: "Cacing tanah yang hidup di permukaan tanah dan memakan serasah daun adalah...", opts: ["Epigeik", "Endogeik", "Anesik", "Nematoda"], ans: "Epigeik", exp: "Cacing <b>Epigeik</b> hidup di permukaan tanah & makan serasah daun." },
{ q: "Cacing tanah yang hidup di dalam lapisan tanah dan memakan tanah kaya bahan organik dinamakan...", opts: ["Endogeik", "Epigeik", "Anesik", "Luwing"], ans: "Endogeik", exp: "Cacing <b>Endogeik</b> hidup di dalam tanah kaya organik." },
{ q: "Daerah di sekitar akar tanaman yang dihuni oleh populasi mikroorganisme khusus dinamakan...", opts: ["Rizosfer", "Horizon O", "Serasah", "Humus"], ans: "Rizosfer", exp: "<b>Rizosfer</b> adalah area di sekitar akar tanaman." },
{ q: "Mikroorganisme berklorofil di dalam tanah yang berperan menambah bahan organik adalah...", opts: ["Alga", "Fungi", "Protozoa", "Bakteriofag"], ans: "Alga", exp: "<b>Alga</b> adalah mikroorganisme berklorofil penyumbang bahan organik." },
{ q: "Bakteri tanah terbanyak berbentuk batang yang mampu menguraikan pestisida adalah...", opts: ["Bacillus", "Amoeba", "Saccharomyces", "Rhizopus"], ans: "Bacillus", exp: "Bakteri <b>Bacillus</b> menguraikan pestisida & mineral tanah." },
{ q: "Organisme dekomposer utama yang mengubah senyawa nitrogen kompleks menjadi amonium adalah...", opts: ["Fungi", "Virus", "Kutu kayu", "Siput"], ans: "Fungi", exp: "<b>Fungi</b> menguraikan bahan organik kompleks menjadi amonium." },
{ q: "Virus parasit yang khusus menyerang sel bakteri di dalam tanah dinamakan...", opts: ["Bakteriofag", "Rotifera", "Euglena", "Paramaecium"], ans: "Bakteriofag", exp: "<b>Bakteriofag</b> adalah virus parasit pada sel bakteri tanah." }
];
function generateQuizTP5() {
document.getElementById('fb-tp5').classList.add('hidden');
document.getElementById('tp5-next-btn').classList.add('hidden');
let item = tp5Bank[Math.floor(Math.random() * tp5Bank.length)];
document.getElementById('tp5-q-text').innerHTML = item.q;
let shuffledOpts = shuffle([...item.opts]);
let optsHtml = "";
shuffledOpts.forEach(opt => {
let isCorrect = (opt === item.ans);
optsHtml += `<button onclick="checkQuizTP5(this, ${isCorrect}, '${item.exp.replace(/'/g, "\\'")}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg text-left">${opt}</button>`;
});
document.getElementById('tp5-options').innerHTML = optsHtml;
}
function checkQuizTP5(btn, isCorrect, explanation) {
const btns = document.getElementById('tp5-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('fb-tp5');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
} else {
btn.classList.add('btn-wrong');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>KURANG TEPAT.</b><br>${explanation}`;
}
countTP5++;
document.getElementById('count-tp5').innerText = countTP5;
document.getElementById('tp5-next-btn').classList.remove('hidden');
}
generateQuizTP5();
let ifpScores = { 1: 0, 2: 0, 3: 0 };
const IFP_WIN_SCORE = 5;
const ifpBank = [
{ q: "Cacing tanah yang membuat lubang vertikal dan menarik daun ke sarangnya adalah...", opts: ["Anesik", "Epigeik", "Endogeik"], ans: 0 },
{ q: "Faktor pembentukan tanah berupa derajat kemiringan lahan disebut...", opts: ["Topografi", "Iklim", "Waktu"], ans: 0 },
{ q: "Daerah di sekitar akar tumbuhan tempat berkumpulnya mikroorganisme khusus dinamakan...", opts: ["Rizosfer", "Horizon O", "Humus"], ans: 0 },
{ q: "Hewan pengedar nitrogen tanah yang merupakan predator bakteri adalah...", opts: ["Nematoda", "Luwing", "Siput"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
document.getElementById(`ifp-next-btn-${group}`).classList.add('hidden');
let randQ = ifpBank[Math.floor(Math.random() * ifpBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! +1 Poin";
ifpScores[group]++;
document.getElementById(`ifp-score-${group}`).innerText = `Skor: ${ifpScores[group]}`;
if(ifpScores[group] >= IFP_WIN_SCORE) {
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 400);
} else {
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
} else {
btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat!";
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
}
function resetIFPGame() {
ifpScores = { 1: 0, 2: 0, 3: 0 };
for(let i=1; i<=3; i++) {
document.getElementById(`ifp-score-${i}`).innerText = `Skor: 0`;
initIFPQuestion(i);
}
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); });
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
const evaluasiBank = [
{ q: "Faktor pembentukan tanah berupa suhu dan curah hujan tergolong ke dalam faktor...", options: ["Iklim", "Topografi", "Waktu", "Batuan dasar"], a: 0, exp: "<b>Iklim</b> (suhu dan hujan) mempercepat laju pelapukan batuan." },
{ q: "Cacing tanah yang hidup di permukaan tanah dan memakan serasah daun adalah...", options: ["Epigeik", "Endogeik", "Anesik", "Nematoda"], a: 0, exp: "Cacing <b>Epigeik</b> hidup di permukaan tanah memakan sampah daun." },
{ q: "Organisme berklorofil di dalam tanah yang menambah bahan organik adalah...", options: ["Alga", "Fungi", "Protozoa", "Bakteriofag"], a: 0, exp: "<b>Alga</b> adalah organisme berklorofil penambah bahan organik." },
{ q: "Bakteri terbanyak di dalam tanah yang berbentuk batang adalah...", options: ["Bacillus", "Amoeba", "Euglena", "Paramaecium"], a: 0, exp: "Bakteri tanah terbanyak berbentuk batang (<b>Bacillus</b>)." },
{ q: "Virus parasit yang hidup pada sel bakteri di dalam tanah dinamakan...", options: ["Bakteriofag", "Rotifera", "Actinomycetes", "Protozoa"], a: 0, exp: "<b>Bakteriofag</b> adalah virus yang hidup pada sel bakteri tanah." }
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-yellow-50 hover:border-yellow-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 3000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; }
alert("Laporan Nilai Berhasil Dikirim ke Guru!\n\nNama: " + nama + "\nSkor Ujian Akhir: " + evalSkor);
}
</script>
</body>
</html>
Kelas 9
IPA
SIFAT FISIKA DAN KIMIA, - Setelah pembelajaran peserta didik dapat: 1. menjelaskan pengertian tanah. 2. menyebutkan fungsi tanah bagi kehidupan. 3. menjelaskan terbentuknya tanah
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPA Kelas 9: Bab 9 - Tanah (TP 1, 2, & 3) 🌿</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#bbf7d0 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #16a34a !important; color: white !important; border-bottom-color: #15803d !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="sprout" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">IPA Kelas 9 - Bab 9: Bagian 1 (Modul TP 1, 2, & 3)</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Menjelajahi <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-700">Dunia Tanah</span> 🌱
</h1>
<div class="w-full max-w-lg h-48 rounded-3xl mx-auto shadow-lg border-4 border-white bg-emerald-600 flex items-center justify-center text-white text-6xl">
🌍 🪨 🪴
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Alur Pembelajaran Bertahap:</h3>
<ol class="space-y-2 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li><b class="text-emerald-700">TP 1:</b> Pengertian Tanah → <i>Kuis TP 1</i></li>
<li><b class="text-emerald-700">TP 2:</b> Peran/Fungsi Tanah bagi Kehidupan → <i>Kuis TP 2</i></li>
<li><b class="text-emerald-700">TP 3:</b> Proses Terbentuknya Tanah & Lapisan Horizon → <i>Kuis TP 3</i></li>
<li><b>Ujian Akhir & Battle Kelompok</b></li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Tekan "Selanjutnya" untuk mulai belajar TP 1! 👇</p>
</div>
</div>
<!-- Slide 2: Materi TP 1 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-emerald-100 text-emerald-800 font-black text-sm uppercase">Modul 1</span>
<h2 class="text-4xl font-black text-emerald-900 mt-2">TP 1: Pengertian & Komposisi Tanah 🌿</h2>
<p class="text-lg font-bold text-slate-500 mt-1">Memahami apa itu tanah dan komponen penyusunnya</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-4">
<div class="bg-emerald-50 p-6 rounded-2xl border-2 border-emerald-200 space-y-3">
<h4 class="font-black text-emerald-900 text-xl">📌 Definisi Tanah:</h4>
<p class="text-slate-700 font-bold leading-relaxed">
Tanah terdapat di permukaan kulit bumi. Tanah tersusun dari <b>bahan mineral</b> hasil pelapukan batuan dan <b>bahan organik</b> hasil pelapukan sisa-sisa tumbuhan serta hewan (humus).
</p>
<p class="text-slate-700 font-bold leading-relaxed">
Tanah merupakan medium atau tempat tumbuh dan berkembangnya tumbuh-tumbuhan.
</p>
</div>
<div class="grid grid-cols-2 gap-3 text-center font-bold text-sm">
<div class="bg-amber-100 p-3 rounded-xl border border-amber-300">🪨 <b>Bahan Mineral</b><br>Pelapukan Batuan</div>
<div class="bg-green-100 p-3 rounded-xl border border-green-300">🍂 <b>Bahan Organik</b><br>Sisa Hewan/Tumbuhan</div>
</div>
</div>
</div>
</div>
<!-- Slide 3: Kuis TP 1 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-emerald-100 text-emerald-800 font-black text-sm uppercase">Kuis Uji Pemahaman</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 1: Pengertian Tanah 🎯</h2>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Pertanyaan:</p>
<div class="text-xl font-bold text-emerald-900 mb-8 bg-emerald-50 p-6 rounded-2xl border border-emerald-100 leading-relaxed">
Tanah di permukaan bumi tersusun atas dua bahan utama, yaitu...
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto">
<button onclick="checkQuizTP(this, true, 'TP1', 'Benar! Tanah tersusun atas bahan mineral (pelapukan batuan) dan bahan organik (humus).')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">A. Bahan mineral dan bahan organik</button>
<button onclick="checkQuizTP(this, false, 'TP1', 'Kurang tepat. Bahan mineral dan bahan organik adalah dua komponen utama penyusun tanah.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">B. Plastik dan semen</button>
<button onclick="checkQuizTP(this, false, 'TP1', 'Kurang tepat. Bahan mineral berasal dari pelapukan batuan, bukan air murni.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">C. Air laut dan logam cair</button>
<button onclick="checkQuizTP(this, false, 'TP1', 'Kurang tepat. Bahan utama tanah adalah mineral & organik.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">D. Hanyalah batuan utuh</button>
</div>
<div id="fb-tp1" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
</div>
</div>
<!-- Slide 4: Materi TP 2 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-teal-100 text-teal-800 font-black text-sm uppercase">Modul 2</span>
<h2 class="text-4xl font-black text-teal-900 mt-2">TP 2: Fungsi Tanah Bagi Kehidupan 🌾</h2>
<p class="text-lg font-bold text-slate-500 mt-1">Menjelaskan manfaat penting tanah untuk ekosistem dan manusia</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-2">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🌱</span>
<h4 class="font-black text-xl text-teal-800">1. Tempat Tumbuh Tumbuhan</h4>
<p class="text-slate-600 font-bold text-sm">Menyediakan jangkar penopang akar serta menyuplai air dan unsur hara (nutrisi) yang dibutuhkan tumbuhan.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🐛</span>
<h4 class="font-black text-xl text-teal-800">2. Habitat Organisme</h4>
<p class="text-slate-600 font-bold text-sm">Tempat tinggal bagi beragam makrofauna (cacing, kutu kayu) dan mikroorganisme (bakteri, fungi).</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">💧</span>
<h4 class="font-black text-xl text-teal-800">3. Penyaring & Penampung Air</h4>
<p class="text-slate-600 font-bold text-sm">Menyerap air hujan, menahannya dalam larutan tanah, dan menyaring air menjadi cadangan air bersih.</p>
</div>
</div>
</div>
<!-- Slide 5: Kuis TP 2 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-teal-100 text-teal-800 font-black text-sm uppercase">Kuis Uji Pemahaman</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 2: Fungsi Tanah 🎯</h2>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Pertanyaan:</p>
<div class="text-xl font-bold text-teal-900 mb-8 bg-teal-50 p-6 rounded-2xl border border-teal-100 leading-relaxed">
Manakah yang BUKAN merupakan fungsi utama tanah bagi keberlangsungan ekosistem?
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto">
<button onclick="checkQuizTP(this, false, 'TP2', 'Salah. Menopang akar tumbuhan adalah fungsi utama tanah.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">A. Tempat tumbuh tanaman</button>
<button onclick="checkQuizTP(this, true, 'TP2', 'Tepat sekali! Memantulkan gelombang radio atmosfer bukan fungsi biologis/fisik tanah.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">B. Memantulkan gelombang radio utama</button>
<button onclick="checkQuizTP(this, false, 'TP2', 'Salah. Tanah adalah habitat alami cacing, bakteri, dan fungi.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">C. Habitat cacing & mikroorganisme</button>
<button onclick="checkQuizTP(this, false, 'TP2', 'Salah. Menyimpan air hujan adalah fungsi penyaringan tanah.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">D. Menyimpan & menyaring air tanah</button>
</div>
<div id="fb-tp2" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
</div>
</div>
<!-- Slide 6: Materi TP 3 -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<span class="px-4 py-1.5 rounded-xl bg-green-100 text-green-800 font-black text-sm uppercase">Modul 3</span>
<h2 class="text-4xl font-black text-green-900 mt-2">TP 3: Proses Terbentuknya Tanah & Lapisan (Horizon) 📐</h2>
<p class="text-lg font-bold text-slate-500 mt-1">3 Jenis Pelapukan dan 6 Lapisan Horizon Vertikal Tanah</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-green-200 shadow-md space-y-4">
<p class="font-bold text-slate-700"><b>1. Tiga Jenis Pelapukan Pembentuk Tanah:</b></p>
<div class="grid md:grid-cols-3 gap-4 text-sm font-bold">
<div class="bg-blue-50 p-4 rounded-2xl border border-blue-200">
<h5 class="text-blue-900 text-base">☀️ Pelapukan Fisis</h5>
<p class="text-slate-600 text-xs mt-1">Penghancuran mekanis akibat suhu, angin, dan abrasi.</p>
</div>
<div class="bg-teal-50 p-4 rounded-2xl border border-teal-200">
<h5 class="text-teal-900 text-base">🌧️ Pelapukan Kimia</h5>
<p class="text-slate-600 text-xs mt-1">Penghancuran oleh air terlarut CO2 (hidrolisis & pelarutan mineral).</p>
</div>
<div class="bg-green-50 p-4 rounded-2xl border border-green-200">
<h5 class="text-green-900 text-base">🌱 Pelapukan Biologis</h5>
<p class="text-slate-600 text-xs mt-1">Pelapukan oleh aktivitas organisme (penetrasi akar tumbuhan).</p>
</div>
</div>
<p class="font-bold text-slate-700 pt-2"><b>2. Enam Jenis Horizon (Lapisan Vertikal) Tanah:</b></p>
<div class="grid grid-cols-2 md:grid-cols-6 gap-2 text-center text-xs font-bold">
<div class="bg-amber-900 text-white p-2 rounded-xl"><b>Horizon O</b><br>Paling atas & subur (organik)</div>
<div class="bg-amber-700 text-white p-2 rounded-xl"><b>Horizon A</b><br>Gelap, humus & mineral</div>
<div class="bg-amber-500 text-white p-2 rounded-xl"><b>Horizon E</b><br>Berpasir & terang</div>
<div class="bg-amber-400 text-slate-900 p-2 rounded-xl"><b>Horizon B</b><br>Lempung & alur perembesan</div>
<div class="bg-stone-400 text-slate-900 p-2 rounded-xl"><b>Horizon C</b><br>Regolit (lapukan batuan)</div>
<div class="bg-slate-700 text-white p-2 rounded-xl"><b>Horizon D/R</b><br>Batuan dasar utuh & keras</div>
</div>
</div>
</div>
<!-- Slide 7: Kuis TP 3 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<span class="px-4 py-1.5 rounded-xl bg-green-100 text-green-800 font-black text-sm uppercase">Kuis Uji Pemahaman</span>
<h2 class="text-3xl font-black text-slate-900 mt-2">Kuis TP 3: Pelapukan & Horizon Tanah 🎯</h2>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Pertanyaan:</p>
<div class="text-xl font-bold text-green-900 mb-8 bg-green-50 p-6 rounded-2xl border border-green-100 leading-relaxed">
Penghancuran batuan induk akibat penetrasi akar tumbuhan tergolong dalam jenis pelapukan...
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-xl mx-auto">
<button onclick="checkQuizTP(this, false, 'TP3', 'Kurang tepat. Pelapukan fisis disebabkan suhu, angin, dan abrasi mekanis.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">A. Pelapukan Fisis</button>
<button onclick="checkQuizTP(this, true, 'TP3', 'BENAR! Pelapukan biologis disebabkan oleh aktivitas organisme seperti akar tumbuhan.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">B. Pelapukan Biologis</button>
<button onclick="checkQuizTP(this, false, 'TP3', 'Kurang tepat. Pelapukan kimia disebabkan oleh reaksi air dan CO2.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">C. Pelapukan Kimia</button>
<button onclick="checkQuizTP(this, false, 'TP3', 'Salah. Suhu tinggi memicu pelapukan fisis.')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 text-slate-700 font-bold text-lg text-left">D. Pelapukan Suhu</button>
</div>
<div id="fb-tp3" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
</div>
</div>
<!-- Slide 8: Battle Panel (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL INTERAKTIF (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Jawab pertanyaan TP 1-3 secara serentak.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🏎️ KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-100 text-center">
<p class="text-xs font-bold text-emerald-500 uppercase mb-1">Soal K1</p>
<p id="ifp-q-1" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-emerald-600 text-white font-black rounded-xl shadow hover:bg-emerald-700 transition">Soal Berikutnya ➡️</button>
</div>
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>控制 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-100 text-center">
<p class="text-xs font-bold text-teal-500 uppercase mb-1">Soal K2</p>
<p id="ifp-q-2" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-teal-600 text-white font-black rounded-xl shadow hover:bg-teal-700 transition">Soal Berikutnya ➡️</button>
</div>
<div class="bg-white p-6 rounded-[2rem] border-4 border-green-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-green-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🚙 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-green-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-green-50 p-4 rounded-2xl border-2 border-green-100 text-center">
<p class="text-xs font-bold text-green-500 uppercase mb-1">Soal K3</p>
<p id="ifp-q-3" class="text-lg font-black text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-green-600 text-white font-black rounded-xl shadow hover:bg-green-700 transition">Soal Berikutnya ➡️</button>
</div>
</div>
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-emerald-400 mb-6 drop-shadow-lg">JUARA BATTLE KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#065f46] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu terhadap materi TP 1, TP 2, dan TP 3 hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Paham Banget!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan pendapatmu di sini:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Evaluasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Evaluasi TP 1, 2, & 3</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Jawab 5 soal evaluasi berikut untuk memperoleh nilai akhir.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-700 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Ujian Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Lapor data ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#065f46]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
function checkQuizTP(btn, isCorrect, tpId, explanation) {
const container = btn.parentElement;
const btns = container.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById(`fb-${tpId.toLowerCase()}`);
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>JAWABAN BENAR!</b><br>${explanation}`;
} else {
btn.classList.add('btn-wrong');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>KURANG TEPAT.</b><br>${explanation}`;
}
}
let ifpScores = { 1: 0, 2: 0, 3: 0 };
const IFP_WIN_SCORE = 5;
const ifpBank = [
{ q: "Pelapukan batuan akibat penetrasi akar dinamakan pelapukan...", opts: ["Biologis", "Fisis", "Kimia"], ans: 0 },
{ q: "Lapisan tanah paling atas yang kaya bahan organik adalah...", opts: ["Horizon O", "Horizon A", "Horizon C"], ans: 0 },
{ q: "Bahan organik tanah hasil pelapukan sisa makhluk hidup dinamakan...", opts: ["Humus", "Batuan dasar", "Pasir murni"], ans: 0 },
{ q: "Pelapukan oleh air yang mengandung CO2 terlarut dinamakan pelapukan...", opts: ["Kimia", "Fisis", "Biologis"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
document.getElementById(`ifp-next-btn-${group}`).classList.add('hidden');
let randQ = ifpBank[Math.floor(Math.random() * ifpBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! +1 Poin";
ifpScores[group]++;
document.getElementById(`ifp-score-${group}`).innerText = `Skor: ${ifpScores[group]}`;
if(ifpScores[group] >= IFP_WIN_SCORE) {
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 400);
} else {
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
} else {
btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat!";
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
}
function resetIFPGame() {
ifpScores = { 1: 0, 2: 0, 3: 0 };
for(let i=1; i<=3; i++) {
document.getElementById(`ifp-score-${i}`).innerText = `Skor: 0`;
initIFPQuestion(i);
}
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
}
for(let i=1; i<=3; i++) { initIFPQuestion(i); }
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => { b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100'); b.classList.add('border-slate-200'); });
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
const evaluasiBank = [
{ q: "Bahan organik tanah yang berasal dari pembusukan sisa tumbuhan dan hewan dinamakan...", options: ["Humus", "Batuan induk", "Regolit", "Pasir kuarsa"], a: 0, exp: "<b>Humus</b> adalah bahan organik hasil pelapukan sisa-sisa tumbuhan dan hewan." },
{ q: "Pelapukan batuan yang disebabkan oleh perubahan suhu, angin, dan abrasi mekanis dinamakan pelapukan...", options: ["Fisis", "Kimia", "Biologis", "Organik"], a: 0, exp: "Pelapukan <b>Fisis</b> disebabkan pengaruh suhu, angin, dan abrasi." },
{ q: "Lapisan tanah teratas yang tergolong paling subur karena kaya bahan organik untuk lahan pertanian adalah...", options: ["Horizon O", "Horizon C", "Horizon D", "Horizon B"], a: 0, exp: "<b>Horizon O</b> adalah lapisan paling atas yang subur dan kaya bahan organik." },
{ q: "Manakah yang merupakan fungsi tanah bagi tanaman?", options: ["Tempat tumbuh & penyedia air/nutrisi", "Pengubah fotosintesis matahari", "Pembuat energi nuklir", "Penyaring sinar radiasi"], a: 0, exp: "Tanah berfungsi sebagai medium tumbuh dan penyedia air serta unsur hara." },
{ q: "Lapisan tanah terdalam yang terdiri atas batuan keras utuh yang belum terlapukkan dinamakan...", options: ["Horizon D / R", "Horizon A", "Horizon O", "Horizon E"], a: 0, exp: "<b>Horizon D atau R</b> terdiri atas batuan dasar keras yang masih utuh dari pelapukan." }
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 3000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) { alert("Silakan masukkan nama lengkapmu terlebih dahulu!"); return; }
alert("Laporan Nilai Berhasil Dikirim ke Guru!\n\nNama: " + nama + "\nSkor Ujian Akhir: " + evalSkor);
}
</script>
</body>
</html>
Kelas 9
IPA
Biotekhnologi
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPA Kelas 9: Bioteknologi & Agen Biologis 🧬</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f0fdf4;
background-image: radial-gradient(#bbf7d0 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #16a34a !important; color: white !important; border-bottom-color: #15803d !important; pointer-events: none; }
.btn-wrong { background-color: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
.math-box { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="dna" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">IPA Kelas 9 - Bioteknologi & Agen Biologis</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-cyan-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
Fase D - Kurikulum Merdeka (Deep Learning)
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Mengenal & Mengubah Dunia Dengan <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Bioteknologi</span> 🧬
</h1>
<img src="https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?auto=format&fit=crop&w=800&q=80" alt="Bioteknologi Lab" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6" onerror="this.src='https://images.unsplash.com/photo-1579154204601-01588f351e67?auto=format&fit=crop&w=800&q=80'">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Tujuan Pembelajaran:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Peserta didik dapat <span class="text-emerald-600">menjelaskan pengertian bioteknologi</span> serta pemanfaatan agen biologis bagi kehidupan manusia.</li>
<li>Peserta didik dapat <span class="text-emerald-600">membedakan karakteristik bioteknologi konvensional dan modern</span>.</li>
<li>Peserta didik dapat <span class="text-emerald-600">mengidentifikasi agen biologis</span> (mikroorganisme) beserta produk yang dihasilkannya.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap mengeksplorasi rahasia makhluk hidup mikro? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Observasi Agen Biologis -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Tahap 1: Observasi Agen Biologis 👁️🗨️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Amati mikroorganisme pekerja rahasia di balik produk sehari-hari!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<!-- Card 1 -->
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md flex items-center gap-4">
<div class="text-5xl p-4 bg-emerald-50 rounded-2xl border border-emerald-100">🫘</div>
<div>
<h4 class="font-black text-xl text-emerald-900">Tempe</h4>
<p class="text-sm font-bold text-emerald-700">Agen Biologis: <i>Rhizopus oryzae</i> (Jamur)</p>
<p class="text-xs text-slate-600 font-bold mt-1">Mengikat kedelai dengan benang hifa putih dan memecah protein kompleks.</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-md flex items-center gap-4">
<div class="text-5xl p-4 bg-cyan-50 rounded-2xl border border-cyan-100">🥛</div>
<div>
<h4 class="font-black text-xl text-cyan-900">Yogurt & Keju</h4>
<p class="text-sm font-bold text-cyan-700">Agen Biologis: <i>Lactobacillus bulgaricus</i> (Bakteri)</p>
<p class="text-xs text-slate-600 font-bold mt-1">Mengubah gula laktosa menjadi asam laktat sehingga susu menggumpal masam.</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md flex items-center gap-4">
<div class="text-5xl p-4 bg-purple-50 rounded-2xl border border-purple-100">🍞</div>
<div>
<h4 class="font-black text-xl text-purple-900">Roti & Tapai</h4>
<p class="text-sm font-bold text-purple-700">Agen Biologis: <i>Saccharomyces cerevisiae</i> (Ragi)</p>
<p class="text-xs text-slate-600 font-bold mt-1">Fermentasi karbohidrat membebaskan gas CO₂ yang mekar mengembang.</p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md flex items-center gap-4">
<div class="text-5xl p-4 bg-rose-50 rounded-2xl border border-rose-100">💊</div>
<div>
<h4 class="font-black text-xl text-rose-900">Antibiotik Penisilin</h4>
<p class="text-sm font-bold text-rose-700">Agen Biologis: <i>Penicillium notatum</i> (Jamur)</p>
<p class="text-xs text-slate-600 font-bold mt-1">Menghasilkan sekret antibiotik pembunuh bakteri penyebab penyakit.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Pertanyaan Pemantik -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-800 text-sm font-black uppercase tracking-widest shadow-sm">
Pertanyaan Pemantik 🤔
</div>
<h2 class="text-4xl md:text-5xl font-black text-slate-900 max-w-3xl leading-tight">
"Bagaimana makhluk hidup bersel tunggal yang tak kasatmata mampu merusak, mengubah, dan menyulap bahan pangan tawar menjadi makanan lezat bernilai gizi tinggi bahkan obat penyelamat jiwa?"
</h2>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm max-w-xl text-left mt-2">
<p class="font-bold text-slate-600 text-lg">💡 Petunjuk:</p>
<p class="text-slate-700 font-bold mt-1">Semuanya berkat pemanfaatan enzim, fermentasi mikroba, dan manipulasi genetik dalam prinsip Bioteknologi!</p>
</div>
</div>
<!-- Slide 4: Tinjauan Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Tinjauan Kontekstual 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pentingnya Peran Bioteknologi dalam Kehidupan Sehari-hari</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🌾</span>
<h4 class="font-black text-xl text-teal-800">Ketahanan Pangan</h4>
<p class="text-slate-600 font-bold text-sm">Mengolah bahan mentah menjadi makanan tahan lama (tempe, keju, kecap) serta menciptakan tanaman unggul tahan hama.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">💉</span>
<h4 class="font-black text-xl text-teal-800">Kesehatan & Medis Modern</h4>
<p class="text-slate-600 font-bold text-sm">Memproduksi insulin manusia buatan via rekayasa DNA bakteri, antibiotik penisilin, serta vaksin penyelamat epidemi.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-sm text-center space-y-3">
<span class="text-5xl block">🌱</span>
<h4 class="font-black text-xl text-teal-800">Lingkungan (Bioremediasi)</h4>
<p class="text-slate-600 font-bold text-sm">Pemanfaatan bakteri khusus (<i>Pseudomonas</i>) untuk menguraikan tumpahan minyak dan sampah plastik di lautan.</p>
</div>
</div>
</div>
<!-- Slide 5: Materi Inti - Perbandingan Bioteknologi -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Materi Inti: Konvensional vs Modern 🧬</h2>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md mt-2 space-y-5">
<p class="text-lg font-bold text-slate-700">Perhatikan perbedaan karakteristik dua cabang utama bioteknologi berikut:</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-amber-50 p-6 rounded-2xl border-2 border-amber-200 text-left space-y-3">
<div class="flex items-center gap-2">
<span class="text-3xl">🏺</span>
<h4 class="font-black text-amber-900 text-xl">Bioteknologi Konvensional</h4>
</div>
<ul class="space-y-2 text-slate-700 font-bold text-sm list-disc list-inside">
<li><b>Prinsip Utama:</b> Menggunakan proses fermentasi mikroba utuh secara alami.</li>
<li><b>Peralatan:</b> Sederhana, biasa dilakukan dalam skala rumah tangga.</li>
<li><b>Kondisi:</b> Tidak memerlukan kondisi terisolasi/steril yang ketat.</li>
<li><b>Contoh Produk:</b> Tempe, Tapai, Yogurt, Keju, Kecap, Roti.</li>
</ul>
</div>
<div class="bg-cyan-50 p-6 rounded-2xl border-2 border-cyan-200 text-left space-y-3">
<div class="flex items-center gap-2">
<span class="text-3xl">🔬</span>
<h4 class="font-black text-cyan-900 text-xl">Bioteknologi Modern</h4>
</div>
<ul class="space-y-2 text-slate-700 font-bold text-sm list-disc list-inside">
<li><b>Prinsip Utama:</b> Rekayasa genetika (memotong & menyambung molekul DNA).</li>
<li><b>Peralatan:</b> Canggih, dilakukan dalam laboratorium steril berteknologi tinggi.</li>
<li><b>Skola Produksi:</b> Massal industri dengan hasil terukur tinggi.</li>
<li><b>Contoh Produk:</b> Hormon Insulin, Kloning, Bayi Tabung, Vaksin DNA.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 6: Auto-Quiz Latihan Mandiri -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Latihan Mandiri: <span class="text-emerald-600">Tebak Agen & Jenisnya!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4">Uji pemahaman agen biologis bioteknologi di bawah ini:</p>
<div id="q1-text" class="text-xl math-box text-emerald-900 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 leading-relaxed">?</div>
<div id="q1-options" class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-xl mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 7: SPLIT-SCREEN INTERACTIVE FLAT PANEL QUIZ (3 Kelompok) -->
<div class="slide flex-col p-6 gap-4 max-w-7xl mx-auto w-full min-h-[85vh]">
<div class="text-center">
<h2 class="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">⚡ BATTLE PANEL INTERAKTIF (3 KELOMPOK) ⚡</h2>
<p class="text-base font-bold text-slate-600 mt-1">3 Perwakilan Kelompok maju ke layar! Tentukan jawaban bioteknologi secara serentak.</p>
</div>
<div class="grid md:grid-cols-3 gap-5 flex-1 items-stretch">
<!-- KOLOM KELOMPOK 1 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-emerald-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-emerald-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🧫 KELOMPOK 1</span>
<span id="ifp-score-1" class="bg-emerald-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-emerald-50 p-4 rounded-2xl border-2 border-emerald-100 text-center">
<p class="text-xs font-bold text-emerald-500 uppercase mb-1">Soal Mandiri K1</p>
<p id="ifp-q-1" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-1" class="space-y-2"></div>
<div id="ifp-feedback-1" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-1" onclick="initIFPQuestion(1)" class="hidden mt-4 w-full py-2.5 bg-emerald-600 text-white font-black rounded-xl shadow hover:bg-emerald-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM KELOMPOK 2 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-teal-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-teal-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🔬 KELOMPOK 2</span>
<span id="ifp-score-2" class="bg-teal-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-teal-50 p-4 rounded-2xl border-2 border-teal-100 text-center">
<p class="text-xs font-bold text-teal-500 uppercase mb-1">Soal Mandiri K2</p>
<p id="ifp-q-2" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-2" class="space-y-2"></div>
<div id="ifp-feedback-2" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-2" onclick="initIFPQuestion(2)" class="hidden mt-4 w-full py-2.5 bg-teal-600 text-white font-black rounded-xl shadow hover:bg-teal-700 transition">Soal Berikutnya ➡️</button>
</div>
<!-- KOLOM KELOMPOK 3 -->
<div class="bg-white p-6 rounded-[2rem] border-4 border-cyan-400 shadow-xl flex flex-col justify-between relative overflow-hidden">
<div class="absolute top-0 left-0 w-full bg-cyan-600 text-white py-2 px-4 flex justify-between items-center font-black">
<span>🧬 KELOMPOK 3</span>
<span id="ifp-score-3" class="bg-cyan-800 px-3 py-0.5 rounded-full text-sm">Skor: 0</span>
</div>
<div class="mt-10 flex-1 flex flex-col justify-center space-y-4">
<div class="bg-cyan-50 p-4 rounded-2xl border-2 border-cyan-100 text-center">
<p class="text-xs font-bold text-cyan-500 uppercase mb-1">Soal Mandiri K3</p>
<p id="ifp-q-3" class="text-xl font-black math-box text-slate-800 leading-snug">Memuat soal...</p>
</div>
<div id="ifp-opts-3" class="space-y-2"></div>
<div id="ifp-feedback-3" class="hidden p-3 rounded-xl font-bold text-sm text-center pop-in"></div>
</div>
<button id="ifp-next-btn-3" onclick="initIFPQuestion(3)" class="hidden mt-4 w-full py-2.5 bg-cyan-600 text-white font-black rounded-xl shadow hover:bg-cyan-700 transition">Soal Berikutnya ➡️</button>
</div>
</div>
<!-- Modal Pemenang IFP -->
<div id="ifp-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce">👑</div>
<h2 id="ifp-winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-emerald-400 mb-6 drop-shadow-lg">JUARA BATTLE KELOMPOK!</h2>
<button onclick="resetIFPGame()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#065f46] active:shadow-none active:translate-y-2 transition">
Mainkan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 8: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang bab Bioteknologi hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian materi atau simulasi mana yang paling berkesan bagimu?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Tuliskan pendapatmu di sini..."></textarea>
</div>
</div>
<!-- Slide 9: Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Evaluasi Akhir Bioteknologi</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan pemahamanmu dengan 5 soal evaluasi ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-700 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-2xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Misi Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhirmu: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-600 to-teal-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-emerald-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Silakan lapor data ke sistem Guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Tingkat Pemahaman</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">100% - Sangat Paham!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
<option value="25">25% - Masih Bingung</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Nilai ke Guru 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-700 shadow-[0_4px_0px_#065f46]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1: Latihan Mandiri
let countQ1 = 0;
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let questions = [
{
q: "Jamur apakah yang berperan penting mengikat biji kedelai menjadi Tempe?",
options: ["Rhizopus oryzae", "Lactobacillus bulgaricus", "Saccharomyces cerevisiae"],
ans: "Rhizopus oryzae",
exp: "<b>Rhizopus oryzae</b> adalah jamur hifa putih yang menfermentasikan kedelai menjadi tempe lezat."
},
{
q: "Bakteri apakah yang menfermentasikan susu cairan cair menjadi Yogurt?",
options: ["Penicillium notatum", "Lactobacillus bulgaricus", "Escherichia coli"],
ans: "Lactobacillus bulgaricus",
exp: "<b>Lactobacillus bulgaricus</b> memproduksi asam laktat yang mengubah tekstur susu menjadi asam kental."
},
{
q: "Bioteknologi yang memotong & menyambung gen DNA mikroba di laboratorium dinamakan...",
options: ["Konvensional", "Modern", "Tradisional"],
ans: "Modern",
exp: "Bioteknologi <b>Modern</b> memanfaatkan teknik Rekayasa Genetika (DNA rekombinan)."
}
];
let selected = questions[Math.floor(Math.random() * questions.length)];
let correctAns = selected.ans;
let options = selected.options;
let explanation = selected.exp;
currentQ1Data = { correctAns, explanation };
document.getElementById('q1-text').innerHTML = selected.q;
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt}' === '${correctAns}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-center">${opt}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.explanation}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes(currentQ1Data.correctAns)) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.explanation}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// IFP Split-Screen Game
let ifpScores = { 1: 0, 2: 0, 3: 0 };
const IFP_WIN_SCORE = 5;
const ifpBank = [
{ q: "Ragi pembawa fermentasi adonan roti mengembang...", opts: ["Saccharomyces", "Rhizopus", "Lactobacillus"], ans: 0 },
{ q: "Pembuatan keju tergolong bioteknologi...", opts: ["Konvensional", "Modern", "Sintetis"], ans: 0 },
{ q: "Insulin manusia diproduksi melalui teknik bioteknologi...", opts: ["Modern (DNA)", "Konvensional", "Murni"], ans: 0 },
{ q: "Jamur antibiotik pembunuh bakteri patogen...", opts: ["Penicillium", "Rhizopus", "Spirulina"], ans: 0 },
{ q: "Fermentasi mikroba berjalan secara aerob tanpa...", opts: ["Oksigen bebas", "Glukosa", "Suhu"], ans: 0 }
];
function initIFPQuestion(group) {
document.getElementById(`ifp-feedback-${group}`).classList.add('hidden');
document.getElementById(`ifp-next-btn-${group}`).classList.add('hidden');
let randQ = ifpBank[Math.floor(Math.random() * ifpBank.length)];
document.getElementById(`ifp-q-${group}`).innerHTML = randQ.q;
let optsContainer = document.getElementById(`ifp-opts-${group}`);
optsContainer.innerHTML = "";
randQ.opts.forEach((opt, idx) => {
let btn = document.createElement('button');
btn.className = "w-full text-left p-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 font-black rounded-xl text-sm border-2 border-slate-200 transition cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkIFPAnswer(group, idx, randQ.ans, btn);
optsContainer.appendChild(btn);
});
}
function checkIFPAnswer(group, selected, correctIdx, btn) {
let optsContainer = document.getElementById(`ifp-opts-${group}`);
let btns = optsContainer.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
let fb = document.getElementById(`ifp-feedback-${group}`);
fb.classList.remove('hidden');
if(selected === correctIdx) {
btn.className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-green-100 text-green-800 pop-in block";
fb.innerHTML = "✅ Benar! +1 Poin";
ifpScores[group]++;
document.getElementById(`ifp-score-${group}`).innerText = `Skor: ${ifpScores[group]}`;
if(ifpScores[group] >= IFP_WIN_SCORE) {
setTimeout(() => {
document.getElementById('ifp-winner-text').innerText = `KELOMPOK ${group} JUARA! 👑`;
document.getElementById('ifp-winner-modal').classList.remove('hidden');
document.getElementById('ifp-winner-modal').classList.add('flex');
}, 400);
} else {
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
} else {
btn.className = "w-full text-left p-2.5 bg-rose-500 text-white font-black rounded-xl text-sm border-2 border-rose-700";
btns[correctIdx].className = "w-full text-left p-2.5 bg-green-500 text-white font-black rounded-xl text-sm border-2 border-green-700";
fb.className = "mt-2 p-2 rounded-xl font-bold text-xs bg-rose-100 text-rose-800 pop-in block";
fb.innerHTML = "❌ Kurang tepat!";
document.getElementById(`ifp-next-btn-${group}`).classList.remove('hidden');
}
}
function resetIFPGame() {
ifpScores = { 1: 0, 2: 0, 3: 0 };
for(let i=1; i<=3; i++) {
document.getElementById(`ifp-score-${i}`).innerText = `Skor: 0`;
initIFPQuestion(i);
}
document.getElementById('ifp-winner-modal').classList.add('hidden');
document.getElementById('ifp-winner-modal').classList.remove('flex');
}
for(let i=1; i<=3; i++) {
initIFPQuestion(i);
}
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi Akhir Bioteknologi
const evaluasiBank = [
{
q: "Pemanfaatan makhluk hidup (agen biologis) untuk menghasilkan barang atau jasa yang berguna bagi manusia disebut...",
options: ["Biologi Ekologi", "Bioteknologi", "Biofisika", "Biodiversitas"],
a: 1,
exp: "<b>Bioteknologi</b> adalah ilmu pemanfaatan agen biologis untuk menghasilkan produk/jasa yang bermanfaat."
},
{
q: "Berikut ini yang merupakan ciri utama Bioteknologi Konvensional adalah...",
options: ["Menggunakan rekombinasi DNA", "Memerlukan laboratorium steril ultra-canggih", "Memanfaatkan proses fermentasi alami", "Membuat kloning hewan secara massal"],
a: 2,
exp: "Bioteknologi konvensional mengandalkan <b>proses fermentasi mikroba alami</b> dan peralatan sederhana."
},
{
q: "Hormon Insulin medis untuk penderita diabetes diproduksi melalui cabang bioteknologi...",
options: ["Tradisional", "Konvensional", "Modern (Rekayasa Genetika DNA)", "Fosil"],
a: 2,
exp: "Insulin sintetis diproduksi menggunakan <b>Bioteknologi Modern</b> melalui pemotongan & penyambungan DNA plasmid bakteri E. coli."
},
{
q: "Mikroorganisme <i>Saccharomyces cerevisiae</i> sangat populer dalam pemrosesan...",
options: ["Yogurt susu", "Roti & Tapai", "Antibiotik Penisilin", "Keju Mozzarella"],
a: 1,
exp: "<b>Saccharomyces cerevisiae</b> (ragi) menfermentasikan gula menjadi alkohol dan gas CO₂ pemekar roti & tapai."
},
{
q: "Pasangan produk bioteknologi dan agen biologis yang BENAR adalah...",
options: ["Tempe - Rhizopus oryzae", "Yogurt - Penicillium notatum", "Penisilin - Lactobacillus bulgaricus", "Keju - Saccharomyces cerevisiae"],
a: 0,
exp: "Pasangan yang paling tepat adalah <b>Tempe - Rhizopus oryzae</b>."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 3500);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Bioteknologi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Bioteknologi: " + refleksi,
strategi: "Evaluasi: Bab Bioteknologi IPA Kelas 9"
}, "*");
} else {
alert("Laporan Misi Bioteknologi Diterima! (Local Test)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
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>
Kelas 7
IPA
Suhu, Pemuaian dan Kalor 2 : Mengkonversi skala termometer Celsius ke Reamur, Fahrenheit, dan Kelvin
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 2 - Konversi Skala Termometer</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, #1e1b4b 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, #38bdf8, #fbbf24); 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, #fbbf24, #10b981); -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, #38bdf8, #fbbf24); 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, #38bdf8, #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; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95rem; }
th, td { border: 1px solid var(--card-border); padding: 8px; text-align: center; }
th { background: rgba(56, 189, 248, 0.25); }
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 2</span>
<h1>KONVERSI SKALA TERMOMETER</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 2):</b></p>
<p>Siswa mampu mengonversikan angka suhu dari skala Celsius ke skala Reamur, Fahrenheit, dan Kelvin menggunakan perbandingan titik tetap termometer.</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 Perbedaan Skala Negara</h2>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🇺🇸</span>
<p><b>Laporan Cuaca di Amerika</b></p>
<button class="interactive-btn" onclick="alert('Suhu udara tercatat 77 °F! Di Indonesia skala ini terasa hangat biasa setara 25 °C.')">Cek Skala Fahrenheit</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">🔬</span>
<p><b>Laporan Ilmiah Internasional</b></p>
<button class="interactive-btn" onclick="alert('Suhu es mencair ditulis 273 K. Skala Kelvin adalah skala resmi SI tanpa tanda derajat!')">Cek Skala Kelvin</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Sama-Sama Dingin, Angkanya Beda?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.2rem; color: var(--yellow); font-weight: bold;">
"Mengapa saat es membeku, termometer Celsius menunjukkan $0^{\circ}\text{C}$, Reamur $0^{\circ}\text{R}$, Fahrenheit $32^{\circ}\text{F}$, dan Kelvin $273\text{ K}$?"
</p>
<p style="font-size: 3.5rem; margin: 15px 0;">🌡️ $0^{\circ}\text{C} = 32^{\circ}\text{F} = 273\text{ K}$</p>
<p>Bagaimana rumusan matematika untuk mengubah satu skala ke skala lainnya?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Aplikasi Konversi dalam Penerbangan & Sains</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Dunia Penerbangan:</b> Pilot membaca suhu luar pesawat dalam Fahrenheit dan mengubahnya ke Celsius untuk sistem kontrol mesin.</li>
<li style="margin-bottom: 10px;"><b>Fisika Antariksa:</b> Suhu permukaan planet luar angkasa selalu dinyatakan dalam skala mutlak Kelvin.</li>
<li><b>Eksportir Makanan:</b> Pengiriman daging beku antarnegara mewajibkan penulisan rentang suhu dalam Celsius dan Fahrenheit.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 2 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 2</span>
<h2>2. Perbandingan Titik Tetap Termometer</h2>
<table>
<tr><th>Skala</th><th>Titik Bawah (Es)</th><th>Titik Atas (Mendidih)</th><th>Rentang Skala</th></tr>
<tr><td><b>Celsius</b></td><td>$0^{\circ}\text{C}$</td><td>$100^{\circ}\text{C}$</td><td>100</td></tr>
<tr><td><b>Reamur</b></td><td>$0^{\circ}\text{R}$</td><td>$80^{\circ}\text{R}$</td><td>80</td></tr>
<tr><td><b>Fahrenheit</b></td><td>$32^{\circ}\text{F}$</td><td>$212^{\circ}\text{F}$</td><td>180</td></tr>
<tr><td><b>Kelvin</b></td><td>$273\text{ K}$</td><td>$373\text{ K}$</td><td>100</td></tr>
</table>
<div class="glass-card" style="margin-top: 10px; text-align: center;">
<p style="color: var(--yellow); font-weight: bold;">Rasio Perbandingan: $t_C : t_R : (t_F - 32) = 5 : 4 : 9$</p>
<p style="font-size: 0.95rem; margin-top: 4px;">• $t_R = \frac{4}{5} t_C$ | • $t_F = \left(\frac{9}{5} t_C\right) + 32$ | • $T = t_C + 273$</p>
</div>
</div>
<!-- SLIDE 6: KUIS TP 2 -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 2</span>
<h2>Uji Konversi Skala (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 (Celsius-Reamur)</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 (Celsius-Kelvin)</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 (Fahrenheit)</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 (Titik Tetap)</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 konversi skala:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Perhitungan konversi sangat lancar! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Terus berlatih soal hitungan ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Tetap semangat, mari kita ulangi perbandingan 5:4:9! 💪')">😕 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 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 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. Suhu $40^{\\circ}\\text{C}$ jika diukur dengan termometer Reamur bernilai...", opts: ["32 °R", "50 °R", "80 °R"], ans: 0 },
{ q: "2. Suhu $100^{\\circ}\\text{C}$ setara dengan titik didih Fahrenheit yaitu...", opts: ["180 °F", "212 °F", "273 °F"], ans: 1 },
{ q: "3. Konversi suhu $27^{\\circ}\\text{C}$ ke skala Kelvin adalah...", opts: ["300 K", "273 K", "310 K"], ans: 0 },
{ q: "4. Angka perbandingan skala $t_C : t_R : (t_F - 32)$ yang benar adalah...", opts: ["5 : 4 : 9", "4 : 5 : 9", "9 : 4 : 5"], ans: 0 },
{ q: "5. Pada suhu $0^{\\circ}\\text{C}$, skala Fahrenheit menunjukkan angka...", opts: ["0 °F", "32 °F", "100 °F"], ans: 1 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 2 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: "50 °C = ... °R", opts: ["40 °R", "80 °R"], ans: 0 },
{ q: "20 °C = ... °R", opts: ["16 °R", "25 °R"], ans: 0 },
{ q: "80 °C = ... °R", opts: ["64 °R", "100 °R"], ans: 0 },
{ q: "Rasio Reamur ke Celsius...", opts: ["4/5", "5/4"], ans: 0 },
{ q: "0 °C setara dengan...", opts: ["0 °R", "32 °R"], ans: 0 }
],
t2: [
{ q: "0 °C = ... K", opts: ["273 K", "0 K"], ans: 0 },
{ q: "100 °C = ... K", opts: ["373 K", "273 K"], ans: 0 },
{ q: "Suhu 300 K = ... °C", opts: ["27 °C", "37 °C"], ans: 0 },
{ q: "Suhu mutlak pakai skala...", opts: ["Kelvin", "Fahrenheit"], ans: 0 },
{ q: "37 °C tubuh manusia = ... K", opts: ["310 K", "300 K"], ans: 0 }
],
t3: [
{ q: "100 °C = ... °F", opts: ["212 °F", "180 °F"], ans: 0 },
{ q: "0 °C = ... °F", opts: ["32 °F", "0 °F"], ans: 0 },
{ q: "Pengurang skala Fahrenheit...", opts: ["32", "273"], ans: 0 },
{ q: "Perbandingan Fahrenheit...", opts: ["9", "5"], ans: 0 },
{ q: "50 °C = ... °F", opts: ["122 °F", "90 °F"], ans: 0 }
],
t4: [
{ q: "Titik es mendidih Celsius...", opts: ["100 °C", "212 °C"], ans: 0 },
{ q: "Selisih skala Reamur...", opts: ["80", "100"], ans: 0 },
{ q: "Titik bekunya 273 adalah...", opts: ["Kelvin", "Fahrenheit"], ans: 0 },
{ q: "Selisih skala Fahrenheit...", opts: ["180", "100"], ans: 0 },
{ q: "Titik beku Celsius...", opts: ["0 °C", "32 °C"], 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. Jika suhu kamar $25^{\\circ}\\text{C}$, maka pada skala Reamur besarnya adalah...", opts: ["20 °R", "30 °R", "45 °R"], ans: 0 },
{ q: "2. Suhu $77^{\\circ}\\text{F}$ setara dengan suhu Celsius sebesar...", opts: ["25 °C", "30 °C", "45 °C"], ans: 0 },
{ q: "3. Titik didih air pada skala Kelvin adalah...", opts: ["100 K", "273 K", "373 K"], ans: 2 },
{ q: "4. Termometer Reamur memiliki rentang jumlah skala dari titik es ke titik didih sebesar...", opts: ["80", "100", "180"], ans: 0 },
{ q: "5. Suhu $-40^{\\circ}\\text{C}$ akan menunjukkan angka yang SAMA pada skala...", opts: ["Fahrenheit", "Reamur", "Kelvin"], 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 2 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 1 : Pengukuran Suhu, Prinsip Termometrik, & Jenis-Jenis Termometer (Raksa vs Alkohol)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 1 - Pengukuran Suhu & Termometer</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%, #1e1b4b 50%, #311b92 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, #fbbf24); 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, #f43f5e, #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, #f43f5e, #fbbf24); 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, #38bdf8, #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; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95rem; }
th, td { border: 1px solid var(--card-border); padding: 8px; text-align: left; }
th { background: rgba(56, 189, 248, 0.25); text-align: center; }
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 1</span>
<h1>SUHU & PENGUKURANNYA</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 1):</b></p>
<p>Siswa mampu mengukur suhu zat menggunakan termometer dengan tepat, memahami prinsip kerja sifat termometrik, serta menganalisis kelebihan dan kekurangan bahan cair pengisi termometer.</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 Suhu Diri & Benda</h2>
<p>Klik tombol di bawah untuk mengamati hasil pengukuran suhu:</p>
<div class="grid-2" style="text-align: center;">
<div class="glass-card">
<span style="font-size: 3.5rem;">🤒</span>
<p><b>Meraba Dahi Teman saat Demam</b></p>
<button class="interactive-btn" onclick="alert('Tangan hanya merasakan terasa panas/hangat secara relatif, namun TIDAK BISA memberikan angka suhu yang pasti!')">Uji Indra Peraba</button>
</div>
<div class="glass-card">
<span style="font-size: 3.5rem;">🌡️</span>
<p><b>Pemeriksaan Termometer Klinis</b></p>
<button class="interactive-btn" onclick="alert('Termometer mengukur dengan pasti: Suhu badan = 38,5 °C. Angka pasti ini menunjukkan derajat panas benda!')">Gunakan Termometer</button>
</div>
</div>
</div>
<!-- SLIDE 3: PERTANYAAN PEMANTIK -->
<div class="slide">
<span class="slide-tag">🤔 Pertanyaan Pemantik</span>
<h2>Mengapa Kulit Kita Bisa Menipu?</h2>
<div class="glass-card" style="text-align: center;">
<p style="font-size: 1.25rem; color: var(--yellow); font-weight: bold;">
"Jika kamu celupkan tangan kanan ke air es dan tangan kiri ke air hangat, lalu keduanya ditaruh ke air biasa, mengapa sensasi rasa panas di kedua tanganmu berbeda?"
</p>
<p style="font-size: 3.8rem; margin: 15px 0;">🧊 🖐️ ♨️</p>
<p>Mengapa sains membutuhkan **Termometer** sebagai alat ukur suhu yang baku dan objektif?</p>
</div>
</div>
<!-- SLIDE 4: TINJAUAN KONTEKSTUAL -->
<div class="slide">
<span class="slide-tag">🌐 Tinjauan Kontekstual</span>
<h2>Penggunaan Termometer dalam Kehidupan</h2>
<div class="glass-card">
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;"><b>Dunia Medis:</b> Termometer inframerah (thermogun) mengukur suhu tubuh tanpa kontak fisik langsung.</li>
<li style="margin-bottom: 10px;"><b>Kandang Peternakan:</b> Termometer Six-Bellani mencatat suhu maksimum dan minimum harian ruang untuk menjaga kesehatan hewan.</li>
<li><b>Laboratorium IPA:</b> Termometer raksa/alkohol dipakai mengamati titik didih air secara presisi.</li>
</ul>
</div>
</div>
<!-- SLIDE 5: MATERI PADAT TP 1 -->
<div class="slide">
<span class="slide-tag">📖 Materi Padat TP 1</span>
<h2>1. Definisi Suhu & Sifat Termometrik</h2>
<div class="glass-card" style="margin-bottom: 10px;">
<p><b>Suhu:</b> Ukuran derajat panas atau dinginnya suatu benda. Alat ukur resminya adalah <b>Termometer</b>.</p>
<p style="margin-top: 4px;">• <b>Sifat Termometrik:</b> Perubahan sifat zat (seperti volume zat cair) akibat perubahan suhu. Jika dipanaskan volume zat cair memuai (naik), dan jika didinginkan menyusut (turun).</p>
</div>
<div class="grid-2">
<div class="glass-card">
<h4 style="color: var(--accent);">🔴 Air Raksa ($\text{Hg}$)</h4>
<p style="font-size: 0.9rem;">• <b>Kelebihan:</b> Mengkilap (mudah dilihat), pemuaian teratur, tidak membasahi dinding kaca, jangkauan $-39^{\circ}\text{C}$ s.d. $357^{\circ}\text{C}$.</p>
<p style="font-size: 0.9rem; color: var(--yellow); margin-top: 4px;">• <b>Kekurangan:</b> Mahal, beracun, tidak bisa mengukur suhu $< -39^{\circ}\text{C}$.</p>
</div>
<div class="glass-card">
<h4 style="color: var(--primary);">🔵 Alkohol</h4>
<p style="font-size: 0.9rem;">• <b>Kelebihan:</b> Murah, sangat teliti untuk perubahan kecil, titik beku rendah ($-112^{\circ}\text{C}$).</p>
<p style="font-size: 0.9rem; color: var(--yellow); margin-top: 4px;">• <b>Kekurangan:</b> Titik didih rendah ($78^{\circ}\text{C}$), bening (harus diberi pewarna), membasahi dinding.</p>
</div>
</div>
</div>
<!-- SLIDE 6: KUIS TP 1 -->
<div class="slide">
<span class="slide-tag">🎮 Kuis TP 1</span>
<h2>Uji Pemahaman Suhu & Termometer (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 (Indra Peraba)</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 (Raksa)</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 (Alkohol)</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 (Jenis Termometer)</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 yang menggambarkan pemahamanmu:</p>
<div style="margin: 20px 0; display: flex; justify-content: center; gap: 15px;">
<button class="interactive-btn" onclick="alert('Luar biasa! Konsep termometer sudah kamu kuasai! 😄🎉')">😄 Gampang Banget!</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #38bdf8, #3b82f6);" onclick="alert('Bagus! Pertahankan semangat belajar ya! 👍')">😐 Lumayan Seru</button>
<button class="interactive-btn" style="background: linear-gradient(135deg, #94a3b8, #64748b);" onclick="alert('Jangan khawatir, mari pelajari lagi bersama 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 2! 🎉')">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();
}
// Kuis Individual TP 1
const q1Data = [
{ q: "1. Ukuran derajat panas atau dinginnya suatu benda dinamakan...", opts: ["Kalor", "Suhu", "Pemuaian"], ans: 1 },
{ q: "2. Mengapa kulit/tangan tidak bisa dijadikan alat ukur suhu yang tepat?", opts: ["Karena kulit terasa sakit", "Karena tidak memberikan angka pasti (fleksibel)", "Karena kulit bisa terbakar"], ans: 1 },
{ q: "3. Salah satu kelebihan utama air raksa sebagai pengisi termometer adalah...", opts: ["Harganya sangat murah", "Pemuaiannya teratur dan mengkilap", "Titik bekunya sangat rendah"], ans: 1 },
{ q: "4. Cairan alkohol dipilih untuk mengukur suhu daerah sangat dingin karena...", opts: ["Memiliki titik beku rendah (-112 °C)", "Memiliki titik didih tinggi", "Warnanya bening"], ans: 0 },
{ q: "5. Termometer yang digunakan khusus untuk mengukur suhu maksimum dan minimum harian adalah...", opts: ["Termometer Klinis", "Termometer Six-Bellani", "Termometer Gas"], ans: 1 }
];
let q1Idx = 0;
function renderQ1() {
if(q1Idx >= q1Data.length) { document.getElementById('q1-text').innerText = "🎉 Tuntas! Kuis TP 1 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(); }
// Multi User Engine (5 Soal per Tim)
const teamData = {
t1: [
{ q: "Suhu menyatakan derajat... benda.", opts: ["Panaskan", "Panas/dingin"], ans: 1 },
{ q: "Alat baku pengukur suhu adalah...", opts: ["Termometer", "Tangan"], ans: 0 },
{ q: "Indra peraba bersifat...", opts: ["Objektif", "Subjektif"], ans: 1 },
{ q: "Zat cair memuai jika...", opts: ["Dipanaskan", "Didinginkan"], ans: 0 },
{ q: "Zat cair menyusut jika...", opts: ["Didinginkan", "Dipanaskan"], ans: 0 }
],
t2: [
{ q: "Air raksa berwarna...", opts: ["Mengkilap", "Bening"], ans: 0 },
{ q: "Air raksa ... membasahi dinding kaca.", opts: ["Tidak", "Selalu"], ans: 0 },
{ q: "Sifat raksa yang berbahaya adalah...", opts: ["Beracun", "Murah"], ans: 0 },
{ q: "Titik didih air raksa mencapai...", opts: ["357 °C", "78 °C"], ans: 0 },
{ q: "Raksa tidak bisa mengukur suhu di bawah...", opts: ["-39 °C", "0 °C"], ans: 0 }
],
t3: [
{ q: "Titik beku alkohol sangat rendah yaitu...", opts: ["-112 °C", "0 °C"], ans: 0 },
{ q: "Harga alkohol relatif lebih...", opts: ["Murah", "Mahal"], ans: 0 },
{ q: "Kelemahan alkohol titik didihnya rendah yaitu...", opts: ["78 °C", "100 °C"], ans: 0 },
{ q: "Alkohol di termometer harus diberi...", opts: ["Pewarna", "Air"], ans: 0 },
{ q: "Alkohol ... dinding kaca.", opts: ["Membasahi", "Tidak membasahi"], ans: 0 }
],
t4: [
{ q: "Termometer tanpa sentuh dinamakan...", opts: ["Inframerah", "Gas"], ans: 0 },
{ q: "Termometer untuk mengukur demam adalah...", opts: ["Klinis", "Six-Bellani"], ans: 0 },
{ q: "Termometer Six-Bellani mengukur suhu...", opts: ["Max & Min harian", "Mendidih"], ans: 0 },
{ q: "Sifat termometrik memanfaatkan perubahan...", opts: ["Volume cair", "Warna kaca"], ans: 0 },
{ q: "Satuan SI resmi untuk suhu adalah...", opts: ["Kelvin", "Celsius"], 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`;
}
// Ujian Akhir Individu
let rawExamData = [
{ q: "1. Termometer bekerja dengan memanfaatkan sifat termometrik berupa...", opts: ["Perubahan warna wadah", "Pemuaian dan penyusutan zat cair", "Perubahan berat jenis zat"], ans: 1 },
{ q: "2. Pernyataan yang BENAR mengenai kelemahan zat cair alkohol adalah...", opts: ["Harganya sangat mahal", "Titik didihnya rendah sehingga tidak bisa mengukur air mendidih", "Sangat beracun jika pecah"], ans: 1 },
{ q: "3. Titik didih raksa mencapai $357^{\\circ}\\text{C}$, hal ini membuat raksa cocok untuk...", opts: ["Mengukur suhu udara kutub", "Mengukur suhu benda yang cukup tinggi", "Mengukur suhu es krim"], ans: 1 },
{ q: "4. Thermogun bekerja mengukur suhu tubuh berdasarkan radiasi...", opts: ["Inframerah", "Ultraviolet", "Sinar-X"], ans: 0 },
{ q: "5. Rasa hangat yang dirasakan tangan saat menyentuh dahi termasuk penilaian yang bersifat...", opts: ["Kuantitatif", "Subjektif", "Baku"], ans: 1 }
];
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 1 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>
📊 Papan Nilai & Aktivitas Kelas
Nilai ganda per siswa otomatis diambil skor tertinggi| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Belum ada nilai siswa yang masuk. | |||||