GeoMatch: Detektif Bangun Geometri
Pecahkan Kasus, Temukan Hubungan Geometri!
GeoMatch adalah media pembelajaran berbasis permainan untuk materi Kekongruenan dan Kesebangunan Segitiga serta Segiempat (kelas IX SMP). Siswa berperan sebagai detektif geometri yang memecahkan kasus dengan menganalisis panjang sisi, besar sudut, dan hubungan antarbangun.
Indeks lengkap proyek dan rancangan aktivitas web: docs/INDEKS_PROYEK.md.
Login siswa, penyimpanan hasil di server, dan Dasbor Guru (Firebase): ikuti docs/TUTORIAL_FIREBASE.md. Tanpa konfigurasi Firebase, website tetap berjalan tanpa login.
Untuk Satu Kali Pembelajaran
Website dirancang untuk satu pertemuan (usulan 2 × 40 menit) dengan alur 5 langkah: Pendahuluan → Materi (4 bagian) → Misi Detektif (5 kasus) → Kuis Akhir (5 PG + 1 uraian) → Hasil. Sepuluh TP dari dokumen REVISI TP dikelompokkan menjadi 5 indikator (TP 1–2, 3–4, 5–6, 7–8, 9–10); setiap indikator dinilai lewat 1 kasus dan 1-2 soal kuis (js/data/curriculum.js).
Halaman
| Halaman | Isi |
|---|
Beranda (#/beranda) | Alur pembelajaran, tujuan, aturan main, progres, badge |
Materi (#/materi/:bagian) | kongruen, sebangun, seletak (Latihan Seletak), penerapan |
Misi Detektif (#/misi/:kasus) | 5 kasus, 20 poin per kasus, petunjuk, pembahasan bertahap, badge |
Kuis Akhir (#/evaluasi) | 5 PG + 1 uraian, timer opsional 15 menit, pembahasan |
Hasil (#/hasil) | Skor, persentase, badge, rekomendasi, capaian per kelompok TP |
Masuk (#/masuk) | Daftar/masuk siswa, masuk guru (aktif jika Firebase dikonfigurasi) |
Dasbor Guru (#/guru) | Rekap siswa, filter kelas, capaian per kelompok TP, jawaban uraian, unduh CSV |
Progres disimpan di localStorage (kunci geomatch.progress.v3). Jika Firebase aktif, progres siswa yang login juga disimpan ke Cloud Firestore (progress/{uid}).
Teknologi
- HTML, CSS, JavaScript murni (tanpa proses build).
- SVG untuk seluruh ilustrasi geometri (
js/core/svg.js), dengan skala yang sama antar-bangun agar gambar proporsional.
- KaTeX 0.16.11 disimpan lokal di
vendor/katex/ (lisensi MIT), dengan cadangan CDN jsDelivr.
Struktur
index.html
netlify.toml
css/style.css
js/firebase-config.js konfigurasi Firebase (diisi sendiri)
js/core/ ui.js (format, ikon, toast), store.js (localStorage), cloud.js (Firebase), geo.js (geometri), svg.js (renderer)
js/data/ curriculum.js (CP/TP, kelompok TP), missions.js (5 kasus), quiz.js (kuis akhir)
js/components/ navbar.js, practice.js (generator Latihan Seletak)
js/pages/ home.js, material.js, mission.js, quiz.js, result.js, login.js, teacher.js
firestore.rules aturan keamanan Firestore
firebase.json konfigurasi Firebase CLI/emulator
js/app.js router berbasis hash
vendor/katex/ KaTeX
vendor/firebase/ Firebase JS SDK 10.14.1 (compat)
Menjalankan secara lokal
python3 -m http.server 8000
# buka http://localhost:8000
Membuka index.html langsung dari file juga berfungsi (tidak memakai ES module).
Deploy ke Netlify
Situs ini statis dan sudah memiliki netlify.toml (publish = ".", tanpa perintah build).
Cara A: dari GitHub (otomatis setiap push)
- Masuk ke https://app.netlify.com lalu pilih Add new site → Import an existing project.
- Pilih GitHub, lalu repositori
Kongruen.
- Pilih branch yang berisi kode ini. Build command dikosongkan, publish directory
. (terbaca otomatis dari netlify.toml).
- Klik Deploy. Netlify memberi alamat seperti
https://nama-situs.netlify.app.
Cara B: Netlify Drop (tanpa akun GitHub)
- Unduh repositori sebagai ZIP lalu ekstrak.
- Buka https://app.netlify.com/drop dan seret folder hasil ekstrak ke halaman tersebut.
Catatan akurasi data
Pada spesifikasi awal, kasus "Pemeriksaan Sudut" menyebut segitiga bersisi 4 cm, 5 cm, 6 cm dengan sudut 50°, 60°, 70°. Data itu tidak mungkin terjadi: menurut aturan kosinus, segitiga 4-5-6 memiliki sudut sekitar 41,4°, 55,8°, dan 82,8° (misalnya cos C = (5² + 6² − 4²)/(2·5·6) = 0,75). Versi sekarang tidak lagi memakai kasus itu (diganti kasus TP 5 tentang menentukan nilai variabel pada segitiga kongruen).
