100 IDEA WEBAPPS PENDIDIKAN

Disediakan oleh Cikgu Haris Harun

Panduan Praktikal + 100 Kata Kunci Prompt
Disusun khas untuk guru abad ke-21

Ebook ini menghimpunkan 100 idea webapps untuk pengajaran dan pembelajaran (PdPc). Setiap idea disertakan dengan penerangan ringkas dan prompt yang boleh digunakan terus dalam AI seperti ChatGPT untuk menjana kod HTML yang boleh di-embed ke Google Sites. Semua prompt telah dipermudahkan, tidak menggunakan localStorage, Firebase atau Sheets, dan sesuai untuk murid sekolah rendah dan menengah.

Sekiranya anda mendapati e-book ini bermanfaat buat anda, sudilah membuat sedikit sumbangan agar saya boleh terus berkarya untuk pendidikan Malaysia.

Sokong & Sumbang

Prakata

Dalam era pendidikan digital, guru berdepan cabaran untuk menjadikan PdPc lebih interaktif, menarik dan mudah diakses. Ebook ini disusun khas untuk membantu guru menghasilkan webapps pendidikan tanpa perlu menjadi pakar coding. Melalui kombinasi 100 idea webapps dan 100 kata kunci prompt, ebook ini diharap dapat menjadi panduan praktikal kepada guru untuk memperkayakan proses pengajaran dan pembelajaran.

Prakata ini ditulis dengan penuh harapan agar guru dapat menggunakan teknologi secara kreatif, menjadikan bilik darjah lebih hidup, serta menggalakkan murid belajar dengan penuh semangat.

Panduan Menggunakan Webapps Ini

  1. Gunakan Kotak Carian Pintar di atas untuk mencari idea spesifik dengan pantas.
  2. Klik ikon pada kad untuk simpan ke dalam tab Idea Kegemaran.
  3. Teks prompt boleh diedit terus (Live Edit) di dalam kotak kelabu sebelum anda menyalinnya!
  4. Pilih idea webapps yang sesuai dengan subjek dan tahap murid.
  5. Salin prompt dan tampal ke platform AI seperti ChatGPT untuk menjana kod HTML.
  6. Salin kod HTML yang terhasil dan embed ke dalam Google Sites.
  7. Setelah melihat preview webapps anda, tulskan prompt "cadangkan upgrade".
  8. Gunakan kata kunci tambahan dari bahagian '100 Kata Kunci Prompt' (Tab Bonus) untuk mencantikkan hasil.

Mendesain Google Site dengan Kaedah Heutagogi

Dalam era pendidikan digital, Google Site menjadi salah satu platform yang mudah diakses dan mesra pengguna untuk guru membina bahan PdPc. Keunikan Google Site ialah kebolehannya untuk menampung pelbagai sumber digital seperti kuiz, video, gambar, dan webapps yang dibangunkan melalui prompt. Apabila digabungkan dengan kaedah heutagogi, Google Site bukan sahaja menjadi repositori bahan, tetapi turut berubah menjadi ruang pembelajaran kendiri yang memberi kuasa kepada murid untuk meneroka, memilih, dan mencorakkan perjalanan belajar mereka.

Heutagogi menekankan pembelajaran kendiri (self-determined learning), di mana murid bukan sekadar penerima ilmu tetapi turut berperanan sebagai pereka laluan pembelajaran mereka sendiri. Prinsip ini boleh diterapkan dalam Google Site dengan beberapa strategi mudah. Pertama, guru boleh merancang laman utama yang ringkas tetapi menarik, memaparkan tajuk besar kursus atau topik beserta menu navigasi yang jelas. Halaman ini boleh dihiasi dengan ikon, emoji, atau gambar bagi memberi sentuhan mesra murid.

Setiap halaman dalam Google Site boleh dijadikan modul yang berfokus, contohnya Bab 1 hingga Bab 10, atau mengikut tema tertentu. Dalam modul ini, guru boleh embed pelbagai webapps yang dihasilkan melalui prompt, sama ada kuiz interaktif, flashcards, simulasi sains, atau cerita bercabang. Bagi mengukuhkan pemahaman murid, halaman tersebut juga boleh diperkaya dengan video ringkas, infografik, atau ilustrasi visual yang relevan.

Kaedah heutagogi menuntut adanya pilihan. Oleh itu, setiap modul tidak perlu berbentuk linear semata-mata. Guru boleh menyediakan butang 'Pilih Laluan' yang membolehkan murid menentukan sendiri aktiviti yang mereka mahu lalui. Misalnya, seorang murid mungkin lebih suka mencuba kuiz interaktif dahulu sebelum menonton video, manakala murid lain mungkin memilih sebaliknya. Pilihan ini memberi rasa autonomi dan meningkatkan motivasi murid untuk belajar.

Selain itu, aspek refleksi dan penilaian juga penting. Guru boleh menyediakan borang Google Form atau ruang jurnal ringkas di akhir modul sebagai tempat murid meluahkan pengalaman dan kefahaman mereka. Penilaian tidak perlu formal sepenuhnya, sebaliknya boleh dalam bentuk kuiz ringkas atau soalan reflektif. Melalui cara ini, guru dapat mengesan tahap kefahaman murid secara fleksibel.

Untuk menambahkan elemen keseronokan, Google Site boleh direka dengan gamifikasi ringkas. Guru boleh meletakkan ikon bintang ⭐️ atau trofi 🏆 sebagai tanda pencapaian setiap kali murid menyelesaikan modul tertentu. Bahkan, sebuah halaman khas 'Hall of Fame' boleh diwujudkan untuk memberi pengiktirafan simbolik kepada murid yang aktif.

Secara keseluruhannya, membina Google Site berasaskan heutagogi bermakna guru menyediakan sebuah persekitaran pembelajaran yang fleksibel, kreatif dan berpusatkan murid. Guru bertindak sebagai fasilitator yang menyediakan jalan, manakala murid menjadi pengembara yang memilih laluan mereka sendiri. Dengan adanya elemen interaktif, pilihan aktiviti, ruang refleksi, dan motivasi gamifikasi, Google Site berupaya menjadi platform yang benar-benar menghidupkan semangat pembelajaran kendiri dalam kalangan murid.

Membina Modul Interaktif dan Flow di Google Sites

Google Sites boleh dijadikan sebuah modul pembelajaran digital yang interaktif dan fleksibel. Dengan sedikit kreativiti, guru boleh membina laman yang bukan sahaja menyimpan nota atau bahan, tetapi turut memandu murid melalui perjalanan pembelajaran yang tersusun. Konsep 'flow' atau aliran dalam Google Sites sangat penting kerana ia menentukan bagaimana murid bergerak dari satu aktiviti ke aktiviti lain.

Langkah pertama ialah merancang struktur modul. Biasanya, sebuah modul mempunyai Halaman Utama yang memaparkan tajuk besar serta menu navigasi. Dari sini, murid boleh memilih modul atau bab yang ingin diterokai. Setiap bab pula boleh dipecahkan kepada halaman-halaman kecil yang mengandungi aktiviti khusus seperti kuiz, flashcards, simulasi, atau video ringkas.

Bagi menjadikan modul lebih interaktif, guru boleh embed pelbagai webapps HTML yang dijana melalui prompt AI. Kuiz mini, teka silang kata, puzzle, atau simulasi sains boleh diletakkan terus dalam halaman modul. Selain itu, video penerangan atau infografik juga boleh digabungkan untuk memperkukuh pemahaman murid. Aktiviti ini boleh dilengkapkan dengan borang refleksi atau Google Form bagi membolehkan murid menilai apa yang mereka pelajari.

