Cara Buat Soal Ujian Online Anti Curang dengan Embed Google Form ke Blogger

Ingin mengadakan ujian online menggunakan Google Form tapi takut siswa menyontek dengan membuka Google atau ChatGPT di tab lain? Masalah utama Google Form standar adalah tidak adanya fitur keamanan untuk mengunci layar.

Di tutorial ini, saya akan membagikan Script HTML Anti-Curang yang bisa Anda pasang di Blogger secara gratis. Script ini memiliki fitur:

• Wajib Full Screen: Soal tidak akan muncul sebelum masuk mode layar penuh.
• Anti Pindah Tab: Jika siswa membuka tab lain, ujian otomatis dibatalkan.
• Anti Keluar Full Screen: Jika siswa menekan tombol ESC, ujian dianggap selesai.
• Hukuman Tegas: Saat terdeteksi curang, formulir akan hilang dan siswa harus melapor ke pengawas.

---

Langkah 1: Siapkan Link Google Form

Sebelum mengambil kode di bawah, pastikan Anda sudah memiliki link embed (semat) dari Google Form Anda.

1. Buka Google Form Soal.
2. Klik Kirim (Send).
3. Pilih ikon < > (Sematkan HTML).
4. Salin link yang muncul (biasanya diawali dengan <iframe...).

Langkah 2: Salin Script Anti Curang

Salin seluruh kode di dalam kotak di bawah ini. Kode ini berisi HTML, CSS, dan JavaScript untuk sistem keamanan ujian.

Kode Script Ujian (Copy kode di bawah):

<style> body.mode-ujian { overflow: hidden; } #intro-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } #exam-container { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff; z-index: 99998; } #alert-screen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #d32f2f; color: white; z-index: 100000; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .btn-start { background: #1976d2; color: white; padding: 15px 30px; border: none; font-size: 18px; cursor: pointer; border-radius: 5px; margin-top: 20px; } .box-aturan { background: #e3f2fd; padding: 20px; border-left: 5px solid #1976d2; max-width: 600px; text-align: left; margin: 10px; } </style> <div id="intro-screen"> <h2>UJIAN ONLINE SEKOLAH</h2> <div class="box-aturan"> <strong>Peraturan:</strong> <ul> <li>Dilarang pindah Tab / Buka Aplikasi Lain.</li> <li>Dilarang keluar dari Mode Full Screen.</li> <li>Pelanggaran = Ujian DIBATALKAN.</li> </ul> </div> <button class="btn-start" onclick="mulaiUjian()">MULAI UJIAN (FULL SCREEN)</button> </div> <div id="exam-container"> <iframe src="MASUKKAN_LINK_EMBED_GOOGLE_FORM_DISINI" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Memuat…</iframe> </div> <div id="alert-screen"> <h1>UJIAN DIBATALKAN!</h1> <h3 id="alasan-curang"></h3> <p>Anda terdeteksi melakukan pelanggaran.</p> <button onclick="location.reload()" style="padding: 10px 20px; cursor: pointer;">Muat Ulang</button> </div> <script> var isExamRunning = false; var intro = document.getElementById('intro-screen'); var examBox = document.getElementById('exam-container'); var alertBox = document.getElementById('alert-screen'); var reasonText = document.getElementById('alasan-curang'); function mulaiUjian() { var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } intro.style.display = 'none'; examBox.style.display = 'block'; document.body.classList.add('mode-ujian'); isExamRunning = true; } function batalkanUjian(alasan) { if (isExamRunning) { isExamRunning = false; examBox.innerHTML = ""; examBox.style.display = 'none'; alertBox.style.display = 'flex'; reasonText.innerText = alasan; if (document.exitFullscreen) { document.exitFullscreen(); } } } document.addEventListener("visibilitychange", function() { if (document.hidden && isExamRunning) batalkanUjian("Membuka Tab Lain"); }); document.addEventListener("fullscreenchange", function() { if (!document.fullscreenElement && isExamRunning) batalkanUjian("Keluar Full Screen"); }); window.addEventListener("blur", function() { if (isExamRunning) { setTimeout(function() { if (document.hidden || !document.hasFocus()) batalkanUjian("Aktivitas Mencurigakan"); }, 1000); } }); </script>

Langkah 3: Pemasangan di Blogger

1. Buat Halaman (Page) baru di Blogger agar tampilan lebih bersih (tanpa tanggal postingan).
2. Ubah mode editor ke HTML View.
3. Tempel (Paste) kode yang sudah Anda salin dari kotak di atas.
4. PENTING: Cari tulisan MASUKKAN_LINK_EMBED_GOOGLE_FORM_DISINI di dalam kode tersebut.
5. Hapus tulisan itu, dan ganti dengan Link Embed Google Form yang sudah Anda siapkan di Langkah 1 (Hanya bagian link https://... nya saja, atau ganti satu baris iframe tersebut).
6. Publikasikan halaman dan bagikan linknya ke siswa.

Catatan Penting:
Sistem ini akan menghapus formulir secara otomatis jika siswa mencoba curang. Pastikan siswa memahami konsekuensi ini sebelum menekan tombol "Mulai Ujian".

Berbagi :