Assalamualaikum wr.wb
Perkenalkan saya, panggil aja Bang_Yoed .Nah, bagi sobat yang pengen belajar membuat soal online dengan Count Down Timer bisa dipelajari disini ya ?! Lengkap binggo deh ya, mengapa Bang_Yoed buat postingan ini ? Yah karena Bang_Yoed sering lupa, jadi biar keinget terus, jadikan artikel aja, semoga bermanfaat ya sobat, kalo belum paham juga silahkan tanyakan langsung ke Bang_Yoed , hubungi aja nomor HPBang_Yoed di menu profil ada kok. Yuks, kita pelajari sama-sama.
LANGKAH 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
LANGKAH 2
login ke blog anda dan buka entri / postingan baruLANGKAH 3
copy kode javasript dan kode css berikut di kolom postingan blog Anda, pastikan dalam mode tampilan HTML (bukan tampilan menulis)
<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>
<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>
LANGKAH 4
kode javascript count down timer dan kode css diatas, yang perlu Anda rubah adalah yang saya beri warna biru dan merah, untuk warna merah silahkan Anda ganti dengan kode soal online Anda, sedangkan untuk warna biru silahkan Anda ganti dengan angka sesuai keperluan Anda, contoh diatas adalah 20 menit.
LANGKAH 5
Klik Publikasikan untuk menerbitkan soal online.Demikian cara membuat CountDownTimer Soal Online Google Drive dengan kode javascript.
Semoga bermanfaat.
Artikel ini dikutip dari mr.mung.com
0 komentar:
Posting Komentar