Prompt dan Kode HTML Ujian Online Embed Google Form ke Blogger

Mengadakan ujian online yang aman adalah tantangan. Penggunaan Google Form yang disematkan (embed) di Blogger adalah solusi praktis, tetapi rentan terhadap kecurangan. Postingan ini memberikan solusi client-side premium yang dapat mendeteksi dan menghentikan ujian secara otomatis jika siswa mencoba pindah tab, keluar fullscreen, atau membuka DevTools.

1. ⚙️ Langkah Persiapan: Mendapatkan Sematan Kode Google Form

Sebelum memasang kode ujian anti-curang, Anda harus menyiapkan formulir ujian di Google Form dan mendapatkan kode sematannya.

Buat Ujian di Google Form: Siapkan soal-soal Anda.
Dapatkan Kode Sematan: Klik tombol Kirim di kanan atas, lalu pilih ikon <> (Sematan HTML).
Ambil URL: Salin URL yang ada di dalam atribut src dari kode sematan tersebut. URL ini akan digunakan di langkah berikutnya.

2. 📝 Prompt untuk AI (Sebagai Referensi)

Buatkan kode HTML + CSS + JavaScript untuk tampilan awal ujian online yang aman dan profesional.

Detail Fitur yang Harus Ada:

Tampilan Awal (Intro Screen): Latar belakang abu-abu lembut #f3f4f6. Kotak putih di tengah dengan bayangan halus dan animasi fade-in. Judul: “🛡️ UJIAN AMAN”. Input token dengan tipe password (angka token tidak ditampilkan).

Daftar aturan ujian: ❌ Dilarang Pindah Tab, ❌ Dilarang Keluar Fullscreen, ❌ Dilarang Split Screen, ⚠️ 1x Pelanggaran = Diskualifikasi.

Tombol & Validasi: Tombol hijau “MULAI UJIAN” dengan efek timbul (box-shadow) dan animasi hover scale. Validasi Token: Hanya token “654321” yang dianggap valid.

Sistem Pelanggaran (Anti-Curang): Jika siswa keluar fullscreen, pindah tab, kehilangan fokus (split screen), atau membuka DevTools (F12, Ctrl+Shift+I/J, Ctrl+U) → langsung diskualifikasi dan tampilkan layar merah dengan alasan pelanggaran.

Teknis: Semua berjalan di client-side (HTML, CSS, JS), ringan, dan bisa dipasang di Blogger (mode HTML View).

3. 🛡️ Kode HTML Ujian Online Anti-Curang Lengkap

Berikut adalah kode lengkap yang siap ditempel di postingan Blogger Anda pada mode HTML View.

⚠️ PENTING: Ganti teks LINK_GOOGLE_FORM_ANDA di dalam <iframe> dan ganti token "654321" di dalam tag <script> dengan nilai rahasia Anda.

