Langsung ke konten utama

Membuat Soal di HTML

Hai......
Kali ini saya akan membuat tentang cara membuat soal di html. Dan didalam html yang dibuat ada css dan javascriptnya. Fungsi css disini yaitu untuk memperindah tampilan html. Fungsi javascript disini yaitu untuk memproses kiriman yang sudah dipilih dalam soal.

Ini adalah html yang saya buat :

<html>
<head>
<title>Latihan Soal</title>
</head>
<body bgcolor="#C0C0C0">
<style type="text/css">
.table1 {
font-family: sans-serif;
color: #000000;
border-collapse: collapse;
width: 80%;
border-radius: 20px;
}
 
.table1 tr th{
background: #00FFFF;
color: #000;
font-weight: normal;
}
 
.table1, th, td {
background: #fff;
padding: 8px 20px;
text-align: left;
border-radius: 20px;
}

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

 #countdown-number {
color: #8B0000;
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: 4px;
stroke: #8B0000;
fill: none;
animation: countdown 120s linear infinite forwards;
}

 @keyframes countdown {
from {
stroke-dashoffset: 0px;
}
to {
stroke-dashoffset: 113px;
}
}
</style>
<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] = "a";
ans[4] = "d";
ans[5] = "d";
ans[6] = "c";
ans[7] = "a";
ans[8] = "b";
ans[9] = "c";
ans[10] = "d";
 
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 sudah pernah menjawab soal ini!");
}
}
else {
if (!done[question]) {
done[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 <= 10) {
alert("Score terakhir anda" + score)
//self.location="http://www.umboh.net/p/about.html"
}
else {
alert("Akses di tolak!  anda membutuhkan 8 point untuk lanjut ke tahap selanjutnya.")
}
}

var waktu = 120;
setInterval(function() {
waktu--;
if(waktu < 0) {
alert("WAKTU HABIS !!!!!!!!");
}else{
document.getElementById("countdown-number").innerHTML = waktu;
}
}, 1000);
// Selesai_Script_Soal -->
</script>

<table class="table1" border="0" align="center">
<tr>
<th align="center">
<center>
<br><font size="7">Soal IPS dan Sejarah</font></br></br>
<span id="countdown"></span>
<div id="countdown">
<div id="countdown-number">120</div>
<svg>
<circle r="18" cx="20" cy="20"></circle>
</svg>
</center>
</th>
</tr>
<tr>
<td align="left">
<form>
<b>1. Negara terbesar di dunia adalah...</b><br />
<input name="nama_radio1" onclick="Engine(1, this.value)" type="radio" value="a" />Rusia<br />
<input name="nama_radio1" onclick="Engine(1, this.value)" type="radio" value="b" />Amerika<br />
<input name="nama_radio1" onclick="Engine(1, this.value)" type="radio" value="c" />Indonesia<br />
<input name="nama_radio1" onclick="Engine(1, this.value)" type="radio" value="d" />Tiongkok<br />
<b>2. Danau terbesar di dunia?</b><br />
<input name="nama_radio2" onclick="Engine(2, this.value)" type="radio" value="a" />Danau Toba<br />
<input name="nama_radio2" onclick="Engine(2, this.value)" type="radio" value="b" />Danau Kaspia<br />
<input name="nama_radio2" onclick="Engine(2, this.value)" type="radio" value="c" />Danau Superior<br />
<input name="nama_radio2" onclick="Engine(2, this.value)" type="radio" value="d" />Danau Victoria<br />
<b>3. Berapa lama perang Diponegoro berlangsung?</b><br />
<input name="nama_radio3" onclick="Engine(3, this.value)" type="radio" value="a" />5 tahun<br />
<input name="nama_radio3" onclick="Engine(3, this.value)" type="radio" value="b" />10 tahun<br />
<input name="nama_radio3" onclick="Engine(3, this.value)" type="radio" value="c" />20 tahun<br />
<input name="nama_radio3" onclick="Engine(3, this.value)" type="radio" value="d" />25 tahun<br />
<b>4. Kerajaan Majapahit mencapai kejayaannya pada saat dipimpin oleh raja?</b><br />
<input name="nama_radio4" onclick="Engine(4, this.value)" type="radio" value="a" />Gajah Mada<br />
<input name="nama_radio4" onclick="Engine(4, this.value)" type="radio" value="b" />Jayabaya<br />
<input name="nama_radio4" onclick="Engine(4, this.value)" type="radio" value="c" />Prabu Siliwangi<br />
<input name="nama_radio4" onclick="Engine(4, this.value)" type="radio" value="d" />Hayam Wuruk<br />
<b>5. Gunung dengan ledakan terdahsyat sepanjang sejarah adalah....</b><br />
<input name="nama_radio5" onclick="Engine(5, this.value)" type="radio" value="a" />Gunung Nevado del Ruiz<br />
<input name="nama_radio5" onclick="Engine(5, this.value)" type="radio" value="b" />Gunung Krakatau<br />
<input name="nama_radio5" onclick="Engine(5, this.value)" type="radio" value="c" />Gunung Pelee<br />
<input name="nama_radio5" onclick="Engine(5, this.value)" type="radio" value="d" />Gunung Tambora<br />
<b>6. Siapa nama tokoh dibawah ini?</b><br /><img width="130" height="80" src="https://cdns.klimg.com/merdeka.com/i/w/tokoh/2012/03/15/4598/200x300/teuku-umar.jpg" /><br />
<input name="nama_radio6" onclick="Engine(6, this.value)" type="radio" value="a" />Imam Bonjol<br />
<input name="nama_radio6" onclick="Engine(6, this.value)" type="radio" value="b" />Pangeran Antasari<br />
<input name="nama_radio6" onclick="Engine(6, this.value)" type="radio" value="c" />Teuku Umar<br />
<input name="nama_radio6" onclick="Engine(6, this.value)" type="radio" value="d" />Pangeran Diponegoro<br />
<b>7. Kapan VOC (Vereenigde Oost Indische Compagnie) didirikan?</b><br />
<input name="nama_radio7" onclick="Engine(7, this.value)" type="radio" value="a" />20 Maret 1602<br />
<input name="nama_radio7" onclick="Engine(7, this.value)" type="radio" value="b" />21 Maret 1602<br />
<input name="nama_radio7" onclick="Engine(7, this.value)" type="radio" value="c" />22 Maret 1602<br />
<input name="nama_radio7" onclick="Engine(7, this.value)" type="radio" value="d" />23 Maret 1602<br />
<b>8. Siapa nama presiden sementara pengganti  Soekarno, pada saat Soekarno ditahan Belanda?</b><br />
<input name="nama_radio8" onclick="Engine(8, this.value)" type="radio" value="a" />Sayuti Melik<br />
<input name="nama_radio8" onclick="Engine(8, this.value)" type="radio" value="b" />Syafruddin Prawiranegara<br />
<input name="nama_radio8" onclick="Engine(8, this.value)" type="radio" value="c" />Mr.Muhammad Yamin<br />
<input name="nama_radio8" onclick="Engine(8, this.value)" type="radio" value="d" />Prof.Dr.Mr.Soepomo<br />
<b>9. Nama presiden ketiga indonesia?</b><br />
<input name="nama_radio9" onclick="Engine(9, this.value)" type="radio" value="a" />Soekarno<br />
<input name="nama_radio9" onclick="Engine(9, this.value)" type="radio" value="b" />Soeharto<br />
<input name="nama_radio9" onclick="Engine(9, this.value)" type="radio" value="c" />B.J. Habibie<br />
<input name="nama_radio9" onclick="Engine(9, this.value)" type="radio" value="d" />Abdurrahman Wahid<br />
<b>10. Manakah bendera negara Nepal</b><br /><br />
<input name="nama_radio10" onclick="Engine(10, this.value)" type="radio" value="a" /><img height="80" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Flag_of_the_Philippines.svg/300px-Flag_of_the_Philippines.svg.png" width="130" /><br /><br />
<input name="nama_radio10" onclick="Engine(10, this.value)" type="radio" value="b" /><img height="80" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Flag_of_Russia.svg/1280px-Flag_of_Russia.svg.png" width="130" /><br /><br />
<input name="nama_radio10" onclick="Engine(10, this.value)" type="radio" value="c" /><img height="80" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png" width="130" /><br /><br />
<input name="nama_radio10" onclick="Engine(10, this.value)" type="radio" value="d" /><img height="100" src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Flag_of_Nepal.svg" width="140" /><br />
<br />
<br />
<center>
<input onclick="NextLevel()" type="button" value="Selesai" />
</center>
                        </form>
</td>
</tr>
</table>
</body>
</html>

Ini demonya :

Latihan Soal

Soal IPS dan Sejarah
120
1. Negara terbesar di dunia adalah...
Rusia
Amerika
Indonesia
Tiongkok
2. Danau terbesar di dunia?
Danau Toba
Danau Kaspia
Danau Superior
Danau Victoria
3. Berapa lama perang Diponegoro berlangsung?
5 tahun
10 tahun
20 tahun
25 tahun
4. Kerajaan Majapahit mencapai kejayaannya pada saat dipimpin oleh raja?
Gajah Mada
Jayabaya
Prabu Siliwangi
Hayam Wuruk
5. Gunung dengan ledakan terdahsyat sepanjang sejarah adalah....
Gunung Nevado del Ruiz
Gunung Krakatau
Gunung Pelee
Gunung Tambora
6. Siapa nama tokoh dibawah ini?

Imam Bonjol
Pangeran Antasari
Teuku Umar
Pangeran Diponegoro
7. Kapan VOC (Vereenigde Oost Indische Compagnie) didirikan?
20 Maret 1602
21 Maret 1602
22 Maret 1602
23 Maret 1602
8. Siapa nama presiden sementara pengganti Soekarno, pada saat Soekarno ditahan Belanda?
Sayuti Melik
Syafruddin Prawiranegara
Mr.Muhammad Yamin
Prof.Dr.Mr.Soepomo
9. Nama presiden ketiga indonesia?
Soekarno
Soeharto
B.J. Habibie
Abdurrahman Wahid
10. Manakah bendera negara Nepal

Sekian terima kasih ya lur.........................

Komentar

Posting Komentar