Widget HTML #1


BUAT QUIZ GOOGLE SITE MENGGUNAKAN TIMER GOOGLE FORM

Tutor.Okeguru.Com - Buat quiz google site menggunakan timer google form.

Pa Wisnu. Post tetang "Timer Google Form Tanpa Add On" kan utk digunakan diblog. Nah, bisa gak kalau diimplementasikan di Google Site ?

Pertanyaan diatas yang mendorong saya utk membahas Timer Google Form yang diimplementasikan di dalam Google Site. Pada prisnipnya bisa saja. Tapi perlu ada beberapa penyesuaian kode.


Contoh Timer Google Form di Google Site

Ini hasilnya. Google form yang diberikan timer. Kemudian ditampilkan di Google site. Teman - teman bisa klik tombol "Lihat Contoh" untuk mencoba quiz dengan timer yang saya simpan di Google site.

Cara Membuat Timer Google Form Untuk Google Site

Bagaimana cara mengimplementasikannya ?

Yuk, kita simah aja di video ini !


Timer Google Form Code Generator





















<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body> 

  <div id="timer" align="center"><a class="fa fa-book"></a>  <a class="fa fa-clock-o"></a> <span id="time"></span></div>

<span id="form">
<iframe src="">Tunggu yaa</iframe><br />
</span>
</body>

<script>

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var batas = timer + 60* ;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds + " Menit";

        if (--timer < 0) {

           document.getElementById("timer").innerHTML = "";
        }
    if (--batas < 0) {

           document.getElementById("form").style.visibility = "hidden";
           document.getElementById("timer").style.visibility = "hidden";
        }

    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * ,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);

};

</script>

<style type="text/css">
  
body {
    overflow: visible;
}

iframe {

height: 600px;
width: 100%;
border: 0px;
padding-top: 8px;
margin: 0px
}

#timer {
background-color: ;
color: ;
font-family: arial;
font-weight: bold;
padding: 10px 30px;
border-radius: px;
}

</style>

Seperti itulah cara membuat quiz google site menggunakan timer google form. Mudah kan. Silahkan di coba yaa.

Jika ada penjelasan yang kurang jelas atau ada kesalahan, silahkan tulis di kolom komentar.

Karena berbagi itu indah, bagikan artikel ini untuk saling berbagi informasi.
Salam inovasi, Salam implementasi.
~☺~
Wisnurat
Wisnurat Teacher, Public Speaker, Writer, Blogger, Education Content Creator and Enterpreneur.

5 comments for "BUAT QUIZ GOOGLE SITE MENGGUNAKAN TIMER GOOGLE FORM"

Comment Author Avatar
izin bertanya, ini codenya dicopy kemana ya? terima kasih
Comment Author Avatar
code-nya bisa di paste pada laman posting blogger. Seperti ditunjukkan di dalam video.
Atau paste di google sites, dengan menggunakan menu embed/sematkan --> pilih mode sematkan code.
Comment Author Avatar
Selamat malam, izin bertanya : Saya sudah coba buat timer digoogle site, google form, tapi ketika saya sematkan dan publisakan yang terlihat di HP/android hanya timer saja sedangkan soal google formnya tidak muncul sama sekali, mohon bantuan penjelasan dan solusinya, terima kasih
Comment Author Avatar
ada 2 hal yg bisa dilakukan.
1. Coba buka google site nya menggunakan laptop. Jika tidak tampil, artinya ada kesalahan kode yang disematkan.
2. Jika saat buka dilaptop, timer dan quiz nya tampil. Sedangkan saat menggunakan Smartphone tidak tampil. Hal ini bisa dikarenakan adanya delay tarik data ke perangkat Smartphone.
Comment Author Avatar
kak mau bertanya, kan saya ada setting setelah submit ada pemberitahuan yang dimana di notes itu ada link WA nya ( atau link url lainnya ) nah pas di klik itu gak bisa kak linknya pasti eror, tapi kalau saya mencoba gform tanpa timer, link itu berfungsi, kira kira gimana ya kak biar link itu bisa diklik disaat saya memakai kode timer ini

Komentar anda sangat membantu dalam menyempurnakan konten web ini. Silahkan isi kotak komentar dengan bijaksana.

SUBCRIBE

Ada video terbaru di Channel YTube Pa Wisnurat
Cek tombol subcribe di atas.