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>
Kelas 7
Matematika
Bilangan Rasional - kuis kelompok
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 7 - Bilangan Rasional</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&family=Fraunces:wght@700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<style>
body { font-family: 'Work Sans', sans-serif; }
.font-display { font-family: 'Fraunces', serif; }
.slide { display: none; animation: fadeIn 0.4s ease; }
.slide.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.option-btn { transition: all 0.2s; }
.option-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
.timer-pulse { animation: pulse-glow 1s infinite; }
.materi-card { background: white; border-radius: 12px; padding: 1.25rem; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-teal-50 via-slate-50 to-emerald-50 text-slate-800">
<div class="slide active" id="slide-0">
<div class="relative w-full min-h-screen flex flex-col items-center justify-center bg-teal-950 text-white text-center px-6 py-12">
<div class="absolute inset-0 bg-gradient-to-t from-teal-950/90 via-teal-900/60 to-teal-950/40"></div>
<div class="relative z-10 flex flex-col items-center justify-center max-w-2xl mx-auto">
<span class="inline-block px-4 py-1 rounded-full text-sm font-medium mb-4 bg-teal-500 text-white shadow">Modul Interaktif Matematika</span>
<h1 class="font-display leading-tight mb-4 text-4xl md:text-5xl font-black">Bab 2: Bilangan Rasional</h1>
<p class="max-w-lg mb-8 text-teal-100 text-sm md:text-base text-balance">Mari pelajari cara menyatakan, membandingkan, dan mengoperasikan bilangan rasional dalam kehidupan sehari-hari!</p>
<button class="px-8 py-3.5 bg-amber-500 hover:bg-amber-400 text-slate-900 rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="goSlide(1)">Mulai Pembelajaran →</button>
</div>
</div>
</div>
<div class="slide" id="slide-1">
<div class="max-w-2xl mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center">
<div class="text-5xl mb-4">๐ฏ</div>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Capaian Pembelajaran (CP)</h2>
<div class="w-full bg-white border border-teal-100 rounded-2xl p-6 shadow-sm mb-8">
<p class="leading-relaxed text-slate-700 text-sm md:text-base">Di akhir fase D, peserta didik dapat membaca, menulis, dan membandingkan bilangan bulat, bilangan rasional dan irasional, bilangan desimal, bilangan berpangkat bulat dan akar, bilangan dalam notasi ilmiah. Mereka dapat menerapkan operasi aritmetika pada bilangan real, dan memberikan estimasi/perkiraan dalam menyelesaikan masalah.</p>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(0)">← Kembali</button>
<button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(2)">Lanjut →</button>
</div>
</div>
</div>
<div class="slide" id="slide-2">
<div class="max-w-2xl mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center">
<div class="text-5xl mb-4">๐</div>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Tujuan Pembelajaran (TP)</h2>
<div class="w-full bg-white border border-slate-200 rounded-2xl p-6 shadow-sm mb-8 space-y-4 text-sm md:text-base text-slate-700">
<div class="flex gap-3"><span class="font-bold text-teal-600">1.</span><p>Peserta didik dapat mengidentifikasi bilangan rasional dan menyatakan bilangan rasional dalam bentuk pecahan dan desimal.</p></div>
<div class="flex gap-3"><span class="font-bold text-teal-600">2.</span><p>Peserta didik dapat membandingkan dan mengurutkan bilangan rasional serta menaksir nilai bilangan rasional.</p></div>
<div class="flex gap-3"><span class="font-bold text-teal-600">3.</span><p>Peserta didik dapat melakukan operasi hitung penjumlahan, pengurangan, perkalian, dan pembagian bilangan rasional serta memecahkan masalah kontekstual.</p></div>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(1)">← Kembali</button>
<button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(3)">Lanjut →</button>
</div>
</div>
</div>
<div class="slide" id="slide-3">
<div class="max-w-4xl mx-auto px-6 py-10 min-h-screen flex flex-col justify-center">
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-8">Eksplorasi Konsep Bilangan Rasional</h2>
<div class="grid md:grid-cols-2 gap-4 mb-6">
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">๐ก Definisi</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Bilangan rasional adalah bilangan yang dapat ditulis sebagai pecahan <strong>a/b</strong> di mana <em>a</em> dan <em>b</em> bilangan bulat, serta <strong>b โ 0</strong>.</p>
</div>
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">๐ Konversi Bentuk</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Mengubah pecahan ke desimal dilakukan dengan pembagian kurung bersusun (misal: 1/4 = 0,25). Desimal berulang juga merupakan bilangan rasional (0,333...).</p>
</div>
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">โ๏ธ Membandingkan Nilai</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Gunakan penyamaan penyebut atau ubah ke desimal. Hati-hati pada bilangan negatif: makin besar angkanya, nilainya makin kecil (<strong>-0,5 > -0,75</strong>).</p>
</div>
<div class="materi-card">
<h3 class="font-bold text-teal-700 mb-1">๐งฎ Operasi Aritmetika</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Penjumlahan/pengurangan wajib menyamakan penyebut. Pada perkalian pecahan, kalikan langsung pembilang dengan pembilang, penyebut dengan penyebut.</p>
</div>
</div>
<div class="materi-card mb-8">
<h3 class="font-bold text-teal-700 mb-1">๐ Aplikasi Kontekstual</h3>
<p class="text-xs md:text-sm text-slate-600 leading-relaxed">Digunakan saat menghitung sisa bahan kue, pembagian potongan tali, pengukuran kedalaman laut, atau menghitung diskon belanja secara presisi.</p>
</div>
<div class="flex justify-center gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(2)">← Kembali</button>
<button class="px-6 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-semibold shadow transition" onclick="goSlide(4)">Lanjut →</button>
</div>
</div>
</div>
<div class="slide" id="slide-4">
<div class="max-w-2xl mx-auto px-6 py-10 min-h-screen flex flex-col items-center justify-center">
<div class="text-5xl mb-4">โ๏ธ</div>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 text-center mb-6">Contoh Soal & Pembahasan</h2>
<div class="w-full space-y-4 mb-8 text-sm md:text-base">
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<p class="font-bold text-slate-800 mb-1">Contoh 1: Nyatakan 3/8 dalam desimal</p>
<p class="text-teal-700 font-medium">Jawaban: lakukan pembagian bersusun 3 รท 8 = 0,375. (Rasional terbatas)</p>
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<p class="font-bold text-slate-800 mb-1">Contoh 2: Bandingkan -1/2 dengan -1/4</p>
<p class="text-teal-700 font-medium">Jawaban: -0,5 < -0,25. Maka, -1/2 < -1/4.</p>
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<p class="font-bold text-slate-800 mb-1">Contoh 3: Ibu memiliki 2,5 kg beras, dimasak sebanyak 1 1/4 kg. Sisa beras?</p>
<p class="text-teal-700 font-medium">Jawaban: 2,5 kg โ 1,25 kg = 1,25 kg atau 1 1/4 kg.</p>
</div>
</div>
<div class="flex gap-4">
<button class="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-full font-semibold shadow transition" onclick="goSlide(3)">← Kembali</button>
<button class="px-8 py-2.5 bg-amber-500 hover:bg-amber-400 text-slate-900 rounded-full font-bold shadow-md hover:scale-105 transition" onclick="goSlide(5)">Mulai Quiz Kelompok โ๏ธ</button>
</div>
</div>
</div>
<div class="slide" id="slide-5">
<div class="w-full px-3 py-4 min-h-screen flex flex-col justify-between">
<div class="grid grid-cols-2 gap-3 flex-1">
<div class="border-2 border-teal-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-teal-100 text-teal-800">๐ฅ KELOMPOK 1</span>
<div id="timer1" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer1-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar1" class="h-1.5 rounded-full bg-teal-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q1-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q1-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb1" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
<div class="border-2 border-orange-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-orange-100 text-orange-800">โก KELOMPOK 2</span>
<div id="timer2" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer2-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar2" class="h-1.5 rounded-full bg-orange-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q2-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q2-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb2" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
<div class="border-2 border-purple-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-800">๐ฎ KELOMPOK 3</span>
<div id="timer3" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer3-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar3" class="h-1.5 rounded-full bg-purple-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q3-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q3-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb3" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
<div class="border-2 border-blue-300 rounded-xl p-3 bg-white flex flex-col shadow-sm">
<div class="flex items-center justify-between mb-2">
<span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-blue-100 text-blue-800">๐ KELOMPOK 4</span>
<div id="timer4" class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-50 text-red-600 font-bold text-xs timer-pulse">
<i data-lucide="clock" style="width:12px;height:12px;"></i><span id="timer4-text">15</span>
</div>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-200 mb-2">
<div id="bar4" class="h-1.5 rounded-full bg-blue-500 transition-all duration-300" style="width:0%"></div>
</div>
<p id="q4-text" class="text-xs sm:text-sm font-bold text-slate-800 mb-2 min-h-[40px]"></p>
<div id="q4-options" class="grid grid-cols-2 gap-2 flex-1 items-center"></div>
<div id="fb4" class="mt-2 p-1.5 rounded-lg text-center font-bold text-xs hidden"></div>
</div>
</div>
</div>
</div>
<div class="slide" id="slide-6">
<div class="max-w-2xl mx-auto px-5 py-12 text-center">
<div class="text-6xl mb-4">๐</div>
<h2 class="font-display mb-6 text-3xl font-black text-slate-800">Papan Skor Akhir Pertandingan Kelompok</h2>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
<div class="bg-teal-50 border border-teal-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-teal-800 mb-1">Kelompok 1</p>
<p id="score1-text" class="text-2xl font-black text-teal-600"></p>
</div>
<div class="bg-orange-50 border border-orange-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-orange-800 mb-1">Kelompok 2</p>
<p id="score2-text" class="text-2xl font-black text-orange-600"></p>
</div>
<div class="bg-purple-50 border border-purple-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-purple-800 mb-1">Kelompok 3</p>
<p id="score3-text" class="text-2xl font-black text-purple-600"></p>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 shadow-sm">
<p class="font-bold text-xs text-blue-800 mb-1">Kelompok 4</p>
<p id="score4-text" class="text-2xl font-black text-blue-600"></p>
</div>
</div>
<p id="winner-text" class="text-xl font-black text-slate-800 mb-8 p-3 bg-amber-100 rounded-2xl inline-block px-6"></p>
<div>
<button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm" onclick="startIndividuQuiz()">Lanjut Kuis Individu Mandiri →</button>
</div>
</div>
</div>
<div class="slide" id="slide-7">
<div class="max-w-xl mx-auto px-6 py-12 min-h-screen flex flex-col justify-center">
<div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-md">
<div class="flex justify-between items-center mb-4">
<span class="px-3 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-800">๐ฏ TANTANGAN INDIVIDU</span>
<span id="ind-progress" class="text-xs font-bold text-slate-500">Soal 1 dari 5</span>
</div>
<div class="w-full bg-slate-100 h-2 rounded-full mb-6">
<div id="ind-bar" class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: 20%"></div>
</div>
<p id="ind-q-text" class="text-base font-bold text-slate-800 mb-4 min-h-[60px]"></p>
<div id="ind-options" class="flex flex-col gap-3"></div>
<div id="ind-fb" class="mt-4 p-3 rounded-xl text-center font-bold text-sm hidden"></div>
</div>
</div>
</div>
<div class="slide" id="slide-8">
<div class="max-w-md mx-auto px-6 py-12 min-h-screen flex flex-col items-center justify-center text-center">
<div class="text-6xl mb-4">โญ</div>
<h2 class="font-display text-2xl font-black text-slate-800 mb-2">Evaluasi Hasil Mandiri</h2>
<p class="text-sm text-slate-500 mb-6">Kerja bagus! Berikut perolehan poin latihan mandirimu hari ini:</p>
<div class="bg-white border border-indigo-100 rounded-3xl p-6 shadow-sm w-full mb-8">
<p class="text-xs uppercase tracking-wider font-bold text-slate-400 mb-1">Skor Kamu</p>
<p id="ind-score-text" class="text-5xl font-black text-indigo-600">0 / 5</p>
<p id="ind-eval-msg" class="text-sm font-medium text-slate-600 mt-3"></p>
</div>
<button class="w-full py-3 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-bold shadow transition hover:scale-105" onclick="goSlide(9)">Isi Lembar Refleksi Akhir</button>
</div>
</div>
<div class="slide" id="slide-9">
<div class="max-w-2xl mx-auto px-6 py-10 min-h-screen flex flex-col justify-center">
<div class="text-center mb-6">
<span class="text-5xl">๐ญ</span>
<h2 class="font-display text-2xl md:text-3xl font-bold text-slate-800 mt-2">Lembar Refleksi Pembelajaran</h2>
<p class="text-xs md:text-sm text-slate-500">Evaluasi pemahaman kelompok dan individu secara jujur</p>
</div>
<div class="space-y-4 mb-8">
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<label class="block font-bold text-sm text-slate-800 mb-3">1. Bagaimana perasaan kelompokmu setelah mencoba soal Bilangan Rasional tadi?</label>
<div class="grid grid-cols-4 gap-2 text-center text-sm">
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="sangat-paham" class="text-teal-600">
<span class="text-xl">๐</span><span class="text-xs font-semibold">Sangat Paham</span>
</label>
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="paham" class="text-teal-600" checked>
<span class="text-xl">๐</span><span class="text-xs font-semibold">Paham</span>
</label>
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="bingung" class="text-teal-600">
<span class="text-xl">๐คจ</span><span class="text-xs font-semibold">Ragu-ragu</span>
</label>
<label class="p-3 border rounded-xl hover:bg-slate-50 cursor-pointer flex flex-col items-center gap-1">
<input type="radio" name="ref-feel" value="sulit" class="text-teal-600">
<span class="text-xl">๐ฐ</span><span class="text-xs font-semibold">Butuh Bimbingan</span>
</label>
</div>
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<label for="ref-kunci" class="block font-bold text-sm text-slate-800 mb-1">2. Bagian mana yang menurut kalian paling menantang?</label>
<input type="text" id="ref-kunci" placeholder="Misal: mengubah desimal berulang, tanda negatif..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
<label for="ref-rencana" class="block font-bold text-sm text-slate-800 mb-1">3. Apa rencana perbaikan untuk pertemuan selanjutnya?</label>
<input type="text" id="ref-rencana" placeholder="Misal: lebih teliti menyamakan penyebut pecahan..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
</div>
<div class="text-center space-y-2">
<button class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-full font-bold shadow-lg text-sm transition hover:scale-105" onclick="submitRefleksi()">Kirim Laporan & Selesai! ๐</button>
<p id="ref-success" class="text-xs font-bold text-emerald-600 hidden animate-pulse">Refleksi terkam! Terima kasih telah belajar dengan giat hari ini.</p>
</div>
</div>
</div>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
function goSlide(n) {
slides.forEach(s => s.classList.remove('active'));
slides[n].classList.add('active');
if (n === 5) startQuiz();
}
// BANK SOAL INDEPENDEN KELOMPOK
const allQs = [
[
{ q: "Manakah yang merupakan bilangan rasional?", opts: ["โ2", "ฯ (pi)", "0,35", "โ7"], ans: 2 },
{ q: "Bentuk desimal dari 3/5 Grandma adalah...", opts: ["0,3", "0,5", "0,6", "0,75"], ans: 2 },
{ q: "Perbandingan yang benar adalah...", opts: ["1/2 < 1/4", "0,4 > 0,5", "-0,2 > -0,6", "3/5 < 2/5"], ans: 2 },
{ q: "Hasil dari 1/4 + 0,5 = ...", opts: ["0,75", "0,55", "1,25", "0,60"], ans: 0 },
{ q: "Suhu awal 2,5ยฐC lalu turun 1,5ยฐC menjadi...", opts: ["4ยฐC", "1ยฐC", "-1ยฐC", "0ยฐC"], ans: 1 }
],
[
{ q: "Pernyataan b โ 0 pada pecahan a/b karena...", opts: ["Hasil tak terdefinisi", "Hasil selalu nol", "Bukan bulat", "Angka pembilang"], ans: 0 },
{ q: "Bentuk pecahan biasa dari 0,8 adalah...", opts: ["1/8", "4/5", "2/3", "3/4"], ans: 1 },
{ q: "Manakah tanda yang tepat untuk 3/4 ... 0,70?", opts: [">", "<", "=", "โค"], ans: 0 },
{ q: "Hasil dari 1,2 + 3/5 = ...", opts: ["1,5", "1,8", "2,0", "1,25"], ans: 1 },
{ q: "Ibu punya 1,75 kg tepung, dipakai 0,5 kg. Sisa...", opts: ["1,20 kg", "1,50 kg", "1,25 kg", "0,75 kg"], ans: 2 }
],
[
{ q: "Bilangan manakah yang termasuk bilangan rasional?", opts: ["โ8", "-2 1/2", "โ5", "0,151617..."], ans: 1 },
{ q: "Bentuk desimal dari pecahan 1/8 adalah...", opts: ["0,125", "0,25", "0,8", "0,15"], ans: 0 },
{ q: "Urutan dari yang terkecil adalah...", opts: ["-0,8 ; 0,2 ; 1/2", "0,2 ; 1/2 ; -0,8", "1/2 ; 0,2 ; -0,8", "-0,8 ; 1/2 ; 0,2"], ans: 0 },
{ q: "Hasil dari 3/4 โ 0,25 = ...", opts: ["0,25", "0,50", "0,75", "0"], ans: 1 },
{ q: "Panjang pita 2,5 m dipotong 4 bagian sama rata...", opts: ["0,5 m", "0,625 m", "0,75 m", "1,25 m"], ans: 1 }
],
[
{ q: "Angka -4 dapat diubah ke pecahan menjadi...", opts: ["-4/0", "-4/1", "1/-4", "4/4"], ans: 1 },
{ q: "Bentuk pecahan dari 0,25 adalah...", opts: ["1/2", "1/3", "1/4", "2/5"], ans: 2 },
{ q: "Pernyataan yang benar adalah...", opts: ["-0,3 < -0,5", "3/5 = 0,6", "1/4 > 1/2", "-1 > 0"], ans: 1 },
{ q: "Hasil dari 0,6 ร 1/2 = ...", opts: ["0,3", "0,12", "0,5", "1,2"], ans: 0 },
{ q: "Kedalaman kapal selam 5,5 m lalu naik 2,5 m menjadi...", opts: ["8 m", "3 m", "-3 m", "-8 m"], ans: 2 }
]
];
// SOAL KUIS MANDIRI / INDIVIDU
const individuQs = [
{ q: "Mengapa angka desimal 0,333... disebut bilangan rasional?", opts: ["Karena memiliki batas angka di ujung", "Karena bisa dinyatakan dalam pecahan 1/3", "Karena angkanya tidak pernah berhenti", "Karena nilainya kurang dari 1"], ans: 1 },
{ q: "Manakah bilangan rasional di bawah ini yang posisinya paling kanan pada garis bilangan?", opts: ["-1,5", "-0,25", "0,15", "-2/5"], ans: 2 },
{ q: "Tentukan hasil perhitungan dari 0,75 + 2/5 !", opts: ["1,15", "0,95", "1,35", "0,85"], ans: 0 },
{ q: "Sebuah tali sepanjang 3,5 meter dipotong sepanjang 1 1/2 meter. Berapa sisa tali saat ini?", opts: ["2,5 meter", "1,75 meter", "2,0 meter", "2,25 meter"], ans: 2 },
{ q: "Jika x = -0,6 dan y = -3/5, maka hubungan kebenaran yang mutlak adalah...", opts: ["x lebih besar dari y", "x lebih kecil dari y", "x sama dengan y", "x dan y tidak bisa dibandingkan"], ans: 2 }
];
let scores, currentQs, timers, timesLeft, finished;
let indCurQ = 0, indScore = 0;
function startQuiz() {
scores = [0, 0, 0, 0];
currentQs = [0, 0, 0, 0];
finished = [false, false, false, false];
timers = [null, null, null, null];
timesLeft = [15, 15, 15, 15];
for (let g = 0; g < 4; g++) showQ(g);
}
function showQ(g) {
const gIdx = g + 1;
const qEl = document.getElementById(`q${gIdx}-text`);
const optEl = document.getElementById(`q${gIdx}-options`);
const barEl = document.getElementById(`bar${gIdx}`);
const fbEl = document.getElementById(`fb${gIdx}`);
const timerEl = document.getElementById(`timer${gIdx}-text`);
if (currentQs[g] >= 5) {
finished[g] = true;
qEl.innerHTML = "<span class='text-emerald-600 font-bold'>๐ Selesai! Menunggu kelompok lain...</span>";
optEl.innerHTML = '';
clearInterval(timers[g]);
if (finished.every(f => f)) showResults();
return;
}
const q = allQs[g][currentQs[g]];
qEl.textContent = `${currentQs[g] + 1}. ${q.q}`;
barEl.style.width = `${(currentQs[g] / 5) * 100}%`;
fbEl.classList.add('hidden');
optEl.innerHTML = q.opts.map((o, i) =>
`<button class="option-btn rounded-lg p-2 border border-slate-200 bg-white font-medium text-slate-800 text-xs text-left" onclick="answer(${g},${i})">${o}</button>`
).join('');
timesLeft[g] = 15;
timerEl.textContent = timesLeft[g];
clearInterval(timers[g]);
timers[g] = setInterval(() => {
timesLeft[g]--;
timerEl.textContent = timesLeft[g];
if (timesLeft[g] <= 0) { clearInterval(timers[g]); answer(g, -1); }
}, 1000);
}
function answer(g, val) {
const gIdx = g + 1;
clearInterval(timers[g]);
const optEl = document.getElementById(`q${gIdx}-options`);
const fbEl = document.getElementById(`fb${gIdx}`);
const btns = optEl.querySelectorAll('.option-btn');
btns.forEach(b => b.disabled = true);
const correct = allQs[g][currentQs[g]].ans;
if (val === correct) {
scores[g]++;
if(btns[val]) btns[val].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fbEl.textContent = 'โ
Benar!';
fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-emerald-100 text-emerald-700';
} else if (val === -1) {
if(btns[correct]) btns[correct].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fbEl.textContent = 'โฐ Waktu Habis!';
fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-amber-100 text-amber-700';
} else {
if(btns[val]) btns[val].classList.add('border-rose-500', 'bg-rose-50', 'text-rose-700', 'font-bold');
if(btns[correct]) btns[correct].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fbEl.textContent = 'โ Salah!';
fbEl.className = 'mt-2 p-1 rounded-lg text-center font-bold text-xs bg-rose-100 text-rose-700';
}
fbEl.classList.remove('hidden');
currentQs[g]++;
setTimeout(() => showQ(g), 1500);
}
function showResults() {
for (let i = 0; i < 4; i++) {
document.getElementById(`score${i+1}-text`).textContent = `${scores[i]} / 5`;
}
const max = Math.max(...scores);
const winners = scores.reduce((acc, s, i) => s === max ? [...acc, i+1] : acc, []);
let text = '';
if (winners.length === 4) text = '๐ค Seri! Kekuatan Semua Kelompok Seimbang!';
else if (winners.length > 1) text = `๐ค Seri: Kelompok ${winners.join(' & ')} unggul bersama!`;
else text = `๐ Selamat! Kelompok ${winners[0]} Keluar Sebagai Juara!`;
document.getElementById('winner-text').textContent = text;
goSlide(6);
}
// FUNGSI UTK KUIS INDIVIDU TANTANGAN
function startIndividuQuiz() {
indCurQ = 0;
indScore = 0;
goSlide(7);
showIndividuQuestion();
}
function showIndividuQuestion() {
const qEl = document.getElementById("ind-q-text");
const optEl = document.getElementById("ind-options");
const fbEl = document.getElementById("ind-fb");
const progEl = document.getElementById("ind-progress");
const barEl = document.getElementById("ind-bar");
if (indCurQ >= individuQs.length) {
showIndividuResults();
return;
}
fbEl.classList.add('hidden');
progEl.textContent = `Soal ${indCurQ + 1} dari ${individuQs.length}`;
barEl.style.width = `${((indCurQ + 1) / individuQs.length) * 100}%`;
const currentQ = individuQs[indCurQ];
qEl.textContent = currentQ.q;
optEl.innerHTML = currentQ.opts.map((o, i) =>
`<button class="ind-opt-btn w-full p-3 text-left text-sm font-medium border border-slate-200 rounded-xl bg-slate-50 hover:bg-slate-100 transition" onclick="checkIndividuAnswer(${i})">${o}</button>`
).join('');
}
function checkIndividuAnswer(selectedIdx) {
const fbEl = document.getElementById("ind-fb");
const btns = document.querySelectorAll(".ind-opt-btn");
btns.forEach(b => b.disabled = true);
const correctIdx = individuQs[indCurQ].ans;
if (selectedIdx === correctIdx) {
indScore++;
btns[selectedIdx].classList.add("bg-emerald-100", "border-emerald-500", "text-emerald-700", "font-bold");
fbEl.textContent = "๐ฏ Hebat! Jawabanmu Tepat.";
fbEl.className = "mt-4 p-3 rounded-xl text-center font-bold text-sm bg-emerald-100 text-emerald-700";
} else {
btns[selectedIdx].classList.add("bg-rose-100", "border-rose-500", "text-rose-700", "font-bold");
btns[correctIdx].classList.add("bg-emerald-100", "border-emerald-500", "text-emerald-700", "font-bold");
fbEl.textContent = "๐ Masih Kurang Tepat, Perhatikan Pembahasan.";
fbEl.className = "mt-4 p-3 rounded-xl text-center font-bold text-sm bg-rose-100 text-rose-700";
}
fbEl.classList.remove('hidden');
indCurQ++;
setTimeout(showIndividuQuestion, 2000);
}
function showIndividuResults() {
goSlide(8);
document.getElementById("ind-score-text").textContent = `${indScore} / ${individuQs.length}`;
const msgEl = document.getElementById("ind-eval-msg");
if (indScore === 5) msgEl.textContent = "Luar biasa! Kamu menguasai penuh materi Bilangan Rasional. ๐";
else if (indScore >= 3) msgEl.textContent = "Sudah bagus! Tingkatkan ketelitian pada pengerjaan tanda operasi hitung. ๐";
else msgEl.textContent = "Jangan patah semangat! Silakan ulas kembali contoh pembahasannya, ya! ๐";
}
function submitRefleksi() {
document.getElementById('ref-success').classList.remove('hidden');
setTimeout(() => {
document.getElementById('ref-kunci').value = '';
document.getElementById('ref-rencana').value = '';
document.getElementById('ref-success').classList.add('hidden');
goSlide(0);
}, 3000);
}
</script>
</body>
</html>
Kelas 7
Matematika
Bilangan Rasional
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matematika Kelas 7 - Bilangan Rasional</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&family=Fraunces:wght@700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<style>
body { font-family: 'Work Sans', sans-serif; }
.font-display { font-family: 'Fraunces', serif; }
.slide { display: none; animation: fadeIn 0.4s ease; }
.slide.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.option-btn { transition: all 0.2s; cursor: pointer; }
.option-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.4); } 50% { box-shadow: 0 0 0 8px rgba(20,184,166,0); } }
.timer-pulse { animation: pulse-glow 1s infinite; }
</style>
</head>
<body class="min-h-screen" style="background: linear-gradient(to bottom, #f0fdfa, #ccfbf1, #f0fdf4);">
<div class="slide active" id="slide-0">
<div class="relative w-full min-h-screen flex flex-col items-center justify-center">
<div class="absolute inset-0 bg-teal-950/80"></div>
<div class="relative z-10 flex flex-col items-center justify-center text-center px-6 py-12 max-w-2xl mx-auto text-white">
<span class="inline-block px-4 py-1 bg-teal-500 text-white rounded-full text-sm font-medium mb-4 shadow">Modul Interaktif Matematika</span>
<h1 class="font-display leading-tight mb-3 text-4xl md:text-5xl font-black">Bab: Bilangan Rasional</h1>
<p class="max-w-lg mb-6 text-teal-100 text-sm md:text-base">Kuasai konsep bilangan rasional, bentuk pecahan/desimal, perbandingan, hingga operasi hitung secara berurutan!</p>
<div class="mb-6 w-full max-w-xs text-left text-slate-800">
<label for="nama-siswa" class="block text-xs font-bold text-teal-200 uppercase mb-1">Nama Lengkap Siswa:</label>
<input type="text" id="nama-siswa" placeholder="Ketik namamu di sini..." class="w-full p-3 border-2 border-white/20 bg-white/90 rounded-xl text-sm focus:ring-2 focus:ring-teal-400 focus:outline-none font-medium">
</div>
<button class="px-8 py-3 bg-teal-500 text-white rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="mulaiKelas()">Mulai Petualangan Belajar ๐</button>
</div>
</div>
</div>
<div class="slide" id="slide-1">
<div class="max-w-2xl mx-auto px-5 py-10">
<span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 1</span>
<h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Pengertian & Bentuk Bilangan Rasional</h2>
<div class="space-y-4 mb-6">
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐ Apa itu Bilangan Rasional?</p>
<p class="text-slate-700 text-sm leading-relaxed">Bilangan rasional adalah bilangan yang dapat dinyatakan dalam bentuk pecahan <strong>a/b</strong>, dengan <i>a</i> dan <i>b</i> adalah bilangan bulat, serta <strong>b โ 0</strong>.</p>
</div>
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐ Menyatakan ke Pecahan & Desimal</p>
<p class="text-slate-700 text-sm mb-1">โข <strong>Pecahan ke Desimal:</strong> 1/4 = 0,25 (Desimal terbatas) atau 1/3 = 0,333... (Desimal berulang).</p>
<p class="text-slate-700 text-sm">โข <strong>Desimal ke Pecahan:</strong> 0,5 = 5/10 = 1/2.</p>
</div>
</div>
<button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab1')">Siap, Uji Kuis Bab 1 โก</button>
</div>
</div>
<div class="slide" id="slide-2">
<div class="max-w-2xl mx-auto px-5 py-10">
<div class="flex items-center justify-between mb-4">
<span id="kuis-bab-label" class="inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold"></span>
<div id="timer-display" class="flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-sm timer-pulse">
<i data-lucide="clock" style="width:16px;height:16px;"></i> <span id="timer-text">15</span>
</div>
</div>
<div class="w-full h-2 rounded-full bg-slate-200 mb-6">
<div id="quiz-bar" class="h-2 rounded-full bg-teal-500 transition-all duration-300" style="width:0%"></div>
</div>
<h2 id="quiz-question" class="text-xl font-bold text-slate-800 mb-6 leading-relaxed"></h2>
<div id="quiz-options" class="grid grid-cols-1 sm:grid-cols-2 gap-3"></div>
<div id="quiz-feedback" class="mt-4 p-3 rounded-lg text-center font-semibold hidden"></div>
</div>
</div>
<div class="slide" id="slide-3">
<div class="max-w-2xl mx-auto px-5 py-10">
<span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 2</span>
<h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Membandingkan Bilangan Rasional</h2>
<div class="space-y-4 mb-6">
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">โ๏ธ Cara Membandingkan Pecahan</p>
<p class="text-slate-700 text-sm leading-relaxed">Untuk membandingkan dua pecahan (misal 2/3 dan 3/4), kita dapat menyamakan penyebutnya terlebih dahulu atau menggunakan metode perkalian silang:</p>
<p class="text-slate-700 text-sm mt-2 font-medium">โข 2 ร 4 = 8 dan 3 ร 3 = 9. Karena 8 < 9, maka <strong>2/3 < 3/4</strong>.</p>
</div>
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐ Bilangan Rasional Negatif</p>
<p class="text-slate-700 text-sm leading-relaxed">Ingat, pada bilangan negatif, semakin besar angkanya justru nilainya semakin kecil. Contoh: <strong>-0,5 > -0,75</strong>.</p>
</div>
</div>
<button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab2')">Siap, Uji Kuis Bab 2 โก</button>
</div>
</div>
<div class="slide" id="slide-4">
<div class="max-w-2xl mx-auto px-5 py-10">
<span class="inline-block px-3 py-1 bg-teal-100 text-teal-700 rounded-full text-xs font-semibold mb-3">MATERI BAB 3</span>
<h2 class="font-display mb-4 text-2xl font-bold text-slate-800">Operasi Hitung & Penerapan Bilangan Rasional</h2>
<div class="space-y-4 mb-6">
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐งฎ Penjumlahan & Perkalian</p>
<p class="text-slate-700 text-sm mb-1">โข <strong>Penjumlahan:</strong> 1/2 + 1/3 = 3/6 + 2/6 = 5/6 (Samakan penyebut).</p>
<p class="text-slate-700 text-sm">โข <strong>Perkalian:</strong> 2/3 ร 4/5 = (2ร4) / (3ร5) = 8/15.</p>
</div>
<div class="bg-white rounded-xl p-4 border border-teal-100 shadow-sm">
<p class="font-bold text-teal-700 mb-2">๐ผ Soal Cerita kontekstual</p>
<p class="text-slate-700 text-sm leading-relaxed">Ibu membeli gula sebanyak 2,5 kg, kemudian digunakan untuk membuat kue sebanyak 1 1/4 kg. Sisa gula ibu adalah: 2,5 โ 1,25 = 1,25 kg.</p>
</div>
</div>
<button class="px-6 py-2.5 bg-teal-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="siapkanKuis('bab3')">Siap, Uji Kuis Bab 3 โก</button>
</div>
</div>
<div class="slide" id="slide-5">
<div class="max-w-2xl mx-auto px-5 py-10">
<div class="bg-indigo-600 rounded-2xl p-6 text-white shadow-xl mb-6">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">๐งญ</span>
<h2 class="font-display text-2xl font-bold">Panel Refleksi: Self-Check & Next Step</h2>
</div>
<p class="text-indigo-100 text-sm">Sebelum menutup misi belajar hari ini, yuk luangkan waktu 1 menit untuk melihat perkembangan dirimu secara jujur!</p>
</div>
<div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-4">
<p class="font-bold text-slate-800 text-sm mb-3 flex items-center gap-2">๐ Pengukur Pemahaman (Skala Likert)</p>
<p class="text-xs text-slate-600 mb-4">Jika tingkat pemahamanmu terhadap materi hari ini diibaratkan sebagai Baterai HP, ada di level mana sekarang?</p>
<div class="space-y-2 text-sm text-slate-700">
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="25" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>๐ชซ <strong>25% (Low Batt):</strong> Masih bingung banget, butuh penjelasan ulang guru.</span>
</label>
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="50" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>๐ <strong>50% (Half):</strong> Setengah paham, tapi masih ragu di hitungan bentuk desimal/negatif.</span>
</label>
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="75" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>๐ <strong>75% (Good):</strong> Paham materi Bilangan Rasional dan bisa kuis dengan lancar.</span>
</label>
<label class="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:bg-slate-50 cursor-pointer">
<input type="radio" name="baterai-refleksi" value="100" class="w-4 h-4 text-teal-600 focus:ring-teal-500">
<span>โก <strong>100% (Full Power):</strong> Paham banget dan siap membantu mengajari teman!</span>
</label>
</div>
</div>
<div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-4">
<p class="font-bold text-slate-800 text-sm mb-2 flex items-center gap-2">๐ง Detektor Hambatan (Jawaban Singkat)</p>
<label for="input-hambatan" class="block text-xs text-slate-600 mb-3">Tuliskan konsep atau jenis perkalian/pembagian tanda yang menurutmu paling menantang.</label>
<input type="text" id="input-hambatan" placeholder="Tuliskan hambatanmu..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
<div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm mb-6">
<p class="font-bold text-slate-800 text-sm mb-2 flex items-center gap-2">๐ง Strategi Belajar & Solusi</p>
<label for="input-strategi" class="block text-xs text-slate-600 mb-3">Apa strategi belajarmu ke depan agar operasi bilangan bulat negatif terasa lebih mudah?</label>
<input type="text" id="input-strategi" placeholder="Contoh: Membuat jembatan keledai tanda, latihan soal..." class="w-full p-3 border border-slate-300 rounded-xl text-sm focus:ring-2 focus:ring-teal-500 focus:outline-none">
</div>
<div class="text-center">
<button class="px-8 py-3 bg-indigo-600 text-white rounded-full font-bold shadow-lg hover:scale-105 transition" onclick="simpanRefleksiDanLanjut()">Lihat Skor Akhir Anda →</button>
</div>
</div>
</div>
<div class="slide" id="slide-6">
<div class="max-w-md mx-auto px-5 py-12 text-center bg-white border border-teal-100 rounded-2xl shadow-md mt-12">
<div class="text-6xl mb-4" id="result-emoji">๐</div>
<h2 class="font-display mb-2 text-2xl font-bold text-slate-800">Misi Belajar Selesai!</h2>
<p id="score-text" class="text-3xl font-black text-teal-600 mb-4"></p>
<p class="text-sm text-slate-500 mb-6 px-4">Luar biasa! Seluruh lembar evaluasi dan data penilaian mandiri Anda telah direkam.</p>
<div class="flex flex-col gap-2 max-w-xs mx-auto">
<button id="lms-send-btn" class="px-6 py-2.5 bg-emerald-500 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm" onclick="kirimDataLms()">Kirim Laporan Nilai ๐</button>
<button class="px-6 py-2.5 bg-slate-100 text-slate-700 rounded-full font-semibold shadow hover:scale-105 transition text-sm" onclick="restart()">Ulangi Dari Awal</button>
</div>
<div id="lms-success-alert" class="hidden mt-4 text-xs font-bold text-green-700 bg-green-50 border border-green-200 p-2 rounded-lg animate-pulse">
Laporan kumulatif dan refleksi berhasil dikirim ke guru!
</div>
</div>
</div>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
function goSlide(n) {
slides.forEach(s => s.classList.remove('active'));
slides[n].classList.add('active');
}
function mulaiKelas() {
if(!document.getElementById('nama-siswa').value.trim()) {
alert("Masukkan nama terlebih dahulu!");
return;
}
goSlide(1);
}
// BANK SOAL BILANGAN RASIONAL SESUAI DENGAN TUJUAN PEMBELAJARAN
const databaseKuis = {
bab1: [
{ q: "Manakah di bawah ini yang BUKAN merupakan bilangan rasional?", opts: ["โ2", "0,5", "2/3", "-4"], ans: 0 },
{ q: "Bentuk pecahan biasa yang paling sederhana dari bilangan desimal 0,75 adalah...", opts: ["1/2", "3/4", "7/5", "3/5"], ans: 1 },
{ q: "Bentuk desimal dari pecahan 1/8 adalah...", opts: ["0,125", "0,25", "0,8", "0,15"], ans: 0 }
],
bab2: [
{ q: "Di antara pilihan berikut, tanda perbandingan yang benar adalah...", opts: ["1/2 < 1/3", "2/5 > 3/5", "-0,6 > -0,2", "3/4 > 2/3"], ans: 3 },
{ q: "Jika diurutkan dari yang terkecil, urutan yang benar adalah...", opts: ["-0,5 ; 1/4 ; 0,6", "0,6 ; 1/4 ; -0,5", "-0,5 ; 0,6 ; 1/4", "1/4 ; -0,5 ; 0,6"], ans: 0 }
],
bab3: [
{ q: "Hasil operasi hitung dari 1/2 + 0,25 adalah...", opts: ["0,5", "3/4", "1/4", "5/4"], ans: 1 },
{ q: "Andi memiliki tali sepanjang 1,5 meter. Ia memotongnya sebanyak 3/4 meter untuk kerajinan. Sisa tali Andi adalah...", opts: ["0,5 meter", "0,25 meter", "0,75 meter", "1 meter"], ans: 2 }
]
};
let babAktif = '';
let qIndex = 0;
let totalSkorBenar = 0;
let totalSoalDilewati = 0;
let timer, timeLeft;
let dataBateraiSiswa = "75";
let dataHambatanSiswa = "-";
let dataStrategiSiswa = "-";
function siapkanKuis(bab) {
babAktif = bab;
qIndex = 0;
goSlide(2);
jalankanKuisEngine();
}
function jalankanKuisEngine() {
const listSoal = databaseKuis[babAktif];
if (qIndex >= listSoal.length) {
if(babAktif === 'bab1') {
goSlide(3);
} else if(babAktif === 'bab2') {
goSlide(4);
} else if(babAktif === 'bab3') {
goSlide(5);
}
return;
}
const dataSoal = listSoal[qIndex];
document.getElementById('kuis-bab-label').textContent = `KUIS AKTIF: ${babAktif.toUpperCase()} - SOAL NO ${qIndex + 1}`;
document.getElementById('quiz-bar').style.width = `${(qIndex / listSoal.length) * 100}%`;
document.getElementById('quiz-feedback').classList.add('hidden');
document.getElementById('quiz-question').textContent = dataSoal.q;
const optContainer = document.getElementById('quiz-options');
optContainer.innerHTML = dataSoal.opts.map((o, i) =>
`<button class="option-btn rounded-xl p-4 border-2 border-slate-200 bg-white font-medium text-slate-800 text-left" onclick="jawabKuis(${i})">${o}</button>`
).join('');
timeLeft = 15;
document.getElementById('timer-text').textContent = timeLeft;
clearInterval(timer);
timer = setInterval(() => {
timeLeft--;
document.getElementById('timer-text').textContent = timeLeft;
if (timeLeft <= 0) { clearInterval(timer); jawabKuis(-1); }
}, 1000);
}
function jawabKuis(pilihanSiswa) {
clearInterval(timer);
totalSoalDilewati++;
const btns = document.querySelectorAll('#quiz-options .option-btn');
btns.forEach(b => b.disabled = true);
const correctAns = databaseKuis[babAktif][qIndex].ans;
const fb = document.getElementById('quiz-feedback');
if (pilihanSiswa === correctAns) {
totalSkorBenar++;
btns[pilihanSiswa].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fb.textContent = 'โ
Jawabanmu Benar!';
fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-emerald-100 text-emerald-700 text-sm';
} else if (pilihanSiswa === -1) {
btns[correctAns].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fb.textContent = 'โฐ Waktu Habis!';
fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-amber-100 text-amber-700 text-sm';
} else {
btns[pilihanSiswa].classList.add('border-rose-500', 'bg-rose-50', 'text-rose-700', 'font-bold');
btns[correctAns].classList.add('border-emerald-500', 'bg-emerald-50', 'text-emerald-700', 'font-bold');
fb.textContent = 'โ Masih Salah!';
fb.className = 'mt-4 p-3 rounded-lg text-center font-semibold bg-rose-100 text-rose-700 text-sm';
}
fb.classList.remove('hidden');
qIndex++;
setTimeout(jalankanKuisEngine, 1500);
}
function simpanRefleksiDanLanjut() {
const radioBaterai = document.querySelector('input[name="baterai-refleksi"]:checked');
if (radioBaterai) {
dataBateraiSiswa = radioBaterai.value;
}
dataHambatanSiswa = document.getElementById('input-hambatan').value.trim() || "Tidak ada hambatan";
dataStrategiSiswa = document.getElementById('input-strategi').value.trim() || "Tidak ada strategi khusus";
document.getElementById('score-text').textContent = `Total Skor: ${totalSkorBenar} / ${totalSoalDilewati}`;
goSlide(6);
}
function restart() {
totalSkorBenar = 0;
totalSoalDilewati = 0;
document.getElementById('nama-siswa').value = '';
document.getElementById('input-hambatan').value = '';
document.getElementById('input-strategi').value = '';
const rbs = document.querySelectorAll('input[name="baterai-refleksi"]');
rbs.forEach(rb => rb.checked = false);
const btn = document.getElementById('lms-send-btn');
btn.disabled = false;
btn.className = "px-6 py-2.5 bg-emerald-500 text-white rounded-full font-bold shadow hover:scale-105 transition text-sm";
goSlide(0);
}
function kirimDataLms() {
const nama = document.getElementById('nama-siswa').value.trim();
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama || "Siswa Anonim",
skor: `${totalSkorBenar} / ${totalSoalDilewati}`,
baterai: dataBateraiSiswa,
hambatan: "Hambatan Siswa: " + dataHambatanSiswa,
strategi: "Strategi Siswa: " + dataStrategiSiswa
}, "*");
document.getElementById('lms-success-alert').classList.remove('hidden');
const btn = document.getElementById('lms-send-btn');
btn.disabled = true;
btn.className = "px-6 py-2.5 bg-slate-300 text-slate-500 rounded-full font-bold text-sm cursor-not-allowed";
}
</script>
</body>
</html>
๐ Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Siswa 1 | Bilangan Rasional Matematika โ Kelas 7 | 3 / 7 | 100% | Hambatan Siswa: Tidak ada hambatan | Strategi Siswa: Tidak ada strategi khusus |
| sasasa | Bilangan Rasional Matematika โ Kelas 7 | 3 / 7 | 100% | Hambatan Siswa: sas | Strategi Siswa: sas |
| Coba1 | Bilangan Rasional Matematika โ Kelas 7 | 1 / 7 | 100% | Hambatan Siswa: 1 | Strategi Siswa: 2 |
| sasdsadasd | Bilangan Rasional Matematika โ Kelas 7 | 2 / 7 | 50% | Hambatan Siswa: dasda | Strategi Siswa: asdas |
| dddddddd | Bilangan Rasional Matematika โ Kelas 7 | 3 / 7 | 75% | Hambatan Siswa: Hambatan | Strategi Siswa: Strategi |