Panduan Membuat Soal Interaktif bersertifikat
»

Panduan Membuat Soal Interaktif bersertifikat

Panduan Membuat Aplikasi Kuis Interaktif Berjenjang

Langkah demi langkah membangun kuis CBT dengan fitur Auto-Download Sertifikat JPG & Barcode Validasi untuk Blogger

🚀 Lihat Contoh Aplikasi Kuis

Membuat kuis online yang menarik dan interaktif kini semakin mudah. Dengan memanfaatkan AI dan sedikit manipulasi HTML/JavaScript, Anda dapat menghadirkan media pembelajaran interaktif yang dilengkapi sistem level (Mudah, Sedang, HOTS), pembatasan kesempatan, pembahasan otomatis, hingga pengunduhan sertifikat berformat JPG.

1 Menyusun Prompt Utama untuk AI

Langkah pertama adalah memberikan instruksi yang presisi kepada AI untuk menghasilkan struktur kuis yang diinginkan. Gunakan format prompt di bawah ini:

Format Prompt AI:
"Buatkan aplikasi kuis interaktif berbasis HTML/JS siap embed Blogger tentang [Nama Topik/Mata Pelajaran]. Terdiri dari 60 soal pilihan ganda yang dibagi menjadi 3 Level:
  • Level 1: 20 Soal Dasar/Asli (Tingkat Mudah)
  • Level 2: 20 Soal Modifikasi (Tingkat Sedang)
  • Level 3: 20 Soal HOTS / Analisis (Tingkat Tinggi)
Fitur wajib: Input nama siswa, batas 3 kali kesempatan per level, pembahasannya muncul setelah menjawab, KKM minimal 80 untuk lulus, serta sertifikat otomatis terunduh sebagai JPG lengkap dengan QR Code validasi."

2 Struktur Data Soal (JSON Object)

Di dalam script JavaScript, pastikan array data soal disusun rapi dalam bentuk Object agar mudah dibaca dan dikembangkan. Setiap butir soal mengandung komponen kunci berikut:

const quizData = {
  1: [ // Array untuk Level 1
    {
      q: "Teks pertanyaan soal di sini ...",
      o: ["Pilihan A", "Pilihan B", "Pilihan C"], // Opsi Jawaban
      a: 1, // Indeks jawaban benar (0 = A, 1 = B, 2 = C)
      d: "Penjelasan atau pembahasan ringkas mengenai jawaban."
    }
  ]
};

3 Mengintegrasikan Library Eksternal (CDN)

Agar sertifikat dapat langsung dikonversi menjadi berkas gambar .JPG dan menyajikan QR Code secara dinamis, sisipkan dua library CDN berikut di bagian atas script atau tag <head>:

  • html2canvas CDN: Mengubah elemen dokumen HTML (tampilan sertifikat) menjadi canvas gambar. 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  • API Barcode Generator: Menghasilkan QR Code validasi kelulusan berbasis URL API dinamis. 
    https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=TEKS_VALIDASI

4 Menyusun Alur Logika Program (JavaScript)

Program kuis beroperasi berdasarkan alur logis berikut:

  1. Input Identitas: Menyimpan variabel studentName dari form awal.
  2. Eksekusi Soal: Memunculkan soal satu per satu. Saat opsi diklik, sistem langsung mengunci tombol lain (disabled = true), menghitung skor (setiap soal benar = +5 poin), dan menampilkan discussion-box.
  3. Pemeriksaan Syarat Kelulusan:
    • Nilai ≥ 80: Siswa dinyatakan LULUS. Tampilkan sertifikat dan panggil fungsi unduh otomatis. Tombol berubah menjadi "Lanjut ke Level Berikutnya".
    • Nilai < 80: Jika kesempatan masih ada (< 3), siswa dapat mengulang level tersebut. Jika kesempatan habis (3x gagal), sistem mereset progress kembali ke Level 1.

5 Skrip Auto-Download Sertifikat JPG

Gunakan fungsi JavaScript di bawah ini untuk merender area sertifikat menjadi file JPG yang terunduh langsung ke perangkat siswa begitu mereka dinyatakan lulus:

function autoDownloadJPG() {
  const certElement = document.getElementById("certificate-content");
  
  html2canvas(certElement, {
    useCORS: true,
    scale: 2 // Meningkatkan kerapatan piksel agar cetakan JPG tajam
  }).then(canvas => {
    const imageJPG = canvas.toDataURL("image/jpeg", 0.9);
    const link = document.createElement("a");
    
    // Format nama file unduhan
    link.download = `Sertifikat_${studentName}_Level${currentLevel}.jpg`;
    link.href = imageJPG;
    link.click();
  });
}

6 Memasang Kode di Blog & Contoh Hasil

Setelah seluruh kode HTML, CSS, dan JS selesai dirangkai:

  1. Buka dashboard Blogger Anda.
  2. Buat Halaman Baru atau Postingan Baru.
  3. Ubah mode tampilan dari Compose View menjadi HTML View.
  4. Tempelkan (paste) seluruh kode kuis ke dalam editor.
  5. Klik Publikasikan.

Untuk melihat wujud aplikasi kuis yang sudah berjalan secara penuh, Anda dapat membuka halaman demo berikut: Contoh Kuis Interaktif Fikih Bab Azan dan Iqamah.

Postingan Terkait

Formulir Kontak

Nama

Email *

Pesan *