Logo SK Taman Desaminium Logo Unit ICT SKTD (TD ICT) Unit ICT
SK Taman Desaminium

Carta panduan untuk guru

Laman Buat Game

Dari topik DSKP ke game yang murid boleh main di telefon, dalam satu sesi. Pilih jenis game ikut kemahiran yang hendak dilatih, jana prompt, tampal dalam Gemini atau Claude, kemudian terbitkan secara percuma di Cloudflare. Ada akaun Canva? Canva Code terus beri link, tanpa deploy.

Gemini (Canvas)Claude (Artifact)Cloudflare Pages · percumaCanva Code · terus dapat linkTiada coding diperlukan

Tonton dahulu

Video penerangan

Semua langkah dalam laman ini, dari pilih topik hingga game hidup di internet. Termasuk jalan pintas Canva Code. Sekitar 1½ minit, dengan subtitle.

Aliran kerja

Enam langkah, ikut urutan. Anggaran masa untuk game pertama: sekitar 45 minit.

  1. 1Pilih topikSatu topik kecil + satu objektif dari RPH.5 min
  2. 2Pilih jenis gameIkut kemahiran: hafal, isih, susun, kira…2 min
  3. 3Jana promptIsi borang di bawah, salin prompt.5 min
  4. 4Bina & baikiTampal di Gemini/Claude, uji, minta pembetulan.15 min
  5. 5Simpan failMuat turun sebagai index.html dalam satu folder.3 min
  6. 6Deploy & kongsiUpload ke Cloudflare Pages, kongsi link / QR.10 min
Jalan pintas: Canva Code. Tampal prompt di Canva Code, tekan Publish website, terus dapat link. Langkah 5 dan 6 tidak perlu.Lihat cara →

Sebelum mula

Kenapa perlu deploy?

Deploy bermaksud meletakkan game cikgu di internet supaya ia ada alamat (link) sendiri, sama seperti laman web sekolah.

📌

Game yang siap dalam Gemini atau Claude ibarat lukisan dalam buku conteng cikgu: hanya cikgu yang nampak. Deploy pula ibarat menampalnya di papan kenyataan sekolah: sesiapa yang ada link boleh buka, di mana-mana, bila-bila masa.

Tanpa deploy: fail game hanya ada dalam komputer cikgu, telefon murid tidak dapat membukanya Tanpa deploy index.html Komputer cikgu sahaja ✕ ✕ ✕ Telefon murid tak boleh buka
Rajah 1A · Game masih di komputer cikgu (atau dalam akaun AI cikgu).
Dengan deploy: game berada di internet dengan link pages.dev, semua telefon murid dan papan pintar dapat membukanya Dengan deploy Cloudflare kuiz-suria.pages.dev Satu link untuk semua ✓ ✓ ✓ Telefon, tablet, papan pintar
Rajah 1B · Game di internet. Murid buka link atau imbas QR, terus main.

Main di mana-mana

Di kelas, di rumah, di telefon ibu bapa. Tiada pemasangan aplikasi.

Murid tak perlu akaun

Gemini dan Claude ada had umur. Dengan link sendiri, murid tak perlu log masuk apa-apa.

Link kekal

Tak hilang walaupun chat AI dipadam. Boleh guna semula tahun depan.

Percuma & bersih

Tiada iklan, tiada ruang chat. Murid nampak game sahaja, penuh skrin.

“Boleh tak kongsi terus link dari Gemini atau Claude?”

Boleh untuk mencuba atau tunjuk kepada rakan guru. Tetapi untuk murid, link sebegitu mungkin meminta log masuk, memaparkan ruang chat AI, dan bergantung pada akaun peribadi cikgu. Deploy di Cloudflare memberi game itu rumah sendiri.

Langkah 2Carta pemilihan

Kemahiran apa yang murid perlu latih?

Mula dari kemahiran, bukan dari jenis game. Tekan Guna jenis ini dan borang prompt akan diisi automatik.

Langkah 3Penjana prompt

Isi borang, salin prompt

Prompt dikemas kini serta-merta. Contoh sudah diisi; tukar kepada topik cikgu sendiri.

Ciri tambahan

