Membuat Countdown Timer Soal Online Google Drive Dengan Isyarat Javascript

Pada posting sebelumnya sudah aku bahas bagaimana cara memberi batasan waktu pada soal online yang dibentuk dengan google formulir yang ada pada google drive, fitur memberi batasan waktu ini sesungguhnya juga belum menjawab harapan para pengguna google formulir, yaitu berupa harapan memberi batasan waktu dengan tanda waktu mundur menyerupai halnya pada soal online yang dibentuk dengan aplikasi quiz creator. Disamping itu, fitur batasan waktu ini juga hanya tersedia kalau kita memakai isyarat jadwal dari pihak ketiga yang terintegrasi dengan google formulir.

Saya sesungguhnya masih suka memakai aplikasi ispring quiz creator yang mempunyai fitur lengkap, suport HTML5 sehingga sanggup diakses dengan perangkat handphone, (anda sanggup melihat koleksi soal online dengan ispring quiz creator di: TIK Sekolah Menengah Pertama Kelas 9, untuk soal-soal memakai aplikasi ispring quiz creator), aplikasi ini menyediakan fitur batasan waktu dengan perhitungan waktu mundur, banyak sekali model soal tersedia di aplikasi quiz creator, hanya saja Guru cenderung direpotkan ketika mau merekap hasil pekerjaan siswa, alasannya yaitu laporan terkirim ke email guru satu persatu, atau harus mengecek satu persatu tiap komputer siswa, disamping itu ketika aplikasi soal online mau dionlinekan akan butuh kawasan penyimpanan/ hosting berbayar.

Dengan banyak sekali pertimbangan diantaranya akomodasi pembuatan soal pilihan ganda, pengelolaan rekap hasil pekerjaan siswa, dan tentunya gratis selamanya, karenanya untuk "saat ini" aku putuskan memaksimalkan google formulir untuk pembuatan soal online yang sanggup dipakai sebagai latihan siswa, mengerjakan soal-soal banyak sekali mata pelajaran, ulangan harian siswa, dll.

Salah satu harapan aku ketika ini yaitu bagaimana cara menciptakan countdown timer soal online sehingga siswa akan tahu waktu pengerjaan soalnya, aku coba cari fitur-fitur di google drive, ternyata belum tersedia, lalu cari dikode suplemen dari pihak ketiga, ada yang menyediakan, tapi modelnya bukan terintegrasi ke google drive, dan ini kurang menarik berdasarkan saya, dan karenanya untuk mengobati harapan ini, aku dapatkan isyarat java script countdown timer di stackoverflow.com, dengan sedikit editan suplemen css agar sesuai harapan saya, karenanya Anda sanggup melihat teladan hasilnya pada postingan soal online Perguruan Tinggi Swasta BTIK disini, anda sanggup melihat countdown timer yang aku atur 20 menit, akan berjalan mundur ketika soal online dengan google drive ini dibuka, dan tampak terintegrasi dengan soal online google drive ini.

Jika anda berminat memakai Kode javascript countdown timer ini, pastikan bahwa anda sanggup menyematkan isyarat soal online di blog atau web anda, alasannya yaitu isyarat ini bekerja tidak pribadi di google drive, melainkan bekerja ketika diletakan di blog/ web, lalu untuk soal onlinenya anda pilih metode sematkan, perhatikan langkah-langkahnya sebagai berikut:

Buatlah soal online menyerupai biasa di google drive, dengan menentukan fitur google formulir, sesudah selesai anda buat, silahkan anda klik tombol kirim/ send dan pilih sematkan HTML, dan copy script soal online yang ada.
Login ke blog anda, dan buka entri baru/ posting baru,
Copy isyarat javascript dan isyarat 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>
Kode javascript cuntdown timer dan isyarat css di atas, yang perlu anda rubah yaitu yang aku beri warna merah dan biru, untuk warna merah silahkan anda ganti dengan isyarat soal online anda, sedangkan untuk warna biru silahkan anda ganti dengan angka sesuai kebutuhan anda, teladan di atas yaitu 20 menit. Contoh penerapan di blog, sanggup anda lihat di gambar berikut:
Klik publikasikan untuk menerbitkan soal online.

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

Jawabanya tidak ada agresi apa-apa kalau anda hanya memakai isyarat javascript countdown timer di atas, alasannya yaitu memang isyarat diatas terpisah dengan soal online google drive ini. paling tidak dengan adanya countdown timer ini, sanggup memberi batasan atau tanda pada penerima 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 karenanya hingga pada fitur sesuai dengan harapan kita sebagai pengguna google formulir fitur kuis ini.

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