[ Gamifikasi Pembelajaran ] "KAPSUL WAKTU NUSANTARA" : EPIC QUEST - Sistem Eksplorasi Arkeologi Fiksi v3.1

 [ Gamifikasi Pembelajaran ] "KAPSUL WAKTU NUSANTARA" : EPIC QUEST - Sistem Eksplorasi Arkeologi Fiksi v3.1

 

jika menggunakan PC arahkan ke atas dengan tombol W, kiri A, kanan D, bawah S




Kapsul Waktu Nusantara — Media Pembelajaran IPS Interaktif untuk Generasi Digital


📖 Deskripsi

Nusantara Epic Quest adalah platform pembelajaran berbasis HTML5 yang menggabungkan narasi sejarah, sosiologi, dan ekonomi Indonesia dalam pengalaman gaming interaktif. Dirancang khusus untuk mendukung Profil Pelajar Pancasila, aplikasi ini mengajak siswa dalam perjalanan lintas waktu dari Era Pra-Aksara hingga Indonesia Emas 2045.



Melalui dialog dengan tokoh bersejarah, quiz berbasis kasus nyata, dan mekanisme gameplay yang engaging, siswa mengembangkan:

  • Nalar Kritis — Analisis fenomena sosial-ekonomi kontemporer
  • Kemandirian — Literasi finansial dan kesadaran ekonomi
  • Berkebinekaan Global — Pemahaman toleransi dan keberagaman
  • Gotong Royong — Kesadaran persatuan dan kolaborasi

🎮 Fitur Utama

1. Gameplay Berbasis Eksplorasi

  • Peta vertikal interaktif 4500px (Era Pra-Aksara → Indonesia Emas 2045)
  • Kontrol WASD + Mouse atau Virtual Joystick (mobile-friendly)
  • Sistem reward XP untuk mendorong engagement
  • Partikel visual dan animasi dinamis

2. Narasi Multibahasa

Dialog karakter dalam 3 bahasa:

  • 🇮🇩 Indonesian — Bahasa utama formal
  • 🇮🇩 Javanese (Jawa Kuno) — Pelestarian budaya lokal
  • 🇬🇧 English — Aksesibilitas internasional

3. Quiz Berbasis Kasus Nyata

Setiap era memiliki pertanyaan yang terhubung dengan:

  • Data empiris (BPS, BNPB, OJK)
  • Fenomena kontemporer (Media sosial, Pinjol, Digital Economy)
  • Konsep kurikulum K13+ (Profil Pelajar Pancasila)
  • Sistem hint untuk scaffolding kognitif