Flow interaktif boleh dibina dalam beberapa bentuk. Flow linear membawa murid dari Halaman 1 ke Halaman 2 hingga selesai. Flow bercabang (branching) memberi pilihan kepada murid untuk memilih laluan aktiviti yang mereka minat, manakala flow gelung (loop) membolehkan murid kembali ke Halaman Utama selepas setiap aktiviti untuk memilih aktiviti seterusnya. Untuk motivasi tambahan, flow berasaskan gamifikasi boleh digunakan, di mana murid mengumpul bintang atau lencana setiap kali menyelesaikan modul, dan akhirnya menuju ke halaman khas 'Hall of Fame'.

Tips penting dalam membina flow termasuk memastikan setiap halaman mempunyai butang 'Next' dan 'Back' yang jelas, semua modul boleh diakses dari menu utama, serta memberikan indikator kemajuan seperti 'Anda kini di Modul 2 daripada 5'. Yang paling utama, guru perlu menyediakan pilihan aktiviti supaya murid mempunyai autonomi dalam pembelajaran, selaras dengan pendekatan heutagogi.

Sebagai contoh, satu flow mudah dalam Google Sites boleh bermula dengan Halaman Utama → Pilih Modul. Dari situ, murid boleh masuk ke Modul 1 (kuiz + video), Modul 2 (flashcards + puzzle), Modul 3 (projek mini + refleksi), dan akhirnya ke halaman khas Hall of Fame sebagai ganjaran simbolik. Dengan cara ini, Google Sites bukan sahaja menjadi platform pembelajaran digital, tetapi juga ruang interaktif yang menghidupkan pembelajaran kendiri, kreatif, dan menyeronokkan.

🔍 Hasil Carian Pintar

Mencari...

⭐ Idea Kegemaran Saya

Prompt yang telah diselamatkan (Data disimpan di dalam browser anda).

Tiada idea kegemaran setakat ini. Klik ikon ❤️ pada mana-mana idea untuk menyimpannya di sini.

📝 Kategori 1: Kuiz & Penilaian

Idea 1: Kuiz MCQ Automatik

Webapps untuk murid menjawab kuiz objektif. Markah dikira automatik dan dipaparkan selepas semua soalan dijawab. Sesuai untuk Matematik, Sains, Bahasa atau Sejarah.

Prompt (Boleh Edit ✍️):
Bina satu fail HTML 1 page bertajuk "Kuiz Automatik". Masukkan 5 soalan MCQ dengan 4 pilihan jawapan setiap satu. Selepas murid klik jawapan, paparkan sama ada betul atau salah. Di akhir kuiz, tunjuk jumlah markah. Jangan guna localStorage, Firebase atau Sheets. Gunakan warna tema ceria (biru muda, hijau lembut, kuning terang). Be very creative.

Idea 2: True/False Exit Ticket

Alat refleksi ringkas selepas PdPc. Guru boleh sediakan 5–10 soalan benar/palsu untuk semakan pantas kefahaman murid.

Prompt (Boleh Edit ✍️):
Hasilkan HTML 1 page "Exit Ticket". Sediakan 5 soalan benar/palsu. Apabila murid klik jawapan, paparkan hijau untuk betul dan merah untuk salah. Kira jumlah betul di bahagian bawah. Tanpa localStorage, Firebase atau Sheets. Warna tema: hijau muda, oren lembut, putih bersih. Be very creative.

Idea 3: Teka Silang Kata Digital

Webapps teka silang kata berdasarkan istilah subjek. Sesuai untuk kosa kata Bahasa Inggeris, istilah Sains atau nama tokoh Sejarah.

Prompt (Boleh Edit ✍️):
Bina satu HTML crossword game dengan grid 10x10. Masukkan 5 perkataan berkaitan sains (contoh: atom, tenaga, haba, oksigen, planet). Murid boleh isi jawapan, dan sistem sahkan betul/salah. Kod mestilah self-contained, tanpa localStorage atau sambungan luar. Gunakan warna tema biru laut, putih, dan ungu pastel. Be very creative.

Idea 4: Cari Perkataan (Word Search)

Permainan cari perkataan dalam grid huruf. Sesuai untuk kosa kata, peribahasa, nama negeri atau istilah matematik.

Prompt (Boleh Edit ✍️):
Hasilkan HTML word search puzzle 12x12. Masukkan 6 perkataan tentang geografi (Gunung, Sungai, Laut, Hujan, Awan, Peta). Murid klik atau seret huruf untuk pilih perkataan. Apabila jumpa semua perkataan, papar mesej "Tahniah!". Tanpa sambungan luar, boleh embed ke Google Sites. Warna tema: biru muda, hijau pastel, kuning cerah. Be very creative.

Idea 5: Trivia Sejarah Malaysia

Kuiz trivia ringkas untuk subjek sejarah. Contoh: tarikh kemerdekaan, tokoh perjuangan, lokasi bersejarah.

Prompt (Boleh Edit ✍️):
Bina satu HTML trivia game "Sejarah Malaysia". Masukkan 5 soalan objektif dengan 4 pilihan jawapan. Selepas murid pilih, terus papar jawapan betul. Kira jumlah skor di bahagian akhir. Jangan guna localStorage atau sambungan luar. Gunakan warna tema merah, putih, biru, kuning (warna Jalur Gemilang). Be very creative.

Idea 6: Bingo Interaktif

Permainan Bingo pendidikan. Guru sediakan senarai istilah, murid klik pada kotak apabila disebut guru. Sesuai untuk latihan kosa kata atau ulangkaji cepat.

Prompt (Boleh Edit ✍️):
Hasilkan HTML 1 page "Bingo Pendidikan". Buat grid 5x5 dengan istilah sains (contoh: atom, sel, tenaga, fotosintesis, oksigen). Apabila murid klik kotak, ia bertukar warna. Tiada simpanan data diperlukan. Kod boleh embed ke Google Sites. Warna tema: kuning pastel, hijau muda, biru lembut. Be very creative.

Idea 7: Jeopardy Quiz

Kuiz gaya Jeopardy dengan kategori dan markah berbeza. Murid pilih soalan mengikut nilai markah (contoh: 100, 200, 300).

Prompt (Boleh Edit ✍️):
Bina HTML game gaya Jeopardy. Sediakan 3 kategori: Sains, Matematik, Bahasa. Setiap kategori ada 3 soalan bernilai 100, 200, 300 markah. Apabila murid pilih, papar soalan → klik jawapan → sahkan betul/salah → tambah markah. Tanpa localStorage atau sambungan luar. Warna tema: biru gelap, kuning emas, putih cerah. Be very creative.

Idea 8: Lumba Kuiz Dua Pasukan

Kuiz kompetitif antara dua pasukan. Guru tanya soalan, murid klik butang pasukan untuk dapat markah.

Prompt (Boleh Edit ✍️):
Bina HTML scoreboard kuiz dua pasukan. Paparkan dua lajur markah: Pasukan A dan Pasukan B. Setiap pasukan ada butang +1 untuk tambah markah. Ada butang "Reset" untuk mulakan semula. Kod ringkas, tanpa simpanan data, boleh embed di Google Sites. Warna tema: merah cerah untuk A, biru cerah untuk B. Be very creative.

Idea 9: Kuiz Drag & Drop Jawapan

Murid seret jawapan ke kotak kosong. Sesuai untuk padanan istilah dengan maksud, simbol kimia dengan nama unsur, atau perkataan dengan gambar.

Prompt (Boleh Edit ✍️):
Hasilkan HTML kuiz drag & drop. Sediakan 4 soalan dengan kotak kosong. Murid seret jawapan ke kotak. Jika betul, kotak bertukar hijau. Jika salah, bertukar merah. Kod self-contained, boleh embed ke Google Sites. Warna tema: hijau pastel, oren lembut, biru muda. Be very creative.

Idea 10: Kuiz Leaderboard Manual

Papar markah murid secara ranking. Guru masukkan nama murid dan markah manual, sistem auto susun ikut ranking.

