Cara Menambahkan Waktu Pengerjaan Soal Kuis Google Form

Google formulir atau google form saat ini banyak gunakan oleh para guru sebagai aplikasi instan ujian online. Google form sangat mudah digunakan oleh orang awam sekalipun. Termasuk para siswa juga dengan sangat mudahnya bisa mengakses kuis tanpa harus menunggu loading soal yang berat seperti aplikasi-aplikasi ujian yang lainnya.

Ketika dijadikan aplikasi ujian online ternyata google form tidak menyediakan layanan penghitung waktu mundur atau counter down. Padahal sebuah ujian online hendaknya memiliki batas waktu dalam pengerjaannya. Supaya ujian menjadi lebih menarik dan menantang siswa untuk mengerjakannya.

Sedikit solusi buat teman-teman pengguna google form untuk permasalahan tersebut, ternyata dengan menambahkan kode javascript permasalahan itu bisa diselesaikan.

Kita cuma perlu menambahkan kode javascript  berikut ini pada waktu melakukan penyematan kode HTML google form pada postingan blog. Berikut kodenya:

=========================================

<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>
=========================================

Keterangan:

• Ganti teks bewarna merah dengan kode HTML google form milik anda
• Ganti teks berwarna biru dengan jumlah waktu yang anda inginkan.
• Teks warna hitam adalah kode  javascript untuk pengitung waktu mundur/counter down.

Berikut contoh hasilnya:

Atau contoh link onlinenya bisa dilihat pada link berikut:

• https://kelas.pandani.web.id/2019/04/soal-uji-kompetensi-kelax-x-mia-1.html

Selamat mencoba!

Salam Pak Pandani