Tutorial..ICT

This media is not supported in your browser

1.39K viewsمحمد فوزي, 12:01

Sembang Canva 💪
Permainan Math Treasure Hunt
https://skarsmart.my.canva.site/mathtreasurehunt
☎️ Bagi yang nak mencuba, boleh guna prompt di bawah :
Bina permainan web “Math Treasure Hunt” untuk murid sekolah rendah (Tahun 4–6), menggunakan HTML/CSS/JavaScript (satu fail index.html atau 3 fail berasingan). Gaya visual mesra kanak-kanak, ikon peta dan peti harta, animasi ringkas, dan responsif mudah alih.
MATLAMAT
- Pemain menjawab soalan matematik untuk membuka petunjuk dan mendedahkan peta sedikit demi sedikit sehingga menemui harta karun.
- Fokus kepada operasi tambah, tolak, darab, bahagi, pecahan mudah, dan wang.
STRUKTUR SKRIN
1) Skrin Mula
- Tajuk permainan, butang “Mula”, butang “Cara Main”, pilihan Tahap (Mudah/Sederhana/Sukar).
2) Skrin Permainan
- Panel soalan + input jawapan + butang “Semak”.
- Bar kemajuan peta: 8 segmen (0/8 → 8/8 = jumpa harta).
- Markah semasa, baki nyawa (3), pemasa setiap soalan (30s lalai).
- Ilustrasi peta yang dibuka segmen demi segmen apabila jawapan betul.
3) Skrin Menang/Kalah
- Papar markah akhir, masa, ketepatan (%), butang “Main Semula”.
- Butang “Cetak Keputusan” (cetak ke PDF/native print).
MEKANIK TERAS
- Soalan dipilih rawak mengikut Tahap:
• Mudah: tambah/tolak 1–50, darab 1–5, bahagi tanpa baki.
• Sederhana: tambah/tolak/darab 1–100, bahagi dengan baki sifar, pecahan setara mudah.
• Sukar: darab/bahagi 2–12, operasi bercampur 2 langkah, pecahan → perpuluhan ringkas.
- Jawapan betul:
• +10 markah (Mudah), +15 (Sederhana), +20 (Sukar)
• +1 kombo; jika kombo 3, aktifkan “Kuasa Kompas” (auto-buka 1 segmen tambahan).
• Buka 1 segmen peta (min 1; +1 tambahan jika kuasa aktif).
- Jawapan salah atau masa tamat:
• −1 nyawa; kombo reset; berikan pembetulan ringkas (penjelasan 1 baris).
- Tamat permainan apabila 8 segmen peta dibuka (MENANG) atau nyawa = 0 (KALAH).
REKA BENTUK DATA
- Sediakan bank soalan dalam JS sebagai array objek:
[
{q:"27 + 15 = ?", a:42, topic:"tambah", level:"easy", explain:"27+10=37; 37+5=42"},
{q:"48 ÷ 6 = ?", a:8, topic:"bahagi", level:"medium", explain:"48 bahagi 6 = 8"},
{q:"3/4 = ? dalam perpuluhan", a:0.75, topic:"pecahan", level:"hard", explain:"3 ÷ 4 = 0.75"}
]
- Benarkan mod rawak terwaja dengan fungsi generator untuk mempelbagaikan soalan (supaya tidak perlu 100% soalan statik).
KAWALAN & LOGIK
- Tetapan Tahap menentukan julat nombor dan pemasa (Mudah 30s, Sederhana 25s, Sukar 20s).
- Input menerima nombor atau perpuluhan. Banding jawapan dengan toleransi 2 digit perpuluhan (bagi pecahan/perpuluhan).
- Bar kemajuan peta divisualkan dengan 8 petak/tiles yang berubah daripada kelabu → berwarna apabila terbuka.
- Animasi ringkas CSS (fade/scale) apabila segmen peta terbuka dan apabila serlahkan jawapan betul/salah.
UI/UX
- Warna ceria, tipografi besar dan jelas.
- “Cara Main” menerangkan: pilih tahap → jawab dalam masa → buka peta → jumpa harta.
- Sokong papan kekunci: Enter = Semak, Esc = kembali ke menu.
- Amaran kebolehcapaian: kontras warna ≥ 4.5:1, fokus ring yang jelas pada elemen interaktif, pembaca skrin pada butang utama.
SKORING & ANALITIK MINI
- Papar: Markah, Soalan Dijawab, Betul (%), Masa Purata/Soalan.
- Simpan skor terbaik (localStorage): {bestScore, bestAccuracy, fastestTime}.
- Butang “Reset Data” untuk kosongkan localStorage.
KOD & ORGANISASI
- Guna modul JS kecil (atau fungsi teratur) untuk: penghasilan soalan, semakan jawapan, UI peta, pemasa, skor/localStorage.
- Tiada perpustakaan luaran diperlukan.
- Letakkan CSS ringkas (grid peta 4x2, kad soalan, butang), pastikan responsif pada skrin tablet/telefon.
PENGUJIAN DALAMAN (sertakan ringkas dalam komen):
- Uji 3 tahap, tamat masa, salah berturut-turut, kombo 3x (aktif Kuasa Kompas), menang sebelum nyawa habis, dan kalah.
- Uji ketepatan pecahan/perpuluhan dengan toleransi 0.01.
HASIL AKHIR
- Aplikasi siap dimainkan dalam satu klik “Run”.
- Rekaan bersih, animasi ringan, dan semua butan

1.25K viewsمحمد فوزي, 12:01