Prompt (Boleh Edit ✍️):
Bina HTML leaderboard kuiz. Ada borang input nama murid + markah. Apabila klik "Tambah", paparkan senarai ranking ikut markah tertinggi. Ada butang reset untuk kosongkan semula. Jangan gunakan localStorage atau database. Warna tema: biru gelap, perak metalik, putih cerah. Be very creative.

🔤 Kategori 2: Flashcards & Latihan Bahasa

Idea 11: Flashcards Suku Kata BM

Webapps berbentuk flashcards untuk membantu murid membaca suku kata Bahasa Melayu. Murid klik kad untuk lihat jawapan.

Prompt (Boleh Edit ✍️):
Bina HTML flashcards interaktif bertajuk "Suku Kata BM". Sediakan 6 kad dengan suku kata (contoh: ba, ca, da, ga, ka, la). Apabila murid klik kad, ia berputar dan paparkan contoh perkataan. Warna tema: biru muda, merah jambu pastel, putih cerah. Be very creative.

Idea 12: Flashcards Vocabulary BI

Flashcards untuk memperkenalkan kosa kata Bahasa Inggeris. Sesuai untuk murid tahap rendah.

Prompt (Boleh Edit ✍️):
Hasilkan HTML flashcards bertajuk "English Vocabulary". Sediakan 6 kad dengan perkataan Inggeris (contoh: cat, dog, sun, book, pen, tree). Klik kad → paparkan gambar atau maksud dalam Bahasa Melayu. Warna tema: hijau lembut, kuning ceria, biru pastel. Be very creative.

Idea 13: Padankan Gambar ↔ Perkataan

Webapps padanan untuk murid tahap rendah. Murid seret perkataan ke gambar yang betul.

Prompt (Boleh Edit ✍️):
Bina HTML drag & drop "Match Word to Picture". Sediakan 4 gambar mudah. Gunakan emoji (contoh: bola, kereta, ikan, bunga). Murid seret perkataan ke gambar yang betul. Jika betul → kotak hijau, salah → merah. Warna tema: oren lembut, biru langit, hijau pastel. Be very creative.

Idea 14: Flashcards Kimia (Simbol Unsur)

Flashcards untuk menghafal simbol kimia. Sesuai untuk pelajar menengah.

Prompt (Boleh Edit ✍️):
Hasilkan HTML flashcards "Chemistry Symbols". Sediakan 6 kad, depan = simbol (H, O, Na, Cl, C, N), belakang = nama unsur. Klik kad untuk terbalikkan. Warna tema: biru gelap, putih, hijau neon. Be very creative.

Idea 15: Flashcards Peribahasa

Flashcards untuk memperkenalkan peribahasa Melayu. Sesuai untuk latihan BM.

Prompt (Boleh Edit ✍️):
Bina HTML flashcards "Peribahasa Melayu". Sediakan 5 kad, depan = peribahasa (contoh: Bagai aur dengan tebing), belakang = maksud. Klik untuk flip. Warna tema: ungu pastel, putih, jingga lembut. Be very creative.

Idea 16: Permainan Sinonim–Antonim

Webapps kuiz untuk memadankan sinonim atau antonim perkataan. Sesuai untuk BM & BI.

Prompt (Boleh Edit ✍️):
Hasilkan HTML padanan sinonim–antonim. Sediakan 4 perkataan, murid klik jawapan sinonim/antonim yang betul. Paparkan betul/salah terus selepas klik. Warna tema: merah muda, biru muda, kuning cerah. Be very creative.

Idea 17: Susun Ayat Jadi Betul

Webapps di mana murid perlu susun perkataan rawak menjadi ayat yang betul.

Prompt (Boleh Edit ✍️):
Bina HTML game "Rearrange Sentence". Masukkan 5 ayat mudah (contoh: Saya suka makan nasi). Perkataan dipaparkan secara rawak, murid seret untuk susun semula. Warna tema: hijau cerah, biru pastel, putih. Be very creative.

Idea 18: Spelling Bee Digital

Kuiz ejaan digital. Murid klik butang 'Play Word' → dengar perkataan → taip jawapan.

Prompt (Boleh Edit ✍️):
Hasilkan HTML spelling bee game. Sediakan 5 perkataan (contoh: animal, school, teacher, garden, happy). Gunakan Web Speech API untuk sebut perkataan. Murid taip jawapan, sistem sahkan betul/salah. Warna tema: kuning lebah, hitam, putih cerah. Be very creative.

Idea 19: Padankan Idiom ↔ Maksud

Permainan padanan idiom Inggeris dengan maksudnya. Sesuai untuk kelas BI menengah.

Prompt (Boleh Edit ✍️):
Bina HTML matching game "English Idioms". Sediakan 5 idiom di lajur kiri, 5 maksud di lajur kanan. Murid seret padanan yang betul. Warna tema: biru pastel, merah jambu lembut, putih. Be very creative.

Idea 20: Puzzle Ejaan Bergambar

Puzzle di mana murid padankan huruf untuk melengkapkan ejaan gambar. Sesuai untuk tahap rendah.

Prompt (Boleh Edit ✍️):
Hasilkan HTML puzzle ejaan. Sediakan 4 gambar (contoh: cat, dog, sun, fish). Di bawah setiap gambar, sediakan huruf rawak, murid pilih huruf yang betul. Warna tema: oren cerah, hijau lembut, biru pastel. Be very creative.

🔬 Kategori 3: Simulasi Sains & Matematik

Idea 21: Simulasi Sistem Suria

Webapps yang memaparkan pergerakan planet mengelilingi matahari. Murid boleh klik pada planet untuk melihat fakta ringkas.

Prompt (Boleh Edit ✍️):
Bina HTML simulasi sistem suria. Paparkan matahari di tengah, planet bergerak mengelilingi orbit. Klik planet → papar maklumat. Warna tema: hitam angkasa, kuning matahari, biru bumi. Be very creative.

Idea 22: Simulasi Orbit Bulan

Webapps untuk menunjukkan pergerakan bulan mengelilingi bumi. Sesuai untuk topik sains angkasa.

Prompt (Boleh Edit ✍️):
Hasilkan HTML animasi orbit bulan. Paparkan bumi di tengah, bulan berputar mengelilingi bumi. Klik bulan → papar info fasa bulan. Warna tema: biru gelap, putih, kelabu. Be very creative.

Idea 23: Simulasi Kitaran Air

Animasi kitaran air dari penyejatan, kondensasi, presipitasi hingga larian air. Sesuai untuk murid sekolah rendah.

Prompt (Boleh Edit ✍️):
Bina HTML simulasi kitaran air. Gunakan ikon/animasi ringkas untuk Penyejatan, Kondensasi, Hujan, Larian Air. Klik ikon → papar penerangan ringkas. Warna tema: biru langit, putih awan, hijau bumi. Be very creative.

Idea 24: Simulasi Fotosintesis

Webapps yang menunjukkan proses fotosintesis dalam daun. Murid boleh lihat interaksi cahaya, karbon dioksida, air, dan hasil glukosa.

Prompt (Boleh Edit ✍️):
Hasilkan HTML simulasi fotosintesis. Paparkan daun, cahaya matahari, CO2 masuk, O2 keluar. Klik komponen → papar fungsi. Warna tema: hijau daun, kuning cahaya, biru langit. Be very creative.

Idea 25: Simulasi Hukum Newton

Webapps interaktif untuk menjelaskan hukum Newton. Contohnya, sebuah bola bergerak apabila ditolak dan berhenti bila ada geseran.

Prompt (Boleh Edit ✍️):
Bina HTML simulasi hukum Newton. Paparkan bola boleh ditolak dengan butang 'Tolak'. Bola bergerak mengikut arah dan berhenti perlahan. Warna tema: biru, merah, kelabu. Be very creative.

Idea 26: Simulasi Pantulan Cahaya

Webapps untuk menunjukkan bagaimana cahaya dipantulkan oleh cermin. Sesuai untuk topik optik.

