Festival Biru Putih 2026.

Istriku guru IPS SMP. Akhir Agustus, surat edaran dari Direktorat SMP sampai ke sekolahnya: ada lomba bahan ajar digital untuk guru, namanya Festival Biru Putih 2026. Kategorinya gim edukasi, media interaktif, lab maya, dan video pembelajaran.

Dia paham materinya, aku paham cara bikin web. Jadi pembagian kerjanya kelihatan jelas dari awal: istri yang tahu apa yang harus diajarkan, aku bantu bagaimana itu jadi sesuatu yang bisa diklik, diseret, dan dimainkan murid.

Tentang Festival Biru Putih

Festival Biru Putih diselenggarakan oleh Direktorat Sekolah Menengah Pertama, Kemendikdasmen, sebagai ruang apresiasi dan kolaborasi guru dan tenaga kependidikan SMP untuk menghasilkan karya digital pembelajaran.

Beberapa hal penting dari surat edaran dan panduannya:

• Peserta: guru/tenaga kependidikan aktif di SMP dengan NUPTK aktif. Inilah kenapa yang ikut adalah istri, bukan aku — aku cuma “tim teknis” di belakang layar.
• Empat kategori: Gim Edukasi, Media Interaktif, Lab Maya, dan Video Pembelajaran.
• Linimasa: sosialisasi Agustus 2026, pendaftaran & unggah karya Agustus–September, seleksi administrasi & penilaian Oktober, penetapan finalis November, lalu festival & apresiasi di minggu kedua November.
• Ketentuan umum: karya orisinal dan belum pernah dipublikasikan, informasinya valid, tanpa watermark, dan bebas dari unsur SARA, politik, maupun iklan.

Aturan Teknis yang Bikin Mikir

Bagian yang paling menarik buat aku justru ketentuan teknisnya. Untuk Gim Edukasi dan Lab Maya, karyanya dikumpulkan sebagai .zip dengan aturan seperti ini:

• Satu index.html di root — aplikasinya harus berupa Single Page Application, tidak boleh redirect ke halaman HTML lain.
• Tidak boleh ada aset atau URL eksternal. Semua harus ikut di dalam zip dan jalan offline.
• Rasio layar 16:9, tapi tetap harus bisa dipakai di laptop, tablet, dan smartphone.
• Performa: gim maksimal 5 detik waktu muat per level; lab maya maksimal 2 detik waktu respons untuk tiap interaksi.
• Tanpa plugin pihak ketiga — cukup HTML, CSS, dan JavaScript standar.
• Wajib ada panduan penggunaan (PDF) dan video demo maksimal 3 menit (MP4); total paket maksimal 150 MB, zip inti diusahakan tidak lebih dari 25 MB.
• Aset buatan AI wajib diberi keterangan dan disertai dokumen prompting-nya.

Buat developer yang terbiasa npm install dan tarik font dari CDN, aturan “tanpa URL eksternal” ini terasa seperti balik ke zaman dulu. Justru di situ serunya: semuanya harus dibangun dari nol dengan vanilla JS — reinventing the wheel dalam arti yang sebenarnya.

Rubrik Penilaian

Semua kategori memakai tiga aspek besar:

Artinya 60% nilai ada di materi, bukan di kode. Kode yang bagus tapi salah konsep tetap kalah. Di sinilah peran istri jauh lebih penting daripada aku.

Cara Kami Bekerja

Sebelum mulai ngoding, kami menyusun dulu daftar 30 ide karya IPS — sepuluh untuk gim edukasi, sepuluh media interaktif, sepuluh lab maya — lintas Geografi, Sejarah, Ekonomi, dan Sosiologi. Dari situ dipilih yang paling masuk akal dikerjakan.

Setiap karya lalu dipetakan ke ATP (Alur Tujuan Pembelajaran) IPS Fase D, supaya setiap interaksi di layar bisa ditelusuri ke Capaian Pembelajaran dan Tujuan Pembelajaran yang jelas. Tiap proyek juga punya satu dokumen acuan berisi aturan teknis, struktur alur, rubrik, dan definition of done — checklist yang harus hijau semua sebelum dikumpulkan.

Hasilnya tiga karya.

Karya 1 — Lab Mitigasi Bencana (Lab Maya)

IPS Geografi · Kelas VIII. Lab maya tentang potensi bencana dan mitigasinya, dikaitkan dengan posisi Indonesia di Ring of Fire.

Ada lima simulasi bencana: gempa bumi, tsunami, gunung meletus, banjir, dan kebakaran hutan. Alurnya dibuat empat langkah dengan indikator “Langkah x dari 4”, dan setiap langkah bisa dibuka ulang tanpa mengulang dari awal:

1. Pilih objek & kondisi — misalnya jenis bangunan dan jenis tanah untuk gempa, atau jarak KRB dan arah angin untuk gunung meletus.
2. Atur intensitas & jalankan simulasi — dampaknya muncul real-time: getaran, retakan, tingkat kerusakan.
3. Terapkan mitigasi & uji ulang — struktur tahan gempa, jalur evakuasi, tanggul, sekat bakar, dan lainnya — lalu bandingkan sebelum vs sesudah.
4. Penerapan & refleksi — pertanyaan studi kasus yang dikaitkan ke SDGs.

