# Koleksi Prompt Gemini Canvas: 4 Genre Permainan Gamifikasi PdPC

Dokumen ini mengandungi templat prompt lengkap dan panduan praktikal untuk membina aplikasi permainan web pendidikan interaktif (single-file HTML) menggunakan ciri **Google Gemini Canvas** untuk bilik darjah sekolah rendah & menengah KPM.

Semua permainan yang dijana adalah **1 fail HTML kendiri** yang mengandungi kod HTML, CSS, dan JavaScript lengkap dengan kesan bunyi (Web Audio API) yang **100% berfungsi secara Luar Talian (Offline)** tanpa sambungan internet.

---

## 🌐 Showcase Hidup (Live Demo)
Portal rasmi showcase 5 genre permainan PdPC hidup yang telah dibina dan dihoskan di Cloudflare Pages:
👉 **[https://game-pdpc-ror.pages.dev/](https://game-pdpc-ror.pages.dev/)**

---

## 🎮 Koleksi 4 Prompt Mengikut Genre

### 1. Genre: RPG Quiz / Boss Battle (Sains & Matematik)
> **Konsep:** Murid/Wira bertarung melawan Raksasa (Boss Monster). Jawapan yang betul memberikan serangan kritikal dan mengurangkan HP Boss, manakala jawapan salah mengurangkan nyawa murid.

```text
Gunakan fungsi Canvas. Bina satu aplikasi permainan web interaktif HTML satu fail tunggal (single-file HTML/CSS/JS) bergenre 'RPG Boss Battle' bertajuk 'Pertarungan Raksasa Pecahan (Matematik Tahun 4)'.

Spesifikasi Reka Bentuk & Mekanik:
1. Watak & Nyawa:
   - Watak Murid (Wira) mempunyai 3 Hati (HP).
   - Boss 'Gergasi Nombor Tak Wajar' mempunyai 100 Bar HP berwarna merah dengan animasi gegar (shake) apabila terkena pukulan.
   - Setiap jawapan betul: Mengurangkan HP Boss sebanyak 20 HP, mencetuskan efek teks 'CRITICAL HIT!' dan bunyi pukulan Web Audio API.
   - Jawapan salah: Menolak 1 Hati murid dan mencetuskan bunyi buzz ralat.
2. Kandungan Pembelajaran:
   - Sediakan 5 soalan objektif berurutan bertopik Pecahan Wajar, Pecahan Tak Wajar, dan Nombor Bercampur aras Tahun 4.
3. Visual & Audio:
   - Tema visual retro arcade moden dengan warna kontras tinggi, butang jawapan saiz besar yang jelas dipancarkan pada projektor kelas.
   - Kesan bunyi disintesis menggunakan Web Audio API tanpa pautan fail luar.
   - Skrin 'VICTORY' dengan animasi konfeti apabila HP Boss mencecah 0, atau 'CUBA LAGI' jika murid kehabisan hati.
4. Syarat Teknikal:
   - Semua HTML, CSS, dan JavaScript wajib berada dalam 1 fail tunggal dan boleh dimainkan 100% secara luar talian (offline).
```

---

### 2. Genre: Bilik Lolos / Escape Room (Sejarah & Bahasa Melayu)
> **Konsep:** Murid perlu menyiasat dan menyelesaikan 4 petunjuk soalan untuk mendapatkan 4 digit kod rahsia bagi membuka peti kebal sebelum pemasa tamat.

```text
Gunakan fungsi Canvas. Bina satu aplikasi permainan web interaktif HTML satu fail tunggal bergenre 'Bilik Lolos (Escape Room) Sejarah Tahun 5/6: Misi Pemasyhuran Kemerdekaan 1957'.

Spesifikasi Reka Bentuk & Mekanik:
1. Misi & Latar Cerita:
   - Murid berperanan sebagai Pembantu Arkib Negara yang perlu merungkai 4 kod rahsia peti kebal dokumen pemasyhuran sebelum pemasa 10 minit tamat.
2. 4 Stesen Petunjuk Soalan:
   - Petunjuk 1 (Digit 1): Tarikh Rundingan Kemerdekaan di London.
   - Petunjuk 2 (Digit 2): Tokoh yang mengetuai rombongan kemerdekaan.
   - Petunjuk 3 (Digit 3): Nama stadium bersejarah pemasyhuran kemerdekaan.
   - Petunjuk 4 (Digit 4): Bilangan laungan 'Merdeka!' oleh Tunku Abdul Rahman.
3. Pad Kekunci PIN Interaktif:
   - Sediakan papan nombor (numpad) interaktif untuk memasukkan kod 4-digit.
   - Jika kod betul: Peti terbuka dengan animasi emas dan sijil penghargaan digital 'Wira Sejarah Merdeka' sedia dipaparkan.
   - Jika kod salah: Paparkan amaran 'KOD TIDAK TEPAT, SILA SEMAK PETUNJUK'.
4. Ciri Tambahan:
   - Pemasa undur (Countdown Timer) yang bertukar warna merah pada 2 minit terakhir.
   - Kesan audio klik dan kejayaan Web Audio API.
5. Syarat Teknikal:
   - 100% kod HTML/CSS/JS dalam fail tunggal, tiada dependensi luaran dan berfungsi secara offline.
```

---

### 3. Genre: Sorting / Pengelasan Objek Pantas (Tahap 1)
> **Konsep:** Murid Tahap 1 mengelaskan kad perkataan atau gambar ke dalam bakul kategori yang betul secara pantas (sesuai untuk Smart TV / Touchscreen).

```text
Gunakan fungsi Canvas. Bina satu permainan mini interaktif HTML satu fail tunggal bergenre 'Sorting / Pengelasan Pantas' bagi murid Tahap 1 Sains Tahun 2 bertajuk 'Klasifikasi Tabiat Pemakanan Haiwan (Herbivor, Karnivor, Omnivor)'.

Spesifikasi Reka Bentuk & Mekanik:
1. Susunan Skrin:
   - 3 Bakul / Kotak Sasaran di bahagian bawah:
     1) 🌿 Herbivor (Makan Tumbuhan sahaja)
     2) 🥩 Karnivor (Makan Haiwan sahaja)
     3) 🍲 Omnivor (Makan Tumbuhan & Haiwan)
   - Kad haiwan (berserta nama dan emoji besar comel, cth: 🐮 Lembu, 🦁 Singa, 🐒 Monyet, 🦅 Helang, 🐰 Arnab, 🐻 Beruang, 🐸 Katak, 🐘 Gajah) muncul satu persatu di bahagian tengah skrin.
2. Interaksi Permainan:
   - Murid klik butang bakul yang sepadan (atau seret kad) dalam tempoh had masa 8 saat bagi setiap kad.
   - Maklum balas serta-merta: Hijau & bunyi ceria jika betul (+10 markah), Merah jika salah (-5 markah).
   - Sistem kombo berturut-turut (Combo x2, x3) untuk mencetuskan semangat bersaing secara sihat.
3. Penamat & Ganjaran:
   - Paparan skor akhir berserta rating 1 hingga 3 Bintang dan butang 'Mula Semula'.
4. Syarat Teknikal:
   - Saiz teks dan elemen sangat besar, mesra skrin sentuh projektor / Smartboard kelas, dan berfungsi secara offline.
```

---

### 4. Genre: Simulasi Keputusan / Penceritaan Bercabang (Moral, Sivik & Agama)
> **Konsep:** Penceritaan berasaskan senario dilema moral harian di mana setiap pilihan murid memberi impak kepada meter integriti dan reputasi diri.

```text
Gunakan fungsi Canvas. Bina satu aplikasi permainan web interaktif berasaskan teks pilihan bercabang (Decision Simulation / Choose Your Own Adventure) bertajuk 'Dilema Si Pembantu Rakan: Simulasi Sivik & Moral Sekolah Rendah'.

Spesifikasi Reka Bentuk & Mekanik:
1. Aliran Cerita:
   - Mengandungi 4 senario dilema harian di persekitaran sekolah (cth: Terjumpa dompet di kantin sekolah, menyaksikan rakan diejek di padang, tugasan berkumpulan di mana ada rakan pasif).
   - Setiap senario menawarkan 3 pilihan tindakan berbeza:
     Pilihan A: Bertindak berani dan berintegriti (Integriti +10, Empati +10)
     Pilihan B: Menunggu atau mendiamkan diri (Integriti +0, Empati +0)
     Pilihan C: Mementingkan diri atau mengambil jalan pintas (Integriti -10)
2. Meter Nilai & Maklum Balas:
   - Paparan visual 'Meter Integriti & Sahsiah' (0% hingga 100%) di penjuru atas yang bergerak secara dinamik.
   - Selepas setiap pilihan dibuat, paparkan perenggan 'Kesan Tindakan Anda' sebelum beralih ke senario seterusnya.
3. Rumusan Personaliti Akhir:
   - Berdasarkan keputusan keseluruhan, paparkan profil watak murid (cth: 'Pemimpin Berjiwa Empati', 'Warga Sekolah Bertanggungjawab', atau 'Perlu Tingkatkan Keberanian Moral') berserta ulasan bimbingan positif.
4. Syarat Teknikal:
   - Format kad novel visual yang kemas, navigasi lancar, lengkap HTML/CSS/JS dalam fail tunggal sedia offline.
```

---

## 📖 Panduan Guna Langkah Demi Langkah (Untuk Guru)

### Langkah 1: Jana Melalui Google Gemini
1. Buka pelayar web dan layari **[gemini.google.com](https://gemini.google.com)** (Gunakan akaun peribadi atau akaun DELIMa KPM).
2. Di sebelah butang hantar prompt, klik butang **Canvas** (atau pastikan prompt dimulakan dengan ayat `Gunakan fungsi Canvas. Bina...`).
3. Salin salah satu prompt di atas. Anda boleh ubah topik/subjek di dalam kurungan mengikut DSKP subjek anda.
4. Tekan **Enter / Send**.

### Langkah 2: Pratonton & Penyesuaian Terus di Skrin
1. Tetingkap Canvas akan terbuka secara automatik di bahagian sebelah kanan skrin.
2. Anda boleh klik tab **Preview** untuk mencuba permainan tersebut secara langsung di dalam pelayar.
3. Jika ingin membuat perubahan (contoh: tambah bilangan soalan, tukar bahasa, atau besarkan teks), taip sahaja di ruang chat sebelah kiri:
   * *“Sila tambah 3 lagi soalan tentang topik fotosintesis.”*
   * *“Besarkan saiz fon tajuk dan butang supaya jelas dari belakang kelas.”*

### Langkah 3: Simpan Sebagai Fail `.html`
1. Di bahagian atas tetingkap Canvas, klik ikon **Copy code** atau butang **Download**.
2. Jika menyalin kod, buka Notepad (atau sebarang editor teks), tampal kod tersebut, dan simpan dengan nama:
   `game_sains_tahun4.html` *(Pastikan sambungan fail ialah `.html`, bukan `.txt`)*.

### Langkah 4: Kaedah Pelaksanaan di Bilik Darjah
* **Kaedah 1: Luar Talian (Offline) Penuh di Projektor Kelas (Disyorkan)**
  * Klik dua kali (*double-click*) pada fail `.html` tersebut di komputer riba guru.
  * Ia akan dibuka secara automatik di Google Chrome atau Microsoft Edge **tanpa memerlukan sambungan internet langsung**.
  * Guru boleh panggil wakil kumpulan atau murid bergilir-gilir ke hadapan kelas untuk menekan jawapan.
* **Kaedah 2: Pautan Murid / Google Classroom**
  * Muat naik fail `.html` ke Google Drive atau edarkan kepada murid melalui Google Classroom / WhatsApp kumpulan kelas.
  * Murid boleh membukanya di tablet atau telefon pintar di rumah untuk latihan pengukuhan kendiri.