<style>
  /* CSS: Styling Responsive dan Profesional */
  body.mode-ujian { margin:0; overflow:hidden; font-family:'Segoe UI',Arial,sans-serif; background:#f3f4f6; }
  #intro-screen,#exam-container,#alert-screen { position:fixed; inset:0; display:none; }
  #intro-screen { display:flex; align-items:center; justify-content:center; background:#f3f4f6; animation:fadeIn 1s ease forwards; z-index:9999; }
  @keyframes fadeIn { from{opacity:0;transform:scale(0.95);} to{opacity:1;transform:scale(1);} }
  #intro-box { background:#fff; padding:32px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.08); max-width:420px; width:100%; border:1px solid #e5e7eb; text-align:center; }
  #intro-box h2 { margin:0 0 12px 0; font-weight:700; color:#111827; font-size:1.8rem; }
  #intro-box ul { text-align:left; list-style:none; padding-left:0; margin:0 0 20px 0; color:#374151; }
  #intro-box ul li { margin-bottom: 8px; }
  #token-input { width:100%; padding:12px; margin:14px 0; border:1px solid #d1d5db; border-radius:8px; font-size:1.1rem; text-align:center; box-sizing:border-box; }
  #start-btn { width:100%; padding:14px; font-size:1.1rem; border:none; border-radius:8px; cursor:pointer; background:#10b981; color:#fff; font-weight:600; box-shadow:0 4px 0 0 #059669; transition:transform 0.2s ease, box-shadow 0.2s ease; }
  #start-btn:hover { transform:translateY(-2px) scale(1.01); box-shadow:0 6px 0 0 #059669; }
  #start-btn:active { transform:translateY(2px); box-shadow:0 2px 0 0 #059669; }
  #exam-container { background:#fff; z-index:9998; }
  #alert-screen { background:#ef4444; color:#fff; z-index:10000; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:'Segoe UI',Arial,sans-serif; }
  #alert-screen h1 { margin-bottom: 15px; }
  #alert-screen button { padding: 10px 20px; margin-top: 20px; background: #fff; color: #ef4444; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
</style>

<div id="intro-screen">
  <div id="intro-box">
    <h2>🛡️ UJIAN AMAN</h2>
    <p>Masukkan token resmi dari pengawas ujian:</p>
    <input id="token-input" type="password" placeholder="••••••" />
    <h3 style="margin-top:20px; color:#111827; font-weight:600; font-size:1.2rem;">ATURAN KERAS:</h3>
    <ul>
      <li>❌ Dilarang Pindah Tab/Aplikasi</li>
      <li>❌ Dilarang Keluar Fullscreen (Esc/Swipe)</li>
      <li>❌ Dilarang Split Screen/Ganti Ukuran Jendela</li>
      <li>⚠️ **1x Pelanggaran = DISKUALIFIKASI**</li>
    </ul>
    <button id="start-btn" onclick="cekToken()">MULAI UJIAN</button>
  </div>
</div>

<div id="exam-container">
  <iframe src="LINK_GOOGLE_FORM_ANDA" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Memuat…</iframe>
</div>

<div id="alert-screen">
  <h1>🚫 Ujian Dihentikan!</h1>
  <p id="reason" style="font-size:1.2rem; margin:10px 0;"></p>
  <p>Anda telah melanggar aturan ujian. Keputusan pengawas bersifat mutlak.</p>
  <button onclick="location.reload()">Muat Ulang</button>
</div>

<script>
  let isExamRunning=false;
  const CORRECT_TOKEN="654321"; // <--- GANTI TOKEN INI
  const intro=document.getElementById('intro-screen');
  const examBox=document.getElementById('exam-container');
  const alertBox=document.getElementById('alert-screen');
  const reasonText=document.getElementById('reason');

  function cekToken(){
    const token=document.getElementById('token-input').value.trim();
    if(token===CORRECT_TOKEN){ mulaiUjian(); } else { alert("Token salah!"); }
  }
  
  function mulaiUjian(){
    const elem=document.documentElement;
    if(elem.requestFullscreen) elem.requestFullscreen();
    intro.style.display='none'; examBox.style.display='block';
    document.body.classList.add('mode-ujian'); isExamRunning=true;
  }
  
  function batalkanUjian(alasan){
    if(!isExamRunning) return;
    isExamRunning=false; 
    examBox.innerHTML=""; 
    examBox.style.display='none';
    alertBox.style.display='flex'; 
    reasonText.innerText="Pelanggaran: "+alasan; 
    if(document.exitFullscreen) document.exitFullscreen();
  }

  // Pelanggaran #1: Pindah Tab / Minimize
  document.addEventListener("visibilitychange",()=>{
    if(document.hidden && isExamRunning) batalkanUjian("Pindah Tab / Minimize");
  });

  // Pelanggaran #2: Keluar Fullscreen
  document.addEventListener("fullscreenchange",()=>{
    if(!document.fullscreenElement && isExamRunning) batalkanUjian("Keluar Fullscreen");
  });
  
  // Pelanggaran #3: Kehilangan Fokus (Split Screen/Aplikasi Lain)
  window.addEventListener("blur",()=>{
    if(isExamRunning){
      setTimeout(()=>{
        if(document.hidden || !document.hasFocus()) batalkanUjian("Kehilangan Fokus");
      },1000);
    }
  });

  // Pelanggaran #4: Membuka DevTools/Inspect Element
  document.addEventListener("contextmenu",e=>e.preventDefault()); // Matikan Klik Kanan
  document.addEventListener("keydown",e=>{
    // Deteksi F12 (123), Ctrl+Shift+I/J (73/74), Ctrl+U (85)
    if(e.keyCode===123 || (e.ctrlKey && e.shiftKey && (e.keyCode===73||e.keyCode===74)) || (e.ctrlKey && e.keyCode===85)){
      e.preventDefault(); 
      batalkanUjian("Membuka DevTools / Inspect Element");
    }
  });
</script>

Salin seluruh kode di atas. Jangan lupa ganti URL Google Form dan token rahasia.

4. 💡 Penjelasan Fitur Anti-Curang (Ringkas)

Sistem ini beroperasi di client-side (browser siswa) dan menghentikan ujian jika mendeteksi:

Pindah Tab: Menggunakan event visibilitychange.
Keluar Fullscreen: Menggunakan event fullscreenchange.
Split Screen/Kehilangan Fokus: Menggunakan event blur.
Membuka DevTools: Memblokir klik kanan dan shortcut keyboard (F12, Ctrl+Shift+I/J, dll.).