Cara Membuat Game Kuis Tanya Jawab Dengan Javascript

Hai gan kembali lagi bersama saya di zocoding! kali ini saya akan memberikan sebuah tutorial tentang cara membuat game kuis tanya jawab dengan javascript. Sebelum itu saya mau curhat dulu :D sebenarnya saya membuat artikel ini sebanyak 2 kali soalnya yang pertama kereset padahal udah banyak yang ane tulis, Setelah kereset saya males buat lagi nih artikel tetapi berhubung ane kepikiran sama agan-agan semua yang pengin tahu cara buat game kuis tanya jawab dengan javascript sayapun menulis lagi artikel ini dengan semangat dan tentunya dengan sedikit pengorbanan yaitu tangan kriting :D tetapi tak apalah semua itu saya lakukan demi anda semua :) Okelah mari kita kembali ke laptop.

Tentu bagi kalian yang sedang membangun atau sedang berencana membuat wap ataupun web kuis pasti kalian butuh deh baca tutorial ini. Berikut adalah tutorial tentang bagaimana cara membuat game kuis tanya jawab dengan javascript.

Dalam pembuatan game kuis tanya jawab javascript hal yang perlu anda lakukan adalah memahami struktur logika dalam javascript. Struktur logika yang saya maksud adalah struktur logika IF dan Else. Logika if dan else bisa dibilang sebagai sebuah kecerdasan buatan yang sering dipakai dalam penulisan program javascript. Jadi kegunaanya bukan hanya untuk membuat game kuis saja tetapi bisa juga untuk membuat program lain.

Berikut adalah contoh code javascript yang perlu anda tulis dalam membuat game kuis berbasis tanya jawab js. Anda bisa membuat halaman baru di wap anda untuk menampung seluruh code di bawah ini dan jika anda menggunakan webhost anda bisa membuat file baru dengan nama kuis.html lalu tulis codenya di dalam file tersebut.

Buatlah form untuk penulisan jawaban. Dengan Form ini si penjawab soal akan seperti berinteraksi dengan orang lain sebab dalam menjawabnya si penjawab harus menulis secara manual di form inputan yang tersedia.

Berikut adalah code tag html untuk membuat form jawaban beserta contoh pertanyaanya yang bisa anda edit sendiri dengan pertanyaan atau soal yang anda buat sendiri.

Kota yang dulunya bernama Batavia adalah Kota?
<br>
<form name="kuis">
<input type="text" name="jawab">
<br>
<input type="button" name="button" value="Jawab" onclick="jawab2()">
</form>

Penjelasan dari tag html form jawaban di atas :

- <input type="text" name="jawab">
Tag di atas merupakan sebuah inputan yang berfungsi untuk menampung jawaban sekaligus sebagai tempat penulisan jawaban yang nantinya akan diperoses oleh javascript.

- <input type="button" name="button" value="Jawab" onclick="jawab2()">
Fungsi dari tag di atas yaitu sebagai tombol button untuk mengirim jawaban sekaligus sebagai alat untuk memanggil sebuah fungsi yang nantinnya akan kita buat di javascript yaitu fungsi jawab2()

Setelah membuat form sebagai inputannya sekarang kita buat outputnya yaitu alat untuk memproses dan menampilkan hasil jawaban yang dimasukan. Dalam hal ini logika if else lah yang kita gunakan sebagai dasar atau landasan untuk penulisan scriptnya. Oh iya anda bisa menaruh script ini di bagian atas code form jawaban ataupun dibagian bawahnya tergantung selera anda sih :)

<script language="JavaScript" type="text/JavaScript">
function jawab2()
{
var jaw;
jaw = document.kuis.jawab.value;
if (jaw=="jakarta")
{
window.location="xxx";
}
else if (jaw=="Jakarta")
{
window.location="xxx";
}
else
{
alert("Maaf Jawaban Anda Salah!");
}

}
</script>

Penjelasan Code :

Dalam script di atas saya membuat sebuah fungsi yang bernama jawab2() kegunaan dari fungsi ini yaitu untuk menampung seluruh code yang nantinya akan dipanggil oleh tombol button di form jawaban. Selain membuat fungsi saya juga membuat satu variabel yaitu variabel jaw yang berfungsi untuk menampung nilai jawaban yang dimasukan oleh si penjawab soal.

Di Script di atas saya juga membuat tiga (3) logika if dan else yaitu if (jaw=="jakarta") ... else if (jaw=="Jakarta") ... dan else ... Fungsinya yaitu untuk memberikan sebuah logika kalau jawabannya benar maka akan di alihakan ke halaman xxx sedangkan kalau salah maka ditampilan browser akan muncul pesan alert kesalahan jawaban yang dibuat oleh code tag alert("Maaf Jawaban Anda Salah!") . Huruf xxx bisa anda ganti dengan link yang menuju ke halaman lain jika jawaban yang di inputkan benar, Halaman lain itu bisa berisi kuis lagi ataupun juga bisa berisi code halaman yang berfungsi untuk menambah poin pada si penjawab.

Pasti dibenak kalian ada pertanyaan kenapa logika if nya ada dua ? yaitu :
- if (jaw=="jakarta")
- else if (jaw=="Jakarta")
Padahalkan logika tersebut sama saja memiliki fungsi kalo jawabannya jakarta maka akan bernilai benar?

Oke saya akan jawab pertanyaan di atas dengan sudut pandang saya selaku admin di zocoding :D . Sebenarnya saya membuat dua logika tersebut ada alasanya tersendiri yaitu karena javascript itu bersifat Sensitive dengan perbedaan huruf besar (Kapital) dan huruf kecil, Jadi jika kita menulis kata jakarta dan Jakarta di dalam code javascript maka kata itu akan di anggap berbeda padahal memiliki makna yang sama hal tersebut dikarenakan kata itu memiliki awalan huruf yang berbeda yaitu awalan huruf kapital J dan huruf kecil j. Nah oleh karena itulah saya buat dua logika supaya pada saat si penjawab menulis awalannya dengan huruf kecil ataupun besar maka akan bernilai sama-sama benar.

Itulah tutorial pendek tentang cara membuat game kuis tanya jawab dengan javascript. Semoga bisa bermanfaat dan menjadi ilmu yang berfaedah bagi anda, Sekian dan sampai jumpa di artikel tentang coding selanjutnya!

Tweet