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)

1. Masuk ke https://app.netlify.com lalu pilih Add new site → Import an existing project.
2. Pilih GitHub, lalu repositori Kongruen.
3. Pilih branch yang berisi kode ini. Build command dikosongkan, publish directory . (terbaca otomatis dari netlify.toml).
4. Klik Deploy. Netlify memberi alamat seperti https://nama-situs.netlify.app.

Cara B: Netlify Drop (tanpa akun GitHub)

1. Unduh repositori sebagai ZIP lalu ekstrak.
2. 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).