Prompt (Boleh Edit ✍️):
Hasilkan HTML simulasi pantulan cahaya. Paparkan sinar datang ke cermin dan dipantulkan ikut sudut. Murid boleh ubah sudut datang dengan slider. Warna tema: hitam, kuning neon, biru. Be very creative.

Idea 27: Simulasi Denyutan Jantung

Animasi jantung berdenyut untuk menerangkan sistem peredaran darah. Murid boleh klik untuk melihat aliran darah merah & biru.

Prompt (Boleh Edit ✍️):
Bina HTML simulasi denyutan jantung. Paparkan jantung beranimasi berdenyut. Aliran darah merah = oksigen, biru = tanpa oksigen. Warna tema: merah, biru, utih. Be very creative.

Idea 28: Simulasi Pecahan (Pizza/Pie)

Webapps untuk menjelaskan konsep pecahan menggunakan bulatan seperti pizza. Murid klik untuk bahagi 1/2, 1/3, 1/4.

Prompt (Boleh Edit ✍️):
Hasilkan HTML simulasi pecahan pizza. Paparkan bulatan boleh dibahagi kepada pecahan. Klik butang → bahagi kepada 1/2, 1/3, 1/4. Warna tema: oren pizza, hijau, kuning. Be very creative.

Idea 29: Graf Fungsi Interaktif

Webapps untuk melukis graf fungsi matematik mudah. Murid boleh masukkan persamaan dan lihat bentuk graf.

Prompt (Boleh Edit ✍️):
Bina HTML graf fungsi interaktif. Input kotak teks untuk masukkan persamaan y = x^2, y = 2x, dsb. Paparkan graf dalam grid. Warna tema: biru gelap, putih, hijau neon. Be very creative.

Idea 30: Simulasi pH (Asid-Bes)

Webapps simulasi ujian pH. Murid klik bahan → warna litmus berubah. Sesuai untuk kimia asas.

Prompt (Boleh Edit ✍️):
Hasilkan HTML simulasi pH. Sediakan senarai bahan (contoh: lemon, sabun, air). Klik bahan → tukar warna kertas litmus. Warna tema: merah, biru, ungu. Be very creative.

🌍 Kategori 4: Sejarah, Geografi & Kemanusiaan

Idea 31: Peta Malaysia Klik-Info

Webapps peta Malaysia interaktif. Murid klik negeri untuk melihat fakta ringkas seperti ibu negeri, hasil utama, atau tarikan pelancongan.

Prompt (Boleh Edit ✍️):
Bina HTML peta Malaysia interaktif. Paparkan peta dengan negeri boleh diklik. Apabila murid klik negeri → papar fakta ringkas. Warna tema: biru langit, hijau tanah, kuning ceria. Be very creative.

Idea 32: Puzzle Peta Asia Tenggara

Puzzle untuk murid mengenal negara Asia Tenggara. Murid seret nama negara ke lokasi peta.

Prompt (Boleh Edit ✍️):
Hasilkan HTML puzzle peta Asia Tenggara. Paparkan peta kosong, murid seret nama negara ke lokasi betul. Jika betul → hijau, salah → merah. Warna tema: biru muda, putih, hijau lembut. Be very creative.

Idea 33: Timeline Interaktif Sejarah

Webapps yang memaparkan garis masa interaktif peristiwa sejarah. Sesuai untuk Sejarah Malaysia atau Dunia.

Prompt (Boleh Edit ✍️):
Bina HTML timeline interaktif. Sediakan 6 peristiwa (contoh: 1957 Merdeka, 1963 Malaysia dibentuk). Murid klik titik masa untuk lihat maklumat ringkas. Warna tema: coklat lembut, putih, emas pastel. Be very creative.

Idea 34: Kuiz Tokoh Dunia

Kuiz objektif mengenai tokoh terkenal dunia seperti Einstein, Gandhi, dan Ibnu Sina. Sesuai untuk subjek sejarah dan sivik.

Prompt (Boleh Edit ✍️):
Hasilkan HTML kuiz tokoh dunia. Sediakan 5 soalan objektif dengan gambar tokoh. Selepas jawab, papar jawapan betul/salah. Warna tema: biru gelap, putih, kelabu lembut. Be very creative.

Idea 35: Kuiz Bendera Negara

Webapps untuk mengenal bendera dunia. Murid pilih nama negara berdasarkan bendera yang dipaparkan.

Prompt (Boleh Edit ✍️):
Bina HTML kuiz bendera negara. Paparkan gambar bendera → murid pilih nama negara. Sediakan 5 soalan. Warna tema: merah, putih, biru pastel. Be very creative.

Idea 36: Kuiz Sungai Utama Malaysia

Kuiz geografi mengenai sungai-sungai utama Malaysia. Sesuai untuk murid menengah rendah.

Prompt (Boleh Edit ✍️):
Hasilkan HTML kuiz Sungai Malaysia. Sediakan 5 soalan objektif tentang sungai (contoh: Sungai Rajang, Sungai Pahang). Kira skor di akhir. Warna tema: biru air, hijau tanah, putih cerah. Be very creative.

Idea 37: Puzzle Mercu Tanda Dunia

Puzzle untuk mengenal mercu tanda terkenal seperti Menara Eiffel, Taj Mahal, dan Piramid. Murid padankan gambar dengan nama.

Prompt (Boleh Edit ✍️):
Bina HTML puzzle mercu tanda dunia. Sediakan 6 gambar mercu tanda dan nama-nama. Murid padankan dengan betul. Warna tema: ungu pastel, putih, biru lembut. Be very creative.

Idea 38: Simulasi Gempa Bumi Mini

Simulasi asas untuk tunjukkan bagaimana gempa bumi berlaku dengan pergerakan plat tektonik.

Prompt (Boleh Edit ✍️):
Hasilkan HTML simulasi gempa bumi mini. Paparkan dua plat bergerak → apabila bertembung, animasi gegaran. Klik butang → tunjuk semula animasi. Warna tema: coklat tanah, kelabu batu, merah. Be very creative.

Idea 39: Kuiz Bentuk Muka Bumi

Kuiz interaktif tentang bentuk muka bumi seperti gunung, delta, gua, dan tasik.

Prompt (Boleh Edit ✍️):
Bina HTML kuiz bentuk muka bumi. Sediakan 5 gambar bentuk muka bumi. Murid pilih jawapan betul dari senarai. Warna tema: hijau, biru muda, coklat lembut. Be very creative.

Idea 40: Siapa Saya? (Tokoh Sejarah)

Permainan 'Siapa Saya?' untuk murid meneka tokoh sejarah berdasarkan petunjuk ringkas.

Prompt (Boleh Edit ✍️):
Hasilkan HTML game 'Siapa Saya?'. Paparkan 3 petunjuk untuk setiap tokoh. Murid klik jawapan selepas baca petunjuk. Warna tema: biru gelap, emas lembut, putih. Be very creative.

🎨 Kategori 5: Seni, Muzik & Kreativiti

Idea 41: Kanvas Melukis Digital

Webapps kanvas melukis untuk murid menghasilkan lukisan menggunakan tetikus atau sentuhan. Sesuai untuk subjek seni visual.

Prompt (Boleh Edit ✍️):
Bina HTML kanvas melukis digital. Murid boleh melukis bebas dengan tetikus atau sentuhan. Sediakan butang reset untuk kosongkan kanvas. Warna tema: putih, biru pastel, hijau muda. Be very creative.

Idea 42: Piano 8 Nota Interaktif

Papan piano digital dengan 8 nota asas (C–C). Murid klik untuk dengar bunyi. Sesuai untuk muzik asas.

Prompt (Boleh Edit ✍️):
Hasilkan HTML piano interaktif dengan 8 kekunci (C–C). Klik kekunci → bunyi nota dimainkan. Paparkan nama nota pada setiap kekunci. Warna tema: putih, hitam, kuning ceria. Be very creative.

