Tags

, , , , , ,

Tahun 2015 Sekolah tempat aku bekerja diwajibkan mengikuti Ujian Nasional Berbasis Komputer atau yang lebih sering disebut UNBK. Tentu saja hal ini membuat kelabakan sekolah kami (dan sekolah internasional lainnya) karena instruksi turun teramat sangat mendadak. Untungnya kami diikutkan pelatihan UNBK di Hotel Surya Indah Batu.

Sebagai peserta UNBK yang baru pertama kali dan terlambat mengikuti Pelatihan sebelumnya, tentu sekolah kami harus banyak belajar dari sekolah lain yang sudah pernah mengikuti UNBK. Dari sisi Siswa peserta UNBK. Tentu saja hal ini membuat mereka sedikit takut, khawatir karena mereka tidak pernah melihat dan mengetahui sistem Ujian Online dari Diknas. Untungnya Diknas daerah kami menyediakan satu sistem simulasi CBT, namun ternyata Sistem ini tidak sama dengan UNBK.

Untuk itu saya berinisiatif untuk membuat sistem CBT yang setidaknya mirip dengan UNBK. Tujuan awal pembuatan ini adalah agar siswa pada umumnya (anak saya sendiri khususnya) nantinya bisa familiar dengan CBT UNBK dan tidak perlu takut lagi. Yang perlu mereka pikirkan hanyalah belajar soal yang akan diujikan saja bukan CBTnya karena sistem CBTnya sudah biasa dilakukan.

Selain database MySQL juga ada 2 modul yang akan kita pakai :

  1. Modul CBT untuk siswa ujian.
  2. Modul Admin yang biasa disebut CBTSync oleh para proktor dan puspendik.

Masing-masing modul akan kita bahas. satu persat

* Modul CBT

Modul ini adalah halaman yang akan digunakan oleh siswa  selama mengikuti Ujian Online CBT. coba perhatikan video hasil running script yang sudah saya buat

berikut ini :

Yang kita perlukan untuk membuat tampilan seperti CBT Puspendik adalah Bootstrap 3, kemampuan modifikasi css, serta beberapa plugin library jquery, diantaranya :

  • Header Logo hilang dan navigasi menu soal serta waktu tersisa tetap diatas
    Pada tampilan UNBK Puspendik apabila kita scroll halaman kebawah maka logo akan menghilang dan header navigasi akan tetap selalu ada diatas halaman menampilkan waktu, soal dan menu font size. Untuk membuat hal seperti ini kita bisa menggunakan jquery :
    jquery-scrolltofixed.js
  • Hitung Mundur
    Ketika user belum pernah login maka countdown dimulai dari saat dia klik tombol mulai pada halaman konfirmasi tes. Namun apabila user pernah login maka setiap gerakan mouse dan keyboard akan mencatat waktu terakhir aktifitas ke database. Dan waktu terakhir aktifitas inilah yang akan dihitung dan ditampilkan apabila user terpaksa logout karena idle. Hal ini juga berguna apabila koneksi atau listrik mati soal jawaban dan waktu sudah tersimpan didatabase.
    Untuk keperluan ini kita bisa menggunakan plugin library

    jquery.countdownTimer.js$(function(){
     $('#h_timer').countdowntimer({
     hours : ,
     minutes :,
     seconds:,
     size : "lg",
     timeUp : timeisUp
     });
     });
     function timeisUp() {
     alert("Waktu pengerjaan sudah habis");
     setTimeout(function() {
     window.location.href = $("a")[0].href;
     }, 2000);
     //Code to be executed when timer expires.
     window.location="logout.php";
     }
  • Pilihan Merubah Ukuran font
    Untuk membuat ukuran font yang berubah tergantung pilihan pada menu navigasi kita menggunakan plugin jquery text resizer :
    jquery.resizer.min.js atau jquery.jfontsize-1.0.js
  • Slider Daftar Soal
    Slider menu samping yang memuat daftar soal serta jawaban. Untuk keperluan ini kita menggunakan 2 plugin jquery. Yaitu : sidein_menu.js  untuk  slider navigasi soal dan yang kedua adalah masonry.js untuk mengatur susunan soal pada kotak slider.
  • Memutar soal Listening Audio maupun Video
    Setelah mencari tahu plugin untuk memutar file mp3, saya menemukan plugin jplayer yang mempunyai tampilan seperti soal listeningnya CBT UNBK.Untuk plugin kita menggunakan : jquery.jplayer.min.js
  • Menjawab dengan keyboard
    Pada CBT UNBK dari diknas siswa biisa memilih jawaban menggunakan tombol pada Papan keyboard, hal ini sangat berguna pada pelaksanaan UNBK kemarin. Karena ada satu keadaan dimana mouse tidak bisa digunakan maka siswa bisa menjawab dengan menekan pilihan jawaban dengan keyboard. misal tombol A untuk pilihan jawaban A.
    Hal ini ternyata bisa dilakukan dengan identifikasi DOM getelementbyID. seperti javascript berikut :

    if (e.which == 65) {
    var tekan = 'A';
     document.getElementById("A").checked = true;    
    }

Dengan menggunakan plugin diatas dikombinasikan dengan script php dan database mysql CBT mirip UNBK bisa kita buat sebagaimana video diatas. Untuk yang ingin langsung sedot scriptnya. Halaman admin proktornya seperti ini.

proktor

Advertisements