Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 8
Bahasa Indonesia
MENULIS TEKS LAPORAN HASIL OBSERVASI - 7 Mempresentasikan Teks Laporan Hasil Observasi (LHO).
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Presentasi Teks LHO 🎤</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #ecfdf5;
background-image: radial-gradient(#a7f3d0 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: #059669 !important; color: white !important; border-bottom-color: #065f46 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="mic" 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-900 uppercase tracking-widest">Bahasa Indonesia - TP 7: Presentasi LHO</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-600 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-600 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-emerald-100 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi 7: <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Panggung Presentasi LHO</span> 🎤
</h1>
<img src="https://images.unsplash.com/photo-1475721027785-f74eccf877e2?auto=format&fit=crop&w=800&q=80" alt="Presentasi" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-900 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-teal-500"></i> Tujuan Misi Kita:</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Menyajikan teks LHO secara <span class="text-emerald-600">lisan di depan kelas</span> dengan artikulasi jelas.</li>
<li>Memberikan tanggapan, kritik, atau saran terhadap presentasi kelompok lain.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap mengambil alih panggung? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Kiat Presentasi Hebat -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Kiat Publik Speaking ✨</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana cara membawakan hasil observasi agar menarik perhatian audiens?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md">
<div class="bg-emerald-600 text-white w-10 h-10 rounded-xl flex items-center justify-center font-black text-xl mb-3">🗣️</div>
<h3 class="font-black text-emerald-900 text-xl mb-2">Suara Jelas</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">Gunakan volume suara yang lantang, intonasi yang pas, dan tempo bicara yang tidak terlalu cepat.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-md">
<div class="bg-teal-600 text-white w-10 h-10 rounded-xl flex items-center justify-center font-black text-xl mb-3">👁️</div>
<h3 class="font-black text-teal-900 text-xl mb-2">Kontak Mata</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">Jangan hanya menatap teks atau lantai; arahkan pandangan ke guru dan teman-teman sekelas.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-green-200 shadow-md">
<div class="bg-green-600 text-white w-10 h-10 rounded-xl flex items-center justify-center font-black text-xl mb-3">📊</div>
<h3 class="font-black text-green-900 text-xl mb-2">Media Pendukung</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">Gunakan kartu catatan poin penting atau salindia (slide) agar laporan lebih mudah disimak.</p>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Teknik Presentasi) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-emerald-600">Sikap Presentasi</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-900 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<div id="q1-teks" class="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-left font-bold text-slate-700 mb-6"></div>
<p class="text-lg font-bold text-slate-500 mb-4">Manakah sikap yang paling tepat saat menyampaikan laporan hasil observasi?</p>
<div id="q1-options" class="grid grid-cols-1 gap-3 max-w-lg 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 4: Memberikan Tanggapan & Tanya Jawab -->
<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">Seni Menanggapi Laporan 💬</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana cara memberikan masukan yang santun saat kelompok lain selesai presentasi?</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-teal-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<div class="bg-teal-50 p-6 rounded-2xl border-2 border-teal-200 space-y-3">
<h3 class="text-xl font-black text-teal-900 flex items-center gap-2"><i data-lucide="check-circle" class="text-teal-600"></i> Etika Tanya Jawab:</h3>
<ul class="list-disc list-inside space-y-2 text-slate-700 font-bold">
<li>Mengangkat tangan terlebih dahulu dan berbicara dengan santun.</li>
<li>Memberikan pujian atas kelebihan laporan sebelum mengajukan pertanyaan/kritik.</li>
<li>Menyampaikan saran perbaikan secara objektif dan membangun.</li>
</ul>
</div>
</div>
<img src="https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2" alt="Diskusi">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Etika Tanggapan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-teal-600">Kritik & Saran Santun</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-teal-100 border-2 border-teal-400 px-6 py-2 rounded-full">
<span class="font-black text-teal-900 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center flex flex-col items-center">
<p class="text-lg font-bold text-slate-500 mb-4">Manakah kalimat tanggapan yang paling santun dan membangun?</p>
<div id="q2-text" class="text-xl text-box text-teal-900 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 italic w-full">?</div>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full max-w-xl mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-xl mx-auto py-4 bg-teal-600 text-white rounded-2xl font-black text-xl hover:bg-teal-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: Masalah Kontekstual -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-4xl font-black text-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Dunia Nyata 🏙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengapa kemampuan berbicara di depan umum sangat penting?</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1515187029135-18ee286d815b?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Diskusi Kelas">
<h4 class="font-black text-blue-800 text-xl mb-2">Kasus 1: Kepercayaan Diri di Kelas</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Berbicara di depan audiens melatih mental, menghilangkan rasa gugup, dan membuat gagasan ilmiahmu dapat dipahami orang lain dengan jelas.
</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Kerja Sama">
<h4 class="font-black text-emerald-800 text-xl mb-2">Kasus 2: Diskusi Kelompok Produktif</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">
Tanggapan aktif dari teman sekelas membantu menyempurnakan data pengamatan yang mungkin terlewat oleh kelompok penyaji.
</p>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 (Uji Evaluasi Presentasi) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-blue-600">Uji Etika Berbicara</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-900 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl">
<p class="text-lg font-bold text-slate-500 mb-4 text-center border-b-2 border-dashed pb-4">Baca pertanyaan berikut:</p>
<p id="q3-text" class="text-xl font-bold text-slate-800 mb-8 leading-relaxed text-center"></p>
<div id="q3-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition block">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: RACING GAME KELOMPOK (Balap Presentasi) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600 tracking-wide uppercase">🏁 Balap Panggung Presentasi 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat, angkat tangan, dan kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-emerald-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Soal Rebutan Saat Ini ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#065f46] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Siapa yang menjawab benar paling cepat?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-emerald-400 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" 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">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 9: Refleksi Siswa -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana petualangan Misi 7 hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Gampang!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Lumayan</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Susah Banget</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian mana dari presentasi yang paling membuatmu deg-degan?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-emerald-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Latihan Soal Evaluasi & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi 7</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan pemahamanmu tentang teknik presentasi dan tanggapan LHO melalui 5 soal 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-900 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-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-emerald-900 mb-2">Misi 7 Berhasil!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir Misi: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-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 markas (Sistem Guru).</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-emerald-600 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Energi Tersisa (Pemahaman)</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-600">
<option value="100">100% - Siap Tampil Presentasi LHO!</option>
<option value="75">75% - Paham Sebagian Besar</option>
<option value="50">50% - Butuh Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-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 Laporan Misi 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-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 shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Auto-Quiz 1 (Teknik Presentasi)
let countQ1 = 0;
const q1Bank = [
{
teks: "Saat menyampaikan laporan hasil observasi di depan kelas, sikap tubuh dan suara yang baik ditunjukkan dengan...",
ans: "Berdiri tegak, bersuara lantang, dan menatap audiens",
ops: ["Berdiri tegak, bersuara lantang, dan menatap audiens", "Membaca teks dengan suara pelan sambil menunduk"],
exp: "Kontak mata dan suara yang lantang membuat presentasi mudah disimak oleh audiens."
}
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-teks').innerText = currentQ1Data.teks;
let options = shuffle([...currentQ1Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ1(this, '${opt}' === '${currentQ1Data.ans}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q1-options').innerHTML = optHtml;
}
function checkQ1(btn, isCorrect) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Etika Tanggapan)
let countQ2 = 0;
const q2Bank = [
{
text: "Manakah contoh kalimat tanggapan atau saran yang santun setelah kelompok lain selesai presentasi?",
ans: "Presentasi kelompok kalian sudah sangat jelas. Namun, alangkah baiknya jika data jumlah objek diperjelas.",
ops: ["Presentasi kelompok kalian sudah sangat jelas. Namun, alangkah baiknya jika data jumlah objek diperjelas.", "Laporan kalian jelek dan tidak jelas sama sekali!"]
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-text').innerText = currentQ2Data.text;
let options = shuffle([...currentQ2Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ2(this, '${opt}' === '${currentQ2Data.ans}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>Kritik atau saran disampaikan secara santun dan membangun.`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>Tanggapan yang baik harus bersifat membangun dan sopan.`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Auto-Quiz 3 (Uji Evaluasi Presentasi)
let countQ3 = 0;
const q3Bank = [
{
q: "Apa manfaat utama dari sesi tanya jawab setelah presentasi teks LHO selesai?",
ops: ["Mengklarifikasi informasi dan menambah wawasan dari sudut pandang lain", "Membuat waktu pelajaran cepat habis", "Menjatuhkan mental kelompok penyaji"],
ans: "Mengklarifikasi informasi dan menambah wawasan dari sudut pandang lain",
exp: "Sesi tanya jawab membantu memperjelas data dan memperkaya pemahaman materi."
}
];
let currentQ3Data = null;
function generateQ3() {
document.getElementById('q3-feedback').classList.add('hidden');
document.getElementById('q3-next-btn').classList.add('hidden');
currentQ3Data = q3Bank[countQ3 % q3Bank.length];
document.getElementById('q3-text').innerText = currentQ3Data.q;
let options = shuffle([...currentQ3Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ3(this, '${opt}' === '${currentQ3Data.ans}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q3-options').innerHTML = optHtml;
}
function checkQ3(btn, isCorrect) {
const btns = document.getElementById('q3-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q3-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ3Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns.forEach(b => { if(b.getAttribute('onclick').includes('true')) b.classList.add('btn-correct'); });
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ3Data.exp}`;
}
countQ3++;
document.getElementById('count-q3').innerText = countQ3;
document.getElementById('q3-next-btn').classList.remove('hidden');
}
generateQ3();
// Racing Game
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Penyampaian laporan di depan kelas secara lisan disebut...", a: "PRESENTASI" },
{ q: "Volume suara saat berbicara di depan umum harus...", a: "LANTANG" },
{ q: "Sikap mata saat presentasi sebaiknya menatap...", a: "AUDIENS" },
{ q: "Tanggapan atau masukan yang diberikan harus bersifat...", a: "MEMBANGUN" },
{ q: "Alat bantu visual yang sering digunakan saat presentasi adalah...", a: "SLIDE" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerText = rq.q;
document.getElementById('race-ans-text').innerText = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-green-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Gampang')) btn.classList.add('border-green-400', 'bg-green-50');
else if(btn.innerText.includes('Lumayan')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi
const evaluasiBank = [
{
q: "Penyampaian laporan hasil observasi secara lisan di depan guru dan teman sekelas disebut...",
options: ["Presentasi", "Membaca senyap", "Menulis cepat", "Menghafal puisi"],
a: 0,
exp: "Presentasi adalah kegiatan menyajikan informasi secara lisan di hadapan audiens."
},
{
q: "Hal utama yang perlu diperhatikan terkait teknik vokal saat melakukan presentasi adalah...",
options: ["Volume suara lantang dan artikulasi jelas", "Berbicara sekecil mungkin agar tidak didengar", "Menggunakan bahasa gaul", "Berbicara sangat cepat"],
a: 0,
exp: "Suara yang lantang dan artikulasi jelas memastikan seluruh audiens memahami isi laporan."
},
{
q: "Bagaimana sikap kontak mata (eye contact) yang benar ketika mempresentasikan laporan?",
options: ["Menatap audiens secara bergantian untuk membangun interaksi", "Hanya menatap lantai", "Menutup mata sepanjang presentasi", "Menatap satu titik di pojok ruangan"],
a: 0,
exp: "Kontak mata dengan audiens menunjukkan rasa percaya diri dan keterlibatan."
},
{
q: "Apabila kelompok lain selesai presentasi, sikap kita sebagai audiens yang baik adalah...",
options: ["Menyimak dengan baik dan memberikan tanggapan atau saran yang santun", "Mengabaikan dan tidur", "Berbicara sendiri dengan teman", "Menertawakan jika ada kesalahan"],
a: 0,
exp: "Audiens yang baik menyimak materi dan memberikan masukan konstruktif."
},
{
q: "Tujuan dari memberikan saran atau kritik saat sesi tanggapan adalah...",
options: ["Membantu menyempurnakan hasil laporan kelompok penyaji", "Mencari kesalahan untuk menjatuhkan teman", "Membuat suasana kelas gaduh", "Menambah durasi pelajaran"],
a: 0,
exp: "Kritik dan saran dalam forum ilmiah bertujuan memperbaiki dan melengkapi informasi."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-emerald-50 hover:border-emerald-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Misi Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Misi 7: " + refleksi,
strategi: "Evaluasi Part 7: Presentasi Teks LHO"
}, "*");
} else {
alert("Laporan Misi Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 8
Bahasa Indonesia
Mengolah Teks Laporan Hasil Observasi
<!doctype html>
<html lang="id">
<head>
<script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260715-05-d05fd84"}');</script>
<script src="/_sdk/f432b76fb310b513.telemetry_sdk.js" integrity="sha512-9FJQ55EKmmqhyyik8BhrMVfm0+iYYfb8uOlRsjtkxJMEI97qOVEI4PnHohDjQAtvAep0IOEpdQ64eki0sz62ug=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Pembelajaran Teks LHO</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: #f8fafc; color: #334155; }
.heading-font { font-family: 'Fraunces', serif; color: #0f172a; }
.slide { display: none; }
.slide.active { display: flex; }
.option-btn { transition: all 0.2s; }
.option-btn:hover { transform: scale(1.02); }
.option-btn.correct { background: #22c55e !important; color: white !important; border-color: #16a34a !important; }
.option-btn.incorrect { background: #ef4444 !important; color: white !important; border-color: #dc2626 !important; }
.progress-fill { transition: width 0.4s ease; }
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.struktur-item { cursor: pointer; transition: all 0.2s; }
.struktur-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.struktur-item.placed { opacity: 0.5; pointer-events: none; background-color: #f1f5f9; }
.drop-zone { min-height: 56px; border: 2px dashed #cbd5e1; border-radius: 12px; transition: all 0.2s; cursor: pointer; }
.drop-zone:hover { background-color: #f8fafc; }
.drop-zone.filled { border-color: #10b981; background: #ecfdf5; border-style: solid; }
.canva-card { background: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
</style>
</head>
<body class="min-h-screen flex flex-col pb-16">
<!-- Progress Bar -->
<div class="w-full h-2 bg-gray-200 fixed top-0 left-0 z-50">
<div id="progress-bar" class="progress-fill h-full bg-gradient-to-r from-emerald-400 to-teal-600" style="width: 8.3%"></div>
</div>
<!-- Slide Container -->
<main class="flex-1 w-full flex items-center justify-center p-4 pt-8">
<!-- Slide 1: Apersepsi / Cover -->
<section class="slide active fade-in flex-col items-center max-w-4xl w-full" id="slide-1">
<div class="text-center mb-8">
<span class="text-5xl mb-4 block">🔍</span>
<h1 class="heading-font text-3xl md:text-5xl font-black mb-4 tracking-tight">Menjelajahi Teks LHO</h1>
<p class="text-lg opacity-80 max-w-2xl mx-auto">Mari belajar mengamati, mencatat, dan melaporkan sesuatu secara objektif melalui Teks Laporan Hasil Observasi!</p>
</div>
<div class="grid md:grid-cols-2 gap-6 w-full">
<div class="rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<img src="https://images.unsplash.com/photo-1544365558-35aa4afcf11f?auto=format&fit=crop&w=800&q=80" alt="Observasi" class="w-full h-64 object-cover">
</div>
<div class="canva-card rounded-2xl p-6 flex flex-col justify-center bg-white border-t-4 border-teal-500">
<h3 class="text-xl font-bold mb-2 text-teal-700">Apersepsi</h3>
<p class="text-lg font-medium mb-4">Pernahkah kamu memperhatikan detail bentuk, rasa, dan bahan jajanan favoritmu lalu menceritakannya ke orang lain?</p>
<p class="text-sm opacity-70 bg-teal-50 p-3 rounded-lg border border-teal-100">💡 <strong>Hint:</strong> Mengamati dengan saksama adalah langkah pertama untuk membuat teks Laporan Hasil Observasi (LHO) yang baik!</p>
</div>
</div>
</section>
<!-- Slide 2: Asesmen Awal -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-2">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Uji Pemahaman Awal</h2>
<p class="text-center mb-6 text-gray-500">Teks LHO harus berisi <strong>FAKTA</strong>. Coba tentukan mana fakta dan opini di bawah ini!</p>
<div class="w-full space-y-4" id="asesmen-awal-container">
<div class="space-y-3" id="fakta-opini-quiz">
<div class="p-5 rounded-xl bg-white shadow-sm border border-gray-100">
<p class="font-medium mb-3">1. "Kucing memiliki empat kaki, berbulu, dan termasuk hewan mamalia."</p>
<div class="flex gap-3">
<button class="option-btn px-6 py-2 rounded-lg bg-teal-50 border border-teal-200 font-medium text-teal-700 hover:bg-teal-100" onclick="checkFaktaOpini(this, true)">Fakta</button>
<button class="option-btn px-6 py-2 rounded-lg bg-orange-50 border border-orange-200 font-medium text-orange-700 hover:bg-orange-100" onclick="checkFaktaOpini(this, false)">Opini</button>
</div>
</div>
<div class="p-5 rounded-xl bg-white shadow-sm border border-gray-100">
<p class="font-medium mb-3">2. "Bunga mawar merah adalah bunga yang paling indah di taman itu."</p>
<div class="flex gap-3">
<button class="option-btn px-6 py-2 rounded-lg bg-teal-50 border border-teal-200 font-medium text-teal-700 hover:bg-teal-100" onclick="checkFaktaOpini(this, false)">Fakta</button>
<button class="option-btn px-6 py-2 rounded-lg bg-orange-50 border border-orange-200 font-medium text-orange-700 hover:bg-orange-100" onclick="checkFaktaOpini(this, true)">Opini</button>
</div>
</div>
<div class="p-5 rounded-xl bg-white shadow-sm border border-gray-100">
<p class="font-medium mb-3">3. "Tanaman lidah mertua dapat menyerap polutan berbahaya di udara."</p>
<div class="flex gap-3">
<button class="option-btn px-6 py-2 rounded-lg bg-teal-50 border border-teal-200 font-medium text-teal-700 hover:bg-teal-100" onclick="checkFaktaOpini(this, true)">Fakta</button>
<button class="option-btn px-6 py-2 rounded-lg bg-orange-50 border border-orange-200 font-medium text-orange-700 hover:bg-orange-100" onclick="checkFaktaOpini(this, false)">Opini</button>
</div>
</div>
</div>
</div>
</section>
<!-- Slide 3: Materi - Struktur LHO -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-3">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Struktur Teks LHO</h2>
<p class="text-center mb-8 opacity-70">Teks Laporan Hasil Observasi memiliki 3 bagian utama yang harus urut.</p>
<div class="grid md:grid-cols-3 gap-6 w-full">
<div class="canva-card rounded-2xl p-6 text-center border-t-4 border-emerald-400">
<div class="text-4xl mb-3">1️⃣</div>
<h3 class="font-bold mb-2 text-lg">Pernyataan Umum</h3>
<p class="text-sm text-gray-600">Berisi pembuka, pengertian, atau klasifikasi umum tentang objek yang diamati. (Misal: "Sapi adalah mamalia berkaki empat...")</p>
</div>
<div class="canva-card rounded-2xl p-6 text-center border-t-4 border-blue-400">
<div class="text-4xl mb-3">2️⃣</div>
<h3 class="font-bold mb-2 text-lg">Deskripsi Bagian</h3>
<p class="text-sm text-gray-600">Berisi penjelasan detail atau rincian ciri-ciri fisik, bagian, atau perilaku objek. (Misal: "Bulu sapi bertekstur halus, tanduknya...")</p>
</div>
<div class="canva-card rounded-2xl p-6 text-center border-t-4 border-purple-400">
<div class="text-4xl mb-3">3️⃣</div>
<h3 class="font-bold mb-2 text-lg">Deskripsi Manfaat</h3>
<p class="text-sm text-gray-600">Berisi penjelasan tentang kegunaan, manfaat, atau fungsi dari objek tersebut bagi kehidupan.</p>
</div>
</div>
</section>
<!-- Slide 4: Contoh Teks LHO -->
<section class="slide fade-in flex-col items-center max-w-5xl w-full" id="slide-4">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-6 text-center">Analisis Struktur Teks LHO</h2>
<div class="w-full grid md:grid-cols-5 gap-6">
<div class="md:col-span-2 rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?auto=format&fit=crop&w=800&q=80" alt="Kucing" class="w-full h-full object-cover min-h-[300px]">
</div>
<div class="md:col-span-3 space-y-4 flex flex-col justify-center">
<div class="canva-card rounded-xl p-4 border-l-4 border-emerald-400">
<span class="text-xs font-bold uppercase tracking-wide text-emerald-600 bg-emerald-50 px-2 py-1 rounded">Pernyataan Umum</span>
<p class="text-sm mt-2 text-gray-700">Kucing (Felis catus) adalah hewan mamalia karnivora dari keluarga Felidae. Kucing telah berbaur dengan kehidupan manusia sejak ribuan tahun lalu.</p>
</div>
<div class="canva-card rounded-xl p-4 border-l-4 border-blue-400">
<span class="text-xs font-bold uppercase tracking-wide text-blue-600 bg-blue-50 px-2 py-1 rounded">Deskripsi Bagian</span>
<p class="text-sm mt-2 text-gray-700">Kucing memiliki mata dengan penglihatan malam yang sangat tajam, cakar yang dapat ditarik masuk, pendengaran yang peka, serta kumis (misai) yang berfungsi sebagai alat sensor lingkungan.</p>
</div>
<div class="canva-card rounded-xl p-4 border-l-4 border-purple-400">
<span class="text-xs font-bold uppercase tracking-wide text-purple-600 bg-purple-50 px-2 py-1 rounded">Deskripsi Manfaat</span>
<p class="text-sm mt-2 text-gray-700">Secara umum, kucing sering dipelihara manusia karena kemampuannya memburu hama seperti tikus, serta kehadirannya dapat membantu menurunkan tingkat stres pada manusia.</p>
</div>
</div>
</div>
</section>
<!-- Slide 5: Ciri Kebahasaan -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-5">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center">Ciri Kebahasaan Teks LHO</h2>
<div class="grid md:grid-cols-3 gap-6 w-full">
<div class="canva-card rounded-2xl p-6 bg-white border border-gray-100">
<div class="text-4xl mb-4 text-center">🔬</div>
<h3 class="font-bold mb-2 text-center text-lg text-rose-600">Istilah Ilmiah/Teknis</h3>
<p class="text-sm text-gray-600 mb-3 text-center">Menggunakan kata-kata teknis sesuai dengan bidang ilmu objek yang diamati.</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm italic text-gray-700">Contoh: Karnivora, fotosintesis, anatomi, mamalia, spesies.</p>
</div>
</div>
<div class="canva-card rounded-2xl p-6 bg-white border border-gray-100">
<div class="text-4xl mb-4 text-center">📖</div>
<h3 class="font-bold mb-2 text-center text-lg text-indigo-600">Kalimat Definisi & Deskripsi</h3>
<p class="text-sm text-gray-600 mb-3 text-center">Menggunakan kata kopula (adalah, merupakan) dan kalimat rincian fisik.</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm italic text-gray-700">Contoh: "Harimau <strong>merupakan</strong> hewan buas." "Bulunya <strong>berwarna</strong> belang emas."</p>
</div>
</div>
<div class="canva-card rounded-2xl p-6 bg-white border border-gray-100">
<div class="text-4xl mb-4 text-center">🎯</div>
<h3 class="font-bold mb-2 text-center text-lg text-amber-600">Objektif & Faktual</h3>
<p class="text-sm text-gray-600 mb-3 text-center">Data disampaikan berdasarkan fakta, bukan imajinasi atau opini pribadi.</p>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm italic text-gray-700">Hindari: "Bunga ini <strong>sangat cantik</strong>." <br>Gunakan: "Bunga ini <strong>berwarna merah cerah</strong>."</p>
</div>
</div>
</div>
</section>
<!-- Slide 6: Aktivitas - Jodohkan Struktur -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-6">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Latihan: Susun Struktur LHO!</h2>
<p class="text-center mb-8 text-gray-500"><strong>Cara bermain:</strong> Klik salah satu teks di sebelah kiri, lalu klik kotak (zona) yang tepat di sebelah kanan untuk menjodohkannya.</p>
<div class="w-full grid md:grid-cols-2 gap-8">
<!-- Pilihan Teks -->
<div class="space-y-4" id="struktur-options">
<div class="struktur-item p-4 rounded-xl bg-white shadow-md border-2 border-transparent text-sm text-gray-700" data-struktur="pu" onclick="selectStruktur(this)">
"Tanaman lidah mertua (Sansevieria) adalah tanaman hias asli daerah tropis yang sangat populer di Indonesia."
</div>
<div class="struktur-item p-4 rounded-xl bg-white shadow-md border-2 border-transparent text-sm text-gray-700" data-struktur="dm" onclick="selectStruktur(this)">
"Tanaman ini sangat bermanfaat karena mampu menyerap polutan berbahaya di udara seperti formaldehida dan benzena."
</div>
<div class="struktur-item p-4 rounded-xl bg-white shadow-md border-2 border-transparent text-sm text-gray-700" data-struktur="db" onclick="selectStruktur(this)">
"Daunnya keras, berbentuk pedang, tegak ke atas, berwarna hijau tua dengan corak garis kuning di bagian pinggirnya."
</div>
</div>
<!-- Target Area -->
<div class="space-y-4">
<div class="drop-zone p-4 flex flex-col gap-2 justify-center" data-target="pu" onclick="dropStruktur('pu')">
<span class="text-xs font-bold bg-emerald-100 text-emerald-700 px-3 py-1 rounded w-fit inline-block">1. Pernyataan Umum</span>
<span class="drop-text text-sm text-gray-400">Klik teks di kiri, lalu klik di sini...</span>
</div>
<div class="drop-zone p-4 flex flex-col gap-2 justify-center" data-target="db" onclick="dropStruktur('db')">
<span class="text-xs font-bold bg-blue-100 text-blue-700 px-3 py-1 rounded w-fit inline-block">2. Deskripsi Bagian</span>
<span class="drop-text text-sm text-gray-400">Klik teks di kiri, lalu klik di sini...</span>
</div>
<div class="drop-zone p-4 flex flex-col gap-2 justify-center" data-target="dm" onclick="dropStruktur('dm')">
<span class="text-xs font-bold bg-purple-100 text-purple-700 px-3 py-1 rounded w-fit inline-block">3. Deskripsi Manfaat</span>
<span class="drop-text text-sm text-gray-400">Klik teks di kiri, lalu klik di sini...</span>
</div>
</div>
</div>
<div id="match-feedback" class="mt-6 p-3 bg-emerald-50 rounded-lg text-center font-bold text-lg hidden w-full"></div>
</section>
<!-- Slide 7: Mengolah Data Observasi -->
<section class="slide fade-in flex-col items-center max-w-5xl w-full" id="slide-7">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-2 text-center">Dari Data Menjadi Teks</h2>
<p class="text-center mb-6 text-gray-500">Coba ubah poin-poin hasil observasi di bawah ini menjadi sebuah paragraf teks LHO utuh.</p>
<div class="w-full grid md:grid-cols-5 gap-8">
<div class="md:col-span-2">
<img src="https://images.unsplash.com/photo-1620023604082-fce47f259740?auto=format&fit=crop&w=800&q=80" alt="Putri Malu" class="w-full h-40 object-cover rounded-2xl mb-4 border-4 border-white shadow-md">
<div class="canva-card rounded-xl p-5 bg-white border border-gray-100">
<h4 class="font-bold mb-3 text-teal-700 flex items-center gap-2">📋 Data Observasi:</h4>
<ul class="text-sm space-y-2 list-disc pl-5 text-gray-700">
<li><strong>Objek:</strong> Tanaman Putri Malu (Mimosa pudica)</li>
<li><strong>Daun:</strong> kecil, majemuk, langsung menutup jika disentuh</li>
<li><strong>Batang:</strong> menjalar, memiliki duri-duri halus</li>
<li><strong>Habitat:</strong> tumbuh liar di halaman, butuh tanah lembab</li>
<li><strong>Manfaat:</strong> sering diolah sebagai obat tradisional insomnia</li>
</ul>
</div>
</div>
<div class="md:col-span-3 flex flex-col">
<h4 class="font-bold mb-3 text-gray-800">✍️ Susun paragraf LHO-mu:</h4>
<textarea id="olah-textarea" class="w-full flex-1 min-h-[200px] p-4 rounded-xl border-2 border-gray-200 focus:border-teal-400 focus:ring-4 focus:ring-teal-50 focus:outline-none text-sm resize-none" placeholder="Contoh: Putri malu (Mimosa pudica) adalah tanaman perdu liar yang sering ditemukan di..."></textarea>
<div class="flex justify-between items-center mt-4">
<div id="olah-feedback" class="text-sm font-medium hidden"></div>
<button class="px-6 py-2 bg-teal-500 text-white rounded-lg font-medium hover:bg-teal-600 transition shadow-sm ml-auto" onclick="showOlahFeedback()">Cek Tulisan Saya</button>
</div>
</div>
</div>
</section>
<!-- Slide 8: Kuis Interaktif -->
<section class="slide fade-in flex-col items-center max-w-3xl w-full" id="slide-8">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center text-teal-700">Kuis Evaluasi</h2>
<div class="w-full canva-card bg-white p-8 rounded-2xl border border-gray-100" id="kuis-container">
<div id="kuis-question" class="mb-6 pb-4 border-b border-gray-100">
<p class="font-bold text-xl text-gray-800" id="kuis-q-text"></p>
</div>
<div id="kuis-options" class="space-y-3"></div>
<div class="flex justify-between items-center mt-6 h-10">
<div id="kuis-result" class="font-bold text-lg hidden"></div>
<button id="kuis-next" class="px-6 py-2 bg-slate-800 text-white rounded-lg font-medium hover:bg-slate-700 transition hidden ml-auto" onclick="nextKuis()">Selanjutnya →</button>
</div>
</div>
<div id="kuis-score" class="mt-6 text-center hidden w-full canva-card p-10 rounded-2xl bg-teal-50 border border-teal-100">
<div class="text-5xl mb-4">🏆</div>
<p class="text-3xl font-bold heading-font text-teal-800"></p>
<p class="mt-2 text-teal-600">Kerja bagus menyelesaikan kuis ini!</p>
</div>
</section>
<!-- Slide 9: Asesmen Akhir -->
<section class="slide fade-in flex-col items-center max-w-3xl w-full" id="slide-9">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center text-indigo-700">Asesmen Akhir</h2>
<div class="w-full canva-card bg-white p-8 rounded-2xl border border-gray-100" id="asesmen-akhir-container">
<div id="aa-question" class="mb-6 pb-4 border-b border-gray-100">
<p class="font-bold text-xl text-gray-800" id="aa-q-text"></p>
</div>
<div id="aa-options" class="space-y-3"></div>
<div class="flex justify-between items-center mt-6 h-10">
<div id="aa-result" class="font-bold text-lg hidden"></div>
<button id="aa-next" class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition hidden ml-auto" onclick="nextAA()">Selanjutnya →</button>
</div>
</div>
<div id="aa-score" class="mt-6 text-center hidden w-full canva-card p-10 rounded-2xl bg-indigo-50 border border-indigo-100">
<div class="text-5xl mb-4">💯</div>
<p class="text-3xl font-bold heading-font text-indigo-800"></p>
<p class="mt-2 text-indigo-600">Kamu telah menyelesaikan seluruh asesmen!</p>
</div>
</section>
<!-- Slide 10: Refleksi -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-10">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-8 text-center">Refleksi Belajar</h2>
<div class="w-full grid md:grid-cols-2 gap-8 items-center">
<div class="rounded-2xl overflow-hidden shadow-lg border-4 border-white">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=800&q=80" alt="Refleksi" class="w-full h-64 object-cover">
</div>
<div class="space-y-4 canva-card p-6 bg-white rounded-2xl border-t-4 border-amber-400">
<h3 class="font-bold text-lg text-gray-800">Mari Berbagi!</h3>
<p class="text-gray-600 font-medium text-sm">Apa hal baru yang paling menarik yang kamu pelajari tentang Teks LHO hari ini?</p>
<textarea id="refleksi-textarea" class="w-full h-32 p-3 rounded-xl border-2 border-gray-200 focus:border-amber-400 focus:outline-none text-sm resize-none" placeholder="Tuliskan kesan, pendapat, atau kesimpulanmu di sini..."></textarea>
<button class="w-full py-3 bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-lg font-bold hover:opacity-90 transition shadow-sm" onclick="submitRefleksi()">Kirim Refleksi ✨</button>
<div id="refleksi-feedback" class="p-3 bg-green-50 text-sm text-green-700 font-bold rounded-lg text-center hidden border border-green-200">
Terima kasih! Refleksimu sudah tersimpan dengan baik 🎉
</div>
</div>
</div>
</section>
<!-- Slide 11: Panduan Guru -->
<section class="slide fade-in flex-col items-center max-w-4xl w-full" id="slide-11">
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-6 text-center text-slate-700">Panduan Mengajar Guru</h2>
<div class="w-full grid md:grid-cols-3 gap-6">
<div class="col-span-1 rounded-2xl overflow-hidden shadow-md">
<img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&w=600&q=80" alt="Guru" class="w-full h-full object-cover min-h-[250px]">
</div>
<div class="col-span-2 canva-card rounded-2xl p-6 bg-white space-y-4 border border-slate-100">
<div class="p-3 bg-slate-50 rounded-lg">
<h4 class="font-bold text-emerald-700 flex items-center gap-2"><span>📌</span> Apersepsi (Slide 1-2):</h4>
<p class="text-sm text-slate-600 mt-1">Pancing siswa berbagi pengalaman mengamati objek di sekitar (misal: kantin/taman). Tekankan perbedaan antara fakta (yang bisa dibuktikan) dan opini (pendapat).</p>
</div>
<div class="p-3 bg-slate-50 rounded-lg">
<h4 class="font-bold text-blue-700 flex items-center gap-2"><span>📌</span> Aktivitas Struktur (Slide 6):</h4>
<p class="text-sm text-slate-600 mt-1">Beri waktu 3-5 menit untuk interaksi. Dorong siswa berdiskusi dengan teman sebangku sebelum menjodohkan teks.</p>
</div>
<div class="p-3 bg-slate-50 rounded-lg">
<h4 class="font-bold text-purple-700 flex items-center gap-2"><span>📌</span> Mengolah Data (Slide 7):</h4>
<p class="text-sm text-slate-600 mt-1">Fokus pada bagaimana siswa menggunakan kopula ("adalah/merupakan") dan menghubungkan fakta menjadi paragraf kohesif tanpa memasukkan opini pribadi.</p>
</div>
</div>
</div>
</section>
<!-- Slide 12: Penutup -->
<section class="slide fade-in flex-col items-center justify-center max-w-4xl w-full text-center h-[60vh]" id="slide-12">
<div class="text-7xl mb-6 drop-shadow-sm">🎓</div>
<h2 class="heading-font text-4xl md:text-5xl font-black mb-4 text-emerald-600">Kamu Luar Biasa!</h2>
<p class="text-xl opacity-80 mb-8 max-w-lg mx-auto text-slate-600">Kamu telah menyelesaikan seluruh materi Teks Laporan Hasil Observasi (LHO) hari ini dengan sangat baik.</p>
<div class="bg-white p-6 rounded-2xl shadow-lg border-2 border-emerald-100 max-w-md mx-auto">
<p class="font-bold text-slate-800">"Teruslah mengamati dunia di sekitarmu dengan cermat layaknya mata seorang ilmuwan sejati!"</p>
</div>
</section>
</main>
<!-- Navigation -->
<nav class="fixed bottom-0 left-0 w-full bg-white/95 backdrop-blur-md border-t p-4 flex justify-between items-center z-50 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
<button id="btn-prev" class="px-5 py-2 rounded-lg border-2 border-gray-200 text-gray-600 font-bold hover:bg-gray-50 transition disabled:opacity-30 disabled:cursor-not-allowed" onclick="prevSlide()" disabled> ← Sebelumnya </button>
<span id="slide-counter" class="text-sm font-bold text-gray-500 bg-gray-100 px-4 py-2 rounded-full">1 / 12</span>
<button id="btn-next" class="px-5 py-2 rounded-lg bg-teal-500 text-white font-bold hover:bg-teal-600 shadow-sm transition" onclick="nextSlide()"> Selanjutnya → </button>
</nav>
<script src="/_sdk/0e8f359d3c23f6d5.editing_sdk.js" integrity="sha512-CBLuYm/olmgyMedTtPRFeqCRZcSWUh6/39ewyXAbnr1dsVHBACzZ59KGJZXvuWNHOHixfWegfuMN9JzmLEDIoA=="></script>
<script>
// Slide navigation
let currentSlide = 1;
const totalSlides = 12;
function showSlide(n) {
document.querySelectorAll('.slide').forEach(s => s.classList.remove('active'));
document.getElementById(`slide-${n}`).classList.add('active');
document.getElementById('slide-counter').textContent = `${n} / ${totalSlides}`;
document.getElementById('progress-bar').style.width = `${(n / totalSlides) * 100}%`;
document.getElementById('btn-prev').disabled = n === 1;
if (n === totalSlides) {
document.getElementById('btn-next').style.display = 'none';
} else {
document.getElementById('btn-next').style.display = 'block';
document.getElementById('btn-next').disabled = false;
}
}
function nextSlide() { if (currentSlide < totalSlides) { currentSlide++; showSlide(currentSlide); } }
function prevSlide() { if (currentSlide > 1) { currentSlide--; showSlide(currentSlide); } }
// Asesmen Awal - Fakta vs Opini
function checkFaktaOpini(btn, isCorrect) {
const parent = btn.parentElement;
if (parent.querySelector('.correct, .incorrect')) return; // Prevent multiple clicks
if (isCorrect) {
btn.classList.add('correct');
} else {
btn.classList.add('incorrect');
// Show the correct answer automatically
setTimeout(() => {
parent.querySelectorAll('.option-btn').forEach(b => {
if (b !== btn) b.classList.add('correct');
});
}, 300);
}
}
// Aktivitas Jodohkan Struktur (Drag and Drop / Click to Match)
let selectedStruktur = null;
function selectStruktur(el) {
if(el.classList.contains('placed')) return; // Can't select already placed item
document.querySelectorAll('.struktur-item').forEach(i => i.style.outline = 'none');
selectedStruktur = el;
el.style.outline = '3px solid #14b8a6'; // Teal outline
}
function dropStruktur(target) {
if (!selectedStruktur) return;
const zone = document.querySelector(`[data-target="${target}"]`);
if (zone.classList.contains('filled')) return; // Zone already has an answer
const struktur = selectedStruktur.dataset.struktur;
if (struktur === target) {
zone.classList.add('filled');
// Limit string length for aesthetic
let txt = selectedStruktur.textContent.trim();
if(txt.length > 70) txt = txt.substring(0, 70) + '...';
zone.querySelector('.drop-text').textContent = txt;
zone.querySelector('.drop-text').classList.remove('text-gray-400');
zone.querySelector('.drop-text').classList.add('text-emerald-800', 'font-medium');
selectedStruktur.classList.add('placed');
} else {
zone.style.borderColor = '#ef4444'; // Red error border
setTimeout(() => { zone.style.borderColor = '#cbd5e1'; }, 600); // Reset border
}
selectedStruktur.style.outline = 'none';
selectedStruktur = null;
// Check if all are matched
if (document.querySelectorAll('.drop-zone.filled').length === 3) {
const fb = document.getElementById('match-feedback');
fb.textContent = '🎉 Luar biasa! Seluruh struktur LHO sudah tersusun berurutan dengan benar!';
fb.classList.remove('hidden');
fb.classList.add('text-emerald-700');
}
}
// Mengolah Data Feedback
function showOlahFeedback() {
const text = document.getElementById('olah-textarea').value;
const fb = document.getElementById('olah-feedback');
fb.classList.remove('hidden');
if (text.length < 30) {
fb.textContent = '⚠️ Tulisanmu masih terlalu singkat. Coba gabungkan semua data menjadi paragraf utuh!';
fb.className = 'text-sm font-bold text-orange-500';
} else {
let score = 0;
if (text.toLowerCase().includes('adalah') || text.toLowerCase().includes('merupakan')) score++;
if (text.toLowerCase().includes('majemuk') || text.toLowerCase().includes('menjalar') || text.toLowerCase().includes('duri')) score++;
if (text.toLowerCase().includes('manfaat') || text.toLowerCase().includes('obat') || text.toLowerCase().includes('insomnia')) score++;
if (score === 0) {
fb.textContent = '💡 Jangan lupa gunakan kata "adalah/merupakan" untuk definisi dan tuliskan manfaatnya.';
fb.className = 'text-sm font-bold text-blue-500';
} else if (score === 1 || score === 2) {
fb.textContent = '👍 Bagus! Coba pastikan ciri fisik (daun/batang) dan manfaatnya juga kamu tulis semua ya.';
fb.className = 'text-sm font-bold text-teal-600';
} else {
fb.textContent = '🌟 Sempurna! Paragrafmu sudah mengandung definisi, deskripsi bagian, dan manfaat sesuai kaidah LHO.';
fb.className = 'text-sm font-bold text-emerald-600';
}
}
}
// Kuis Interaktif
const kuisData = [
{ q: 'Bagian teks LHO yang berisi gambaran umum tentang objek yang diobservasi disebut...', opts: ['Deskripsi Bagian', 'Pernyataan Umum', 'Deskripsi Manfaat', 'Kesimpulan Akhir'], answer: 1 },
{ q: 'Ciri bahasa teks LHO sering menggunakan istilah teknis atau ilmiah. Manakah yang termasuk kata ilmiah?', opts: ['Sangat cantik', 'Fotosintesis', 'Super keren', 'Besar sekali'], answer: 1 },
{ q: '"Harimau Sumatera adalah hewan karnivora endemik pulau Sumatera." Kalimat tersebut termasuk contoh...', opts: ['Kalimat opini', 'Kalimat definisi', 'Kalimat narasi', 'Kalimat tanya'], answer: 1 },
{ q: 'Teks Laporan Hasil Observasi memiliki sifat yang penting, yaitu...', opts: ['Subjektif dan penuh emosi', 'Objektif dan berdasarkan fakta', 'Imajinatif dan seperti puisi', 'Menarik simpati pembaca'], answer: 1 }
];
let kuisIdx = 0, kuisScore = 0;
function renderKuis() {
if (kuisIdx >= kuisData.length) {
document.getElementById('kuis-container').classList.add('hidden');
const sc = document.getElementById('kuis-score');
sc.classList.remove('hidden');
sc.querySelector('p').textContent = `Skormu: ${kuisScore} / ${kuisData.length}`;
return;
}
const k = kuisData[kuisIdx];
document.getElementById('kuis-q-text').textContent = `Soal ${kuisIdx + 1}: ${k.q}`;
const container = document.getElementById('kuis-options');
container.innerHTML = '';
k.opts.forEach((opt, i) => {
const btn = document.createElement('button');
btn.className = 'option-btn w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-100 text-left font-medium text-slate-700 hover:bg-slate-100';
btn.textContent = opt;
btn.onclick = () => answerKuis(i, k.answer);
container.appendChild(btn);
});
document.getElementById('kuis-result').classList.add('hidden');
document.getElementById('kuis-next').classList.add('hidden');
}
function answerKuis(selected, correct) {
const btns = document.querySelectorAll('#kuis-options .option-btn');
if (btns[0].classList.contains('correct') || btns[0].classList.contains('incorrect')) return; // Prevent changing answer
btns.forEach((b, i) => {
if (i === correct) b.classList.add('correct');
else if (i === selected) b.classList.add('incorrect');
b.style.pointerEvents = 'none'; // disable clicks after answered
});
if (selected === correct) kuisScore++;
const res = document.getElementById('kuis-result');
res.textContent = selected === correct ? '✅ Tepat Sekali!' : '❌ Ops, jawaban yang benar berwarna hijau!';
res.className = `font-bold text-lg ${selected === correct ? 'text-emerald-600' : 'text-red-500'}`;
res.classList.remove('hidden');
document.getElementById('kuis-next').classList.remove('hidden');
}
function nextKuis() { kuisIdx++; renderKuis(); }
// Asesmen Akhir
const aaData = [
{ q: 'Urutan struktur teks Laporan Hasil Observasi yang benar adalah...', opts: ['Deskripsi Bagian → Pernyataan Umum → Deskripsi Manfaat', 'Pernyataan Umum → Deskripsi Bagian → Deskripsi Manfaat', 'Deskripsi Manfaat → Deskripsi Bagian → Pernyataan Umum'], answer: 1 },
{ q: '"Daun sirih memiliki bentuk menyerupai jantung, berwarna hijau mengkilap, dan tepinya rata." Paragraf ini termasuk bagian...', opts: ['Pernyataan Umum', 'Deskripsi Bagian', 'Deskripsi Manfaat'], answer: 1 },
{ q: 'Manakah dari opsi berikut yang BUKAN termasuk ciri kebahasaan teks LHO?', opts: ['Menggunakan kata ilmiah/teknis', 'Menggunakan kalimat deskripsi objektif', 'Menggunakan bahasa emotif dan kata pujian (sangat indah)'], answer: 2 },
{ q: 'Sumber data yang paling valid dan tepat untuk diolah menjadi teks LHO adalah...', opts: ['Cerita khayalan teman sekelas', 'Hasil pengamatan fisik langsung dan literatur faktual', 'Pendapat pribadi penulis tentang suatu benda'], answer: 1 },
{ q: '"Paus biru merupakan hewan mamalia laut terbesar di dunia dari ordo Cetacea." Kalimat tersebut mengandung ciri kebahasaan berupa...', opts: ['Kalimat opini dan majas', 'Kalimat definisi dan istilah ilmiah', 'Kalimat persuasif dan kata ganti'], answer: 1 }
];
let aaIdx = 0, aaScore = 0;
function renderAA() {
if (aaIdx >= aaData.length) {
document.getElementById('asesmen-akhir-container').classList.add('hidden');
const sc = document.getElementById('aa-score');
sc.classList.remove('hidden');
const finalGrade = (aaScore / aaData.length) * 100;
sc.querySelector('p').textContent = `Nilai Akhir: ${finalGrade}`;
return;
}
const a = aaData[aaIdx];
document.getElementById('aa-q-text').textContent = `Pertanyaan ${aaIdx + 1}: ${a.q}`;
const container = document.getElementById('aa-options');
container.innerHTML = '';
a.opts.forEach((opt, i) => {
const btn = document.createElement('button');
btn.className = 'option-btn w-full p-4 rounded-xl bg-slate-50 border-2 border-slate-100 text-left font-medium text-slate-700 hover:bg-slate-100';
btn.textContent = opt;
btn.onclick = () => answerAA(i, a.answer);
container.appendChild(btn);
});
document.getElementById('aa-result').classList.add('hidden');
document.getElementById('aa-next').classList.add('hidden');
}
function answerAA(selected, correct) {
const btns = document.querySelectorAll('#aa-options .option-btn');
if (btns[0].classList.contains('correct') || btns[0].classList.contains('incorrect')) return;
btns.forEach((b, i) => {
if (i === correct) b.classList.add('correct');
else if (i === selected) b.classList.add('incorrect');
b.style.pointerEvents = 'none';
});
if (selected === correct) aaScore++;
const res = document.getElementById('aa-result');
res.textContent = selected === correct ? '✅ Benar!' : '❌ Jawaban salah.';
res.className = `font-bold text-lg ${selected === correct ? 'text-emerald-600' : 'text-red-500'}`;
res.classList.remove('hidden');
document.getElementById('aa-next').classList.remove('hidden');
}
function nextAA() { aaIdx++; renderAA(); }
// Refleksi
function submitRefleksi() {
const text = document.getElementById('refleksi-textarea').value;
if (text.length > 5) {
document.getElementById('refleksi-feedback').classList.remove('hidden');
} else {
alert("Silakan tulis refleksimu terlebih dahulu sebelum mengirim.");
}
}
// Init
document.addEventListener('DOMContentLoaded', () => {
renderKuis();
renderAA();
lucide.createIcons();
// Allow keyboard navigation using left/right arrows
document.addEventListener('keydown', (e) => {
if(e.key === 'ArrowRight' && currentSlide < totalSlides) {
nextSlide();
} else if(e.key === 'ArrowLeft' && currentSlide > 1) {
prevSlide();
}
});
});
</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. | |||||