Idea 43: Drum Machine Digital

Webapps untuk murid cuba alat muzik perkusi secara digital. Sesuai untuk kelas muzik.

Prompt (Boleh Edit ✍️):
Bina HTML drum machine interaktif. Paparkan butang drum (kick, snare, hi-hat, cymbal). Klik → bunyi dimainkan. Warna tema: merah cerah, biru muda, putih. Be very creative.

Idea 44: Origami Step-by-Step

Webapps tunjuk langkah demi langkah untuk melipat origami mudah seperti kapal atau burung. Sesuai untuk seni tangan.

Prompt (Boleh Edit ✍️):
Hasilkan HTML panduan origami. Paparkan gambar/ikon setiap langkah. Butang 'Next' → tunjuk langkah seterusnya. Warna tema: ungu pastel, putih, oren ceria. Be very creative.

Idea 45: Poster Digital Maker

Alat untuk murid mereka bentuk poster digital. Murid boleh masukkan teks dan gambar mudah.

Prompt (Boleh Edit ✍️):
Bina HTML poster maker. Sediakan ruang untuk masukkan teks + pilihan warna background. Murid boleh drag teks ke lokasi berbeza. Warna tema: biru pastel, kuning cerah, hijau lembut. Be very creative.

Idea 46: Board Komik Interaktif

Webapps untuk menghasilkan strip komik ringkas. Murid boleh pilih watak dan tambah dialog.

Prompt (Boleh Edit ✍️):
Hasilkan HTML komik maker. Sediakan 3 panel kosong. Murid boleh pilih watak (emoji) dan tambah teks dialog. Warna tema: biru muda, merah jambu pastel, putih. Be very creative.

Idea 47: Cat Air Digital (Brush Effect)

Alat melukis dengan kesan cat air digital. Sesuai untuk seni kreatif murid.

Prompt (Boleh Edit ✍️):
Bina HTML kanvas cat air digital. Gunakan kesan berus air (brush blur). Murid boleh pilih warna berbeza. Warna tema: putih, biru lembut, hijau pastel. Be very creative.

Idea 48: Kolaj Digital (Susun Gambar)

Webapps untuk murid menyusun gambar menjadi kolaj. Sesuai untuk projek seni.

Prompt (Boleh Edit ✍️):
Hasilkan HTML kolaj digital. Sediakan 6 gambar kecil, murid boleh drag untuk susun atas kanvas. Warna tema: kuning cerah, putih, biru pastel. Be very creative.

Idea 49: Animasi Ringkas HTML Canvas

Webapps animasi ringkas seperti bola melantun. Sesuai untuk murid belajar asas animasi.

Prompt (Boleh Edit ✍️):
Bina HTML animasi bola melantun menggunakan canvas. Bola bergerak dan melantun apabila kena tepi. Warna tema: biru gelap, merah cerah, putih. Be very creative.

Idea 50: Peta Minda Digital

Alat untuk murid bina peta minda digital. Sesuai untuk brainstorming atau nota ringkas.

Prompt (Boleh Edit ✍️):
Hasilkan HTML peta minda digital. Sediakan nod utama + pilihan tambah nod cabang. Murid boleh drag dan susun kedudukan nod. Warna tema: hijau muda, biru pastel, kuning cerah. Be very creative.

💻 Kategori 6: STEM & Logik Komputer

Idea 51: Coding Puzzle Drag-Drop

Webapps asas coding dengan gaya drag & drop. Murid seret blok untuk bina arahan mudah.

Prompt (Boleh Edit ✍️):
Bina HTML coding puzzle drag & drop. Murid boleh seret blok seperti 'Maju', 'Belok Kiri', 'Belok Kanan'. Klik butang 'Jalankan' → animasi watak bergerak ikut arahan. Warna tema: biru muda, oren ceria, putih. Be very creative.

Idea 52: Binary ↔ Text Converter

Alat penukar teks kepada kod binari dan sebaliknya. Sesuai untuk asas sains komputer.

Prompt (Boleh Edit ✍️):
Hasilkan HTML binary-text converter. Input teks → papar kod binari. Input binari → papar teks. Warna tema: hitam, hijau neon, putih. Be very creative.

Idea 53: Permainan Logik If–Else

Webapps permainan untuk memahami konsep if–else. Murid pilih syarat, sistem beri respon.

Prompt (Boleh Edit ✍️):
Bina HTML game if–else. Murid pilih syarat (contoh: umur > 12?). Paparkan jawapan logik (contoh: Remaja / Kanak-kanak). Warna tema: biru gelap, kuning cerah, putih. Be very creative.

Idea 54: Kalkulator Matematik Digital

Kalkulator asas tambah, tolak, darab, bahagi. Sesuai untuk murid tahap rendah.

Prompt (Boleh Edit ✍️):
Hasilkan HTML kalkulator digital. Paparkan paparan skrin + butang nombor 0–9 dan operasi asas. Murid klik butang untuk kira. Warna tema: kelabu lembut, biru, putih. Be very creative.

Idea 55: Stopwatch & Timer Digital

Alat untuk kira masa. Ada dua fungsi: stopwatch dan countdown timer.

Prompt (Boleh Edit ✍️):
Bina HTML stopwatch & timer digital. Stopwatch: mula, berhenti, reset. Timer: pilih 1, 5, 10 minit → countdown. Warna tema: biru muda, hijau neon, putih. Be very creative.

Idea 56: Simulator Robot Bergerak

Webapps simulasi robot bergerak di grid. Murid klik butang arah untuk kawal robot.

Prompt (Boleh Edit ✍️):
Hasilkan HTML robot simulator. Paparkan grid 5x5 dengan ikon robot. Butang arah (atas, bawah, kiri, kanan) kawal pergerakan robot. Warna tema: kelabu, biru neon, putih. Be very creative.

Idea 57: Permainan Teka Simbol Elektronik

Kuiz mengenal simbol asas elektronik (resistor, LED, bateri).

Prompt (Boleh Edit ✍️):
Bina HTML kuiz simbol elektronik. Paparkan 5 simbol elektronik. Murid pilih nama betul daripada 4 pilihan. Warna tema: oren, biru, putih. Be very creative.

Idea 58: Enjin Roket Mini

Simulasi mudah roket berlepas. Sesuai untuk topik fizik daya dan gerakan.

Prompt (Boleh Edit ✍️):
Hasilkan HTML simulasi roket. Paparkan roket di bawah skrin. Klik 'Launch' → roket naik ke atas dengan animasi. Warna tema: hitam angkasa, merah api, biru. Be very creative.

Idea 59: Pembina Algoritma Mudah

Webapps untuk murid bina algoritma dengan susunan langkah. Sesuai untuk asas programming.

Prompt (Boleh Edit ✍️):
Bina HTML pembina algoritma. Murid susun blok teks (Langkah 1, Langkah 2, Langkah 3). Klik 'Run' → papar langkah mengikut susunan. Warna tema: ungu pastel, putih, kuning ceria. Be very creative.

Idea 60: Visualizer Jadual Sifir

Webapps visual untuk menolong murid menghafal sifir dengan animasi garis dan titik.

Prompt (Boleh Edit ✍️):
Hasilkan HTML visualizer sifir. Input nombor sifir (contoh: 2, 3, 4). Paparkan animasi titik dan garis mengikut sifir. Warna tema: hijau cerah, biru, putih. Be very creative.

🗣️ Kategori 7: Kolaborasi & Komunikasi

Idea 61: Papan Idea Digital (Brainstorming)

Webapps papan idea untuk aktiviti brainstorming. Murid boleh tambah nota ringkas ke papan secara interaktif.

