Meskipun ada berbagai Add-on di Marketplace Google, saya akan memberikan alternatif yang lebih fleksibel dan dapat disematkan di blog guru tanpa batasan akses karena gratis.
Saya telah memodifikasi kode sebelumnya dengan menyesuaikan tampilan dan menambah aksi setelah waktu pengerjaan habis. Soal online akan ditutup secara otomatis dan akan muncul tombol "Ulangi Soal" untuk membuka soal online kembali. Namun, kode ini belum bisa memaksa hasil pekerjaan siswa terkirim saat waktu habis.
Jika Anda ingin mencoba kode Countdown Timer Soal Online , pastikan Anda dapat menyematkan kode soal online di blog atau situs web Anda, karena kode ini bekerja tidak langsung di Google Drive, melainkan bekerja saat diletakan di blog atau situs web Anda.
Berikut ini adalah langkah-langkahnya:
- Buatlah soal online seperti biasa di Google Drive dengan memilih fitur Google Form. Setelah selesai dibuat, klik tombol Kirim dan pilih Sematkan HTML, lalu copy script soal online yang ada.
- Login ke blog Anda dan buat entri baru atau posting baru.
- Copy kode javascript dan kode css berikut di kolom postingan blog Anda, pastikan dalam mode HTML (Bukan Tampilan Menulis):
- Salin dan tempel kode countdown timer dan CSS versi 2 ke dalam editor HTML Anda.
- Ganti teks warna merah dengan kode soal online Anda. Ganti warna biru dengan angka sesuai kebutuhan Anda, misalnya jika Anda ingin mengatur waktu 90 menit, ganti "60" dengan "90".
- Publikasikan kode pada halaman web Anda dan lihat hasilnya. Anda dapat mengunjungi halaman SOAL ONLINE untuk melihat contoh kode yang sudah diimplementasikan.
<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.tretanjamal.com ::.</div>
</div>
<!--Edit link soal online anda di bawah ini -->
<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:absolute;top:0;left:0;height:100%;width:100%;background-color:#90a5e1;border:none;z-index:9999999}#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:99999999}#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}#pembuat{position:fixed;bottom:0;left:0;width:100%;background-color:#333;color:#fff;text-align:center;padding:10px}@media screen and (max-width: 768px){#countdown{font-size:18px}#overlay-text{font-size:24px}#reset-button{padding:5px 10px;font-size:18px}}
</style>
<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.tretanjamal.com ::.</div>
</div>
<!--Edit link soal online anda di bawah ini -->
<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:absolute;top:0;left:0;height:100%;width:100%;background-color:#90a5e1;border:none;z-index:9999999}#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:99999999}#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}#pembuat{position:fixed;bottom:0;left:0;width:100%;background-color:#333;color:#fff;text-align:center;padding:10px}@media screen and (max-width: 768px){#countdown{font-size:18px}#overlay-text{font-size:24px}#reset-button{padding:5px 10px;font-size:18px}}
</style>
Pastikan untuk memahami dan mengikuti petunjuk dengan hati-hati agar kode dapat berfungsi dengan baik dan sesuai dengan kebutuhan Anda.
Dengan mengikuti langkah-langkah di atas, Anda sekarang dapat membuat countdown timer pada Google Form dengan mudah. Jangan ragu untuk mengembangkan fitur ini dan membuat soal online yang menarik dan inovatif. Selamat mencoba!
1 komentar