Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 9
Bahasa Indonesia
Membuat Iklan, Slogan, dan Poster : 7 Memahami langkah-langkah pembuatan iklan dan membuat rancangan iklan sederhana secara berkelompok.
<!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 Periklanan (TP 7) 🚀</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: #faf5ff;
background-image: radial-gradient(#e9d5ff 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-purple-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-purple-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="award" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-purple-800 uppercase tracking-widest">Bab 2 - TP 7: Langkah Pembuatan & Perancangan Iklan Sederhana</span>
<span id="progress-text" class="text-xs font-black text-white bg-purple-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-purple-400 via-indigo-500 to-violet-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 TP 7 -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-purple-100 text-purple-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 7: <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600">Proyek Perancangan Iklan</span> 🚀
</h1>
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=800&q=80" alt="Proyek Iklan" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-purple-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-indigo-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Memahami <span class="text-purple-600">langkah-langkah pembuatan iklan</span> yang sistematis.</li>
<li>Membuat <span class="text-purple-600">rancangan iklan sederhana</span> secara berkelompok.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap merampungkan proyek akhir Bab 2? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Langkah Pembuatan Iklan -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Tahapan Produksi Iklan 📋</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Dari ide kreatif hingga naskah siap tampil yang memikat khalayak.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Tahap Perencanaan -->
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-purple-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Tahap Perencanaan</div>
<p class="text-slate-700 font-bold mb-3">Langkah awal sebelum merancang iklan:</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4 text-sm">
<li>Menentukan produk atau isu layanan sosial yang diangkat.</li>
<li>Mengenal target khalayak sasaran (usia, minat, kebutuhan).</li>
<li>Menyusun tujuan utama iklan (komersial atau edukasi).</li>
</ul>
</div>
<div class="bg-purple-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-purple-900 italic">"Perencanaan matang adalah kunci kesuksesan pesan."</p>
</div>
</div>
<!-- Tahap Eksekusi -->
<div class="bg-white p-6 rounded-3xl border-2 border-indigo-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-indigo-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Tahap Penulisan & Desain</div>
<p class="text-slate-700 font-bold mb-3">Penyusunan elemen isi iklan:</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4 text-sm">
<li>Membuat judul atau slogan yang mencolok.</li>
<li>Menyusun kalimat imperatif (perintah) dan persuasif (ajakan).</li>
<li>Menyiapkan ilustrasi visual atau storyboard.</li>
</ul>
</div>
<div class="bg-indigo-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-indigo-900 italic">"Rancangan yang terstruktur menghasilkan karya berkualitas."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Urutan Langkah Iklan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-purple-600">Urutan Proyek Iklan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-purple-100 border-2 border-purple-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-purple-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Evaluasi pernyataan tahapan pembuatan iklan berikut:</p>
<div id="q1-text" class="text-xl text-box text-purple-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, true)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Pernyataan Benar (Logis)</button>
<button onclick="checkQ1(this, false)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Pernyataan Keliru</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-purple-600 text-white rounded-2xl font-black text-xl hover:bg-purple-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Panduan Proyek Rancangan Iklan Kelompok -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-indigo-900 bg-indigo-100 inline-block px-6 py-2 rounded-2xl">Lembar Kerja Proyek Kelompok 📝</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Format penyusunan rancangan iklan sederhana yang harus dikerjakan bersama tim.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-indigo-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Komponen Rancangan Iklan:</p>
<div class="bg-indigo-50 p-6 rounded-2xl border-2 border-indigo-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-indigo-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Nama Kelompok & Anggota:</b> Identitas tim kerja.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-indigo-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Jenis & Tema Iklan:</b> Apakah komersial produk atau layanan masyarakat?</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-indigo-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Naskah & Slogan:</b> Kalimat imperatif dan persuasif yang digunakan.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Kerja Kelompok">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Perencanaan Iklan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-indigo-600">Simulasi Rencana Iklan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-indigo-100 border-2 border-indigo-400 px-6 py-2 rounded-full">
<span class="font-black text-indigo-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-indigo-600 text-white rounded-2xl font-black text-xl hover:bg-indigo-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Perencanaan Iklan) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-indigo-500 tracking-wide uppercase">🏁 Balap Perencanaan Iklan 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar tahapan dan perancangan iklan, kumpulkan <b>5 Poin</b>!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-purple-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 7 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-purple-500 hover:bg-purple-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#6b21a8] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-purple-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#6b21a8] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 7 -->
<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 Akhir Bab 2 (TP 7) 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pengalaman menyelesaikan proyek perancangan iklan Bab 2 hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-purple-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Berkesan!</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">Cukup Lancar</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">Perlu Peningkatan</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan rangkuman singkat atau pesan kesan dari Bab 2 (Iklan, Slogan, dan Poster):</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-purple-50 border-2 border-purple-200 focus:border-purple-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 7 & 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 Bab 2 (TP 7)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji komprehensif langkah pembuatan dan perancangan iklan melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-purple-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-purple-700 bg-purple-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 7 -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🏆</div>
<h2 class="text-4xl font-black text-purple-900 mb-2">Bab 2 Selesai Sepenuhnya!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 7: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-purple-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai akhir Bab 2 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-purple-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Keseluruhan Bab 2</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-purple-500">
<option value="100">Sangat Tuntas & Menguasai Seluruh Materi Bab 2!</option>
<option value="75">Tuntas Sebagian Besar</option>
<option value="50">Perlu Pengulangan Belajar</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan Akhir Bab 2 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-purple-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-purple-700 shadow-[0_4px_0px_#6b21a8]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Urutan Langkah Pembuatan Iklan)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Menentukan tema produk dan target sasaran merupakan langkah awal perencanaan sebelum menyusun naskah iklan.\"", a: true, exp: "Perencanaan tema dan sasaran adalah fondasi awal yang logis." },
{ t: "\"Langsung menggambar poster final tanpa menentukan slogan atau isi pesan terlebih dahulu.\"", a: false, exp: "Langkah ini keliru karena perencanaan pesan dan naskah harus dilakukan sebelum pembuatan visual." },
{ t: "\"Menuliskan kalimat imperatif dan persuasif dalam draf rancangan teks iklan kelompok.\"", a: true, exp: "Penyusunan naskah teks persuasif merupakan bagian inti perancangan iklan." },
{ t: "\"Mengirimkan laporan nilai tanpa melakukan diskusi kelompok sama sekali.\"", a: false, exp: "Proyek perancangan iklan memerlukan kolaborasi tim secara aktif." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, answerChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ1Data.a);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.a === true) btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Perencanaan Iklan)
let countQ2 = 0;
const q2Bank = [
{
story: "Kelompok Budi ingin merancang iklan layanan masyarakat tentang hemat energi listrik di sekolah.",
q: "Apa langkah perencanaan pertama yang harus mereka tentukan?",
ops: ["Menentukan target sasaran siswa sekolah dan pesan inti penghematan energi", "Membeli perangkat elektronik mahal", "Menutup seluruh ruang kelas"],
ans: 0,
exp: "Menentukan target khalayak dan pesan inti adalah langkah awal perencanaan."
},
{
story: "Setelah menyusun naskah dan slogan, kelompok merancang sketsa visual poster bersama-sama.",
q: "Tahap apa yang sedang dijalankan oleh kelompok tersebut?",
ops: ["Tahap eksekusi dan perancangan visual iklan", "Tahap penutupan proyek", "Tahap pembubaran tim"],
ans: 0,
exp: "Penyusunan sketsa dan visual merupakan bagian dari eksekusi rancangan."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 7
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Langkah awal pembuatan iklan dimulai dari tahap...", a: "PERENCANAAN" },
{ q: "Siapa yang menjadi sasaran utama dalam penyebaran pesan iklan disebut...", a: "KHALAYAK" },
{ q: "Perancangan iklan sederhana di kelas dikerjakan secara...", a: "KELOMPOK" },
{ q: "Naskah iklan wajib memuat kalimat imperatif dan...", a: "PERSUASIF" },
{ q: "Proyek akhir Bab 2 berfokus pada pembuatan rancangan...", a: "IKLAN" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-purple-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('Berkesan')) btn.classList.add('border-purple-400', 'bg-purple-50');
else if(btn.innerText.includes('Lancar')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 7
const evaluasiBank = [
{
q: `Tahap paling awal yang harus dilakukan saat hendak membuat rancangan iklan sederhana adalah...`,
options: [`Merencanakan tema, produk/isu, dan menentukan target khalayak`, `Langsung mencetak poster tanpa konsep`, `Membeli bingkai pameran mahal`, `Menghitung total biaya produksi komersial`],
a: 0,
exp: "Perencanaan tema dan khalayak sasaran adalah langkah awal yang paling krusial."
},
{
q: `Mengapa penyusunan naskah teks (kalimat imperatif dan persuasif) sangat penting dalam pembuatan rancangan iklan?`,
options: [`Agar pesan ajakan dan perintah kepada pembaca tersampaikan secara efektif`, `Agar durasi iklan menjadi sangat panjang`, `Agar pembaca merasa kebingungan`, `Agar tulisan tidak terlihat jelas`],
a: 0,
exp: "Naskah teks yang baik memastikan pembaca tergerak sesuai tujuan iklan."
},
{
q: `Dalam kerja kelompok pembuatan proyek perancangan iklan, pembagian tugas yang baik mencakup...`,
options: [`Kolaborasi menentukan ide, menulis naskah, dan mendesain visual bersama`, `Satu orang mengerjakan seluruh tugas sendiri`, `Tidak ada pembagian tugas sama sekali`, `Menyerahkan tugas kepada pihak luar`],
a: 0,
exp: "Kerja kelompok mengutamakan kolaborasi aktif dan pembagian peran yang adil."
},
{
q: `Manakah komponen utama yang wajib dimuat dalam lembar rancangan iklan sederhana?`,
options: [`Tema iklan, target sasaran, naskah slogan, dan sketsa visual`, `Nomor rekening bank pribadi`, `Sejarah panjang berdirinya sekolah`, `Daftar hadir seluruh warga kota`],
a: 0,
exp: "Lembar rancangan iklan berfokus pada konsep tema, naskah, dan visual."
},
{
q: `Secara keseluruhan, tujuan pembelajaran Bab 2 tentang Iklan, Slogan, dan Poster membimbing peserta didik untuk...`,
options: [`Mampu memahami, menganalisis, dan merancang pesan persuasif secara kreatif`, `Menghafal seluruh kamus bahasa Indonesia`, `Menjual barang dagangan secara komersial di luar sekolah`, `Menghindari membaca teks visual`],
a: 0,
exp: "Kompetensi akhir Bab 2 mencakup kemampuan analitis dan kreatif dalam membuat media persuasif."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-purple-50 hover:border-purple-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "Bab 2 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Akhir Bab 2 (TP 7): " + refleksi,
strategi: "Evaluasi Akhir TP 7: Langkah Pembuatan & Perancangan Iklan Sederhana"
}, "*");
} else {
alert("Laporan Akhir Bab 2 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Membuat Iklan, Slogan, dan Poster : 6 menjelaskan unsur-unsur poster dan merancang sebuah poster secara kreatif dalam kelompok.
<!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 Periklanan (TP 6) 🎨</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: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="image" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Bab 2 - TP 6: Unsur & Perancangan Poster Kreatif</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-emerald-400 via-teal-500 to-green-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 6 -->
<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 TP 6: <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Seni Merancang Poster</span> 🎨
</h1>
<img src="https://images.unsplash.com/photo-1541701494587-cb58502866ab?auto=format&fit=crop&w=800&q=80" alt="Poster Kreatif" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-emerald-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-teal-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Menjelaskan <span class="text-emerald-600">unsur-unsur penting</span> dalam sebuah poster.</li>
<li>Merancang <span class="text-emerald-600">poster secara kreatif</span> dalam kerja kelompok.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap mendesain karya visual yang memukau? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Unsur Poster -->
<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">Anatomi Sebuah Poster 🖼️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kombinasi gambar mencolok dan teks padat yang menyampaikan pesan dalam sekali lihat.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Unsur Visual -->
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-emerald-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Unsur Visual & Desain</div>
<p class="text-slate-700 font-bold mb-3">Tampilan estetika yang langsung menarik perhatian:</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4 text-sm">
<li><b>Ilustrasi/Gambar:</b> Relevan dengan tema pesan yang diusung.</li>
<li><b>Komposisi & Warna:</b> Pemilihan kontras warna agar mudah dibaca dari jarak jauh.</li>
<li><b>Tipografi:</b> Bentuk dan ukuran huruf yang tegas dan jelas.</li>
</ul>
</div>
<div class="bg-emerald-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-emerald-900 italic">"Visual yang kuat berbicara lebih keras daripada kata-kata."</p>
</div>
</div>
<!-- Unsur Pesan -->
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-teal-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Unsur Teks & Pesan</div>
<p class="text-slate-700 font-bold mb-3">Pesan verbal yang ringkas dan memotivasi:</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4 text-sm">
<li><b>Judul/Slogan:</b> Kalimat utama yang mencolok perhatian.</li>
<li><b>Informasi Pendukung:</b> Penjelasan singkat atau ajakan bertindak (imperatif/persuasif).</li>
</ul>
</div>
<div class="bg-teal-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-teal-900 italic">"Padat teks, kaya makna, mudah dipahami."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Unsur Poster) -->
<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">Identifikasi Unsur Poster</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan kategori unsur poster berdasarkan pernyataan berikut:</p>
<div id="q1-text" class="text-xl text-box text-emerald-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, 'visual')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Unsur Visual / Desain</button>
<button onclick="checkQ1(this, 'teks')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Unsur Teks / Pesan</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Panduan Perancangan Poster Kelompok -->
<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">Langkah Merancang Poster Kreatif 🛠️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Proyek kolaborasi kelompok untuk menghasilkan karya visual yang berdampak.</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">
<p class="text-xl font-bold text-slate-700">Tahapan Kerja Proyek Pembuatan Poster:</p>
<div class="bg-teal-50 p-6 rounded-2xl border-2 border-teal-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-teal-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Tentukan Tema & Isu:</b> Contoh isu kebersihan sekolah atau anti-bullying.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-teal-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Rancang Sketsa & Slogan:</b> Buat kalimat imperatif/persuasif yang ringkas.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-teal-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Eksekusi Digital/Manual:</b> Gunakan aplikasi desain (Canva) atau media gambar.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1513364776144-60967b0f800f?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Desain Poster">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Evaluasi Desain Poster) -->
<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">Evaluasi Kualitas Poster</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-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-teal-600 text-white rounded-2xl font-black text-xl hover:bg-teal-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Desain Poster) -->
<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-500 to-teal-500 tracking-wide uppercase">🏁 Balap Desain Poster 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar unsur dan perancangan poster, kumpulkan <b>5 Poin</b>!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-emerald-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 6 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-emerald-500 hover:bg-emerald-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#047857] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-emerald-500 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_#047857] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 6 -->
<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 TP 6 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pengalaman kelompokmu merancang poster 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-emerald-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Kreatif & Seru!</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">Cukup Berjalan Baik</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">Agak Kewalahan</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan ide tema poster kelompokmu:</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="Contoh: Poster hemat energi listrik di sekolah..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 6 & 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 TP 6</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman unsur dan perancangan poster kreatif melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-emerald-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-emerald-700 bg-emerald-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-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 TP 6 -->
<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 TP 6 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 6: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-emerald-500 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">Kirim laporan nilai TP 6 ke 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-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-emerald-500">
<option value="100">Sangat Mahir Merancang Poster Kreatif!</option>
<option value="75">Cukup Menguasai</option>
<option value="50">Perlu Bimbingan</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-emerald-500 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 TP 6 🚀
</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-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-600 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Unsur Poster)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Pemilihan warna kontras tinggi dan ilustrasi gambar yang mencolok mata.\"", type: 'visual', exp: "Merupakan bagian dari unsur visual atau desain estetika poster." },
{ t: "\"Penggunaan slogan atau kalimat ajakan imperatif yang singkat dan jelas.\"", type: 'teks', exp: "Merupakan bagian dari unsur teks atau pesan verbal poster." },
{ t: "\"Pengaturan ukuran huruf (tipografi) judul agar terbaca jelas dari kejauhan.\"", type: 'visual', exp: "Tipografi dan tata letak tata huruf termasuk unsur desain visual." },
{ t: "\"Penyertaan informasi kontak atau ajakan peduli sosial pada bagian bawah poster.\"", type: 'teks', exp: "Pesan verbal tertulis termasuk ke dalam unsur teks/pesan." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, typeChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (typeChoosed === currentQ1Data.type);
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');
if (currentQ1Data.type === 'visual') btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Evaluasi Desain)
let countQ2 = 0;
const q2Bank = [
{
story: "Sebuah kelompok membuat poster dengan warna latar gelap dan tulisan hitam kecil tanpa gambar.",
q: "Bagaimana penilaian kualitas desain poster tersebut?",
ops: ["Kurang efektif karena teks sulit dibaca dan tidak menarik secara visual", "Sangat sempurna dan kreatif", "Sudah memenuhi standar internasional"],
ans: 0,
exp: "Warna latar gelap dengan teks hitam dan tanpa ilustrasi melanggar prinsip keterbacaan poster."
},
{
story: "Dalam merancang poster, kelompok menetapkan tema pencegahan sampah plastik dengan ilustrasi kuat dan kalimat ajakan ringkas.",
q: "Langkah awal apa yang sedang dilakukan kelompok tersebut?",
ops: ["Menentukan tema dan konsep visual pesan poster", "Menghitung keuntungan jualan", "Membuang sampah ke laut"],
ans: 0,
exp: "Menentukan tema, isu, dan konsep visual adalah tahap awal perancangan poster."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 6
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Unsur gambar atau ilustrasi dalam poster termasuk bagian dari unsur...", a: "VISUAL" },
{ q: "Seni menata huruf agar mudah dibaca pada poster disebut...", a: "TIPOGRAFI" },
{ q: "Aplikasi populer yang sering digunakan siswa untuk membuat poster digital adalah...", a: "CANVA" },
{ q: "Tujuan utama poster dipajang di tempat umum adalah menarik...", a: "PERHATIAN" },
{ q: "Perancangan poster secara bersama-sama dilakukan secara...", a: "KELOMPOK" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-emerald-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('Kreatif')) btn.classList.add('border-emerald-400', 'bg-emerald-50');
else if(btn.innerText.includes('Baik')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 6
const evaluasiBank = [
{
q: `Unsur utama yang wajib ada dalam sebuah poster agar menarik perhatian pembaca dari kejauhan adalah...`,
options: [`Ilustrasi gambar yang jelas dan warna kontras`, `Naskah cerita panjang berjilid-jilid`, `Daftar harga barang lengkap`, `Tabel statistik matematika`],
a: 0,
exp: "Gambar dan warna kontras adalah penarik perhatian visual utama pada poster."
},
{
q: `Seni dan teknik mengatur tata letak huruf pada poster agar mudah terbaca disebut...`,
options: [`Tipografi`, `Fotografi`, `Koreografi`, `Biografi`],
a: 0,
exp: "Tipografi berkaitan dengan pemilihan bentuk dan ukuran huruf dalam desain."
},
{
q: `Mengapa perancangan poster dalam pembelajaran ini disarankan dilakukan secara berkelompok?`,
options: [`Untuk melatih kolaborasi, berbagi ide kreatif, dan pembagian tugas desain`, `Agar tugas guru menjadi sangat sedikit`, `Supaya jumlah kertas yang dipakai habis`, `Agar waktu belajar cepat selesai`],
a: 0,
exp: "Kerja kelompok melatih kolaborasi dan pembagian peran kreatif antar siswa."
},
{
q: `Manakah langkah pertama yang paling tepat saat akan merancang sebuah poster kreatif?`,
options: [`Menentukan tema, isu sosial, dan pesan utama yang ingin disampaikan`, `Langsung mewarnai kertas tanpa rencana`, `Membeli bingkai foto mahal`, `Mencari nomor telepon percetakan`],
a: 0,
exp: "Menentukan tema dan pesan adalah fondasi awal perancangan karya."
},
{
q: `Kombinasi ideal dalam sebuah poster yang baik terdiri atas...`,
options: [`Keseimbangan antara unsur visual (gambar/warna) dan pesan verbal (slogan/teks)`, `Hanya tulisan padat tanpa gambar sama sekali`, `Hanya gambar abstrak tanpa pesan apapun`, `Hanya logo sekolah berukuran kecil`],
a: 0,
exp: "Poster yang efektif memadukan unsur visual dan pesan verbal secara seimbang."
}
];
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 || "TP 6 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 6 Bab 2: " + refleksi,
strategi: "Evaluasi TP 6: Unsur & Perancangan Poster Kreatif"
}, "*");
} else {
alert("Laporan TP 6 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Membuat Iklan, Slogan, dan Poster : 5 Mengidentifikasi dan membuat kalimat imperatif serta persuasif yang umum digunakan dalam iklan.
<!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 Periklanan (TP 5) ⚡</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: #fff7ed;
background-image: radial-gradient(#fed7aa 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-orange-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-orange-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="zap" 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-orange-800 uppercase tracking-widest">Bab 2 - TP 5: Kalimat Imperatif & Persuasif</span>
<span id="progress-text" class="text-xs font-black text-white bg-orange-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 5 -->
<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-orange-100 text-orange-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 TP 5: <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-red-600">Kalimat Imperatif & Persuasif</span> ⚡
</h1>
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=800&q=80" alt="Kalimat Persuasif" 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-orange-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-orange-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-red-500"></i> Tujuan Pembelajaran Kita (3 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Mengidentifikasi <span class="text-orange-600">kalimat imperatif</span> (perintah/permintaan) dalam iklan.</li>
<li>Mengidentifikasi dan membuat <span class="text-orange-600">kalimat persuasif</span> (ajakan/bujukan).</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menguasai kekuatan kata-kata penggerak? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Kalimat Imperatif & Persuasif -->
<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-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Senjata Bahasa Iklan 🧲</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Dua jenis kalimat utama yang wajib ada dalam teks iklan dan poster.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Imperatif -->
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-orange-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Kalimat Imperatif</div>
<p class="text-slate-700 font-bold mb-3">Kalimat yang mengandung maksud <span class="text-orange-600 font-black">perintah atau permintaan</span> untuk melakukan sesuatu.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4 text-sm">
<li>Sering menggunakan partikel <i>-lah</i> (temukan, wujudkan, cintailah).</li>
<li>Bersifat menyuruh pembaca bertindak.</li>
</ul>
</div>
<div class="bg-orange-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-orange-900 italic">Contoh: "Dapatkan segera diskonnya sekarang juga!"</p>
</div>
</div>
<!-- Persuasif -->
<div class="bg-white p-6 rounded-3xl border-2 border-red-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-red-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">2. Kalimat Persuasif</div>
<p class="text-slate-700 font-bold mb-3">Kalimat yang bersifat <span class="text-red-600 font-black">membujuk, merayu, atau mengajak</span> pembaca agar tertarik.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4 text-sm">
<li>Sering menggunakan kata ajakan (ayo, mari, marilah).</li>
<li>Menonjolkan keunggulan atau manfaat positif.</li>
</ul>
</div>
<div class="bg-red-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-red-900 italic">Contoh: "Ayo wujudkan lingkungan bersih dan sehat bersama kami!"</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Bedah Jenis Kalimat) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-orange-600">Imperatif atau Persuasif?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-orange-100 border-2 border-orange-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-orange-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan jenis kalimat pada kutipan iklan berikut:</p>
<div id="q1-text" class="text-xl text-box text-orange-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, 'imperatif')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Kalimat Imperatif</button>
<button onclick="checkQ1(this, 'persuasif')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Kalimat Persuasif</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-orange-600 text-white rounded-2xl font-black text-xl hover:bg-orange-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Analisis Peran Kalimat dalam Iklan -->
<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-red-900 bg-red-100 inline-block px-6 py-2 rounded-2xl">Perpaduan Kalimat dalam Poster 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana kalimat imperatif dan persuasif bekerja sama menggerakkan pembaca.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-red-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Contoh Analisis pada Iklan Layanan Masyarakat:</p>
<div class="bg-red-50 p-6 rounded-2xl border-2 border-red-200 space-y-3">
<p class="text-slate-800 font-bold italic">"Bumi kita kian panas. Ayo hemat penggunaan plastik sekarang juga!"</p>
<div class="border-t-2 border-red-200 pt-3">
<p class="text-slate-700 font-bold"><b>Analisis Unsur Kalimat:</b></p>
<ul class="list-disc list-inside text-slate-600 font-medium text-sm mt-1 space-y-1">
<li><b>"Bumi kita kian panas."</b> = Kalimat pernyataan fakta/kontekstual.</li>
<li><b>"Ayo hemat penggunaan plastik..."</b> = Kalimat persuasif (ajakan).</li>
<li><b>"...sekarang juga!"</b> = Kalimat imperatif (perintah tegas).</li>
</ul>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Analisis Kalimat">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Analisis Fungsi Kalimat) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-red-600">Bedah Fungsi Kalimat</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-red-100 border-2 border-red-400 px-6 py-2 rounded-full">
<span class="font-black text-red-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-red-600 text-white rounded-2xl font-black text-xl hover:bg-red-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Kalimat Aksi) -->
<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-orange-500 to-red-500 tracking-wide uppercase">🏁 Balap Kalimat Aksi 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar kalimat imperatif & persuasif, kumpulkan <b>5 Poin</b>!</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-orange-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 5 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-orange-500 hover:bg-orange-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#c2410c] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-orange-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-orange-600 hover:bg-orange-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#c2410c] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 5 -->
<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 TP 5 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang kalimat imperatif dan persuasif 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-orange-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Jelas!</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">Cukup Mengerti</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Tertukar</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan satu contoh kalimat persuasif buatanmu untuk poster sekolah:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-orange-50 border-2 border-orange-200 focus:border-orange-500 outline-none font-medium" rows="3" placeholder="Contoh: Ayo jaga kebersihan kelas kita agar belajar makin nyaman!"></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 5 & 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 TP 5</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji kemampuan membedakan kalimat imperatif dan persuasif melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-orange-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-orange-700 bg-orange-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 TP 5 -->
<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-orange-900 mb-2">Misi TP 5 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 5: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-orange-500 to-red-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-orange-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-orange-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 5 ke 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-orange-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-orange-500">
<option value="100">Sangat Mahir Kalimat Imperatif & Persuasif!</option>
<option value="75">Cukup Menguasai</option>
<option value="50">Perlu Bimbingan</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-orange-500 to-red-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 TP 5 🚀
</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-orange-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-orange-600 shadow-[0_4px_0px_#c2410c]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Imperatif vs Persuasif)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Dapatkan penawaran istimewa ini sekarang juga!\"", type: 'imperatif', exp: "Mengandung perintah langsung untuk bertindak ('Dapatkan...')." },
{ t: "\"Ayo kita jaga kebersihan lingkungan sekolah bersama-sama!\"", type: 'persuasif', exp: "Menggunakan kata ajakan 'Ayo' untuk membujuk secara positif." },
{ t: "\"Tutuplah keran air setelah selesai menggunakannya.\"", type: 'imperatif', exp: "Merupakan kalimat perintah/permintaan dengan partikel -lah." },
{ t: "\"Mari wujudkan generasi cerdas dan berkarakter dengan gemar membaca.\"", type: 'persuasif', exp: "Menggunakan kata 'Mari' sebagai ciri khas ajakan persuasif." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, typeChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (typeChoosed === currentQ1Data.type);
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');
if (currentQ1Data.type === 'imperatif') btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Analisis Fungsi Kalimat)
let countQ2 = 0;
const q2Bank = [
{
story: "Kalimat dalam poster: 'Jangan biarkan bumi menangis, ayo tanam pohon sekarang!'",
q: "Apa fungsi utama dari gabungan kalimat tersebut?",
ops: ["Membujuk dan memerintah pembaca agar peduli penghijauan lingkungan", "Menjelaskan rumus fisika cuaca", "Menjual bibit tanaman hias komersial"],
ans: 0,
exp: "Gabungan bujukan dan perintah tegas bertujuan menggugah kepedulian lingkungan."
},
{
story: "Kalimat iklan: 'Nikmati kelezatan rasa cokelat murni di setiap gigitannya.'",
q: "Termasuk jenis kalimat apakah kutipan di atas?",
ops: ["Kalimat imperatif (perintah mencoba)", "Kalimat tanya berita", "Kalimat penolakan tegas"],
ans: 0,
exp: "Kata 'Nikmati' adalah bentuk perintah/imperatif halus dalam promosi."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 5
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Kalimat yang mengandung unsur perintah disebut kalimat...", a: "IMPERATIF" },
{ q: "Kalimat yang bersifat membujuk atau mengajak disebut kalimat...", a: "PERSUASIF" },
{ q: "Kata ajakan yang sering dipakai dalam kalimat persuasif adalah 'ayo' dan...", a: "MARI" },
{ q: "Partikel penegas yang sering melekat di akhir kalimat imperatif adalah...", a: "LAH" },
{ q: "Tujuan kalimat imperatif dalam iklan adalah menyuruh pembaca untuk...", a: "BERTINDAK" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-orange-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('Jelas')) btn.classList.add('border-orange-400', 'bg-orange-50');
else if(btn.innerText.includes('Mengerti')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 5
const evaluasiBank = [
{
q: `Kalimat yang bertujuan untuk memberikan perintah atau permintaan kepada pembaca disebut...`,
options: [`Kalimat imperatif`, `Kalimat persuasif`, `Kalimat tanya berita`, `Kalimat majemuk bertingkat`],
a: 0,
exp: "Kalimat imperatif berfungsi untuk menyuruh atau memerintahkan sesuatu."
},
{
q: `Perhatikan kalimat iklan: "Ayo wujudkan lingkungan bersih dan sehat sekarang juga!" Unsur kalimat persuasif ditunjukkan oleh kata...`,
options: [`Ayo`, `Sekarang`, `Juga`, `Lingkungan`],
a: 0,
exp: "Kata 'Ayo' adalah penanda utama kalimat ajakan/persuasif."
},
{
q: `Manakah di bawah ini yang merupakan contoh kalimat imperatif dalam sebuah iklan produk?`,
options: [`Dapatkan diskon menariknya hari ini!`, `Kami adalah toko pakaian terlengkap`, `Kemarin harga barang naik`, `Mengapa Anda ragu membeli?`],
a: 0,
exp: "Kata 'Dapatkan' merupakan bentuk perintah atau permintaan kepada konsumen."
},
{
q: `Apa fungsi utama penggunaan kalimat persuasif dalam pembuatan poster dan iklan?`,
options: [`Membujuk dan merayu pembaca agar tergerak mengikuti pesan iklan`, `Menyampaikan rumus matematika rumit`, `Menceritakan sejarah masa lalu`, `Menghitung laba penjualan`],
a: 0,
exp: "Persuasif bertujuan mempengaruhi sikap dan tindakan pembaca."
},
{
q: `Kalimat imperatif dalam teks iklan sering kali diakhiri atau ditandai dengan penggunaan...`,
options: [`Partikel -lah atau tanda seru (!)`, `Tanda tanya (?)`, `Titik koma (;)`, `Tanda kurung (...)`],
a: 0,
exp: "Partikel -lah dan tanda seru sering menyertai kalimat perintah."
}
];
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-orange-50 hover:border-orange-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 || "TP 5 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 5 Bab 2: " + refleksi,
strategi: "Evaluasi TP 5: Kalimat Imperatif & Persuasif"
}, "*");
} else {
alert("Laporan TP 5 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Membuat Iklan, Slogan, dan Poster : 4 Menjelaskan ciri-ciri slogan dan menulis slogan yang efektif sesuai konteks.
<!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 Periklanan (TP 4) ✍️</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: #f5f3ff;
background-image: radial-gradient(#ddd6fe 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-violet-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-violet-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="pen-tool" 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-violet-800 uppercase tracking-widest">Bab 2 - TP 4: Ciri & Penulisan Slogan Efektif</span>
<span id="progress-text" class="text-xs font-black text-white bg-violet-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-violet-400 via-purple-500 to-indigo-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 4 -->
<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-violet-100 text-violet-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 TP 4: <span class="text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-indigo-600">Seni Meracik Slogan</span> ✍️
</h1>
<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=800&q=80" alt="Slogan" 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-violet-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-violet-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-purple-500"></i> Tujuan Pembelajaran Kita (2 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Menjelaskan <span class="text-violet-600">ciri-ciri utama slogan</span> yang baik.</li>
<li>Menulis <span class="text-violet-600">slogan yang efektif</span> dan bermakna sesuai konteks.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap merangkai kata-kata pemikat? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Slogan -->
<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-violet-900 bg-violet-100 inline-block px-6 py-2 rounded-2xl">Apa itu Slogan? 💡</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Motto atau frasa singkat yang mencolok dan mudah diingat publik.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Ciri Slogan -->
<div class="bg-white p-6 rounded-3xl border-2 border-violet-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-violet-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Ciri-Ciri Slogan</div>
<p class="text-slate-700 font-bold mb-3">Slogan yang sukses harus memenuhi kriteria berikut:</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4">
<li>Singkat, padat, dan langsung pada sasaran.</li>
<li>Menggunakan pilihan kata yang menarik dan mencolok (kreatif).</li>
<li>Mudah dihafal oleh pendengar atau pembaca.</li>
</ul>
</div>
<div class="bg-violet-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-violet-900 italic">"Buku adalah jendela dunia." (Singkat & bermakna)</p>
</div>
</div>
<!-- Perbedaan Singkat -->
<div class="bg-white p-6 rounded-3xl border-2 border-purple-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-purple-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Fungsi Utama Slogan</div>
<p class="text-slate-700 font-bold mb-3">Slogan sering digunakan dalam berbagai bidang:</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4">
<li><b>Pendidikan:</b> Memotivasi semangat belajar siswa.</li>
<li><b>Kesehatan:</b> Mengingatkan pola hidup sehat.</li>
<li><b>Komersial:</b> Memperkuat identitas merek produk.</li>
</ul>
</div>
<div class="bg-purple-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-purple-900 italic">"Sekali merengkuh dayung, dua tiga pulau terlampaui."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Slogan Efektif) -->
<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-violet-600">Slogan Ideal atau Bukan?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-violet-100 border-2 border-violet-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-violet-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Apakah kalimat berikut memenuhi syarat sebagai slogan yang efektif?</p>
<div id="q1-text" class="text-xl text-box text-violet-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, true)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Slogan Efektif</button>
<button onclick="checkQ1(this, false)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Kurang Efektif (Terlalu Panjang)</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-violet-600 text-white rounded-2xl font-black text-xl hover:bg-violet-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Tips Menulis Slogan -->
<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-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl">Teknik Meracik Slogan ✍️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Langkah mudah menciptakan kalimat daya pikat yang berkesan.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-purple-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Panduan Menulis Slogan yang Kuat:</p>
<div class="bg-purple-50 p-6 rounded-2xl border-2 border-purple-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-purple-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Tentukan Tujuan:</b> Slogan untuk kebersihan, pendidikan, atau produk?</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-purple-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Pilih Kata Bermakna Kuat:</b> Gunakan diksi yang membangkitkan emosi atau tindakan.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-purple-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Batasi Jumlah Kata:</b> Buat ringkas maksimal 4-7 kata agar mudah diingat.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Menulis Slogan">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Pilihan Slogan Terbaik) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-purple-600">Pilih Slogan Terbaik</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-purple-100 border-2 border-purple-400 px-6 py-2 rounded-full">
<span class="font-black text-purple-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-purple-600 text-white rounded-2xl font-black text-xl hover:bg-purple-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Slogan Kreatif) -->
<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-violet-500 to-indigo-500 tracking-wide uppercase">🏁 Balap Slogan Kreatif 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar ciri dan penulisan slogan, kumpulkan <b>5 Poin</b>!</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-violet-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 4 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-violet-500 hover:bg-violet-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#7c3aed] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-violet-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-violet-600 hover:bg-violet-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#7c3aed] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 4 -->
<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 TP 4 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pengalamanmu belajar menulis slogan 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-violet-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Seru!</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 Bisa</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">Agak Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Tuliskan satu contoh ide slogan buatanmu sendiri di sini:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-violet-50 border-2 border-violet-200 focus:border-violet-500 outline-none font-medium" rows="3" placeholder="Contoh: Bersih lingkunganmu, sehat hidupmu!"></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 4 & 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 TP 4</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji kemampuan memahami ciri dan penulisan slogan melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-violet-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-violet-700 bg-violet-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 TP 4 -->
<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-violet-900 mb-2">Misi TP 4 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 4: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-violet-500 to-indigo-500 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-violet-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-violet-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 4 ke 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-violet-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-violet-500">
<option value="100">Sangat Mahir Membuat Slogan!</option>
<option value="75">Cukup Menguasai</option>
<option value="50">Perlu Latihan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-violet-500 to-indigo-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 4 🚀
</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-violet-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-violet-600 shadow-[0_4px_0px_#7c3aed]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Slogan Efektif)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Bersih desaku, sehat wargaku!\"", a: true, exp: "Singkat, padat, berirama, dan langsung menyampaikan pesan kebersihan." },
{ t: "\"Kami adalah sebuah organisasi yang sangat peduli terhadap kelestarian lingkungan hidup di sekitar kita sejak tahun lalu.\"", a: false, exp: "Terlalu panjang dan bertele-tele, tidak memenuhi kriteria slogan." },
{ t: "\"Tiada hari tanpa membaca buku untuk masa depan cerah.\"", a: true, exp: "Padat makna dan mudah diingat sebagai slogan pendidikan." },
{ t: "\"Silakan datang berkunjung ke toko kami kapan saja karena kami menyediakan berbagai macam barang yang mungkin anda cari dengan harga bersaing.\"", a: false, exp: "Ini bukan slogan melainkan kalimat pengantar yang terlalu panjang." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, answerChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ1Data.a);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.a === true) btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Pilihan Slogan Terbaik)
let countQ2 = 0;
const q2Bank = [
{
story: "Sekolah mengadakan lomba membuat slogan bertema kesehatan lingkungan.",
q: "Manakah pilihan slogan yang paling tepat dan menarik?",
ops: ["Lingkungan bersih hidup jadi nyaman", "Sampah berserakan di mana-mana bikin kotor pandangan mata", "Ayo kumpul bersihkan sampah"],
ans: 0,
exp: "Pilihan pertama sangat ringkas, padat, dan berirama khas slogan ideal."
},
{
story: "Sebuah kelompok ingin membuat slogan untuk memotivasi giat belajar.",
q: "Pilih slogan pendidikan yang paling efektif:",
ops: ["Rajin pangkal pandai, hemat pangkal kaya", "Buku tebal sekali harganya mahal", "Sekolah tempat duduk diam"],
ans: 0,
exp: "Peribahasa/slogan klasik 'Rajin pangkal pandai' sangat melekat dan efektif memotivasi."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 4
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Slogan harus dibuat singkat, padat, dan...", a: "JELAS" },
{ q: "Ciri khas utama slogan terletak pada pilihan ... yang mencolok.", a: "KATA" },
{ q: "Slogan 'Buku adalah ... dunia' (isi titik-titik).", a: "JENDELA" },
{ q: "Tujuan utama penulisan slogan adalah agar mudah...", a: "DIINGAT" },
{ q: "Frasa atau motto singkat disebut juga sebagai...", a: "SLOGAN" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-violet-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('Seru')) btn.classList.add('border-violet-400', 'bg-violet-50');
else if(btn.innerText.includes('Bisa')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 4
const evaluasiBank = [
{
q: `Ciri utama yang paling menonjol dari sebuah slogan adalah...`,
options: [`Singkat, padat, dan mudah diingat`, `Panjang dan penuh penjelasan ilmiah`, `Berbentuk cerita pendek bersambung`, `Menggunakan angka statistik lengkap`],
a: 0,
exp: "Slogan mengutamakan keringkasan kata agar cepat melekat di ingatan publik."
},
{
q: `Manakah kalimat di bawah ini yang paling ideal dijadikan sebagai slogan kesehatan lingkungan?`,
options: [`Lingkungan bersih cerminan jiwa sehat`, `Jangan pernah membuang sisa bungkus makanan di lantai karena bisa mendatangkan semut`, `Tempat sampah itu dibeli di toko sebelah`, `Petugas kebersihan bekerja setiap pagi`],
a: 0,
exp: "Kalimat pertama sangat ringkas, padat makna, dan berirama khas slogan."
},
{
q: `Mengapa dalam menulis slogan kita harus membatasi jumlah kata?`,
options: [`Agar pembaca tidak cepat bosan dan mudah menghafalnya`, `Karena kertas atau media cetak sangat mahal`, `Karena aturan bahasa melarang kalimat panjang`, `Agar tulisan tidak terlihat oleh orang lain`],
a: 0,
exp: "Pembatasan kata bertujuan menjaga efektivitas daya ingat pembaca."
},
{
q: `Slogan dengan kalimat "Buku adalah jendela dunia" berfungsi untuk...`,
options: [`Memotivasi pentingnya membaca untuk memperluas wawasan`, `Mengajak orang memperbaiki kaca jendela rumah`, `Menjual buku pelajaran sekolah dengan harga murah`, `Menceritakan sejarah penemuan kertas`],
a: 0,
exp: "Jendela dunia adalah metafora untuk luasnya pengetahuan yang didapat dari membaca buku."
},
{
q: `Dalam proses pembuatan slogan, langkah awal yang harus dilakukan adalah...`,
options: [`Menentukan tujuan atau tema pesan yang ingin disampaikan`, `Langsung menggambar poster tanpa kata-kata`, `Menghitung jumlah huruf dalam kamus`, `Meminta pendapat orang lain secara acak`],
a: 0,
exp: "Menentukan tema atau tujuan memastikan arah penulisan slogan menjadi tepat sasaran."
}
];
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-violet-50 hover:border-violet-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 || "TP 4 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 4 Bab 2: " + refleksi,
strategi: "Evaluasi TP 4: Ciri & Penulisan Slogan Efektif"
}, "*");
} else {
alert("Laporan TP 4 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Membuat Iklan, Slogan, dan Poster : 3 Mengidentifikasi pesan dalam iklan nonkomersial (layanan masyarakat) dan menganalisis efektivitasnya.
<!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 Periklanan (TP 3) 🛡️</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: #fdf2f8;
background-image: radial-gradient(#fbcfe8 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-pink-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-pink-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="shield-alert" 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-pink-800 uppercase tracking-widest">Bab 2 - TP 3: Iklan Nonkomersial & Layanan Masyarakat</span>
<span id="progress-text" class="text-xs font-black text-white bg-pink-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-pink-400 via-rose-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 3 -->
<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-pink-100 text-pink-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 TP 3: <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-600 to-rose-600">Iklan Layanan Masyarakat</span> 📢
</h1>
<img src="https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=800&q=80" alt="Iklan Layanan Masyarakat" 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-pink-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-pink-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-rose-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Mengidentifikasi <span class="text-pink-600">pesan moral dan sosial</span> dalam iklan layanan masyarakat.</li>
<li>Menganalisis <span class="text-pink-600">efektivitas kampanye sosial</span> di tengah masyarakat.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menyelami pesan kebaikan sosial? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Iklan Layanan Masyarakat -->
<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-pink-900 bg-pink-100 inline-block px-6 py-2 rounded-2xl">Kekuatan Pesan Sosial 🌱</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Iklan yang mengajak peduli sesama, lingkungan, dan kemajuan bersama.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Ciri ILM -->
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-pink-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Karakteristik Utama ILM</div>
<p class="text-slate-700 font-bold mb-3">Iklan Layanan Masyarakat (ILM) memiliki ciri khas:</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4">
<li>Tidak bertujuan komersial atau mencari laba.</li>
<li>Bersifat persuasif mengajak berbuat kebaikan atau mengubah perilaku buruk.</li>
<li>Biasanya diterbitkan oleh instansi pemerintah, NGO, atau lembaga sosial.</li>
</ul>
</div>
<div class="bg-pink-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-pink-900 italic">"Membangun kesadaran berpikir demi kepentingan publik."</p>
</div>
</div>
<!-- Contoh Isu -->
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-rose-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Topik & Isu Relevan</div>
<p class="text-slate-700 font-bold mb-3">Isu umum yang sering diangkat dalam ILM di sekitar kita:</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4">
<li>Pencegahan perundungan (<span class="text-rose-600">bullying</span>) di sekolah.</li>
<li>Ajakan hemat energi dan menjaga kebersihan lingkungan.</li>
<li>Kampanye tertib berlalu lintas demi keselamatan bersama.</li>
</ul>
</div>
<div class="bg-rose-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-rose-900 italic">"Pesan bermakna untuk perubahan perilaku nyata."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Identifikasi ILM) -->
<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-pink-600">Bedah Pesan ILM</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-pink-100 border-2 border-pink-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-pink-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Apakah pernyataan teks berikut merupakan Iklan Layanan Masyarakat?</p>
<div id="q1-text" class="text-xl text-box text-pink-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, true)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Ya, Benar ILM</button>
<button onclick="checkQ1(this, false)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Bukan (Iklan Komersial)</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-pink-600 text-white rounded-2xl font-black text-xl hover:bg-pink-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Studi Kasus Analisis Kampanye Sosial -->
<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-rose-900 bg-rose-100 inline-block px-6 py-2 rounded-2xl">Analisis Efektivitas Kampanye Sosial 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menilai sejauh mana sebuah ILM sukses menggugah kepedulian publik.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-rose-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Contoh Kasus Kampanye Sekolah Anti-Bullying:</p>
<div class="bg-rose-50 p-6 rounded-2xl border-2 border-rose-200 space-y-3">
<p class="text-slate-800 font-bold italic">"Kata-kata bisa meninggalkan luka yang tak kasat mata. Hentikan perundungan di lingkungan sekolah kita!"</p>
<div class="border-t-2 border-rose-200 pt-3">
<p class="text-slate-700 font-bold"><b>Analisis Keberhasilan Pesan:</b></p>
<ul class="list-disc list-inside text-slate-600 font-medium text-sm mt-1 space-y-1">
<li>Menggunakan analogi emosional ("luka tak kasat mata") agar pembaca berempati.</li>
<li>Menyasar langsung lingkungan terdekat siswa (sekolah).</li>
</ul>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Kampanye Sosial">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Analisis Dampak ILM) -->
<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-rose-600">Dampak Pesan Sosial</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-rose-100 border-2 border-rose-400 px-6 py-2 rounded-full">
<span class="font-black text-rose-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-rose-600 text-white rounded-2xl font-black text-xl hover:bg-rose-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Kampanye Sosial) -->
<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-pink-500 to-rose-500 tracking-wide uppercase">🏁 Balap Kampanye Sosial 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar iklan layanan masyarakat, kumpulkan <b>5 Poin</b>!</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-pink-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 3 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-pink-500 hover:bg-pink-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#db2777] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-pink-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-pink-600 hover:bg-pink-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#db2777] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 3 -->
<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 TP 3 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana kesanmu mempelajari iklan layanan masyarakat 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-pink-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Menginspirasi!</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">Cukup Paham</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">Kurang Jelas</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">Pesan moral apa yang paling berkesan dari materi kampanye sosial ini?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-pink-50 border-2 border-pink-200 focus:border-pink-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 3 & 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 TP 3</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman pesan moral dan efektivitas iklan layanan masyarakat lewat 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-pink-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-pink-700 bg-pink-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 TP 3 -->
<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-pink-900 mb-2">Misi TP 3 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 3: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-pink-500 to-rose-500 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-pink-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-pink-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 3 ke 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-pink-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-pink-500">
<option value="100">Sangat Paham Iklan Layanan Masyarakat!</option>
<option value="75">Paham Sebagian Besar</option>
<option value="50">Perlu Pengulangan</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-pink-500 to-rose-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 TP 3 🚀
</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-pink-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-pink-600 shadow-[0_4px_0px_#db2777]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Identifikasi ILM)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Ayo selamatkan bumi kita dari tumpukan sampah plastik dengan membawa tas belanja kain sendiri!\"", a: true, exp: "Ini adalah kampanye sosial peduli lingkungan (Iklan Layanan Masyarakat)." },
{ t: "\"Dapatkan diskon 50% untuk pembelian produk pakaian bermerek favoritmu hari ini!\"", a: false, exp: "Ini adalah penawaran komersial untuk transaksi jual beli barang." },
{ t: "\"Gunakan helm berstandar SNI demi keselamatan diri dan keluarga tercinta di jalan raya.\"", a: true, exp: "Imbauan keselamatan berlalu lintas merupakan bentuk ILM." },
{ t: "\"Restoran cepat saji buka 24 jam dengan menu spesial ayam renyah gurih.\"", a: false, exp: "Ini iklan komersial produk makanan." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, answerChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ1Data.a);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.a === true) btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Analisis Dampak ILM)
let countQ2 = 0;
const q2Bank = [
{
story: "Kampanye ILM sekolah menampilkan ilustrasi seorang anak yang dikucilkan teman-temannya dengan tulisan: 'Bullying melukai masa depan temanmu. Jadilah kawan, bukan lawan!'",
q: "Apa dampak atau pesan moral utama dari kampanye sosial tersebut?",
ops: ["Mengajak siswa menghentikan perundungan dan membangun solidaritas pertemanan yang sehat", "Menyarankan siswa untuk pindah sekolah lain", "Mengajarkan cara merakit alat sekolah"],
ans: 0,
exp: "Pesan moral berfokus pada penghentian tindakan bullying dan menumbuhkan empati."
},
{
story: "Iklan layanan masyarakat menyajikan data pemborosan air bersih dan instruksi menutup keran saat tidak digunakan.",
q: "Bagaimana cara iklan tersebut memengaruhi kesadaran masyarakat?",
ops: ["Memberikan fakta kerugian dan solusi praktis penghematan air", "Menjual perlengkapan pipa ledeng impor", "Melarang masyarakat mandi setiap hari"],
ans: 0,
exp: "Kombinasi data kerugian dan instruksi praktis membangun kesadaran hemat air."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 3
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "ILM adalah singkatan dari Iklan Layanan...", a: "MASYARAKAT" },
{ q: "Tujuan utama ILM adalah memberikan ... sosial.", a: "EDUKASI" },
{ q: "Apakah ILM bertujuan mencari keuntungan materi/laba? (Ya/Tidak)", a: "TIDAK" },
{ q: "Kampanye anti-bullying di sekolah termasuk jenis iklan...", a: "NONKOMERSIAL" },
{ q: "Pesan moral dalam iklan sosial mengajak warga melakukan...", a: "KEBAIKAN" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-pink-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('Menginspirasi')) btn.classList.add('border-pink-400', 'bg-pink-50');
else if(btn.innerText.includes('Paham')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 3
const evaluasiBank = [
{
q: `Iklan layanan masyarakat umumnya diterbitkan dengan tujuan utama untuk...`,
options: [`Memberikan pencerahan, imbauan, dan edukasi sosial kepada publik`, `Meningkatkan angka penjualan produk perusahaan swasta`, `Mencari keuntungan finansial yang besar`, `Mempromosikan tempat wisata komersial`],
a: 0,
exp: "ILM berfokus murni pada penyuluhan dan edukasi sosial bagi masyarakat."
},
{
q: `Manakah tema di bawah ini yang paling sesuai untuk dibuatkan sebuah Iklan Layanan Masyarakat di lingkungan sekolah?`,
options: [`Ajakan mencegah perundungan (bullying) antar siswa`, `Promosi merek telepon seluler terbaru`, `Diskon harga makanan di restoran cepat saji`, `Penawaran paket liburan akhir pekan`],
a: 0,
exp: "Pencegahan bullying adalah isu sosial yang sangat relevan untuk lingkungan sekolah."
},
{
q: `Karakteristik penting yang membedakan iklan layanan masyarakat dari iklan komersial adalah...`,
options: [`Tidak mencari keuntungan material dan bersifat persuasif sosial`, `Menggunakan durasi yang jauh lebih mahal`, `Hanya ditayangkan pada tengah malam`, `Wajib mencantumkan harga barang`],
a: 0,
exp: "ILM tidak bermotif komersial atau mencari keuntungan finansial."
},
{
q: `Sebuah poster ILM bertuliskan: "Matikan lampu saat tidak digunakan, selamatkan bumi kita!" Pesan moral yang terkandung adalah...`,
options: [`Mengajak masyarakat untuk melakukan penghematan energi demi lingkungan`, `Meminta warga membeli bola lampu baru`, `Menaikkan tarif tagihan listrik bulanan`, `Melarang penggunaan alat elektronik`],
a: 0,
exp: "Kalimat tersebut mengajak pada tindakan hemat energi untuk kelestarian bumi."
},
{
q: `Mengapa penyampaian pesan dalam iklan layanan masyarakat sering kali menggunakan pendekatan emosional atau analogi yang kuat?`,
options: [`Agar masyarakat mudah berempati dan tergerak mengubah perilaku buruk`, `Agar durasi iklan menjadi sangat panjang`, `Agar produk yang diiklankan cepat laku terjual`, `Agar pembaca merasa kebingungan`],
a: 0,
exp: "Pendekatan emosional membantu menggugah empati dan kesadaran publik secara mendalam."
}
];
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-pink-50 hover:border-pink-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 || "TP 3 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 3 Bab 2: " + refleksi,
strategi: "Evaluasi TP 3: Iklan Layanan Masyarakat"
}, "*");
} else {
alert("Laporan TP 3 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Membuat Iklan, Slogan, dan Poster : 2 Menginterpretasikan pesan dan menganalisis efektivitas iklan komersial berdasarkan kelengkapan informasinya.
<!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 Periklanan (TP 2) 📺</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: #f0fdfa;
background-image: radial-gradient(#ccfbf1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-teal-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-teal-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="tv" 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-teal-800 uppercase tracking-widest">Bab 2 - TP 2: Analisis Efektivitas Iklan Komersial</span>
<span id="progress-text" class="text-xs font-black text-white bg-teal-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-teal-400 via-emerald-500 to-green-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 2 -->
<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-teal-100 text-teal-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 TP 2: <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-600 to-emerald-600">Bedah Efektivitas Iklan Komersial</span> 🕵️♂️
</h1>
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80" alt="Analisis Iklan" 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-teal-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-teal-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-emerald-500"></i> Tujuan Pembelajaran Kita (3 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Menginterpretasikan <span class="text-teal-600">pesan tersembunyi</span> dalam iklan komersial.</li>
<li>Menganalisis <span class="text-teal-600">efektivitas iklan</span> berdasarkan kelengkapan informasinya.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menguji kualitas sebuah iklan? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Efektivitas Iklan -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-teal-900 bg-teal-100 inline-block px-6 py-2 rounded-2xl">Kapan Iklan Disebut Efektif? 📊</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Iklan yang baik tidak hanya menarik dilihat, tetapi juga lengkap dan jujur informasinya.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Unsur Kelengkapan -->
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-teal-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Kelengkapan Informasi</div>
<p class="text-slate-700 font-bold mb-3">Iklan komersial yang efektif wajib menyertakan:</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-2 mb-4">
<li>Nama produk yang jelas.</li>
<li>Keunggulan atau spesifikasi produk.</li>
<li>Cara mendapatkan produk (kontak/alamat).</li>
</ul>
</div>
<div class="bg-teal-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-teal-900 italic">"Informasi transparan membangun kepercayaan konsumen."</p>
</div>
</div>
<!-- Daya Persuasi -->
<div class="bg-white p-6 rounded-3xl border-2 border-emerald-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-emerald-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Daya Pikat & Interpretasi Pesan</div>
<p class="text-slate-700 font-bold mb-3">Pesan dalam iklan sering kali memadukan unsur visual, audio, dan bahasa persuasif untuk menggugah emosi pembeli.</p>
</div>
<div class="bg-emerald-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-emerald-900 italic">"Mampu mengubah rasa penasaran menjadi keputusan membeli."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Kelengkapan Informasi) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-teal-600">Efektif atau Kurang?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-teal-100 border-2 border-teal-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-teal-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Evaluasi cuplikan iklan komersial berikut:</p>
<div id="q1-text" class="text-xl text-box text-teal-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, true)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Informasi Lengkap (Efektif)</button>
<button onclick="checkQ1(this, false)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Informasi Kurang/Mengambang</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-teal-600 text-white rounded-2xl font-black text-xl hover:bg-teal-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Studi Kasus Interpretasi Pesan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 bg-emerald-100 inline-block px-6 py-2 rounded-2xl">Bedah Pesan Tersirat 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menganalisis maksud di balik kalimat dan visual iklan komersial.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-emerald-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Contoh Analisis Studi Kasus Iklan Smartphone:</p>
<div class="bg-emerald-50 p-6 rounded-2xl border-2 border-emerald-200 space-y-3">
<p class="text-slate-800 font-bold italic">"Tangkap setiap detail malam tanpa batas dengan kamera AI Night Mode."</p>
<div class="border-t-2 border-emerald-200 pt-3">
<p class="text-slate-700 font-bold"><b>Interpretasi Pesan:</b></p>
<ul class="list-disc list-inside text-slate-600 font-medium text-sm mt-1 space-y-1">
<li>Produk menjanjikan keunggulan kamera malam hari yang jernih.</li>
<li>Menggunakan teknologi AI untuk menarik minat konsumen muda pencinta foto.</li>
</ul>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white -rotate-2 hover:rotate-0 transition-transform" alt="Analisis Smartphone">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Interpretasi Pesan Iklan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-emerald-600">Analisis Makna Iklan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="font-black text-emerald-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-emerald-600 text-white rounded-2xl font-black text-xl hover:bg-emerald-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Analisis Iklan) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-emerald-500 tracking-wide uppercase">🏁 Balap Efektivitas Iklan 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar efektivitas & pesan iklan komersial, kumpulkan <b>5 Poin</b>!</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-teal-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 2 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-teal-500 hover:bg-teal-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#0f766e] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-teal-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-teal-600 hover:bg-teal-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#0f766e] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 2 -->
<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 TP 2 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pengalamanmu menganalisis efektivitas iklan 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-teal-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Mudah!</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">Cukup Paham</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">Agak Sulit</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 analisis iklan mana yang masih ingin kamu diskusikan?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-teal-50 border-2 border-teal-200 focus:border-teal-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 2 & 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 TP 2</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji kemampuan analisis efektivitas iklan komersial melalui 5 soal evaluasi.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-teal-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-teal-700 bg-teal-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 2 -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-teal-900 mb-2">Misi TP 2 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 2: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-teal-500 to-emerald-500 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-teal-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-teal-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 2 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-teal-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Penguasaan Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-teal-500">
<option value="100">Sangat Mahir Analisis Efektivitas Iklan!</option>
<option value="75">Cukup Memahami</option>
<option value="50">Perlu Bimbingan Lagi</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-teal-500 to-emerald-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 2 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-teal-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-teal-600 shadow-[0_4px_0px_#0f766e]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Kelengkapan Informasi)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Beli minuman segar rasa buah asli di Toko Berkah, Jl. Merdeka No. 10. Hubungi 0812345678.\"", a: true, exp: "Iklan ini memuat informasi produk, keunggulan, serta kontak/alamat yang jelas." },
{ t: "\"Rasakan kelezatannya yang tiada tara! Dijamin bikin ketagihan setiap hari.\"", a: false, exp: "Iklan ini kurang efektif karena tidak menyebutkan nama produk, merek, atau tempat pembelian yang jelas." },
{ t: "\"Sepatu lari Aerofit sol empuk anti slip. Dapatkan di seluruh gerai olahraga terdekat atau online store kami.\"", a: true, exp: "Memuat nama produk, keunggulan, dan tempat pembelian secara transparan." },
{ t: "\"Segera miliki barang impianmu sekarang juga sebelum kehabisan!\"", a: false, exp: "Informasi sangat mengambang karena tidak menjelaskan barang apa yang dijual." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, answerChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ1Data.a);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.a === true) btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Interpretasi Pesan)
let countQ2 = 0;
const q2Bank = [
{
story: "Iklan mobil keluarga menampilkan perjalanan mudik yang nyaman dengan kabin luas dan AC sejuk di tengah teriknya cuaca.",
q: "Apa interpretasi pesan utama dari iklan tersebut?",
ops: ["Menonjolkan kenyamanan dan kelegaan ruang untuk perjalanan jauh bersama keluarga", "Menjual suku cadang mesin mobil balap", "Mengajak orang berjalan kaki saat mudik"],
ans: 0,
exp: "Visual kabin luas dan kenyamanan AC mengarah pada aspek kenyamanan perjalanan keluarga."
},
{
story: "Iklan deterjen memperlihatkan pakaian putih kotor akibat noda lumpur kembali bersinar cerah hanya dalam sekali kucek.",
q: "Pesan tersirat apa yang ingin disampaikan kepada konsumen?",
ops: ["Deterjen tersebut sangat kuat dan efektif membersihkan noda berat dengan mudah", "Mencuci pakaian harus menggunakan air panas", "Lumpur bermanfaat untuk pakaian"],
ans: 0,
exp: "Efisiensi pembersihan noda adalah pesan persuasif utama produk pembersih."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 2
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Iklan yang informasinya lengkap dan jelas disebut iklan yang...", a: "EFEKTIF" },
{ q: "Nama produk, keunggulan, dan ... adalah isi penting iklan.", a: "KONTAK" },
{ q: "Maksud tersembunyi di balik teks dan visual iklan disebut ... pesan.", a: "INTERPRETASI" },
{ q: "Daya pikat iklan komersial bertujuan memengaruhi keputusan...", a: "KONSUMEN" },
{ q: "Evaluasi kualitas informasi iklan termasuk menguji tingkat...", a: "KREDIBILITAS" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-teal-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('Mudah')) btn.classList.add('border-teal-400', 'bg-teal-50');
else if(btn.innerText.includes('Paham')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 2
const evaluasiBank = [
{
q: `Suatu iklan komersial dinilai efektif apabila menyajikan informasi yang...`,
options: [`Lengkap, jelas, dan dapat dipercaya`, `Sangat singkat tanpa nama produk`, `Penuh dengan kalimat kiasan yang rumit`, `Hanya menampilkan gambar pemandangan`],
a: 0,
exp: "Informasi yang lengkap dan transparan menjadi tolok ukur utama efektivitas iklan."
},
{
q: `Perhatikan kalimat iklan: "Gunakan pasta gigi X untuk senyum cemerlang setiap hari." Interpretasi pesan dari kalimat tersebut adalah...`,
options: [`Produk menjanjikan gigi yang lebih putih dan bersih`, `Pasta gigi dapat dipakai untuk mencuci piring`, `Pengguna wajib tersenyum sepanjang hari`],
a: 0,
exp: "Senyum cemerlang menginterpretasikan hasil gigi yang putih dan bersih berkat produk."
},
{
q: `Mengapa sebuah iklan yang tidak mencantumkan informasi kontak atau tempat pembelian dianggap kurang efektif?`,
options: [`Karena menyulitkan konsumen untuk mendapatkan produk tersebut`, `Karena durasi penayangannya terlalu lama`, `Karena harganya pasti sangat mahal`, `Karena tidak memiliki gambar`],
a: 0,
exp: "Kontak atau tempat pembelian penting agar konsumen tahu cara memperoleh produk."
},
{
q: `Dalam menganalisis efektivitas iklan komersial, aspek kelengkapan informasi mencakup...`,
options: [`Nama produk, keunggulan, dan cara mendapatkan produk`, `Jumlah penonton di televisi`, `Nama sutradara pembuat iklan`, `Waktu tayang saat sore hari`],
a: 0,
exp: "Kelengkapan informasi berfokus pada kejelasan identitas dan fitur barang yang ditawarkan."
},
{
q: `Interpretasi pesan dalam iklan komersial bertujuan untuk...`,
options: [`Memahami maksud tersirat di balik teks dan visual yang disajikan`, `Menghafalkan seluruh dialog pemain iklan`, `Mencari kesalahan hukum pembuat iklan`, `Menghitung total keuntungan perusahaan`],
a: 0,
exp: "Interpretasi membantu kita menangkap makna persuasif dan pesan mendalam dari sebuah iklan."
}
];
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-teal-50 hover:border-teal-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 || "TP 2 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 2 Bab 2: " + refleksi,
strategi: "Evaluasi TP 2: Analisis Efektivitas Iklan Komersial"
}, "*");
} else {
alert("Laporan TP 2 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 7
Bahasa Indonesia
Membuat Iklan, Slogan, dan Poster : 1 Menjelaskan pengertian iklan, membedakan iklan komersial dan nonkomersial, serta mengidentifikasi informasi penting dalam iklan.
<!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 Periklanan (TP 1) 📢</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fffbeb;
background-image: radial-gradient(#fde68a 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-amber-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-amber-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="megaphone" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-amber-800 uppercase tracking-widest">Bab 2 - TP 1: Pengertian & Jenis Iklan</span>
<span id="progress-text" class="text-xs font-black text-white bg-amber-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 1 -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 1: <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600">Dunia Iklan & Pesannya</span> 🎯
</h1>
<img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&w=800&q=80" alt="Iklan" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-amber-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Menjelaskan <span class="text-amber-600">pengertian iklan</span> secara tepat.</li>
<li>Membedakan <span class="text-amber-600">iklan komersial dan nonkomersial</span>.</li>
<li>Mengidentifikasi <span class="text-amber-600">informasi penting</span> dalam sebuah iklan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membongkar rahasia di balik iklan? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Iklan -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Apa itu Iklan? 💡</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pesan pembawa informasi untuk membujuk atau menggerakkan khalayak ramai.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Komersial -->
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Komersial">
<div class="bg-amber-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Iklan Komersial (Niaga)</div>
<p class="text-slate-700 font-bold mb-3">Bertujuan menawarkan produk atau jasa untuk mendapatkan <span class="text-amber-600 font-black">keuntungan/penjualan</span>.</p>
</div>
<div class="bg-amber-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-amber-900 italic">Contoh: Iklan makanan, handphone, pakaian, jasa ojek online.</p>
</div>
</div>
<!-- Nonkomersial -->
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1532629345422-7515f3d16bb9?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Layanan Masyarakat">
<div class="bg-orange-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Iklan Nonkomersial (Layanan Masyarakat)</div>
<p class="text-slate-700 font-bold mb-3">Bertujuan memberikan pencerahan, imbauan, atau edukasi sosial tanpa mencari <span class="text-orange-600 font-black">keuntungan material</span>.</p>
</div>
<div class="bg-orange-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-orange-900 italic">Contoh: Iklan hemat energi, bahaya narkoba, taat prokes.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Jenis Iklan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-amber-600">Komersial vs Nonkomersial</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-amber-100 border-2 border-amber-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-amber-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan jenis iklan dari pernyataan berikut:</p>
<div id="q1-text" class="text-2xl text-box text-amber-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, true)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Komersial</button>
<button onclick="checkQ1(this, false)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Nonkomersial (Layanan M.)</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-amber-600 text-white rounded-2xl font-black text-xl hover:bg-amber-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Informasi Penting dalam Iklan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Menggali Informasi Iklan 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Detektif iklan harus jeli melihat pesan utama yang disampaikan.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Unsur penting yang wajib dicari dalam sebuah iklan:</p>
<div class="bg-orange-50 p-6 rounded-2xl border-2 border-orange-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-orange-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Produk/Pesan Utama:</b> Apa yang ditawarkan atau disosialisasikan?</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-orange-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Sasaran (Target):</b> Kepada siapa iklan ini ditujukan (anak-anak, remaja, umum)?</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-orange-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Daya Tarik/Keunggulan:</b> Alasan mengapa khalayak harus tertarik.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Analisis Iklan">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Analisis Informasi Iklan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-orange-600">Bedah Pesan Iklan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-orange-100 border-2 border-orange-400 px-6 py-2 rounded-full">
<span class="font-black text-orange-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-orange-600 text-white rounded-2xl font-black text-xl hover:bg-orange-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Iklan Cerdas) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-500 tracking-wide uppercase">🏁 Balap Iklan Cerdas 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat seputar pengertian & jenis iklan, kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-amber-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 1 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-amber-500 hover:bg-amber-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#d97706] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#d97706] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 1 -->
<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 TP 1 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang iklan 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-amber-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Paham!</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">Cukup Ngerti</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian materi iklan mana yang paling membuatmu penasaran?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-amber-50 border-2 border-amber-200 focus:border-amber-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 1 & 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 TP 1</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman pengertian dan jenis iklan melalui 5 soal evaluasi.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-amber-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-amber-700 bg-amber-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 1 -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-amber-900 mb-2">Misi TP 1 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 1: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-amber-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-amber-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 1 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-amber-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Pemahaman Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-amber-500">
<option value="100">Sangat Paham Pengertian & Jenis Iklan!</option>
<option value="75">Paham Sebagian Besar</option>
<option value="50">Masih Perlu Belajar</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-amber-500 to-orange-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 1 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-amber-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-amber-600 shadow-[0_4px_0px_#d97706]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Komersial/Nonkomersial)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Diskon besar-besaran akhir tahun untuk semua produk pakaian merek Lokal.\"", a: true, exp: "Ini menawarkan produk untuk transaksi jual beli (Iklan Komersial)." },
{ t: "\"Ayo hemat penggunaan air demi kelangsungan bumi masa depan!\"", a: false, exp: "Ini berisi imbauan sosial tanpa mencari keuntungan (Iklan Layanan Masyarakat)." },
{ t: "\"Pesan sekarang smartphone tercanggih dengan kamera 108MP!\"", a: true, exp: "Ini adalah promosi produk komersial." },
{ t: "\"Cegah demam berdarah dengan menerapkan 3M Plus di rumah.\"", a: false, exp: "Ini adalah bentuk iklan nonkomersial edukatif." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, answerChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ1Data.a);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.a === true) btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Analisis Informasi)
let countQ2 = 0;
const q2Bank = [
{
story: "Sebuah iklan menampilkan produk susu pertumbuhan khusus anak usia 1-3 tahun dengan kandungan kalsium tinggi.",
q: "Siapa target sasaran utama dari produk iklan tersebut?",
ops: ["Orang tua yang memiliki anak usia balita (1-3 tahun)", "Para atlet profesional", "Lansia di atas 60 tahun"],
ans: 0,
exp: "Iklan susu tersebut ditujukan bagi anak balita dan orang tuanya."
},
{
story: "Iklan lowongan pekerjaan daring menawarkan kemudahan melamar kerja cepat tanpa biaya pendaftaran.",
q: "Apa nilai keunggulan utama yang ditawarkan iklan tersebut?",
ops: ["Proses melamar cepat dan gratis", "Biaya pendaftaran yang mahal", "Lokasi kantor yang jauh"],
ans: 0,
exp: "Keunggulan yang ditonjolkan adalah kemudahan cepat dan tanpa biaya."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 1
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Pesan yang bertujuan membujuk pembeli disebut...", a: "IKLAN" },
{ q: "Iklan niaga disebut juga iklan...", a: "KOMERSIAL" },
{ q: "Iklan edukasi sosial disebut iklan layanan...", a: "MASYARAKAT" },
{ q: "Tujuan utama iklan komersial adalah mencari...", a: "KEUNTUNGAN" },
{ q: "Informasi kepada siapa iklan ditujukan disebut ... sasaran.", a: "TARGET" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-amber-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham')) btn.classList.add('border-amber-400', 'bg-amber-50');
else if(btn.innerText.includes('Ngerti')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 1
const evaluasiBank = [
{
q: `Pesan komunikasi penyiaran yang bertujuan untuk membujuk orang membeli produk disebut...`,
options: [`Iklan komersial`, `Iklan layanan masyarakat`, `Slogan`, `Poster`],
a: 0,
exp: "Iklan komersial berfokus pada penawaran produk untuk mendapatkan keuntungan."
},
{
q: `Manakah di bawah ini yang merupakan tujuan utama dari iklan nonkomersial (layanan masyarakat)?`,
options: [`Mendapatkan laba penjualan setinggi-tingginya`, `Memberikan edukasi atau imbauan sosial`, `Menjatuhkan produk pesaing`, `Memamerkan karya seni`],
a: 1,
exp: "Iklan layanan masyarakat bertujuan memberikan pencerahan dan edukasi sosial."
},
{
q: `Sebuah iklan menawarkan sabun mandi dengan keunggulan membunuh kuman 99%. Unsur informasi yang ditonjolkan adalah...`,
options: [`Harga produk`, `Keunggulan/daya tarik produk`, `Lokasi pabrik`, `Nama pembuat iklan`],
a: 1,
exp: "Membunuh kuman 99% merupakan keunggulan atau daya tarik utama produk."
},
{
q: `Perbedaan mendasar antara iklan komersial dan nonkomersial terletak pada...`,
options: [`Media yang digunakan`, `Tujuan akhir pembuatan iklan`, `Waktu penayangannya`, `Jumlah kata yang dipakai`],
a: 1,
exp: "Perbedaan utamanya adalah motif pencarian keuntungan (komersial) versus edukasi sosial (nonkomersial)."
},
{
q: `Jika sebuah iklan kosmetik remaja ditayangkan khusus untuk anak muda usia sekolah, hal ini berkaitan dengan unsur...`,
options: [`Target sasaran iklan`, `Biaya produksi iklan`, `Durasi tayang iklan`, `Ukuran cetak iklan`],
a: 0,
exp: "Menentukan siapa pengguna atau pembeli produk adalah penentuan target sasaran."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-amber-50 hover:border-amber-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "TP 1 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 1 Bab 2: " + refleksi,
strategi: "Evaluasi TP 1: Pengertian & Jenis Iklan"
}, "*");
} else {
alert("Laporan TP 1 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
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 9
Bahasa Indonesia
MENULIS TEKS LAPORAN HASIL OBSERVASI - 6 Menyunting dan Merevisi 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 Menyunting & Revisi 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: #ecfeff;
background-image: radial-gradient(#a5f3fc 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: #0891b2 !important; color: white !important; border-bottom-color: #164e63 !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-cyan-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-cyan-600 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="check-square" 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-cyan-900 uppercase tracking-widest">Bahasa Indonesia - TP 6: Menyunting LHO</span>
<span id="progress-text" class="text-xs font-black text-white bg-cyan-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-cyan-500 to-blue-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover -->
<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-cyan-100 text-cyan-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 6: <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-teal-600">Menyunting & Revisi Teks LHO</span> 🔍
</h1>
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=800&q=80" alt="Menyunting" 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-cyan-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-cyan-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>Memeriksa kesalahan <span class="text-cyan-600">ejaan, tanda baca, dan pilihan kata (diksi)</span> dalam teks LHO.</li>
<li>Melakukan <span class="text-cyan-600">revisi atau perbaikan struktur</span> agar teks laporan menjadi sempurna.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menjadi editor profesional? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Menyunting -->
<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-cyan-900 bg-cyan-100 inline-block px-6 py-2 rounded-2xl">Apa itu Menyunting? 🛠️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menyunting adalah proses memeriksa dan memperbaiki naskah tulisan sebelum diserahkan.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-cyan-200 shadow-md">
<div class="bg-cyan-600 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Aspek Kebahasaan & Ejaan</div>
<p class="text-slate-700 font-bold mb-3">Memeriksa penulisan huruf kapital, tanda titik, koma, serta penggunaan kata baku sesuai PUEBI/EYD.</p>
<div class="bg-cyan-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-cyan-900">Contoh: Memperbaiki kata "di amati" menjadi "diamati".</p>
</div>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-teal-200 shadow-md">
<div class="bg-teal-600 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Aspek Isi & Struktur</div>
<p class="text-slate-700 font-bold mb-3">Memastikan kelengkapan struktur (pernyataan umum dan deskripsi bagian) serta keakuratan fakta.</p>
<div class="bg-teal-50 p-4 rounded-xl mb-4 text-center">
<p class="text-lg text-box text-teal-900">Menghapus bagian yang bersifat opini pribadi.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-cyan-600">Koreksi Penulisan!</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-cyan-100 border-2 border-cyan-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-cyan-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 perbaikan penulisan yang paling tepat dan baku?</p>
<div id="q1-options" class="grid grid-cols-1 gap-3 max-w-xl mx-auto"></div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-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-cyan-600 text-white rounded-2xl font-black text-xl hover:bg-cyan-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Tahapan Revisi -->
<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">Tahapan Merevisi Naskah 📝</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana cara memperbaiki draf laporan agar layak dipublikasikan?</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> Fokus Perbaikan:</h3>
<ul class="list-disc list-inside space-y-2 text-slate-700 font-bold">
<li>Mencoret kalimat yang tidak nyambung dengan topik observasi.</li>
<li>Mengubah kata tidak baku menjadi baku.</li>
<li>Menyusun ulang tata letak paragraf agar runtut.</li>
</ul>
</div>
</div>
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?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="Revisi">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-teal-600">Temukan Kesalahan!</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 dalam laporan observasi di bawah ini yang mengandung kesalahan penulisan?</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 editor atau proses penyuntingan 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-1522071820081-009f0129c71c?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="Tim">
<h4 class="font-black text-blue-800 text-xl mb-2">Kasus 1: Saling Tukar Naskah Teman</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">Dalam pembelajaran di kelas, guru sering meminta siswa bertukar draf tulisan dengan teman sebangku.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?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="Publikasi">
<h4 class="font-black text-cyan-800 text-xl mb-2">Kasus 2: Kualitas Publikasi Laporan</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">Laporan yang bersih dari salah ketik akan mencerminkan kecermatan penulisnya.</p>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-cyan-600">Uji Peran Editor</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-cyan-100 border-2 border-cyan-400 px-6 py-2 rounded-full">
<span class="font-black text-cyan-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-cyan-600 text-white rounded-2xl font-black text-xl hover:bg-cyan-700 transition block">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: Racing Game -->
<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-cyan-600 to-teal-600 tracking-wide uppercase">🏁 Balap Penyuntingan Cerdas 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Koreksi 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-cyan-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-cyan-600 hover:bg-cyan-500 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#164e63] 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 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 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 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 transition text-slate-300">Ganti Soal</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-cyan-400 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-cyan-600 hover:bg-cyan-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#164e63] transition">Balapan Lagi 🔄</button>
</div>
</div>
<!-- Slide 9: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana petualangan Misi 6 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">Apa kesulitan utama saat menyunting tulisan teman?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-cyan-50 border-2 border-cyan-200 focus:border-cyan-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Evaluasi & LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi 6</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan pemahamanmu tentang penyuntingan dan revisi LHO melalui 5 soal ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-cyan-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-cyan-800 bg-cyan-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>
<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-cyan-900 mb-2">Misi 6 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-cyan-600 to-blue-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-cyan-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-cyan-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 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">
<option value="100">100% - Sangat Paham Cara Menyunting 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-cyan-600 to-blue-600 text-white text-xl font-black rounded-2xl shadow-lg transition-all relative z-10">Kirim Laporan Misi 🚀</button>
</div>
</div>
</div>
</main>
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-cyan-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-cyan-700 shadow-[0_4px_0px_#164e63]">
<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;
}
let countQ1 = 0;
const q1Bank = [{ teks: "Manakah penulisan kata depan 'di' dan imbuhan 'di-' yang benar dalam kalimat laporan?", ans: "Tanaman obat itu ditanam di halaman sekolah.", ops: ["Tanaman obat itu ditanam di halaman sekolah.", "Tanaman obat itu di tanam dihalaman sekolah."], exp: "'ditanam' adalah kata kerja pasif (di- digabung), sedangkan 'di halaman' adalah keterangan tempat (di dipisah)." }];
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();
let countQ2 = 0;
const q2Bank = [{ text: "Manakah kalimat perbaikan yang paling tepat untuk menggantikan kalimat tidak baku: 'Banyak anak-anak pada ngumpul di kantin sekolah.'", ans: "Banyak siswa berkumpul di kantin sekolah.", ops: ["Banyak siswa berkumpul di kantin sekolah.", "Banyak anak-anak pada ngumpul di kantin."] }];
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>Kata 'pada ngumpul' tidak baku dan diperbaiki menjadi 'berkumpul'.`;
} 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>Perbaikan baku yang tepat adalah: <b>${currentQ2Data.ans}</b>.`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
let countQ3 = 0;
const q3Bank = [{ q: "Apa tujuan utama seorang editor melakukan penyuntingan pada teks LHO buatan penulis?", ops: ["Menghilangkan kesalahan ejaan, diksi, dan memastikan struktur laporan padu", "Mengubah fakta observasi menjadi cerita karangan bebas", "Menghapus seluruh isi teks tanpa alasan"], ans: "Menghilangkan kesalahan ejaan, diksi, dan memastikan struktur laporan padu", exp: "Penyuntingan bertujuan menyempurnakan naskah agar sesuai kaidah bahasa Indonesia." }];
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();
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Proses memeriksa dan memperbaiki naskah disebut...", a: "MENYUNTING" },
{ q: "Orang yang melakukan perbaikan teks disebut...", a: "EDITOR" },
{ q: "Kesalahan penulisan huruf atau kata sering disebut...", a: "TYPO" },
{ q: "Kata tidak baku harus diubah menjadi kata...", a: "BAKU" },
{ q: "Penulisan kata depan 'di' harus dipisah jika diikuti kata...", a: "TEMPAT" }
];
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();
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');
}
const evaluasiBank = [
{ q: "Kegiatan memeriksa, memperbaiki, dan menyempurnakan naskah tulisan laporan disebut...", options: ["Menyunting", "Membaca cepat", "Mengarang bebas", "Menghafal teks"], a: 0, exp: "Menyunting adalah proses mengoreksi kesalahan ejaan, tanda baca, dan diksi pada naskah." },
{ q: "Manakah di bawah ini yang merupakan fokus utama dalam kegiatan menyunting teks LHO?", options: ["Kesalahan ejaan, tanda baca, dan kata baku", "Jumlah halaman naskah", "Warna sampul laporan", "Nama lengkap penulis"], a: 0, exp: "Penyuntingan berfokus pada perbaikan aspek kebahasaan dan struktur isi teks." },
{ q: "Perbaikan yang tepat untuk kalimat tidak baku: 'Kita harus rajin membersihkan lingkungan sekolah ditiap hari.' adalah...", options: ["Kita harus rajin membersihkan lingkungan sekolah setiap hari.", "Kita harus rajin membersihkan lingkungan sekolah di tiap hari."], a: 0, exp: "Kata 'di tiap' harus diganti atau digabung menjadi 'setiap hari' agar baku." },
{ q: "Mengapa seorang penulis dianjurkan untuk meminta bantuan teman menyunting tulisannya?", options: ["Agar kesalahan kecil atau typo lebih mudah ditemukan oleh sudut pandang lain", "Agar tugas cepat selesai tanpa dibaca", "Agar tulisan menjadi milik bersama"], a: 0, exp: "Sudut pandang orang lain (teman) sangat membantu mendeteksi kesalahan yang terlewat." },
{ q: "Jika dalam laporan observasi ditemukan kalimat opini pribadi, maka tindakan penyunting yang tepat adalah...", options: ["Memperbaiki atau menghapusnya agar laporan tetap objektif", "Membiarkannya saja", "Menambahkan lebih banyak opini", "Mengubah laporan menjadi puisi"], a: 0, exp: "Teks LHO harus objektif dan faktual, sehingga opini pribadi harus disunting/dihilangkan." }
];
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-cyan-50 hover:border-cyan-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 6: " + refleksi, strategi: "Evaluasi Part 6: Menyunting dan Revisi LHO" }, "*");
} else {
alert("Laporan Misi Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
MENULIS TEKS LAPORAN HASIL OBSERVASI - 5 Menulis 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 Menulis 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: #fff1f2;
background-image: radial-gradient(#fecdd3 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: #e11d48 !important; color: white !important; border-bottom-color: #9f1239 !important; pointer-events: none; }
.btn-wrong { background-color: #64748b !important; color: white !important; border-bottom-color: #334155 !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-rose-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-rose-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="edit-3" 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-rose-800 uppercase tracking-widest">Bahasa Indonesia - TP 5: Menulis LHO</span>
<span id="progress-text" class="text-xs font-black text-white bg-rose-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-pink-400 via-rose-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover -->
<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-rose-100 text-rose-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 5: <span class="text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-pink-600">Merancang & Menulis LHO</span> 📝
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Menulis" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-rose-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-pink-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>Menentukan <span class="text-rose-600">objek observasi</span> yang menarik di lingkungan sekitar.</li>
<li>Menyusun <span class="text-rose-600">kerangka dan naskah teks LHO</span> secara utuh dan sistematis.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap merangkai kata menjadi laporan? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Langkah Menulis LHO -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-rose-900 bg-rose-100 inline-block px-6 py-2 rounded-2xl">Langkah-Langkah Menulis 📋</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana cara memulai penulisan laporan hasil observasi dari nol?</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-rose-200 shadow-md">
<div class="bg-rose-500 text-white w-10 h-10 rounded-xl flex items-center justify-center font-black text-xl mb-3">1</div>
<h3 class="font-black text-rose-900 text-xl mb-2">Tentukan Objek</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">Pilih objek nyata yang bisa diamati secara langsung, misalnya kantin sekolah atau tanaman obat.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-pink-200 shadow-md">
<div class="bg-pink-500 text-white w-10 h-10 rounded-xl flex items-center justify-center font-black text-xl mb-3">2</div>
<h3 class="font-black text-pink-900 text-xl mb-2">Buat Kerangka</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">Susun struktur mulai dari Pernyataan Umum, Deskripsi Bagian, hingga Deskripsi Manfaat.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-red-200 shadow-md">
<div class="bg-red-500 text-white w-10 h-10 rounded-xl flex items-center justify-center font-black text-xl mb-3">3</div>
<h3 class="font-black text-red-900 text-xl mb-2">Kembangkan Teks</h3>
<p class="text-slate-600 font-bold text-sm leading-relaxed">Tuliskan laporan menggunakan bahasa baku serta data faktual dari hasil pengamatan.</p>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-rose-600">Urutan Penulisan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-rose-100 border-2 border-rose-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-rose-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<div id="q1-teks" class="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-left font-bold text-slate-700 mb-6"></div>
<p class="text-lg font-bold text-slate-500 mb-4">Manakah langkah pertama yang harus dilakukan sebelum menulis teks LHO?</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-rose-600 text-white rounded-2xl font-black text-xl hover:bg-rose-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Merumuskan Kalimat -->
<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-pink-900 bg-pink-100 inline-block px-6 py-2 rounded-2xl">Merangkai Paragraf Laporan ✍️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Contoh pengembangan kerangka menjadi paragraf laporan utuh.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-pink-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-pink-50 p-6 rounded-2xl border-2 border-pink-200 space-y-3">
<h3 class="text-xl font-black text-pink-900 flex items-center gap-2"><i data-lucide="check-circle" class="text-pink-600"></i> Contoh Paragraf Laporan:</h3>
<p class="text-slate-700 font-medium italic leading-relaxed">
"Kantin SMP Negeri 72 Maluku Tengah merupakan salah satu fasilitas sekolah yang bersih dan tertata. Kantin ini menyediakan berbagai makanan sehat serta dilengkapi puluhan meja kursi untuk kenyamanan siswa."
</p>
</div>
</div>
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?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 -->
<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-pink-600">Pilih Kalimat Baku</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-pink-100 border-2 border-pink-400 px-6 py-2 rounded-full">
<span class="font-black text-pink-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center flex flex-col items-center">
<p class="text-lg font-bold text-slate-500 mb-4">Manakah kalimat laporan yang paling sesuai dengan kaidah objektif dan baku?</p>
<div id="q2-text" class="text-xl text-box text-pink-800 mb-8 bg-slate-50 p-6 rounded-2xl border border-slate-100 italic w-full">?</div>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full max-w-xl mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-xl mx-auto py-4 bg-pink-600 text-white rounded-2xl font-black text-xl hover:bg-pink-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 keterampilan menulis laporan sangat berguna?</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-1522071820081-009f0129c71c?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="Tim">
<h4 class="font-black text-blue-800 text-xl mb-2">Kasus 1: Portofolio & Tugas Proyek</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">Di era Kurikulum Merdeka, siswa sering dituntut menghasilkan portofolio proyek kelompok.</p>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-md">
<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=600&q=80" class="w-full h-40 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Menulis">
<h4 class="font-black text-indigo-800 text-xl mb-2">Kasus 2: Menulis Artikel / Blog Ilmiah</h4>
<p class="text-slate-600 font-bold mb-3 leading-relaxed">Format teks LHO adalah dasar penulisan artikel ilmiah populer yang sangat bagus.</p>
</div>
</div>
</div>
<!-- Slide 7: Auto-Quiz 3 -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-blue-600">Uji Prosedur Menulis</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-blue-100 border-2 border-blue-400 px-6 py-2 rounded-full">
<span class="font-black text-blue-800 text-xl">SOAL DIJAWAB: <span id="count-q3">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl">
<p class="text-lg font-bold text-slate-500 mb-4 text-center border-b-2 border-dashed pb-4">Baca pertanyaan berikut:</p>
<p id="q3-text" class="text-xl font-bold text-slate-800 mb-8 leading-relaxed text-center"></p>
<div id="q3-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-lg mx-auto"></div>
<div id="q3-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q3-next-btn" onclick="generateQ3()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition block">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 8: Racing Game -->
<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-rose-500 to-pink-500 tracking-wide uppercase">🏁 Balap Penulisan LHO 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat, angkat tangan, dan kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1"><span class="text-rose-600">KELOMPOK 1</span><span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span></div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1"><span class="text-blue-600">KELOMPOK 2</span><span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span></div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1"><span class="text-amber-600">KELOMPOK 3</span><span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span></div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-rose-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-rose-500 hover:bg-rose-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#9f1239] 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 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 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 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 transition text-slate-300">Ganti Soal</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-rose-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-rose-600 hover:bg-rose-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#9f1239] transition">Balapan Lagi 🔄</button>
</div>
</div>
<!-- Slide 9: Refleksi -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi Belajar 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana petualangan Misi 5 hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-green-400 transition-all text-center"><div class="text-6xl mb-2">😎</div><h3 class="font-black text-xl text-slate-700">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">Objek apa yang ingin kamu jadikan bahan tulisan laporan?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-rose-50 border-2 border-rose-200 focus:border-rose-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 10: Evaluasi & LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir Misi 5</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Buktikan pemahamanmu tentang penulisan LHO melalui 5 soal ini.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-rose-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-rose-700 bg-rose-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>
<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-rose-900 mb-2">Misi 5 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-rose-500 to-pink-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-rose-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-rose-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 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">
<option value="100">100% - Sangat Paham Cara Menulis 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-rose-500 to-pink-600 text-white text-xl font-black rounded-2xl shadow-lg transition-all relative z-10">Kirim Laporan Misi 🚀</button>
</div>
</div>
</div>
</main>
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-rose-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-rose-600 shadow-[0_4px_0px_#9f1239]">
<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;
}
let countQ1 = 0;
const q1Bank = [{ teks: "Sebelum mulai menulis teks laporan hasil observasi, hal pertama yang harus ditentukan oleh seorang penulis adalah...", ans: "Menentukan objek observasi yang nyata", ops: ["Menentukan objek observasi yang nyata", "Langsung mencetak buku laporan", "Membuat judul fiksi yang megah"], exp: "Penulisan LHO wajib diawali dengan menentukan objek riil yang akan diamati." }];
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();
let countQ2 = 0;
const q2Bank = [{ text: "Manakah kalimat penulisan laporan yang paling tepat menggunakan diksi baku?", ans: "Kantin sekolah menyediakan berbagai makanan sehat.", ops: ["Kantin sekolah menyediakan berbagai makanan sehat.", "Kantin di sana itu tempatnya asyik banget buat nongkrong."] }];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-text').innerText = currentQ2Data.text;
let options = shuffle([...currentQ2Data.ops]);
let optHtml = "";
options.forEach(opt => {
optHtml += `<button onclick="checkQ2(this, '${opt}' === '${currentQ2Data.ans}')" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>Kalimat tersebut menggunakan bahasa baku dan objektif.`;
} 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>Kalimat baku yang tepat adalah: <b>${currentQ2Data.ans}</b>.`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
let countQ3 = 0;
const q3Bank = [{ q: "Setelah kerangka teks LHO tersusun, apa langkah selanjutnya yang harus dilakukan?", ops: ["Mengembangkan kerangka menjadi paragraf utuh", "Langsung mengumpulkan tugas tanpa dibaca", "Menghapus semua catatan pengamatan"], ans: "Mengembangkan kerangka menjadi paragraf utuh", exp: "Kerangka dikembangkan dengan merangkai kalimat definisi dan deskripsi yang runtut." }];
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();
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Langkah pertama sebelum menulis LHO adalah menentukan...", a: "OBJEK" },
{ q: "Sebelum menulis paragraf utuh, kita perlu membuat...", a: "KERANGKA" },
{ q: "Bahasa yang digunakan dalam menulis laporan harus...", a: "BAKU" },
{ q: "Bagian penutup laporan sering disebut deskripsi...", a: "MANFAAT" },
{ q: "Menulis laporan harus berdasarkan fakta dan bersifat...", a: "OBJEKTIF" }
];
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();
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');
}
const evaluasiBank = [
{ q: "Langkah awal yang paling tepat sebelum mulai menulis teks laporan hasil observasi adalah...", options: ["Menentukan objek pengamatan", "Menulis kesimpulan akhir", "Membuat daftar pustaka", "Mencetak buku laporan"], a: 0, exp: "Penulisan LHO harus diawali dengan pemilihan dan penentuan objek nyata yang akan diamati." },
{ q: "Sebelum merangkai kalimat laporan secara utuh, seorang penulis biasanya menyusun...", options: ["Kerangka karangan", "Kisah fiksi pendek", "Puisi bebas", "Tabel matematika"], a: 0, exp: "Kerangka karangan membantu menyusun struktur teks agar runtut." },
{ q: "Bahasa yang digunakan dalam menulis laporan hasil observasi harus bersifat...", options: ["Baku, objektif, dan faktual", "Subjektif dan emosional", "Penuh dengan majas kiasan", "Mengandung unsur fantasi"], a: 0, exp: "Laporan wajib ditulis menggunakan bahasa baku dan faktual." },
{ q: "Bagian dalam kerangka teks LHO yang memuat definisi atau klasifikasi objek terletak pada bagian...", options: ["Pernyataan umum", "Deskripsi manfaat", "Penutup cerita", "Lampiran gambar"], a: 0, exp: "Pernyataan umum berfungsi sebagai pembuka atau pengenalan objek di awal teks." },
{ q: "Mengapa penulis perlu mengembangkan kerangka menjadi paragraf laporan yang padu?", options: ["Agar informasi mudah dipahami oleh pembaca secara sistematis", "Agar halaman buku terlihat tebal", "Agar pembaca merasa kebingungan", "Agar cerita menjadi seperti dongeng"], a: 0, exp: "Pengembangan paragraf yang padu memastikan informasi hasil observasi tersampaikan dengan jelas." }
];
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-rose-50 hover:border-rose-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 5: " + refleksi, strategi: "Evaluasi Part 5: Menulis Teks LHO" }, "*");
} else {
alert("Laporan Misi Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
📊 Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Rifka Tunnisa Tunny | Statistika : Penyebaran Data & Perubahan Data Matematika — Kelas 8 | 100 | 100% | Refleksi Penyebaran Data: Misi Selesai! | Evaluasi: Ukuran Penyebaran & Perubahan Data |
| Rifka Tunnisa Tunny | Statistika : Misi Statistika Part1 Matematika — Kelas 8 | 100 | 100% | Refleksi Statistika: Misi Selesai! | Evaluasi Individu: Statistika Dasar |
| Rifka Tunnisa Tunny | Teorema Pythagoras : Jenis Segitiga & Pythagoras Matematika — Kelas 8 | 100 | 100% | Refleksi Jenis Segitiga: Misi Selesai! | Evaluasi: Jenis Sudut pada Segitiga |
| Rifka Tunnisa Tunny | Teorema Pythagoras : Misteri Teorema Pythagoras 📐 Matematika — Kelas 8 | 100 | 100% | Refleksi Pythagoras: Misi Pythagoras Selesai! | Evaluasi: Pembuktian & Tripel Pythagoras |
| alfiansyah mahulauw | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| jidan wabula | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| indri selly | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| asi komala tunny | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| JENITA | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| PUTRI MAHULAUW | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| JAHIRA SOUMENA | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| ilham fajar sely | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 0 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| ABDUL ISHAK MARASABESSY | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| PUTRI MAHULAUW | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| maulana salong | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| jidan wabula | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| TIARA wally | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| DINIARTY KHAILA ANG | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| syafril umar dani wael | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| PANDI AZIZ SOUMENA | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| FAJRUL AUFAR MAASILY | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| rahmat salong | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| alda risma rering | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| fadlan soulisa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| muhammad barru soulisa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| refan mahulauw | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| muhamad baru soulisa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 40 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| syafril uamr dani wael | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 40 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| alfiansyah mahulauw | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| mega desfiona | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| hawa nurfa dila kiat | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| julia ramadany pirasou | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| rahima soumena | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| madania mana anu | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 75% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| fadil tomia | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 60 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| ilham ulukapy | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| syarlan soumena | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| Jelita Apriliani Soulisa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| Rifka Tunnisa Tunny | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| ismail assel | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| asirnats | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 0 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| sry yulianty pirasou | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| Muhammad Adlan Salaputa | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| wa putri | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| rafa mahulauw | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| alpian marinda | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 40 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| irwan pawae | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| syahad jumu | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 100 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| banni syafira assel | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 80 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |
| niki mauluda | Bilangan Berpangkat 3 : Misi Puncak Bentuk Akar Matematika — Kelas 8 | 20 | 100% | Refleksi Misi Puncak: Misi Puncak Selesai! | Evaluasi Part 3: Operasi Akar & Masalah Kontekstual |