Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 8
IPA
Sistem Pencernaan Manusia
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analisis Kedokteran: Sistem Pencernaan Manusia</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=Plus+Jakarta+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; }
.heading-font { font-family: 'Playfair Display', serif; }
.slide { display: none; }
.slide.active { display: flex; }
.match-card { transition: all 0.2s ease; cursor: pointer; }
.match-card.selected { transform: translateY(-2px); box-shadow: 0 0 0 3px #10b981; border-color: #10b981; }
.match-card.matched { opacity: 0.6; pointer-events: none; background: #ecfdf5 !important; border-color: #a7f3d0 !important; }
.nav-btn:disabled { opacity: 0.3; pointer-events: none; }
.sticky-note { animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes popIn { from { transform: scale(0.9) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
</style>
</head>
<body class="w-full min-h-screen flex flex-col pb-12 text-slate-800">
<!-- Modern Minimalist Top Navigation -->
<nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-4 bg-white/80 backdrop-blur-md border-b border-slate-200/80 shadow-sm">
<button class="nav-btn px-4 py-2 border border-slate-300 rounded-xl text-xs font-bold text-slate-700 bg-white hover:bg-slate-50 shadow-sm transition flex items-center gap-1" id="prev-btn" disabled>
<i data-lucide="arrow-left" style="width:14px;height:14px"></i> Kembali
</button>
<span class="text-xs font-bold tracking-widest text-slate-500 uppercase bg-slate-100 px-3 py-1.5 rounded-full" id="slide-counter">1 / 10</span>
<button class="nav-btn px-4 py-2 border border-slate-300 rounded-xl text-xs font-bold text-white bg-indigo-600 hover:bg-indigo-700 shadow-sm transition flex items-center gap-1" id="next-btn">
Lanjut <i data-lucide="arrow-right" style="width:14px;height:14px"></i>
</button>
</nav>
<main class="flex-1 pt-24 pb-6 px-4 w-full max-w-4xl mx-auto">
<!-- SLIDE 1: Welcome Screen (Realistis/Akademik Style) -->
<section class="slide active flex-col items-center justify-center text-center gap-6 min-h-[65vh]" data-slide="1">
<div class="px-4 py-1.5 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full text-xs font-bold uppercase tracking-wider">
Modul Sains & Anatomi • Kelas VIII
</div>
<h1 class="heading-font text-4xl md:text-6xl font-black text-slate-900 leading-tight">Bioreaktor Tubuh:<br><span class="text-emerald-600">Fisiologi Sistem Pencernaan</span></h1>
<p class="text-base md:text-lg max-w-2xl text-slate-500 font-medium leading-relaxed">Analisis komprehensif transformasi makromolekul nutrisi secara mekanis dan kimiawi di dalam saluran gastrointestinal manusia.</p>
<button id="start-btn" class="mt-4 px-8 py-3.5 bg-slate-900 text-white rounded-xl text-sm font-bold shadow-lg hover:bg-slate-800 transition transform hover:-translate-y-0.5 flex items-center gap-2">
Buka Modul Eksplorasi <i data-lucide="play" style="width:16px;height:16px"></i>
</button>
</section>
<!-- SLIDE 2: CP & TP Terintegrasi -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="2">
<h2 class="heading-font text-2xl font-bold text-slate-900 border-b border-slate-200 pb-2 flex items-center gap-2">
<i data-lucide="file-text" class="text-indigo-600"></i> Capaian & Target Kompetensi
</h2>
<div class="bg-white border border-slate-200 p-5 rounded-2xl shadow-sm space-y-3">
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">Capaian Pembelajaran (Kurikulum Nasional)</h3>
<p class="text-slate-700 text-sm leading-relaxed font-medium">
Peserta didik mampu mengidentifikasi serta menganalisis keterkaitan antara struktur organ saluran gastrointestinal dengan fungsinya dalam proses pemecahan zat makanan, serta memahami biokimia enzim pencernaan.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-2">
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<span class="text-xs font-bold text-emerald-600 uppercase">Indikator 01</span>
<p class="text-xs text-slate-600 font-semibold mt-1">Memetakan anatomi organ pencernaan utama dan kelenjar aksesori.</p>
</div>
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<span class="text-xs font-bold text-emerald-600 uppercase">Indikator 02</span>
<p class="text-xs text-slate-600 font-semibold mt-1">Membedakan hidrolisis zat makanan secara mekanis dan enzimatik.</p>
</div>
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<span class="text-xs font-bold text-emerald-600 uppercase">Indikator 03</span>
<p class="text-xs text-slate-600 font-semibold mt-1">Mendiagnosis gangguan biokimia (maag, konstipasi, dll) pada organ.</p>
</div>
</div>
</section>
<!-- SLIDE 3: Video Stimulus (Local Server Source) -->
<section class="slide flex-col gap-5 min-h-[65vh]" data-slide="3">
<h2 class="heading-font text-2xl font-bold text-slate-900 flex items-center gap-2"><i data-lucide="video" class="text-rose-600"></i> Video Stimulus: Proses Transportasi Makanan</h2>
<div class="w-full aspect-video bg-slate-950 rounded-2xl overflow-hidden shadow-inner border border-slate-800">
<!-- Menggunakan HTML5 native video player untuk memutar video dari local server intranet sekolah -->
<video width="100%" height="100%" controls class="w-full h-full object-contain">
<source src="http://192.168.1.100//filesharing///////////////////elearning/media/2026/0000183.C__Users_soumena_AppData_Local_edu.ruang.murid_decrypted_9272b5ef9510c946_b8f68198-714e-404f-8aec-38957fffaf6c.mp4" type="video/mp4">
Browser Anda tidak mendukung pemutar video lokal server. Silakan hubungi proktor/teknisi IT.
</video>
</div>
<div class="bg-slate-900 text-white p-5 rounded-2xl shadow-md">
<h4 class="text-xs font-bold uppercase tracking-wider text-amber-400 mb-1 flex items-center gap-1"><i data-lucide="help-circle" style="width:14px;height:14px"></i> Studi Kasus Klinis</h4>
<p class="text-slate-300 text-xs leading-relaxed mb-3">Berdasarkan visualisasi video tersebut, analisislah bagaimana mekanisme bolus makanan terdorong ke lambung meskipun tubuh dalam posisi terbalik/gravitasi nol?</p>
<textarea id="checkpoint-answer" class="w-full p-3 bg-slate-800 border border-slate-700 text-slate-100 rounded-xl resize-none h-20 text-xs focus:ring-2 focus:ring-emerald-500 focus:outline-none" placeholder="Tuliskan analisis ilmiah Anda..."></textarea>
<button class="mt-2 px-4 py-2 bg-emerald-600 text-white text-xs font-bold rounded-lg hover:bg-emerald-500 transition shadow" onclick="document.getElementById('checkpoint-feedback').classList.remove('hidden')">Kirim Analisis</button>
<p id="checkpoint-feedback" class="hidden mt-2 text-emerald-400 font-semibold text-xs flex items-center gap-1">✅ Tepat! Gerakan tersebut adalah peristaltik esofagus yang dipicu kontraksi otot sirkular dan longitudinal secara ritmis.</p>
</div>
</section>
<!-- SLIDE 4: Kedalaman Materi 1 (Ingesti & Pencernaan Atas) -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="4">
<h2 class="heading-font text-2xl font-bold text-slate-900 border-b border-slate-200 pb-1 flex items-center gap-2"><i data-lucide="book-open" class="text-emerald-600"></i> Fisiologi Organ Atas: Mulut hingga Lambung</h2>
<div class="space-y-3 text-sm text-slate-600 leading-relaxed">
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<h3 class="font-bold text-slate-800 text-base mb-1 flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> 1. Rongga Mulut (Cavum Oris)</h3>
<p class="text-xs text-slate-500 mb-2">Terjadi perpaduan pencernaan mekanis (oleh gigi dan lidah) serta kimiawi.</p>
<ul class="list-disc pl-5 space-y-1 text-xs">
<li><b>Gigi (Dentes):</b> Memotong (insisivus), merobek (caninus), dan mengunyah (molar) makanan menjadi bolus kecil.</li>
<li><b>Kelenjar Ludah (Saliva):</b> Menghasilkan enzim <b>Amilase (Ptialin)</b> yang menghidrolisis amilum menjadi disakarida (maltosa) pada pH ideal $\approx 6.8$.</li>
</ul>
</div>
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<h3 class="font-bold text-slate-800 text-base mb-1 flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> 2. Lambung (Ventriculus)</h3>
<p class="text-xs text-slate-500 mb-2">Kantong otot kontraktil yang menghasilkan getah lambung bersifat sangat asam (pH 1.5 - 2.5).</p>
<ul class="list-disc pl-5 space-y-1 text-xs">
<li><b>Asam Klorida (HCl):</b> Membunuh patogen mikroskopis dan mengaktifkan pepsinogen menjadi pepsin.</li>
<li><b>Enzim Pepsin:</b> Memecah makromolekul rantai protein kompleks menjadi gugus peptida (pepton).</li>
<li><b>Enzim Renin:</b> Mengkoagulasikan kasein (protein susu) dari cairan susu mamalia.</li>
</ul>
</div>
</div>
</section>
<!-- SLIDE 5: Kedalaman Materi 2 (Intestinum & Kelenjar Aksesori) -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="5">
<h2 class="heading-font text-2xl font-bold text-slate-900 border-b border-slate-200 pb-1 flex items-center gap-2"><i data-lucide="layers" class="text-emerald-600"></i> Absorpsi & Peran Organ Aksesori Kelenjar</h2>
<div class="space-y-3 text-sm text-slate-600 leading-relaxed">
<div class="bg-white border border-slate-200 p-4 rounded-xl shadow-sm">
<h3 class="font-bold text-slate-800 text-sm mb-1">Usus Halus (Intestinum Tenue)</h3>
<p class="text-xs text-slate-500 mb-1">Terbagi atas Duodenum (12 jari), Jejunum (kosong), dan Ileum (penyerapan). Struktur dinding Ileum dipenuhi vili (jonjot usus) untuk memperluas area penyerapan sari makanan.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
<div class="bg-amber-50/50 border border-amber-200 p-4 rounded-xl">
<h4 class="font-bold text-amber-800 mb-1">Pankreas (Kelenjar Eksokrin)</h4>
<p class="text-slate-600 leading-relaxed mb-2">Mensekresikan natrium bikarbonat untuk menetralkan asam kimus lambung serta enzim penting:</p>
<ul class="list-disc pl-4 space-y-1 text-slate-700">
<li><b>Tripsin:</b> Memecah pepton menjadi asam amino dasar.</li>
<li><b>Lipase Pankreas:</b> Memecah emulsi lemak menjadi asam lemak dan gliserol.</li>
</ul>
</div>
<div class="bg-emerald-50/50 border border-emerald-200 p-4 rounded-xl">
<h4 class="font-bold text-emerald-800 mb-1">Hati & Kantung Empedu</h4>
<p class="text-slate-600 leading-relaxed">Hati memproduksi cairan <b>Empedu (Bile)</b> yang disimpan di kantung empedu. Cairan ini tidak mengandung enzim, melainkan garam empedu yang berfungsi **mengemulsikan lemak** secara mekanis agar bisa dihidrolisis zat lipase.</p>
</div>
</div>
</div>
</section>
<!-- SLIDE 6: Game Variasi 1 - Pilihan Ganda Teknis -->
<section class="slide flex-col gap-6 min-h-[65vh]" data-slide="6">
<h2 class="heading-font text-2xl font-bold text-slate-900 text-center">🎮 Kompetensi 1: Uji Biokimia Enzim</h2>
<div class="bg-white border border-slate-200 p-6 rounded-2xl shadow-sm max-w-2xl mx-auto w-full">
<p class="font-bold text-base text-slate-800 mb-4 text-center">Pasien klinis mengalami malabsorpsi lemak akibat gangguan sekresi getah alkali. Kerusakan pada organ manakah yang paling mungkin memicu penurunan hidrolisis emulsi lemak tersebut?</p>
<div class="flex flex-col gap-3" id="pg-area">
<button class="w-full py-3.5 px-4 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-700 text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">A. Glandula Parotis (Kelenjar Ludah)</button>
<button class="w-full py-3.5 px-4 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-700 text-left hover:bg-slate-100 transition" onclick="cekPG(this, true)">B. Pankreas (Penurunan Sekresi Lipase & Bikarbonat)</button>
<button class="w-full py-3.5 px-4 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-700 text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">C. Dinding Dalam Mukosa Lambung</button>
</div>
<p id="pg-feedback" class="hidden mt-4 font-bold text-center text-xs"></p>
</div>
</section>
<!-- SLIDE 7: Game Variasi 2 - Mencocokkan Pasangan Dinamis -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="7">
<h2 data-template-id="match-title" class="heading-font text-2xl font-bold text-center text-slate-900"></h2>
<p class="text-center text-xs text-slate-500">Pasangkan nama organ/zat pencernaan di sebelah kiri dengan fungsi fisiologis spesifiknya di kanan secara tepat.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3" id="match-board"></div>
<p id="match-feedback" class="text-center font-bold text-xs hidden mt-4"></p>
</section>
<!-- SLIDE 8: Game Variasi 3 - Pilihan Ganda Kompleks -->
<section class="slide flex-col gap-4 min-h-[65vh]" data-slide="8">
<h2 class="heading-font text-2xl font-bold text-slate-900 text-center">🎮 Kompetensi 3: Pilihan Ganda Kompleks</h2>
<div class="bg-white border border-slate-200 p-6 rounded-2xl shadow-sm max-w-2xl mx-auto w-full space-y-4">
<p class="font-bold text-sm text-slate-800 text-center bg-slate-50 p-3 rounded-xl border">Manakah pernyataan di bawah ini yang paling TEPAT menjelaskan proses penyerapan dan metabolisme zat makanan di Intestinum Tenue? (Pilih dua atau lebih jawaban benar!)</p>
<div class="space-y-3">
<label class="flex items-start gap-3 p-3 border border-slate-200 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition">
<input type="checkbox" name="pk" value="A" class="mt-1 w-4 h-4 accent-emerald-600">
<span class="text-xs font-semibold text-slate-700">A. Glukosa dan asam amino diserap jonjot vili usus halus lalu dibawa langsung masuk pembuluh darah kapiler menuju hati.</span>
</label>
<label class="flex items-start gap-3 p-3 border border-slate-200 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition">
<input type="checkbox" name="pk" value="B" class="mt-1 w-4 h-4 accent-emerald-600">
<span class="text-xs font-semibold text-slate-700">B. Getah usus tidak memerlukan sinyal kimia/hormon kolesistokinin dalam proses absorbsi molekul pati.</span>
</label>
<label class="flex items-start gap-3 p-3 border border-slate-200 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition">
<input type="checkbox" name="pk" value="C" class="mt-1 w-4 h-4 accent-emerald-600">
<span class="text-xs font-semibold text-slate-700">C. Asam lemak dan gliserol diabsorbsi masuk ke dalam pembuluh kil (pembuluh limfa/getah bening) di tengah vili sebelum masuk sirkulasi darah besar.</span>
</label>
</div>
<button onclick="cekKompleks()" class="w-full py-3 bg-slate-900 text-white font-bold text-xs rounded-xl hover:bg-slate-800 transition shadow">Kunci Analisis Pilihan 🔒</button>
<div id="pk-feedback" class="hidden p-3 rounded-xl text-center font-bold text-xs"></div>
</div>
</section>
<!-- SLIDE 9: Papan Refleksi Saintifik -->
<section class="slide flex-col gap-6 min-h-[65vh]" data-slide="9">
<h2 class="heading-font text-2xl font-bold text-center text-slate-900">📌 Jurnal Refleksi Fisiologi</h2>
<p class="text-center text-xs text-slate-500">Tuliskan kesimpulan kritis ilmiah mengenai perbedaan mendasar peran pencernaan kimiawi lambung versus usus dua belas jari!</p>
<div class="flex gap-2">
<input type="text" id="sticky-input" class="flex-1 p-3 border border-slate-300 rounded-xl text-xs focus:outline-emerald-500 bg-white" placeholder="Ketik simpulan analitismu di sini...">
<button class="px-5 py-2 bg-emerald-600 text-white rounded-xl font-bold text-xs hover:bg-emerald-700 shadow transition" onclick="addSticky()">Sematkan</button>
</div>
<div id="sticky-board" class="grid grid-cols-2 sm:grid-cols-3 gap-3 min-h-[100px] bg-slate-100 p-4 rounded-2xl border-2 border-dashed border-slate-200 shadow-inner"></div>
</section>
<!-- SLIDE 10: Umpan Balik LMS -->
<section class="slide flex-col gap-6 items-center justify-center min-h-[65vh]" data-slide="10">
<h2 class="heading-font text-2xl font-bold text-center text-slate-900">💌 Umpan Balik Kualitas Modul</h2>
<p class="text-center text-xs text-slate-500 max-w-md">Berikan masukan objektif Anda terkait kualitas rancangan presentasi, penyajian teks materi biokimia, serta fungsi simulasi interaktif game di atas.</p>
<textarea id="feedback-text" class="w-full max-w-lg p-4 border border-slate-300 rounded-xl h-24 text-xs focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white" placeholder="Tulis catatan umpan balik di sini..."></textarea>
<button class="px-6 py-3 bg-indigo-600 text-white rounded-xl font-bold text-xs hover:bg-indigo-700 transition shadow" onclick="submitFeedback()">Kirim Umpan Balik</button>
<p id="feedback-thanks" class="hidden text-emerald-600 font-bold text-sm animate-pulse">Umpan balik saintifik Anda berhasil disimpan dalam basis data kelas! 🎉</p>
</section>
</main>
<script>
// DATA KONTEN OTOMATIS AWAL
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('[data-template-id="welcome-title"]').innerHTML = "Bioreaktor Tubuh:<br><span class='text-emerald-600'>Fisiologi Pencernaan</span>";
document.querySelector('[data-template-id="welcome-subtitle"]').textContent = "Analisis Konversi Makromolekul Nutrisi Berbasis Saluran Gastrointestinal Manusia.";
document.querySelector('[data-template-id="start-btn"]').innerHTML = "Buka Modul Eksplorasi <i class='inline-block ml-1' data-lucide='play' style='width:14px;height:14px'></i>";
lucide.createIcons();
});
// Logika Inti Manajemen Navigasi Slide
let current = 1;
const total = 10;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const counter = document.getElementById('slide-counter');
function showSlide(n) {
document.querySelectorAll('.slide').forEach(s => s.classList.remove('active'));
document.querySelector(`[data-slide="${n}"]`).classList.add('active');
counter.textContent = `${n} / ${total}`;
prevBtn.disabled = n === 1;
nextBtn.disabled = n === total;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 1) showSlide(--current); });
nextBtn.addEventListener('click', () => { if (current < total) showSlide(++current); });
document.getElementById('start-btn').addEventListener('click', () => showSlide(++current));
// Game 1: Pilihan Ganda (PG) Fisiologi
function cekPG(btn, isCorrect) {
const fb = document.getElementById('pg-feedback');
fb.classList.remove('hidden');
document.querySelectorAll('#pg-area button').forEach(b => b.style.pointerEvents = 'none');
if (isCorrect) {
btn.className = "w-full py-3.5 px-4 bg-emerald-50 border-2 border-emerald-500 rounded-xl font-bold text-xs text-left text-emerald-700 shadow-sm";
fb.textContent = "🎉 ANALISIS BENAR! Pankreas mensekresikan enzim lipase untuk memecah lemak serta ion bikarbonat pencegah asidosis.";
fb.className = "mt-4 font-bold text-center text-xs text-emerald-700 bg-emerald-50 p-2.5 rounded-xl border border-emerald-200 animate-bounce";
} else {
btn.className = "w-full py-3.5 px-4 bg-rose-50 border-2 border-rose-500 rounded-xl font-bold text-xs text-left text-rose-700 shadow-sm";
fb.textContent = "❌ Analisis Kurang Tepat! Organ yang mensekresikan penetral kimus dan lipase utama adalah Kelenjar Pankreas.";
fb.className = "mt-4 font-bold text-center text-xs text-rose-600 bg-rose-50 p-2.5 rounded-xl border border-rose-200";
}
}
// Game 2: Mencocokkan Pasangan Unik/Acak Per Perangkat Siswa
let matchPairs = [];
let selected = null;
let matchCount = 0;
let gameRound = 1;
const bankSoalMatch = [
{ text: "HCl Lambung", category: "Mengaktifkan pepsinogen & bunuh kuman" },
{ text: "Cairan Empedu", category: "Mengemulsikan lemak secara mekanis" },
{ text: "Enzim Ptialin", category: "Menghidrolisis amilum menjadi maltosa" },
{ text: "Vili Usus Halus", category: "Memperluas permukaan absorbsi nutrisi" },
{ text: "Kolon (Usus Besar)", category: "Reabsorbsi air & pembusukan feses" }
];
function generateMatchPairs() {
let kocok = [...bankSoalMatch].sort(() => Math.random() - 0.5);
let dataPilihan = kocok.slice(0, 3);
const newPairs = [];
dataPilihan.forEach((item, idx) => {
const leftId = String.fromCharCode(97 + idx);
const rightId = String.fromCharCode(65 + idx);
newPairs.push(
{ id: leftId, text: item.text, match: rightId },
{ id: rightId, text: item.category, match: leftId }
);
});
return newPairs;
}
function initMatch() {
matchPairs = generateMatchPairs();
const board = document.getElementById('match-board');
board.innerHTML = '';
matchCount = 0;
selected = null;
const shuffled = matchPairs.sort(() => Math.random() - 0.5);
shuffled.forEach(p => {
const card = document.createElement('button');
card.className = 'match-card p-4 bg-white border border-slate-200 rounded-xl font-semibold text-xs text-center shadow-sm hover:border-emerald-400 text-slate-700';
card.textContent = p.text;
card.dataset.id = p.id;
card.dataset.match = p.match;
card.addEventListener('click', () => selectCard(card));
board.appendChild(card);
});
document.querySelector('[data-template-id="match-title"]').textContent = `🎮 Kompetensi 2: Hubungan Fungsi Organ (Ronde ${gameRound})`;
}
function selectCard(card) {
if (card.classList.contains('matched')) return;
if (selected && selected === card) { selected.classList.remove('selected'); selected = null; return; }
if (!selected) { card.classList.add('selected'); selected = card; return; }
if (selected.dataset.match === card.dataset.id) {
selected.classList.remove('selected');
selected.classList.add('matched');
card.classList.add('matched');
matchCount++;
if (matchCount === 3) {
const fb = document.getElementById('match-feedback');
fb.textContent = `🏆 Luar biasa! Ronde ${gameRound} terlewati. Memetakan kombinasi fungsional baru...`;
fb.className = 'text-center font-bold text-xs text-emerald-700 bg-emerald-50 p-2 rounded-xl mt-4 border border-emerald-200';
fb.classList.remove('hidden');
setTimeout(() => {
gameRound++;
document.getElementById('match-feedback').classList.add('hidden');
initMatch();
}, 2200);
}
} else {
selected.classList.remove('selected');
card.classList.add('selected');
}
selected = card.classList.contains('matched') ? null : card;
}
initMatch();
// Game 3: Pilihan Ganda Kompleks (PK)
function cekKompleks() {
const checkboxes = document.querySelectorAll('input[name="pk"]');
const fb = document.getElementById('pk-feedback');
fb.classList.remove('hidden');
let dipilih = [];
checkboxes.forEach(cb => { if (cb.checked) dipilih.push(cb.value); });
// Jawaban benar adalah A dan C (B salah karena getah usus diatur hormon sekretin dan kolesistokinin)
const benar = dipilih.includes('A') && dipilih.includes('C') && !dipilih.includes('B') && dipilih.length === 2;
if (benar) {
fb.textContent = "✅ VALID! Glukosa/asam amino masuk ke kapiler darah menuju hati, sementara asam lemak melewati pembuluh limfa lakteal di dalam vili.";
fb.className = "p-3 rounded-xl text-center font-bold text-xs text-emerald-700 bg-emerald-50 mt-4 border border-emerald-200 shadow-sm";
} else {
fb.textContent = "❌ Analisis Meloset! Kunci jawaban valid mencakup kombinasi opsi A dan C. Pelajari kembali rute mikro-transportasi limfa.";
fb.className = "p-3 rounded-xl text-center font-bold text-xs text-rose-600 bg-rose-50 mt-4 border border-rose-200 shadow-sm";
}
}
// Papan Interaktif Catatan Refleksi Mading
const colors = ['bg-amber-100','bg-emerald-100','bg-sky-100','bg-indigo-100'];
function addSticky() {
const input = document.getElementById('sticky-input');
if (!input.value.trim()) return;
const note = document.createElement('div');
note.className = `sticky-note p-4 rounded-xl shadow-sm text-xs font-bold text-slate-700 border border-slate-200/40 ${colors[Math.floor(Math.random()*colors.length)]}`;
note.textContent = input.value.trim();
document.getElementById('sticky-board').appendChild(note);
input.value = '';
}
// Submit Form Masukan
function submitFeedback() {
const text = document.getElementById('feedback-text').value.trim();
if (text) {
document.getElementById('feedback-thanks').classList.remove('hidden');
document.getElementById('feedback-text').value = '';
}
}
</script>
</body>
</html>
Kelas 8
IPA
Reproduksi
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eksplorasi Sistem Reproduksi Manusia</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=DM+Sans:wght@400;500;700&family=Fraunces:wght@700;900&display=swap" rel="stylesheet">
<style>
body { font-family: 'DM Sans', sans-serif; background-color: #fcfbf9; }
.heading-font { font-family: 'Fraunces', serif; }
.slide { display: none; }
.slide.active { display: flex; }
.match-card { transition: all 0.2s; cursor: pointer; }
.match-card.selected { transform: scale(1.03); box-shadow: 0 0 0 3px #ec4899; }
.match-card.matched { opacity: 0.5; pointer-events: none; background: #d1fae5 !important; border-color: #34d399 !important; }
.nav-btn:disabled { opacity: 0.3; pointer-events: none; }
.sticky-note { animation: popIn 0.3s ease; }
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
</style>
</head>
<body class="w-full min-h-screen flex flex-col pb-12">
<!-- Navigation Bar -->
<nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-white/90 backdrop-blur shadow-sm">
<button class="nav-btn p-2 text-sm font-bold text-rose-600 hover:bg-gray-100 rounded-lg" id="prev-btn" disabled>Kembali</button>
<span class="text-sm font-medium text-gray-600" id="slide-counter">1 / 10</span>
<button class="nav-btn p-2 text-sm font-bold text-rose-600 hover:bg-gray-100 rounded-lg" id="next-btn">Lanjut</button>
</nav>
<main class="flex-1 pt-20 pb-4 px-4 w-full max-w-3xl mx-auto">
<!-- SLIDE 1: Welcome -->
<section class="slide active flex-col items-center justify-center text-center gap-6 min-h-[70vh]" data-slide="1">
<img data-template-id="hero-img" class="w-full max-w-md h-48 object-cover rounded-2xl shadow-lg" loading="lazy">
<h1 data-template-id="welcome-title" class="heading-font text-3xl md:text-5xl font-bold mt-4 text-slate-800"></h1>
<p data-template-id="welcome-subtitle" class="text-lg md:text-xl mt-2 opacity-80 text-slate-600"></p>
<button data-template-id="start-btn" class="mt-6 px-8 py-3 bg-rose-500 text-white rounded-full text-lg font-bold shadow-lg hover:scale-105 transition-transform" id="start-btn"></button>
</section>
<!-- SLIDE 2: CP & TP -->
<section class="slide flex-col gap-4 min-h-[70vh]" data-slide="2">
<h2 class="heading-font text-2xl font-bold text-slate-800 border-b pb-2">🎯 Capaian & Tujuan Pembelajaran</h2>
<div class="bg-rose-50 border-l-4 border-rose-500 p-4 rounded-r-xl">
<h3 class="font-bold text-rose-900 text-sm uppercase tracking-wider mb-1">Capaian Pembelajaran (CP)</h3>
<p class="text-rose-950 text-sm leading-relaxed">Siswa dapat mendeskripsikan struktur dan fungsi sistem reproduksi manusia, memahami gangguan/penyakit yang berhubungan, serta pentingnya menjaga kesehatan diri sebagai perwujudan profil pelajar pancasila.</p>
</div>
<div class="bg-white border p-5 rounded-xl shadow-sm space-y-3">
<h3 class="font-bold text-slate-800 text-sm uppercase tracking-wider">Tujuan Pembelajaran (TP)</h3>
<ul class="list-disc pl-5 text-sm text-slate-600 space-y-2">
<li>Mengidentifikasi organ reproduksi pria dan wanita beserta fungsinya dengan tepat.</li>
<li>Menjelaskan tahapan siklus menstruasi pada wanita dan proses fertilisasi.</li>
<li>Menganalisis berbagai upaya preventif dalam menjaga kesehatan organ reproduksi.</li>
</ul>
</div>
</section>
<!-- SLIDE 3: Video Stimulus -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="3">
<h2 class="heading-font text-2xl font-bold text-slate-800">🎬 Video Stimulus Pembelajaran</h2>
<div class="w-full aspect-video bg-gray-900 rounded-xl overflow-hidden shadow">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/g6j3F7GZ474" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-xl">
<p class="font-bold text-amber-800 mb-1">💡 Pertanyaan Pemantik</p>
<p class="text-amber-900 text-sm mb-2">Mengapa makhluk hidup perlu bereproduksi dan bagaimana jadinya jika sistem organ tersebut mengalami kerusakan fatal?</p>
<textarea id="checkpoint-answer" class="w-full p-3 border border-amber-200 rounded-lg resize-none h-20 text-sm focus:ring-2 focus:ring-amber-400 focus:outline-none" placeholder="Tuliskan gagasan awalmu di sini..."></textarea>
<button class="mt-2 px-4 py-2 bg-amber-500 text-white text-xs font-bold rounded-lg hover:bg-amber-600 transition" onclick="document.getElementById('checkpoint-feedback').classList.remove('hidden')">Kirim Argumen</button>
<p id="checkpoint-feedback" class="hidden mt-2 text-green-700 font-medium text-xs">✅ Bagus! Pemikiran yang kritis. Reproduksi menjamin kelangsungan spesies dari kepunahan.</p>
</div>
</section>
<!-- SLIDE 4: Ringkasan Materi 1 (Pria) -->
<section class="slide flex-col gap-4 min-h-[70vh]" data-slide="4">
<h2 class="heading-font text-2xl font-bold text-slate-800 border-b pb-1">📖 Materi 1: Organ Reproduksi Pria</h2>
<p class="text-sm text-slate-600 leading-relaxed">Sistem reproduksi pria bertugas memproduksi, memelihara, dan menyalurkan sperma (sel kelamin jantan).</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
<div class="bg-blue-50/70 p-4 border border-blue-200 rounded-xl">
<h4 class="font-bold text-blue-800 mb-1">Organ Eksternal (Luar)</h4>
<ul class="list-disc pl-4 space-y-1 text-slate-700">
<li><b>Penis:</b> Alat kopulasi untuk menyalurkan sperma ke saluran kelamin wanita.</li>
<li><b>Skrotum:</b> Kantong pembungkus testis yang menjaga suhu sperma agar tetap ideal ($\pm 2^\circ\text{C}$ di bawah suhu tubuh).</li>
</ul>
</div>
<div class="bg-indigo-50/70 p-4 border border-indigo-200 rounded-xl">
<h4 class="font-bold text-indigo-800 mb-1">Organ Internal (Dalam)</h4>
<ul class="list-disc pl-4 space-y-1 text-slate-700">
<li><b>Testis:</b> Tempat produksi sel sperma dan hormon testosteron.</li>
<li><b>Epididimis:</b> Tempat penyimpanan sperma sementara hingga matang.</li>
<li><b>Vas Deferens:</b> Saluran panjang penghubung epididimis ke uretra.</li>
</ul>
</div>
</div>
</section>
<!-- SLIDE 5: Ringkasan Materi 2 (Wanita) -->
<section class="slide flex-col gap-4 min-h-[70vh]" data-slide="5">
<h2 class="heading-font text-2xl font-bold text-slate-800 border-b pb-1">📖 Materi 2: Organ Wanita & Siklus</h2>
<p class="text-sm text-slate-600 leading-relaxed">Sistem reproduksi wanita berfungsi memproduksi sel telur (ovum), sebagai tempat fertilisasi, dan memelihara janin.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
<div class="bg-pink-50/70 p-4 border border-pink-200 rounded-xl">
<h4 class="font-bold text-pink-800 mb-1">Struktur Utama</h4>
<ul class="list-disc pl-4 space-y-1 text-slate-700">
<li><b>Ovarium:</b> Kelenjar utama penghasil sel telur (ovum) dan hormon estrogen/progesteron.</li>
<li><b>Tuba Fallopi (Oviduk):</b> Saluran tempat terjadinya pembuahan (fertilisasi).</li>
<li><b>Uterus (Rahim):</b> Tempat menempel dan berkembangnya janin selama kehamilan.</li>
</ul>
</div>
<div class="bg-rose-50/70 p-4 border border-rose-200 rounded-xl">
<h4 class="font-bold text-rose-800 mb-1">Siklus Menstruasi</h4>
<p class="text-slate-700 leading-relaxed text-xs">Apabila ovum tidak dibuahi sperma, korpus luteum berhenti memproduksi estrogen & progesteron. Penurunan drastis hormon ini memicu dinding rahim (endometrium) meluruh bersama darah.</p>
</div>
</div>
</section>
<!-- SLIDE 6: Game Variasi 1 - Pilihan Ganda -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="6">
<h2 class="heading-font text-2xl font-bold text-slate-800 text-center">🎮 Game 1: Pilihan Ganda (Asah Konsep)</h2>
<div class="bg-white border p-5 rounded-2xl shadow-sm">
<p class="font-bold text-lg text-slate-800 mb-4 text-center">Dimanakah tempat pematangan sperma sementara pada organ reproduksi pria?</p>
<div class="flex flex-col gap-3" id="pg-area">
<button class="w-full py-3 px-4 bg-slate-50 border rounded-xl font-medium text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">A. Testis</button>
<button class="w-full py-3 px-4 bg-slate-50 border rounded-xl font-medium text-left hover:bg-slate-100 transition" onclick="cekPG(this, true)">B. Epididimis</button>
<button class="w-full py-3 px-4 bg-slate-50 border rounded-xl font-medium text-left hover:bg-slate-100 transition" onclick="cekPG(this, false)">C. Vas Deferens</button>
</div>
<p id="pg-feedback" class="hidden mt-4 font-bold text-center text-sm"></p>
</div>
</section>
<!-- SLIDE 7: Game Variasi 2 - Mencocokkan (Acak) -->
<section class="slide flex-col gap-4 min-h-[70vh]" data-slide="7">
<h2 data-template-id="match-title" class="heading-font text-2xl font-bold text-center text-slate-800"></h2>
<p class="text-center text-sm text-gray-600">Jodohkan nama organ dengan fungsinya yang benar secara acak!</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3" id="match-board"></div>
<p id="match-feedback" class="text-center font-bold text-sm hidden mt-4"></p>
</section>
<!-- SLIDE 8: Game Variasi 3 - Pilihan Ganda Kompleks -->
<section class="slide flex-col gap-4 min-h-[70vh]" data-slide="8">
<h2 class="heading-font text-2xl font-bold text-slate-800 text-center">🎮 Game 3: Pilihan Ganda Kompleks</h2>
<div class="bg-white border p-5 rounded-2xl shadow-sm space-y-4">
<p class="font-bold text-base text-slate-800 text-center bg-amber-50 p-2 rounded-lg border border-amber-200">Manakah dari pernyataan berikut yang BENAR mengenai fungsi hormonal dan organ wanita? (Pilih LEBIH DARI 1 jawaban!)</p>
<div class="space-y-3">
<label class="flex items-start gap-3 p-3 border rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100">
<input type="checkbox" name="pk" value="A" class="mt-1 w-4 h-4 accent-rose-500">
<span class="text-sm font-medium text-slate-700">A. Tuba Fallopi merupakan jalur utama bertemunya ovum dan sel sperma (Fertilisasi).</span>
</label>
<label class="flex items-start gap-3 p-3 border rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100">
<input type="checkbox" name="pk" value="B" class="mt-1 w-4 h-4 accent-rose-500">
<span class="text-sm font-medium text-slate-700">B. Estrogen berfungsi memicu peluruhan dinding rahim saat fase menstruasi.</span>
</label>
<label class="flex items-start gap-3 p-3 border rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100">
<input type="checkbox" name="pk" value="C" class="mt-1 w-4 h-4 accent-rose-500">
<span class="text-sm font-medium text-slate-700">C. Rahim (Uterus) memiliki lapisan endometrium untuk tempat implantasi janin.</span>
</label>
</div>
<button onclick="cekKompleks()" class="w-full py-3 bg-rose-600 text-white font-bold rounded-xl hover:bg-rose-700 transition shadow">Kunci Jawaban Siswa 🔒</button>
<div id="pk-feedback" class="hidden p-3 rounded-lg text-center font-bold text-sm"></div>
</div>
</section>
<!-- SLIDE 9: Mading Refleksi -->
<section class="slide flex-col gap-6 min-h-[70vh]" data-slide="9">
<h2 class="heading-font text-2xl font-bold text-center text-slate-800">📌 Kotak Refleksi Siswa</h2>
<p class="text-center text-sm text-gray-600">Tempelkan catatan tentang satu pemahaman penting yang kamu peroleh hari ini!</p>
<div class="flex gap-2">
<input type="text" id="sticky-input" class="flex-1 p-3 border rounded-lg text-sm focus:outline-rose-500 bg-white" placeholder="Ketik refleksimu...">
<button class="px-5 py-2 bg-rose-500 text-white rounded-lg font-bold text-sm hover:bg-rose-600 shadow" onclick="addSticky()">Tempel</button>
</div>
<div id="sticky-board" class="grid grid-cols-2 sm:grid-cols-3 gap-3 min-h-[100px] bg-slate-100 p-4 rounded-xl border border-dashed"></div>
</section>
<!-- SLIDE 10: Umpan Balik / Masukan -->
<section class="slide flex-col gap-6 items-center justify-center min-h-[70vh]" data-slide="10">
<h2 class="heading-font text-2xl font-bold text-center text-slate-800">💌 Suara & Masukan Siswa</h2>
<p class="text-center text-sm text-gray-600 max-w-md">Apakah pembelajaran materi sistem reproduksi hari ini menarik? Berikan saran atau kritik membangun untuk gurumu.</p>
<textarea id="feedback-text" class="w-full max-w-lg p-4 border-2 border-dashed border-rose-300 rounded-xl h-24 text-sm focus:ring-2 focus:ring-rose-400 focus:outline-none bg-white" placeholder="Tulis masukan di sini..."></textarea>
<button class="px-6 py-3 bg-rose-500 text-white rounded-lg font-bold text-sm hover:bg-rose-600 transition shadow" onclick="submitFeedback()">Kirim Umpan Balik</button>
<p id="feedback-thanks" class="hidden text-green-600 font-bold text-base">Terima kasih banyak, masukannya telah terekam! 🎉</p>
</section>
</main>
<script>
// DATA KONTEN OTOMATIS AWAL
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('[data-template-id="hero-img"]').src = "https://images.unsplash.com/photo-1576086213369-97a306d36557?w=600&q=80";
document.querySelector('[data-template-id="welcome-title"]').textContent = "Eksplorasi Sistem Reproduksi";
document.querySelector('[data-template-id="welcome-subtitle"]').textContent = "Memahami Struktur Organ Kehidupan dan Pentingnya Menjaga Kesehatan Diri";
document.querySelector('[data-template-id="start-btn"]').textContent = "Mulai Belajar Interaktif! 🚀";
});
// Navigasi Antar Halaman Slide
let current = 1;
const total = 10;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const counter = document.getElementById('slide-counter');
function showSlide(n) {
document.querySelectorAll('.slide').forEach(s => s.classList.remove('active'));
document.querySelector(`[data-slide="${n}"]`).classList.add('active');
counter.textContent = `${n} / ${total}`;
prevBtn.disabled = n === 1;
nextBtn.disabled = n === total;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 1) showSlide(--current); });
nextBtn.addEventListener('click', () => { if (current < total) showSlide(++current); });
document.getElementById('start-btn').addEventListener('click', () => showSlide(++current));
// Game 1: Pilihan Ganda (PG)
function cekPG(btn, isCorrect) {
const fb = document.getElementById('pg-feedback');
fb.classList.remove('hidden');
document.querySelectorAll('#pg-area button').forEach(b => b.style.pointerEvents = 'none');
if (isCorrect) {
btn.className = "w-full py-3 px-4 bg-green-100 border-2 border-green-500 rounded-xl font-bold text-left text-green-700";
fb.textContent = "🎉 LUAR BIASA BENAR! Epididimis berfungsi menyimpan sperma hingga matang.";
fb.className = "mt-4 font-bold text-center text-sm text-green-600 bg-green-50 p-2 rounded-lg";
} else {
btn.className = "w-full py-3 px-4 bg-red-100 border-2 border-red-500 rounded-xl font-bold text-left text-red-700";
fb.textContent = "❌ Masih Salah! Tempat pematangan sperma adalah Epididimis. Testis memproduksi, Vas Deferens menyalurkan.";
fb.className = "mt-4 font-bold text-center text-sm text-red-600 bg-red-50 p-2 rounded-lg";
}
}
// Game 2: Mencocokkan Pasangan Unik/Acak Per Siswa
let matchPairs = [];
let selected = null;
let matchCount = 0;
let gameRound = 1;
const bankSoalMatch = [
{ text: "Testis", category: "Produksi sperma & testosteron" },
{ text: "Ovarium", category: "Penghasil ovum & estrogen" },
{ text: "Tuba Fallopi", category: "Tempat terjadinya fertilisasi" },
{ text: "Rahim (Uterus)", category: "Tempat berkembangnya janin" },
{ text: "Skrotum", category: "Mengatur suhu organ testis" }
];
function generateMatchPairs() {
let kocok = [...bankSoalMatch].sort(() => Math.random() - 0.5);
let dataPilihan = kocok.slice(0, 3);
const newPairs = [];
dataPilihan.forEach((item, idx) => {
const leftId = String.fromCharCode(97 + idx);
const rightId = String.fromCharCode(65 + idx);
newPairs.push(
{ id: leftId, text: item.text, match: rightId },
{ id: rightId, text: item.category, match: leftId }
);
});
return newPairs;
}
function initMatch() {
matchPairs = generateMatchPairs();
const board = document.getElementById('match-board');
board.innerHTML = '';
matchCount = 0;
selected = null;
const shuffled = matchPairs.sort(() => Math.random() - 0.5);
shuffled.forEach(p => {
const card = document.createElement('button');
card.className = 'match-card p-3 bg-white border-2 border-gray-200 rounded-xl font-bold text-xs text-center shadow-sm hover:border-rose-400';
card.textContent = p.text;
card.dataset.id = p.id;
card.dataset.match = p.match;
card.addEventListener('click', () => selectCard(card));
board.appendChild(card);
});
document.querySelector('[data-template-id="match-title"]').textContent = `🎮 Game 2: Jodohkan Organ (Ronde ${gameRound})`;
}
function selectCard(card) {
if (card.classList.contains('matched')) return;
if (selected && selected === card) { selected.classList.remove('selected'); selected = null; return; }
if (!selected) { card.classList.add('selected'); selected = card; return; }
if (selected.dataset.match === card.dataset.id) {
selected.classList.remove('selected');
selected.classList.add('matched');
card.classList.add('matched');
matchCount++;
if (matchCount === 3) {
const fb = document.getElementById('match-feedback');
fb.textContent = `🏆 Sempurna! Ronde ${gameRound} Selesai. Memuat tantangan organ berikutnya...`;
fb.className = 'text-center font-bold text-sm text-green-700 bg-green-50 p-2 rounded-lg mt-4';
fb.classList.remove('hidden');
setTimeout(() => {
gameRound++;
document.getElementById('match-feedback').classList.add('hidden');
initMatch();
}, 2500);
}
} else {
selected.classList.remove('selected');
card.classList.add('selected');
}
selected = card.classList.contains('matched') ? null : card;
}
initMatch();
// Game 3: Pilihan Ganda Kompleks
function cekKompleks() {
const checkboxes = document.querySelectorAll('input[name="pk"]');
const fb = document.getElementById('pk-feedback');
fb.classList.remove('hidden');
let dipilih = [];
checkboxes.forEach(cb => { if (cb.checked) dipilih.push(cb.value); });
// Jawaban benar adalah A dan C (B salah karena peluruhan dipicu PENURUNAN hormon)
const benar = dipilih.includes('A') && dipilih.includes('C') && !dipilihanTerbanyak(dipilih, 'B') && dipilih.length === 2;
function dipilihanTerbanyak(arr, val) { return arr.indexOf(val) !== -1; }
if (benar) {
fb.textContent = "✅ TEPAT SEKALI! Pernyataan A dan C adalah fakta ilmiah yang benar. Pernyataan B salah karena menstruasi terjadi akibat penurunan drastis hormon estrogen & progesteron.";
fb.className = "p-3 rounded-lg text-center font-bold text-xs text-green-700 bg-green-50 mt-4 border border-green-200";
} else {
fb.textContent = "❌ Jawabanmu Kurang Tepat! Kunci jawaban yang benar adalah A dan C. Coba analisis lagi teori peluruhan dinding endometrium.";
fb.className = "p-3 rounded-lg text-center font-bold text-xs text-red-600 bg-red-50 mt-4 border border-red-200";
}
}
// Papan Sticky Notes Refleksi
const colors = ['bg-yellow-100','bg-pink-100','bg-blue-100','bg-green-100'];
function addSticky() {
const input = document.getElementById('sticky-input');
if (!input.value.trim()) return;
const note = document.createElement('div');
note.className = `sticky-note p-3 rounded-xl shadow-sm text-xs font-bold text-slate-800 border ${colors[Math.floor(Math.random()*colors.length)]}`;
note.textContent = input.value.trim();
document.getElementById('sticky-board').appendChild(note);
input.value = '';
}
// Fitur Submit Umpan Balik Guru
function submitFeedback() {
const text = document.getElementById('feedback-text').value.trim();
if (text) {
document.getElementById('feedback-thanks').classList.remove('hidden');
document.getElementById('feedback-text').value = '';
}
}
</script>
</body>
</html>
📊 Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Belum ada nilai siswa yang masuk. | |||||