Cara Mengunggah Media Interaktif HTML ke e-Ajar agar Nilai Siswa Tercatat

Media interaktif HTML adalah kuis, permainan, atau simulasi pembelajaran yang dibuat sebagai halaman web, biasanya satu berkas index.html beserta gambar dan suaranya. Agar bisa dipakai di kelas dengan nilai yang tercatat, media itu perlu diunggah ke tempat yang mengenali akun siswa, lalu mengirim skornya ke rekap guru. Artikel ini menjelaskan cara menyiapkan berkas, mengunggahnya, dan memastikan nilainya masuk, lengkap dengan tangkapan layar e-Ajar SiTuntas yang asli.

Langsung ke bagian tutorial:

• Membuat media dengan Generator Prompt Media
• Langkah unggah dari berkas sampai rekap (7 langkah bergambar)
• Memainkan media: tampilan siswa dan pratinjau guru
• Membaca Rekap Nilai
• AI di SiTuntas dan media interaktif: apa yang tersambung

Gambaran singkatnya juga ada di pratinjau interaktif Media HTML di halaman Terbaru.

Kenapa media HTML, bukan tautan biasa

Guru kini bisa membuat kuis atau permainan sederhana sendiri, baik dengan menulis kode maupun dengan bantuan asisten AI. Hasilnya sering berupa satu berkas HTML yang berjalan di peramban. Membagikannya sebagai tautan ke situs luar punya tiga kelemahan: siswa harus mengetik nama sendiri (sering salah atau dipalsukan), nilai tidak tercatat di mana pun selain tangkapan layar, dan guru tidak tahu siapa yang sudah mengerjakan.

Bila media diunggah ke sistem sekolah, ketiga hal itu bisa diselesaikan: nama siswa diambil dari akunnya, skor dikirim ke rekap, dan guru melihat status setiap siswa. Untuk gambaran jenis media interaktif secara umum, baca juga media pembelajaran interaktif: jenis, contoh, dan cara membuatnya.

Menyiapkan berkas media

Ada dua bentuk berkas yang lazim:

Beberapa kebiasaan yang membuat media lebih aman dan lancar:

• Simpan aset di dalam paket. Gambar dan suara sebaiknya ikut di dalam zip, bukan diambil dari situs lain.
• Hindari jendela peringatan bawaan peramban seperti alert, confirm, dan prompt. Pakai kotak pesan di dalam halaman.
• Jangan andalkan penyimpanan peramban untuk menyimpan kemajuan siswa antarsesi.
• Uji di HP. Sebagian besar siswa membuka media dari HP, jadi tombol perlu cukup besar dan teks tidak terpotong.

Bila memakai asisten AI untuk membuat media, susun perintahnya dari tujuan pembelajaran yang jelas. Contoh perintah untuk guru ada di contoh prompt AI untuk guru, dan cara merumuskan tujuan pembelajaran ada di tutorial tujuan pembelajaran ATP.

Contoh ide media per jenjang

Media interaktif tidak harus rumit. Permainan pendek lima sampai sepuluh menit dengan satu tujuan pembelajaran sering lebih berguna daripada media panjang yang sulit diselesaikan di HP.

Tentukan sejak awal apa yang dihitung sebagai skor dan berapa skor maksimalnya. Bila media memberi kesempatan mencoba ulang, putuskan apakah yang dinilai jawaban pertama atau jawaban terakhir, lalu tuliskan aturan itu di petunjuk media.

Cara media mengirim nilai

Media yang diunggah ke sistem sekolah perlu satu baris kode yang mengirim skor. Polanya umum dipakai di platform pembelajaran: media dijalankan di dalam bingkai (iframe) terpisah, lalu mengirim pesan ke halaman induk. Halaman induk yang sudah tahu siswa mana yang sedang membuka, lalu menyimpan nilainya. Dengan pola ini media tidak pernah memegang data akun siswa.

