Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 7
MPLS
Literasi Digital 2
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Misi MPLS: Jadi Netizen Kece! 🚀</title>
<!-- Font & Icons -->
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
background-color: #f0fdfa;
background-image: radial-gradient(#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); }
/* Fun Animations */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.floating { animation: float 3s ease-in-out infinite; }
@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; }
/* Checklist Gamification */
.check-item, .confess-item { transition: all 0.2s ease; border-bottom: 4px solid #cbd5e1; cursor: pointer; }
.check-item:hover, .confess-item:hover { transform: translateY(-3px); border-bottom-width: 7px; border-color: #fcd34d; }
.check-item:active, .confess-item:active { transform: translateY(2px); border-bottom-width: 2px; }
.check-item.checked {
background: linear-gradient(135deg, #8b5cf6, #d946ef);
color: white;
border-color: #6d28d9;
transform: scale(1.03);
}
.confess-item.checked {
background: linear-gradient(135deg, #f43f5e, #fb923c);
color: white;
border-color: #be123c;
transform: scale(1.03);
}
/* Quiz Button Styles */
.guess-btn, .auto-guess-btn { transition: all 0.2s; border-bottom: 5px solid #cbd5e1; cursor: pointer; }
.guess-btn:active, .auto-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: #f43f5e !important; color: white !important; border-bottom-color: #be123c !important; pointer-events: none; opacity: 0.8; }
/* Gradient Text */
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #7c3aed, #db2777);
}
/* Nav Buttons */
.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; }
</style>
</head>
<body class="min-h-screen flex flex-col text-slate-800">
<!-- Header & Progress Bar -->
<header class="bg-white/80 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-yellow-400 p-2 rounded-xl shadow-sm rotate-3">
<i data-lucide="gamepad-2" class="w-6 h-6 text-purple-900"></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">Level Progress</span>
<span id="progress-text" class="text-xs font-black text-white bg-pink-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-yellow-400 via-pink-500 to-purple-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 -->
<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-3xl mx-auto space-y-5">
<div class="inline-block px-5 py-2 rounded-2xl bg-yellow-300 text-purple-900 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_rgba(124,58,237,1)] rotate-[-2deg]">
#MPLS_Seru2026
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Siap Jadi <span class="text-gradient">Netizen Kece?</span> 😎📱
</h1>
<p class="text-xl text-slate-600 font-bold max-w-xl mx-auto">
Welcome to SMP! Yuk belajar cara asyik dan aman main sosmed, game, dan internet bareng-bareng!
</p>
<img src="./assets/WhatsApp Image 2026-07-09 at 23.07.58.jpeg" alt="Teens on phones" class="w-80 h-56 object-cover rounded-3xl mx-auto shadow-[8px_8px_0px_rgba(219,39,119,0.5)] mt-8 border-4 border-white floating" onerror="this.src='https://images.unsplash.com/photo-1610427339798-2cb2d04a7428?auto=format&fit=crop&w=800&q=80'">
</div>
</div>
<!-- Slide 2: Pengenalan -->
<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-800 inline-block bg-purple-100 px-6 py-2 rounded-2xl rotate-1">Literasi Digital Tuh Apaan Sih? 🤔</h2>
</div>
<div class="flex flex-col md:flex-row gap-8 items-center bg-white p-8 rounded-3xl shadow-[6px_6px_0px_rgba(203,213,225,1)] border-2 border-slate-200 mt-4">
<div class="flex-1 space-y-6 text-xl text-slate-700 font-bold">
<p class="bg-yellow-100 p-4 rounded-xl border-l-8 border-yellow-400">🎮 Bukan cuma soal jago <i>push rank</i> atau bikin konten FYP TikTok doang, bestie!</p>
<ul class="space-y-4">
<li class="flex gap-4 items-center"><span class="bg-pink-100 text-pink-600 p-2 rounded-lg text-2xl">🧠</span> Pintar bedain mana info asli, mana hoaks.</li>
<li class="flex gap-4 items-center"><span class="bg-blue-100 text-blue-600 p-2 rounded-lg text-2xl">🤝</span> Tau sopan santun waktu komen di IG/TikTok orang.</li>
<li class="flex gap-4 items-center"><span class="bg-green-100 text-green-600 p-2 rounded-lg text-2xl">🔐</span> Jago ngelindungin akun sendiri biar nggak di-hack!</li>
</ul>
</div>
<img src="https://static.vecteezy.com/system/resources/thumbnails/002/722/950/small_2x/side-view-of-children-using-laptop-for-communicate-video-conference-with-teacher-and-friends-on-white-background-free-vector.jpg" alt="Belajar Digital" class="w-72 h-64 object-cover rounded-2xl shadow-[6px_6px_0px_rgba(219,39,119,1)] transform rotate-2 floating border-4 border-white" onerror="this.src='https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=800&q=80'">
</div>
</div>
<!-- Slide 3: Checklist Interaktif -->
<div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="flex justify-between items-end mb-4 bg-purple-100 p-6 rounded-3xl border-2 border-purple-200">
<div>
<h2 class="text-3xl font-black text-purple-900">Checklist Anak Gaul Internet ✨</h2>
<p class="text-purple-700 font-bold mt-1 text-lg">Sentuh (Tap) kotak yang udah sering kamu lakuin!</p>
</div>
<span id="checklist-counter" class="text-lg font-black text-white bg-pink-500 px-4 py-2 rounded-xl shadow-md transition-colors rotate-3 text-center min-w-[80px]">0/5</span>
</div>
<div class="space-y-4" id="checklist">
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🤫</span> Nggak pernah ngasih tau password ke temen.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🤔</span> Mikir dulu sebelum ngetik komen pedas.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🕵️</span> Suka ngecek berita dulu (gak asal share).</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🚫</span> Block/Report orang yang suka nge-bully.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="check-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">⏰</span> Tau waktu! Kalo waktunya tidur, HP dimatiin.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
</div>
</div>
<!-- Slide 4: Auto Quiz (Survival Mode) -->
<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">Survival Game: <span class="text-gradient">Fakta vs Hoaks!</span> 🎮</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Kumpulkan skor sebanyak-banyaknya! Soal akan terus muncul.</p>
<div class="mt-4 inline-flex items-center gap-3 bg-yellow-100 border-2 border-yellow-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-yellow-700 text-xl">SKOR: <span id="quiz-score">0</span></span>
</div>
</div>
<div id="auto-quiz-container" class="space-y-4">
<div class="quiz-card p-6 rounded-3xl bg-white border-2 border-slate-200 shadow-[4px_4px_0px_rgba(203,213,225,1)] transition-colors relative" id="active-quiz-card">
<div class="flex gap-4">
<div class="bg-blue-100 text-blue-600 font-black text-2xl p-4 rounded-2xl h-fit">?</div>
<p id="quiz-question-text" class="mb-4 text-xl font-extrabold text-slate-700 leading-snug"></p>
</div>
<div class="flex gap-4 options ml-16 mt-2">
<button type="button" onclick="checkAnswer('fakta', this)" class="auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-5 border-slate-300 hover:bg-green-100 hover:text-green-700 transition-all active:translate-y-1 active:border-b-0">FAKTA ✅</button>
<button type="button" onclick="checkAnswer('hoaks', this)" class="auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-5 border-slate-300 hover:bg-red-100 hover:text-red-700 transition-all active:translate-y-1 active:border-b-0">HOAKS ❌</button>
</div>
<div id="quiz-feedback" class="hidden mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8"></div>
<button id="next-quiz-btn" onclick="loadNewQuestion()" class="hidden mt-4 w-full ml-16 py-3 bg-purple-600 text-white rounded-xl font-bold hover:bg-purple-700">Lanjut Soal Berikutnya ➡️</button>
</div>
</div>
</div>
<!-- Slide 5: Stop Bullying -->
<div class="slide flex-col p-8 gap-4 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-6">
<h2 class="text-4xl font-black text-white bg-pink-500 inline-block px-8 py-3 rounded-2xl transform rotate-2 shadow-[4px_4px_0px_#be185d]">No Drama, No Bully! 🛑</h2>
</div>
<div class="flex flex-col md:flex-row gap-8 items-center bg-white p-8 rounded-[2rem] shadow-[6px_6px_0px_rgba(203,213,225,1)] border-2 border-slate-200">
<div class="flex-1 space-y-5">
<div class="flex items-start gap-4 p-4 rounded-2xl bg-slate-50 border-2 border-slate-100 hover:border-pink-300 transition-colors">
<div class="w-12 h-12 bg-pink-100 text-pink-600 rounded-xl flex items-center justify-center text-2xl font-black flex-shrink-0">1</div>
<div>
<p class="font-black text-xl text-slate-800">Fisik Dihina? BIG NO!</p>
<p class="text-slate-600 font-bold mt-1">Ngejek fisik orang (Body Shaming) di kolom komentar itu jahat dan nggak keren sama sekali.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-2xl bg-slate-50 border-2 border-slate-100 hover:border-purple-300 transition-colors">
<div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center text-2xl font-black flex-shrink-0">2</div>
<div>
<p class="font-black text-xl text-slate-800">Jangan Jadi Cepu! 📸</p>
<p class="text-slate-600 font-bold mt-1">Nyebarin rahasia atau bikin foto memalukan teman jadi stiker WA tanpa izin itu termasuk pelanggaran lho.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 rounded-2xl bg-red-50 border-2 border-red-200 hover:border-red-400 transition-colors transform rotate-1">
<div class="w-12 h-12 bg-red-500 text-white rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm"><i data-lucide="megaphone" class="w-6 h-6"></i></div>
<div>
<p class="font-black text-xl text-red-700">Kena Bully? JANGAN DIAM!</p>
<p class="text-red-600 font-extrabold mt-1">Screenshot buktinya, block pelakunya, dan laporkan ke orang tua atau guru BK. Kamu dilindungi!</p>
</div>
</div>
</div>
<div class="flex-shrink-0 relative">
<div class="absolute inset-0 bg-yellow-400 rounded-3xl transform rotate-6 scale-105 shadow-md"></div>
<img src="https://i.pinimg.com/originals/e2/35/de/e235de5f2ee18e104fee4717d16cf73b.jpg" alt="Stop Bullying" class="w-64 h-80 object-cover rounded-3xl border-4 border-white relative z-10 floating" onerror="this.src='https://images.unsplash.com/photo-1529156069898-49953eb1b5ce?auto=format&fit=crop&w=400&q=80'">
</div>
</div>
</div>
<!-- Slide 6: Saring Sebelum Sharing -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<h2 class="text-5xl font-black text-slate-900"><span class="bg-pink-200 px-4 rounded-xl">Saring</span> Sebelum <span class="bg-blue-200 px-4 rounded-xl">Sharing!</span> 🧠</h2>
<div class="bg-white border-4 border-purple-400 rounded-[2rem] p-10 max-w-2xl space-y-6 shadow-[8px_8px_0px_rgba(192,132,252,1)] mt-6 relative">
<div class="absolute -top-10 left-1/2 transform -translate-x-1/2 w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center text-4xl shadow-md border-4 border-white">🕵️♂️</div>
<p class="text-2xl text-slate-700 font-extrabold leading-snug pt-6">Kalo dapet berita heboh di grup kelas atau keluarga, JANGAN LANGSUNG DI-FORWARD!</p>
<p class="text-lg font-bold text-slate-500">Cek dulu kebenarannya di website anti-hoaks resmi Indonesia ini:</p>
<div class="py-4 space-y-3">
<div class="bg-purple-100 py-3 px-6 rounded-2xl transform transition hover:scale-105 cursor-pointer inline-block mx-2">
<p class="font-black text-2xl text-purple-700">turnbackhoax.id</p>
</div>
<div class="bg-pink-100 py-3 px-6 rounded-2xl transform transition hover:scale-105 cursor-pointer inline-block mx-2">
<p class="font-black text-2xl text-pink-700">cekfakta.com</p>
</div>
</div>
</div>
</div>
<!-- Slide 7: Keamanan Akun -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<h2 class="text-4xl font-black text-center mb-8">Gembok Akunmu Rapat-Rapat! 🔐</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative">
<div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white w-14 h-14 rounded-xl flex items-center justify-center rotate-6 shadow-sm"><i data-lucide="key" class="w-8 h-8"></i></div>
<p class="font-black text-2xl text-slate-800 pt-4">Password Kuat</p>
<p class="text-slate-600 font-bold">Jangan pake password "123456" atau tanggal lahir. Pake kombinasi angka & simbol. Contoh: <span class="bg-yellow-200 px-2 rounded text-slate-800">@n4kK3c3_07!</span></p>
</div>
<div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative">
<div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-pink-500 text-white w-14 h-14 rounded-xl flex items-center justify-center -rotate-6 shadow-sm"><i data-lucide="ghost" class="w-8 h-8"></i></div>
<p class="font-black text-2xl text-slate-800 pt-4">Awas Phishing</p>
<p class="text-slate-600 font-bold">Jangan asal klik link aneh yang dikirim lewat WA/DM IG dari orang nggak dikenal. Akunmu bisa lenyap!</p>
</div>
<div class="bg-white border-4 border-slate-800 shadow-[6px_6px_0px_#1e293b] p-8 rounded-3xl text-center space-y-4 hover:-translate-y-2 transition-transform relative">
<div class="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-green-500 text-white w-14 h-14 rounded-xl flex items-center justify-center rotate-6 shadow-sm"><i data-lucide="shield-alert" class="w-8 h-8"></i></div>
<p class="font-black text-2xl text-slate-800 pt-4">OTP itu Rahasia!</p>
<p class="text-slate-600 font-bold">Kode 4-6 angka yang masuk via SMS/WA itu HARAM dikasih tau ke siapa aja, termasuk yang ngaku-ngaku admin/kasir.</p>
</div>
</div>
</div>
<!-- Slide 8: Jejak Digital -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="flex flex-col md:flex-row gap-10 bg-gradient-to-br from-indigo-900 to-purple-900 p-10 rounded-[2.5rem] shadow-2xl items-center text-white mt-4 relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-10 rounded-full blur-3xl"></div>
<div class="absolute bottom-0 left-0 w-48 h-48 bg-pink-500 opacity-20 rounded-full blur-2xl"></div>
<div class="flex-1 space-y-6 z-10">
<h2 class="text-5xl font-black text-yellow-300 mb-2">Jejak Digital Beb! 👣</h2>
<div class="space-y-4 text-lg font-bold">
<p class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/20">📱 Curhatan galau, foto alay, komen nge-gas hari ini...</p>
<p class="bg-white/10 p-4 rounded-2xl backdrop-blur-sm border border-white/20">🎓 ...bisa dibaca sama pihak sekolah, kampus, atau bos kamu di masa depan!</p>
<p class="bg-pink-500/80 p-4 rounded-2xl backdrop-blur-sm border border-pink-400 mt-4 text-xl">✨ Mulai sekarang, yuk bangun citra (branding) yang positif. Share karya, prestasi, atau kegiatan seru bareng teman!</p>
</div>
</div>
<div class="text-center z-10">
<img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=800&q=80" alt="Sosmed Icons" class="w-64 h-64 object-cover rounded-full shadow-[0_0_40px_rgba(236,72,153,0.5)] border-8 border-indigo-800 floating">
<p class="mt-6 font-black text-yellow-300 text-xl bg-black/30 py-2 px-4 rounded-full">Internet Gak Pernah Lupa!</p>
</div>
</div>
</div>
<!-- Slide 9: Nobar Anti Judol (Video Inline) -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-red-100 text-red-700 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_#fca5a5] rotate-[-2deg]">
#SpecialScreening 🍿
</div>
<h2 class="text-5xl md:text-6xl font-black text-slate-900 mt-2">Nobar Bareng:<br><span class="text-gradient">Kemenangan Sejati</span> 🎬</h2>
<p class="text-xl font-bold text-slate-600 mt-2 max-w-3xl">Judi Online (Judol) itu penipuan berkedok game yang bisa merusak masa depan. Yuk, tonton film pendek edukasi pencegahannya di bawah ini!</p>
<!-- PEMUTAR VIDEO DI DALAM SLIDE -->
<div class="w-full max-w-3xl mx-auto mt-6 rounded-2xl overflow-hidden border-4 border-slate-800 shadow-[8px_8px_0px_#cbd5e1] bg-black">
<video controls class="w-full aspect-video outline-none" poster="https://images.unsplash.com/photo-1594909122845-11baa439b7bf?auto=format&fit=crop&w=800&q=80">
<source src="./assets/FILM PENDEK _KEMENANGAN SEJATI_.mp4" type="video/mp4">
Browser kamu tidak mendukung pemutaran video.
</video>
</div>
</div>
<!-- Slide 10: Refleksi Film "Kemenangan Sejati" -->
<div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-4">
<h2 class="text-3xl font-black text-purple-900 bg-purple-100 inline-block px-6 py-2 rounded-2xl transform -rotate-1">Refleksi Kemenangan Sejati 💭</h2>
<p class="text-lg font-bold text-slate-500 mt-3">Yuk, tuangkan pendapatmu setelah nonton film tadi!</p>
</div>
<div class="space-y-4 mt-2">
<!-- Input Refleksi -->
<div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-800 mb-2">a. Apa pelajaran paling berharga dari film ini?</label>
<textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Tulis jawabanmu di sini..."></textarea>
</div>
<div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-800 mb-2">b & c. Kenapa tokoh utama bisa terjebak judol & apa faktornya?</label>
<textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Ceritakan pendapatmu..."></textarea>
</div>
<div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-800 mb-2">d. Apa dampak negatif yang terlihat dari Judol & Pinjol ilegal?</label>
<textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Sebutkan dampaknya..."></textarea>
</div>
<div class="bg-white p-5 rounded-2xl border-2 border-slate-200 shadow-sm">
<label class="block font-black text-slate-800 mb-2">e & f. Kalau kamu/teman di posisi itu, apa tindakanmu & siapa yang dibantu?</label>
<textarea class="w-full p-3 rounded-xl bg-slate-50 border-2 border-slate-200 focus:border-purple-400 outline-none font-medium" rows="2" placeholder="Aku akan..."></textarea>
</div>
</div>
</div>
<!-- Slide 10: Penutup & Download PDF (PDF Inline) -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-4 h-full min-h-[75vh]" id="slide-10">
<div class="text-7xl mb-2 animate-bounce">🏆</div>
<h2 class="text-5xl font-black text-purple-900 mb-2">Level 1 Completed!</h2>
<p class="text-2xl font-extrabold text-slate-600">Selamat! Kamu resmi jadi Siswa SMP yang Melek Digital.</p>
<div class="bg-white border-4 border-dashed border-pink-400 p-6 rounded-3xl max-w-4xl w-full mt-4 shadow-xl flex flex-col items-center">
<p class="text-xl font-bold text-slate-700 mb-4">Sebagai hadiah, Kakak udah siapin contekan keren buat kamu. Langsung baca atau download ya!</p>
<!-- PENAMPIL PDF DI DALAM SLIDE -->
<div class="w-full h-[40vh] md:h-[50vh] rounded-xl overflow-hidden border-2 border-slate-200 mb-4 relative z-10">
<iframe src="./assets/Unmasking_the_Gambling_Trap.pdf" class="w-full h-full border-none bg-slate-100" title="PDF Cheat Sheet"></iframe>
</div>
<a href="./assets/Unmasking_the_Gambling_Trap.pdf" download class="inline-flex items-center gap-3 px-8 py-3 bg-gradient-to-r from-pink-500 to-purple-600 text-white text-xl font-black rounded-xl shadow-[0_6px_0px_#9333ea] hover:translate-y-1 transition-all active:shadow-none active:translate-y-2">
<i data-lucide="download-cloud" class="w-6 h-6"></i>
Download File PDF
</a>
</div>
<div class="bg-yellow-200 text-yellow-900 font-bold px-6 py-3 rounded-full animate-pulse border-2 border-yellow-400 mt-4">
⚠️ Eits, jangan ditutup dulu! Masih ada 1 Misi Bonus di slide selanjutnya! 👉
</div>
</div>
<!-- Slide 11: Pengakuan Dosa (Bonus Intro) -->
<div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="inline-block px-5 py-2 rounded-2xl bg-blue-100 text-blue-700 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_#93c5fd] rotate-[-2deg] mx-auto text-center w-fit mb-2">
Bonus Stage: Misi Kampanye 3S 🎯
</div>
<div class="text-center mb-2">
<h2 class="text-4xl font-black text-slate-900 inline-block bg-orange-200 px-6 py-2 rounded-2xl transform -rotate-2 mt-2">Pengakuan Dosa Netizen! 🫣</h2>
<p class="text-lg font-bold text-slate-500 mt-3">Yuk jujur-jujuran. Klik (Tap) kotak di bawah kalau kamu <span class="text-red-500 underline">PERNAH</span> ngelakuin ini:</p>
</div>
<div class="space-y-4 mt-4" id="confession-list">
<button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">😵💫</span> Main gawai (HP/Laptop) sampai lupa waktu!</span>
<i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🛌</span> Tidur sambil bawa-bawa/peluk gawai!</span>
<i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">🍜</span> Makan sambil nonton video atau TV!</span>
<i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
<button type="button" class="confess-item w-full flex items-center justify-between px-6 py-5 rounded-2xl bg-white border-2 border-slate-200">
<span class="font-bold text-left text-lg flex items-center gap-3"><span class="text-2xl">📚</span> Belajar sambil buka banyak aplikasi/tab lain!</span>
<i data-lucide="hand" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
</div>
<div id="confess-msg" class="hidden text-center mt-4 p-4 bg-orange-100 rounded-2xl border-2 border-orange-300 pop-in">
<p class="font-black text-orange-700 text-xl">Waduh! Ketahuan deh 🤭 Nggak apa-apa, yuk kita perbaiki sama-sama!</p>
</div>
</div>
<!-- Slide 12: Screen Time -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<h2 class="text-5xl font-black text-slate-900 mb-2">Apa itu <span class="bg-blue-300 px-4 py-1 rounded-xl text-blue-900 transform inline-block rotate-2">Screen Time?</span> ⏱️</h2>
<p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto">
<i>Screen time</i> (waktu layar) adalah total waktu yang kamu habisin buat natap layar (main HP, nonton TV, nge-game). Kalau kelamaan, awas efek sampingnya!
</p>
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mt-6 w-full max-w-5xl">
<div class="bg-white border-4 border-red-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition">
<span class="text-5xl mb-2">👁️</span>
<p class="font-black text-slate-700 text-center">Mata Lelah</p>
</div>
<div class="bg-white border-4 border-orange-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.1s;">
<span class="text-5xl mb-2">🦥</span>
<p class="font-black text-slate-700 text-center">Malas Gerak</p>
</div>
<div class="bg-white border-4 border-yellow-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.2s;">
<span class="text-5xl mb-2">🥱</span>
<p class="font-black text-slate-700 text-center">Susah Tidur</p>
</div>
<div class="bg-white border-4 border-pink-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center pop-in hover:scale-105 transition" style="animation-delay: 0.3s;">
<span class="text-5xl mb-2">🎢</span>
<p class="font-black text-slate-700 text-center leading-tight">Emosi Naik Turun</p>
</div>
<div class="bg-white border-4 border-purple-300 p-4 rounded-3xl shadow-md flex flex-col items-center justify-center col-span-2 md:col-span-1 pop-in hover:scale-105 transition" style="animation-delay: 0.4s;">
<span class="text-5xl mb-2">🧟</span>
<p class="font-black text-slate-700 text-center">Kecanduan</p>
</div>
</div>
</div>
<!-- Slide 13: Screen Zone -->
<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-2"><span class="bg-purple-300 px-4 py-1 rounded-xl text-purple-900 transform inline-block -rotate-2">Screen Zone</span> (Zona Layar) 🚷</h2>
<p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto mt-4">
Bikin kesepakatan tempat di rumah, mana yang <b>BOLEH</b> dan <b>DILARANG</b> main HP. Biar kamu nggak sembunyi-sembunyi dan tetap asyik ngobrol bareng keluarga!
</p>
</div>
<div class="flex flex-col md:flex-row gap-8 mt-6 w-full max-w-4xl">
<div class="flex-1 bg-green-50 border-4 border-green-400 p-8 rounded-3xl shadow-[6px_6px_0px_#4ade80] hover:-translate-y-2 transition-transform">
<h3 class="font-black text-3xl text-green-700 mb-6 flex items-center gap-3"><i data-lucide="check-circle-2" class="w-8 h-8"></i> Boleh Banget!</h3>
<ul class="space-y-4 text-xl font-bold text-slate-700">
<li class="flex items-center gap-3"><span class="text-3xl">🛋️</span> Ruang Keluarga</li>
<li class="flex items-center gap-3"><span class="text-3xl">📚</span> Ruang Belajar</li>
</ul>
</div>
<div class="flex-1 bg-red-50 border-4 border-red-400 p-8 rounded-3xl shadow-[6px_6px_0px_#f87171] hover:-translate-y-2 transition-transform">
<h3 class="font-black text-3xl text-red-700 mb-6 flex items-center gap-3"><i data-lucide="x-circle" class="w-8 h-8"></i> BIG NO!</h3>
<ul class="space-y-4 text-xl font-bold text-slate-700">
<li class="flex items-center gap-3"><span class="text-3xl">🛏️</span> Kamar Tidur</li>
<li class="flex items-center gap-3"><span class="text-3xl">🍽️</span> Meja Makan</li>
<li class="flex items-center gap-3"><span class="text-3xl">🚽</span> Toilet</li>
</ul>
</div>
</div>
</div>
<!-- Slide 14: Screen Break -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<h2 class="text-5xl font-black text-slate-900 mb-2">Kasih Jeda Dong! <span class="bg-green-300 px-4 py-1 rounded-xl text-green-900 transform inline-block rotate-1">(Screen Break)</span> 🧘</h2>
<p class="text-xl text-slate-600 font-bold max-w-3xl mx-auto">
Setelah 30 menit main game atau scroll TikTok, mata & badan butuh istirahat! Kalau nggak, mata cepat capek dan badan kaku. Pas lagi jeda, lakuin aktivitas seru ini:
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-8 w-full max-w-5xl">
<div class="bg-white border-4 border-blue-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-blue-400 hover:-translate-y-2 transition-all">
<span class="text-6xl mb-4 block">🪟</span>
<p class="font-black text-xl text-slate-700">Melihat Keluar Jendela</p>
</div>
<div class="bg-white border-4 border-pink-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-pink-400 hover:-translate-y-2 transition-all">
<span class="text-6xl mb-4 block">🚶</span>
<p class="font-black text-xl text-slate-700">Berjalan-jalan Sebentar</p>
</div>
<div class="bg-white border-4 border-cyan-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-cyan-400 hover:-translate-y-2 transition-all">
<span class="text-6xl mb-4 block">💧</span>
<p class="font-black text-xl text-slate-700">Minum Air Putih</p>
</div>
<div class="bg-white border-4 border-orange-200 p-6 rounded-3xl shadow-sm hover:shadow-md hover:border-orange-400 hover:-translate-y-2 transition-all">
<span class="text-6xl mb-4 block">🤸</span>
<p class="font-black text-xl text-slate-700">Peregangan Badan</p>
</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">Mundur Dulu</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-yellow-400 text-slate-900 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-yellow-500 shadow-[0_4px_0px_#b45309]">
<span class="hidden md:inline">Gasss Lanjut!</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
// Navigasi Slide Basic
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, .check-item, .confess-item, img, .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.innerHTML = '<span class="hidden md:inline">Tamat! 🎉</span>';
} else {
nextBtn.disabled = false;
nextBtn.innerHTML = '<span class="hidden md:inline">Gasss Lanjut!</span> <i data-lucide="rocket" class="w-6 h-6"></i>';
lucide.createIcons();
}
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); });
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' && current < slides.length - 1) showSlide(current + 1);
if (e.key === 'ArrowLeft' && current > 0) showSlide(current - 1);
});
// Checklist Logic (Slide 3)
const checkItems = document.querySelectorAll('.check-item');
const checklistCounter = document.getElementById('checklist-counter');
let checkedCount = 0;
checkItems.forEach(btn => {
btn.addEventListener('click', () => {
const isChecked = btn.classList.toggle('checked');
const icon = btn.querySelector('svg');
if(isChecked) {
checkedCount++;
icon.classList.remove('opacity-30', 'text-slate-400');
icon.classList.add('text-white', 'opacity-100');
} else {
checkedCount--;
icon.classList.add('opacity-30', 'text-slate-400');
icon.classList.remove('text-white', 'opacity-100');
}
checklistCounter.textContent = `${checkedCount}/${checkItems.length}`;
if(checkedCount === checkItems.length) {
checklistCounter.classList.remove('bg-pink-500');
checklistCounter.classList.add('bg-green-500');
checklistCounter.innerHTML = "LULUS! 🎉";
} else {
checklistCounter.classList.add('bg-pink-500');
checklistCounter.classList.remove('bg-green-500');
}
});
});
// Pengakuan Dosa Logic (Slide 11)
const confessItems = document.querySelectorAll('.confess-item');
const confessMsg = document.getElementById('confess-msg');
let confessCount = 0;
confessItems.forEach(btn => {
btn.addEventListener('click', () => {
const isChecked = btn.classList.toggle('checked');
const icon = btn.querySelector('svg');
if(isChecked) {
confessCount++;
icon.classList.remove('opacity-30', 'text-slate-400');
icon.classList.add('text-white', 'opacity-100');
} else {
confessCount--;
icon.classList.add('opacity-30', 'text-slate-400');
icon.classList.remove('text-white', 'opacity-100');
}
if(confessCount > 0) {
confessMsg.classList.remove('hidden');
} else {
confessMsg.classList.add('hidden');
}
});
});
// ==========================================
// AUTO QUIZ BANK SOAL (SURVIVAL MODE)
// ==========================================
const questionBank = [
{ q: `"Eh guys, klik link ini buat dapetin skin ML/FF gratis langsung dari Moonton/Garena! Asli no tipu-tipu!"`, a: 'hoaks', msg: "Penipuan (Phishing)! Jangan diklik, ntar akun kamu dicolong hacker." },
{ q: `"Apapun yang kita hapus di Sosmed (foto alay, komen galak), sebenernya tetep ada jejaknya dan bisa dicari lagi."`, a: 'fakta', msg: "Jejak digital itu susah banget hilangnya! Hati-hati ya sebelum posting." },
{ q: `"Menang undian hadiah motor 100 juta dari bank, tapi syaratnya disuruh transfer uang pajak dulu 2 juta."`, a: 'hoaks', msg: "Modus penipuan klasik! Undian resmi ngga akan minta transfer uang duluan." },
{ q: `"Semua berita yang dibagikan oleh Om/Tante di grup WA keluarga itu pasti 100% benar karena mereka orang tua."`, a: 'hoaks', msg: "Belum tentu! Banyak orang tua yang juga gampang kemakan berita bohong/hoaks." },
{ q: `"Nge-bully teman di internet pakai akun fake (palsu) itu aman dan nggak akan bisa dilacak oleh polisi."`, a: 'hoaks', msg: "Polisi punya tim siber yang bisa ngelacak alamat IP kamu walaupun pakai akun palsu!" },
{ q: `"OTP (One Time Password) itu cuma boleh dipakai oleh kita sendiri dan ngga boleh dikasih ke siapapun."`, a: 'fakta', msg: "Bener banget! Kalau OTP dikasih ke orang, akun/dompet digital kamu bisa dikuras habis." },
{ q: `"Kalau ada aplikasi yang nawarin bisa lihat siapa yang sering kepoin profil IG/WA kita, itu pasti bohongan."`, a: 'fakta', msg: "Betul! Kebanyakan aplikasi kaya gitu cuma buat nyuri data (password) kamu." }
];
let currentQIndex = -1;
let quizScore = 0;
let usedIndices = [];
const qText = document.getElementById('quiz-question-text');
const qFeedback = document.getElementById('quiz-feedback');
const nextBtnQuiz = document.getElementById('next-quiz-btn');
const scoreDisplay = document.getElementById('quiz-score');
const activeCard = document.getElementById('active-quiz-card');
function loadNewQuestion() {
qFeedback.classList.add('hidden');
nextBtnQuiz.classList.add('hidden');
activeCard.classList.remove('border-green-400', 'bg-green-50', 'border-red-400', 'bg-red-50');
const btns = document.querySelectorAll('.auto-guess-btn');
btns.forEach(b => {
b.disabled = false;
b.className = "auto-guess-btn flex-1 py-4 bg-slate-100 rounded-2xl text-slate-700 font-black text-xl border-b-4 border-slate-300 hover:bg-slate-200 transition-all active:translate-y-1 active:border-b-0";
});
if(usedIndices.length >= questionBank.length) usedIndices = [];
let rand;
do {
rand = Math.floor(Math.random() * questionBank.length);
} while (usedIndices.includes(rand));
usedIndices.push(rand);
currentQIndex = rand;
qText.textContent = questionBank[rand].q;
}
loadNewQuestion();
window.checkAnswer = function(guess, btnElement) {
const currentQ = questionBank[currentQIndex];
const btns = document.querySelectorAll('.auto-guess-btn');
btns.forEach(b => b.disabled = true);
if(guess === currentQ.a) {
btnElement.classList.add('btn-correct');
activeCard.classList.add('border-green-400', 'bg-green-50');
qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-green-500 bg-green-100 text-green-800 pop-in block';
qFeedback.innerHTML = `<span class="text-2xl block mb-2">🎉 Yasssh Benar Banget!</span> ${currentQ.msg}`;
quizScore += 100;
scoreDisplay.textContent = quizScore;
} else {
btnElement.classList.add('btn-wrong');
btns.forEach(b => {
if(b.textContent.toLowerCase().includes(currentQ.a)) b.classList.add('btn-correct');
});
activeCard.classList.add('border-red-400', 'bg-red-50');
qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-red-500 bg-red-100 text-red-800 pop-in block';
qFeedback.innerHTML = `<span class="text-2xl block mb-2">😅 Yhaa Kegocek!</span> Jawabannya adalah <b>${currentQ.a.toUpperCase()}</b>.<br>${currentQ.msg}`;
quizScore = Math.max(0, quizScore - 50);
scoreDisplay.textContent = quizScore;
}
nextBtnQuiz.classList.remove('hidden');
};
</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. | |||||