4. Audio & Visual Gaming

  • BGM elektronik gamelan dari sumber publik
  • Efek suara synthesized (click, success, fail)
  • Gradasi warna emas (#ffd700) dengan tema gelap cyberpunk
  • Glass morphism UI dengan Tailwind CSS

5. Sistem Penilaian & Ranking

  • +100 XP — Jawaban benar (Nalar Kritis Luar Biasa)
  • -10 XP — Menggunakan hint (penalti kecil)
  • Ranking Akhir:
    • 🎓 PANCASILA SCHOLAR (≥90%)
    • 🧭 PENJELAJAH TANGGUH (<90%)

🌍 Era & Konten Pembelajaran

Era 1: Pra-Aksara (Kepala Suku Purba)

Topik: Geografi Indonesia & Adaptasi Lingkungan Vulkanik

  • Konsep: Ring of Fire, Kearifan Lokal Arsitektur
  • Sumber: BNPB, Jurnal Arsitektur Vernakular

Era 2: Kerajaan Nusantara (Mahapatih)

Topik: Persatuan & Berkebinekaan Global

  • Konsep: Sumpah Palapa, Bhinneka Tunggal Ika, Toleransi Digital
  • Sumber: Kemdikbud, Buku Sosiologi Nasional

Era 3: Pergerakan & Kemerdekaan (Tokoh Pers)

Topik: Literasi Finansial & Eksploitasi Ekonomi Modern

  • Konsep: Tanam Paksa → Pinjol Ilegal, Kemandirian Ekonomi
  • Sumber: OJK, Data Literasi Finansial Generasi Muda

Era 4: Indonesia Emas 2045 (Teknolog Masa Depan)

Topik: Bonus Demografi & Digital Economy

  • Konsep: Dividend vs Disaster, Kreativitas vs Konsumerisme
  • Sumber: BPS, Bappenas, Visi Indonesia Emas 2045

🛠️ Teknologi Stack

KomponenTeknologi
EngineHTML5 Canvas (2D Graphics)
StylingTailwind CSS + Custom CSS Variables
AudioWeb Audio API (Synth) + Pixabay CCO Audio
FontGoogle Fonts (Cinzel, Quicksand, Noto Serif Javanese)
ResponsifMobile-first (WASD/Touch Joystick)
FrameworkVanilla JavaScript (No dependencies)

📋 Struktur File

epicquest/
├── index.html          # Single-file application
├── README.md           # Dokumentasi ini
└── [Aset eksternal]
    ├── Tailwind CSS    → cdn.tailwindcss.com
    ├── Google Fonts    → fonts.googleapis.com
    └── BGM Audio       → cdn.pixabay.com

Catatan: Semua aset HTML, CSS, JavaScript, dan CDN resources dalam satu file index.html (~43KB)


🚀 Cara Menggunakan

Desktop / Laptop

  1. Buka index.html di browser modern
  2. Klik "Mulai Ekspedisi" di menu utama
  3. Pilih karakter (Bima atau Srikandi)
  4. Gunakan WASD untuk bergerak menuju node era
  5. Ikuti dialog, baca dengan seksama, jawab quiz dengan analisis kritis

Mobile / Tablet

  1. Buka file di browser mobile
  2. Virtual Joystick muncul otomatis di sudut kiri bawah
  3. Gerakkan dengan menyentuh area joystick
  4. Tap opsi jawaban dengan jari

Tombol Kontrol

InputFungsi
W/↑Gerak ke atas
A/←Gerak ke kiri
S/↓Gerak ke bawah
D/→Gerak ke kanan
Sentuh opsiPilih jawaban quiz

🎓 Pembelajaran Terukur

Profil Pelajar Pancasila (Alignment)

Beriman & Bertakwa — Menghormati warisan spiritual leluhur
Berkebinekaan Global — Memahami pluralisme dalam kesatuan
Gotong Royong — Kesadaran kolaborasi dalam membangun bangsa
Mandiri — Literasi finansial & kemandirian ekonomi
Bernalar Kritis — Analisis fenomena sosial-ekonomi
Kreatif — Solusi untuk Indonesia Emas 2045

Kurikulum K13+ (Mapel IPS)

  • Tema: Perkembangan Indonesia dari Pra-Aksara hingga Kontemporer
  • KD: Analisis geografis, historis, sosiologis, ekonomis
  • Literasi Finansial: Kesadaran investasi, pinjaman, konsumerisme

🎨 Desain & UX

Visual Language

  • Warna Primer: Gold (#ffd700) — Kemegahan Nusantara
  • Warna Sekunder: Teal/Green — Pertumbuhan & Harapan
  • Background: Dark (#0a0a0c) — Misteri & Penemuan
  • Glass Morphism: Blur panel dengan border emas

Aksesibilitas

  • ✅ Multi-language support (ID, Jv, EN)
  • ✅ Mobile-first responsive design
  • ✅ Virtual joystick untuk aksesibilitas input
  • ✅ Contrast ratio WCAG AA
  • ✅ Touch-friendly button targets

🔊 Audio & SFX

Background Music

  • Sumber: Pixabay CCO (Royalty-free gamelan elektronik)
  • Volume: 30% (tidak mengganggu pembelajaran)
  • Loop: Otomatis, dapat diatur ulang

Sound Effects

Sintetik menggunakan Web Audio API:

  • 🔘 Click — Sine wave 600→1000Hz (0.1s)
  • Success — Chord C#E (Triangle wave, 0.5s)
  • Fail — Sawtooth descending 300→100Hz (0.4s)

📱 Kompatibilitas

BrowserDesktopMobile
Chrome/Edge
Firefox
Safari
IE 11-

Kebutuhan:

  • JavaScript enabled
  • Resolusi minimum 320px (mobile)
  • Audio context support (optional)

👨‍🏫 Panduan Guru

Integrasi di Kelas

  1. Persiapan (10 menit)

    • Jelaskan narasi perjalanan waktu
    • Tunjukkan peta interaktif
  2. Gameplay (30 menit)

    • Siswa bermain individual atau kelompok
    • Monitor XP scores dan mistakes
  3. Diskusi (10 menit)

    • Kaji jawaban yang sering salah
    • Kaitkan dengan isu kontemporer
  4. Refleksi (5 menit)

    • Ranking final sebagai insight kemandirian belajar
    • Buat catatan pengembangan

Topik Diskusi Lanjutan

  • Ring of Fire dan mitigasi bencana alam
  • Toleransi dalam media sosial kontemporer
  • Jeratan hutang konsumtif generasi muda
  • Peluang ekonomi digital untuk youth leaders

🔗 Referensi Sumber

Data Empiris

  • 📊 BPS — Bonus Demografi, Statistik Sosial
  • 🏛️ BNPB — Mitigasi Bencana Alam
  • 💰 OJK — Literasi Finansial & Pinjol Ilegal
  • 🎯 Bappenas — Visi Indonesia Emas 2045
  • 📚 Kemdikbud — Kurikulum Merdeka & Profil Pelajar Pancasila

Akademis

  • Jurnal Arsitektur Vernakular Indonesia
  • Buku Sosiologi Kemdikbud
  • Jurnal Ekonomi Pendidikan

📝 Lisensi & Atribusi

Pengembang: Guru IPS Nusantara | toer.my.id

Aset Eksternal:

  • 🎵 BGM: Pixabay Audio (Royalty-free CCO)
  • 🎨 Fonts: Google Fonts
  • 🎯 Icons: Unicode Emoji
  • 🎨 CSS Framework: Tailwind CSS

Lisensi: Educational Use (Educational Purpose Social Science Educator)
Untuk keperluan pembelajaran non-komersial di institusi pendidikan.


🤝 Kontribusi & Pengembangan

Roadmap Fitur Mendatang

  •  Sistem multiplayer quest (kolaborasi kelas)
  •  Leaderboard global per sekolah
  •  Konten soal dinamis dari database
  •  Integrasi LMS (Google Classroom, Moodle)
  •  Progressive Web App (offline mode)
  •  Analytics dashboard untuk guru

Report Bug & Suggestion


🎯 Visi

"Transformasi pembelajaran IPS dari hafalan menjadi eksplorasi empiris, membangun generasi Pancasila yang bernalar kritis dan mandiri, siap menyongsong Indonesia Emas 2045."

Setiap pemain yang menyelesaikan perjalanan adalah Penjelajah Nusantara, yang telah:

  • 🗿 Memahami adaptasi leluhur terhadap alam
  • 🏛️ Menghargai persatuan dalam keberagaman
  • 📰 Mensyukuri perjuangan pergerakan nasional
  • 🚀 Siap menjadi pelopor Indonesia Emas

📞 Kontak & Dukungan

PlatformLink
🌐 Websitehttps://toer.my.id
💬 WhatsApp Channelhttps://whatsapp.com/channel/0029Vb6R2Ny2v1J1dll5Mq27
🎓 GitHubhttps://github.com/kangtoer/epicquest

Versi: 3.1 — Nusantara Epic Quest
Update Terakhir: 2026
Status: Active Development 🚀


"Dari masa lalu kami belajar, masa kini kami hidup, masa depan kami ciptakan."
— Inspired by Pancasila Spirit


 

Kolom Komentar

Silakan login dengan Akun Google untuk berkomentar. Komentar akan dimoderasi sebelum ditampilkan.

Komentar

Posting Komentar