Prompt untuk ditampal


      
Tampal di Gemini (pilih Canvas), Claude atau Canva Code.

    

  






  

    
Langkah 4–5Bina, uji, simpan

    
Gemini atau Claude: dua-dua boleh

    
Mahu terus dapat link tanpa simpan fail dan deploy? Guna Canva Code (bahagian seterusnya).

  

  

    

      
Gemini

      

        
          Ilustrasi skrin Gemini: ruang chat di kiri dengan butang Canvas, game dipaparkan di panel Canvas sebelah kanan
          
          
          
          
          gemini.google.com
          
          
          
          
          Tampal prompt di sini…
          Canvas
          A
          
          
          Kuiz Suria
          Preview
          Code
          Share ⤴
          B
          C
          
          🪐 Planet terdekat dengan Matahari?
          Utarid
          Zuhrah
          Bumi
          Marikh
        
        
Rajah 2 · Ilustrasi skrin Gemini (bukan tangkapan skrin sebenar).

      

      
    
        
  • ATekan Canvas, kemudian tampal prompt dan hantar.
    • 
        
  • BPreview: main dan uji game di sini.
    • 
        
  • CShare / Export atau tab Code untuk ambil kod.
    • 
      

      
    
        
  1. Buka gemini.google.com (akaun Google / DELIMa).
    2. 
        
  2. Dalam kotak mesej, tekan Canvas sebelum hantar prompt.
    3. 
        
  3. Game dipaparkan di panel kanan. Tekan Preview untuk main.
    4. 
        
  4. Siap? Gunakan butang Share / Export atau tab Code → salin semua kod.
    5. 
      

    

    

      
Claude

      

        
          Ilustrasi skrin Claude: ruang chat di kiri, game dipaparkan sebagai Artifact di kanan dengan butang Copy dan Download
          
          
          
          
          claude.ai
          
          
          📄 Kuiz Sistem SuriaArtifact · klik untuk buka
          
          Tampal prompt di sini…
          ↑
          A
          
          Kuiz Sistem Suria
          Copy
          ↓ Save
          B
          
          🚀 Kuiz Sistem Suria
          ▶ Main
        
        
Rajah 3 · Ilustrasi skrin Claude (bukan tangkapan skrin sebenar).

      

      
    
        
  • ATampal prompt dan hantar. Game terus dibina.
    • 
        
  • BCopy kod atau Download fail dari penjuru artifak.
    • 
      

      
    
        
  1. Buka claude.ai dan log masuk.
    2. 
        
  2. Tampal prompt terus dan hantar.
    3. 
        
  3. Game muncul sebagai Artifact di panel kanan, terus boleh dimain.
    4. 
        
  4. Siap? Tekan menu artifak → Download, atau tab Code → Copy.
    5. 
      

    

  

  

    

      
        Cara simpan yang betul: folder kuiz-sistem-suria mengandungi fail index.html. Contoh salah: index.html.txt, nama fail lain, atau fail tanpa folder
        
        
        ✓ BETUL
        
        kuiz-sistem-suria/
        
        
        </>
        index.html
        Satu folder, satu fail index.html
        
        ✕ SALAH
        
          
          index.html.txtmasih .txt
          
          Kuiz Suria.htmlnama lain
          
          Desktop/index.htmltiada folder
        
      
      
Rajah 4 · Cara simpan fail sebelum upload.

    

    
Simpan sebagai index.html. Jika menyalin kod: Windows guna Notepad → Save As → jenis All Files → nama index.html. Mac guna TextEdit → Format → Make Plain Text dahulu. Letak fail itu seorang diri dalam satu folder, contoh kuiz-sistem-suria. Nama mesti tepat index.html, huruf kecil: itulah halaman pertama yang dibuka bila murid tekan link.

  


  
Prompt pembaikan yang selalu digunakan

  






  

    
Pilihan CJalan pintas

    
Canva Code: bina dan terus dapat link

    
Canva Code membina game daripada prompt yang sama, kemudian menerbitkannya sebagai laman web. Tiada fail untuk disimpan, tiada upload ke Cloudflare. Ikut label kuning A B.

  

  

    

      
Gemini / Claude + Cloudflare

      
    
        
  • Link: nama-game.pages.dev
    • 
        
  • Perlu simpan index.html dan upload (Langkah 5–6)
    • 
        
  • Fail game ada dalam simpanan cikgu sendiri
    • 
      

    

    

      
