Info Penting

Tutorial Blogger Terlengkap Sistematis dilengkapi Video Tutorial

T utorial blogger di internet sangat banyak pilihannya, anda bisa memilih tutorial mana yang akan anda ikuti dan praktikkan supaya anda bi...

Artikel Terbaru

Membuat Countdown Timer Soal Online Google Drive dengan Kode Javascript

21 Sep 2018 - - 65

Pada posting sebelumnya sudah saya bahas bagaimana cara memberi batasan waktu pada soal online yang dibuat dengan google formulir yang ada pada google drive, fitur memberi batasan waktu ini sebenarnya juga belum menjawab keinginan para pengguna google formulir, yaitu berupa keinginan memberi batasan waktu dengan tanda waktu mundur seperti halnya pada soal online yang dibuat dengan aplikasi quiz creator. Disamping itu, fitur batasan waktu ini juga hanya tersedia jika kita menggunakan kode program dari pihak ketiga yang terintegrasi dengan google formulir.

Saya sebenarnya masih suka menggunakan aplikasi ispring quiz creator yang memiliki fitur lengkap, suport HTML5 sehingga bisa diakses dengan perangkat handphone, (anda bisa melihat koleksi soal online dengan ispring quiz creator di: https://soal.mrmung.com/, dan juga bisa anda lihat disalah satu aplikasi android saya TIK SMP Kelas 9, untuk soal-soal menggunakan aplikasi ispring quiz creator), aplikasi ini menyediakan fitur batasan waktu dengan perhitungan waktu mundur, berbagai model soal tersedia di aplikasi quiz creator, hanya saja Guru cenderung direpotkan saat mau merekap hasil pekerjaan siswa, karena laporan terkirim ke email guru satu persatu, atau harus mengecek satu persatu tiap komputer siswa, disamping itu saat aplikasi soal online mau dionlinekan akan butuh tempat penyimpanan/ hosting berbayar.

Dengan berbagai pertimbangan diantaranya kemudahan pembuatan soal pilihan ganda, pengelolaan rekap hasil pekerjaan siswa, dan tentunya gratis selamanya, akhirnya untuk "saat ini" saya putuskan memaksimalkan google formulir untuk pembuatan soal online yang bisa digunakan sebagai latihan siswa, mengerjakan soal-soal berbagai mata pelajaran, ulangan harian siswa, dll.

Salah satu keinginan saya saat ini adalah bagaimana cara membuat countdown timer soal online sehingga siswa akan tahu waktu pengerjaan soalnya, saya coba cari fitur-fitur di google drive, ternyata belum tersedia, kemudian cari dikode tambahan dari pihak ketiga, ada yang menyediakan, tapi modelnya bukan terintegrasi ke google drive, dan ini kurang menarik menurut saya, dan akhirnya untuk mengobati keinginan ini, saya dapatkan kode java script countdown timer di stackoverflow.com, dengan sedikit editan tambahan css supaya sesuai keinginan saya, akhirnya Anda bisa melihat contoh hasilnya pada postingan soal online PTS BTIK disinianda bisa melihat countdown timer  yang saya atur 20 menit, akan berjalan mundur saat soal online dengan google drive ini dibuka, dan tampak terintegrasi dengan soal online google drive ini.

Jika anda berminat menggunakan Kode javascript  countdown timer 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 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>
  4. Kode javascript cuntdown timer dan kode css di atas, yang perlu anda rubah adalah yang saya beri warna merah dan biru, 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 20 menit. Contoh penerapan di blog, bisa anda lihat di gambar berikut:
  5. Klik publikasikan untuk menerbitkan soal online.

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


Jawabanya tidak ada aksi apa-apa jika anda hanya menggunakan kode javascript countdown timer di atas, karena memang kode diatas terpisah dengan soal online google drive ini. paling tidak dengan adanya countdown timer ini, bisa memberi batasan atau tanda pada peserta 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 akhirnya sampai pada fitur sesuai dengan keinginan kita sebagai pengguna google formulir fitur kuis ini.

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

65 komentar

  1. minta info unk penempatan javascript bagaimana ya pak, saya coba harus ditampilkan gogel from lapau, tp unk ke tampilan tersebut tidak ada bapak

    BalasHapus
    Balasan
    1. Silahkan dicermati panduan diatas, sudah sy jelaskan.

      Hapus
  2. Terima kasih Mr Mung, akhirnya nemu cara countdown soal ulangan online.

    BalasHapus
  3. Terima kasih Mr.Mung... sangat bermanfaat...

    BalasHapus
  4. KlAu cara sisip ke slide lomba cerdas cermat bisa gak

    BalasHapus
  5. Tak ada ; sebelum pernyataan. (baris 7, file "Kode")

    ITU YG SALAH YG MANA YA?

    BalasHapus
  6. terimaksih ilmunya pak. mantap

    BalasHapus
  7. Terimakasih ilmunya, sangat bermanfaat

    BalasHapus
  8. Timernya nggak berhenti ya kalau sudah habis kembali lagi ke waktu awal

    BalasHapus
  9. Pak, pada script ada teks "mungholder" apakah itu kode penyimpanan soal Pak Mung?
    Saya sudah coba copy paste semua script lalu mengganti teks yg merah dan biru tapi belum muncul soalnya. Hanya timernya saja yg bekerja.

    BalasHapus
    Balasan
    1. mungholder bukan kode penyimpanan, itu hanya untuk mengatur tampilan saja.
      mungkin ada yg blm benar langkah2nya, silahkan diulang dan dicek urutan langkahnya. semoga berhasil.

      Hapus
  10. Bgmn mengcopy kode javascript diatas? kok gak bisa ya

    BalasHapus
    Balasan
    1. Klik sekali otomatis akan terseleksi semua, tinggal anda tekan CTRL C atau klik kanan pilih salin/ copy.

      Hapus
  11. Kang maaf mau tanya, saya sudah membuat soal di ggogle form, code html nya sudah saya copy kan untuk menggatikan yang berwarna merah di javascript dan menggatikan yang berwarna biru untuk timer, tapi di tampilan google form nya tidak muncul timer nya, saya sudah berulang-ulang tetap saja tidak ada... bagaimana ya kang mohon pencerahannya....

    BalasHapus
    Balasan
    1. Mungkin ada langkah yg terlewatkan. perlu dipahami, ini tidak memunculkan timer di google form, tapi hanya sekedar hiasan dan alat bantu waktu pengerjaan soal saat soal dibuka di blog.

      Hapus
  12. MAAF pAK..bgmn agar timernya bisa bergerak ketika soal di scroll.artinya timer tetap muncul tidak hanya tampil di atas

    BalasHapus
    Balasan
    1. perlu modifikasi pada kode css timernya.

      Hapus
  13. keren inihh...kalau ispring quiz creator harus download dulu ya...free selamanya itu pak?

    BalasHapus
    Balasan
    1. free selamanya, tapi yg free ada watermarknya yg cukup mengganggu pandangan. tapi ya gpp, wong gratis.

      Hapus
  14. maaf mr. mung ....
    Waktu sudah diganti tapi setelah berjalan kembali lagi dari menit ke 20...kenapa ya?

    BalasHapus
    Balasan
    1. Ada 2 tempat angka 20 yg mesti diganti. silahkan dicek lagi kodenya.

      Hapus
  15. cara membuat tampilan soal agar bisa seperti itu bagaimana ya pak

    BalasHapus
  16. keren, terima kasih. sangat bermanfaat

    BalasHapus
  17. Maaf Mr.Mung, misal diakhir waktu, soal langsung nutup otomatis gimana? mksh

    BalasHapus
    Balasan
    1. Script ini tidak bisa, ini hanya untuk aksesoris saja, tidak berpengaruh dg soal.

      Hapus
  18. maaf, countdown kok berjalan. hanya stagnan 90 terus. padahal sdh sesuai petunjuk. mohon solusinya

    BalasHapus
    Balasan
    1. Ada yg terlwat langkah2nya. cek dan ulang lagi dari awal.

      Hapus
  19. Kalo yg di google formnya yg di ksh waktu gmna pak

    BalasHapus
  20. Maaf, maksudnya yang merah diganti dengan kode soal bgmn?

    BalasHapus
    Balasan
    1. Silahkan dibaca lagi dari atas sampai bawah. sambil dilihat warnanya teksnya.

      Hapus
  21. Berarti misal waktu habis tetap dapat kirim jawaban ya pak,artinya biar nilai siswa bisa tercover pada rekap responden, mksh

    BalasHapus
  22. slamt siang pak...terima kasih infonya dan sya sdah coba..tpi ketika waktu berakhir..ko waktu star dr awal lagi..itu gimana ya..

    BalasHapus
    Balasan
    1. Dibaca keterangan di atas, ini hanya utk aksesoris, tdk berpengaruh apa2 dg soal google formulir.

      Hapus
  23. maaf pak,,,supaya tampilan soalnya bisa penuh kebawah bagaimana?...sebelum dikasih script padahal udah sesuai tinggi dan lebar soal

    BalasHapus
  24. gag bsa di copy pak scripnya

    BalasHapus
  25. mr.mung itu pada saat di publish countdown timernya tampil di home pada blog dengan bahasa html

    BalasHapus
  26. terima kasih baru paham, Master.

    BalasHapus
  27. dari kemaren cuma copy paste saja. coba-coba di paste an ngiangin tanda jdinya beda.hahaha
    dulu mah aku kira tanda-tanda itu gak ada artinya.

    BalasHapus
  28. Terimakasih turorialnya pak. Saya akan coba dulu. Kayaknya lebih bgs ini dr pihak ketiga yg saya dpt deh.

    BalasHapus
  29. jadi waktu itu cuma untuk mensugesti siswa saja ya pak. ternyata saya tadi belum kelar bacanya...

    BalasHapus
  30. tlg kasi pak program begitu habis waktunya maka soal juga tertutup

    BalasHapus
  31. maaf pak. saya sudah coba jalan di blog, tpi yang menjadi masalah adlah ketika waktunya habis( soal belum selesai) kenapa hitunganya balik lagi ke awal dan soal tidak menutup

    BalasHapus
  32. maaf pak. klo waktu habis sebelum selesai, ini kenapa waktunya balik lagi ke awal dan soal tak menutup?

    BalasHapus
  33. Terima kasih ilmunya pak, sangat bermanfaat.

    BalasHapus
  34. ada yang berhasilkah, waktunya berjalan. kok waktunya diam. apa yang jadi masalah yah. padahal javascripnya saya cooy. yang saya yang merah saja. Apa masalahnya ini pak yah?

    BalasHapus
  35. njenengan memang luar biasa.... mantap

    BalasHapus
  36. Trimakasih mrmung, disini baru nemu

    BalasHapus
  37. terimkasih pak guru hebat. semoga Allah meridhoimu utuk tetap berkaya. Aaminn. ya Allah.

    BalasHapus
  38. Sangat membantu artikelnya..

    BalasHapus
  39. terimakasih, mr mung sangat bermanfaat sekali...

    BalasHapus

Follow Me


Iklan

Tutorial Blogger

Arsip Blog