Pemberitahuan :

Maaf Atas Ketidak Nyamanan, Blog Ini Sedang Dalam PERBAIKAN !!

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Translate This Blog by JAS_Blog

Jan 30, 2012

Membuat Kuis atau Ujian Online

Reactions: 

Pada tutorial kali ini kita akan membuat kuis atau ujian online dengan menggunakan jQuery, javascript timer dan PHP. Pada Kuis online ini kita akan menampilkan pertanyaan dan pilihan-pilihan jawaban dari database MySQL menggunakan efek-efek jquery. Kuis online ini juga ada timer, di sini kita memanfaatkan javascript cookies untuk mencatat timer, yang berguna untuk mencegah user mengembalikan nilai timer dengan refresh. Jadi walaupun direfresh, waktu nya tetap jalan, tidak kembali ke semula. Jika waktu habis, otomatis kuis selesai dan melakukan penghitungan jawaban yang benar.


    Membuat tabel banksoal di MySQL


    CREATE TABLE `banksoal` (
      `soalid` int(5) NOT NULL auto_increment,
      `topik` tinytext NOT NULL,
      `pertanyaan` text NOT NULL,
      `pilihan_a` tinytext NOT NULL,
      `pilihan_b` tinytext NOT NULL,
      `pilihan_c` tinytext NOT NULL,
      `pilihan_d` tinytext NOT NULL,
      `jawaban` varchar(1) NOT NULL,
      PRIMARY KEY  (`soalid`)
    ) 
    

    Membuat form untuk tulis nama user dan pemilihan topik pertanyaan

    index.php
    <html>
    <head>
    <title>Kuis Online</title>
    </head>
    <body bgcolor="#FFFFCC"  onunload=keluar()>
    <center>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <form action="soal.php" method="get">
    Nama: <br>
    <input type=text name=nama><p>
    Jenis soal: <br>
    <select name="topik">
    <?php
    include "koneksi.php";
    $topik = mysql_query("SELECT DISTINCT topik FROM banksoal");
    while($t = mysql_fetch_array($topik)){
        echo "<option>".$t['topik']."</option>\n";
    }
    ?>
    </select>
    <p>
    <input type=submit value="mulai">
    </body>
    </html>
    

    Mengambil pertanyaan menggunakan ajax jquery json

    soal.php

    topik = $("#divtopik").html();
    url = "ambilsoal.php?topik="+topik
    $.ajax({
        url: url,
        dataType: 'json',
        cache: false,
        success: function(msg){
            topik = msg;
            setinputpilihan();
            setinputjawaban()
            tampilkan();
            mainkanwaktu();
        }
    });
    
    topik kita ambil dari <div id="divtopik"> yang nilainya kita ambil dari form index.php
    setinputpilihan(), adalah fungsi untuk meng-generate <input type=hidden name="pilihan[]"> yang nanti berguna untuk menampung jawaban-jawaban yang dipilih oleh user.
    setinputjawaban(), adalah fungsi untuk meng-generate <input type=hidden name="jawaban[]"> yang nanti berguna untuk meletakkan jawaban tiap pertanyaan.
    setinputpilihan() dan setinputjawaban() berguna untuk pengolahan di PHP untuk menghitung jawaban.

    Meng-generate json data pertanyaan dan pilihan jawaban dari MySQL menggunakan PHP

    ambilsoal.php

    <?php
    include "koneksi.php";
    $topik = $_GET['topik'];
    $data = mysql_query("SELECT * FROM banksoal WHERE topik='$topik'");
    
    $json = '{"soal":[ ';
    while($x = mysql_fetch_array($data)){
        $json .= '{';
        $json .= '"id":"'.$x['soalid'].'",
            "topik":"'.htmlspecialchars($x['topik']).'",
            "pertanyaan":"'.htmlspecialchars($x['pertanyaan']).'",
            "a":"'.$x['pilihan_a'].'",
            "b":"'.$x['pilihan_b'].'",
            "c":"'.$x['pilihan_c'].'",
            "d":"'.$x['pilihan_d'].'",
            "jawaban":"'.$x['jawaban'].'"
        },';
    }
    $json = substr($json,0,strlen($json)-1);
    $json .= ']';
    
    $json .= '}';
    echo $json;
    
    ?>
    
    Jika kita running, akan membentuk data form json seperti berikut:

    {"soal":[
        {
        "id":"1",
        "topik":"internet",
        "pertanyaan":"Website paling populer di dunia?",
        "a":"google.com",
        "b":"facebook.com",
        "c":"yahoo.com",
        "d":"kaskus.us",
        "jawaban":"a"
        },{
        "id":"2",
        "topik":"internet",
        "pertanyaan":"Pencipta PHP",
        "a":"Bill Gates",
        "b":"Steve Jobs",
        "c":"Rasmus Lerdorf",
        "d":"Larry Page",
        "jawaban":"c"
        }
        ]
    }
    

    Menjalankan timer

    Berikut adalah fungsi untuk membuat countdown

    var totalwaktu = 20; //batas waktu pengerjaan semua soal
    
    function mainkanwaktu(){
        if(totalwaktu>0){
            $("#divtotalwaktu").html(totalwaktu);
            totalwaktu--;
            timer = setTimeout("mainkanwaktu()",1000);
        }else{
            clearTimeout(timer);
            habis = 1;
            document.getElementById("formulir").submit();
        }
    }
    
    document.getElementById("formulir").submit(); berguna jika waktu sudah habis maka kita langsung mensubmit form

    Memasukkan dan mengecek waktu di javascript cookies


    function getCookie(c_name){
        if (document.cookie.length>0){
            c_start=document.cookie.indexOf(c_name + "=");
            if (c_start!=-1){
                c_start=c_start + c_name.length+1;
                c_end=document.cookie.indexOf(";",c_start);
                if (c_end==-1) c_end=document.cookie.length;
                return unescape(document.cookie.substring(c_start,c_end));
            }
        }
        return "";
    }
    
    function setCookie(c_name,value,expiredays){
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
    }
    
    function checkCookie(){
        totalwaktucookies=getCookie('waktucookies');
        if (totalwaktucookies!=null && totalwaktucookies!=""){
            totalwaktu = totalwaktucookies;
        }else{
            setCookie('waktucookies',totalwaktu,7);
        }
    }
    
    Jika user refresh, maka kita masukkan nilai totalwaktu ke cookies, cara mendeteksinya adalah dengan deteksi event onunload, kita pasang di tag <body onunload="keluar()">
    berikut adalah kode fungsi keluar(), yang berfungsi memasukkan nilai totalwaktu yang sedang berjalan ke cookies

    function keluar(){
        if(habis==0){
            setCookie('waktucookies',totalwaktu,7);
        }else{
            setCookie('waktucookies',0,-1);
        }
    }
    

    Menampilkan pertanyaan dan pilihan jawaban


    function tampilkan(){
        if(indexsoal<topik.soal.length){
            nomorsoal = indexsoal + 1;
            $("#divnomor").html("Soal "+nomorsoal+" dari "+ topik.soal.length);
            $("#divpertanyaan").html(topik.soal[indexsoal].pertanyaan);
            $("#divpertanyaan").fadeIn(2000);
            $("#jawaban_a").html("<input type='radio' onclick='setnilai(this.value)' name='R"+indexsoal+"'value='a'>A. "+topik.soal[indexsoal].a);
            $("#jawaban_b").html("<input type='radio' onclick='setnilai(this.value)' name='R"+indexsoal+"'value='b'>B. "+topik.soal[indexsoal].b);
            $("#jawaban_c").html("<input type='radio' onclick='setnilai(this.value)' name='R"+indexsoal+"'value='c'>C. "+topik.soal[indexsoal].c);
            $("#jawaban_d").html("<input type='radio' onclick='setnilai(this.value)' name='R"+indexsoal+"'value='d'>D. "+topik.soal[indexsoal].d);
            $("#divoption").slideDown(750);
        }else{
            habis = 1;
            document.getElementById("formulir").submit();
        }
    }
    

    Menghitung hasil kuis

    nilaiakhir.php

    <?php
    echo "Nama: ".$_POST['nama']."<br>";
    $jumlahbenar = 0;
    $i = 1;
    foreach($_POST['pilihan'] as $key => $value){
        if($value == $_POST['jawaban'][$key]){
            $j = "benar";
            $jumlahbenar++;
        }else{
            $j = "<font color='red'>salah</font>";
        }
        echo "No $i : $value ($j)<br>";
        $i++;
    }
    echo "Jumlah benar = $jumlahbenar";
    ?>
    

    Kode lengkapnya

    Untuk kode lengkapnya silahkan download source code,
    Untuk kuis online sederhana tanpa ajax dan konversi timer dalam menit dan detik, silahkan dowload di sini

    untuk sementara kode lengkapnya sedang diperbaiki ... mohon maaf atas ketidaknyamanaannya....
    Sumber >>>>>>> http://blog.codingwear.com/read32-Membuat-Kuis-atau-Ujian-Online-Ajax.drz (BLOG SUDAH MATI)

    9 comments:

    1. kebetulan saya guru sd, pengen membuat ujian online tapi tidak punya hosting sendiri, bisa ga buat ujian online di blog gratisan seperti blogger?

      ReplyDelete
    2. mantap gan..ijin sedot ya gan...terimakasih

      ReplyDelete
    3. gan kalo si nilainya mau di buat highscore gmna caranya?

      ReplyDelete
    4. makasih banget nih, sukses terus ya blognya

      ReplyDelete
    5. mas link downloadnya sudah tidak bisa lagi,
      tolong diupload lagi dong mas
      mksh

      ReplyDelete
      Replies
      1. buat agan ikamri doeganz ... mohon maaf atas keterlambatan membalas komentarnya.... Linkna sedang diperbaiki.... keterlambatan ini karena saya sendiri sedang disibukan dengan kuliah.... Terima Kasih Atas Komentarnya

        Delete
    6. secepatnya ya gan di update linknya, pengen tau juga nih :D
      thank's sebelumnya

      ReplyDelete

    Silahkan Berkomentar Tentang Blog Ini (NO SPAM PLEASE) Agar Blog Ini Bisa Lebih Baik Lagi Dari Yang Sekarang.... TERIMA KASIH & SEMOGA BERMANFAAT :)

    EasyHits4U.com - Your Free Traffic Exchange - 1:1 Exchange Ratio, 5-Tier Referral Program. FREE Advertising!

    Copyright @ 2013 JAS Blog. Designed by Templateism | Love for The Globe Press