Membuat Soal Di HTML

pada tanggal
Haloo.. Semuaaa
 Lama enggak upload nihhh,maaf ya karena berbagai kendala dan urusan lain jadi lupa hehehehehehe.☺☺☺☺

 Saya sekarang akan ngasih kalian semua Script untuk membuat soal ulangan di html,dan berikut script nya.
<html>
<head>
<title>
Soal Pilihan Ganda Sejarah
</title>
</head>
<style type="text/css">
.table1 {
font-family: sans-serif;
color: #444;
border-collapse: collapse;
width: 80%;
border: 1px solid #f2f5f7;
}

 .table1 tr th{
background: #a52a2a;
color: #fff;
font-weight: normal;
}

 .table1, th, td {
padding: 8px 20px;
text-align: left;
}

 .table1 tr:hover {
background-color: #f5f5f5;
}

 .table1 tr:nth-child(even) {
background-color: #f2f2f2;
}

#countdown {
position: absolute;
margin: auto;
margin-top: -200px;
margin-left: 0px;
height: 40px;
width: 40px;
text-align: center;
margin-bottom: 10px;
}

#tulis {
color: white;
display: inline-block;
line-height: 20x;
}

 #countdown-number {
color: white;
display: inline-block;
line-height: 40px;
}

 svg {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
transform: rotateY(-180deg) rotateZ(-90deg);
}

 svg circle {
stroke-dasharray: 113px;
stroke-dashoffset: 0px;
stroke-linecap: round;
stroke-width: 2px;
stroke: white;
fill: none;
animation: countdown 200s linear infinite forwards;
}

 @keyframes countdown {
from {
stroke-dashoffset: 0px;
}
to {
stroke-dashoffset: 113px;
}
}
</style>
<script language="JavaScript">
<!-- Mulai_script_soal
var waktu = 200;
setInterval(function() {
waktu--;
if(waktu < 0) {
alert("WAKTU HABIS !!!!!!!!");
}else{
document.getElementById("countdown-number").innerHTML = waktu;
}
}, 1000);
var jawaban = new Array;
var selesai = new Array;
var score = 0;
jawaban[1] = "a";
jawaban[2] = "d";
jawaban[3] = "b";
jawaban[4] = "b";
jawaban[5] = "a";
jawaban[6] = "b";
jawaban[7] = "c";
jawaban[8] = "a";
jawaban[9] = "d";
jawaban[10] = "b";
 
function Engine(question, jawabanwer) {
if (jawabanwer != jawaban[question]) {
if (!selesai[question]) {
selesai[question] = -1;
//alert("Salah!\n\nSkor anda sekarang adalah: " + score);
}
else {
//alert("Anda sudah pernah menjawab soal ini!");
   }
}
else {
if (!selesai[question]) {
selesai[question] = -1;
score++;
//alert("Benar!\n\nSkor anda sekarang adalah: " + score);
}
else {      
//alert("Anda sudah pernah menjawab soal ini!");
  }
   }
}
function NextLevel () {
if (score > 10) {
alert("Anda mendapatkan nilai SEMPURNA !");
}
if (score >= 8 && score <= 11) {
alert("Akses Diterima! Klik tombol ...")
}
else {
alert("Akses di tolak!  anda membutuhkan 8 point untuk lanjut ke tahap selanjutnya.")
   }
}
// Selesai_Script_Soal -->
</script>
<body bgcolor="">
<table class="table1" border="0" align="center">
<tr>
<th align="center">
<center>
<br><font size='7'>Soal Sejarah</font></br>
<br><b><font size='10' >Perang Dunia 2</font></b><br/>
</center>
</th>
</tr>
<tr>
<th class="tulis1">
<center>
<br><font size='3'>Soal ini berisi tentang soal sejarah PD2 minimal skor adalah 8</font></br>
<span id="countdown"></span>
<div id="countdown">
<div id="countdown-number">200</div>
<div id="tulis">DETIK</div>
<svg>
<circle r="18" cx="20" cy="20"></circle>
</svg>
</center>
</th>
</tr>
<tr>