Di SiTuntas perintahnya adalah SiTuntas.kirimNilai(skor, skorMaksimal) lalu SiTuntas.selesai(), dibungkus pemeriksaan if (window.SiTuntas) supaya media tetap jalan saat dibuka di luar SiTuntas. Skor maksimal paling besar 1000. Nama dan kelas siswa tersedia di SiTuntas.siswa.nama dan SiTuntas.siswa.kelas. Contohnya di akhir kuis tiga soal ketika siswa menjawab dua soal dengan benar:

1. Media menghitung skor, misalnya 2.
2. Media memanggil perintah kirim nilai dengan skor 2 dan skor maksimal 3.
3. Halaman induk menerima pesan, memeriksa bahwa skor masuk akal (tidak negatif dan tidak melebihi skor maksimal), lalu menyimpannya ke rekap.

Skor yang dihitung di peramban siswa tetap bisa diakali oleh siswa yang paham kode. Karena itu, nilai media interaktif lebih cocok untuk latihan dan penilaian formatif daripada ujian penentu. Layar Rekap Nilai SiTuntas sendiri menuliskannya: nilai berasal dari media itu sendiri, pakai untuk latihan, bukan penilaian resmi.

Media interaktif HTML di e-Ajar SiTuntas

Di SiTuntas, guru mengunggah media lewat menu Pustaka Bahan Ajar dengan memilih jenis Media interaktif HTML. Fitur ini tersedia untuk sekolah pengguna SiTuntas. Berkas yang diterima adalah satu .html atau .zip berisi index.html beserta aset statis, dengan batas 20 MB per unggahan seperti tertulis di dialog. Berkas berbahaya seperti .php atau .exe, serta zip yang memuat jalur mencurigakan, ditolak seluruhnya. Halaman modulnya ada di e-Ajar SiTuntas.

Setelah diunggah, media diperiksa otomatis. Hasilnya berupa saran, bukan penolakan; layar menulis "Hanya saran. Media tetap tersimpan dan bisa dibagikan."

Pemeriksaan ini membaca kode, bukan menjalankannya. Perintah kirim nilai yang ada di kode belum tentu terpanggil, jadi guru tetap perlu mencoba media lewat Pratinjau sebelum membagikannya.

Membuat media dengan Generator Prompt Media

Guru yang belum punya media bisa membuka generator dari dialog tambah bahan, lewat tautan Panduan dan templat prompt AI. Jendelanya berjudul "Membuat media interaktif dengan AI". Generator ini tidak membuat media sendiri: ia menyusun teks perintah (prompt) di peramban, lalu guru menyalinnya ke asisten AI pilihannya di luar SiTuntas. Karena tidak ada panggilan AI dari SiTuntas, tidak ada biaya tambahan.

1. Kelas dan materi. Pilih Mata pelajaran, Kelas (kelas yang Anda ajar ditandai), dan Fase. Ambil tujuan pembelajaran dari Master ATP, dari Racik Ajar Saya, atau Tulis Sendiri (maksimal 3 TP). Materi tambahan dan Konteks lokal boleh diisi; jangan tulis data pribadi siswa.
2. Bentuk media. Pilih satu dari 13 templat, antara lain Misi Petualangan, Lab Virtual & Eksperimen, Escape Room, Alat Peraga Matematika, Literasi & Numerasi AKM, Jodohkan & Kartu Memori, dan Kartu Pintar & Kuis. Sakelar "Cocok untuk ..." menyaring templat sesuai mapel dan jenjang. Atur Jumlah soal, Durasi, Kesulitan, dan Bahasa media.
3. Fitur dan tampilan. Fitur bawaan mengikuti templat, dikelompokkan dalam Konten, Umpan balik, Gamifikasi, Visual, dan Aksesibilitas, misalnya "Coba lagi saat salah (skor tetap percobaan ke-1)" atau "Tombol ramah jempol & layar 360px". Pilih Gaya visual dan, bila perlu, isi Catatan untuk AI.
4. Salin prompt. Di kolom kanan, pilih tujuan salin (ada empat platform AI populer), lalu tekan tombol Salin atau Unduh .txt. Pratinjau prompt menandai bagian Blok SiTuntas terkunci: aturan teknis wajib agar nama siswa terisi otomatis dan nilai masuk Rekap. Bagian ini tidak bisa diubah dari generator.
5. Tempel di asisten AI, simpan hasilnya sebagai index.html, lalu kembali ke SiTuntas dan unggah. Bila hasilnya kurang pas atau terpotong, bagian bawah kolom kanan menyediakan Salin prompt revisi dan Salin prompt jawaban terpotong untuk dikirim di percakapan yang sama.

