Game Kuis Sejarah Pahlawan Indonesia: Media Pembelajaran IPS Interaktif SD (HTML5)
Tingkatkan semangat belajar IPS dengan Game Kuis Sejarah Pahlawan Indonesia SD. Media interaktif HTML5 gratis, praktis, dan seru untuk Kurikulum Merdeka. Cek kode kuisnya di sini!
1. Membangkitkan Jiwa Nasionalisme Melalui Digital Learning
Mempelajari sejarah perjuangan bangsa seringkali menjadi tantangan bagi guru kelas 5 dan 6 SD. Banyaknya nama tokoh, tahun, dan lokasi peristiwa sering membuat siswa merasa jenuh.
Sebagai solusi, Game Kuis Sejarah Pahlawan hadir untuk mengubah cara belajar konvensional menjadi lebih dinamis. Media interaktif ini dirancang agar siswa dapat mengenali wajah dan jasa para pahlawan nasional melalui tantangan kuis yang menyenangkan, sekaligus menanamkan rasa bangga terhadap tanah air sejak dini.
2. Manfaat Game Kuis Sejarah bagi Siswa SD
Literasi Sejarah yang Menyenangkan: Membantu siswa mengingat fakta sejarah tanpa merasa sedang menghafal.
Umpan Balik Instan: Siswa langsung mengetahui jawaban yang benar, sehingga proses perbaikan pemahaman terjadi saat itu juga.
Pengembangan Karakter: Mengenalkan nilai-nilai keberanian dan pengorbanan para tokoh bangsa.
Fleksibilitas Akses: Berbasis HTML5 yang ringan, dapat diakses melalui HP orang tua maupun Chromebook di sekolah tanpa perlu instalasi aplikasi.
3. Panduan Implementasi di Kelas & Blog
Bagi rekan-rekan guru yang ingin menggunakan game ini, caranya sangat mudah. Bapak/Ibu tidak memerlukan keahlian pemrograman tingkat tinggi. Cukup ikuti langkah berikut:
Persiapan: Salin kode script HTML5 yang tersedia di bawah ini.
Siapkan Dokumen: Buka Notepad (PC) atau Text Editor lainnya.
Salin Kode: Copy seluruh kode HTML, CSS, dan JavaScript di bawah ini.
Simpan File: Klik Save As, beri nama kuis-pahlawan.html. Pastikan ekstensinya adalah .html.
Buka di Browser: Klik kanan file tersebut, pilih Open With Google Chrome.
4. Kode Script Game HTML5: "Detektif Pahlawan"
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#quiz-box { font-family: 'Segoe UI', sans-serif; background: #fffcf0; padding: 25px; border-radius: 15px; border: 4px solid #b22222; max-width: 500px; margin: 20px auto; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.header { background: #b22222; color: white; padding: 10px; border-radius: 10px; margin-bottom: 20px; }
.question { font-size: 1.2rem; font-weight: bold; color: #333; margin-bottom: 20px; min-height: 60px; }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-opt { padding: 12px; font-size: 14px; cursor: pointer; background: white; border: 2px solid #b22222; border-radius: 8px; color: #b22222; font-weight: bold; transition: 0.2s; }
.btn-opt:hover { background: #fdf2f2; }
#score-info { margin-bottom: 15px; font-size: 18px; color: #d35400; font-weight: bold; }
#msg { margin-top: 15px; font-weight: bold; min-height: 25px; }
</style>
</head>
<body>
<div id="quiz-box">
<div class="header"><h3>Kuis Pahlawan Nasional</h3></div>
<div id="score-info">Skor: <span id="score">0</span> 🇮🇩</div>
<div class="question" id="q-text">Menyiapkan kuis...</div>
<div class="options-grid" id="opt-container"></div>
<div id="msg"></div>
</div>
<script>
const dataKuis = [
{ q: "Siapa pahlawan yang dijuluki 'Bapak Pendidikan Nasional'?", a: "Ki Hajar Dewantara", ops: ["Bung Tomo", "Ki Hajar Dewantara", "R.A. Kartini", "Pattimura"] },
{ q: "Pahlawan wanita dari Aceh yang melawan penjajah Belanda adalah...", a: "Cut Nyak Dhien", ops: ["Dewi Sartika", "Cut Nyak Dhien", "Martha Tiahahu", "Fatmawati"] },
{ q: "Tokoh yang membacakan teks Proklamasi Kemerdekaan adalah...", a: "Ir. Soekarno", ops: ["Moh. Hatta", "Ir. Soekarno", "Sayuti Melik", "Ahmad Subardjo"] },
{ q: "Pahlawan yang memimpin pertempuran 10 November di Surabaya adalah...", a: "Bung Tomo", ops: ["Bung Tomo", "Jenderal Sudirman", "Sultan Hasanuddin", "Imam Bonjol"] },
{ q: "Siapa pahlawan yang dikenal dengan julukan 'Ayam Jantan dari Timur'?", a: "Sultan Hasanuddin", ops: ["Pattimura", "Sultan Hasanuddin", "Pangeran Antasari", "Diponegoro"] }
];
let skor = 0; let index = 0;
function tampilSoal() {
if (index >= dataKuis.length) {
document.getElementById('q-text').innerText = "Kuis Selesai! Luar Biasa!";
document.getElementById('opt-container').innerHTML = "<h4>Total Skor: " + skor + "</h4>";
return;
}
const soal = dataKuis[index];
document.getElementById('q-text').innerText = soal.q;
const container = document.getElementById('opt-container');
container.innerHTML = "";
soal.ops.forEach(o => {
const btn = document.createElement('button');
btn.className = "btn-opt"; btn.innerText = o;
btn.onclick = () => cek(o, soal.a);
container.appendChild(btn);
});
}
function cek(pilih, benar) {
const m = document.getElementById('msg');
if(pilih === benar) {
skor += 20; document.getElementById('score').innerText = skor;
m.innerHTML = "<span style='color:green'>Tepat sekali! 🎉</span>";
index++; setTimeout(tampilSoal, 1000);
} else {
m.innerHTML = "<span style='color:red'>Ayo coba lagi! 💪</span>";
}
}
tampilSoal();
</script>
</body>
</html>"Jika Bapak/Ibu guru mengalami kendala saat mencoba menjalankan kode ini, silakan tuliskan kendalanya di kolom komentar di bawah ya!"
Jika Ingin memainkan langsung geme ini bisa memulainya pada tampilan di bawah ini :
Kuis Pahlawan Nasional
5. Kesimpulan
Integrasi game edukasi dalam mata pelajaran IPS bukan lagi sekadar tren, melainkan kebutuhan di era digital. Dengan media kuis pahlawan ini, Bapak Ibu Guru tidak hanya memberikan materi, tetapi juga pengalaman belajar yang bermakna bagi siswa. Mari terus berinovasi untuk kemajuan pendidikan Indonesia!