Membuat Kuis atau Ujian Online Ajax

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.

Mari kita lihat algoritma dan kodenya. Atau anda bisa lihat demonya. Untuk kuis online sederhana tanpa ajax dan konversi timer dalam menit dan detik, silahkan dowload di sini

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 di sini melihat demo
Untuk kuis online sederhana tanpa ajax dan konversi timer dalam menit dan detik, silahkan dowload di sini

Place to Sharing

Membuat Kuis atau Ujian Online Ajax

Membuat tabel banksoal di MySQL

Membuat form untuk tulis nama user dan pemilihan topik pertanyaan

Mengambil pertanyaan menggunakan ajax jquery json

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

Menjalankan timer

Memasukkan dan mengecek waktu di javascript cookies

Menampilkan pertanyaan dan pilihan jawaban

Menghitung hasil kuis

Kode lengkapnya

Related Posts

1 komentar:

Facebook Pages

Popular Posts

Source Code Project Full + Database

Select Category

Recent Posts