Cara Membuat Game Kuis Sederhana dengan Javascript
Halo sobat IES-team,pada kesempatan kali ini saya akan membuat game kuis (quis) tebak-tebakan menggunakan bahasa pemograman Javascript. Untuk game kuis ini dibuat sederhana, yang kodenya saya dapatkan di Javascript game code.
Jika anda tertarik untuk membuat game kuis silahkan baca artikel ini sampai selesai.
Pengertian Javascript
JavaScript merupakan bahasa pemrograman yang paling banyak digunakan para progammer dalam kurun waktu dua puluh tahun ini. Oleh karena itu JavaScript juga dikenal sebagai salah satu dari tiga bahasa pemrograman utama bagi website developer didunia.
Cara Membuat Game Kuis dengan Notepad
Sebelum melanjutkan untuk membuat game tebak-tebakan dengan javascript, silahkan ikuti langkah-langkah berikut ini.
Bahan-bahan yang perlu dipersiapkan untuk membuat quiz
Berikut ini adalah bahan-bahan yang perlu disiapkan untuk membuat aplikasi kuis dengan javascript.
Komputer / PC.
Aplikasi Text Editor
Niat yang tulus
Setelah mempersiapkan aplikasi tersebut silahkan menuju ketahap selanjutnya.
Langkah pertama: buat file index.html
Buat file index.html, seperti:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Game Kuis Sederhana</title>
<style>
//taruh file cssnya disini
</style>
</head>
<body>
//taruh file html disini
<script>
//taruh file javascriptnya disini
</script>
</body>
</html>
Langkah kedua: Silahkan copy dan paste Kode
Setelah itu silahkan copy dan pastekan kode dibawah ini sesuai diatas.
Kode HTML
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
</div>
</div>
Kode CSS
*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
Kode Javascript
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
startButton.innerText = 'Restart'
startButton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [
{
question: 'What is 2 + 2?',
answers: [
{ text: '4', correct: true },
{ text: '22', correct: false }
]
},
{
question: 'Who is the best YouTuber?',
answers: [
{ text: 'Web Dev Simplified', correct: true },
{ text: 'Traversy Media', correct: true },
{ text: 'Dev Ed', correct: true },
{ text: 'Fun Fun Function', correct: true }
]
},
{
question: 'Is web development fun?',
answers: [
{ text: 'Kinda', correct: false },
{ text: 'YES!!!', correct: true },
{ text: 'Um no', correct: false },
{ text: 'IDK', correct: false }
]
},
{
question: 'What is 4 * 2?',
answers: [
{ text: '6', correct: false },
{ text: '8', correct: true }
]
}
]
Langkah ketiga: Save dan View
Jika sudah selesai silahkan klik save, dan tarik file index.html ke browser.
Untuk mengganti soalnya anda bisa ubah di kode Javascripnya. Jika berhasil maka tampilannya seperti demo diatas.
Kesimpulan
Itulah tadi Cara Membuat Game Kuis Sederhana dengan Javascript, semoga bermanfaat.
Jangan lupa kunjungi juga blog https://www.ansoriweb.com