Prompt (Boleh Edit ✍️):
Bina HTML papan idea digital. Paparkan ruang kosong + butang 'Tambah Nota'. Murid boleh tambah nota dalam kotak warna-warni. Warna tema: kuning pastel, biru muda, hijau lembut. Be very creative.

Idea 62: Voting & Polling Interaktif

Alat undian untuk murid memilih jawapan atau pendapat. Sesuai untuk perbincangan kelas.

Prompt (Boleh Edit ✍️):
Hasilkan HTML voting tool. Sediakan 3 pilihan jawapan. Apabila murid klik → papar jumlah undi dalam carta bar. Warna tema: biru, hijau cerah, putih. Be very creative.

Idea 63: Borang Peer Assessment

Borang penilaian rakan sebaya. Murid nilai rakan berdasarkan kriteria mudah.

Prompt (Boleh Edit ✍️):
Bina HTML borang peer assessment. Sediakan 5 item dengan skala 1–5. Klik submit → papar skor keseluruhan. Warna tema: oren lembut, putih, biru muda. Be very creative.

Idea 64: Borang Refleksi Murid

Webapps borang refleksi selepas kelas. Murid boleh pilih emoji atau taip jawapan ringkas.

Prompt (Boleh Edit ✍️):
Hasilkan HTML refleksi murid. Sediakan pilihan emoji mood + ruang komen. Paparkan mesej 'Terima kasih' selepas submit. Warna tema: hijau pastel, putih, kuning ceria. Be very creative.

Idea 65: Ruang Chat Simulasi (Role Play)

Webapps simulasi chat untuk latihan bahasa atau role play. Murid taip mesej dan sistem balas ringkas.

Prompt (Boleh Edit ✍️):
Bina HTML chat simulator. Paparkan ruang mesej + input teks. Apabila murid taip → mesej dipaparkan di skrin bersama balasan automatik. Warna tema: biru muda, kelabu, putih. Be very creative.

Idea 66: Kalendar Aktiviti Kelas

Webapps kalendar ringkas untuk memaparkan aktiviti kelas. Guru boleh tambah acara manual.

Prompt (Boleh Edit ✍️):
Hasilkan HTML kalendar aktiviti kelas. Paparkan grid kalendar bulan semasa. Guru boleh tambah acara ke tarikh tertentu. Warna tema: biru langit, putih, hijau muda. Be very creative.

Idea 67: Senarai Semak Tugasan Murid

Alat untuk murid menanda tugasan yang sudah siap. Sesuai untuk PdPc berasaskan projek.

Prompt (Boleh Edit ✍️):
Bina HTML senarai semak tugasan. Sediakan 5 item tugasan. Apabila murid klik kotak, tandakan siap. Warna tema: hijau cerah, putih, oren pastel. Be very creative.

Idea 68: Borang Jurnal Harian Digital

Webapps untuk murid menulis jurnal harian ringkas. Sesuai untuk refleksi kendiri.

Prompt (Boleh Edit ✍️):
Hasilkan HTML jurnal digital. Paparkan ruang tarikh + kotak teks untuk catatan. Selepas submit → papar mesej motivasi. Warna tema: ungu lembut, putih, biru muda. Be very creative.

Idea 69: Ruang Kolaborasi Kumpulan

Webapps papan kolaborasi untuk kerja berkumpulan. Murid boleh tambah kotak idea dengan warna kumpulan berbeza.

Prompt (Boleh Edit ✍️):
Bina HTML ruang kolaborasi. Paparkan papan kosong. Butang 'Tambah Idea' → kotak baru muncul dengan warna berbeza. Warna tema: biru, kuning ceria, hijau pastel. Be very creative.

Idea 70: Survey Mini (Yes/No/Maybe)

Alat survey cepat. Murid pilih Ya / Tidak / Mungkin. Hasil ditunjukkan dalam carta.

Prompt (Boleh Edit ✍️):
Hasilkan HTML mini survey. Paparkan 3 butang: Yes, No, Maybe. Klik → tambah kiraan dan papar graf bar. Warna tema: biru muda, oren lembut, hijau cerah. Be very creative.

💖 Kategori 8: Nilai, Sahsiah & Refleksi

Idea 71: Ujian Kecerdasan Pelbagai (MI)

Webapps kuiz untuk mengenal pasti kecerdasan pelbagai murid seperti muzik, kinestetik, logik, dan bahasa.

Prompt (Boleh Edit ✍️):
Bina HTML kuiz kecerdasan pelbagai. Sediakan 10 soalan mudah dengan pilihan jawapan. Kira skor dan papar kecerdasan dominan. Warna tema: biru pastel, hijau cerah, kuning lembut. Be very creative.

Idea 72: Ujian Gaya Belajar (VAK)

Webapps untuk mengenal pasti gaya belajar murid (Visual, Auditori, Kinestetik).

Prompt (Boleh Edit ✍️):
Hasilkan HTML kuiz gaya belajar. Sediakan 9 soalan dengan 3 pilihan (V, A, K). Kira jumlah skor dan papar gaya belajar dominan. Warna tema: ungu pastel, biru lembut, putih. Be very creative.

Idea 73: Puzzle Nilai Murni

Permainan padanan untuk nilai murni seperti jujur, amanah, bekerjasama.

Prompt (Boleh Edit ✍️):
Bina HTML puzzle nilai murni. Paparkan kad nilai → murid padankan dengan situasi. Jika betul → hijau, salah → merah. Warna tema: hijau muda, kuning cerah, biru lembut. Be very creative.

Idea 74: Refleksi Emosi Emoji

Webapps untuk murid pilih emoji yang mewakili emosi mereka hari itu.

Prompt (Boleh Edit ✍️):
Hasilkan HTML refleksi emosi. Paparkan 6 emoji (gembira, sedih, marah, teruja, letih, takut). Apabila murid klik, papar mesej motivasi. Warna tema: oren ceria, biru muda, putih. Be very creative.

Idea 75: Simulasi Dilema Moral

Permainan senario di mana murid pilih tindakan moral yang betul.

Prompt (Boleh Edit ✍️):
Bina HTML dilema moral interaktif. Paparkan situasi ringkas (contoh: jumpa dompet). Murid pilih tindakan → papar kesan positif/negatif. Warna tema: coklat lembut, hijau pastel, putih. Be very creative.

Idea 76: Aktiviti Kerjasama Digital

Webapps yang memerlukan dua murid klik butang bersama untuk capai objektif. Menekankan nilai kerjasama.

Prompt (Boleh Edit ✍️):
Hasilkan HTML game kerjasama. Paparkan dua butang 'Tekan Serentak'. Jika kedua-dua ditekan dalam masa 2 saat → papar mesej berjaya. Warna tema: biru, kuning ceria, hijau muda. Be very creative.

Idea 77: Puzzle IQ Mini

Permainan IQ mudah seperti susun nombor atau teka pola. Sesuai untuk latihan pemikiran kritis.

Prompt (Boleh Edit ✍️):
Bina HTML puzzle IQ. Paparkan grid nombor rawak → murid susun semula mengikut turutan. Paparkan mesej selesai apabila berjaya. Warna tema: biru gelap, putih, merah cerah. Be very creative.

Idea 78: Aktiviti Kinestetik Digital

Webapps yang memberi arahan pergerakan mudah kepada murid, contohnya lompat atau tepuk tangan. Sesuai untuk energizer.

Prompt (Boleh Edit ✍️):
Hasilkan HTML aktiviti kinestetik. Paparkan teks arahan rawak (contoh: Lompat 3 kali, Tepuk tangan). Setiap kali klik 'Next', papar arahan baharu. Warna tema: hijau neon, biru muda, kuning ceria. Be very creative.

Idea 79: Kuiz Akhlak & Sahsiah

Kuiz ringkas tentang akhlak dan sahsiah murid. Sesuai untuk Pendidikan Islam dan Moral.

