July 20, 2026
Konten Digital Pendidikan Kesetaraan.
Cerita ikut sayembara konten pembelajaran interaktif Direktorat PNFI 2026 โ tiga bahan ajar digital untuk Paket B dan Paket C, dua di antaranya terpilih sebagai pemenang.
Biasanya lomba bahan ajar digital hanya terbuka untuk guru. Jadi waktu tahu ada sayembara konten pembelajaran yang boleh diikuti masyarakat umum, aku langsung tertarik โ akhirnya ada kesempatan ikut sendiri, bukan cuma jadi tim teknis di belakang layar.
Hasilnya tiga karya: dua atas namaku, satu atas nama istri. Semuanya dibangun dari nol dengan HTML, CSS, dan vanilla JavaScript โ dan dua karyaku menang: Lab Coding Blok dan Pasar Saham Virtual. ๐
Tentang Sayembaranya
Nama resminya panjang: Partisipasi Semesta dalam Penyusunan Konten Interaktif Muatan Pemberdayaan dan Keterampilan untuk Pendidikan Kesetaraan Tahun 2026, diselenggarakan oleh Direktorat Pendidikan Nonformal dan Pendidikan Informal (PNFI), Kemendikdasmen.
Tujuannya mengisi Ruang Murid di platform Rumah Pendidikan dengan konten interaktif untuk pendidikan kesetaraan โ Paket A, Paket B, dan Paket C. Beberapa poin pentingnya:
- Terbuka untuk semua kalangan, individu maupun tim: pendidikan kesetaraan, pendidikan formal, perguruan tinggi, komunitas, dunia usaha/industri, sampai masyarakat umum. Aku masuk kategori terakhir.
- Tiga jenis konten: Interaktif, Gim Edukasi, dan Lab Maya.
- Muatan, unit, dan subunit wajib dipilih dari daftar di panduan โ mulai dari pemberdayaan (misalnya kesadaran diri) sampai keterampilan seperti koding dan kecerdasan artifisial.
- Linimasa ketat: sosialisasi 3 Juni, pendaftaran 5โ26 Juni, penilaian sampai 7 Juli, pengumuman 8 Juli 2026.
- Penghargaan: 135 karya terpilih (35 Paket A, 40 Paket B, 60 Paket C), masing-masing mendapat piagam dan uang pembinaan. Semua peserta yang mengunggah karya mendapat sertifikat kepesertaan.
Syarat administrasinya juga agak unik: selain formulir, peserta harus punya akun Instagram pribadi yang tidak dikunci, mengikuti akun Direktorat PNFI, dan membuat publikasi keikutsertaan.
Aturan Teknis & Penilaian
Ketentuan teknisnya mirip lomba bahan ajar digital lain :
- Dikemas sebagai
.zipdenganindex.htmldi root, berupa Single Page Application tanpa redirect. - Tidak boleh ada aset atau URL eksternal; zip diusahakan tidak lebih dari 25 MB.
- Rasio 16:9, dengan struktur laman muka, panduan, aktivitas, dan indikator progres.
- Thumbnail 840 ร 472 px yang wajib mencantumkan target audiens “Kesetaraan”.
- Materi wajib memuat asesmen โ kuis, latihan, atau pertanyaan reflektif.
Rubriknya:
| Aspek | Bobot |
|---|---|
| Substansi (kesesuaian CP, muatan, akurasi, kedalaman, relevansi dengan kehidupan warga belajar) | 50% |
| Kreativitas | 25% |
| Inspirasi | 15% |
| Kaidah kebahasaan | 10% |
Yang membedakan dari lomba untuk sekolah formal: sasarannya warga belajar โ remaja sampai dewasa, dengan latar belakang yang sangat beragam, dan banyak yang belajar lewat HP. Panduannya sampai menekankan pendekatan andragogi. Jadi desainnya harus mandiri, praktis, dekat dengan kehidupan sehari-hari, dan ramah layar kecil.
Karya 1 โ Lab Coding Blok Dasar Logika
Lab Maya ยท Paket B (Fase D) ยท Keterampilan Koding & Kecerdasan Artifisial โ Berpikir Komputasional. ๐ Terpilih sebagai pemenang.
Idenya: mengajarkan logika pemrograman sebelum warga belajar menyentuh sintaks. Mereka menyusun blok bergambar seperti puzzle โ Maju, Belok, Ulangi N, Ulangi Selamanya, Jika-Maka, Jika-Tidak, Variabel, Tampilkan, Berhenti โ lalu menjalankan programnya dan melihat animasinya.
- 5 level, 17 tantangan, dari memandu robot melewati rintangan sampai memanen kebun otomatis dan memprogram lampu lalu lintas.
- Blok bersarang โ blok bisa dimasukkan ke dalam loop dan kondisi.
- Kesalahan diperlakukan sebagai “coba lagi”, bukan hukuman.
- Skor otomatis, lencana, dan jurnal refleksi yang tersimpan di
localStorage.
Bagian paling reinventing the wheel di sini adalah engine-nya: model program berbentuk pohon blok, lalu interpreter kecil yang mengeksekusi dan menganimasikannya langkah demi langkah. Kodenya dipisah jadi app.js (UI), engine.js (eksekusi), dan levels.js (data level), supaya tantangan bisa ditambah tanpa menyentuh runtime.
Masalah terbesar justru drag-and-drop di HP. HTML5 Drag and Drop API tidak ramah layar sentuh, jadi aku tambahkan mode tap-to-pick, tap-to-place dan tampilan tab Blok / Program / Simulasi untuk layar kecil.
Detail proyek: Lab Coding Blok .
Karya 2 โ Gim Literasi Kesehatan Gizi Seimbang
Gim Edukasi ยท Paket B (Fase D) ยท Kesadaran Diri โ Pengendalian Diri. Karya ini didaftarkan atas nama istri.
Konsepnya “Isi Piringku” versi gim: warga belajar menyeret makanan dari rak ke zona piring yang sesuai, sementara kalori, protein, karbohidrat, lemak, dan serat ter-update langsung dalam bentuk grafik batang.
- 5 level, 14 tantangan, dengan stepper yang membuka tantangan berikutnya setelah yang sekarang selesai.
- 40+ bahan makanan dengan data dari TKPI Kemenkes RI, mengacu ke AKG Permenkes No. 28/2019.
- Validasi kategori ketat โ makanan hanya bisa masuk ke zona yang sesuai. Kalau salah, kartunya bergoyang merah dan muncul pesan edukatif.
- Beberapa level punya anggaran belanja, jadi pilihan gizi harus seimbang dengan isi dompet.
- 3 lencana dan jurnal refleksi dua pertanyaan tiap level.
Keputusan penting di sini: data makanan dipisah di data.js, sehingga angka gizi di gim benar-benar berasal dari tabel resmi, bukan angka karangan. Untuk sayembara yang bobot substansinya 50%, akurasi data seperti ini bukan pilihan, tapi keharusan.
Detail proyek: Gizi Seimbang .
Karya 3 โ Pasar Saham Virtual: Investasi Pertamamu
Lab Maya ยท Paket C (Fase F) ยท tema kewirausahaan & literasi keuangan. ๐ Terpilih sebagai pemenang.
Warga belajar Paket C umumnya dewasa muda yang sebentar lagi masuk dunia kerja. Di simulasi ini mereka mendapat modal virtual Rp 10.000.000 untuk dibagi ke saham, reksa dana pasar uang, emas, dan kas, lalu menghadapi 5 ronde skenario berita ekonomi Indonesia. Semua instrumen dan harganya fiktif โ ini simulasi belajar, bukan saran investasi.
Materinya dibagi lima sesi:
- Tabungan vs investasi โ lengkap dengan kalkulator inflasi.
- Kenalan dengan instrumen โ kartu instrumen dan kuis profil investor.
- Simulasi inti โ slider alokasi, grafik SVG, dan berita per ronde.
- Analisis portofolio โ apa yang berhasil, apa yang tidak.
- Langkah investasi nyata โ termasuk waspada investasi bodong.
Ada juga 8 lencana berbasis perilaku. Contohnya, salah satu lencana hanya terbuka kalau kamu memegang emas minimal 15% tepat di ronde ketika rupiah melemah โ jadi yang dinilai adalah keputusan, bukan sekadar hafalan.
Secara teknis, ini yang paling berlapis:
- SCORM 1.2 โ skor tiap sesi digabung ke
cmi.core.score.raw, lulus di nilai 70 ke atas. Kalau tidak dijalankan di LMS, tracking SCORM dilewati tanpa error. - PWA dengan Service Worker cache-first, supaya bisa dipakai offline setelah dibuka sekali.
- Nol library eksternal โ satu objek state global di
localStorage, routing layar manual, engine kuis bersama, dan grafik SVG buatan sendiri.
Konsekuensinya: karena ada Service Worker, proyek ini tidak bisa dibuka lewat file:// dan harus lewat server lokal.
Detail proyek: Pasar Saham Virtual .
Di Luar Kode
Seperti lomba bahan ajar lain, kodenya cuma separuh cerita. Tiap karya juga butuh:
- Modul ajar โ tujuan pembelajaran, alur kegiatan, dan asesmen.
- Thumbnail sesuai spesifikasi.
- Pakta integritas dan surat pernyataan serah terima hak guna bahan ajar, satu set per karya.
Menulis modul ajar ternyata sangat membantu. Begitu tujuan pembelajarannya tertulis jelas, keputusan desain di kode jadi lebih mudah: fitur yang tidak mendukung tujuan belajar, dibuang.
Hasilnya
Pengumuman keluar, dan dua karya menang:
- ๐ Lab Coding Blok Dasar Logika (Paket B)
- ๐ Pasar Saham Virtual: Investasi Pertamamu (Paket C)
Total uang pembinaan yang aku terima Rp 8 juta (dipotong pajak), plus piagam penghargaan. Untuk karya yang awalnya cuma iseng karena “akhirnya boleh ikut sendiri”, hasil ini jauh di atas ekspektasi.
Yang menarik, dua karya yang menang sama-sama Lab Maya โ simulasi tempat warga belajar bereksperimen sendiri, bukan sekadar membaca materi. Sepertinya itu memang yang dicari: konten yang membuat orang melakukan, bukan cuma menghafal.
Yang Aku Pelajari
- Mobile-first bukan slogan. Target penggunanya banyak belajar lewat HP, jadi drag-and-drop harus punya alternatif sentuh, tombol harus besar, dan panel harus bisa dipisah per tab.
- Pisahkan data dari logika. Level, bank soal, dan data gizi di file terpisah membuat konten gampang diperiksa dan direvisi tanpa takut merusak engine.
- Feedback yang mengajar lebih baik daripada yang menghukum. Salah taruh makanan atau salah susun blok harus berakhir dengan penjelasan, bukan layar “Game Over”.
- Standar lama masih relevan. SCORM 1.2 dan Service Worker bukan teknologi baru, tapi mengintegrasikannya dari nol memberi pemahaman yang tidak didapat dari sekadar memakai library.
Setelah sayembaranya selesai, ketiganya aku rapikan dan masukkan ke koleksi One Day One Code . Detailnya bisa dilihat di halaman Lab Coding Blok , Gizi Seimbang , dan Pasar Saham Virtual .

Hey! I’m Fanny, the software engineer tending to this digital garden. You can read more about me, or subscribe by email.