Kelas 8
PPKN
Hak dan Kewajiban Warga Negara
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kegiatan Pembuka PPKn</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=DM+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: 'DM 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(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes growBar { from { width: 0; } }
.poll-bar { animation: growBar 0.6s ease-out; }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } }
.timer-pulse { animation: pulse-glow 1s infinite; }
.option-btn { transition: all 0.2s; cursor: pointer; }
.option-btn:hover { transform: translateY(-2px); }
.option-btn.selected { ring: 3px; transform: scale(0.97); }
</style>
</head>
<body class="min-h-screen" style="background: linear-gradient(rgb(255, 247, 237), rgb(254, 243, 199), rgb(236, 253, 245));">
<!-- SLIDE 0: Welcome -->
<div class="slide active" id="slide-0">
<div class="relative w-full min-h-screen flex flex-col items-center justify-center">
<img data-template-id="hero-img" class="canva-image absolute inset-0 w-full h-full object-cover" loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/50 to-slate-900/20"></div>
<div class="relative z-10 flex flex-col items-center justify-center text-center px-6 py-12 max-w-2xl mx-auto">
<span data-template-id="badge-text" class="canva-tag inline-block px-4 py-1 bg-orange-500 text-white rounded-full text-sm font-medium mb-4 shadow"></span>
<h1 data-template-id="main-title" class="canva-text font-display leading-tight mb-3 text-white text-4xl md:text-5xl font-black"></h1>
<p data-template-id="main-subtitle" class="canva-text max-w-lg mb-6 text-slate-200 text-sm md:text-base font-medium"></p>
<!-- Identitas Siswa untuk Rekam Data LMS -->
<div class="mb-6 w-full max-w-xs text-left">
<label for="nama-siswa-ppkn" class="block text-xs font-bold text-slate-300 uppercase mb-1">Nama Lengkap Siswa:</label>
<input type="text" id="nama-siswa-ppkn" placeholder="Ketik namamu di sini..." class="w-full p-3 border-2 border-white/20 bg-white/10 text-white placeholder-slate-400 rounded-xl text-sm focus:ring-2 focus:ring-orange-400 focus:outline-none font-medium">
</div>
<button data-template-id="start-btn" class="canva-button px-8 py-3 bg-orange-500 text-white rounded-full font-bold text-lg shadow-lg hover:scale-105 transition" onclick="mulaiKelas()"></button>
</div>
</div>
</div>
<!-- SLIDE 1: Polling -->
<div class="slide" id="slide-1">
<div class="max-w-2xl mx-auto px-5 py-12">
<p data-template-id="poll-label" class="canva-tag inline-block px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-semibold mb-3"></p>
<h2 data-template-id="poll-title" class="canva-text font-display mb-2 text-2xl font-bold text-slate-800"></h2>
<p data-template-id="poll-scenario" class="canva-text text-sm text-slate-600 mb-6 leading-relaxed"></p>
<div id="poll-options" class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
<button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(0)">🏛️ Hak warga negara</button>
<button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(1)">📋 Kewajiban warga negara</button>
<button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(2)">🤝 Keduanya</button>
<button class="option-btn rounded-xl p-4 border-2 border-indigo-200 bg-white text-left font-medium text-slate-800 hover:border-indigo-500 transition shadow-sm" onclick="vote(3)">❌ Bukan keduanya</button>
</div>
<div id="poll-results" class="hidden bg-white p-4 border rounded-2xl shadow-sm mb-6">
<div class="text-sm font-medium text-slate-600 space-y-3" id="poll-result-bars"></div>
</div>
<div id="poll-nav" class="hidden text-center">
<button data-template-id="next-quiz-btn" class="canva-button px-8 py-2.5 bg-indigo-600 text-white rounded-full font-semibold shadow hover:scale-105 transition" onclick="goSlide(2)"></button>
</div>
</div>
</div>
<!-- SLIDE 2: Quiz -->
<div class="slide" id="slide-2">
<div class="max-w-2xl mx-auto px-5 py-12">
<div class="flex items-center justify-between mb-4">
<p data-template-id="quiz-label" class="canva-tag inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold"></p>
<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">10</span>
</div>
</div>
<div id="quiz-progress" class="w-full h-2 rounded-full bg-slate-200 mb-6">
<div id="quiz-bar" class="h-2 rounded-full bg-indigo-500 transition-all duration-300" style="width:20%"></div>
</div>
<h2 id="quiz-question" class="text-lg md:text-xl font-bold text-slate-800 mb-6 leading-relaxed"></h2>
<div class="grid grid-cols-2 gap-4">
<button id="btn-true" class="option-btn rounded-xl p-4 border-2 border-emerald-200 bg-emerald-50 font-bold text-emerald-700 text-lg hover:bg-emerald-100 transition shadow-sm" onclick="answer(true)">✅ Benar</button>
<button id="btn-false" class="option-btn rounded-xl p-4 border-2 border-rose-200 bg-rose-50 font-bold text-rose-700 text-lg hover:bg-rose-100 transition shadow-sm" onclick="answer(false)">❌ Salah</button>
</div>
<div id="quiz-feedback" class="mt-4 p-3 rounded-lg text-center font-semibold hidden"></div>
</div>
</div>
<!-- SLIDE 3: Results & Kirim LMS -->
<div class="slide" id="slide-3">
<div class="max-w-md mx-auto px-5 py-16 text-center bg-white border rounded-2xl shadow-md mt-12">
<div class="text-6xl mb-4" id="result-emoji">🎉</div>
<h2 data-template-id="result-title" class="canva-text font-display mb-2 text-2xl font-bold text-slate-800"></h2>
<p id="score-text" class="text-3xl font-black text-indigo-600 mb-4"></p>
<p data-template-id="reflection-prompt" class="canva-text text-sm text-slate-500 mb-6 px-4"></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 ke Guru 🚀</button>
<button data-template-id="restart-btn" class="canva-button px-6 py-2.5 bg-slate-100 text-slate-700 rounded-full font-semibold shadow hover:scale-105 transition text-sm" onclick="restart()"></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 nilai & rekapitulasi Anda berhasil terkirim ke database guru!
</div>
</div>
</div>
<script>
// DATA KONTEN OTOMATIS AWAL
document.addEventListener("DOMContentLoaded", () => {
document.querySelector('[data-template-id="hero-img"]').src = "https://images.pexels.com/photos/5412101/pexels-photo-5412101.jpeg?auto=compress&cs=tinysrgb&w=1280";
document.querySelector('[data-template-id="badge-text"]').textContent = "Aktivitas Pembuka • PPKn Kelas 8";
document.querySelector('[data-template-id="main-title"]').textContent = "Hak & Kewajiban Warga Negara";
document.querySelector('[data-template-id="main-subtitle"]').textContent = "Pelajari jembatan konsep keselarasan hak dan kewajiban kita sebagai warga negara Indonesia dengan cara interaktif!";
document.querySelector('[data-template-id="start-btn"]').textContent = "Mulai Kelas Digital 🚀";
document.querySelector('[data-template-id="poll-label"]').textContent = "STUDI KASUS JEMBATAN PILIHAN";
document.querySelector('[data-template-id="poll-title"]').textContent = "Membayar Pajak Tepat Waktu";
document.querySelector('[data-template-id="poll-scenario"]').textContent = "Negara membangun fasilitas jembatan umum dan jalan raya menggunakan dana pajak. Tindakan warga negara yang taat membayar pajak tersebut termasuk dalam kategori apa menurut pandanganmu?";
document.querySelector('[data-template-id="next-quiz-btn"]').textContent = "Lanjut ke Tantangan Kuis Cepat →";
document.querySelector('[data-template-id="quiz-label"]').textContent = "UJI PEMAHAMAN KILAT";
document.querySelector('[data-template-id="result-title"]').textContent = "Misi Selesai!";
document.querySelector('[data-template-id="reflection-prompt"]').textContent = "Hebat! Kamu telah menyelesaikan modul pemantik hari ini. Pastikan untuk menekan tombol 'Kirim Laporan' agar hasil belajarmu terekam otomatis di dasbor guru.";
document.querySelector('[data-template-id="restart-btn"]').textContent = "Ulangi Modul Belajar";
lucide.createIcons();
});
const slides = document.querySelectorAll('.slide');
function goSlide(n) {
slides.forEach(s => s.classList.remove('active'));
slides[n].classList.add('active');
document.getElementById('slide-counter').textContent = `${n + 1} / ${slides.length}`;
if(n===2) startQuiz();
}
function mulaiKelas() {
const nama = document.getElementById('nama-siswa-ppkn').value.trim();
if(!nama) {
alert("Mohon masukkan nama lengkapmu terlebih dahulu untuk memulai rekapitulasi belajar!");
return;
}
goSlide(1);
}
function restart() {
score=0;
qIndex=0;
pilihanPollingSiswa = "-";
goSlide(0);
resetPoll();
}
// Variabel Penampung Rekap
let pilihanPollingSiswa = "-";
// Poll Logika
const pollLabels = ['Hak Warga Negara','Kewajiban Warga Negara','Keduanya','Bukan keduanya'];
let votes = [0,0,0,0];
let voted = false;
function vote(i) {
if(voted) return; voted=true;
pilihanPollingSiswa = pollLabels[i];
votes[i]++;
// simulasi data respon siswa lain di kelas
votes[0]+=6; votes[1]+=18; votes[2]+=11; votes[3]+=1;
const total = votes.reduce((a,b)=>a+b,0);
const container = document.getElementById('poll-result-bars');
container.innerHTML = votes.map((v,idx) => {
const pct = Math.round(v/total*100);
return `<div class="mb-2"><div class="flex justify-between text-xs mb-1 font-bold"><span>${pollLabels[idx]}</span><span>${pct}%</span></div><div class="h-4 rounded-full bg-slate-100 overflow-hidden"><div class="poll-bar h-full rounded-full ${idx===i?'bg-emerald-500':'bg-indigo-400'}" style="width:${pct}%"></div></div></div>`;
}).join('');
document.getElementById('poll-results').classList.remove('hidden');
document.getElementById('poll-nav').classList.remove('hidden');
document.querySelectorAll('#poll-options .option-btn').forEach((b,idx)=>{ b.classList.add(idx===i?'border-indigo-600 bg-indigo-50 font-bold':'opacity-50'); b.disabled=true; });
}
function resetPoll() {
votes=[0,0,0,0];
voted=false;
document.getElementById('poll-results').classList.add('hidden');
document.getElementById('poll-nav').classList.add('hidden');
document.querySelectorAll('#poll-options .option-btn').forEach(b=>{b.classList.remove('border-indigo-600','bg-indigo-50','font-bold','opacity-50');b.disabled=false;});
}
// Kuis Logika
const questions = [
{ q: "Setiap warga negara wajib membayar pajak sesuai undang-undang yang berlaku.", a: true },
{ q: "Hak untuk mendapatkan pendidikan dasar secara konstitusi hanya berlaku bagi anak kalangan tertentu.", a: false },
{ q: "Membela kedaulatan negara adalah kewajiban dasar setiap warga negara Indonesia.", a: true },
{ q: "Kebebasan berpendapat di muka umum berarti bebas menghina orang lain di media sosial.", a: false },
{ q: "Warga negara berhak mendapat perlindungan serta kedudukan hukum yang sama di depan pengadilan.", a: true }
];
let qIndex=0, score=0, timer, timeLeft;
function startQuiz() { qIndex=0; score=0; showQuestion(); }
function showQuestion() {
if(qIndex>=questions.length){ endQuiz(); return; }
document.getElementById('quiz-question').textContent = `${qIndex+1}. ${questions[qIndex].q}`;
document.getElementById('quiz-bar').style.width = `${(qIndex+1)/questions.length*100}%`;
document.getElementById('quiz-feedback').classList.add('hidden');
document.getElementById('btn-true').disabled=false;
document.getElementById('btn-false').disabled=false;
timeLeft=10;
document.getElementById('timer-text').textContent=timeLeft;
clearInterval(timer);
timer=setInterval(()=>{
timeLeft--;
document.getElementById('timer-text').textContent=timeLeft;
if(timeLeft<=0){
clearInterval(timer);
answer(null);
}
},1000);
}
function answer(val) {
clearInterval(timer);
document.getElementById('btn-true').disabled=true;
document.getElementById('btn-false').disabled=true;
const fb = document.getElementById('quiz-feedback');
const correct = questions[qIndex].a;
if(val===correct){
score++;
fb.textContent='✅ Benar!';
fb.className='mt-4 p-3 rounded-lg text-center font-semibold bg-emerald-100 text-emerald-700 text-sm';
} else if(val===null){
fb.textContent='⏰ Waktu habis! Kunci Jawaban: '+(correct?'Benar':'Salah');
fb.className='mt-4 p-3 rounded-lg text-center font-semibold bg-amber-100 text-amber-700 text-sm';
} else {
fb.textContent='❌ Salah. Kunci Jawaban: '+(correct?'Benar':'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(showQuestion, 1500);
}
function endQuiz() {
document.getElementById('score-text').textContent = `${score} / ${questions.length}`;
document.getElementById('result-emoji').textContent = score>=4?'🎉':score>=2?'👍':'💪';
goSlide(3);
}
// ====================================================================
// MENGIRIMKAN DATA REKAPITULASI DUA ARAH MENEMBUS IFRAME LMS UTAMA
// ====================================================================
function kirimDataLms() {
const namaLengkap = document.getElementById('nama-siswa-ppkn').value.trim();
// Membisikkan objek payload ke penangkap pesan window parent index.php
window.parent.postMessage({
tipe: "kirim_nilai_lms",
nama: namaLengkap || "Siswa PPKn Anonim",
skor: score + " / " + questions.length,
baterai: score >= 4 ? "100" : score >= 2 ? "75" : "50", // Konversi skor menjadi indikator persen pemahaman
hambatan: "Pilihan Kasus Polling: " + pilihanPollingSiswa,
strategi: score >= 4 ? "Sangat Menguasai Materi Pokok" : "Butuh Latihan Penguatan Soal Kewajiban"
}, "*");
const alertBox = document.getElementById('lms-success-alert');
alertBox.classList.remove('hidden');
document.getElementById('lms-send-btn').disabled = true;
document.getElementById('lms-send-btn').className = "px-6 py-2.5 bg-slate-300 text-slate-500 rounded-full font-bold text-sm cursor-not-allowed";
setTimeout(() => alertBox.classList.add('hidden'), 3500);
}
</script>
</body>
</html>