Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 6 mengidentifikasi dan menggunakan kalimat perbandingan, analogi, antonim, dan sinonim untuk memperkaya tulisan.
<!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 Artikel Ilmiah Populer (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: #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: #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-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="sparkles" 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">Bab 3 - TP 6: Memperkaya Tulisan (Perbandingan, Analogi, Antonim, & Sinonim)</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-rose-400 via-pink-500 to-red-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 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-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 TP 6: <span class="text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-red-600">Memperkaya Gaya Bahasa</span> 🌟
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Gaya Bahasa" 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-red-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-rose-600">kalimat perbandingan & analogi</span> dalam artikel.</li>
<li>Menggunakan <span class="text-rose-600">antonim dan sinonim</span> untuk memperkaya kosakata tulisan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menyempurnakan mahakarya artikel ilmiah populer Bab 3? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Perbandingan, Analogi, Antonim, Sinonim -->
<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">Bumbu Pemanis Kata dalam Artikel 🎨</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Empat unsur kebahasaan kunci untuk membuat artikel ilmiah populer semakin hidup dan menarik.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<!-- Perbandingan & Analogi -->
<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">1. Perbandingan & Analogi</div>
<p class="text-slate-700 font-bold mb-3">Membandingkan dua hal berbeda untuk memperjelas maksud.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li><b>Perbandingan:</b> Menyoroti persamaan/perbedaan langsung (misal: <i>lebih besar daripada</i>).</li>
<li><b>Analogi:</b> Perbandingan kiasan (misal: <i>Otak manusia seperti spons yang menyerap air</i>).</li>
</ul>
</div>
<div class="bg-rose-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-rose-900 italic">"Membuat konsep rumit menjadi mudah dipahami."</p>
</div>
</div>
<!-- Antonim & Sinonim -->
<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">2. Antonim & Sinonim</div>
<p class="text-slate-700 font-bold mb-3">Variasi pilihan kata (diksi) untuk menghindari pengulangan membosankan.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li><b>Sinonim:</b> Persamaan kata (misal: <i>bersih = higienis, elok</i>).</li>
<li><b>Antonim:</b> Lawan kata (misal: <i>bersih × kotor</i>).</li>
</ul>
</div>
<div class="bg-pink-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-pink-900 italic">"Variasi diksi memperkaya keindahan tulisan."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Identifikasi Kaidah Kebahasaan) -->
<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">Perbandingan, Analogi, atau Sinonim?</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">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan jenis kaidah kebahasaan pada kalimat berikut:</p>
<div id="q1-text" class="text-xl text-box text-rose-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, 'analogi')" 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 Analogi</button>
<button onclick="checkQ1(this, 'perbandingan')" 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 Perbandingan</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-rose-600 text-white rounded-2xl font-black text-xl hover:bg-rose-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Variasi Diksi Antonim & Sinonim -->
<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">Kekuatan Diksi: Sinonim & Antonim ✍️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Menghindari kebosanan pembaca dengan variasi pilihan kata yang kaya makna.</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 Penerapan dalam Kalimat:</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">"Lingkungan sekolah yang bersih <span class="text-rose-700">(sinonim: higienis, asri)</span> sangat kontras dengan kondisi kantin yang kotor <span class="text-red-700">(antonim dari bersih)</span>."</p>
<div class="border-t-2 border-red-200 pt-3">
<p class="text-slate-700 font-bold text-sm"><b>Manfaat:</b> Penggunaan sinonim dan antonim membuat paragraf artikel terasa hidup, dinamis, dan profesional.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?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="Diksi Kata">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Diksi & Perbandingan) -->
<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">Evaluasi Gaya Bahasa</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 Diksi & Gaya Bahasa) -->
<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-600 to-red-600 tracking-wide uppercase">🏁 Balap Diksi & Gaya Bahasa 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar perbandingan, analogi, antonim, dan sinonim, 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">⛽ 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-rose-500 hover:bg-rose-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#9f1239] 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-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] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Akhir Bab 3 (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 Akhir Bab 3 (TP 6) 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana kesan dan pengalamanmu menyelesaikan seluruh materi Bab 3 tentang Artikel Ilmiah Populer?</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-rose-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Luar Biasa!</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 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-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Perlu Pengulangan</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 pesan atau rangkuman kesan belajar menulis artikel ilmiah populer di Bab 3:</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 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 Bab 3 (TP 6)</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji komprehensif perbandingan, analogi, antonim, dan sinonim melalui 5 soal.</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>
<!-- 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-rose-900 mb-2">Bab 3 Selesai Sepenuhnya!</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-rose-600 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-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">Kirim laporan nilai akhir Bab 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-rose-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 3</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-rose-500">
<option value="100">Sangat Tuntas & Menguasai Seluruh Materi Bab 3!</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-rose-600 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 Akhir Bab 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-rose-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-rose-700 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); });
// Auto-Quiz 1 (Analogi vs Perbandingan)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Pikiran manusia bekerja seperti spons yang menyerap seluruh cairan di sekitarnya.\"", type: 'analogi', exp: "Merupakan perbandingan kiasan (analogi)." },
{ t: "\"Jumlah siswa kelas 8A lebih banyak daripada jumlah siswa kelas 8B.\"", type: 'perbandingan', exp: "Merupakan kalimat perbandingan langsung." },
{ t: "\"Membaca buku bagaikan membuka jendela dunia yang luas.\"", type: 'analogi', exp: "Perbandingan kiasan sifat atau keadaan disebut analogi." },
{ t: "\"Kadar kebersihan sekolah ini jauh lebih baik dibandingkan tahun lalu.\"", type: 'perbandingan', exp: "Perbandingan langsung antara dua waktu/keadaan." }
];
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 === 'analogi') 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.add('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Diksi)
let countQ2 = 0;
const q2Bank = [
{
story: "Penulis menggunakan kata 'bersih' di paragraf pertama, lalu menggunakan kata 'higienis' dan 'asri' pada paragraf berikutnya untuk menghindari pengulangan.",
q: "Penggunaan variasi kata tersebut memanfaatkan kaidah...",
ops: ["Sinonim (persamaan kata)", "Antonim (lawan kata)", "Kalimat tanya berita"],
ans: 0,
exp: "Penggunaan kata yang berbeda arti sama (bersih, higienis, asri) adalah sinonim."
},
{
story: "Penulis mempertentangkan kata 'bersih' dengan kata 'kotor' untuk menggambarkan perbedaan kondisi dua kantin sekolah.",
q: "Penerapan kata berlawanan arti ini disebut...",
ops: ["Antonim (lawan kata)", "Sinonim kata", "Kalimat imperatif"],
ans: 0,
exp: "Hubungan kata berlawanan arti (bersih dan kotor) disebut antonim."
}
];
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.add('hidden');
}
generateQ2();
// Racing Game TP 6
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Persamaan kata atau padanan kata disebut...", a: "SINONIM" },
{ q: "Lawan kata atau pertentangan makna kata disebut...", a: "ANTONIM" },
{ q: "Perbandingan kiasan untuk menjelaskan sesuatu secara menarik disebut...", a: "ANALOGI" },
{ q: "Kalimat yang menyoroti perbedaan atau persamaan langsung disebut kalimat...", a: "PERBANDINGAN" },
{ q: "Pilihan kata yang tepat dan selaras dalam menulis disebut...", a: "DIKSI" }
];
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-rose-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('Luar Biasa')) btn.classList.add('border-rose-400', 'bg-rose-50');
else if(btn.innerText.includes('Berkesan')) 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: `Apa fungsi utama dari penggunaan sinonim dan antonim dalam penulisan artikel ilmiah populer?`,
options: [`Memperkaya pilihan kata (diksi) dan menghindari pengulangan kata yang membosankan`, `Membuat paragraf artikel menjadi sangat singkat`, `Menghilangkan seluruh fakta dalam tulisan`, `Mengubah artikel menjadi puisi tradisional`],
a: 0,
exp: "Sinonim dan antonim memperkaya variasi diksi agar tulisan lebih hidup dan menarik."
},
{
q: `Manakah di bawah ini yang merupakan contoh kalimat analogi?`,
options: [`Pikiran yang terbuka bagaikan parasut yang hanya berfungsi saat terbuka`, `Jumlah buku di perpustakaan lebih banyak daripada di koperasi`, `Hari ini cuaca sangat panas sekali`, `Siswa kelas 8 belajar dengan giat`],
a: 0,
exp: "Analogi adalah perbandingan kiasan yang menyamakan pikiran dengan parasut."
},
{
q: `Hubungan kata yang memiliki makna berlawanan (seperti bersih dan kotor) disebut sebagai...`,
options: [`Antonim`, `Sinonim`, `Homofon`, ` Akronim`],
a: 0,
exp: "Lawan kata atau pertentangan makna disebut antonim."
},
{
q: `Apa perbedaan antara kalimat perbandingan langsung dan kalimat analogi?`,
options: [`Perbandingan menyoroti persamaan/perbedaan nyata secara langsung, sedangkan analogi menggunakan perbandingan kiasan`, `Perbandingan hanya digunakan dalam matematika`, `Analogi tidak menggunakan bahasa sama sekali`, `Tidak ada perbedaan`],
a: 0,
exp: "Perbandingan bersifat langsung, sedangkan analogi bersifat kiasan."
},
{
q: `Secara keseluruhan, tujuan pembelajaran Bab 3 membimbing peserta didik untuk...`,
options: [`Mampu memahami, merencanakan data, dan menulis artikel ilmiah populer secara kreatif`, `Menghafal seluruh kamus bahasa`, `Menjual artikel cetak di pasar umum`, `Mengabaikan aturan tata bahasa`],
a: 0,
exp: "Kompetensi akhir Bab 3 mencakup penguasaan utuh penulisan artikel ilmiah populer."
}
];
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 || "Bab 3 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi Akhir Bab 3 (TP 6): " + refleksi,
strategi: "Evaluasi Akhir TP 6: Memperkaya Tulisan (Perbandingan, Analogi, Antonim, & Sinonim)"
}, "*");
} else {
alert("Laporan Akhir Bab 3 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 5 merancang kerangka dan menulis draf artikel ilmiah populer berdasarkan data yang telah direncanakan.
<!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 Artikel Ilmiah Populer (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: #fdf4ff;
background-image: radial-gradient(#f5d0fe 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-fuchsia-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-fuchsia-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-fuchsia-800 uppercase tracking-widest">Bab 3 - TP 5: Kerangka & Penulisan Draf Artikel Ilmiah Populer</span>
<span id="progress-text" class="text-xs font-black text-white bg-fuchsia-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-fuchsia-400 via-pink-500 to-rose-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 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-fuchsia-100 text-fuchsia-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-fuchsia-600 to-rose-600">Menulis Draf Artikel</span> 📝
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Menulis Draf" 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-fuchsia-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-fuchsia-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>Merancang <span class="text-fuchsia-600">kerangka tulisan</span> artikel ilmiah populer.</li>
<li>Menulis <span class="text-fuchsia-600">draf artikel utuh</span> berdasarkan data yang direncanakan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap merangkai kata menjadi karya tulis ilmiah yang memukau? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Kerangka & Struktur Artikel -->
<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-fuchsia-900 bg-fuchsia-100 inline-block px-6 py-2 rounded-2xl">Struktur & Kerangka Artikel 🏗️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Tiga bagian utama dalam menyusun kerangka penulisan artikel ilmiah populer.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<!-- Pendahuluan -->
<div class="bg-white p-6 rounded-3xl border-2 border-fuchsia-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-fuchsia-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Pendahuluan</div>
<p class="text-slate-700 font-bold mb-3">Menarik perhatian pembaca, memaparkan latar belakang masalah, dan menyatakan pendapat utama (opini).</p>
</div>
<div class="bg-fuchsia-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-fuchsia-900 italic">"Pengenalan isu menarik seputar sekolah."</p>
</div>
</div>
<!-- Isi / Pembahasan -->
<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">2. Isi & Pembahasan</div>
<p class="text-slate-700 font-bold mb-3">Menyajikan alasan pendukung, data fakta, hasil wawancara, atau kuesioner yang memperkuat argumen.</p>
</div>
<div class="bg-pink-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-pink-900 italic">"Pembeberan data nyata dan analisis."</p>
</div>
</div>
<!-- Penutup -->
<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">3. Penutup (Simpulan)</div>
<p class="text-slate-700 font-bold mb-3">Merangkum inti pembahasan secara singkat serta memberikan solusi atau ajakan bertindak bagi pembaca.</p>
</div>
<div class="bg-rose-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-rose-900 italic">"Kesimpulan dan saran konstruktif."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Struktur Kerangka) -->
<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-fuchsia-600">Bagian Struktur Artikel?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-fuchsia-100 border-2 border-fuchsia-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-fuchsia-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 bagian struktur artikel pada pernyataan berikut:</p>
<div id="q1-text" class="text-xl text-box text-fuchsia-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-3 gap-3 max-w-xl mx-auto">
<button onclick="checkQ1(this, 'pendahuluan')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Pendahuluan</button>
<button onclick="checkQ1(this, 'isi')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Isi / Pembahasan</button>
<button onclick="checkQ1(this, 'penutup')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Penutup</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-fuchsia-600 text-white rounded-2xl font-black text-xl hover:bg-fuchsia-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Panduan Menulis Draf Artikel -->
<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">Langkah Menyusun Draf Tulisan ✍️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Mengubah kerangka data hasil wawancara/kuesioner menjadi artikel utuh yang komunikatif.</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">
<p class="text-xl font-bold text-slate-700">Tahapan Penulisan Draf:</p>
<div class="bg-pink-50 p-6 rounded-2xl border-2 border-pink-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-pink-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Kembangkan Kerangka:</b> Tulis paragraf demi paragraf berdasarkan poin kerangka yang telah dibuat.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-pink-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Sertakan Bukti Data:</b> Masukkan kutipan wawancara atau angka kuesioner ke dalam bagian isi.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-pink-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Gunakan Bahasa Populer:</b> Pastikan kalimat tidak terlalu kaku agar enak dibaca masyarakat luas.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?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 Artikel">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Penulisan Draf) -->
<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">Evaluasi Draf Tulisan</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 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-pink-600 text-white rounded-2xl font-black text-xl hover:bg-pink-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Menulis Draf) -->
<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-fuchsia-600 to-rose-600 tracking-wide uppercase">🏁 Balap Menulis Draf 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar kerangka dan penulisan draf artikel, 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-fuchsia-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-fuchsia-500 hover:bg-fuchsia-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#a21caf] 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-fuchsia-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-fuchsia-600 hover:bg-fuchsia-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#a21caf] 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 pengalamanmu merancang kerangka dan menulis draf artikel 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-fuchsia-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">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">Agak Kesulitan</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 judul artikel ilmiah populer buatanmu:</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-fuchsia-50 border-2 border-fuchsia-200 focus:border-fuchsia-500 outline-none font-medium" rows="3" placeholder="Contoh: Menjaga Kebersihan Lingkungan Sekolah Melalui Gerakan Bawa Botol Minum..."></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 pemahaman kerangka dan penulisan draf artikel ilmiah populer melalui 5 soal.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-fuchsia-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-fuchsia-700 bg-fuchsia-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-fuchsia-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-fuchsia-500 to-rose-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-fuchsia-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-fuchsia-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-fuchsia-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-fuchsia-500">
<option value="100">Sangat Mahir Merancang Kerangka & Menulis Draf Artikel!</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-fuchsia-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 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-fuchsia-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-fuchsia-600 shadow-[0_4px_0px_#a21caf]">
<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 (Struktur Kerangka)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Bagian awal artikel yang memaparkan latar belakang masalah dan pernyataan pendapat utama.\"", type: 'pendahuluan', exp: "Ini adalah fungsi dari bagian pendahuluan artikel." },
{ t: "\"Bagian tengah artikel yang menyajikan data fakta hasil kuesioner dan alasan pendukung.\"", type: 'isi', exp: "Penyajian data fakta dan pembahasan argumen terletak pada bagian isi." },
{ t: "\"Bagian akhir artikel yang merangkum inti pembahasan dan memberikan solusi atau saran.\"", type: 'penutup', exp: "Rangkuman dan simpulan akhir berada pada bagian penutup artikel." },
{ t: "\"Paragraf pengantar yang menarik perhatian pembaca di awal teks artikel ilmiah populer.\"", type: 'pendahuluan', exp: "Paragraf pembuka penarik perhatian adalah ciri bagian pendahuluan." }
];
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 p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg 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');
btns.forEach(b => {
if(b.textContent.toLowerCase().includes(currentQ1Data.type)) 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.add('hidden');
}
generateQ1();
// Auto-Quiz 2 (Studi Kasus Penulisan Draf)
let countQ2 = 0;
const q2Bank = [
{
story: "Siswa sedang menulis bagian tengah artikelnya dengan memasukkan angka persentase hasil kuesioner kebersihan sekolah.",
q: "Bagian struktur artikel manakah yang sedang ditulis oleh siswa tersebut?",
ops: ["Bagian isi / pembahasan", "Bagian judul sampul", "Bagian penutup simpulan"],
ans: 0,
exp: "Penyajian data hasil kuesioner dan fakta pendukung berada di bagian isi artikel."
},
{
story: "Di akhir tulisannya, seorang siswa menuliskan ajakan agar seluruh warga sekolah bersama-sama menjaga kebersihan lingkungan.",
q: "Bagian struktur apa yang sedang disusun siswa tersebut?",
ops: ["Bagian penutup (simpulan dan saran)", "Bagian pendahuluan masalah", "Bagian daftar pustaka"],
ans: 0,
exp: "Ajakan dan rangkuman akhir merupakan bagian penutup dari sebuah artikel."
}
];
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.add('hidden');
}
generateQ2();
// Racing Game TP 5
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Bagian awal artikel yang memaparkan latar belakang masalah disebut...", a: "PENDAHULUAN" },
{ q: "Bagian tengah artikel yang menyajikan fakta dan data pembahasan disebut...", a: "ISI" },
{ q: "Bagian akhir artikel yang berisi rangkuman dan saran disebut...", a: "PENUTUP" },
{ q: "Sebelum menulis draf lengkap, penulis wajib membuat kerangka...", a: "TULISAN" },
{ q: "Hasil wawancara dan kuesioner dimasukkan ke dalam bagian...", a: "PEMBAHASAN" }
];
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-fuchsia-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-fuchsia-400', 'bg-fuchsia-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 5
const evaluasiBank = [
{
q: `Apa saja tiga bagian struktur utama dalam menyusun kerangka artikel ilmiah populer?`,
options: [`Pendahuluan, isi (pembahasan), dan penutup`, `Judul, daftar pustaka, dan sampul`, `Kata pengantar, biografi, dan indeks`, `Lampiran data, kuesioner, dan catatan kaki`],
a: 0,
exp: "Tiga struktur inti penulisan artikel adalah pendahuluan, isi, dan penutup."
},
{
q: `Bagian mana dari artikel yang berfungsi untuk menarik perhatian pembaca serta memaparkan isu permasalahan?`,
options: [`Pendahuluan`, `Penutup`, `Daftar pustaka`, `Lampiran angka`],
a: 0,
exp: "Pendahuluan berfungsi menarik minat pembaca dan mengenalkan latar belakang masalah."
},
{
q: `Di manakah tempat yang paling tepat untuk memasukkan data hasil wawancara atau kuesioner dalam draf artikel?`,
options: [`Bagian isi / pembahasan`, `Bagian judul paling atas`, `Bagian penutup simpulan`, `Bagian nama pengarang`],
a: 0,
exp: "Data fakta dan hasil riset dipaparkan secara mendalam pada bagian isi artikel."
},
{
q: `Apa tujuan utama dari pembuatan kerangka tulisan sebelum mulai menulis draf artikel?`,
options: [`Agar alur penulisan terstruktur rapi, logis, dan tidak melenceng dari topik`, `Agar jumlah kata langsung mencapai satu juta`, `Supaya penulis tidak perlu membaca data riset`, `Agar artikel berbentuk cerita fiksi`],
a: 0,
exp: "Kerangka menjaga keteraturan struktur dan alur logis penulisan."
},
{
q: `Bagian penutup dalam sebuah artikel ilmiah populer biasanya berisi...`,
options: [`Rangkuman inti pembahasan serta saran atau solusi konstruktif`, `Kisah masa kecil penulis`, `Daftar harga buku pelajaran`, `Rumus kimia laboratorium`],
a: 0,
exp: "Penutup memuat simpulan ringkas dan saran atau ajakan solutif."
}
];
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-fuchsia-50 hover:border-fuchsia-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.add('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 3: " + refleksi,
strategi: "Evaluasi TP 5: Kerangka & Penulisan Draf Artikel Ilmiah Populer"
}, "*");
} else {
alert("Laporan TP 5 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 4 merancang instrumen pengumpulan data sederhana (daftar pertanyaan wawancara dan kuesioner) untuk sebuah topik.
<!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 Artikel Ilmiah Populer (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="clipboard-list" 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 3 - TP 4: Perancangan Instrumen Pengumpulan Data (Wawancara & Kuesioner)</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-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 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">Teknik Pengumpulan Data</span> 📋
</h1>
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=800&q=80" alt="Wawancara dan Kuesioner" 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-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 cara menyusun <span class="text-violet-600">daftar pertanyaan wawancara</span> yang mendalam.</li>
<li>Merancang <span class="text-violet-600">kuesioner sederhana</span> untuk mengumpulkan data topik artikel.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menjadi peneliti cilik yang handal? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Wawancara & Kuesioner -->
<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">Instrumen Pengumpulan Data 🎙️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Dua cara utama mendapatkan fakta dan data akurat sebelum menulis artikel ilmiah populer.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Wawancara -->
<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">1. Wawancara (Interview)</div>
<p class="text-slate-700 font-bold mb-3">Tanya jawab langsung dengan narasumber ahli atau pihak terkait untuk menggali informasi mendalam.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li>Menggunakan pertanyaan terbuka (mengapa, bagaimana).</li>
<li>Narasumber bisa guru, kepala sekolah, atau ahli.</li>
</ul>
</div>
<div class="bg-violet-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-violet-900 italic">Contoh: "Bagaimana tanggapan Bapak terkait kebersihan kantin sekolah?"</p>
</div>
</div>
<!-- Kuesioner -->
<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. Kuesioner (Angket)</div>
<p class="text-slate-700 font-bold mb-3">Daftar pertanyaan terstruktur yang disebarkan ke banyak responden (misal: teman seangkatan) untuk menjaring data kuantitatif/persentase.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li>Pertanyaan singkat dan pilihan jawaban tegas.</li>
<li>Menghasilkan data persentase (misal: 75% siswa setuju).</li>
</ul>
</div>
<div class="bg-indigo-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-indigo-900 italic">Contoh: "Seberapa sering Anda membawa botol minum sendiri? [ ] Sering [ ] Jarang"</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Wawancara atau Kuesioner) -->
<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">Wawancara atau Kuesioner?</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">Tentukan jenis instrumen data yang paling tepat untuk situasi berikut:</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, 'wawancara')" 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">Wawancara</button>
<button onclick="checkQ1(this, 'kuesioner')" 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">Kuesioner (Angket)</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: Menyusun Pertanyaan Efektif -->
<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">Kiat Menyusun Pertanyaan Hebat 🎯</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Prinsip menyusun daftar pertanyaan agar narasumber antusias dan data akurat terkumpul.</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">Panduan Pembuatan Instrumen:</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>Fokus pada Topik:</b> Pertanyaan tidak boleh melenceng dari isu artikel (misal: kebersihan sekolah).</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>Gunakan Rumus 5W+1H:</b> Apa, siapa, kapan, di mana, mengapa, dan bagaimana.</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>Bahasa Sopan & Jelas:</b> Mudah dimengerti oleh responden kuesioner atau narasumber.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1517842645767-c639042777db?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="Riset Data">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Perancangan Instrumen) -->
<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">Evaluasi Pertanyaan Riset</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 Perancangan Data) -->
<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-600 to-indigo-600 tracking-wide uppercase">🏁 Balap Riset Data 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar wawancara dan kuesioner, 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-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_#6d28d9] 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_#6d28d9] 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 pengalaman merancang daftar wawancara atau kuesioner 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">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">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 rancangan pertanyaan wawancara buatanmu untuk narasumber di sekolah:</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: Apa kendala utama dalam menjaga kebersihan lingkungan sekolah?"></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 pemahaman perancangan instrumen pengumpulan data melalui 5 soal evaluasi.</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-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-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 Merancang Instrumen Data!</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-violet-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 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-600 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-violet-700 shadow-[0_4px_0px_#6d28d9]">
<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 (Wawancara vs Kuesioner)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Bertanya secara langsung dan mendalam kepada kepala sekolah mengenai fasilitas inklusi.\"", type: 'wawancara', exp: "Tanya jawab langsung secara mendalam adalah teknik wawancara." },
{ t: "\"Menyebarkan daftar pertanyaan tertulis berisikan pilihan pilihan jawaban kepada seluruh siswa kelas 8.\"", type: 'kuesioner', exp: "Penyebaran daftar pertanyaan tertulis ke banyak responden disebut kuesioner (angket)." },
{ t: "\"Menggali cerita pengalaman narasumber ahli secara interaktif tatap muka.\"", type: 'wawancara', exp: "Interaksi tatap muka langsung merupakan ciri wawancara." },
{ t: "\"Menjaring data persentase pilihan siswa terhadap jenis ekstrakurikuler favorit melalui angket.\"", type: 'kuesioner', exp: "Angket atau kuesioner digunakan untuk menjaring data kuantitatif dari banyak responden." }
];
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 === 'wawancara') 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 Perancangan Instrumen)
let countQ2 = 0;
const q2Bank = [
{
story: "Siswa ingin mengetahui persentase kebiasaan membawa botol minum siswa satu sekolah.",
q: "Instrumen pengumpulan data apa yang paling efektif digunakan?",
ops: ["Kuesioner (angket) yang disebar ke seluruh kelas", "Wawancara tertutup satu orang saja", "Membaca buku dongeng lama"],
ans: 0,
exp: "Kuesioner sangat efektif menjaring data persentase dari responden yang banyak."
},
{
story: "Siswa ingin menggali kisah mendalam mengenai sejarah berdirinya fasilitas sekolah dari narasumber pendiri sekolah.",
q: "Instrumen apa yang paling tepat dipilih?",
ops: ["Wawancara mendalam (interview) dengan narasumber", "Mengisi teka-teki silang harian", "Menghitung jumlah meja di kelas"],
ans: 0,
exp: "Wawancara mendalam cocok untuk menggali informasi naratif dari narasumber ahli."
}
];
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: "Kegiatan tanya jawab langsung dengan narasumber disebut...", a: "WAWANCARA" },
{ q: "Daftar pertanyaan tertulis yang disebarkan ke banyak responden disebut...", a: "KUESIONER" },
{ q: "Sinonim atau sebutan lain dari kuesioner adalah...", a: "ANGKET" },
{ q: "Prumusan pertanyaan riset data berpedoman pada rumus...", a: "5W1H" },
{ q: "Sebelum menulis artikel, kita harus merancang instrumen pengumpulan...", a: "DATA" }
];
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('Lancar')) 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: `Apa perbedaan utama antara wawancara dan kuesioner sebagai instrumen pengumpulan data?`,
options: [`Wawancara tanya jawab langsung secara lisan, kuesioner berupa daftar pertanyaan tertulis`, `Wawancara hanya untuk menulis puisi cinta`, `Kuesioner tidak memerlukan responden sama sekali`, `Tidak ada perbedaan di antara keduanya`],
a: 0,
exp: "Wawancara bersifat lisan interaktif, sedangkan kuesioner berupa lembar tertulis."
},
{
q: `Kapan waktu yang paling tepat bagi seorang penulis menggunakan metode kuesioner (angket)?`,
options: [`Saat ingin menjaring data statistik atau persentase dari banyak responden`, `Saat ingin mendengarkan dongeng sebelum tidur`, `Saat menghitung jumlah halaman buku paket`, `Saat memperbaiki perangkat komputer sekolah`],
a: 0,
exp: "Kuesioner efektif menjaring data kuantitatif dari responden dalam jumlah banyak."
},
{
q: `Manakah prinsip penyusunan pertanyaan wawancara yang paling baik?`,
options: [`Fokus pada topik artikel dan menggunakan pertanyaan terbuka yang mendalam`, `Menanyakan rahasia pribadi narasumber yang tidak berkaitan`, `Menggunakan bahasa sandi yang sulit dimengerti`, `Membuat pertanyaan sebanyak seribu nomor`],
a: 0,
exp: "Pertanyaan wawancara harus fokus pada topik dan bersifat terbuka."
},
{
q: `Mengapa perancangan instrumen data (wawancara/kuesioner) harus dilakukan sebelum menulis artikel ilmiah populer?`,
options: [`Agar data dan fakta yang diperoleh akurat sebagai bahan dasar penulisan`, `Agar penulis bisa beristirahat sepanjang hari`, `Supaya jumlah kertas ujian habis`, `Agar tidak perlu menulis kesimpulan`],
a: 0,
exp: "Instrumen data memastikan fakta dan bukti terkumpul valid sebelum penulisan draf."
},
{
q: `Apa fungsi dari penggunaan rumus 5W+1H dalam menyusun daftar pertanyaan wawancara?`,
options: [`Memandu agar informasi yang digali dari narasumber menjadi lengkap dan komprehensif`, `Menghitung rumus matematika fisika`, `Menentukan harga jual buku artikel`, `Mengatur jadwal masuk sekolah`],
a: 0,
exp: "5W+1H memastikan kelengkapan informasi pokok dari narasumber."
}
];
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 3: " + refleksi,
strategi: "Evaluasi TP 4: Perancangan Instrumen Pengumpulan Data (Wawancara & Kuesioner)"
}, "*");
} else {
alert("Laporan TP 4 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 3 membedakan dan mengidentifikasi kalimat fakta dan opini dalam sebuah artikel ilmiah populer.
<!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 Artikel Ilmiah Populer (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: #fafaf9;
background-image: radial-gradient(#d6d3d1 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="search" 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 3 - TP 3: Kalimat Fakta dan Opini dalam Artikel Ilmiah Populer</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 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-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 3: <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600">Fakta vs Opini</span> 🔍
</h1>
<img src="https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=800&q=80" alt="Fakta dan Opini" 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>Memahami perbedaan <span class="text-amber-600">kalimat fakta</span> dan <span class="text-amber-600">kalimat opini</span>.</li>
<li>Mengidentifikasi fakta dan opini dalam artikel ilmiah populer.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menguji ketajaman berpikir kritis? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Fakta vs Opini -->
<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">Mengenal Fakta & Opini ⚖️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Dua jenis kalimat dasar yang selalu menyusun isi artikel ilmiah populer.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Fakta -->
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-amber-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">1. Kalimat Fakta</div>
<p class="text-slate-700 font-bold mb-3">Keadaan yang benar-benar terjadi atau terbukti kebenarannya, didukung oleh data nyata (angka, waktu, tempat).</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li>Bersifat objektif (apa adanya).</li>
<li>Dapat diverifikasi kebenarannya.</li>
</ul>
</div>
<div class="bg-amber-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-amber-900 italic">Contoh: "SMPN 72 Maluku Tengah berlokasi di Maluku Tengah."</p>
</div>
</div>
<!-- Opini -->
<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">2. Kalimat Opini</div>
<p class="text-slate-700 font-bold mb-3">Pendapat, pandangan, atau perkiraan pribadi seseorang yang belum tentu disetujui semua orang.</p>
<ul class="list-disc list-inside text-slate-600 font-bold space-y-1 mb-4 text-sm">
<li>Bersifat subjektif.</li>
<li>Sering menggunakan kata: <i>menurut saya, sebaiknya, rasanya, diperkirakan</i>.</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: "Menurut saya, lingkungan sekolah ini adalah yang paling asri."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Fakta atau Opini) -->
<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">Fakta atau Opini?</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 kalimat berikut:</p>
<div id="q1-text" class="text-xl 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, 'fakta')" 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 Fakta</button>
<button onclick="checkQ1(this, 'opini')" 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 Opini</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: Analisis Fakta dan Opini dalam Artikel -->
<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">Perpaduan Fakta & Opini dalam Artikel 📰</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana penulis artikel ilmiah populer menggunakan fakta untuk memperkuat opininya.</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">Contoh Analisis Teks:</p>
<div class="bg-orange-50 p-6 rounded-2xl border-2 border-orange-200 space-y-3">
<p class="text-slate-800 font-bold italic">"Sampah plastik kian menggunung di area sekolah <span class="text-orange-700">(Opini)</span>. Berdasarkan data catatan petugas kebersihan, volume sampah plastik mencapai 50 kilogram setiap harinya <span class="text-amber-700">(Fakta)</span>."</p>
<div class="border-t-2 border-orange-200 pt-3">
<p class="text-slate-700 font-bold text-sm"><b>Catatan Penting:</b> Opini penulis divalidasi dan dikuatkan dengan kalimat fakta berupa data konkrit.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1457369804613-52c61a468e7d?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 Artikel">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Fakta & Opini) -->
<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 Kalimat Teks</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 Fakta & Opini) -->
<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 Fakta & Opini 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar kalimat fakta dan opini, 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 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-amber-500 hover:bg-amber-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#b45309] 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_#b45309] 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 pemahamanmu dalam membedakan kalimat fakta dan opini 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 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 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 fakta buatanmu:</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 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 fakta dan opini dalam artikel 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 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-amber-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-amber-500 to-orange-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-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 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-amber-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-amber-500">
<option value="100">Sangat Mahir Membedakan Fakta & Opini!</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-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 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-amber-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-amber-600 shadow-[0_4px_0px_#b45309]">
<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 (Fakta vs Opini)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Indonesia terletak di antara dua benua dan dua samudera.\"", type: 'fakta', exp: "Merupakan keadaan nyata geografis yang terbukti benar (fakta)." },
{ t: "\"Menurut saya, pelajaran Bahasa Indonesia adalah yang paling menyenangkan.\"", type: 'opini', exp: "Mengandung sudut pandang pribadi 'menurut saya' (opini)." },
{ t: "\"Jumlah siswa di kelas 8 berjumlah 30 orang berdasarkan data dapodik.\"", type: 'fakta', exp: "Didukung oleh data administratif nyata yang objektif (fakta)." },
{ t: "\"Sebaiknya seluruh sekolah menerapkan jam belajar tambahan di sore hari.\"", type: 'opini', exp: "Merupakan usulan dan pandangan subjektif (opini)." }
];
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 === 'fakta') 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 Fakta & Opini)
let countQ2 = 0;
const q2Bank = [
{
story: "Artikel menyatakan: 'Sampah plastik sangat berbahaya bagi lingkungan sekolah. Berdasarkan laporan kebersihan, 45 kg sampah plastik ditemukan berserakan di halaman.'",
q: "Manakah kalimat yang menunjukkan bentuk fakta dalam kutipan di atas?",
ops: ["Volume sampah plastik mencapai 45 kg berserakan di halaman berdasarkan laporan kebersihan", "Sampah plastik sangat berbahaya bagi lingkungan sekolah", "Lingkungan sekolah tampak kurang indah"],
ans: 0,
exp: "Data jumlah 45 kg berdasarkan laporan kebersihan adalah kalimat fakta."
},
{
story: "Penulis menulis: 'Menurut saya, kesadaran siswa menjaga kebersihan masih sangat rendah.'",
q: "Termasuk jenis kalimat apakah pernyataan tersebut?",
ops: ["Kalimat opini karena memuat sudut pandang pribadi", "Kalimat fakta mutlak laboratorium", "Kalimat perintah imperatif"],
ans: 0,
exp: "Kata 'Menurut saya' menunjukkan ciri utama kalimat opini."
}
];
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: "Keadaan yang benar-benar terjadi dan didukung data nyata disebut kalimat...", a: "FAKTA" },
{ q: "Pendapat atau pandangan pribadi yang bersifat subjektif disebut kalimat...", a: "OPINI" },
{ q: "Kata penanda yang sering muncul dalam kalimat opini adalah 'menurut...", a: "SAYA" },
{ q: "Kalimat fakta bersifat objektif dan dapat di...", a: "VERIFIKASI" },
{ q: "Dalam artikel ilmiah populer, fakta digunakan untuk memperkuat...", a: "OPINI" }
];
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('Mudah')) btn.classList.add('border-amber-400', 'bg-amber-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 3
const evaluasiBank = [
{
q: `Apa ciri utama yang membedakan kalimat fakta dari kalimat opini?`,
options: [`Fakta bersifat objektif dan dapat dibuktikan kebenarannya dengan data nyata`, `Fakta selalu berisi khayalan masa depan`, `Fakta menggunakan kata 'menurut saya'`, `Fakta ditulis berdasarkan perasaan pribadi`],
a: 0,
exp: "Fakta bersifat objektif dan dapat dibuktikan kebenarannya."
},
{
q: `Manakah di bawah ini yang merupakan contoh kalimat fakta?`,
options: [`Hari kemerdekaan Republik Indonesia diperingati setiap tanggal 17 Agustus`, `Menurut saya tanggal 17 Agustus adalah hari yang sangat panas`, `Sebaiknya perayaan kemerdekaan diadakan di malam hari`, `Saya rasa lomba balap karung sangat seru`],
a: 0,
exp: "Tanggal 17 Agustus adalah peristiwa sejarah nyata yang terbukti benar (fakta)."
},
{
q: `Kata atau frasa apa yang sering menjadi penanda utama dalam sebuah kalimat opini?`,
options: [`Menurut saya, sebaiknya, rasanya, atau diperkirakan`, `Berdasarkan data statistik resmi tahun 2026`, `Tercatat pukul 08.00 WIT`, `Berlokasi di Kabupaten Maluku Tengah`],
a: 0,
exp: "Kata-kata tersebut mencerminkan pandangan atau perkiraan subjektif."
},
{
q: `Mengapa penulis artikel ilmiah populer perlu mencampur kalimat fakta dan opini dalam tulisannya?`,
options: [`Opini penulis diperkuat dan divalidasi oleh data fakta yang objektif`, `Agar pembaca merasa bingung membedakan teks`, `Supaya artikel menjadi karya fiksi dongeng`, `Karena fakta saja tidak penting`],
a: 0,
exp: "Fakta memperkuat argumen opini penulis agar lebih kredibel."
},
{
q: `Kalimat 'Suhu udara di ruang kelas saat ini mencapai 30 derajat Celsius' tergolong sebagai...`,
options: [`Kalimat fakta`, `Kalimat opini`, `Kalimat imperatif perintah`, `Kalimat tanya berita`],
a: 0,
exp: "Pengukuran suhu dengan angka nyata merupakan kalimat fakta."
}
];
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 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 3: " + refleksi,
strategi: "Evaluasi TP 3: Kalimat Fakta dan Opini dalam Artikel Ilmiah Populer"
}, "*");
} else {
alert("Laporan TP 3 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 2 Bedah Ciri Artikel Populer
<!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 Artikel Ilmiah Populer (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: #f8fafc;
background-image: radial-gradient(#cbd5e1 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="check-circle" 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 3 - TP 2: Ciri-Ciri Artikel Ilmiah Populer (Pendapat, Bukti, & Alasan)</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-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 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 Ciri Artikel Populer</span> ✍️
</h1>
<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=800&q=80" alt="Ciri Artikel" 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 (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-teal-600">pendapat penulis</span> dalam artikel ilmiah populer.</li>
<li>Menemukan <span class="text-teal-600">bukti dan alasan pendukung</span> yang memperkuat argumen.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap mengupas tuntas struktur argumen ilmiah? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Pendapat, Bukti, dan Alasan -->
<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">Tiga Pilar Argumen Artikel Populer 🏛️</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Sebuah artikel ilmiah populer dibangun dari gagasan yang kokoh melalui tiga unsur utama.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 mt-4">
<!-- Pendapat -->
<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">1. Pendapat (Opini)</div>
<p class="text-slate-700 font-bold mb-3">Gagasan, sudut pandang, atau klaim utama yang disampaikan penulis terhadap suatu isu.</p>
</div>
<div class="bg-teal-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-teal-900 italic">"Sekolah perlu memperluas fasilitas akses bagi siswa difabel."</p>
</div>
</div>
<!-- Alasan -->
<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">2. Alasan Pendukung</div>
<p class="text-slate-700 font-bold mb-3">Penjelasan logis mengapa penulis memiliki pendapat tersebut (menjawab pertanyaan mengapa).</p>
</div>
<div class="bg-emerald-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-emerald-900 italic">"Karena setiap anak berhak mendapatkan kenyamanan belajar yang setara."</p>
</div>
</div>
<!-- Bukti -->
<div class="bg-white p-6 rounded-3xl border-2 border-green-200 shadow-md flex flex-col justify-between">
<div>
<div class="bg-green-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">3. Bukti Nyata</div>
<p class="text-slate-700 font-bold mb-3">Data empiris, hasil survei, angka statistik, atau kutipan ahli yang menguatkan alasan.</p>
</div>
<div class="bg-green-50 p-4 rounded-xl text-center">
<p class="text-sm text-box text-green-900 italic">"Data menunjukkan 20% siswa difabel terbantu dengan adanya jalur landai."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Bedah Pilar Argumen) -->
<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">Pendapat, Alasan, atau Bukti?</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">Tentukan kategori kalimat kutipan artikel 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-3 gap-3 max-w-xl mx-auto">
<button onclick="checkQ1(this, 'pendapat')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Pendapat</button>
<button onclick="checkQ1(this, 'alasan')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Alasan</button>
<button onclick="checkQ1(this, 'bukti')" class="guess-btn p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg border-b-4 border-slate-300 transition">Bukti</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: Contoh Analisis Teks Artikel -->
<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 Kasus Artikel Populer 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Bagaimana penulis merangkai pendapat, alasan, dan bukti dalam satu paragraf utuh.</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 Paragraf Analisis:</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">"Sampah plastik di lingkungan sekolah harus segera ditangani <span class="text-teal-700">(Pendapat)</span>. Jika dibiarkan, tumpukan sampah ini akan merusak kesehatan dan keindahan lingkungan belajar <span class="text-emerald-700">(Alasan)</span>. Berdasarkan survei kebersihan sekolah bulan lalu, tercatat 75% saluran air tersumbat oleh sampah plastik <span class="text-green-700">(Bukti)</span>."</p>
</div>
</div>
<img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?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">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Studi Kasus Analisis Ciri Artikel) -->
<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">Evaluasi Isi Argumen</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 Argumen Ilmiah) -->
<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-600 tracking-wide uppercase">🏁 Balap Argumen Ilmiah 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan cepat! Jawab seputar ciri pendapat, bukti, dan alasan, 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-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 pemahamanmu dalam membedakan pendapat, alasan, dan bukti 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 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">Agak 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 alasan atau bukti buatanmu:</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 pemahaman ciri pendapat, bukti, dan alasan artikel ilmiah populer melalui 5 soal.</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-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-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 Mengidentifikasi Pendapat, Bukti, & Alasan!</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-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 (Pendapat, Alasan, Bukti)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Menurut saya, penggunaan gawai saat jam pelajaran harus dibatasi.\"", type: 'pendapat', exp: "Ini adalah klaim atau sudut pandang pribadi penulis (pendapat)." },
{ t: "\"Hal ini karena gawai dapat memecah konsentrasi belajar siswa di kelas.\"", type: 'alasan', exp: "Kalimat ini menjelaskan alasan mengapa pendapat tersebut dikemukakan." },
{ t: "\"Survei internal sekolah menunjukkan 80% siswa terganggu notifikasi game saat belajar.\"", type: 'bukti', exp: "Data statistik survei empiris merupakan bentuk bukti nyata." },
{ t: "\"Kebiasaan membaca buku di perpustakaan perlu digalakkan kembali.\"", type: 'pendapat', exp: "Ini adalah bentuk usulan atau pandangan utama penulis (pendapat)." }
];
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 p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-lg 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');
btns.forEach(b => {
if(b.textContent.toLowerCase().includes(currentQ1Data.type)) 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 (Studi Kasus Analisis Argumen)
let countQ2 = 0;
const q2Bank = [
{
story: "Dalam artikel tentang kebersihan, penulis menyatakan bahwa sekolah harus melarang kantin menjual kemasan plastik sekali pakai. Alasannya agar volume sampah sekolah berkurang drastis.",
q: "Bagian manakah yang bertindak sebagai alasan dalam argumen tersebut?",
ops: ["Agar volume sampah sekolah berkurang drastis", "Sekolah harus melarang kantin menjual kemasan plastik", "Penulis suka membeli makanan kemasan"],
ans: 0,
exp: "'Agar volume sampah sekolah berkurang' adalah penjelasan logis (alasan) dari pendapat pelarangan plastik."
},
{
story: "Penulis menuliskan: 'Minat baca siswa tergolong rendah. Laporan perpustakaan mencatat rata-rata kunjungan siswa hanya 2 orang per hari.'",
q: "Kalimat kedua dalam kutipan di atas berfungsi sebagai apa?",
ops: ["Bukti nyata berupa data kunjungan perpustakaan", "Pendapat pribadi penulis tanpa dasar", "Alasan yang tidak masuk akal"],
ans: 0,
exp: "Data kunjungan perpustakaan per hari merupakan bukti penguat argumen."
}
];
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: "Gagasan atau sudut pandang utama penulis dalam artikel disebut...", a: "PENDAPAT" },
{ q: "Penjelasan logis yang menjawab 'mengapa' suatu pendapat dikemukakan disebut...", a: "ALASAN" },
{ q: "Data empiris, survei, atau angka statistik yang menguatkan argumen disebut...", a: "BUKTI" },
{ q: "Gabungan pendapat, alasan, dan bukti membentuk struktur...", a: "ARGUMEN" },
{ q: "Artikel ilmiah populer selalu menyertakan fakta untuk memperkuat...", a: "TULISAN" }
];
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('Jelas')) btn.classList.add('border-teal-400', 'bg-teal-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 2
const evaluasiBank = [
{
q: `Apa yang dimaksud dengan unsur 'pendapat' dalam sebuah artikel ilmiah populer?`,
options: [`Gagasan atau sudut pandang utama penulis terhadap suatu masalah`, `Angka statistik mutlak dari laboratorium kimia`, `Kisah fiksi dongeng masa lalu`, `Daftar pustaka buku pelajaran`],
a: 0,
exp: "Pendapat merupakan klaim atau sudut pandang utama yang diusung oleh penulis."
},
{
q: `Bagian mana dalam argumen artikel yang berfungsi menjelaskan alasan logis di balik sebuah pendapat?`,
options: [`Alasan pendukung`, `Judul artikel`, `Nama penulis artikel`, `Daftar isi buku`],
a: 0,
exp: "Alasan memberikan penjelasan mengapa pendapat tersebut dinyatakan."
},
{
q: `Mengapa keberadaan 'bukti' (seperti data atau hasil survei) sangat penting dalam artikel ilmiah populer?`,
options: [`Untuk memperkuat argumen dan meyakinkan pembaca bahwa isi artikel berdasar fakta`, `Agar jumlah halaman buku bertambah tebal`, `Supaya pembaca merasa bosan`, `Agar artikel berbentuk cerita fiksi`],
a: 0,
exp: "Bukti nyata memberikan kredibilitas dan keandalan pada informasi yang disajikan."
},
{
q: `Manakah di bawah ini yang merupakan contoh kalimat 'bukti' dalam sebuah artikel sekolah?`,
options: [`Berdasarkan data perpustakaan, kunjungan siswa naik 30% bulan ini`, `Menurut saya sekolah ini sangat indah dan megah`, `Sebaiknya seluruh siswa membawa bekal makanan sehat`, `Saya merasa sangat gembira belajar di sini`],
a: 0,
exp: "Data perpustakaan konkrit adalah bentuk bukti empiris."
},
{
q: `Ketiga unsur utama yang membangun kekuatan isi artikel ilmiah populer adalah...`,
options: [`Pendapat, alasan, dan bukti pendukung`, `Tema, gambar, dan warna cover`, `Pendahuluan, penutup, dan lampiran`, `Judul, daftar pustaka, dan indeks`],
a: 0,
exp: "Pilar utama isi artikel ilmiah populer adalah pendapat, alasan, dan bukti."
}
];
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 3: " + refleksi,
strategi: "Evaluasi TP 2: Ciri-Ciri Artikel Ilmiah Populer (Pendapat, Bukti, & Alasan)"
}, "*");
} else {
alert("Laporan TP 2 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
Kelas 9
Bahasa Indonesia
Menulis Artikel Ilmiah Populer : 1 menjelaskan pengertian artikel ilmiah populer dan mengidentifikasi informasi penting di dalamnya.
<!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 Artikel Ilmiah Populer (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: #f0f9ff;
background-image: radial-gradient(#bae6fd 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-sky-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-sky-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="book-open" 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-sky-800 uppercase tracking-widest">Bab 3 - TP 1: Pengertian & Informasi Penting Artikel Ilmiah Populer</span>
<span id="progress-text" class="text-xs font-black text-white bg-sky-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-sky-400 via-blue-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 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-sky-100 text-sky-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-sky-600 to-blue-600">Dunia Artikel Ilmiah Populer</span> 📚
</h1>
<img src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=800&q=80" alt="Artikel" 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-sky-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-sky-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-blue-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>Menjelaskan <span class="text-sky-600">pengertian artikel ilmiah populer</span> secara tepat.</li>
<li>Mengidentifikasi <span class="text-sky-600">informasi penting</span> di dalam sebuah artikel ilmiah populer.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap menyelami dunia sains dan masyarakat? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Artikel Ilmiah Populer -->
<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-sky-900 bg-sky-100 inline-block px-6 py-2 rounded-2xl">Apa itu Artikel Ilmiah Populer? 💡</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Tulisan yang mengandung ilmu pengetahuan namun disajikan dengan gaya bahasa santai dan mudah dipahami masyarakat umum.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Karakteristik -->
<div class="bg-white p-6 rounded-3xl border-2 border-sky-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?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="Menulis">
<div class="bg-sky-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Ciri & Sifat Utama</div>
<p class="text-slate-700 font-bold mb-3">Menggabungkan antara <span class="text-sky-600 font-black">data ilmiah/fakta</span> dengan <span class="text-sky-600 font-black">bahasa populer</span> yang komunikatif.</p>
</div>
<div class="bg-sky-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-sky-900 italic">Contoh Topik: Fasilitas sekolah untuk difabel, kebiasaan membuang sampah, dll.</p>
</div>
</div>
<!-- Perbedaan dengan Ilmiah Murni -->
<div class="bg-white p-6 rounded-3xl border-2 border-blue-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?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="Diskusi">
<div class="bg-blue-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Ilmiah Populer vs Ilmiah Murni</div>
<p class="text-slate-700 font-bold mb-3">Jika artikel ilmiah murni kaku dan penuh istilah akademik berat, artikel populer lebih <span class="text-blue-600 font-black">fleksibel, ringan, dan menarik dibaca</span> semua kalangan.</p>
</div>
<div class="bg-blue-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-blue-900 italic">"Ilmu bermanfaat yang dikemas santai untuk publik."</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Karakteristik Artikel) -->
<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-sky-600">Populer atau Bukan?</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-sky-100 border-2 border-sky-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-sky-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 pernyataan dari teks berikut:</p>
<div id="q1-text" class="text-2xl text-box text-sky-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">Artikel Ilmiah Populer</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 (Cerita Fiksi / Dongeng)</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-sky-600 text-white rounded-2xl font-black text-xl hover:bg-sky-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Menggali Informasi Penting Artikel -->
<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-blue-900 bg-blue-100 inline-block px-6 py-2 rounded-2xl">Menggali Informasi Penting 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Detektif teks harus jeli menemukan inti gagasan dalam bacaan ilmiah populer.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-blue-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">Langkah menemukan informasi penting:</p>
<div class="bg-blue-50 p-6 rounded-2xl border-2 border-blue-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-blue-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Baca Judul & Paragraf Pertama:</b> Pahami topik utama yang sedang dibahas.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-blue-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Temukan Ide Pokok:</b> Perhatikan gagasan setiap paragraf pendukung.</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-blue-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Catat Data/Fakta Pendukung:</b> Ambil data angka atau hasil pengamatan nyata.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?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 Artikel">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Analisis Isi Bacaan) -->
<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">Bedah Informasi Artikel</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-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-blue-600 text-white rounded-2xl font-black text-xl hover:bg-blue-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Artikel Ilmiah Populer) -->
<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-sky-500 to-blue-600 tracking-wide uppercase">🏁 Balap Artikel Cerdas 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat seputar pengertian & informasi artikel ilmiah populer, 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-sky-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-sky-500 hover:bg-sky-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#0284c7] 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-sky-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-sky-600 hover:bg-sky-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#0284c7] 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 artikel ilmiah populer 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-sky-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-blue-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 artikel mana yang paling membuatmu penasaran?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-sky-50 border-2 border-sky-200 focus:border-sky-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 informasi penting artikel ilmiah populer melalui 5 soal evaluasi.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-sky-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-sky-700 bg-sky-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-sky-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-sky-500 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-sky-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-sky-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-sky-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-sky-500">
<option value="100">Sangat Paham Pengertian & Informasi Artikel!</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-sky-500 to-blue-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-sky-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-sky-600 shadow-[0_4px_0px_#0284c7]">
<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 (Pengertian Artikel Ilmiah Populer)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Artikel yang membahas ilmu pengetahuan dengan bahasa santai agar mudah dipahami masyarakat umum.\"", a: true, exp: "Ini adalah definisi tepat dari artikel ilmiah populer." },
{ t: "\"Kisah khayalan tentang seekor kancil yang cerdik menyeberangi sungai berbuaya.\"", a: false, exp: "Ini adalah cerita fiksi/dongeng, bukan artikel ilmiah populer." },
{ t: "\"Tulisan laporan hasil penelitian laboratorium yang penuh istilah biokimia rumit dan kaku.\"", a: false, exp: "Ini termasuk artikel ilmiah murni, bukan populer." },
{ t: "\"Artikel tentang fasilitas sekolah inklusi bagi peserta didik difabel yang disajikan secara menarik.\"", a: true, exp: "Ini adalah contoh nyata artikel ilmiah populer berdasar konteks sosial." }
];
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 artikel membahas mengenai fasilitas sekolah inklusi yang menyediakan jalur kursi roda dan papan braille bagi peserta didik difabel.",
q: "Apa informasi penting utama yang disampaikan dalam bacaan tersebut?",
ops: ["Penyediaan fasilitas khusus penunjang bagi peserta didik difabel di sekolah inklusi", "Cara membuat kue tradisional di kantin sekolah", "Jadwal pertandingan olahraga antar kelas"],
ans: 0,
exp: "Fasilitas khusus difabel adalah gagasan utama artikel tersebut."
},
{
story: "Artikel ilmiah populer tentang kebiasaan membuang sampah di sekolah mencatat bahwa 60% siswa masih membuang sampah sembarangan di laci meja.",
q: "Data penting apa yang berhasil ditemukan dari artikel tersebut?",
ops: ["Persentase kebiasaan siswa membuang sampah sembarangan di laci meja", "Harga buku perpustakaan yang sangat mahal", "Jumlah guru yang mengajar di kelas 8"],
ans: 0,
exp: "Data kuantitatif 60% siswa membuang sampah di laci meja adalah informasi penting."
}
];
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: "Tulisan ilmu pengetahuan yang dikemas dengan bahasa santai disebut artikel ilmiah...", a: "POPULER" },
{ q: "Artikel ilmiah populer memadukan antara data fakta dan bahasa yang...", a: "KOMUNIKATIF" },
{ q: "Langkah awal menemukan informasi penting adalah membaca judul dan paragraf...", a: "PERTAMA" },
{ q: "Topik tentang fasilitas sekolah untuk siswa difabel termasuk dalam ruang lingkup sekolah...", a: "INKLUSI" },
{ q: "Informasi yang didukung oleh angka atau pengamatan nyata disebut data...", a: "FAKTA" }
];
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-sky-400', 'border-blue-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-sky-400', 'bg-sky-50');
else if(btn.innerText.includes('Ngerti')) btn.classList.add('border-blue-400', 'bg-blue-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 1
const evaluasiBank = [
{
q: `Apa definisi yang paling tepat mengenai artikel ilmiah populer?`,
options: [`Tulisan yang memuat ilmu pengetahuan dengan bahasa yang santai dan mudah dipahami publik`, `Kisah petualangan fiksi yang penuh keajaiban`, `Laporan laboratorium kimia yang sangat kaku dan akademik`, `Kumpulan puisi cinta remaja`],
a: 0,
exp: "Artikel ilmiah populer menggabungkan unsur keilmuan dengan bahasa yang luwes untuk masyarakat."
},
{
q: `Manakah karakteristik utama yang membedakan artikel ilmiah populer dengan artikel ilmiah murni?`,
options: [`Bahasa penyajiannya lebih fleksibel, komunikatif, dan tidak kaku`, `Jumlah halaman harus tepat seratus lembar`, `Tidak boleh mencantumkan fakta sama sekali`, `Hanya diterbitkan dalam bentuk buku cerita bergambar`],
a: 0,
exp: "Artikel populer mengutamakan bahasa yang komunikatif agar mudah dinikmati pembaca umum."
},
{
q: `Langkah pertama yang paling efektif saat Anda ingin menggali informasi penting dari sebuah artikel adalah...`,
options: [`Membaca judul dan paragraf pertama untuk menangkap topik utama`, `Menghitung jumlah total kata dalam artikel`, `Membaca artikel dari paragraf paling akhir secara terbalik`, `Menutup teks tanpa membacanya`],
a: 0,
exp: "Judul dan paragraf pertama memuat gagasan pokok atau orientasi topik bacaan."
},
{
q: `Topik berikut yang paling sesuai diangkat dalam penulisan artikel ilmiah populer tingkat sekolah adalah...`,
options: [`Kebiasaan membuang sampah di sekolah atau fasilitas siswa difabel`, `Sejarah pertempuran galaksi luar angkasa fiktif`, `Resep ramuan sihir penyembuh luka`, `Cara menerbangkan roket pribadi ke matahari`],
a: 0,
exp: "Topik kontekstual seputar lingkungan sekolah sangat relevan untuk artikel populer siswa."
},
{
q: `Mengapa penulis artikel ilmiah populer perlu menyertakan fakta atau data dalam tulisannya?`,
options: [`Agar informasi yang disampaikan terpercaya dan dapat dipertanggungjawabkan`, `Agar pembaca merasa cepat mengantuk`, `Agar artikel terlihat seperti buku fiksi`, `Agar tidak perlu menggunakan paragraf pembuka`],
a: 0,
exp: "Fakta dan data memberikan fondasi kredibilitas pada isi artikel ilmiah."
}
];
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-sky-50 hover:border-sky-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 3: " + refleksi,
strategi: "Evaluasi TP 1: Pengertian & Informasi Penting Artikel Ilmiah Populer"
}, "*");
} else {
alert("Laporan TP 1 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
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>
📊 Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Belum ada nilai siswa yang masuk. | |||||