<form>
<td align="left">
<b>1. Tahun berapa Perang Dunia 2 mulai?</b><br />
<input onclick="Engine(1, this.value)" type="radio" name="nama_radio1" value="a" />1939<br />
<input onclick="Engine(1, this.value)" type="radio" name="nama_radio1" value="b" />1936<br />
<input onclick="Engine(1, this.value)" type="radio" name="nama_radio1" value="c" />1925<br />
<input onclick="Engine(1, this.value)" type="radio" name="nama_radio1" value="d" />1938<br />
<br />
<b>2. Sebuah peristiwa yang mengakibatkan kematian masal dalam Perang Dunia2 adalah?</b><br />
<input onclick="Engine(2, this.value)" type="radio" name="nama_radio2" value="a" />Pembangkitan Partai Nazi Jerman<br />
<input onclick="Engine(2, this.value)" type="radio" name="nama_radio2" value="b" />Penembakan Presiden Amerika<br />
<input onclick="Engine(2, this.value)" type="radio" name="nama_radio2" value="c" />Pemakaian Senjata Ilegal<br />
<input onclick="Engine(2, this.value)" type="radio" name="nama_radio2" value="d" />Pemakaian senjata nuklir dalam peperangan<br />
<br />
<br />
<b>3. Dalam PD2 Kekaisaran Jepang Berusaha mendominasi?</b><br />
<input onclick="Engine(3, this.value)" type="radio" name="nama_radio3" value="a" />Afrika Selatan<br />
<input onclick="Engine(3, this.value)" type="radio" name="nama_radio3" value="b" />Asia Timur<br />
<input onclick="Engine(3, this.value)" type="radio" name="nama_radio3" value="c" />Eropa<br />
<input onclick="Engine(3, this.value)" type="radio" name="nama_radio3" value="d" />Asia Tenggara<br />
<br />
</td>
</tr>
<tr>
<td align="left">
<b>4. Pada tanggal 1 September 1939 Terjadi peristiwa?</b><br />
<input onclick="Engine(4, this.value)" type="radio" name="nama_radio4" value="a" />Pengeboman Di Amerika<br />
<input onclick="Engine(4, this.value)" type="radio" name="nama_radio4" value="b" />Invasi ke Polandia oleh Jerman<br />
<input onclick="Engine(4, this.value)" type="radio" name="nama_radio4" value="c" />Pengeboman Jepang terhadap Pearl Harbor <br />
<input onclick="Engine(4, this.value)" type="radio" name="nama_radio4" value="d" />Masuknya Italia ke Blok Timur<br />
<br />
<b>5. Kerjasama antar Jerman dengan Italia adalah untuk?</b><br />
<input onclick="Engine(5, this.value)" type="radio" name="nama_radio5" value="a" />Menaklukan Eropa<br />
<input onclick="Engine(5, this.value)" type="radio" name="nama_radio5" value="b" />Menaklukan Asia<br />
<input onclick="Engine(5, this.value)" type="radio" name="nama_radio5" value="c" />Menaklukan Amerika<br />
<input onclick="Engine(5, this.value)" type="radio" name="nama_radio5" value="d" />Menaklukan Eropa Timur<br />
<br />
<b>6. Kapan Poros Eropa melancarkan invasi terhadap Uni Soviet?</b><br />
<input onclick="Engine(6, this.value)" type="radio" name="nama_radio6" value="a" />Januari 1943<br />
<input onclick="Engine(6, this.value)" type="radio" name="nama_radio6" value="b" />Juni 1941<br />
<input onclick="Engine(6, this.value)" type="radio" name="nama_radio6" value="c" />Agustus 1940<br />
<input onclick="Engine(6, this.value)" type="radio" name="nama_radio6" value="d" />Juni 1940<br />
<br />
</td>
</tr>
<tr>
<td align="left">
<b>7. Perang di Eropa berakhir dengan?</b><br />
<input onclick="Engine(7, this.value)" type="radio" name="nama_radio7" value="a" />Kalah nya jepang<br />
<input onclick="Engine(7, this.value)" type="radio" name="nama_radio7" value="b" />Merdekanya Indonesia<br />
<input onclick="Engine(7, this.value)" type="radio" name="nama_radio7" value="c" />Pendudukan Berlin<br />
<input onclick="Engine(7, this.value)" type="radio" name="nama_radio7" value="d" />Invasi Tentara UniSoviet<br />
<br />
<b>8. Operasi Neptune Adalah?</b><br />
<input onclick="Engine(8, this.value)" type="radio" name="nama_radio8" value="a" />Adalah operasi pendaratan Blok Sekutu<br />
<input onclick="Engine(8, this.value)" type="radio" name="nama_radio8" value="b" />Kode Penyerangan Terhadap Pearl Harbor<br />
<input onclick="Engine(8, this.value)" type="radio" name="nama_radio8" value="c" />Nama perang laut Saat melawan Jepang<br />
<input onclick="Engine(8, this.value)" type="radio" name="nama_radio8" value="d" />Sebuah blok aliansi Uni Soviet<br />
<br />
<b>9. Tahun 1944?</b><br />
<input onclick="Engine(9, this.value)" type="radio" name="nama_radio9" value="a" />Pengeboman Hirosima<br />
<input onclick="Engine(9, this.value)" type="radio" name="nama_radio9" value="b" />Peristiwa Penting Di Indonesia<br />
<input onclick="Engine(9, this.value)" type="radio" name="nama_radio9" value="c" />Pendudukan Berlin Oleh UniSoviet<br />
<input onclick="Engine(9, this.value)" type="radio" name="nama_radio9" value="d" />Sekutu Barat menyerbu Prancis<br />
<br />
<b>10. Kekaisaran Jepang menyerah pada?</b><br />
<input onclick="Engine(10, this.value)" type="radio" name="nama_radio10" value="a" />10 Agustus 1944<br />
<input onclick="Engine(10, this.value)" type="radio" name="nama_radio10" value="b" />15 Agustus 1945<br />
<input onclick="Engine(10, this.value)" type="radio" name="nama_radio10" value="c" />9 Juni 1939<br />
<input onclick="Engine(10, this.value)" type="radio" name="nama_radio10" value="d" />23 Januari 1940<br />

