Dalam panduan ini
Mulakan dengan satu kemahiran
BBM interaktif tidak perlu bermula sebagai aplikasi besar. Pilih satu kemahiran, satu jenis aktiviti dan satu bentuk maklum balas dahulu. Contohnya, murid menjawab tiga soalan tambah dan melihat soalan yang perlu dicuba semula. Cikgu boleh menyemak setiap jawapan sebelum memperluas aktiviti.
Bezakan tujuan pembelajaran daripada hiasan. Animasi dan bunyi boleh menjadi sebahagian daripada pengalaman, tetapi murid mesti tahu apa yang perlu dibuat, apa yang berlaku selepas menjawab dan bagaimana hendak membetulkan kesilapan. Bahan yang menarik tetapi mengelirukan tidak menyelesaikan masalah pengajaran.
Contoh dalam panduan ini ialah latihan tambah ringkas untuk ilustrasi. Ia bukan soalan rasmi, bukan rekod kemajuan murid dan bukan sebahagian daripada bank soalan premium Arena Ilmu. Cikgu perlu menentukan kesesuaiannya untuk kelas sendiri.
Tulis spesifikasi kecil sebelum meminta kod
Sediakan tiga perkara: soalan dan jawapan yang telah disemak, tindakan yang boleh dibuat murid, serta maklum balas yang patut muncul. Apabila maklumat ini sudah jelas, lebih mudah mengesan sama ada kod yang dijana menepati kehendak cikgu.
- Kandungan: Tetapkan tiga soalan dan jawapan yang betul.
- Interaksi: Murid memilih satu jawapan bagi setiap soalan dan menekan Semak jawapan.
- Maklum balas: Paparkan bilangan jawapan betul serta pembetulan yang boleh difahami.
- Had: Tiada borang nama, tiada penghantaran data dan tiada sambungan perkhidmatan luar.
- Akses: Label pilihan jelas, boleh digunakan dengan papan kekunci dan tidak bergantung pada warna sahaja.
Spesifikasi ini juga menjadi senarai ujian. Jika pembangun AI menambah login atau pangkalan data sedangkan cikgu tidak memintanya, buang fungsi itu daripada skop versi pertama.
Prompt prototaip BBM
Teks ini meminta prototaip, bukan jaminan kod yang selamat. Semak kod atau dapatkan bantuan orang yang boleh menyemaknya sebelum berkongsi kepada murid. Jangan tampal sebarang kunci API, token, kata laluan atau konfigurasi sulit.
Bina satu fail HTML prototaip kuiz tambah dalam lingkungan 20.
Soalan dan jawapan yang telah ditetapkan:
1. 2 + 3: jawapan 5; pilihan 4, 5, 6.
2. 7 + 2: jawapan 9; pilihan 8, 9, 10.
3. 6 + 7: jawapan 13; pilihan 12, 13, 14.
Gunakan HTML, CSS dan JavaScript biasa dalam satu fail, tanpa pustaka atau CDN.
Murid memilih jawapan, kemudian menekan Semak jawapan.
Jika belum lengkap, beritahu soalan yang belum dijawab; jangan terus mengira markah.
Paparkan skor daripada 3 dan pembetulan setiap soalan selepas semakan.
Sediakan butang Cuba semula yang mengosongkan jawapan dan maklum balas.
Gunakan label dan fieldset, fokus papan kekunci yang jelas serta status yang boleh dibaca pembaca skrin.
Jangan gunakan animasi berkelip, eval, permintaan rangkaian, storan data, login atau penjejakan.
Terangkan cara menguji fail dalam persekitaran percubaan dan senaraikan batasannya.Cuba contoh kecil di halaman ini
Di bawah ialah contoh BBM asal Teroka Ilmu yang menggunakan kandungan tetap dan telah disemak dari segi pengiraan. Ia tidak memanggil AI dan tidak menghantar jawapan ke pelayan. Skor hilang apabila halaman dimuat semula; ia bukan rekod pentaksiran sekolah.
Gunakan contoh ini untuk mengenal pasti interaksi yang cikgu mahu daripada prototaip sendiri. Cuba satu jawapan salah, biarkan satu soalan kosong dan gunakan butang Cuba semula. Bahan yang baik patut mengendalikan ketiga-tiga keadaan dengan jelas.
Contoh BBM: kuiz tambah
Contoh tetap tanpa API AI. Jawapan tidak dihantar atau disimpan.
Uji sebelum dikongsi
- Jawapan: Jawab semua soalan dengan betul. Kemudian pilih jawapan salah bagi setiap soalan secara bergilir. Pastikan kiraan dan pembetulan betul.
- Input kosong: Tekan Semak sebelum menjawab. Murid patut menerima arahan yang membantu, bukan keputusan yang mengelirukan.
- Ulang mula: Pastikan pilihan lama, markah dan pembetulan dipadam daripada paparan apabila Cuba semula ditekan.
- Telefon: Periksa bahawa pilihan tidak terpotong dan butang boleh ditekan tanpa perlu mengezum.
- Papan kekunci: Bergerak menggunakan Tab, pilih pilihan dan tekan butang. Pastikan fokus kelihatan.
- Privasi: Pastikan tiada permintaan nama murid, akses kamera atau penghantaran data yang tidak diperlukan.
Jangan buka kod yang belum disemak dalam persekitaran kerja yang mengandungi akaun atau maklumat sensitif. Jika prototaip cuba menghubungi domain luar, fahami sebabnya sebelum meneruskan. Minta versi yang lebih kecil jika cikgu tidak dapat menyemak fungsi yang ditambah.
Baiki satu perkara pada satu masa
Selepas asas berfungsi, pilih satu penambahbaikan: pilihan jawapan lebih besar, penerangan pembetulan yang lebih mudah atau lebih banyak soalan pada kemahiran yang sama. Jangan menambah papan kedudukan, login, bunyi dan penyimpanan markah serentak sebelum asas diuji.
Jika mahu bahan bercetak sebagai pilihan sokongan, baca lembaran kerja dengan AI. Untuk memperkemas arahan sebelum meminta kod, rujuk contoh prompt AI untuk guru.
Langkah seterusnya
Catat satu masalah yang murid atau rakan guru temui ketika mencuba. Ubah berdasarkan masalah itu, bukan menambah ciri kerana nampak canggih. Matlamat pertama ialah bahan kecil yang jelas dan boleh digunakan, kemudian barulah berkembang kepada projek yang lebih lengkap.
Teroka Ilmu menyediakan kursus Vibe Coding untuk pembelajaran berpandu. Panduan awam serta contoh kecil di halaman ini kekal boleh digunakan tanpa pembelian. Semak penerangan produk sebelum memilih kursus.
Rujukan rasmi
Langkah seterusnya di Teroka Ilmu
Mahukan panduan membina projek? Lihat 12 modul video dan penerangan kursus Vibe Coding. Panduan awam ini boleh digunakan tanpa membeli kursus.
Lihat kursus Vibe Coding untuk Pendidik