Panduan Media Pembelajaran Interaktif Guru

SMP Mahir Al Mumtaz Bandongan • Modul Panduan Guru

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 file kuis 1 file HTML utuh.

Output: kuis.html

2

Distribusi Kuis

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

Media: Website/WA

3

Siswa Mengerjakan

Siswa menjawab soal di HP/Laptop. Saat klik 'Kirim Hasil', skor dihitung otomatis.

Aksi: Kirim Nilai

4

Google Sheets Guru

Google Apps Script menerima data & mencatat nama, kelas, serta nilai ke tab Sheet baru.

Database Terpusat

Keamanan & Privasi Terjaga

Data rekapitulasi nilai tersimpan langsung di Google Drive milik Anda sendiri. Tidak ada pihak ketiga yang menyimpan data nilai siswa sekolah Anda.

Ringan & Kompatibel Semua HP/Laptop

File HTML sangat kecil (di bawah 100 KB). Siswa dapat membuka kuis dari browser apapun (Chrome, Safari, Edge) tanpa perlu install aplikasi tambahan.

Persiapan Awal Sebelum Mulai:

Akun Google Drive Guru
Akun Gemini (gemini.google.com)
Bank Soal / Materi Kuis Guru

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 Anda, buat satu Google Sheet baru, lalu beri nama misalnya: Database Kuis Sekolah. Biarkan sheet dalam keadaan kosong.

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 yang ada di editor Apps Script, lalu salin dan tempelkan kode di bawah ini. Script ini otomatis membuatkan tab sheet baru sesuai judul kuis!

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 (Pengelompokan baru).
Klik ikon roda gigi (Select type) > 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 diminta login Google).
Klik Deploy, izinkan otorisasi akun Google Anda, lalu Salin URL Web App yang dihasilkan. Simpan URL ini!

Alat Penguji Koneksi Google Apps Script

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

Langkah 3 dari 4

Buat Media Kuis di Gemini Canvas

Pilih metode yang paling sesuai untuk Anda. Anda bisa memakai Prompt Interogasi Standar, membuat Gem Pribadi, atau menggunakan Generator Prompt Otomatis di bawah ini!

Interactive Prompt Builder (Generator Prompt Otomatis)

Rekomendasi Utama

Isikan data kuis Anda di bawah ini. Alat ini akan menyusun prompt khusus yang siap Anda salin dan tempelkan langsung ke Gemini Canvas!

Nama Mata Pelajaran & Kelas

Judul / Topik Kuis

Nama Guru & Sekolah

URL Web App Google Sheet (Dari Langkah 2)

Jumlah Soal

Tema Tampilan Kuis

Prompt Custom Siap Digunakan:

Opsi A

Prompt Master Interogasi Fleksibel

Guru cukup salin prompt ini 1 kali ke Gemini. Gemini akan menawarkan opsi dipandu 6 pertanyaan runtut atau langsung membuat berdasarkan ide kuis guru.

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

Buat Gem Pribadi di Gemini (Sekali Setup)

Guru bisa membuat Asisten Gem khusus di akun Gemini masing-masing. Setiap kali ingin buat kuis baru, guru tinggal buka Gem tersebut tanpa perlu salin prompt lagi!

Cara Buat Gem (2 Menit):

Buka Gemini > Klik Gems Manager > Pilih New Gem.
Beri nama: Asisten Kuis Guru.
Tempelkan Prompt Master di kolom Instructions > Simpan!

Cara Mengunduh File HTML dari Gemini Canvas:

Setelah Gemini selesai membuatkan media di panel Canvas sebelah kanan, periksa tampilannya via tombol Preview.
Klik ikon tiga titik atau ikon Download / Salin Kode di pojok kanan atas panel Canvas.
Simpan file tersebut ke komputer/HP Anda dengan nama, misalnya: kuis_ipa_kelas8.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: Dikirim via WhatsApp / Telegram

Kirimkan file kuis.html secara langsung ke grup WhatsApp kelas. Siswa cukup mengunduh file tersebut di HP/Laptop dan membukanya di browser tanpa butuh aplikasi khusus.

Opsi 2: Portal Guru Website SMP Mahir Al Mumtaz

Unggah file kuis ke Laman MateriKita portal sekolah:

Login ke Portal Guru SMP Mahir Al Mumtaz.
Pilih menu Tambahkan Materi Interaktif.
Unggah file kuis.html atau salin kode HTML kuis Anda.
Klik Terbitkan — Kuis langsung dapat diakses siswa!

Opsi 3: Laboratorium Komputer / Flashdisk

Salin file kuis.html ke komputer-komputer di laboratorium sekolah menggunakan flashdisk atau folder jaringan lokal.

Opsi 4: Cetak QR Code Tautan

Setelah materi tayang di Laman MateriKita website sekolah, buatkan QR Code tautannya dan tempelkan di papan tulis atau 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.