Membuat Web Blog Quis

Apabila Anda mengunjungi website yang berisikan tentang soal-soal atau quis, maka biasanya disana Anda akan melihat sebuah latihan atau quis yang langsung memberikan scor atau penilaian atas jawaban yang Anda berikan. Misalnya website yang berisikan materi soal-soal CPNS, Psikotes dan lain sebagainya. Nah apakah para Blogger yang menggunakan blogspot.com bisa membuat web blog dengan gaya Quis seperti website tersebut? Jawabannya tentu saja bisa....

Langsung saja ikuti petunjuk saya:

Misalnya Anda akan membuat posting tentang soal Matematika, maka seperti biasanya Anda berikan judul pada postingan tersebut misalnya "Latihan Soal Matematika". Nah sebelum Anda menulis soal-soal Anda tersebut, Anda copy paste kode berikut ini dan Anda ganti atau edit sendiri sesuai dengan keinginan Anda:

<style type="text/css">
<!--
.bgclr {background-color: white; color: black; font-weight: bold;}
-->
</style>

<script language="JavaScript">

<!-- Begin
// Masukkan jumlah pertanyaan
var numQues = 4;

// Masukkan jumlah pilihan jawaban
var numChoi = 3;

// Masukan jumlah jawaban yang benar dari mulai nomor awal sampai akhir (disini adalah nomor awal dimulai dari 0 s.d. jumlah soalnya)
var answers = new Array(4);

// Masukkan kunci jawaban
answers[0] = "2";
answers[1] = "4";
answers[2] = "8";
answers[3] = "16";

// Jangan merubah apapun pada rumus ini!!! ...
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score/numQues*100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
// End -->
</script>

<form name="quiz">

1. Berapa jumlah 1 + 1?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q1" value="1">1</li>
<li><input type="radio" name="q1" value="2">2</li>
<li><input type="radio" name="q1" value="3">3</li>
</ul>

2. Berapa jumlah 2 + 2?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q2" value="2">2</li>
<li><input type="radio" name="q2" value="4">4</li>
<li><input type="radio" name="q2" value="8">8</li>
</ul>
3. Berapa jumlah 4 + 4?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q3" value="4">4</li>
<li><input type="radio" name="q3" value="8">8</li>
<li><input type="radio" name="q3" value="16">16</li>
</ul>
4. Berapa jumlah 8 + 8?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q4" value="8">8</li>
<li><input type="radio" name="q4" value="16">16</li>
<li><input type="radio" name="q4" value="32">32</li>
</ul>

<input type="button" value="Berapa Scor Saya" onClick="getScore(this.form)">
<input type="reset" value="Hapus Jawaban Saya">
<p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
Jawaban Yang Benar:<br>
<textarea class="bgclr" name="solutions" wrap="virtual" rows="4" cols="30" disabled>
</textarea>
</form>

Hasilnya akan nampak dalam postingan Anda sebagai berikut:

-->

-->

1. Berapa jumlah 1 + 1?

• 1
• 2
• 3

2. Berapa jumlah 2 + 2?

• 2
• 4
• 8

3. Berapa jumlah 4 + 4?

• 4
• 8
• 16

4. Berapa jumlah 8 + 8?

• 8
• 16
• 32

Score =


Jawaban yang Benar:

<br />

Anda tinggal menggantikan Jumlah Pertanyaan, Pilihan Jawaban, Jumlah Jawaban Yang Benar, Kunci Jawaban serta Jawaban yang ada pada soal (Misalnya name="q1" value="1">1</li>). Perlu Anda ingat bahwa Jawaban yang nampak harus sama nilainya misal apabila pengunjung memilih jawaban Angka1 maka value nya juga "1").

Saya rasa cukup gampang untuk Anda edit sendiri ya??? Selamat mencoba!!!