<br />
<br />
</td>
</tr>
<tr>
<td align="left">
<center>
 
<input onclick="NextLevel()" type="button" value="Selesai" />
 
</center>
</td>
</form>
</tr>
</table>
</body>
</html>
Seperti itulah script nya dan berikut hasil nya.......



Berikut DEMO HTML.......
Soal Pilihan Ganda Sejarah

Soal Sejarah

Perang Dunia 2

Soal ini berisi tentang soal sejarah PD2 minimal skor adalah 8
200
DETIK
1. Tahun berapa Perang Dunia 2 mulai?
1939
1936
1925
1938

2. Sebuah peristiwa yang mengakibatkan kematian masal dalam Perang Dunia2 adalah?
Pembangkitan Partai Nazi Jerman
Penembakan Presiden Amerika
Pemakaian Senjata Ilegal
Pemakaian senjata nuklir dalam peperangan


3. Dalam PD2 Kekaisaran Jepang Berusaha mendominasi?
Afrika Selatan
Asia Timur
Eropa
Asia Tenggara
4. Pada tanggal 1 September 1939 Terjadi peristiwa?
Pengeboman Di Amerika
Invasi ke Polandia oleh Jerman
Pengeboman Jepang terhadap Pearl Harbor
Masuknya Italia ke Blok Timur

5. Kerjasama antar Jerman dengan Italia adalah untuk?
Menaklukan Eropa
Menaklukan Asia
Menaklukan Amerika
Menaklukan Eropa Timur

6. Kapan Poros Eropa melancarkan invasi terhadap Uni Soviet?
Januari 1943
Juni 1941
Agustus 1940
Juni 1940
7. Perang di Eropa berakhir dengan?
Kalah nya jepang
Merdekanya Indonesia
Pendudukan Berlin
Invasi Tentara UniSoviet

8. Operasi Neptune Adalah?
Adalah operasi pendaratan Blok Sekutu
Kode Penyerangan Terhadap Pearl Harbor
Nama perang laut Saat melawan Jepang
Sebuah blok aliansi Uni Soviet

9. Tahun 1944?
Pengeboman Hirosima
Peristiwa Penting Di Indonesia
Pendudukan Berlin Oleh UniSoviet
Sekutu Barat menyerbu Prancis

10. Kekaisaran Jepang menyerah pada?
10 Agustus 1944
15 Agustus 1945
9 Juni 1939
23 Januari 1940

Komentar

Posting Komentar