Tantangan terbesarnya adalah akurasi keilmuan. Modelnya disederhanakan untuk anak SMP, tapi tidak boleh menyesatkan: magnitudo naik berarti kerusakan naik, tanah lunak memperbesar guncangan, beton bertulang lebih tahan, gambut paling rawan terbakar. Satu keputusan desain yang sengaja: mitigasi selalu menurunkan dampak, karena pesan pembelajarannya adalah bahwa upaya mitigasi tetap bermanfaat, bahkan di kejadian yang parah.

Ilustrasi latar dan efek simulasinya digambar dengan SVG dan Canvas; foto thumbnail bencananya dari Wikimedia Commons dengan atribusi.

Detail proyek: Lab Mitigasi Bencana .

Karya 2 — Jelajah Nusantara (Gim Edukasi)

IPS Geografi · Kelas VII. Gim peta untuk materi keberagaman kondisi geografis Indonesia — ide nomor satu di daftar 30 ide tadi.

Ada dua mode:

• Single Player — misi pertama menyeret nama pulau ke lokasinya di peta, misi kedua kuis dengan tiga variasi soal: Tebak Lokasi, Pilihan Ganda, dan Benar/Salah, lengkap dengan timer dan kombo. Setiap jawaban disertai penjelasan, jadi murid tetap belajar walau salah.
• Multiplayer Elimination — ini favoritku. Layar ditampilkan di proyektor bersama kamera, murid berbaris dan memilih sisi: kiri = BENAR, kanan = SALAH. Setelah waktu habis, sisi yang benar menyala hijau dan yang salah merah; yang salah tereliminasi sampai tersisa satu pemenang.

Mode kamera ini sempat bentrok dengan aturan “buka langsung dari file”: browser hanya mengizinkan akses kamera di konteks aman (localhost/HTTPS). Solusinya, mode Single Player tetap jalan dengan klik dua kali index.html, sedangkan panduannya menjelaskan cara menjalankan mode multiplayer lewat python3 -m http.server.

Detail proyek: Jelajah Nusantara .

Karya 3 — Bebek IPS (Gim Edukasi)

IPS · Kelas VIII. Yang ini lahir dari nostalgia: Duck Hunt. Soal IPS muncul di panel, bebek-bebek terbang membawa pilihan jawaban, dan murid harus menembak bebek yang membawa jawaban benar — klik, ketuk, atau tekan tombol A–E.

• Tiga level dengan tingkat kognitif yang naik: mengingat & memahami, penerapan pada kasus, lalu analisis sebab-akibat.
• 20 soal per permainan, 3–4 soal dari tiap Tujuan Pembelajaran 3.1–3.6 (potensi SDA, harga & pasar, potensi Indonesia menjadi negara maju, interaksi sosial). Label TP-nya tampil di atas soal.
• 3 nyawa, skor 100 poin + 10 poin per detik tersisa, bonus combo, dan pengali level ×1, ×1,5, ×2. Level berikutnya terbuka setelah level sebelumnya tuntas.

Semua grafiknya — bebek, latar, HUD — digambar dengan kode di <canvas> bergaya pixel-art, dan efek suaranya dibangkitkan lewat Web Audio. Tidak ada satu pun gambar sprite, jadi paketnya kecil dan tetap tajam di layar berapa pun.

Satu jebakan yang ketahuan belakangan: font pixel-nya (Press Start 2P dan Pixelify Sans) masih dimuat dari Google Fonts. Itu melanggar aturan offline, jadi fontnya harus di-bundle lokal sebelum diunggah. Pelajaran kecil: aturan “tanpa URL eksternal” itu paling gampang dilanggar oleh hal-hal yang tidak terasa seperti aset.

Detail proyek: Bebek IPS .

Di Luar Kode

Ternyata kodenya cuma separuh pekerjaan. Paket pengumpulannya juga butuh:

• Panduan penggunaan untuk tiap karya — identitas karya, kaitan kurikulum, cara menjalankan, cara bermain, dan penjelasan teknis.
• Naskah video demo dengan timeline per detik supaya muat di bawah 3 menit, sambil tetap memperlihatkan minimal tiga interaksi bermakna.
• Keterangan aset & prompting AI — gambar cover dibuat dengan AI, jadi wajib diberi label dan disertai prompt-nya; foto dan peta dari Wikimedia Commons dicantumkan sumbernya.
• Surat pernyataan & integritas serta metadata tiap karya.

Yang Aku Pelajari

• Batasan itu melatih. Tanpa framework, tanpa CDN, tanpa aset eksternal — semua jadi Canvas, SVG inline, dan vanilla JS. Hasilnya justru ringan dan jalan di mana saja.
• Rubrik adalah spesifikasi. Rubrik penilaian aku perlakukan seperti requirements: setiap poin di rubrik harus punya padanan fitur yang bisa ditunjukkan.
• Akurasi mengalahkan efek. Animasi seismik yang keren tidak ada artinya kalau kesimpulan yang ditarik murid salah.
• Kolaborasi lintas bidang itu enak. Istri membawa kurikulum dan pengalaman mengajar, aku membawa kode. Diskusi “apakah ini benar secara konsep?” dan “apakah ini bisa dibuat?” berjalan bareng.

Sisanya tinggal menunggu penilaian. Apa pun hasilnya, tiga karya ini sudah jadi bahan ajar yang bisa langsung dipakai di kelas.

Lihat juga: Konten Digital Pendidikan Kesetaraan