<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistem Ujian Aman</title>
<style>
/* --- CSS Global & Reset --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
transition: background-color 0.3s ease;
}
/* --- Animasi --- */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Kontainer Utama (Intro) --- */
.intro-container {
background-color: #ffffff;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 480px;
text-align: center;
animation: fadeIn 0.6s ease forwards;
}
h1 {
color: #1f2937;
font-size: 1.8rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* --- Aturan Ujian --- */
.rules-box {
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 1rem;
text-align: left;
margin-bottom: 1.5rem;
}
.rules-box p {
font-size: 0.95rem;
color: #4b5563;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 8px;
}
.rules-box p:last-child {
margin-bottom: 0;
font-weight: bold;
color: #dc2626;
}
/* --- Input Token --- */
.input-group {
margin-bottom: 1.5rem;
text-align: left;
}
label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.5rem;
}
input[type="password"] {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #d1d5db;
border-radius: 8px;
font-size: 1rem;
text-align: center;
letter-spacing: 0.3rem;
transition: border-color 0.2s;
}
input[type="password"]:focus {
outline: none;
border-color: #10b981;
}
/* --- Tombol Mulai --- */
.btn-start {
background-color: #10b981;
color: white;
border: none;
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
width: 100%;
box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.4), 0 2px 4px -1px rgba(16, 185, 129, 0.2);
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-start:hover {
transform: scale(1.03);
box-shadow: 0 6px 12px -2px rgba(16, 185, 129, 0.5);
}
.btn-start:active {
transform: scale(0.98);
}
/* --- Konten Ujian (Iframe Google Form) --- */
.exam-container {
display: none;
width: 100%;
height: 100vh;
background: white;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
/* --- Layar Blokir / Diskualifikasi --- */
.block-screen {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #dc2626;
color: white;
z-index: 99999;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
}
.block-screen h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.block-screen p {
font-size: 1.2rem;
max-width: 600px;
}
</style>
</head>
<body>
<!-- 1. TAMPILAN AWAL (INTRO SCREEN) -->
<div class="intro-container" id="introScreen">
<h1>🛡️ UJIAN AMAN</h1>
<div class="rules-box">
<p>❌ Dilarang Pindah Tab</p>
<p>❌ Dilarang Keluar Fullscreen</p>
<p>❌ Dilarang Split Screen</p>
<p>⚠️ 1x Pelanggaran = Diskualifikasi</p>
</div>
<div class="input-group">
<label for="tokenInput">Masukkan Token Ujian:</label>
<input type="password" id="tokenInput" placeholder="••••••" maxlength="6">
</div>
<button class="btn-start" onclick="tryStartExam()">MULAI UJIAN</button>
</div>
<!-- 2. KONTEN UJIAN (IFRAME GOOGLE FORM) -->
<div class="exam-container" id="examScreen">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdT3Guiv5CCSLD746rpWkr3e8tYQfT3PHAPXIZVynMAgDsB9w/viewform?embedded=true">Memuat…</iframe>
</div>
<!-- 3. LAYAR MERAH DISKUALIFIKASI -->
<div class="block-screen" id="blockScreen">
<h2>TERDETEKSI KECURANGAN!</h2>
<p id="violationReason">Anda telah melanggar aturan ujian.</p>
</div>
<!-- --- JAVASCRIPT --- -->
<script>
const VALID_TOKEN = "654321";
let isExamActive = false;
// Validasi Token & Masuk Mode Fullscreen
function tryStartExam() {
const inputToken = document.getElementById('tokenInput').value;
if (inputToken !== VALID_TOKEN) {
alert("Token tidak valid! Silakan periksa kembali.");
return;
}
// Minta akses Fullscreen ke Browser
const docEl = document.documentElement;
if (docEl.requestFullscreen) {
docEl.requestFullscreen();
} else if (docEl.mozRequestFullScreen) { // Firefox
docEl.mozRequestFullScreen();
} else if (docEl.webkitRequestFullscreen) { // Chrome, Safari, Opera
docEl.webkitRequestFullscreen();
} else if (docEl.msRequestFullscreen) { // IE/Edge
docEl.msRequestFullscreen();
}
// Pindah layar ke area ujian
document.getElementById('introScreen').style.display = 'none';
document.getElementById('examScreen').style.display = 'block';
isExamActive = true;
}
// Fungsi Trigger Diskualifikasi
function triggerDisqualification(reason) {
if (!isExamActive) return;
isExamActive = false;
document.getElementById('examScreen').style.display = 'none';
document.getElementById('introScreen').style.display = 'none';
const blockScreen = document.getElementById('blockScreen');
const reasonText = document.getElementById('violationReason');
reasonText.innerText = `Sistem mengunci ujian Anda karena: ${reason}. Anda dinyatakan gugur dari ujian ini.`;
blockScreen.style.display = 'flex';
// Paksa keluar fullscreen setelah diblokir demi kenyamanan sistem pengguna
if (document.exitFullscreen) { document.exitFullscreen(); }
}
/* --- SISTEM KEAMANAN (ANTI-CURANG) --- */
// 1. Deteksi Keluar Fullscreen
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
function handleFullscreenChange() {
if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
triggerDisqualification("Keluar dari mode Fullscreen");
}
}
// 2. Deteksi Pindah Tab / Kehilangan Fokus (Split Screen / Alt+Tab)
window.addEventListener('blur', () => {
triggerDisqualification("Membuka aplikasi lain, pindah tab, atau split screen");
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
triggerDisqualification("Meninggalkan halaman ujian (Pindah Tab)");
}
});
// 3. Deteksi Pembukaan DevTools via Shortcut Keyboard
window.addEventListener('keydown', (e) => {
// Blokir F12
if (e.key === "F12") {
e.preventDefault();
triggerDisqualification("Mencoba membuka Developer Tools (F12)");
}
// Blokir Ctrl+Shift+I (Inspect) dan Ctrl+Shift+J (Console)
if (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'i' || e.key === 'J' || e.key === 'j')) {
e.preventDefault();
triggerDisqualification("Mencoba membuka Developer Tools (Shortcut)");
}
// Blokir Ctrl+U (View Source)
if (e.ctrlKey && (e.key === 'U' || e.key === 'u')) {
e.preventDefault();
triggerDisqualification("Mencoba melihat Source Code (Ctrl+U)");
}
});
// 4. Deteksi DevTools Berdasarkan Perubahan Ukuran Layar Mendadak (Alternatif)
window.addEventListener('resize', () => {
if (isExamActive) {
const threshold = 160; // Toleransi pixel panel DevTools
if ((window.outerWidth - window.innerWidth) > threshold || (window.outerHeight - window.innerHeight) > threshold) {
triggerDisqualification("Membuka Developer Tools / Mengubah ukuran jendela browser");
}
}
});
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar