Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 7
Bahasa Indonesia
Membuat Iklan, Slogan, dan Poster : 1 Menjelaskan pengertian iklan, membedakan iklan komersial dan nonkomersial, serta mengidentifikasi informasi penting dalam iklan.
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bahasa Indonesia Kelas 8: Misi Periklanan (TP 1) 📢</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #fffbeb;
background-image: radial-gradient(#fde68a 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-correct { background-color: #10b981 !important; color: white !important; border-bottom-color: #047857 !important; pointer-events: none; }
.btn-wrong { background-color: #ef4444 !important; color: white !important; border-bottom-color: #b91c1c !important; pointer-events: none; opacity: 0.8; }
.text-box { font-weight: bold; }
.nav-btn { border-bottom: 4px solid rgba(0,0,0,0.2); transition: all 0.2s; }
.nav-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
/* Racing Game Styles */
.track-bg { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 10px, #f1f5f9 10px, #f1f5f9 20px); border: 3px solid #94a3b8; }
.car-avatar { transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/90 backdrop-blur-md px-6 py-4 border-b-4 border-amber-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-amber-500 p-2 rounded-xl shadow-sm text-white">
<i data-lucide="megaphone" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-amber-800 uppercase tracking-widest">Bab 2 - TP 1: Pengertian & Jenis Iklan</span>
<span id="progress-text" class="text-xs font-black text-white bg-amber-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 w-0 transition-all duration-500 ease-out"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden relative pb-10">
<!-- Slide 1: Cover & Tujuan Pembelajaran TP 1 -->
<div class="slide active flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="max-w-4xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-amber-100 text-amber-900 text-sm font-black uppercase tracking-widest shadow-sm">
SMP Negeri 72 Maluku Tengah - Fase D
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Misi TP 1: <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600">Dunia Iklan & Pesannya</span> 🎯
</h1>
<img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&w=800&q=80" alt="Iklan" class="w-full max-w-lg h-48 object-cover rounded-3xl mx-auto shadow-lg border-4 border-white mt-6">
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md text-left mt-6">
<h3 class="font-black text-xl text-amber-800 mb-3 flex items-center gap-2"><i data-lucide="target" class="text-orange-500"></i> Tujuan Pembelajaran Kita (5 JP):</h3>
<ol class="space-y-3 text-lg font-bold text-slate-600 list-decimal list-inside pl-4">
<li>Menjelaskan <span class="text-amber-600">pengertian iklan</span> secara tepat.</li>
<li>Membedakan <span class="text-amber-600">iklan komersial dan nonkomersial</span>.</li>
<li>Mengidentifikasi <span class="text-amber-600">informasi penting</span> dalam sebuah iklan.</li>
</ol>
</div>
<p class="text-lg font-bold text-slate-500 mt-4 animate-pulse">Siap membongkar rahasia di balik iklan? Let's go! 👇</p>
</div>
</div>
<!-- Slide 2: Konsep Materi Iklan -->
<div class="slide flex-col p-8 gap-6 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-amber-900 bg-amber-100 inline-block px-6 py-2 rounded-2xl">Apa itu Iklan? 💡</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Pesan pembawa informasi untuk membujuk atau menggerakkan khalayak ramai.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mt-4">
<!-- Komersial -->
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Komersial">
<div class="bg-amber-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Iklan Komersial (Niaga)</div>
<p class="text-slate-700 font-bold mb-3">Bertujuan menawarkan produk atau jasa untuk mendapatkan <span class="text-amber-600 font-black">keuntungan/penjualan</span>.</p>
</div>
<div class="bg-amber-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-amber-900 italic">Contoh: Iklan makanan, handphone, pakaian, jasa ojek online.</p>
</div>
</div>
<!-- Nonkomersial -->
<div class="bg-white p-6 rounded-3xl border-2 border-orange-200 shadow-md flex flex-col justify-between">
<div>
<img src="https://images.unsplash.com/photo-1532629345422-7515f3d16bb9?auto=format&fit=crop&w=600&q=80" class="w-full h-32 object-cover rounded-2xl mb-4 border-2 border-slate-100" alt="Layanan Masyarakat">
<div class="bg-orange-500 text-white px-4 py-1 rounded-full inline-block font-black mb-3 text-sm">Iklan Nonkomersial (Layanan Masyarakat)</div>
<p class="text-slate-700 font-bold mb-3">Bertujuan memberikan pencerahan, imbauan, atau edukasi sosial tanpa mencari <span class="text-orange-600 font-black">keuntungan material</span>.</p>
</div>
<div class="bg-orange-50 p-4 rounded-xl text-center">
<p class="text-md text-box text-orange-900 italic">Contoh: Iklan hemat energi, bahaya narkoba, taat prokes.</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Auto-Quiz 1 (Tebak Jenis Iklan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-amber-600">Komersial vs Nonkomersial</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-amber-100 border-2 border-amber-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-amber-800 text-xl">SOAL DIJAWAB: <span id="count-q1">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl text-center">
<p class="text-lg font-bold text-slate-500 mb-4 border-b-2 border-dashed pb-4">Tentukan jenis iklan dari pernyataan berikut:</p>
<div id="q1-text" class="text-2xl text-box text-amber-700 mb-8 bg-slate-50 py-6 px-4 rounded-2xl border border-slate-100 italic">?</div>
<div id="q1-options" class="grid grid-cols-2 gap-4 max-w-lg mx-auto">
<button onclick="checkQ1(this, true)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Komersial</button>
<button onclick="checkQ1(this, false)" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition">Nonkomersial (Layanan M.)</button>
</div>
<div id="q1-feedback" class="hidden mt-6 p-5 rounded-2xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q1-next-btn" onclick="generateQ1()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-amber-600 text-white rounded-2xl font-black text-xl hover:bg-amber-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 4: Informasi Penting dalam Iklan -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-orange-900 bg-orange-100 inline-block px-6 py-2 rounded-2xl">Menggali Informasi Iklan 🔍</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Detektif iklan harus jeli melihat pesan utama yang disampaikan.</p>
</div>
<div class="bg-white p-8 rounded-3xl border-2 border-orange-200 shadow-md mt-4 flex flex-col md:flex-row gap-8 items-center">
<div class="flex-1 space-y-6">
<p class="text-xl font-bold text-slate-700">Unsur penting yang wajib dicari dalam sebuah iklan:</p>
<div class="bg-orange-50 p-6 rounded-2xl border-2 border-orange-200 space-y-3">
<div class="flex items-start gap-3">
<span class="bg-orange-500 text-white font-black px-3 py-1 rounded-full text-sm">1</span>
<p class="text-slate-800 font-bold"><b>Produk/Pesan Utama:</b> Apa yang ditawarkan atau disosialisasikan?</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-orange-500 text-white font-black px-3 py-1 rounded-full text-sm">2</span>
<p class="text-slate-800 font-bold"><b>Sasaran (Target):</b> Kepada siapa iklan ini ditujukan (anak-anak, remaja, umum)?</p>
</div>
<div class="flex items-start gap-3">
<span class="bg-orange-500 text-white font-black px-3 py-1 rounded-full text-sm">3</span>
<p class="text-slate-800 font-bold"><b>Daya Tarik/Keunggulan:</b> Alasan mengapa khalayak harus tertarik.</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=400&q=80" class="w-64 h-80 object-cover rounded-3xl shadow-lg border-4 border-white rotate-2 hover:rotate-0 transition-transform" alt="Analisis Iklan">
</div>
</div>
<!-- Slide 5: Auto-Quiz 2 (Analisis Informasi Iklan) -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-4xl font-black text-slate-900">Misi Latihan: <span class="text-orange-600">Bedah Pesan Iklan</span> 🎮</h2>
<div class="mt-4 inline-flex items-center gap-3 bg-orange-100 border-2 border-orange-400 px-6 py-2 rounded-full">
<span class="font-black text-orange-800 text-xl">SOAL DIJAWAB: <span id="count-q2">0</span></span>
</div>
</div>
<div class="quiz-card p-8 rounded-[2rem] bg-white border-2 border-slate-200 shadow-xl flex flex-col">
<div id="q2-story" class="bg-slate-50 p-5 rounded-xl border border-slate-200 italic font-medium text-slate-700 mb-6 text-center"></div>
<p class="text-lg font-bold text-slate-800 mb-4 text-center" id="q2-question">Pertanyaan?</p>
<div id="q2-options" class="grid grid-cols-1 gap-3 w-full max-w-xl mx-auto"></div>
<div id="q2-feedback" class="hidden w-full mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in text-left"></div>
<button id="q2-next-btn" onclick="generateQ2()" class="hidden mt-6 w-full max-w-lg mx-auto py-4 bg-orange-600 text-white rounded-2xl font-black text-xl hover:bg-orange-700 transition">Soal Selanjutnya ➡️</button>
</div>
</div>
<!-- Slide 6: RACING GAME KELOMPOK (Balap Iklan Cerdas) -->
<div class="slide flex-col p-8 gap-4 max-w-6xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<h2 class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-500 tracking-wide uppercase">🏁 Balap Iklan Cerdas 🏁</h2>
<p class="text-lg font-bold text-slate-600 mt-2">Rebutan! Jawab cepat seputar pengertian & jenis iklan, kumpulkan <b>5 Poin</b> untuk MENANG!</p>
</div>
<div class="bg-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-200 w-full space-y-5 relative">
<div class="absolute right-6 top-0 bottom-0 border-r-8 border-dashed border-slate-800 z-0 opacity-20"></div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-rose-600">KELOMPOK 1</span>
<span class="text-rose-600 bg-rose-100 px-2 rounded" id="score-k1">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k1" class="absolute top-0 left-0 h-full w-0 bg-rose-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k1" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🏎️</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-blue-600">KELOMPOK 2</span>
<span class="text-blue-600 bg-blue-100 px-2 rounded" id="score-k2">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k2" class="absolute top-0 left-0 h-full w-0 bg-blue-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k2" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚓</div>
</div>
</div>
<div class="relative w-full">
<div class="flex justify-between text-sm font-black mb-1 px-1">
<span class="text-amber-600">KELOMPOK 3</span>
<span class="text-amber-600 bg-amber-100 px-2 rounded" id="score-k3">0/5</span>
</div>
<div class="w-full h-14 rounded-xl track-bg relative overflow-visible shadow-inner flex items-center">
<div id="bar-k3" class="absolute top-0 left-0 h-full w-0 bg-amber-200/50 rounded-l-xl transition-all duration-500"></div>
<div id="rocket-k3" class="car-avatar absolute text-5xl z-10 -mt-2" style="left: 0%;">🚙</div>
</div>
</div>
</div>
<div class="bg-slate-800 text-white p-6 rounded-[2rem] shadow-xl border-4 border-slate-700 text-center w-full mt-2">
<p class="text-amber-400 font-bold mb-2 uppercase tracking-widest text-sm">⛽ Pertanyaan Rebutan TP 1 ⛽</p>
<div id="race-q-text" class="text-2xl font-black text-white mb-6 py-4 flex flex-wrap justify-center items-center gap-2"></div>
<button id="btn-reveal-race" onclick="revealRaceAnswer()" class="px-8 py-4 bg-amber-500 hover:bg-amber-400 text-white font-black text-xl rounded-full shadow-[0_6px_0px_#d97706] active:shadow-none active:translate-y-2 transition mb-4">
Buka Jawaban 👀
</button>
<div id="race-ans-container" class="hidden">
<p class="text-xl text-slate-300 font-bold mb-1">Jawaban yang benar:</p>
<div id="race-ans-text" class="text-3xl font-black text-green-400 bg-green-900/40 py-3 px-8 rounded-xl inline-flex flex-col items-center border-2 border-green-500 mb-6 pop-in"></div>
<p class="text-lg font-bold mb-3 text-slate-200 border-t border-slate-600 pt-4">Kelompok mana yang menjawab cepat & benar?</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button onclick="addRaceScore(1)" class="py-3 bg-rose-600 hover:bg-rose-500 font-black rounded-xl border-b-4 border-rose-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🏎️ K1</button>
<button onclick="addRaceScore(2)" class="py-3 bg-blue-600 hover:bg-blue-500 font-black rounded-xl border-b-4 border-blue-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚓 K2</button>
<button onclick="addRaceScore(3)" class="py-3 bg-amber-600 hover:bg-amber-500 font-black rounded-xl border-b-4 border-amber-800 active:border-b-0 active:translate-y-1 transition">+ Poin 🚙 K3</button>
<button onclick="generateRaceQuestion()" class="py-3 bg-slate-600 hover:bg-slate-500 font-black rounded-xl border-b-4 border-slate-900 active:border-b-0 active:translate-y-1 transition text-slate-300">Ganti Soal (Skip)</button>
</div>
</div>
</div>
<div id="race-winner-modal" class="hidden absolute inset-0 bg-slate-900/95 backdrop-blur-sm z-50 flex-col items-center justify-center text-center p-8 rounded-3xl">
<div class="text-9xl mb-4 animate-bounce" id="winner-icon">🏆</div>
<h2 id="winner-text" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-500 mb-6 drop-shadow-lg">KELOMPOK X MENANG!</h2>
<button onclick="resetRace()" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-white font-black text-2xl rounded-full shadow-[0_6px_0px_#d97706] active:shadow-none active:translate-y-2 transition">
Balapan Lagi 🔄
</button>
</div>
</div>
<!-- Slide 7: Refleksi Siswa TP 1 -->
<div class="slide flex-col items-center justify-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-center w-full">
<h2 class="text-5xl font-black text-slate-900 mb-4">Refleksi TP 1 💭</h2>
<p class="text-xl text-slate-600 font-bold max-w-2xl mx-auto">Bagaimana pemahamanmu tentang iklan hari ini?</p>
</div>
<div class="grid grid-cols-3 gap-6 mt-6 w-full max-w-3xl">
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-amber-400 transition-all text-center">
<div class="text-6xl mb-2">😎</div>
<h3 class="font-black text-xl text-slate-700">Sangat Paham!</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-yellow-400 transition-all text-center">
<div class="text-6xl mb-2">🤔</div>
<h3 class="font-black text-xl text-slate-700">Cukup Ngerti</h3>
</button>
<button onclick="pilihRefleksi(this)" class="refleksi-btn bg-white border-4 border-slate-200 p-6 rounded-3xl shadow-sm hover:-translate-y-2 hover:border-red-400 transition-all text-center">
<div class="text-6xl mb-2">🤯</div>
<h3 class="font-black text-xl text-slate-700">Masih Bingung</h3>
</button>
</div>
<div class="w-full max-w-3xl mt-6 bg-white p-6 rounded-3xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-700 mb-2">Bagian materi iklan mana yang paling membuatmu penasaran?</label>
<textarea id="refleksi-teks" class="w-full p-4 rounded-xl bg-amber-50 border-2 border-amber-200 focus:border-amber-500 outline-none font-medium" rows="3" placeholder="Tuliskan di sini..."></textarea>
</div>
</div>
<!-- Slide 8: Evaluasi TP 1 & Integrasi LMS -->
<div class="slide flex-col p-8 gap-6 max-w-4xl mx-auto w-full min-h-[75vh]">
<div id="evaluasi-section" class="w-full text-center">
<h2 class="text-4xl font-black text-slate-900 mb-2">📝 Ujian Akhir TP 1</h2>
<p class="text-lg font-bold text-slate-500 mb-6">Uji pemahaman pengertian dan jenis iklan melalui 5 soal evaluasi.</p>
<div class="bg-white p-8 rounded-[2rem] border-4 border-amber-200 shadow-md text-left">
<div class="flex justify-between items-center mb-6 border-b-2 border-slate-100 pb-4">
<span class="font-black text-amber-700 bg-amber-100 px-3 py-1 rounded-lg">Soal <span id="eval-q-num">1</span> dari 5</span>
</div>
<p id="eval-q-text" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed flex flex-wrap gap-2 items-center"></p>
<div id="eval-options" class="space-y-3"></div>
<div id="eval-feedback" class="hidden mt-6 p-5 rounded-xl text-lg font-bold border-l-8 pop-in"></div>
</div>
</div>
<!-- Halaman Kirim Nilai TP 1 -->
<div id="lms-section" class="hidden w-full flex-col items-center justify-center text-center">
<div class="text-7xl mb-4 animate-bounce">🥇</div>
<h2 class="text-4xl font-black text-amber-900 mb-2">Misi TP 1 Selesai!</h2>
<p class="text-2xl font-extrabold text-slate-600 mb-6">Skor Akhir TP 1: <span id="final-score-display" class="text-white text-5xl bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-2 rounded-2xl inline-block ml-2 shadow-lg transform rotate-2"></span></p>
<div class="bg-white border-4 border-amber-300 p-8 rounded-[2rem] max-w-lg w-full shadow-xl space-y-5 text-left relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-amber-100 rounded-bl-full -z-10"></div>
<p class="font-bold text-slate-500 text-center mb-4 relative z-10">Kirim laporan nilai TP 1 ke sistem guru.</p>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Nama Lengkap Penjelajah</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold focus:outline-amber-500 bg-slate-50">
</div>
<div class="relative z-10">
<label class="block text-sm font-black text-slate-700 uppercase mb-2">Pemahaman Materi</label>
<select id="input-baterai" class="w-full p-4 border-2 border-slate-200 rounded-xl font-bold bg-slate-50 focus:outline-amber-500">
<option value="100">Sangat Paham Pengertian & Jenis Iklan!</option>
<option value="75">Paham Sebagian Besar</option>
<option value="50">Masih Perlu Belajar</option>
</select>
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 mt-4 bg-gradient-to-r from-amber-500 to-orange-600 text-white text-xl font-black rounded-2xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 relative z-10">
Kirim Laporan TP 1 🚀
</button>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-amber-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-amber-600 shadow-[0_4px_0px_#d97706]">
<span class="hidden md:inline">Selanjutnya</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
const elementsToAnimate = slides[current].querySelectorAll('h2, .quiz-card, .pop-in');
elementsToAnimate.forEach(el => {
el.classList.remove('pop-in');
void el.offsetWidth;
el.classList.add('pop-in');
});
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.classList.add('hidden');
} else {
nextBtn.disabled = false;
nextBtn.classList.remove('hidden');
}
const progress = (current / (slides.length - 1)) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}%`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
prevBtn.addEventListener('click', () => { if (current > 0) showSlide(current - 1); });
nextBtn.addEventListener('click', () => { if (current < slides.length - 1) showSlide(current + 1); });
// Auto-Quiz 1 (Komersial/Nonkomersial)
let countQ1 = 0;
const q1Bank = [
{ t: "\"Diskon besar-besaran akhir tahun untuk semua produk pakaian merek Lokal.\"", a: true, exp: "Ini menawarkan produk untuk transaksi jual beli (Iklan Komersial)." },
{ t: "\"Ayo hemat penggunaan air demi kelangsungan bumi masa depan!\"", a: false, exp: "Ini berisi imbauan sosial tanpa mencari keuntungan (Iklan Layanan Masyarakat)." },
{ t: "\"Pesan sekarang smartphone tercanggih dengan kamera 108MP!\"", a: true, exp: "Ini adalah promosi produk komersial." },
{ t: "\"Cegah demam berdarah dengan menerapkan 3M Plus di rumah.\"", a: false, exp: "Ini adalah bentuk iklan nonkomersial edukatif." }
];
let currentQ1Data = null;
function generateQ1() {
document.getElementById('q1-feedback').classList.add('hidden');
document.getElementById('q1-next-btn').classList.add('hidden');
let btnOptions = document.getElementById('q1-options').querySelectorAll('button');
btnOptions.forEach(b => {
b.disabled = false;
b.className = "guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-black text-xl border-b-4 border-slate-300 transition";
});
currentQ1Data = q1Bank[countQ1 % q1Bank.length];
document.getElementById('q1-text').innerHTML = currentQ1Data.t;
}
function checkQ1(btn, answerChoosed) {
const btns = document.getElementById('q1-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q1-feedback');
fb.classList.remove('hidden');
let isCorrect = (answerChoosed === currentQ1Data.a);
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ1Data.exp}`;
} else {
btn.classList.add('btn-wrong');
if (currentQ1Data.a === true) btns[0].classList.add('btn-correct');
else btns[1].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ1Data.exp}`;
}
countQ1++;
document.getElementById('count-q1').innerText = countQ1;
document.getElementById('q1-next-btn').classList.remove('hidden');
}
generateQ1();
// Auto-Quiz 2 (Analisis Informasi)
let countQ2 = 0;
const q2Bank = [
{
story: "Sebuah iklan menampilkan produk susu pertumbuhan khusus anak usia 1-3 tahun dengan kandungan kalsium tinggi.",
q: "Siapa target sasaran utama dari produk iklan tersebut?",
ops: ["Orang tua yang memiliki anak usia balita (1-3 tahun)", "Para atlet profesional", "Lansia di atas 60 tahun"],
ans: 0,
exp: "Iklan susu tersebut ditujukan bagi anak balita dan orang tuanya."
},
{
story: "Iklan lowongan pekerjaan daring menawarkan kemudahan melamar kerja cepat tanpa biaya pendaftaran.",
q: "Apa nilai keunggulan utama yang ditawarkan iklan tersebut?",
ops: ["Proses melamar cepat dan gratis", "Biaya pendaftaran yang mahal", "Lokasi kantor yang jauh"],
ans: 0,
exp: "Keunggulan yang ditonjolkan adalah kemudahan cepat dan tanpa biaya."
}
];
let currentQ2Data = null;
function generateQ2() {
document.getElementById('q2-feedback').classList.add('hidden');
document.getElementById('q2-next-btn').classList.add('hidden');
currentQ2Data = q2Bank[countQ2 % q2Bank.length];
document.getElementById('q2-story').innerHTML = `"${currentQ2Data.story}"`;
document.getElementById('q2-question').innerHTML = currentQ2Data.q;
let optHtml = "";
currentQ2Data.ops.forEach((opt, idx) => {
optHtml += `<button onclick="checkQ2(this, ${idx} === ${currentQ2Data.ans})" class="guess-btn w-full p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-lg border-b-4 border-slate-300 transition text-left">${opt}</button>`;
});
document.getElementById('q2-options').innerHTML = optHtml;
}
function checkQ2(btn, isCorrect) {
const btns = document.getElementById('q2-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('q2-feedback');
fb.classList.remove('hidden');
if(isCorrect) {
btn.classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${currentQ2Data.exp}`;
} else {
btn.classList.add('btn-wrong');
btns[currentQ2Data.ans].classList.add('btn-correct');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${currentQ2Data.exp}`;
}
countQ2++;
document.getElementById('count-q2').innerText = countQ2;
document.getElementById('q2-next-btn').classList.remove('hidden');
}
generateQ2();
// Racing Game TP 1
let raceScores = { 1: 0, 2: 0, 3: 0 };
const WIN_SCORE = 5;
const raceQuestions = [
{ q: "Pesan yang bertujuan membujuk pembeli disebut...", a: "IKLAN" },
{ q: "Iklan niaga disebut juga iklan...", a: "KOMERSIAL" },
{ q: "Iklan edukasi sosial disebut iklan layanan...", a: "MASYARAKAT" },
{ q: "Tujuan utama iklan komersial adalah mencari...", a: "KEUNTUNGAN" },
{ q: "Informasi kepada siapa iklan ditujukan disebut ... sasaran.", a: "TARGET" }
];
function generateRaceQuestion() {
document.getElementById('race-ans-container').classList.add('hidden');
document.getElementById('btn-reveal-race').classList.remove('hidden');
document.getElementById('race-ans-text').classList.remove('pop-in');
let rq = raceQuestions[Math.floor(Math.random() * raceQuestions.length)];
document.getElementById('race-q-text').innerHTML = rq.q;
document.getElementById('race-ans-text').innerHTML = rq.a;
}
function revealRaceAnswer() {
document.getElementById('btn-reveal-race').classList.add('hidden');
document.getElementById('race-ans-container').classList.remove('hidden');
void document.getElementById('race-ans-text').offsetWidth;
document.getElementById('race-ans-text').classList.add('pop-in');
}
function addRaceScore(group) {
raceScores[group]++;
let percent = (raceScores[group] / WIN_SCORE) * 100;
document.getElementById(`score-k${group}`).innerText = `${raceScores[group]}/${WIN_SCORE}`;
document.getElementById(`bar-k${group}`).style.width = `${percent}%`;
document.getElementById(`rocket-k${group}`).style.left = `calc(${percent}% - ${percent > 0 ? 40 : 0}px)`;
if(raceScores[group] >= WIN_SCORE) {
setTimeout(() => {
let car = ["🏎️", "🚓", "🚙"][group-1];
document.getElementById('winner-icon').innerText = car;
document.getElementById('winner-text').innerText = `KELOMPOK ${group} MENANG!`;
document.getElementById('race-winner-modal').classList.remove('hidden');
document.getElementById('race-winner-modal').classList.add('flex');
}, 600);
} else {
generateRaceQuestion();
}
}
function resetRace() {
raceScores = {1:0, 2:0, 3:0};
for(let i=1; i<=3; i++) {
document.getElementById(`score-k${i}`).innerText = `0/${WIN_SCORE}`;
document.getElementById(`bar-k${i}`).style.width = `0%`;
document.getElementById(`rocket-k${i}`).style.left = `0%`;
}
document.getElementById('race-winner-modal').classList.add('hidden');
document.getElementById('race-winner-modal').classList.remove('flex');
generateRaceQuestion();
}
generateRaceQuestion();
// Refleksi
function pilihRefleksi(btn) {
const btns = document.querySelectorAll('.refleksi-btn');
btns.forEach(b => {
b.classList.remove('border-amber-400', 'border-yellow-400', 'border-red-400', 'bg-slate-100');
b.classList.add('border-slate-200');
});
btn.classList.remove('border-slate-200');
if(btn.innerText.includes('Paham')) btn.classList.add('border-amber-400', 'bg-amber-50');
else if(btn.innerText.includes('Ngerti')) btn.classList.add('border-yellow-400', 'bg-yellow-50');
else btn.classList.add('border-red-400', 'bg-red-50');
}
// Evaluasi TP 1
const evaluasiBank = [
{
q: `Pesan komunikasi penyiaran yang bertujuan untuk membujuk orang membeli produk disebut...`,
options: [`Iklan komersial`, `Iklan layanan masyarakat`, `Slogan`, `Poster`],
a: 0,
exp: "Iklan komersial berfokus pada penawaran produk untuk mendapatkan keuntungan."
},
{
q: `Manakah di bawah ini yang merupakan tujuan utama dari iklan nonkomersial (layanan masyarakat)?`,
options: [`Mendapatkan laba penjualan setinggi-tingginya`, `Memberikan edukasi atau imbauan sosial`, `Menjatuhkan produk pesaing`, `Memamerkan karya seni`],
a: 1,
exp: "Iklan layanan masyarakat bertujuan memberikan pencerahan dan edukasi sosial."
},
{
q: `Sebuah iklan menawarkan sabun mandi dengan keunggulan membunuh kuman 99%. Unsur informasi yang ditonjolkan adalah...`,
options: [`Harga produk`, `Keunggulan/daya tarik produk`, `Lokasi pabrik`, `Nama pembuat iklan`],
a: 1,
exp: "Membunuh kuman 99% merupakan keunggulan atau daya tarik utama produk."
},
{
q: `Perbedaan mendasar antara iklan komersial dan nonkomersial terletak pada...`,
options: [`Media yang digunakan`, `Tujuan akhir pembuatan iklan`, `Waktu penayangannya`, `Jumlah kata yang dipakai`],
a: 1,
exp: "Perbedaan utamanya adalah motif pencarian keuntungan (komersial) versus edukasi sosial (nonkomersial)."
},
{
q: `Jika sebuah iklan kosmetik remaja ditayangkan khusus untuk anak muda usia sekolah, hal ini berkaitan dengan unsur...`,
options: [`Target sasaran iklan`, `Biaya produksi iklan`, `Durasi tayang iklan`, `Ukuran cetak iklan`],
a: 0,
exp: "Menentukan siapa pengguna atau pembeli produk adalah penentuan target sasaran."
}
];
let evalIndex = 0;
let evalSkor = 0;
function loadEvaluasi() {
if(evalIndex >= evaluasiBank.length) {
document.getElementById('evaluasi-section').classList.add('hidden');
document.getElementById('lms-section').classList.remove('hidden');
document.getElementById('lms-section').classList.add('flex');
document.getElementById('final-score-display').innerText = evalSkor;
return;
}
document.getElementById('eval-feedback').classList.add('hidden');
const current = evaluasiBank[evalIndex];
document.getElementById('eval-q-num').innerText = evalIndex + 1;
document.getElementById('eval-q-text').innerHTML = current.q;
const optsContainer = document.getElementById('eval-options');
optsContainer.innerHTML = "";
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 bg-slate-50 border-2 border-slate-200 rounded-xl font-bold text-slate-700 text-lg hover:bg-amber-50 hover:border-amber-300 transition flex items-center cursor-pointer";
btn.innerHTML = opt;
btn.onclick = () => checkEvaluasi(idx, current.a, btn, current.exp);
optsContainer.appendChild(btn);
});
}
function checkEvaluasi(selected, correct, btn, explanation) {
const btns = document.getElementById('eval-options').querySelectorAll('button');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('eval-feedback');
fb.classList.remove('hidden');
if(selected === correct) {
btn.classList.replace('bg-slate-50', 'bg-green-500');
btn.classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block";
fb.innerHTML = `🎉 <b>BENAR!</b><br>${explanation}`;
evalSkor += 20;
} else {
btn.classList.replace('bg-slate-50', 'bg-red-500');
btn.classList.replace('text-slate-700', 'text-white');
btns[correct].classList.replace('bg-slate-50', 'bg-green-500');
btns[correct].classList.replace('text-slate-700', 'text-white');
fb.className = "mt-6 p-5 rounded-xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block";
fb.innerHTML = `❌ <b>SALAH.</b><br>${explanation}`;
}
setTimeout(() => {
evalIndex++;
loadEvaluasi();
}, 4000);
}
loadEvaluasi();
function kirimNilaiKeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const refleksi = document.getElementById('refleksi-teks').value || "TP 1 Selesai!";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: evalSkor,
baterai: baterai,
hambatan: "Refleksi TP 1 Bab 2: " + refleksi,
strategi: "Evaluasi TP 1: Pengertian & Jenis Iklan"
}, "*");
} else {
alert("Laporan TP 1 Diterima! (Sistem Lokal)\n\nSkor: " + evalSkor + "\nNama: " + nama);
}
}
</script>
</body>
</html>
📊 Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Belum ada nilai siswa yang masuk. | |||||