Cara Sederhana Membuat Soal Ujian Online Dengan HTML Dan Javascript Pada Blogspot
Cara Sederhana Membuat Soal Ujian Online Dengan HTML Dan Javascript Pada Blogspot
Meningkatnya kelas maya dan pembelajaran jarak jauh menggunakan perangkat pintar secara daring memaksa kita sebagai tenaga pendidik untuk berfikir aktif dan kreatif untuk menyediakan dan menyeimbangkan kemampuan kita dalam menggunakan teknologi terkini.
Dalam hal membuat soal - soal ujian online paling mudah memang menggunakan fasilitas google form yang tinggal kopi dan bahkan dapat mengunggah secara bersamaan dalam satu halaman soal.
Akan tetapi disini saya akan mengajak teman - teman untuk menggunakan cara lain, yaitu membuat soal dengan kode html dan javascript sebagai alat perintahnya
Ini hanya soal selera saja sebenarnya, dari google form atau apapun itu sepanjang mudah dan praktis penggunaanya oleh siswa maka saya rasa cukup.
Pada soal ujian ini nantinya kita akan tampilkan soal dengan jawaban pilihan ganda menggunakan bullet button atau tombol klik berbentuk bulat sebagai media input pilihannya. Selain itu kita juga dapat menampilkan pembahasan soalnya atau mungkin kuncinya pada tiap soal tersebut.
Jadi skenarionya begini, kita beranggapan membuat soal ini berurutan perhalaman pada tiap babnya sesuai tema yang sedang di bahas. Dan nantinya siswa diberikan pembahasan singkat di awal halaman selanjutnya dibawa ke soal yang akan kita buat tersebut. Jika siswa belum berhasil mengerjakan sampai batas soal yang kita tentukan maka siswa belum boleh melanjutkan pada bab berikutnya alias harus mengulang lagi.
Jadi sebenernya soal ini nanti lebih cocok untuk bahan pembelajaran mandiri saja bukan untuk penilaian yang sesungguhnya, karena hasil rekap yang mengerjakan tidak dapaat kita ambil sebagai laporan. Berbeda dengan google form yang dapat diambil laporannya by excell.
Baik langsung saja tanpa panjang lebar kita mulai saja proses pembuatannya.
Pertama tentu kita harus menyiapkan file soal dalam bentuk word untuk kita kopi nantinya ke halaman blog kita lengkap dengan kunci jawaban tentunya.
Langkah pembuatannya adalah sebagai berikut :
Login kehalaman blogger teman -teman menuju postingan dan entry baru. Lalu pilih mode HTML.
Setelah itu pastekan kode berikut ini :
<b>Selamat Berlatih !</b>
<form>
Contoh soal nomor 1
<input onclick="Engine(1, this.value)" type="radio" value="a" /> a
<input onclick="Engine(1, this.value)" type="radio" value="b" /> b
<input onclick="Engine(1, this.value)" type="radio" value="c" /> c
<input onclick="Engine(1, this.value)" type="radio" value="d" /> d
Contoh soal nomor 2
<input onclick="Engine(2, this.value)" type="radio" value="a" /> a
<input onclick="Engine(2, this.value)" type="radio" value="b" /> b
<input onclick="Engine(2, this.value)" type="radio" value="c" /> c
<input onclick="Engine(2, this.value)" type="radio" value="d" /> d
Contoh soal nomor 3
<input onclick="Engine(3, this.value)" type="radio" value="a" /> a
<input onclick="Engine(3, this.value)" type="radio" value="b" /> b
<input onclick="Engine(3, this.value)" type="radio" value="c" /> c
<input onclick="Engine(3, this.value)" type="radio" value="d" /> d
Contoh soal nomor 4
<input onclick="Engine(4, this.value)" type="radio" value="a" /> a
<input onclick="Engine(4, this.value)" type="radio" value="b" /> b
<input onclick="Engine(4, this.value)" type="radio" value="c" /> c
<input onclick="Engine(4, this.value)" type="radio" value="d" /> d
Contoh soal nomor 5
<input onclick="Engine(5, this.value)" type="radio" value="a" /> a
<input onclick="Engine(5, this.value)" type="radio" value="b" /> b
<input onclick="Engine(5, this.value)" type="radio" value="c" /> c
<input onclick="Engine(5, this.value)" type="radio" value="d" /> d
Contoh soal nomor 6
<input onclick="Engine(6, this.value)" type="radio" value="a" /> a
<input onclick="Engine(6, this.value)" type="radio" value="b" /> b
<input onclick="Engine(6, this.value)" type="radio" value="c" /> c
<input onclick="Engine(6, this.value)" type="radio" value="d" /> d
Contoh soal nomor 7
<input onclick="Engine(7, this.value)" type="radio" value="a" /> a
<input onclick="Engine(7, this.value)" type="radio" value="b" /> b
<input onclick="Engine(7, this.value)" type="radio" value="c" /> c
<input onclick="Engine(7, this.value)" type="radio" value="d" /> d
Contoh soal nomor 8
<input onclick="Engine(8, this.value)" type="radio" value="a" /> a
<input onclick="Engine(8, this.value)" type="radio" value="b" /> b
<input onclick="Engine(8, this.value)" type="radio" value="c" /> c
<input onclick="Engine(8, this.value)" type="radio" value="d" /> d
Contoh soal nomor 9
<input onclick="Engine(9, this.value)" type="radio" value="b" /> a
<input onclick="Engine(9, this.value)" type="radio" value="b" /> b
<input onclick="Engine(9, this.value)" type="radio" value="c" /> c
<input onclick="Engine(9, this.value)" type="radio" value="d" /> d
Contoh soal nomor 10
<input onclick="Engine(10, this.value)" type="radio" value="a" /> a
<input onclick="Engine(10, this.value)" type="radio" value="b" /> b
<input onclick="Engine(10, this.value)" type="radio" value="c" /> c
<input onclick="Engine(10, this.value)" type="radio" value="d" /> d
<center>
<input onclick="NextLevel()" type="button" value="Lihat Hasil" />
</center>
</form>
<script language="JavaScript">
<!-- Mulai_script_soal
var ans = new Array;
var done = new Array;
var score = 0;
ans[1] = "a";
ans[2] = "b";
ans[3] = "c";
ans[4] = "d";
ans[5] = "a";
ans[6] = "b";
ans[7] = "c";
ans[8] = "d";
ans[9] = "a";
ans[10] = "b";
function Engine(question, answer) {
if (answer != ans[question]) {
if (!done[question]) {
done[question] = -1;
alert("Salah!\n\nSkor anda sekarang adalah: " + score);
}
else {
alert("Anda menjawab lebih dari sekali!");
}
}
else {
if (!done[question]) {
done[question] = 0;
score++;
alert("Jawaban Anda Benar!\n\nSkor anda sekarang adalah: " + score);
}
else {
alert("Anda sudah menjawab lebih dari 1 kali !");
}
}
}
function NextLevel () {
if (score >= 10) {
alert("Anda LULUS dengan Nilai Sempurna. Selamat !");
}
if (score >= 9 && score <= 10) {
alert("Anda Lulus! Selamat!")
self.location="/"
}
else {
alert("Anda menjawab kurang dari 80% benar. Silahkan mengulangi materi Bab ini.")
}
}
// Selesai_Script_Soal -->
</script>
<noscript><div class="alert">
Javasript tidak mendukung atau tidak aktif di browser Anda. Segera aktifkan javascript Anda!</div>
</noscript>
<center>
<button onclick="if(document.getElementById('spoiler11') .style.display=='none') {document.getElementById('spoiler11') .style.display=''}else{document.getElementById('spoiler11') .style.display='none'}" title="Klik untuk melihat/menyembunyikan" type="button">Kunci Jawaban</button>
</center>
<div id="spoiler11" style="display: none;">
Kunci</div>
Teman - teman tinggal mengganti kalimat contoh soal menjadi soal masing - masing, lalu nomor urut sesuaikan jumlah soal Engine dan opsi pada value. Jangan lupa juga untuk menyesuaikan kunci pada kata ans.
Selesai lalu simpan dan hasilnya nanti kurang lebih akan seperti dibawah ini.
Bagaimana, tidak sulit bukan ? Dengan begitu kita sudah dapat membuat soal ujian online pada blog kita.
Meningkatnya kelas maya dan pembelajaran jarak jauh menggunakan perangkat pintar secara daring memaksa kita sebagai tenaga pendidik untuk berfikir aktif dan kreatif untuk menyediakan dan menyeimbangkan kemampuan kita dalam menggunakan teknologi terkini.
Dalam hal membuat soal - soal ujian online paling mudah memang menggunakan fasilitas google form yang tinggal kopi dan bahkan dapat mengunggah secara bersamaan dalam satu halaman soal.
Akan tetapi disini saya akan mengajak teman - teman untuk menggunakan cara lain, yaitu membuat soal dengan kode html dan javascript sebagai alat perintahnya
Ini hanya soal selera saja sebenarnya, dari google form atau apapun itu sepanjang mudah dan praktis penggunaanya oleh siswa maka saya rasa cukup.
Pada soal ujian ini nantinya kita akan tampilkan soal dengan jawaban pilihan ganda menggunakan bullet button atau tombol klik berbentuk bulat sebagai media input pilihannya. Selain itu kita juga dapat menampilkan pembahasan soalnya atau mungkin kuncinya pada tiap soal tersebut.
Jadi skenarionya begini, kita beranggapan membuat soal ini berurutan perhalaman pada tiap babnya sesuai tema yang sedang di bahas. Dan nantinya siswa diberikan pembahasan singkat di awal halaman selanjutnya dibawa ke soal yang akan kita buat tersebut. Jika siswa belum berhasil mengerjakan sampai batas soal yang kita tentukan maka siswa belum boleh melanjutkan pada bab berikutnya alias harus mengulang lagi.
Jadi sebenernya soal ini nanti lebih cocok untuk bahan pembelajaran mandiri saja bukan untuk penilaian yang sesungguhnya, karena hasil rekap yang mengerjakan tidak dapaat kita ambil sebagai laporan. Berbeda dengan google form yang dapat diambil laporannya by excell.
Baik langsung saja tanpa panjang lebar kita mulai saja proses pembuatannya.
Pertama tentu kita harus menyiapkan file soal dalam bentuk word untuk kita kopi nantinya ke halaman blog kita lengkap dengan kunci jawaban tentunya.
Langkah pembuatannya adalah sebagai berikut :
Login kehalaman blogger teman -teman menuju postingan dan entry baru. Lalu pilih mode HTML.
Setelah itu pastekan kode berikut ini :
<b>Selamat Berlatih !</b>
<form>
Contoh soal nomor 1
<input onclick="Engine(1, this.value)" type="radio" value="a" /> a
<input onclick="Engine(1, this.value)" type="radio" value="b" /> b
<input onclick="Engine(1, this.value)" type="radio" value="c" /> c
<input onclick="Engine(1, this.value)" type="radio" value="d" /> d
Contoh soal nomor 2
<input onclick="Engine(2, this.value)" type="radio" value="a" /> a
<input onclick="Engine(2, this.value)" type="radio" value="b" /> b
<input onclick="Engine(2, this.value)" type="radio" value="c" /> c
<input onclick="Engine(2, this.value)" type="radio" value="d" /> d
Contoh soal nomor 3
<input onclick="Engine(3, this.value)" type="radio" value="a" /> a
<input onclick="Engine(3, this.value)" type="radio" value="b" /> b
<input onclick="Engine(3, this.value)" type="radio" value="c" /> c
<input onclick="Engine(3, this.value)" type="radio" value="d" /> d
Contoh soal nomor 4
<input onclick="Engine(4, this.value)" type="radio" value="a" /> a
<input onclick="Engine(4, this.value)" type="radio" value="b" /> b
<input onclick="Engine(4, this.value)" type="radio" value="c" /> c
<input onclick="Engine(4, this.value)" type="radio" value="d" /> d
Contoh soal nomor 5
<input onclick="Engine(5, this.value)" type="radio" value="a" /> a
<input onclick="Engine(5, this.value)" type="radio" value="b" /> b
<input onclick="Engine(5, this.value)" type="radio" value="c" /> c
<input onclick="Engine(5, this.value)" type="radio" value="d" /> d
Contoh soal nomor 6
<input onclick="Engine(6, this.value)" type="radio" value="a" /> a
<input onclick="Engine(6, this.value)" type="radio" value="b" /> b
<input onclick="Engine(6, this.value)" type="radio" value="c" /> c
<input onclick="Engine(6, this.value)" type="radio" value="d" /> d
Contoh soal nomor 7
<input onclick="Engine(7, this.value)" type="radio" value="a" /> a
<input onclick="Engine(7, this.value)" type="radio" value="b" /> b
<input onclick="Engine(7, this.value)" type="radio" value="c" /> c
<input onclick="Engine(7, this.value)" type="radio" value="d" /> d
Contoh soal nomor 8
<input onclick="Engine(8, this.value)" type="radio" value="a" /> a
<input onclick="Engine(8, this.value)" type="radio" value="b" /> b
<input onclick="Engine(8, this.value)" type="radio" value="c" /> c
<input onclick="Engine(8, this.value)" type="radio" value="d" /> d
Contoh soal nomor 9
<input onclick="Engine(9, this.value)" type="radio" value="b" /> a
<input onclick="Engine(9, this.value)" type="radio" value="b" /> b
<input onclick="Engine(9, this.value)" type="radio" value="c" /> c
<input onclick="Engine(9, this.value)" type="radio" value="d" /> d
Contoh soal nomor 10
<input onclick="Engine(10, this.value)" type="radio" value="a" /> a
<input onclick="Engine(10, this.value)" type="radio" value="b" /> b
<input onclick="Engine(10, this.value)" type="radio" value="c" /> c
<input onclick="Engine(10, this.value)" type="radio" value="d" /> d
<center>
<input onclick="NextLevel()" type="button" value="Lihat Hasil" />
</center>
</form>
<script language="JavaScript">
<!-- Mulai_script_soal
var ans = new Array;
var done = new Array;
var score = 0;
ans[1] = "a";
ans[2] = "b";
ans[3] = "c";
ans[4] = "d";
ans[5] = "a";
ans[6] = "b";
ans[7] = "c";
ans[8] = "d";
ans[9] = "a";
ans[10] = "b";
function Engine(question, answer) {
if (answer != ans[question]) {
if (!done[question]) {
done[question] = -1;
alert("Salah!\n\nSkor anda sekarang adalah: " + score);
}
else {
alert("Anda menjawab lebih dari sekali!");
}
}
else {
if (!done[question]) {
done[question] = 0;
score++;
alert("Jawaban Anda Benar!\n\nSkor anda sekarang adalah: " + score);
}
else {
alert("Anda sudah menjawab lebih dari 1 kali !");
}
}
}
function NextLevel () {
if (score >= 10) {
alert("Anda LULUS dengan Nilai Sempurna. Selamat !");
}
if (score >= 9 && score <= 10) {
alert("Anda Lulus! Selamat!")
self.location="/"
}
else {
alert("Anda menjawab kurang dari 80% benar. Silahkan mengulangi materi Bab ini.")
}
}
// Selesai_Script_Soal -->
</script>
<noscript><div class="alert">
Javasript tidak mendukung atau tidak aktif di browser Anda. Segera aktifkan javascript Anda!</div>
</noscript>
<center>
<button onclick="if(document.getElementById('spoiler11') .style.display=='none') {document.getElementById('spoiler11') .style.display=''}else{document.getElementById('spoiler11') .style.display='none'}" title="Klik untuk melihat/menyembunyikan" type="button">Kunci Jawaban</button>
</center>
<div id="spoiler11" style="display: none;">
Kunci</div>
Teman - teman tinggal mengganti kalimat contoh soal menjadi soal masing - masing, lalu nomor urut sesuaikan jumlah soal Engine dan opsi pada value. Jangan lupa juga untuk menyesuaikan kunci pada kata ans.
Selesai lalu simpan dan hasilnya nanti kurang lebih akan seperti dibawah ini.
Bagaimana, tidak sulit bukan ? Dengan begitu kita sudah dapat membuat soal ujian online pada blog kita.