DOKUMENTASI FITUR SISTEM UJIAN ONLINE (CBT)

Platform: Web Based Computer Based Test

Bahasa Pemrograman: HTML, CSS, JavaScript (Native)

Dokumentasi ini adalah acuan lengkap untuk membuat sistem ujian online dengan fitur yang sama persis. Anda cukup copy paste dokumentasi ini ke AI, kemudian berikan soal baru sesuai ketentuan, maka AI akan menghasilkan kode yang siap pakai.

A. FITUR KEAMANAN DAN INTEGRITAS UJIAN

1. Fullscreen Mode: Memaksa layar ujian masuk ke mode layar penuh. Jika keluar dari fullscreen, sistem akan mendeteksi.

2. Detection Switch Tab atau Aplikasi: Mendeteksi ketika peserta keluar dari tab ujian atau membuka aplikasi lain. Setiap kali keluar akan tercatat sebagai pelanggaran.

3. Pelanggaran Counter: Menghitung jumlah peserta keluar dari ujian. Pelanggaran ditampilkan di layar ujian dan di laporan akhir.

4. Peringatan Fullscreen: Popup peringatan merah besar muncul ketika peserta keluar dari ujian. Disertai alarm suara.

5. Alarm Suara Otomatis: Suara alarm berbunyi saat terdeteksi keluar dari ujian. Alarm berhenti otomatis setelah 5 detik atau saat peserta kembali ke ujian.

6. Laporan Integritas: Di akhir ujian menampilkan status "BERSIH" jika tidak ada pelanggaran, atau "TERINDIKASI MENCONTEK" jika ada pelanggaran.

7. Disable Right Click: Mencegah klik kanan pada mouse untuk membuka inspect element atau copy paste.

8. Disable Text Selection: Mencegah peserta melakukan seleksi atau blok teks pada soal menggunakan CSS user-select none.

9. Token Ujian: Peserta harus memasukkan token yang benar untuk memulai ujian. Token default adalah "11asun86" dan bisa diubah.

10. Watermark Background: Background layar ujian memiliki watermark transparan bertuliskan nama ujian dan mapel yang tidak mengganggu pandangan.

B. FITUR LOGIN DAN DATA PESERTA

11. Form Login Empat Kolom: Terdiri dari Nama Lengkap (text input), Kelas (dropdown select), Nomor Peserta (text input), dan Token Ujian (password input).

12. Dropdown Kelas: Pilihan kelas dapat disesuaikan. Format yang digunakan misalnya "X1 (Sepuluh 1) - Semester 2", "X2 (Sepuluh 2) - Semester 2", dan seterusnya.

13. Validasi Input: Semua field harus diisi. Token harus sesuai dengan yang ditentukan. Jika tidak sesuai, muncul pesan error merah di bawah kolom token.

14. Live Timestamp: Menampilkan jam real-time (HH:MM:SS) di pojok kanan atas pada security badge.

C. FITUR UJIAN CORE (CBT CORE)

15. Randomized Soal Order: Urutan soal (dari soal nomor 1 sampai total soal) diacak untuk setiap peserta. Siswa A dan siswa B mendapat urutan soal yang berbeda.

16. Randomized Pilihan Jawaban: Pilihan jawaban (A, B, C, D, E untuk pilihan ganda, dan A-O untuk menjodohkan) diacak untuk setiap peserta. Ini mencegah aksi contek jawaban huruf antar peserta.

17. Tiga Jenis Soal dalam Satu Ujian: Sistem mendukung tiga jenis soal sekaligus yaitu Pilihan Ganda dengan pilihan A-B-C-D-E, Benar Salah dengan pilihan Benar dan Salah, dan Menjodohkan dengan pilihan A sampai O.

18. Timer atau Waktu Ujian: Durasi ujian default 120 menit atau 7200 detik. Tampilan countdown dalam format HH:MM:SS.

19. Peringatan Waktu Habis: Ketika waktu tersisa 5 menit atau 300 detik, tampilan timer berubah warna menjadi kuning. Ketika 5 menit terakhir, timer berwarna merah dan berkedip.

20. Penanda Soal: Menampilkan informasi "Soal X / Total Soal" di atas pertanyaan.

21. Skor Langsung (Real-time Score): Menampilkan jumlah jawaban benar dan nilai dalam skala 0-100 secara langsung di layar.

22. Tombol Soal Selanjutnya: Tombol Next baru muncul setelah peserta memilih jawaban. Ini mencegah peserta mengosongkan jawaban.

23. Highlight Jawaban Setelah Memilih: Setelah memilih jawaban, opsi yang dipilih akan berubah warna. Hijau berarti jawaban benar, Merah berarti jawaban salah. Ini memberikan koreksi langsung.

24. Menyimpan Hasil Per Soal: Setiap jawaban tersimpan dalam array userAnswers yang berisi ID soal asli (nomor 1 sampai total soal) bukan urutan tampilan.

D. FITUR HASIL UJIAN (RESULT SCREEN)

