Panduan Media Pembelajaran Interaktif Guru

SMP Mahir Al Mumtaz Bandongan • Modul Panduan Guru

Disusun oleh: Mada Syauqy

Standar Media Pembelajaran Interaktif 2026

Solusi Media Kuis Interaktif Bebas Server & Bebas Biaya

Selamat Datang, Bapak & Ibu Guru Hebat! 👋✨

Panduan lengkap membuat Media Kuis Interaktif HTML yang estetik & responsif dengan bantuan Gemini Canvas. Hasil pekerjaan siswa tersimpan otomatis & terpusat di Google Sheets Guru tanpa menyewa server web!

100% Gratis & Bebas Server

Tidak perlu menyewa hosting, domain, atau server web yang mahal dan rumit.

Rekap Nilai Terpusat

1 Google Sheet otomatis membuatkan tab tersendiri untuk setiap kuis yang berbeda.

Ramah Guru Awam

Cukup dipandu pertanyaan interogasi AI Gemini tanpa perlu mengerti bahasa pemrograman.

Sekali Setup Database • Bisa Diunggah ke Laman MateriKita Website Sekolah

Langkah 1 dari 4

Konsep & Alur Kerja Sistem Kuis Bebas Server

Sebelum mulai membuat, pahami alur sederhana bagaimana media kuis yang dibuat melalui Gemini Canvas bekerja dari komputer guru hingga tersimpan rapi di Google Sheet.

Diagram Alur Integrasi Sistem

1

Gemini Canvas

Guru memberikan prompt ke AI Gemini untuk membuat 1 file HTML utuh.

Output: kuis.html

2

Distribusi Kuis

File HTML diunggah ke Laman MateriKita website sekolah atau via WA.

Media: Website/WA

3

Siswa Mengerjakan

Siswa menjawab di HP/PC. Klik 'Kirim Hasil' dan skor dihitung otomatis.

Aksi: Kirim Nilai

4

Google Sheets Guru

Apps Script mencatat nama, kelas, dan nilai ke tab Sheet kuis otomatis.

Database Terpusat

Keamanan Privasi Terjaga

Data nilai tersimpan langsung di Google Drive Anda sendiri tanpa perantara server pihak ketiga.

Ringan Semua HP / Laptop

File HTML sangat kecil (< 100 KB). Dapat dibuka langsung di browser bawaan tanpa install aplikasi.

Checklist Persiapan Awal

Akun Google Gemini AI Bank Soal

Langkah 2 dari 4 (Cukup 1 Kali Setup untuk Semua Kuis)

Setup Database Google Sheet & Google Apps Script

Ikuti instruksi bertahap di bawah ini untuk mengaktifkan Google Sheet milik Anda sebagai penampung data nilai kuis otomatis.

1

Buat Google Sheet Baru

Buka Google Drive, buat sheet baru dan beri nama misalnya: Database Kuis Sekolah.

2

Buka Editor Apps Script

Pada menu atas Google Sheet, klik menu Ekstensi (Extensions) > pilih Apps Script.

3

Tempelkan Kode Apps Script Universal Ini

Hapus seluruh kode bawaan di Apps Script, lalu tempelkan kode di bawah ini:

