Info Penting

Aplikasi Yasin dan Tahlil No 1 di Google dan Playstore

A plikasi Yasin dan Tahlil terbaik nomor 1 di Google dan Playstore kaya akan fitur dan konten yang bermanfaat untuk amalan sehari-hari u...

Info Penting

Artikel Terbaru

Membuat Countdown Timer Soal Online Google Drive dengan Kode Javascript

21 Sep 2018 - - 73

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.

73 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. Terimakasih ilmunya, sangat bermanfaat

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

    BalasHapus
  8. 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
  9. 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
  10. 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
  11. MAAF pAK..bgmn agar timernya bisa bergerak ketika soal di scroll.artinya timer tetap muncul tidak hanya tampil di atas

    BalasHapus
  12. 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
  13. 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
  14. cara membuat tampilan soal agar bisa seperti itu bagaimana ya pak

    BalasHapus
  15. keren, terima kasih. sangat bermanfaat

    BalasHapus
  16. 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
  17. 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
  18. Kalo yg di google formnya yg di ksh waktu gmna pak

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

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

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

    BalasHapus
  21. 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
  22. maaf pak,,,supaya tampilan soalnya bisa penuh kebawah bagaimana?...sebelum dikasih script padahal udah sesuai tinggi dan lebar soal

    BalasHapus
  23. gag bsa di copy pak scripnya

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

    BalasHapus
  25. 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
  26. Terimakasih turorialnya pak. Saya akan coba dulu. Kayaknya lebih bgs ini dr pihak ketiga yg saya dpt deh.

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

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

    BalasHapus
  29. 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
  30. maaf pak. klo waktu habis sebelum selesai, ini kenapa waktunya balik lagi ke awal dan soal tak menutup?

    BalasHapus
  31. Terima kasih ilmunya pak, sangat bermanfaat.

    BalasHapus
  32. 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
  33. njenengan memang luar biasa.... mantap

    BalasHapus
  34. Trimakasih mrmung, disini baru nemu

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

    BalasHapus
  36. Sangat membantu artikelnya..

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

    BalasHapus
  38. Assalamualaikum Wr. Wb. Mas salam kenal. Saya hafis novianas, pembina asrama di Ponpes Darul Arqam Garut. Saya punya masalah untuk memantau kegiatan sholat santri secara daring selama pandemi ini.

    Letak masalahnya adalah saya membuat google formulir untuk absen sholat berjamaah santri. Saya ingin membuat salah satu pertanyaan hanya aktif saat waktu-waktu tertentu. Misalnya pertanyaan "Sholat subuh, berjamaah/tidak" hanya bisa dipilih saat waktu subuh, dan begitu juga waktu sholat yang lainnya.

    Apa mas punya solusi? Saya sangat menghargai dan akan merasa senang sekali bila mas bisa membantu saya.

    Terimakasih mas.
    Wassalamualaikum Wr. Wb

    BalasHapus
    Balasan
    1. Wa'alaikumsalam W. W.
      Anda bisa membuat pengisian google formulir dengan model perbagian, tiap waktu sholat satu bagian, jadi ketika santri memilih sholat tertentu, akan diarahkan pada halaman sholat tersebut saja.
      Contoh seperti ini: https://forms.gle/hbEwGyJfWoHFpP5x8

      Semoga bermanfaat.

      Hapus
  39. Kode //![CDATA[ function startTimer(t,n){var e,r,a=t;setInterval(function() dst.. ko muncul terus ya di blog. Bgmn ya pak itu cara mengatasinya? trm kasih

    BalasHapus
    Balasan
    1. Bikin kata pengantar dulu, baru script di taruh di bawah pengantar soal onlinenya. jadi yg muncul di homepage blog berupa pengantar bukan bagian kode javascript.

      Hapus
  40. tidakkah lebih baik diintegrasikan langsung dengan google formnya pak, misalkan pakai add ons form timer, jadi begitu waktu habis soal otomatis tertutup.

    BalasHapus
    Balasan
    1. Belum pernyah nyoba add ons form timer, pernah lihat timer form tp sistemnya lewat web lain, form tdk bisa di sematkan dalam blog guru, kalau yg memungkinkan di integrasikan dan bisa disematkan dalam blog guru menggunakan add ons form limiter.

      Hapus
  41. Terima kasih atas share ilmunya. Saya berhasil menggunakan countdown timer ini. Namun, ketika halaman web dibuka di HP, google form tidak muncul. Untuk mengatasinya, pakai mode desktop site di HP. Apakah ada solusi agar pengguna dari HP tidak perlu mengaktifkan mode desktop site?

    BalasHapus

Follow Me

Foto Mr. Mung
ttd Mr. Mung

Tutorial Blogger

Pilih Arsip Blog