Sembang Canva :
Canva code boleh generate dashboard menarik jugak. Tapi kita kena habaq dengan Canva dengan "jelas dan terang" apa yang kita nak, supaya hasil menepati citarasa. Saya try buat dashboard ringkas.
1. data dummy minta chatGPT buat.
2. data saya transfer ke google sheet sebb data agak kompleks.
3. publish data dalam bentuk web publish csv.
4. buat promt dalam canva code dan tunggu hasil.
5. hasil akhir adalah seperti dibawah :

Video from محمد فوزي

kalau boring2, boleh main game ni dulu

yang ni versi Update lebih mudah untuk ambil data dari google sheet ke Canva Code For Me
https://youtu.be/v5hLhFK-BgM

Apa yang boleh dibuat? yang saya share ni sebahagian sahaja yang saya rasa best untuk guna 😅

1. Fail PDF ditukarkan kepada Nota Bahasa Melayu yang lengkap dan jelas.
2. Nota tadi boleh dihubung dengan Peta Minda. NotebookLM tolong pecahkan mind map.
3. Nota tadi juga boleh tukar kepada Perbualan yang mana kalau kita dengar perbualan ni, dah cukup untuk kita faham isi kandungan PDF asal tadi. Perbualan yang santai melibatkan 2 orang (lelaki dan perempuan) dengan bahasa melayu yang fasih dan tidak membosankan. (konsep Podcast).

https://youtu.be/JZB6j4yL_rA

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