function doPost(e) {
  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var data = JSON.parse(e.postData.contents);
    
    // 1. Tentukan Nama Tab (Gunakan 'Nama_Kuis' dari HTML atau default 'Kuis_Umum')
    var namaKuis = data["Nama_Kuis"] || "Kuis_Umum";
    namaKuis = namaKuis.replace(/[\/\\\?\*\[\]]/g, "").substring(0, 30);
    
    var sheet = ss.getSheetByName(namaKuis);
    
    // Jika Tab belum ada, buat Tab Baru otomatis!
    if (!sheet) {
      sheet = ss.insertSheet(namaKuis);
    }
    
    // Waktu Otomatis
    data["Waktu_Selesai"] = new Date();

    // 2. Ambil header saat ini dari baris pertama Sheet
    var lastColumn = Math.max(sheet.getLastColumn(), 1);
    var headers = sheet.getRange(1, 1, 1, lastColumn).getValues()[0];

    if (headers.length === 1 && headers[0] === "") {
      headers = [];
    }

    // 3. Tambahkan header baru jika ada key baru dari HTML
    var keys = Object.keys(data);
    keys.forEach(function(key) {
      if (headers.indexOf(key) === -1) {
        headers.push(key);
      }
    });

    // 4. Perbarui baris Header di Google Sheet
    sheet.getRange(1, 1, 1, headers.length).setValues([headers]);

    // 5. Susun data sesuai urutan header
    var rowData = headers.map(function(header) {
      return data[header] !== undefined ? data[header] : "-";
    });

    // 6. Simpan data siswa ke Sheet
    sheet.appendRow(rowData);

    return ContentService.createTextOutput(JSON.stringify({ status: "success", tab: namaKuis }))
      .setMimeType(ContentService.MimeType.JSON);

  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({ status: "error", message: err.message }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

4

Deploy (Terapkan) Menjadi Aplikasi Web (Web App)

Klik tombol biru Deploy (Terapkan) di kanan atas > pilih New Deployment.
Klik ikon roda gigi > pilih Web App (Aplikasi Web).
Pada opsi Who has access (Siapa yang memiliki akses), WAJIB pilih: Anyone (Siapa saja). (Agar siswa dapat mengirim jawaban tanpa login Google).
Klik Deploy, izinkan otorisasi akun Google Anda, lalu Salin URL Web App yang dihasilkan.

Alat Penguji Koneksi Google Apps Script

Sudah mendapatkan URL Web App dari langkah di atas? Tempelkan URL di bawah untuk menguji apakah sinyal data berhasil masuk ke Google Sheet Anda.

Tips Penting:

URL Web App ini hanya perlu dibuat 1 KALI SAJA seumur hidup untuk Google Sheet ini! Kuis-kuis selanjutnya cukup menggunakan URL yang sama.

Langkah 3 dari 4

Buat Media Kuis di Gemini Canvas

Gunakan Generator Prompt Otomatis di bawah ini untuk menyusun instruksi kuis siap pakai, atau gunakan opsi Prompt Interogasi / Gem Pribadi sesuai preferensi Anda.

Interactive Prompt Builder (Generator Otomatis)

Rekomendasi Utama

Lengkapi data kuis Anda di formulir berikut. Generator akan merangkai prompt khusus berstandar Gemini Canvas:

Mata Pelajaran & Kelas

Judul / Topik Kuis

Nama Guru & Sekolah

URL Web App Google Sheet (Dari Langkah 2)

Jumlah & Format Soal

Tema Desain Visual

Prompt Custom Siap Disalin ke Gemini:

Opsi A

Prompt Master Interogasi Fleksibel

Salin prompt ini ke Gemini untuk dipandu melalui 6 pertanyaan terstruktur atau menjelaskan konsep kuis sendiri.

Halo Gemini! Bertindaklah sebagai Spesialis Pembuat Media Pembelajaran Interaktif Guru. Saya ingin membuat media kuis interaktif 1 file HTML utuh di Canvas.

SEBELUM kamu membuatkan kode HTML-nya, JANGAN LANGSUNG BUAT KODE. Sambut saya secara ramah dan tanyakan pilihan mode pembuatan kuis terlebih dahulu:

"Halo Bapak/Ibu Guru! Bagaimana Anda ingin membuat kuis interaktif hari ini?"
1. Dipandu dengan Pertanyaan Runtut (Cocok jika ingin dibantu menyusun kuis dari awal)
2. Menggunakan Perintah / Ide Kuis Sendiri (Bebas menjelaskan konsep kuis sendiri)

ATURAN RESPON GEMINI:
- Jika Guru memilih Nomor 1 (Dipandu), ajukan 6 pertanyaan berikut secara bersahabat:
1. Apa Nama Mata Pelajaran & Kelas yang diampu?
2. Apa Topik / Judul Kuis yang ingin dibuat?
3. Siapa Nama Bapak/Ibu Guru & Nama Sekolah?
4. Berapa URL Web App Google Sheet Guru? (URL ini didapat dari Langkah Setup Sheet)
5. Berapa jumlah soal yang diinginkan?
6. Apa materi inti, sub-materi, atau cakupan materi yang ingin diuji?

- Jika Guru memilih Nomor 2 (Ide Sendiri), izinkan guru menjelaskan konsep/ide kuisnya secara bebas. Kamu HANYA PERLU meminta 1 hal wajib ini:
1. Berapa URL Web App Google Sheet Guru? (serta pastikan ide kuisnya sudah cukup jelas).

SETELAH SEMUA DATA DITERIMA:
Buatkan 1 file HTML utuh di Canvas dengan desain estetik (Tailwind CSS, animasi kartu/tombol kuis, skor otomatis, responsif untuk HP/PC). Pastikan saat tombol 'Kirim Hasil' diklik, data JSON (Nama_Kuis, Nama, Kelas, Nilai, Status) dikirimkan secara otomatis ke URL Web App tersebut menggunakan mode: 'no-cors'.

Opsi B Profil & URL Terkunci

Buat Gem Asisten Kuis Pribadi

Tanamkan nama guru, sekolah, dan URL database langsung ke Gem. Gemini akan mengingat profil Anda secara permanen!

Nama Guru & Gelar:

Nama Sekolah / Instansi:

URL Web App Apps Script (Database): Dari Langkah 2

Cara Pasang di Gemini (1 Menit):

Buka Gemini > menu Gems Manager > klik New Gem.
Beri nama: Asisten Kuis Guru.
Tempelkan teks hasil salinan tombol di atas ke kolom Instructions > klik Save!

Panduan Penggunaan Gemini Canvas & Unduh File HTML:

1. Uji Coba Langsung via Preview

Saat kode HTML selesai dibuat di panel Canvas kanan, klik tombol Preview untuk mencoba simulasi kuis secara langsung sebelum diunduh.

2. Unduh File HTML

Klik ikon Download / Salin Kode di pojok kanan atas panel Canvas dan simpan file dengan ekstensi kuis.html.

Langkah 4 dari 4

Membagikan Media Kuis ke Siswa

Pilih metode distribusi yang paling praktis dan fleksibel sesuai fasilitas yang ada di sekolah Anda:

Opsi 1: WhatsApp / Telegram

Kirimkan file kuis.html ke grup WA kelas. Siswa cukup mengunduh dan membukanya di browser HP tanpa perlu aplikasi tambahan.

Opsi 2: Portal Guru (MateriKita)

Login ke Portal Guru SMP Mahir Al Mumtaz > pilih Tambahkan Materi Interaktif > unggah file kuis atau tempel kode HTML > klik Terbitkan.

Opsi 3: Laboratorium Komputer

Salin file kuis.html ke komputer-komputer di laboratorium sekolah menggunakan flashdisk atau folder sharing LAN.

Opsi 4: Cetak QR Code Tautan

Setelah materi tayang di website sekolah, buatkan QR Code tautannya dan tempelkan di papan tulis atau lembar soal modul cetak siswa.

Catatan PENTING saat Siswa Mengerjakan:

Siswa dapat membaca dan menjawab soal kuis secara offline. Siswa WAJIB terhubung ke koneksi internet saat menekan tombol "Kirim Hasil" agar nilai otomatis masuk ke Google Sheet guru.

Pusat Solusi Kendala

Pertanyaan Umum & Solusi Kendala (FAQ)

Temukan jawaban dan penanganan cepat jika Anda mengalami kendala teknis saat menguji coba atau membagikan media kuis interaktif.

Tips Solusi Cepat:

90% kendala nilai siswa tidak masuk disebabkan opsi akses Google Apps Script belum disetel ke Anyone (Siapa saja) saat melakukan Deploy.

Pendampingan Langsung:

Jika mengalami kendala teknis pembuatan kuis, silakan berkonsultasi langsung dengan Tim IT / Kurikulum SMP Mahir Al Mumtaz.

Daftar Langkah Panduan