25. Informasi Lengkap Peserta: Menampilkan Nama Peserta, Kelas, Nomor Peserta, Waktu Mulai, Waktu Selesai, Lama Pengerjaan, dan Tanggal Ujian.

26. Laporan Integritas: Menampilkan jumlah keluar aplikasi selama ujian dan status integritas (BERSIH atau TERINDIKASI MENCONTEK).

27. Skor Akhir Nilai: Menampilkan nilai dalam skala 0-100. Disertai status LULUS jika nilai mencapai atau melebihi passing grade (default 70), atau TIDAK LULUS jika di bawah passing grade.

28. Kode Verifikasi Unik: Generate kode random 8 karakter dengan format VER-XXXX-XXXX untuk validasi dan arsip hasil ujian.

29. Grid Jawaban 50 Soal: Tampilan lingkaran untuk setiap nomor soal. Hijau untuk jawaban benar, Merah untuk jawaban salah, Abu-abu untuk soal yang tidak dijawab.

30. Rekap Benar dan Salah: Menampilkan total jawaban benar dan total jawaban salah.

E. FITUR CETAK DAN EKSPOR

31. Cetak Hasil sebagai PNG: Menggunakan library html2canvas untuk mengubah halaman hasil ujian menjadi gambar PNG.

32. Download Otomatis: File PNG yang dihasilkan memiliki nama format "HASIL_SKI_NamaPeserta_Timestamp.png".

33. Format Cetak Rapi: Hasil cetak meliputi header ujian, tabel data peserta, tabel nilai, grid jawaban 50 soal, footer, dan kode verifikasi.

F. FITUR INTEGRASI DATA APPS SCRIPT SPREADSHEET

34. Kirim Data ke Spreadsheet: Data ujian dikirim via GET request ke URL Apps Script yang telah ditentukan.

35. Mode No-CORS: Menggunakan fetch dengan mode 'no-cors' untuk menghindari error lintas domain.

36. Indikator Pengiriman: Popup status muncul di bagian bawah layar dengan teks "Menyiapkan data ujian...", "Mengirim data ke server...", "Berhasil disimpan!", atau "Gagal menyimpan data".

37. Warna Status Pengiriman: Loading berwarna biru, Success berwarna hijau, Error berwarna merah.

38. Data yang Dikirim Lengkap: Meliputi mapel, judul ujian, token, nama lengkap, kelas, nomor peserta, waktu mulai, waktu selesai, lama pengerjaan dalam detik, jumlah keluar aplikasi, status integritas, jumlah benar, jumlah salah, nilai akhir, status lulus, kode verifikasi, dan jawaban per soal dari soal_1 sampai soal_total.

39. Format Jawaban Otomatis: Soal nomor 1 sampai 30 dikirim sebagai huruf A, B, C, D, E. Soal nomor 31 sampai 35 dikirim sebagai B untuk Benar atau S untuk Salah. Soal nomor 36 sampai 50 dikirim sebagai huruf A sampai O.

G. FITUR TAMPILAN UI UX

40. Desain Tema: Untuk SKI menggunakan tema Islami dengan warna emas #D4AF37 dan coklat #3E2723. Untuk mapel lain bisa disesuaikan.

41. Background Islamic Pattern: Tulisan arab dan teks tematik transparan di background layar.

42. Header dengan Logo: Terdapat tiga area logo yaitu ikon kiri, badge tengah, dan ikon kanan.

43. Security Badge: Menampilkan teks "SISTEM UJIAN SKI TERENKRIPSI" dan jam live.

44. Responsive Mobile: Layout menyesuaikan ukuran layar handphone. Grid jawaban berubah dari 10 kolom menjadi 5 kolom. Ukuran font dan tombol menyesuaikan.

45. Hover Effect pada Opsi: Saat mouse dihover di atas opsi jawaban, opsi tersebut bergerak sedikit ke kanan untuk efek interaktif.

46. Scroll Area Opsi: Area pilihan jawaban bisa di-scroll jika terlalu panjang, sangat berguna untuk soal menjodohkan dengan 15 pilihan.

47. Notifikasi Acak: Terdapat notifikasi kecil bertuliskan "Urutan soal dan pilihan jawaban diacak untuk setiap peserta".

H. SPESIFIKASI TEKNIS DAN KONFIGURASI

48. Jumlah Soal: Default 50 soal. Bisa diubah melalui variabel CONFIG.TOTAL_SOAL.

49. Durasi Waktu: Default 7200 detik atau 120 menit. Bisa diubah melalui variabel CONFIG.WAKTU.

50. Passing Grade: Default 70. Bisa diubah melalui variabel CONFIG.PASSING_SCORE.

51. Token Default: "11asun86". Bisa diubah melalui variabel CONFIG.TOKEN.

52. Apps Script URL: Tidak perlu diubah. URL yang digunakan adalah https://script.google.com/macros/s/AKfycbyPwnKJlJAwFrsO887D7wMT74rHTkXVTDzAAnp5A0ig704oGvH0UPWp6KvYNgka2Nmi/exec

