Berikut adalah contoh kode untuk membuat soal pilihan ganda dengan button yang bisa dipilih menggunakan bahasa pemrogaman HTML, CSS dan Java script.
Hasil dari pemrogamannya tampak pada 3 soal pilihan ganda di bawah
Bagaimana cara membuat contoh soal pilihan ganda dengan HTML, CSS dan JavaScript?
Di mana kami menambahkan style css in line di kode html untuk membuat pertanyaan berwarna hijau dengan lingkarang di ujungnya, kode cssnya sebagai berikut style=”background-color: #4caf50; border-radius: 20px; color: white; padding: 5px 10px; text-decoration: none;”
Untuk kode html nya sebagai berikut,
<a class=”rcorner” href=”#” style=”background-color: #4caf50; border-radius: 20px; color: white; padding: 5px 10px; text-decoration: none;”> 1. Berapa 5+6?</a><br />
<input id=”correct1″ name=”qusetion1″ type=”radio” />11<br />
<input name=”question1″ type=”radio” />8<br />
<input name=” question1″ type=”radio” />10<br />
<input name=” question1″ type=”radio” />9<br />
<a class=”rcorner” href=”#” style=”background-color: #4caf50; border-radius: 20px; color: white; padding: 5px 10px; text-decoration: none;”> 1. Berapa 9-6?</a><br />
<input name=” question2″ type=”radio” />7<br />
<input name=” question2″ type=”radio” />2<br />
<input id=”correct2″ name=” question2″ type=”radio” />3<br />
<input name=”question2″ type=”radio” />1<br />
<a class=”rcorner” href=”#” style=”background-color: #4caf50; border-radius: 20px; color: white; padding: 5px 10px; text-decoration: none;”>3.Berapa 3 x 8 = ?</a><br />
<br />
<input name=”question3″ type=”radio” />15<br />
<input id=”correct3″ name=”question3″ type=”radio” />24<br />
<input name=”question3″ type=”radio” />34<br />
<input name=”question3″ type=”radio” />30<br />
<input name=”submit” onclick=”result()” type=”submit” value=”Cek nilai saya” />
Supaya soal bisa berjalan maka kita perlu membuat script untuk menjalankan soal, fungsi scriptnya sebagai berikut :
function result() {
var score=0;
if (document.getElementById(‘correct1’).checked)
{
score++;
}
if (document.getElementById(‘correct2’).checked)
{
score++;
}
if (document.getElementById(‘correct3’).checked)
{
score++;
}
document.write(“Nilai anda adalah:”+score);
document.write(“..soal nomor 1 jawabannya 11, soal nomor 2 jawabannya 3, soal nomor 3 jawabannya 24: Klik reload this page untuk memuat halaman kembali”);
}
Adapun keseluruhan kode untuk anda pasangkan di html anda,tertera di bawah, pastikan anda tidak salah dalam menulis spasi, menulis kode dan tanda penutup, kesalahan dalam menulis kode akan membuat program tidak bisa berjalan dengan sempurna. Silakan mencoba
“”Copy Mulai dari sini””<a class=”rcorner” href=”#” style=”background-color: #4caf50; border-radius: 20px; color: white; padding: 5px 10px; text-decoration: none;”> 1. Berapa 5+6?</a><br />
<input id=”correct1″ name=”qusetion1″ type=”radio” />11<br />
<input name=”question1″ type=”radio” />8<br />
<input name=” question1″ type=”radio” />10<br />
<input name=” question1″ type=”radio” />9<br />
<a class=”rcorner” href=”#” style=”background-color: #4caf50; border-radius: 20px; color: white; padding: 5px 10px; text-decoration: none;”> 1. Berapa 9-6?</a><br />
<input name=” question2″ type=”radio” />7<br />
<input name=” question2″ type=”radio” />2<br />
<input id=”correct2″ name=” question2″ type=”radio” />3<br />
<input name=”question2″ type=”radio” />1<br />
<a class=”rcorner” href=”#” style=”background-color: #4caf50; border-radius: 20px; color: white; padding: 5px 10px; text-decoration: none;”>3.Berapa 3 x 8 = ?</a><br />
<br />
<input name=”question3″ type=”radio” />15<br />
<input id=”correct3″ name=”question3″ type=”radio” />24<br />
<input name=”question3″ type=”radio” />34<br />
<input name=”question3″ type=”radio” />30<br />
<input name=”submit” onclick=”result()” type=”submit” value=”Cek nilai saya” />
<script type=”text/javascript”>
function result() {
var score=0;
if (document.getElementById(‘correct1’).checked)
{
score++;
}
if (document.getElementById(‘correct2’).checked)
{
score++;
}
if (document.getElementById(‘correct3’).checked)
{
score++;
}
document.write(“Nilai anda adalah:”+score);
document.write(“..soal nomor 1 jawabannya 11, soal nomor 2 jawabannya 3, soal nomor 3 jawabannya 24: Klik reload this page untuk memuat halaman kembali”);
}
</script> “Copy sampai ke sini”
