Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
📂 Pilih Materi Pelajaran Belajar
Kelas 7
SSK
Anti Narkoba Bagi Generasi Muda
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Misi Anti-Narkoba: Generasi Keren Tanpa Narkoba! 🚫💊</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: #f0fdf4; /* Soft green theme */
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
}
.slide { display: none; opacity: 0; transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.slide.active { display: flex; opacity: 1; transform: scale(1) translateY(0); }
@keyframes 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; }
.check-item { transition: all 0.2s ease; border-bottom: 4px solid #cbd5e1; cursor: pointer; }
.check-item:hover { transform: translateY(-3px); border-bottom-width: 7px; border-color: #34d399; }
.check-item.checked {
background: linear-gradient(135deg, #059669, #10b981);
color: white;
border-color: #047857;
transform: scale(1.03);
}
.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; }
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #059669, #3b82f6);
}
.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-emerald-200 sticky top-0 z-10 shadow-sm flex items-center gap-4">
<div class="flex-shrink-0 bg-emerald-500 p-2 rounded-xl shadow-sm rotate-3 text-white">
<i data-lucide="shield-check" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-end mb-1">
<span class="text-sm font-extrabold text-emerald-800 uppercase tracking-widest">Misi Ketahanan Diri</span>
<span id="progress-text" class="text-xs font-black text-white bg-emerald-500 px-3 py-1 rounded-full shadow-sm">0%</span>
</div>
<div class="h-4 w-full bg-slate-200 rounded-full overflow-hidden border-2 border-slate-300">
<div id="progress-bar" class="h-full bg-gradient-to-r from-emerald-400 via-teal-500 to-blue-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-emerald-200 text-emerald-900 text-sm font-black uppercase tracking-widest shadow-[4px_4px_0px_rgba(5,150,105,1)] rotate-[-2deg]">
#SMPN72MalukuTengah #SekolahSadarKependudukan
</div>
<h1 class="text-5xl md:text-6xl font-black leading-tight text-slate-900 mt-4">
Muda Keren, <br><span class="text-gradient">Bebas Narkoba!</span> 🛡️✨
</h1>
<p class="text-xl text-slate-600 font-bold max-w-xl mx-auto">
Kenali bahayanya, kuatkan mental dari tekanan teman, dan raih masa depan gemilang tanpa zat terlarang!
</p>
<img src="https://images.unsplash.com/photo-1529156069898-49953eb1b5ce?auto=format&fit=crop&w=800&q=80" alt="Generasi Muda Sehat" class="w-80 h-56 object-cover rounded-3xl mx-auto shadow-[8px_8px_0px_rgba(16,185,129,0.4)] mt-8 border-4 border-white floating">
</div>
</div>
<!-- Slide 2: Apa itu Narkoba & Dampaknya -->
<div class="slide flex-col p-8 gap-6 max-w-5xl mx-auto w-full min-h-[75vh]">
<div class="text-center">
<h2 class="text-4xl font-black text-emerald-900 inline-block bg-emerald-100 px-6 py-2 rounded-2xl rotate-1">Apa Sih Bahaya Narkoba Itu? ⚠️</h2>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-4">
<div class="bg-white p-6 rounded-3xl border-2 border-red-200 shadow-sm flex flex-col justify-between">
<div>
<span class="text-4xl block mb-3">🧠</span>
<h3 class="font-black text-2xl text-red-600 mb-2">Merusak Otak Remaja</h3>
<p class="text-slate-600 font-bold">Otak remaja masih berkembang. Narkoba bisa merusak struktur saraf permanen, bikin susah fokus, dan emosi naik turun!</p>
</div>
<div class="mt-4 bg-red-50 p-3 rounded-xl text-xs font-bold text-red-700">Dampak: Penurunan drastis prestasi akademik di sekolah.</div>
</div>
<div class="bg-white p-6 rounded-3xl border-2 border-amber-200 shadow-sm flex flex-col justify-between">
<div>
<span class="text-4xl block mb-3">💔</span>
<h3 class="font-black text-2xl text-amber-600 mb-2">Hancurnya Masa Depan</h3>
<p class="text-slate-600 font-bold">Bukan cuma fisik dan organ dalam yang rusak, narkoba juga memutus hubungan sosial dengan keluarga dan teman baikmu.</p>
</div>
<div class="mt-4 bg-amber-50 p-3 rounded-xl text-xs font-bold text-amber-700">Dampak: Ketergantungan psikologis yang membelenggu hidup.</div>
</div>
</div>
</div>
<!-- Slide 3: Simulasi Studi Kasus (Peer Pressure) -->
<div class="slide flex-col p-8 gap-4 max-w-4xl mx-auto w-full min-h-[75vh]">
<div class="text-center mb-2">
<div class="inline-block px-4 py-1 bg-blue-100 text-blue-700 font-black rounded-full text-sm mb-2">Simulasi Tantangan 🎭</div>
<h2 class="text-3xl font-black text-slate-900">Uji Mental: Menghadapi "Permen" Misterius</h2>
</div>
<div class="bg-white p-6 rounded-3xl border-4 border-blue-300 shadow-[6px_6px_0px_#93c5fd] space-y-4">
<p class="text-lg font-extrabold text-slate-700 leading-relaxed bg-blue-50 p-4 rounded-2xl">
💬 <i>"Nih cobain permen herbal dari kakak kelas, biar kepala rileks dan gampang paham pelajaran, gak usah tegang jadi anak baru..."</i>
</p>
<p class="font-bold text-slate-500">Menurutmu, apa tindakan paling tepat yang harus dilakukan?</p>
<div class="space-y-3 pt-2">
<button onclick="pilihOpsiKasus(false, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition">
A. Coba dikit aja deh biar gak dibilang penakut sama kakak kelas. ❌
</button>
<button onclick="pilihOpsiKasus(true, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition">
B. Tolak dengan tegas, bilang "Maaf, saya tidak mau!", lalu segera menjauh dan lapor guru. ✅
</button>
<button onclick="pilihOpsiKasus(false, this)" class="w-full text-left p-4 rounded-2xl bg-slate-100 hover:bg-slate-200 font-bold border-2 border-slate-200 transition">
C. Terima dulu simpan di saku buat jaga-jaga. ❌
</button>
</div>
<div id="feedback-kasus" class="hidden p-4 rounded-2xl font-bold text-lg pop-in"></div>
</div>
</div>
<!-- Slide 4: Kiat Menghindari & Peer Pressure (Checklist) -->
<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-emerald-100 p-6 rounded-3xl border-2 border-emerald-200">
<div>
<h2 class="text-3xl font-black text-emerald-900">Kiat Tangguh Tolak Narkoba ✨</h2>
<p class="text-emerald-700 font-bold mt-1 text-lg">Tap komitmen yang siap kamu pegang teguh!</p>
</div>
<span id="checklist-counter" class="text-lg font-black text-white bg-emerald-600 px-4 py-2 rounded-xl shadow-md transition-colors rotate-3 text-center min-w-[80px]">0/4</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> Berani bilang "TIDAK" dengan tegas tanpa ragu.</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> Menjauhi lingkungan pergaulan yang toksik/berisiko.</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> Sibukkan diri dengan hobi positif & ekstrakurikuler.</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> Terbuka dan komunikatif dengan orang tua atau guru BK.</span>
<i data-lucide="check-circle" class="opacity-30 w-8 h-8 flex-shrink-0 text-slate-400"></i>
</button>
</div>
</div>
<!-- Slide 5: Kuis Pintar Anti-Narkoba (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">Uji Penalaran: <span class="text-gradient">Kuis Anti-Narkoba</span> 🎮</h2>
<p class="text-lg font-bold text-slate-500 mt-2">Uji kemampuan analisismu dalam situasi pergaulan sehari-hari!</p>
<div class="mt-4 inline-flex items-center gap-3 bg-emerald-100 border-2 border-emerald-400 px-6 py-2 rounded-full">
<span class="text-xl">🔥</span>
<span class="font-black text-emerald-800 text-xl">SKOR SAYA: <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-emerald-100 text-emerald-700 font-black text-2xl p-4 rounded-2xl h-fit">Q</div>
<p id="quiz-question-text" class="mb-4 text-xl font-extrabold text-slate-700 leading-snug"></p>
</div>
<div id="quiz-options" class="grid grid-cols-1 gap-3 ml-16 mt-2">
<!-- Opsi dinamis via JS -->
</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-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700">Lanjut Soal Berikutnya ➡️</button>
</div>
</div>
</div>
<!-- Slide 6: Refleksi & Integrasi LMS Siswa.php -->
<div class="slide flex-col items-center justify-center text-center p-8 gap-6 h-full min-h-[75vh]">
<div class="text-7xl mb-2 animate-bounce">🏆</div>
<h2 class="text-4xl md:text-5xl font-black text-emerald-900 mb-2">Misi Selesai, Generasi Hebat!</h2>
<p class="text-xl font-extrabold text-slate-600 max-w-xl">
Kamu telah menyelesaikan sesi pembelajaran anti-narkoba. Catat hasil skormu dan laporkan refleksimu ke sistem guru!
</p>
<div class="bg-white border-4 border-emerald-300 p-6 rounded-3xl max-w-md w-full shadow-xl space-y-4 text-left">
<div>
<label class="block text-xs font-bold text-slate-500 uppercase mb-1">Nama Lengkap Siswa</label>
<input type="text" id="input-nama" placeholder="Masukkan namamu..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold focus:outline-emerald-500">
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase mb-1">Seberapa paham kamu materi hari ini? (Baterai Pemahaman)</label>
<select id="input-baterai" class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold bg-white">
<option value="100">100% - Sangat Paham & Siap Menolak!</option>
<option value="75">75% - Cukup Paham</option>
<option value="50">50% - Masih Perlu Belajar Lagi</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase mb-1">Hambatan / Pertanyaan Singkat</label>
<input type="text" id="input-hambatan" placeholder="Misal: Cara menolak teman akrab..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold">
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase mb-1">Komitmen / Strategi Kamu</label>
<input type="text" id="input-strategi" placeholder="Misal: Memilih teman yang hobi olahraga..." class="w-full p-3 border-2 border-slate-200 rounded-xl text-sm font-bold">
</div>
<button onclick="kirimNilaiKeLMS()" class="w-full py-4 bg-gradient-to-r from-emerald-500 to-teal-600 text-white text-lg font-black rounded-2xl shadow-lg hover:shadow-xl transition-all">
Kirim Hasil Belajar Ke Guru 🚀
</button>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<footer class="bg-white px-6 py-5 border-t-4 border-slate-200 sticky bottom-0 z-20">
<nav class="flex items-center justify-between max-w-5xl mx-auto" aria-label="Slide navigation">
<button type="button" id="prev-btn" class="nav-btn flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-200 text-slate-700 font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-slate-300" disabled>
<i data-lucide="chevron-left" class="w-6 h-6"></i> <span class="hidden md:inline">Sebelumnya</span>
</button>
<button type="button" id="next-btn" class="nav-btn flex items-center gap-2 px-8 py-3 rounded-2xl bg-emerald-500 text-white font-black text-lg disabled:opacity-40 disabled:pointer-events-none hover:bg-emerald-600 shadow-[0_4px_0px_#047857]">
<span class="hidden md:inline">Lanjut Misi</span> <i data-lucide="rocket" class="w-6 h-6"></i>
</button>
</nav>
</footer>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
let current = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
function showSlide(i) {
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
prevBtn.disabled = current === 0;
if (current === slides.length - 1) {
nextBtn.disabled = true;
nextBtn.innerHTML = '<span class="hidden md:inline">Selesai 🌟</span>';
} else {
nextBtn.disabled = false;
nextBtn.innerHTML = '<span class="hidden md:inline">Lanjut Misi</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); });
// Simulasi Kasus Interaktif (Slide 3)
function pilihOpsiKasus(isBenar, btn) {
const fb = document.getElementById('feedback-kasus');
fb.classList.remove('hidden');
if(isBenar) {
btn.className = "w-full text-left p-4 rounded-2xl bg-emerald-500 text-white font-bold border-2 border-emerald-700";
fb.className = "mt-4 p-4 rounded-2xl font-bold text-lg bg-emerald-100 text-emerald-800 border-l-8 border-emerald-500 pop-in";
fb.innerHTML = "🎉 <b>Tepat Sekali!</b> Menolak dengan tegas dan melapor adalah tindakan anak cerdas pelindung masa depan.";
} else {
btn.className = "w-full text-left p-4 rounded-2xl bg-rose-500 text-white font-bold border-2 border-rose-700";
fb.className = "mt-4 p-4 rounded-2xl font-bold text-lg bg-rose-100 text-rose-800 border-l-8 border-rose-500 pop-in";
fb.innerHTML = "❌ <b>Kurang Tepat.</b> Menerima barang asing dari orang lain sangat membahayakan kesehatan dan masa depanmu!";
}
}
// Checklist Logic (Slide 4)
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}`;
});
});
// 5 Soal Pilihan Ganda HOTS (Survival Mode - Slide 5)
const questionBank = [
{
q: "Rian sering diejek sebagai anak kurang pergaulan karena menolak nongkrong malam di tempat sepi. Suatu hari temannya mendesak mencoba rokok elektrik (vape) bebas nikotin. Tindakan tepat Rian adalah...",
options: [
"Menerima vape tersebut sekali saja agar diterima kelompok",
"Mencoba diam-diam lalu menjauh esok hari",
"Menolak dengan tegas, mengubah topik, dan meninggalkan lingkungan toksik",
"Menerima vape untuk disimpan sendiri"
],
correct: 2,
msg: "Asertif menolak dan menjauhi lingkungan berisiko adalah kunci utama menghindari narkoba."
},
{
q: "Mengapa penyalahgunaan narkotika pada usia remaja (SMP) jauh lebih merusak dibandingkan pada usia dewasa?",
options: [
"Remaja memiliki daya tahan tubuh lebih lemah",
"Otak remaja masih berkembang aktif sehingga kecanduan mengubah struktur saraf permanen",
"Remaja belum memiliki uang sendiri",
"Lingkungan sekolah tidak punya sanksi tegas"
],
correct: 1,
msg: "Secara neurobiologis, otak remaja sangat rentan terhadap perubahan struktur akibat zat adiktif."
},
{
q: "Perubahan drastis: nilai turun, mengurung diri, emosi meledak. Sebagai keluarga komunikatif, langkah awal bijak adalah...",
options: [
"Menghukum dan menggeledah kamar secara paksa",
"Membiarkannya karena fase wajar kenakalan remaja",
"Membuka dialog hangat tanpa menghakimi dan mencari konselor",
"Memindahkan anak ke sekolah lain"
],
correct: 2,
msg: "Pendekatan dialogis dan suportif jauh lebih efektif merangkul remaja bermasalah."
},
{
q: "Susi diajak ke komunitas online tersembunyi yang menjanjikan pelarian stres dari zat tertentu. Strategi coping efektif Susi?",
options: [
"Mengikuti kemauan mereka demi keamanan",
"Keluar, blokir akun, dan alihkan waktu ke hobi positif",
"Melaporkan ke media sosial secara terbuka",
"Diam saja dan mengingatkan lewat pesan pribadi"
],
correct: 1,
msg: "Detoksifikasi pergaulan digital dan pengalihan ke hobi positif adalah manajemen diri terbaik."
},
{
q: "Sebagai Sekolah Sadar Kependudukan, peran ekosistem sekolah jika ada siswa terindikasi lingkungan berisiko adalah...",
options: [
"Mengeluarkan siswa secepat mungkin",
"Menutupi kasus rapat-rapat",
"Menciptakan lingkungan aman, layanan konseling merangkul, dan pencegahan aktif",
"Menyerahkan sepenuhnya ke polisi"
],
correct: 2,
msg: "Sekolah ramah anak mengedepankan fungsi preventif, rehabilitatif, dan suportif."
}
];
let currentQIndex = -1;
let quizScore = 0;
let usedIndices = [];
const qText = document.getElementById('quiz-question-text');
const qOptions = document.getElementById('quiz-options');
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-emerald-400', 'bg-emerald-50', 'border-rose-400', 'bg-rose-50');
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;
const currentQ = questionBank[rand];
qText.textContent = currentQ.q;
qOptions.innerHTML = "";
currentQ.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.type = "button";
btn.className = "auto-guess-btn w-full text-left p-4 bg-slate-100 rounded-2xl text-slate-700 font-bold border-b-4 border-slate-300 hover:bg-slate-200 transition-all";
btn.textContent = opt;
btn.onclick = () => checkAnswer(idx, currentQ.correct, btn, currentQ.msg);
qOptions.appendChild(btn);
});
}
loadNewQuestion();
function checkAnswer(selected, correctIdx, btnElement, explanation) {
const allBtns = qOptions.querySelectorAll('button');
allBtns.forEach(b => b.disabled = true);
if(selected === correctIdx) {
btnElement.classList.add('btn-correct');
activeCard.classList.add('border-emerald-400', 'bg-emerald-50');
qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-emerald-500 bg-emerald-100 text-emerald-800 pop-in block';
qFeedback.innerHTML = `<span class="text-xl block mb-1">🎉 Pintar Sekali!</span> ${explanation}`;
quizScore += 100;
scoreDisplay.textContent = quizScore;
} else {
btnElement.classList.add('btn-wrong');
allBtns[correctIdx].classList.add('btn-correct');
activeCard.classList.add('border-rose-400', 'bg-rose-50');
qFeedback.className = 'mt-4 ml-16 p-5 rounded-2xl text-lg font-bold border-l-8 border-rose-500 bg-rose-100 text-rose-800 pop-in block';
qFeedback.innerHTML = `<span class="text-xl block mb-1">😅 Kurang Tepat.</span> Analisis yang benar: ${explanation}`;
quizScore = Math.max(0, quizScore - 30);
scoreDisplay.textContent = quizScore;
}
nextBtnQuiz.classList.remove('hidden');
}
// Fungsi kirim nilai kembali ke sistem LMS (siswa.php)
function kirimNilaiLeLMS() {
const nama = document.getElementById('input-nama').value.trim();
if(!nama) {
alert("Silakan masukkan nama lengkapmu terlebih dahulu!");
return;
}
const baterai = document.getElementById('input-baterai').value;
const hambatan = document.getElementById('input-hambatan').value || "Tidak ada";
const strategi = document.getElementById('input-strategi').value || "Aktif berolahraga dan jauhi narkoba";
if (window.parent && window.parent !== window) {
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: nama,
skor: quizScore,
baterai: baterai,
hambatan: hambatan,
strategi: strategi
}, "*");
} else {
alert("Hasil berhasil direkam secara lokal! Skor Kuis Kamu: " + quizScore);
}
}
</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. | |||||