Canva Code paling cepat

      
    
        
  • Link: nama-akaun.my.canva.site/nama-game
    • 
        
  • Terus Publish website, tiada muat turun atau upload
    • 
        
  • Game kekal dalam akaun Canva cikgu; ubah dan Publish semula bila perlu
    • 
      

    

  

  
    
    
  1. C1
    Buka Canva, pilih Code
    Log masuk Canva (akaun guru / DELIMa). Di laman utama, A tekan ikon Code (Create new).
    Rujuk Rajah C1
    
      
    Laman utama Canva dengan ikon Code ditanda
    Rajah C1 · Laman utama Canva.
    2. 
    
  2. C2
    Tampal prompt, hantar
    A Tampal prompt dari penjana prompt dalam kotak Describe your idea, kemudian hantar.
    Rujuk Rajah C2
    
      
    Editor Canva Code kosong dengan kotak Describe your idea ditanda
    Rajah C2 · Editor Canva Code.
    3. 
    
  3. C3
    Jawab soalan Canva AI
    Canva AI kadang-kadang bertanya dahulu, contohnya skop soalan. A Pilih jawapan yang sesuai dan tunggu Preparing everything… selesai.
    Rujuk Rajah C3
    
      
    Chat Canva AI bertanya skop soalan kuiz, jawapan guru ditanda
    Rajah C3 · Canva AI bertanya.
    4. 
    
  4. C4
    Uji, kemudian Publish website
    Game muncul di sebelah kanan. A Tekan Preview dan main sampai habis. Perlu ubah? Taip permintaan dalam kotak chat (guna prompt pembaikan).
    B Bila puas hati, tekan Publish website.
    Rujuk Rajah C4
    
      
    Game kuiz siap dalam editor Canva, butang Preview dan Publish website ditanda
    Rajah C4 · Game siap dalam Canva.
    5. 
    
  5. C5
    Namakan alamat, tekan Publish
    A Di Subpath, taip nama pendek: huruf kecil dan sengkang, contoh kuiz-wang-tahun-4. Alamat utama (Site address) ikut akaun Canva cikgu.
    B Tekan Publish.
    Rujuk Rajah C5
    
      
    Panel Website: medan Subpath dan butang Publish ditanda
    Rajah C5 · Panel Website.
    6. 
    
  6. C6
    Game sudah live
    A Tekan View your website untuk buka game, kemudian salin link dari bar alamat.
    Customize your domain tidak perlu; abaikan sahaja.
    Rujuk Rajah C6
    
      
    Mesej Your website is now live dengan pautan View your website ditanda
    Rajah C6 · Mesej “now live”.
    7. 
    
  7. C7
    Uji dan kongsi
    A Inilah link game cikgu. Buka di telefon sendiri dahulu, kemudian kongsi di Google Classroom / WhatsApp atau jana kod QR.
    Semak senarai semak sebelum kongsi dengan murid.
    Rujuk Rajah C7
    
      
    Kuiz Matematik Tahun 4 Wang dibuka di pelayar pada alamat my.canva.site, bar alamat ditanda
    Rajah C7 · Contoh sebenar: kuiz wang di sktdplus.my.canva.site
    8. 
  

  