53. Jenis Soal yang Didukung: pg untuk pilihan ganda, bs untuk benar salah, matching untuk menjodohkan.

54. Pilihan Menjodohkan: 15 opsi dari A sampai O.

55. Library Eksternal yang Digunakan: Font Awesome 6.4.0, Google Fonts (Amiri dan Poppins), html2canvas versi 1.4.1.

I. STRUKTUR BANK SOAL (CARA INPUT SOAL)

Untuk membuat soal baru, gunakan format berikut:

Soal Pilihan Ganda (type "pg") memiliki struktur: id berupa nomor urut, text berisi teks pertanyaan, type bernilai "pg", correctIndex berupa angka 0 sampai 4 yang menunjukkan posisi jawaban benar dalam array optionsText, optionsText berupa array berisi 5 pilihan jawaban.

Contoh soal pilihan ganda: { id: 1, text: "Siapakah khalifah pertama?", type: "pg", correctIndex: 0, optionsText: ["Abu Bakar", "Umar", "Utsman", "Ali", "Muawiyah"] }

Soal Benar Salah (type "bs") memiliki struktur: id berupa nomor urut, text berisi pernyataan, type bernilai "bs", correctIndex bernilai 0 untuk jawaban Benar atau 1 untuk jawaban Salah, optionsText berupa array ["Benar", "Salah"].

Contoh soal benar salah: { id: 31, text: "Abu Bakar adalah khalifah pertama.", type: "bs", correctIndex: 0, optionsText: ["Benar", "Salah"] }

Soal Menjodohkan (type "matching") memiliki struktur: id berupa nomor urut, text berisi pernyataan yang akan dijodohkan, type bernilai "matching", correctIndex berupa angka 0 sampai 14 yang menunjukkan posisi jawaban benar dalam array MATCHING_OPTIONS_TEKS, optionsText menggunakan array MATCHING_OPTIONS_TEKS yang telah ditentukan.

Contoh soal menjodohkan: { id: 36, text: "Tokoh yang mengusulkan penanggalan Hijrah", type: "matching", correctIndex: 1, optionsText: MATCHING_OPTIONS_TEKS }

Array MATCHING_OPTIONS_TEKS berisi 15 pilihan jawaban dari A sampai O yang bisa disesuaikan dengan kebutuhan mapel.

J. PANDUAN KUSTOMISASI UNTUK MAPEL LAIN

Untuk mengubah judul mapel, cari elemen title dan exam-header h1 lalu ganti teks "SKI" dengan nama mapel baru.

Untuk mengubah warna tema, cari variabel root :root lalu ganti nilai warna emas dan warna lainnya sesuai keinginan.

Untuk mengubah token ujian, cari CONFIG.TOKEN lalu ganti nilainya dengan token baru.

Untuk mengubah jumlah soal, cari CONFIG.TOTAL_SOAL lalu sesuaikan dengan jumlah soal yang dibuat.

Untuk mengubah durasi waktu, cari CONFIG.WAKTU lalu ubah nilainya dalam satuan detik. Contoh 5400 untuk 90 menit atau 3600 untuk 60 menit.

Untuk mengubah passing grade, cari CONFIG.PASSING_SCORE lalu ubah nilainya.

Untuk mengubah pilihan kelas, cari select dengan id studentClass lalu edit opsi-opsi yang ada.

Untuk membuat bank soal baru, ganti seluruh isi array BANK_SOAL dengan soal-soal baru sesuai format yang telah dijelaskan.

Untuk mengubah pilihan menjodohkan, cari MATCHING_OPTIONS_TEKS lalu ganti 15 pilihan tersebut dengan konsep atau istilah yang sesuai dengan mapel.

Untuk mengubah logo dan ikon di header, cari div dengan class logo-icon dan badge lalu ganti icon Font Awesome sesuai kebutuhan. Misalnya ganti fa-mosque dengan fa-calculator untuk mapel matematika.

URL Apps Script tidak perlu diubah. Tetap menggunakan URL yang sudah ada.

K. CATATAN PENTING

Semua fitur di atas sudah terintegrasi dan berfungsi dalam satu file HTML tunggal. Sistem ini dapat dijalankan langsung di browser tanpa perlu server. Data ujian akan otomatis terkirim ke Google Spreadsheet melalui Apps Script. Setiap siswa akan mendapatkan urutan soal dan urutan pilihan jawaban yang berbeda. Pelanggaran seperti keluar dari tab ujian akan tercatat dan mempengaruhi laporan integritas. Hasil ujian dapat dicetak sebagai gambar PNG. Sistem ini siap digunakan untuk berbagai mata pelajaran dengan modifikasi minimal pada bank soal dan konfigurasi dasar.

Dokumentasi ini adalah acuan lengkap. Untuk membuat soal mapel baru, Anda cukup copy paste dokumentasi ini ke AI, kemudian berikan soal-soal baru sesuai ketentuan yang sudah dijelaskan di bagian struktur bank soal. AI akan menghasilkan kode HTML lengkap yang siap pakai.