21 September 2023
Buat yang pengen bikin website untuk soal multiple choice anak-anak SD, SMP, atau SMA, berikut ini ada contoh script sederhana menggunakan HTML + Javascript. Silakan dikembangkan sesuai kebutuhan.
 |
| gambar ilustrasi dari unsplash |
<!DOCTYPE html>
<html>
<head>
<title>Soal Multiple Choice</title>
</head>
<body>
<h1>Soal Multiple Choice</h1>
<div id="soal">
<p>1. Apa ibu kota Indonesia?</p>
<input type="radio" name="soal1" value="a">a) Jakarta<br>
<input type="radio" name="soal1" value="b">b) Surabaya<br>
<input type="radio" name="soal1" value="c">c) Bandung<br>
<input type="radio" name="soal1" value="d">d) Yogyakarta<br>
</div>
<div id="soal">
<p>2. Siapakah presiden pertama Indonesia?</p>
<input type="radio" name="soal2" value="a">a) Soekarno<br>
<input type="radio" name="soal2" value="b">b) Joko Widodo<br>
<input type="radio" name="soal2" value="c">c) Megawati Soekarnoputri<br>
<input type="radio" name="soal2" value="d">d) Susilo Bambang Yudhoyono<br>
</div>
<div id="soal">
<p>3. Apa lambang negara Indonesia?</p>
<input type="radio" name="soal3" value="a">a) Burung Merak<br>
<input type="radio" name="soal3" value="b">b) Garuda Pancasila<br>
<input type="radio" name="soal3" value="c">c) Banteng<br>
<input type="radio" name="soal3" value="d">d) Harimau<br>
</div>
<button onclick="hitungNilai()">Selesai</button>
<div id="hasil"></div>
<script>
function hitungNilai() {
var nilai = 0;
// Cek jawaban soal 1
var jawaban1 = document.querySelector('input[name="soal1"]:checked');
if (jawaban1 && jawaban1.value === "a") {
nilai++;
}
// Cek jawaban soal 2
var jawaban2 = document.querySelector('input[name="soal2"]:checked');
if (jawaban2 && jawaban2.value === "a") {
nilai++;
}
// Cek jawaban soal 3
var jawaban3 = document.querySelector('input[name="soal3"]:checked');
if (jawaban3 && jawaban3.value === "b") {
nilai++;
}
// Tampilkan hasil
var hasil = document.getElementById("hasil");
hasil.innerHTML = "Nilai Anda: " + nilai + "/3";
}
</script>
</body>
</html>
Demo
1. Apa ibu kota Indonesia?
a) Jakartab) Surabaya
c) Bandung
d) Yogyakarta
2. Siapakah presiden pertama Indonesia?
a) Soekarnob) Joko Widodo
c) Megawati Soekarnoputri
d) Susilo Bambang Yudhoyono
3. Apa lambang negara Indonesia?
a) Burung Merakb) Garuda Pancasila
c) Banteng
d) Harimau
Dalam contoh ini, kami memiliki tiga soal multiple choice dan tombol "Selesai" yang akan menghitung nilai berdasarkan jawaban yang dipilih oleh pengguna. Jawaban yang benar diberi nilai 1, dan hasilnya ditampilkan di bawahnya. Anda dapat menambahkan lebih banyak soal dan mengubah jawaban yang benar sesuai kebutuhan.