Membuat Countdown Timer Soal Online Google Form dengan Javascript Versi 2, Waktu Habis Soal Otomatis Tertutup

16 Feb 2023 - - 12

Pada posting Membuat Countdown Timer Soal Online Google Form dengan Javascript  tahun 2018 (5 tahun yang lalu) saya pernah menyampaikan harapan semoga beberapa tahun kedepan google akan menambahkan fitur countdown timer pada form yang dijadikan sebagai quiz/ soal online. Namun, ternyata sampai saat ini fitur tersebut belum tersedia. 

Kan sudah tersedia berbagai Add-on di marketplace google, hmm.... maaf sementara saya abaikan dulu, karena saya cari yang lebih flexibel bisa disematkan di blog Guru, dan tidak ada batasan akses karena GRATIS.

Pada posting ini saya modifikasi kode sebelumnya dengan mengatur tampilan dan menambah aksi setelah waktu pengerjaan soal habis, yaitu soal online akan tertutup dan akan muncul tombol bisa mengulang untuk membuka soal online kembali. Sayangnya pada kode ini belum bisa memaksa hasil pekerjaan siswa terkirim saat waktu habis, berikut tampilan soal online saat dibuka, dan saat waktu habis.

 

Bagi anda yang akan mencoba kode Countdown Timer Soal Online versi 2 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 Tampilan Menulis):
   
   <div id="countdown"></div>
   <div id="overlay">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0NuB_HmJNBCRMJtVqsVzNrN1rsunfAsRjoteYr-Qvzh_dmpWUsjlq8Lph_kojJQlRlngicsy957pYGxUy4KsmocET9_EiNCNu8wl_5Huc_YBp1VRaXvrPkPGfbzXKSc4EBgMAs8Xekktlk-vt5KLExCWkUXRkspBfabLC91CCzCMCmHQrsR0sQ/s1600/selesai.gif"/>
   <button id="reset-button">Ulangi Soal</button>
   <div id="pembuat">.:: www.mrmung.com ::.</div>
   </div>
   
   <!--Edit link soal online anda di bawah ini -->
   <div class="background"></div>
   <iframe id="quiz-frame" src="https://docs.google.com/forms/d/e/1FAIpQLScqPjRKcllwYK_tp3fpYlZ9aZWIoJds33-NnlIx9qajSfPuOg/viewform?embedded=true" frameborder="0"></iframe>
   
   <div style="position: fixed; left: 2px; top: 4px;z-index:9999999999;"> <a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-2Uz6rYvIRz4UqA051xLMnI_O5-tYSsGdriZtdnUWRKHXsYZFV3ULvGSpC-FUuctIf0PJEOuFsh5JieFTVgeVpA0f9DD58vQTHj7ONoYWWLogqXPUOR63UVEMLZ0KChd8dZJm6pDwjh3otx83dJyU7ix61J83iJjw1ltWSmDYdsvYu5ImoYlEUQ/s1600/icon-home.png" alt="Home"></a> </div>
   
   <script>
   // Seting waktu pengerjaan soal di bawah ini (contoh: 60 menit)
   var countDownDate = new Date().getTime() + 60 * 60 * 1000;
   var x=setInterval(function(){var e=(new Date).getTime(),t=countDownDate-e,n=Math.floor(t/6e4),e=Math.floor(t%6e4/1e3);document.getElementById("countdown").innerHTML="Waktu Tersisa: "+n+" menit "+e+" detik",t<0&&(clearInterval(x),document.getElementById("quiz-frame").style.display="none",document.getElementById("overlay").style.display="flex",document.getElementById("reset-button").addEventListener("click",function(){location.reload()}))},1e3); </script>
   
   <style> body{margin:0;padding:0}iframe{position:fixed;top:0;left:0;width:100%;height:100%;border:none;z-index:9999}.background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#90a5e1;z-index:9998}#countdown{position:fixed;top:0;left:0;width:100%;height:30px;background-color:#0b26af;color:#fff;font-size:20px;text-align:center;padding-top:5px;z-index:99999}#overlay{position:fixed;top:0;left:0;height:100%;width:100%;background-color:#333;display:none;align-items:center;justify-content:center;z-index:99999}#overlay-text{font-size:25px;color:#fff;text-align:center;margin-bottom:20px}#reset-button{margin-top:10px;padding:10px 20px;background-color:#4CAF50;color:#fff;font-size:24px;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;text-transform:uppercase}#reset-button:hover{background-color:#fff;color:#4CAF50}#comments {display: none;}#pembuat{position:fixed;bottom:0;left:0;width:100%;background-color:#333;color:#fff;text-align:center;padding:10px;z-index:99999999}@media screen and (max-width: 768px){#countdown{font-size:18px}#overlay-text{font-size:24px}#reset-button{padding:5px 10px;font-size:18px}} </style>
   
   
4. Kode javascript cuntdown timer versi 2 dan kode css di atas, yang perlu dirubah adalah teks warna merah, 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 60 menit.
   
5. Klik publikasikan untuk menerbitkan soal online.

Untuk melihat hasil kode ini silahkan kunjungi SOAL ONLINE.

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