| 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
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
- 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
Dialog karakter dalam 3 bahasa:
- 🇮🇩 Indonesian — Bahasa utama formal
- 🇮🇩 Javanese (Jawa Kuno) — Pelestarian budaya lokal
- 🇬🇧 English — Aksesibilitas internasional
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
- 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
- +100 XP — Jawaban benar (Nalar Kritis Luar Biasa)
- -10 XP — Menggunakan hint (penalti kecil)
- Ranking Akhir:
- 🎓 PANCASILA SCHOLAR (≥90%)
- 🧭 PENJELAJAH TANGGUH (<90%)
Topik: Geografi Indonesia & Adaptasi Lingkungan Vulkanik
- Konsep: Ring of Fire, Kearifan Lokal Arsitektur
- Sumber: BNPB, Jurnal Arsitektur Vernakular
Topik: Persatuan & Berkebinekaan Global
- Konsep: Sumpah Palapa, Bhinneka Tunggal Ika, Toleransi Digital
- Sumber: Kemdikbud, Buku Sosiologi Nasional
Topik: Literasi Finansial & Eksploitasi Ekonomi Modern
- Konsep: Tanam Paksa → Pinjol Ilegal, Kemandirian Ekonomi
- Sumber: OJK, Data Literasi Finansial Generasi Muda
Topik: Bonus Demografi & Digital Economy
- Konsep: Dividend vs Disaster, Kreativitas vs Konsumerisme
- Sumber: BPS, Bappenas, Visi Indonesia Emas 2045
| Komponen | Teknologi |
|---|---|
| Engine | HTML5 Canvas (2D Graphics) |
| Styling | Tailwind CSS + Custom CSS Variables |
| Audio | Web Audio API (Synth) + Pixabay CCO Audio |
| Font | Google Fonts (Cinzel, Quicksand, Noto Serif Javanese) |
| Responsif | Mobile-first (WASD/Touch Joystick) |
| Framework | Vanilla JavaScript (No dependencies) |
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)
- Buka
index.htmldi browser modern - Klik "Mulai Ekspedisi" di menu utama
- Pilih karakter (Bima atau Srikandi)
- Gunakan WASD untuk bergerak menuju node era
- Ikuti dialog, baca dengan seksama, jawab quiz dengan analisis kritis
- Buka file di browser mobile
- Virtual Joystick muncul otomatis di sudut kiri bawah
- Gerakkan dengan menyentuh area joystick
- Tap opsi jawaban dengan jari
| Input | Fungsi |
|---|---|
| W/↑ | Gerak ke atas |
| A/← | Gerak ke kiri |
| S/↓ | Gerak ke bawah |
| D/→ | Gerak ke kanan |
| Sentuh opsi | Pilih jawaban quiz |
✅ 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
- Tema: Perkembangan Indonesia dari Pra-Aksara hingga Kontemporer
- KD: Analisis geografis, historis, sosiologis, ekonomis
- Literasi Finansial: Kesadaran investasi, pinjaman, konsumerisme
- Warna Primer: Gold (#ffd700) — Kemegahan Nusantara
- Warna Sekunder: Teal/Green — Pertumbuhan & Harapan
- Background: Dark (#0a0a0c) — Misteri & Penemuan
- Glass Morphism: Blur panel dengan border emas
- ✅ Multi-language support (ID, Jv, EN)
- ✅ Mobile-first responsive design
- ✅ Virtual joystick untuk aksesibilitas input
- ✅ Contrast ratio WCAG AA
- ✅ Touch-friendly button targets
- Sumber: Pixabay CCO (Royalty-free gamelan elektronik)
- Volume: 30% (tidak mengganggu pembelajaran)
- Loop: Otomatis, dapat diatur ulang
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)
| Browser | Desktop | Mobile |
|---|---|---|
| Chrome/Edge | ✅ | ✅ |
| Firefox | ✅ | ✅ |
| Safari | ✅ | ✅ |
| IE 11 | ❌ | - |
Kebutuhan:
- JavaScript enabled
- Resolusi minimum 320px (mobile)
- Audio context support (optional)
Persiapan (10 menit)
- Jelaskan narasi perjalanan waktu
- Tunjukkan peta interaktif
Gameplay (30 menit)
- Siswa bermain individual atau kelompok
- Monitor XP scores dan mistakes
Diskusi (10 menit)
- Kaji jawaban yang sering salah
- Kaitkan dengan isu kontemporer
Refleksi (5 menit)
- Ranking final sebagai insight kemandirian belajar
- Buat catatan pengembangan
- Ring of Fire dan mitigasi bencana alam
- Toleransi dalam media sosial kontemporer
- Jeratan hutang konsumtif generasi muda
- Peluang ekonomi digital untuk youth leaders
- 📊 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
- Jurnal Arsitektur Vernakular Indonesia
- Buku Sosiologi Kemdikbud
- Jurnal Ekonomi Pendidikan
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.
- 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
- 🐛 Issue tracking di repository GitHub
- 💬 Channel WhatsApp: Gabung di sini
- 📧 Email: Hubungi melalui toer.my.id
"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
| Platform | Link |
|---|---|
| 🌐 Website | https://toer.my.id |
| 💬 WhatsApp Channel | https://whatsapp.com/channel/0029Vb6R2Ny2v1J1dll5Mq27 |
| 🎓 GitHub | https://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
Komentar
Posting Komentar