Prompt (Boleh Edit ✍️):
Bina HTML kuiz akhlak & sahsiah. Sediakan 5 soalan objektif dengan 4 pilihan. Kira skor di akhir. Warna tema: hijau lembut, putih, biru pastel. Be very creative.

Idea 80: Permainan Muzik Ingatan

Permainan di mana murid menekan butang muzik dalam turutan yang sama dengan sistem. Sesuai untuk latihan memori.

Prompt (Boleh Edit ✍️):
Hasilkan HTML memory music game. Paparkan 4 butang warna dengan bunyi berbeza. Sistem mainkan turutan → murid ulang semula. Warna tema: merah, biru, hijau, kuning. Be very creative.

🎮 Kategori 9: Gamifikasi & Cerita Interaktif

Idea 81: Cerita Bercabang (Choose Your Path)

Webapps interaktif di mana murid pilih laluan cerita. Sesuai untuk pengajaran nilai, sejarah, atau sains.

Prompt (Boleh Edit ✍️):
Bina HTML cerita bercabang. Paparkan teks cerita + pilihan butang untuk laluan berbeza. Setiap pilihan bawa ke halaman cerita baru. Warna tema: biru muda, ungu pastel, putih. Be very creative.

Idea 82: Adventure Matematik

Permainan cerita pengembaraan di mana murid perlu jawab soalan matematik untuk mara ke peringkat seterusnya.

Prompt (Boleh Edit ✍️):
Hasilkan HTML adventure matematik. Paparkan cerita ringkas. Untuk mara, murid jawab betul soalan tambah/tolak/darab. Warna tema: hijau cerah, kuning, biru pastel. Be very creative.

Idea 83: Detektif Kosa Kata BI

Permainan misteri di mana murid jadi detektif. Untuk teruskan siasatan, mereka perlu jawab soalan vocabulary BI.

Prompt (Boleh Edit ✍️):
Bina HTML detective vocabulary game. Paparkan senario misteri. Soalan vocabulary Inggeris → jawab betul untuk teruskan. Warna tema: biru gelap, kelabu, putih. Be very creative.

Idea 84: Kisah Sang Kancil Interaktif

Cerita rakyat Sang Kancil dengan interaksi klik untuk pilih tindakan watak.

Prompt (Boleh Edit ✍️):
Hasilkan HTML kisah Sang Kancil. Paparkan teks cerita + pilihan tindakan. Klik tindakan → papar hasil (berjaya/gagal). Warna tema: hijau hutan, coklat tanah, biru langit. Be very creative.

Idea 85: Survival Sejarah (Tokoh/Peristiwa)

Permainan survival tentang peristiwa sejarah. Murid buat pilihan betul untuk terus hidup dalam cerita.

Prompt (Boleh Edit ✍️):
Bina HTML survival sejarah. Paparkan peristiwa sejarah → murid pilih tindakan. Pilihan betul = teruskan, salah = tamat. Warna tema: coklat, emas, putih. Be very creative.

Idea 86: Hero Sains (Selamatkan Planet)

Permainan di mana murid jadi hero sains yang perlu selamatkan bumi dengan menjawab soalan sains.

Prompt (Boleh Edit ✍️):
Hasilkan HTML hero sains game. Paparkan bumi terancam. Soalan sains → jawab betul untuk selamatkan planet. Warna tema: biru bumi, hijau, putih. Be very creative.

Idea 87: Pengembaraan Geografi

Cerita interaktif tentang pengembaraan menjelajah dunia. Murid jawab kuiz geografi untuk mara.

Prompt (Boleh Edit ✍️):
Bina HTML geography adventure. Paparkan peta dunia. Soalan geografi → jawab betul untuk teruskan perjalanan. Warna tema: biru laut, hijau tanah, putih. Be very creative.

Idea 88: Misteri Nilai Murni (Moral Game)

Permainan misteri di mana murid selesaikan kes dengan membuat pilihan berasaskan nilai murni.

Prompt (Boleh Edit ✍️):
Hasilkan HTML moral mystery game. Paparkan situasi misteri. Murid pilih tindakan berasaskan nilai murni. Warna tema: ungu pastel, kuning lembut, putih. Be very creative.

Idea 89: Journey Al-Quran (Sirah Interaktif)

Cerita interaktif perjalanan kisah Nabi atau sirah Islam. Sesuai untuk Pendidikan Islam.

Prompt (Boleh Edit ✍️):
Bina HTML sirah interaktif. Paparkan kisah ringkas dengan pilihan tindakan. Pilihan betul = nilai baik, salah = mesej pengajaran. Warna tema: hijau Islam, emas, putih. Be very creative.

Idea 90: Boardgame Digital Kelas

Webapps papan permainan digital. Murid gerakkan token mengikut dadu maya. Sesuai untuk ulangkaji pelbagai subjek.

Prompt (Boleh Edit ✍️):
Hasilkan HTML boardgame digital. Paparkan papan grid + token pemain. Butang 'Roll Dice' → token bergerak. Warna tema: biru cerah, merah jambu pastel, kuning ceria. Be very creative.

⏱️ Kategori 10: Alat PdPc Umum

Idea 91: Timer Kiraan Undur 2/5/10/15 minit

Webapps timer untuk aktiviti kelas. Guru boleh pilih masa 2, 5, 10, atau 15 minit.

Prompt (Boleh Edit ✍️):
Bina HTML timer countdown. Sediakan butang 2, 5, 10, dan 15 minit. Apabila masa tamat, papar mesej 'Masa Tamat!'. Warna tema: biru muda, hijau cerah, putih. Be very creative.

Idea 92: Stopwatch + Catat Lap

Stopwatch digital dengan fungsi catat masa lap. Sesuai untuk eksperimen atau aktiviti sukan.

Prompt (Boleh Edit ✍️):
Hasilkan HTML stopwatch digital. Sediakan butang mula, berhenti, reset, dan lap. Paparkan senarai lap masa. Warna tema: oren ceria, putih, biru muda. Be very creative.

Idea 93: Spinner Nama Murid

Alat untuk pilih nama murid secara rawak. Sesuai untuk sesi soal jawab.

Prompt (Boleh Edit ✍️):
Bina HTML spinner nama murid. Input senarai nama murid → sistem pilih satu nama rawak. Paparkan nama dengan animasi pusingan. Warna tema: hijau muda, kuning cerah, putih. Be very creative.

Idea 94: Randomizer Kumpulan

Webapps untuk membahagikan murid kepada kumpulan secara rawak.

Prompt (Boleh Edit ✍️):
Hasilkan HTML group randomizer. Input senarai nama murid. Sistem bahagikan secara rawak kepada beberapa kumpulan. Warna tema: biru, merah jambu pastel, putih. Be very creative.

Idea 95: Kalkulator Ringkas

Kalkulator asas tambah, tolak, darab, dan bahagi. Sesuai untuk latihan matematik pantas.

Prompt (Boleh Edit ✍️):
Bina HTML kalkulator asas. Paparkan paparan skrin + butang nombor 0–9 dan operasi. Klik nombor → kira hasil. Warna tema: kelabu lembut, biru pastel, putih. Be very creative.

Idea 96: Papan Putih Kanvas

Papan putih digital untuk guru dan murid melakar idea. Sesuai untuk brainstorming.

Prompt (Boleh Edit ✍️):
Hasilkan HTML papan putih kanvas. Murid boleh melukis dengan tetikus/sentuhan. Butang reset untuk kosongkan kanvas. Warna tema: putih, biru muda, hijau lembut. Be very creative.

Idea 97: Senarai Kehadiran Digital

Alat semakan kehadiran murid. Guru boleh tandakan hadir/tidak hadir secara interaktif.

Prompt (Boleh Edit ✍️):
Bina HTML senarai kehadiran. Paparkan senarai nama murid dengan checkbox hadir/tidak hadir. Selepas tandakan, papar jumlah hadir. Warna tema: hijau pastel, biru muda, putih. Be very creative.

