Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
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. | |||||