Html : Cara Membuat Game Quiz dan Timer dengan Java & CSS

K o n n i c h i w a-!

Haii-! Haii-! bagi pembaca blog aku ❤
Siapa sih yang gatau game WHO WANTS TO BE A MILLIONAIRE?

Kali ini aku mau bahas tentang cara membuat game Quiz dengan html, javascript & css.

1. Buka software notepad / notepad++
2. Untuk membuat layout / tampilan dari quiz ini kita berikan css, kalian bisa copas script di bawah ini :

<style type="text/css">
body{
background: #F08080;
margin:50;
}
.tombol{
background: #F08080;
color: white;
font-size: 11pt;
width: 20%;
border: none;
border-radius: 10px;
padding: 10px 20px;
}
.kotak2{
    width:720px;
background: white;
margin: 0px auto;
padding: 50px 50px;
border-radius: 10px;
}
</style>

3. Untuk membuat timer & perintah untuk dari quiz ini kita berikan javascript, kalian bisa copas script di bawah ini :

<script language="JavaScript">
<!-- Mulai_script_Waktu
var c = 60;
// Selesai_Script_Waktu -->

<!-- Mulai_script_soal
var ans = new Array;
var done = new Array;
var score = 0;
ans[1] = "c";
ans[2] = "d";
ans[3] = "c";
ans[4] = "b";
ans[5] = "a";
ans[6] = "d";
ans[7] = "a";
ans[8] = "d";
ans[9] = "b";
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 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 >= 7 && score <= 11) {
alert("Akses Diterima! Klik tombol ...")
self.location="level 2.html"
}
else {
alert("Akses di tolak!  anda membutuhkan 7 point untuk lanjut ke tahap selanjutnya.")
   }
}
// Selesai_Script_Soal -->

<!-- Mulai_script_Waktu
function timer001 () {
    c = c - 1;
if (c < 60) {
   time001.innerHTML = c;
}

    if (c < 1) {
   window.clearInterval(update);
   alert("MOHON MAAF WAKTU ANDA SUDAH HABIS");
}
else {
document.getElementById("countdown-number").innerHTML = waktu;
}
}
update = setInterval ("timer001()", 1000);
// Selesai_Script_Waktu -->
</script>

4. Untuk script html, kalian bisa copas script di bawah ini :

<div class="kotak2">
<center><h1 style="color: #F08080"><span style="font-family: Arial;">WHO WANTS TO BE A MILLIONAIRE</span></h1><br /></center>
<center><b>---Petunjuk: Kumpulkan 7 points untuk melanjutkan ke sesi selanjutnya---</b><br/></center>
<center><b><text style="color: red">time: <text id="time001">60</text></text></b></center>
<noscript><p class="alert">Javasript tidak mendukung atau tidak aktif di browser anda. Mohon agar mengatifkan javascript anda.</p></noscript>
<hr />
<form>
<b>1. Contoh Soal 1</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A <br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban B<br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban C<br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban D<br />
<br>
<b>2. Contoh Soal 2</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A<br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban B<br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban C<br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban D<br />
<br>
<b>3. Contoh Soal 3</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A<br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban <br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban <br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban <br />
<br>
<b>4. Contoh Soal 4</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A<br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban <br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban <br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban <br />
<br>
<b>5. Contoh Soal 5</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A<br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban B<br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban C<br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban D<br />
<br>
<b>6. Contoh Soal 6</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A<br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban B<br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban C<br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban D<br />
<br>
<b>7. Contoh Soal 7</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A<br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban <br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban <br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban <br />
<br>
<b>8. Contoh Soal 8</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A<br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban B<br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban C<br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban D<br />
<br>
<b>9. Contoh Soal 9</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A<br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban B<br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban C<br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban D<br />
<br>
<b>10. Contoh Soal 10</b><br />
<input onclick="Engine(1, this.value)" type="radio" value="a" />Contoh Jawaban A<br />
<input onclick="Engine(1, this.value)" type="radio" value="b" />Contoh Jawaban B<br />
<input onclick="Engine(1, this.value)" type="radio" value="c" />Contoh Jawaban C<br />
<input onclick="Engine(1, this.value)" type="radio" value="d" />Contoh Jawaban D<br />
<br />
<center>
<input onclick="NextLevel()" class="tombol" type="button" value="Soal Selanjutnya" />
</center>
</form>

Sangat mudah bukan? Ayo kita bersama belajar bahasa pemograman~

A r i g a t o-!