Gambar 1. Langkah 1 generator. Nama platform AI di kolom kanan disamarkan pada gambar.

Gambar 2. Langkah 2: memilih templat media.

Gambar 3. Langkah 3: fitur dan tampilan.

Langkah ringkas dari berkas sampai rekap

Langkah berikut diambil dari layar e-Ajar memakai satu media contoh, kuis tiga soal pecahan senilai, di sekolah demo.

1. Buka e-Ajar, pilih Pustaka Bahan Ajar, lalu tekan Tambah Bahan Ajar. Pilih kartu Media interaktif HTML (Permainan atau kuis .html / .zip).
2. Isi formulir. Judul, Keterangan (opsional), Mata pelajaran, Tingkat (opsional), Tujuan Pembelajaran (opsional, diambil dari Master ATP). Admin juga memilih Guru pemilik. Pilih berkas di Berkas media interaktif, lalu tekan Simpan.
3. Baca hasil pemeriksaan otomatis di panel "Bahan ajar tersimpan". Tanda centang hijau berarti lolos. Bila ada catatan penting, panel menawarkan Salin prompt sesuaikan media untuk ditempel ke asisten AI bersama isi berkas lama; hasilnya diunggah sebagai bahan baru.
4. Tekan Buka Pratinjau dan mainkan sampai selesai.
5. Bagikan ke kelas. Di panel yang sama, rombel yang Anda ajar sudah tercentang dari penugasan mengajar. Isi Mulai tampil dan Berakhir bila perlu (kosongkan bila boleh dibuka kapan saja), lalu Bagikan Sekarang. Bisa juga nanti lewat ikon bagikan di kartu bahan.
6. Periksa kartu bahan. Kartu menampilkan "Nilai terkirim" atau "Belum mengirim nilai", rombel tujuan, serta tombol Pratinjau dan Rekap Nilai.
7. Pantau Rekap Nilai, lalu Ekspor Excel bila perlu.

Gambar 4. Langkah 1 dan 2: dialog Tambah bahan ajar.

Gambar 5. Langkah 3 sampai 5: hasil pemeriksaan dan pembagian ke kelas.

Gambar 6. Langkah 6: kartu bahan setelah dibagikan.

Memainkan media: tampilan siswa dan pratinjau guru

Siswa membuka media dari menu Bahan Ajar di akunnya dengan tombol Mainkan. Media berjalan di bingkai terpisah yang tidak bisa membaca data akun, dan nama serta kelasnya terisi dari akun. Guru dan admin yang menekan Pratinjau melihat halaman yang sama dengan tambahan keterangan "Mode pratinjau. Nilai tidak dicatat." Di bagian atas ada lencana nilai pratinjau (dalam persen), tombol Main Ulang, dan Layar Penuh.

Gambar 7. Pratinjau guru: umpan balik saat jawaban salah. Nama akun disamarkan.

Gambar 8. Layar hasil. Lencana Nilai 67 adalah skor 2 dari 3 dalam persen; di mode pratinjau nilai ini tidak dicatat.

Gambar 9. Tampilan di HP: layar mulai, soal, dan hasil.

Membaca rekap untuk tindak lanjut

Tombol Rekap Nilai di kartu bahan membuka ringkasan: Jumlah siswa, Selesai, Dibuka, Belum, Rata-rata nilai (dari nilai terbaik), Tertinggi/terendah (dalam persen), dan Ketuntasan dengan KKTP yang bisa diubah (bawaan 75). Kartu Selesai, Dibuka, dan Belum bisa diketuk untuk menyaring. Tabelnya berisi Nama, Kelas, Status, Nilai terbaik, Nilai terakhir, Percobaan, Durasi, dan Terakhir dibuka; klik baris untuk melihat riwayat percobaan siswa itu. Ada pencarian nama, saringan kelas dan status, serta tombol Ekspor Excel.

