Membuat Countdown Timer Soal Online Google Drive dengan Kode Javascript

21 Sep 2018 - - 74

Pada posting sebelumnya sudah saya bahas bagaimana cara memberi batasan waktu pada soal online yang dibuat dengan google formulir yang ada pada google drive, fitur memberi batasan waktu ini sebenarnya juga belum menjawab keinginan para pengguna google formulir, yaitu berupa keinginan memberi batasan waktu dengan tanda waktu mundur seperti halnya pada soal online yang dibuat dengan aplikasi quiz creator. Disamping itu, fitur batasan waktu ini juga hanya tersedia jika kita menggunakan kode program dari pihak ketiga yang terintegrasi dengan google formulir.

Saya sebenarnya masih suka menggunakan aplikasi ispring quiz creator yang memiliki fitur lengkap, suport HTML5 sehingga bisa diakses dengan perangkat handphone, (anda bisa melihat koleksi soal online dengan ispring quiz creator di: https://soal.mrmung.com/, dan juga bisa anda lihat disalah satu aplikasi android saya TIK SMP Kelas 9, untuk soal-soal menggunakan aplikasi ispring quiz creator), aplikasi ini menyediakan fitur batasan waktu dengan perhitungan waktu mundur, berbagai model soal tersedia di aplikasi quiz creator, hanya saja Guru cenderung direpotkan saat mau merekap hasil pekerjaan siswa, karena laporan terkirim ke email guru satu persatu, atau harus mengecek satu persatu tiap komputer siswa, disamping itu saat aplikasi soal online mau dionlinekan akan butuh tempat penyimpanan/ hosting berbayar.

Dengan berbagai pertimbangan diantaranya kemudahan pembuatan soal pilihan ganda, pengelolaan rekap hasil pekerjaan siswa, dan tentunya gratis selamanya, akhirnya untuk "saat ini" saya putuskan memaksimalkan google formulir untuk pembuatan soal online yang bisa digunakan sebagai latihan siswa, mengerjakan soal-soal berbagai mata pelajaran, ulangan harian siswa, dll.

Salah satu keinginan saya saat ini adalah bagaimana cara membuat countdown timer soal online sehingga siswa akan tahu waktu pengerjaan soalnya, saya coba cari fitur-fitur di google drive, ternyata belum tersedia, kemudian cari dikode tambahan dari pihak ketiga, ada yang menyediakan, tapi modelnya bukan terintegrasi ke google drive, dan ini kurang menarik menurut saya, dan akhirnya untuk mengobati keinginan ini, saya dapatkan kode java script countdown timer di stackoverflow.com, dengan sedikit editan tambahan css supaya sesuai keinginan saya, akhirnya Anda bisa melihat contoh hasilnya pada postingan soal online PTS BTIK disini, anda bisa melihat countdown timer  yang saya atur 20 menit, akan berjalan mundur saat soal online dengan google drive ini dibuka, dan tampak terintegrasi dengan soal online google drive ini.

Jika anda berminat menggunakan Kode javascript  countdown timer ini, pastikan bahwa anda bisa menyematkan kode soal online di blog atau web anda, karena kode ini bekerja tidak langsung di google drive, melainkan bekerja saat diletakan di blog/ web, kemudian untuk soal onlinenya anda pilih metode sematkan, perhatikan langkah-langkahnya sebagai berikut:

1. Buatlah soal online seperti biasa di google drive, dengan memilih fitur google formulir, setelah selesai anda buat, silahkan anda klik tombol kirim/ send dan pilih sematkan HTML, dan copy script soal online yang ada.
   
2. Login ke blog anda, dan buka entri baru/ posting baru, 
3. Copy kode javascript dan kode css berikut di kolom postingan blog anda, pastikan dalam mode HTML (BUKAN compose):
   
   <div class="mungholder">
   <iframe frameborder="0" height="600" marginheight="0" marginwidth="0" src="https://docs.google.com/forms/d/e/1FAIpQLScehXwGUxpdqqZ3WpKdJ5Gmocn1JDteWD1kj2zfFQ2uuzZ-XQ/viewform?embedded=true" width="100%">Memuat...</iframe><br />
   <div id="timersoal">
   Waktu Pengerjaan: <span id="time">20:00</span> menit!</div>
   </div>
   
   <script type="text/javascript">
   //<![CDATA[
   function startTimer(t,n){var e,r,a=t;setInterval(function(){e=parseInt(a/60,10),r=parseInt(a%60,10),e=e<10?"0"+e:e,r=r<10?"0"+r:r,n.textContent=e+":"+r,--a<0&&(a=t)},1e3)}
   window.onload = function () {
       var fiveMinutes = 60 * 20,
           display = document.querySelector('#time');
       startTimer(fiveMinutes, display);
   };
   //]]>
   </script>
   
   <style>
   .mungholder{width:100%;height:100%;position:relative}
   #time{color: #f5fe02;}
   #timersoal{background-color: #222;border-radius: 5px;color: #f5f5f5;font-size: 15px;line-height: 1.54;padding: 3px;text-align: center;border: 1px solid black;position: absolute;top: 0;left: 2px;width: 98%;font-weight: bold;}
   </style>
4. Kode javascript cuntdown timer dan kode css di atas, yang perlu anda rubah adalah yang saya beri warna merah dan biru, untuk warna merah silahkan anda ganti dengan kode soal online anda, sedangkan untuk warna biru silahkan anda ganti dengan angka sesuai kebutuhan anda, contoh di atas adalah 20 menit. Contoh penerapan di blog, bisa anda lihat di gambar berikut:
   
5. Klik publikasikan untuk menerbitkan soal online.

Mungkin pertanyaanya, apa yang akan terjadi jika waktu habis dan soal belum selesai dikerjakan?

Jawabanya tidak ada aksi apa-apa jika anda hanya menggunakan kode javascript countdown timer di atas, karena memang kode diatas terpisah dengan soal online google drive ini. paling tidak dengan adanya countdown timer ini, bisa memberi batasan atau tanda pada peserta didik dalam mengerjakan soal online yang sudah anda buat di google drive ini.

Saya yakin, seiring berjalannya waktu google akan terus mengupdate fitur-fitur di google drive, dan akhirnya sampai pada fitur sesuai dengan keinginan kita sebagai pengguna google formulir fitur kuis ini.

Demikian cara membuat Countdown Timer Soal Online Google Drive dengan Kode Javascript, Semoga Bermanfaat.