Cara Membuat Soal Ujian Online Anti Curang di Blogger

Cara Buat Soal Ujian Online Anti Curang di Blogger

Membuat ujian online di platform gratis seperti Blogger adalah solusi cerdas untuk guru dan pengajar. Namun, tantangan terbesarnya adalah: **bagaimana cara mencegah siswa curang?**

Dalam tutorial ini, kita akan membahas langkah demi langkah cara membuat sistem ujian online canggih di Blogger yang dilengkapi berbagai fitur anti-kecurangan (anti-cheat) menggunakan JavaScript dan Google Apps Script.

Mengapa Blogger?

Blogger (Blogspot) 100% gratis, terintegrasi dengan akun Google, dan yang terpentING, memungkinkan kita menyisipkan kode HTML, CSS, dan JavaScript secara penuh. Ini memberi kita fleksibilitas untuk membangun fitur kustom yang tidak bisa dilakukan di platform kuis biasa.

Persiapan: Alat yang Dibutuhkan

Sebelum kita mulai, pastikan Anda memiliki:

• Akun Blogger: Tentu saja, untuk platform ujian kita.
• Akun Google: Untuk Google Sheets (database nilai) dan Google Apps Script (penghubung).
• Teks Editor (Opsional): Seperti VS Code atau Sublime Text untuk mempermudah penulisan kode sebelum di-copy ke Blogger.

Langkah 1: Membuat Halaman Ujian di Blogger

Langkah pertama adalah membuat Halaman (Page) baru di Blogger, bukan Postingan (Post). Halaman lebih cocok untuk konten statis seperti ini.

1. Login ke Dashboard Blogger Anda.
2. Pilih menu Halaman (Pages) > Halaman baru (New page).
3. Beri judul, misalnya "Ujian Bahasa Inggris".
4. Di pojok kiri atas editor, ganti mode dari "Compose view" ke "HTML view".
5. Di sinilah kita akan menempelkan seluruh kode HTML, CSS, dan JavaScript ujian kita.

Langkah 2: Kode Fitur Anti Curang (JavaScript)

Ini adalah inti dari tutorial kita. Kita akan menambahkan skrip untuk "mengunci" layar siswa. Tempelkan kode ini di dalam tag <script> di kode HTML Anda.

A. Deteksi Pindah Tab (Visibility Change)

Skrip ini akan otomatis mengakhiri ujian jika siswa mencoba membuka tab lain, window lain, atau meminimalkan browser.

// Deteksi pindah tab
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // Ganti dengan fungsi untuk submit otomatis
    submitUjian("Terdeteksi pindah tab/aplikasi!");
  }
});
        

B. Paksa Fullscreen & Deteksi Keluar Fullscreen

Siswa akan diminta masuk ke mode fullscreen sebelum ujian dimulai. Jika mereka keluar dari mode fullscreen, ujian akan otomatis selesai.

// Memaksa fullscreen saat ujian dimulai
function masukFullScreen() {
  document.documentElement.requestFullscreen();
}

// Deteksi keluar dari fullscreen
document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    submitUjian("Terdeteksi keluar dari mode Full Screen!");
  }
});
        

C. Menonaktifkan Klik Kanan dan Copy-Paste

Langkah klasik untuk mencegah siswa menyalin soal atau teks.

// Disable klik kanan
document.addEventListener('contextmenu', e => e.preventDefault());

// Disable copy & select text
document.addEventListener('copy', e => e.preventDefault());
document.addEventListener('selectstart', e => e.preventDefault());
        

Catatan Penting: Tidak ada sistem anti-curang yang 100% aman. Tujuan kita adalah untuk mempersulit siswa melakukan kecurangan semaksimal mungkin.

Langkah 3: Integrasi Google Sheets dengan Apps Script

Bagaimana cara menyimpan nilai siswa? Kita akan mengirim data (Nama, Nilai, Status Kecurangan) dari JavaScript di Blogger ke Google Sheets menggunakan Google Apps Script.

1. Buat Google Sheet baru dan beri nama kolom (misal: Waktu, Nama, Nilai, Status).
2. Dari menu Google Sheet, klik Ekstensi > Apps Script.
3. Tempelkan kode Apps Script (fungsi doPost(e)) untuk menerima data.
4. Deploy sebagai Web app.
5. Salin URL Web app yang Anda dapatkan dan tempelkan di variabel GAS_URL di dalam kode JavaScript Anda di Blogger.

Langkah 4: Optimasi SEO untuk Halaman Ujian Anda

Meskipun ini adalah halaman ujian, membuatnya ramah SEO dapat membantu orang lain menemukan metode Anda. Ini adalah opsional jika ujian Anda bersifat privat.

• Judul Jelas: "Ujian Online Bahasa Inggris Kelas 9".
• Deskripsi Penelusuran (Meta Description): Di setelan Halaman, isi deskripsi singkat tentang ujian tersebut.
• Struktur Heading: Gunakan H1 untuk judul ujian, H2/H3 untuk petunjuk, dll.

Kesimpulan

Dengan menggabungkan kekuatan Blogger, JavaScript, dan Google Apps Script, Anda telah berhasil membuat sistem ujian online yang tidak hanya gratis dan profesional, tetapi juga dilengkapi dengan lapisan keamanan anti-curang yang kuat.

Selamat mencoba, dan semoga ujian Anda berjalan lancar!

Lihat Demo Ujian

Berbagi :