Idea 98: Generator Soalan Rawak

Webapps untuk menjana soalan rawak daripada senarai yang dimasukkan guru.

Prompt (Boleh Edit ✍️):
Hasilkan HTML random question generator. Input senarai 10 soalan. Klik 'Generate' → papar satu soalan rawak. Warna tema: kuning ceria, biru muda, putih. Be very creative.

Idea 99: Roda Keputusan (Wheel Spinner)

Permainan roda pusing untuk memilih pilihan secara rawak. Sesuai untuk aktiviti kelas.

Prompt (Boleh Edit ✍️):
Bina HTML wheel spinner. Sediakan 6 pilihan (contoh: Ya, Tidak, Mungkin, Cuba Lagi, Betul, Salah). Klik butang 'Spin' → roda berpusing → hasil rawak. Warna tema: merah, biru, hijau, kuning. Be very creative.

Idea 100: Carta Bar Interaktif (Auto Update Input)

Webapps carta bar yang akan berubah secara automatik berdasarkan input guru/murid. Sesuai untuk memvisualkan data mudah.

Prompt (Boleh Edit ✍️):
Hasilkan HTML interactive bar chart. Input nombor dalam kotak → carta bar berubah automatik. Gunakan animasi untuk perubahan bar. Warna tema: biru neon, hijau cerah, putih. Be very creative.

✨ Bonus: 100 Kata Kunci Prompt untuk Webapps Pendidikan Hebat

🎨 Reka Bentuk & Warna (1–20)

  1. gunakan warna pastel ceria
  2. warna tema vibrant sesuai untuk murid sekolah
  3. kombinasi biru muda, hijau lembut, kuning cerah
  4. gunakan gradient lembut untuk latar belakang
  5. palet warna konsisten (primary, secondary, accent)
  6. warna kontras tinggi untuk teks & butang
  7. gunakan ikon emoji berwarna-warni
  8. latar belakang bercorak simple (pattern ringan)
  9. tema warna ikut subjek (sains = biru, sejarah = coklat)
  10. tema warna Jalur Gemilang (merah, putih, biru, kuning)
  11. tema alam semula jadi (hijau daun, biru laut, coklat tanah)
  12. tema kartun kanak-kanak ceria
  13. gunakan neon color style
  14. gunakan dark mode mesra mata
  15. gunakan warna retro pastel 90-an
  16. gunakan warna minimalis hitam & putih elegan
  17. guna palet warna gradient pelangi
  18. gunakan skema warna cool vs warm untuk kontras
  19. gunakan bayang warna lembut di belakang kad
  20. be very colorful but not distracting

🖱️ UI/UX & Interaktiviti (21–40)

  1. paparkan dalam bentuk kad interaktif (card design)
  2. gunakan butang besar dengan border-radius bulat
  3. letakkan ikon pada setiap butang
  4. gunakan animasi hover pada butang
  5. gunakan efek bayang lembut (soft shadow)
  6. gunakan progress bar untuk tunjuk kemajuan
  7. gunakan animasi transition 0.3s smooth effect
  8. gunakan grid layout CSS
  9. gunakan flexbox responsif
  10. guna layout responsif untuk mobile & tablet
  11. gunakan tab navigasi untuk bahagikan soalan
  12. gunakan modal popup untuk mesej motivasi
  13. gunakan kotak dialog comel untuk jawapan
  14. gunakan border dotted/ dashed untuk style playful
  15. gunakan icon checkmark hijau & cross merah untuk feedback
  16. gunakan animasi fade-in untuk soalan baru
  17. gunakan sticky header untuk tajuk kuiz
  18. gunakan tombol slider untuk kawal parameter (contoh: sudut, masa)
  19. gunakan toggle switch comel untuk pilihan Ya/Tidak
  20. gunakan style minimal & clean design

🏆 Gamifikasi & Motivasi (41–60)

  1. tambah animasi confetti apabila murid berjaya
  2. paparkan bintang ⭐️ setiap kali jawab betul
  3. gunakan sistem markah & nyawa ❤️
  4. paparkan mesej motivasi (Bagus! Hebat!)
  5. tambah badge pencapaian digital
  6. tambah progress tracker visual
  7. gunakan suara notifikasi correct/wrong
  8. guna animasi getar untuk jawapan salah
  9. tambah papan skor ringkas (leaderboard manual)
  10. gunakan countdown timer untuk cabaran
  11. gunakan treasure chest sebagai ganjaran
  12. gunakan animasi “level up” bila naik peringkat
  13. gunakan sistem nyawa (heart) untuk percubaan terhad
  14. gunakan meter tenaga (energy bar)
  15. paparkan grafik trofi selepas tamat kuiz
  16. gunakan animasi kilau (glow) bila jawapan betul
  17. gunakan status bar (xp bar) untuk naik tahap
  18. gunakan wheel spinner untuk bonus soalan
  19. gunakan animasi kartun tepuk tangan bila menang
  20. be very fun and gamified

📱 Responsif & Mesra Murid (61–80)

  1. reka bentuk mobile-friendly
  2. gunakan meta viewport untuk auto resize
  3. butang cukup besar untuk jari murid (44px)
  4. gunakan font mesra murid (Poppins, Comic Neue, Nunito)
  5. teks isi minimum 18px
  6. gunakan white space secukupnya
  7. mesej ringkas & jelas (tanpa jargon teknikal)
  8. gunakan ikon audio 🔊 untuk sebutan perkataan
  9. gunakan simbol universal (✔, ❌, ⭐️, ❤️)
  10. gunakan contrast tinggi untuk murid rabun warna
  11. gunakan dark mode pilihan untuk kelas malam
  12. gunakan mod fullscreen untuk fokus murid
  13. gunakan responsive grid yang auto adjust ikut skrin
  14. elakkan scroll terlalu panjang
  15. gunakan butang “Next Question” besar & jelas
  16. gunakan navigation arrows ⬅️ ➡️ untuk soalan
  17. gunakan layout portrait + landscape friendly
  18. gunakan tema high-contrast untuk akses OKU
  19. gunakan arahan suara ringkas (Speech API)
  20. be very accessible and student-friendly

✨ Estetik & Kreatif (81–100)

  1. gunakan tema kartun comel kawaii
  2. gunakan gaya neon futuristik cyberpunk
  3. gunakan gaya doodle playful anak sekolah
  4. gunakan ilustrasi watercolour soft
  5. gunakan gaya minimalis modern
  6. gunakan style retro arcade 8-bit
  7. gunakan animasi bola melantun
  8. gunakan animasi cahaya bergerak
  9. gunakan animasi partikel bintang
  10. gunakan vector flat design icons
  11. gunakan 3D button style untuk fun look
  12. gunakan background parallax effect
  13. gunakan animasi loading comel (contoh: buku berputar)
  14. gunakan transisi slide-in untuk setiap soalan
  15. gunakan card flip animation untuk flashcards
  16. gunakan animasi gelombang (wave effect) pada header
  17. gunakan gaya chalkboard (papan hitam sekolah)
  18. gunakan tema buku nota (garisan kertas + font pensel)
  19. gunakan animasi pelangi selepas tamat kuiz
  20. be very creative, playful, and inspiring for students

👋 Penutup

Setiap guru adalah pencipta. Dengan bantuan teknologi AI, sesiapa sahaja mampu membina alat digital yang bermanfaat untuk murid. Ebook ini adalah titik permulaan untuk guru-guru meneroka potensi PdPc digital yang lebih luas. Jadikan ia sebagai inspirasi untuk bereksperimen, berinovasi dan berkongsi hasil dengan rakan pendidik lain.

Semoga ebook ini menjadi pemangkin kepada budaya pembelajaran yang lebih interaktif, kreatif dan berkesan. Mari kita bersama-sama melangkah ke arah pendidikan abad ke-21 yang lebih gemilang.