Perlu tahu: link Canva bergantung pada design dalam akaun Canva cikgu. Jika design itu dipadam atau dinyahterbit (unpublish), link akan berhenti. Ciri Canva Code juga mungkin berbeza ikut jenis akaun Canva.






  

    
Langkah 6Deploy

    
Terbitkan di Cloudflare Pages

    
Percuma, tiada iklan, link kekal. Cara Direct Upload: upload folder sahaja, tidak perlu GitHub. Gambar di bawah ialah tangkapan skrin sebenar; ikut label kuning A B.

    
Sudah guna Canva Code? Langkau bahagian ini; game cikgu sudah ada link.

  

  
    
    
  1. 6.1
    Daftar akaun percuma
    Pergi ke dash.cloudflare.com → Sign up dengan emel. Sahkan emel. Sekali sahaja.
    2. 
    
  2. 6.2
    Buka Workers & Pages
    A Tekan Workers & Pages di menu kiri (di bawah Compute).
    B Tak jumpa? Taip Workers dalam kotak Quick search.
    Rujuk Rajah 5
    
      
    Menu kiri Cloudflare dengan Workers & Pages dan Quick search ditanda
    Rajah 5 · Menu kiri Cloudflare.
    3. 
    
  3. 6.3
    Tekan Create application
    A Butang biru di penjuru kanan atas.
    Rujuk Rajah 6
    
      
    Halaman Workers & Pages dengan butang Create application ditanda
    Rajah 6 · Halaman Workers & Pages.
    4. 
    
  4. 6.4
    Tekan “Continue to Pages”
    A Pautan kecil di bawah sekali. Jangan pilih GitHub atau pilihan lain dalam kotak.
    Rujuk Rajah 7
    
      
    Skrin Create an app dengan pautan Continue to Pages di bawah ditanda
    Rajah 7 · Skrin “Create an app”.
    5. 
    
  5. 6.5
    Pilih Drag and drop your files
    A Tekan Get started pada kotak kedua (ikon awan).
    Rujuk Rajah 8
    
      
    Skrin Get started dengan butang Get started untuk Drag and drop your files ditanda
    Rajah 8 · Skrin “Get started”.
    6. 
    
  6. 6.6
    Namakan projek
    A Taip nama: huruf kecil dan sengkang sahaja, contoh kuiz-sistem-suria. Nama ini jadi alamat game: kuiz-sistem-suria.pages.dev
    B Tekan Create project.
    Rujuk Rajah 9
    
      
    Medan Project name dan butang Create project ditanda
    Rajah 9 · Beri nama projek.
    7. 
    
  7. 6.7
    Upload folder game
    A Seret folder ke dalam kotak bergaris, atau klik perkataan folder.
    Rujuk Rajah 10
    
      
    Kotak upload Cloudflare: Drag in or click to upload a file or folder
    Rajah 10 · Kotak upload.
    8. 
    
  8. 6.8
    Pilih folder, tekan Upload
    Cari folder game cikgu (contoh kuiz-sistem-suria, rujuk Rajah 4). Pilih folder itu, jangan buka ke dalamnya.
    A Tekan Upload.
    Rujuk Rajah 11
    
      
    Tetingkap pilih folder pada Mac dengan butang Upload ditanda
    Rajah 11 · Tetingkap pilih folder (Mac). Nama fail peribadi dikaburkan.
    9. 
    
  9. 6.9
    Semak fail, tekan Deploy site
    A Pastikan senarai menunjukkan folder dan index.html di dalamnya, dengan tanda ✓ biru.
    B Tekan Deploy site di bawah kanan.
    Rujuk Rajah 12
    
      
    Fail berjaya dimuat naik: folder site dengan index.html, dan butang Deploy site ditanda
    Rajah 12 · Fail berjaya dimuat naik.
    10. 
    
  10. 6.10
    Berjaya! Ini link game cikgu
    Skrin “Success!” muncul dalam beberapa saat.
    A Inilah link game cikgu. Klik untuk buka. Jika keluar ralat, tunggu 1–2 minit dan muat semula.
    Rujuk Rajah 13
    
      
    Skrin Success dengan link buatgame.pages.dev ditanda
    Rajah 13 · Skrin Success dan link game.
    11. 
    
  11. 6.11
    Uji dan kongsi
    A Game kini hidup di alamat sendiri. Buka link di telefon sendiri dahulu dan main sampai habis.
    Kemudian kongsi di Google Classroom / WhatsApp kelas, atau jana kod QR (Chrome: ikon kongsi → QR code) untuk ditayang di skrin.
    Rujuk Rajah 14
    
      
    Game Pulau Tatabahasa dibuka di pelayar
    Rajah 14 · Contoh sebenar: game Pulau Tatabahasa, kini di pulau-tatabahasa.pages.dev
    12. 
    
  12. 6.12
    Nak kemas kini?
    Workers & Pages → buka projek → Create new deployment → upload folder baharu. Link kekal sama, murid tak perlu link baharu.
    13. 
  






  

    
Sebelum kongsi dengan murid

    
Senarai semak

    
AI boleh tersilap fakta dengan yakin. Cikgu tetap pakar isi kandungan.