Gambar 10. Rekap Nilai di sekolah demo. Semua siswa masih Belum karena belum ada yang mengerjakan; nama siswa adalah data demo.

Rekap paling berguna bila langsung dipakai untuk keputusan kecil di kelas. Siswa berstatus Belum perlu diingatkan atau diberi waktu di kelas. Siswa berstatus Dibuka tetapi belum Selesai mungkin terhenti di soal tertentu; riwayat percobaannya membantu melihat di mana mereka berhenti. Siswa yang nilai terbaiknya di bawah KKTP setelah beberapa kali mencoba adalah kandidat pembelajaran remedial, sedangkan yang tuntas di percobaan pertama bisa diberi tantangan berikutnya. Catat hasil ini bersama penilaian formatif lain, jangan dijadikan satu-satunya dasar nilai rapor.

AI di SiTuntas dan media interaktif: apa yang tersambung

Supaya tidak salah paham, berikut yang benar-benar ada di kode dan layar saat artikel ini ditulis:

• Pembuatan media memakai salin-tempel. Generator Prompt Media hanya merakit prompt. Guru menyalin prompt itu ke asisten AI di luar SiTuntas, menyimpan hasilnya sebagai index.html, lalu mengunggahnya. Tidak ada tombol yang membuat media langsung dari SiTuntas. Menu SiTuntas AI di aplikasi bisa dipakai guru untuk menyiapkan bahannya, misalnya ide soal, kunci jawaban, dan teks petunjuk, bila menu itu aktif di sekolah. Prompt lengkap dari generator cukup panjang dan satu pesan di menu itu dibatasi, jadi untuk membuat media utuh pakai asisten AI pilihan guru.
• Tujuan pembelajaran bisa diambil dari modul Racik Ajar. Racik Ajar punya Bantuan AI untuk menyusun draf modul ajar (ketersediaannya mengikuti pengaturan sekolah). TP dari modul Racik Ajar milik guru bisa dipilih di generator lewat tombol Racik Ajar Saya, sehingga prompt media memakai TP yang sama dengan modul ajarnya.
• Perbaikan media lama juga salin-tempel. Bila pemeriksa menemukan catatan penting, tombol Salin prompt sesuaikan media menyalin perintah perbaikan untuk ditempel ke asisten AI bersama isi berkas lama.

Alur yang disarankan: susun modul di Racik Ajar, pakai TP-nya di Generator Prompt Media, buat media di asisten AI pilihan, unggah dan coba lewat Pratinjau, bagikan, lalu baca Rekap Nilai.

Kesalahan yang sering terjadi

• Nilai tidak masuk. Biasanya media tidak memanggil perintah kirim nilai, skornya melebihi skor maksimal, atau skor maksimalnya lebih dari 1000. Perbaiki di kode media.
• Halaman kosong saat dimainkan. Periksa apakah index.html ada di akar zip dan nama berkas aset sama persis, termasuk huruf besar dan kecil.
• Gambar tidak muncul. Gambar diambil dari situs luar. Masukkan gambar ke dalam zip.
• Pesan "Benar" tidak muncul. Media memakai alert. Ganti dengan kotak pesan di halaman.
• Rekap kosong. Media belum dibagikan ke rombel, atau rombelnya belum berisi siswa aktif. Layar menulis "Belum ada siswa di rekap ini" untuk keadaan ini.

Media interaktif juga bisa dipadukan dengan lembar kerja. Lihat cara membuat LKPD digital interaktif untuk ide kegiatan yang mengiringi media. Untuk sekolah yang juga memakai e-Jadwal, ada panduan serupa untuk bel sekolah otomatis.

Kesimpulan

Media interaktif HTML paling berguna bila nilainya tercatat atas nama siswa yang benar. Siapkan berkas dengan aset di dalam paket, pastikan ada perintah kirim nilai, unggah ke Pustaka Bahan Ajar, baca hasil pemeriksaan, lalu coba lewat Pratinjau sebelum dibagikan. Generator Prompt Media membantu menyusun perintah untuk asisten AI, sedangkan Rekap Nilai menunjukkan siapa yang sudah tuntas tanpa merekap manual.