Cara Membuat Quiz Sederhana dengan JavaScript – Sobat Java, apakah kamu suka bermain kuis? Sekarang kamu bisa membuat sendiri aplikasi kuis yang interaktif menggunakan bahasa pemrograman JavaScript.
Quiz Sederhana dengan JavaScript dapat dibangun dengan menggunakan kombinasi HTML, CSS, dan JavaScript. JavaScript digunakan untuk mengatur logika permainan, seperti mengubah pertanyaan, mengelola jawaban yang dipilih, dan menghitung skor.
HTML digunakan untuk membuat struktur dasar dari tampilan quiz, sementara CSS digunakan untuk merancang tata letak dan gaya tampilan. Dalam artikel kali ini kelasjava akan memandu kamu supaya bisa membuat serangkaian pertanyaan dan pilihan jawaban yang bisa dijawab oleh pengguna dalam bentuk quiz sederhana yang dibuat menggunakan program JavaScript.
Hal yang Dibutuhkan untuk Membuat Quiz Sederhana dengan JavaScript
Sebelum memulai proyek dalam pembuatan kuis sederhana menggunakan program JS, pastikan kamu telah menyiapkan beberapa hal berikut:
- Perangkat laptop.
- Sublime Text (Editor kode teks).
- Google Chrome (Peramban web).
- Niat yang kuat untuk belajar dan berkarya.
Cara Mudah Membuat Quiz Sederhana dengan JavaScript
1. Persiapan Folder dan File
Pastikan untuk membuat folder proyek dan file-file yang diperlukan untuk kuis sederhana, lebih lengkapnya dibawah ini:
- Buat Folder: Buat folder untuk proyek quiz yang akan kamu buat.
- Buat File HTML: Buat file index.html untuk struktur halaman web.
- Buat File CSS: Buat file style.css untuk mendesain tampilan halaman web.
- Buat File JavaScript: Buat file script.js untuk menulis kode JavaScript untuk logika quiz.
2. Buat Kode HTML (index.html)
Buatlah file index.html dan tambahkan kode HTML untuk membuat kuis sederhana agar bisa dijalankan, untuk kode HTML dari quiz sederhana tersebut bisa salin kode dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://kelasjava.com/</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Quiz Sederhana - By: KelasJava</h1>
<div id="question"></div>
<div id="options"></div>
<button id="submitBtn">Submit</button>
<p id="result"></p>
</div>
<script src="script.js"></script>
</body>
</html>3. Buat Kode CSS (style.css)
Buatlah file style.css untuk menambahkan tampilan yang menarik pada website quiz sederhana JavaScript, untuk kode CSS dari quiz sederhana tersebut bisa salin kode dibawah ini.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
#question {
font-size: 18px;
margin-bottom: 10px;
}
#options {
display: flex;
justify-content: space-between; /* Untuk mengatur jarak antara opsi */
flex-wrap: wrap; /* Untuk memungkinkan pembungkus opsi */
}
.option {
width: 45%; /* Atur lebar opsi */
margin-bottom: 10px; /* Atur jarak antara opsi */
background-color: gray;
}
button {
display: block;
margin: 0 auto;
padding: 10px 20px;
font-size: 16px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
text-align: center;
font-weight: bold;
}4. Buat Kode JavaScript (script.js)
Tambahkan kode JavaScript ke dalam file script.js untuk menambahkan logika kuis, berikut adalah kode yang JS yang bisa kamu salin untuk fungsionalitas dari program.
const questions = [
{
question: "Apa ibu kota Indonesia?",
options: ["Jakarta", "Bandung", "Surabaya", "Bali"],
answer: "Jakarta"
},
{
question: "Siapakah presiden pertama Indonesia?",
options: ["Soekarno", "Soeharto", "Joko Widodo", "Megawati Soekarnoputri"],
answer: "Soekarno"
},
{
question: "Berapakah hasil dari 2 + 2?",
options: ["3", "4", "5", "6"],
answer: "4"
}
];
const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const submitButton = document.getElementById('submitBtn');
const resultElement = document.getElementById('result');
let currentQuestion = 0;
let score = 0;
function loadQuestion() {
questionElement.textContent = questions[currentQuestion].question;
optionsElement.innerHTML = '';
questions[currentQuestion].options.forEach((option, index) => {
const optionElement = document.createElement('button');
optionElement.textContent = option;
optionElement.classList.add('option');
optionElement.addEventListener('click', () => checkAnswer(option));
optionsElement.appendChild(optionElement);
});
}
function checkAnswer(selectedOption) {
if (selectedOption === questions[currentQuestion].answer) {
score++;
resultElement.textContent = "Jawaban Anda Benar!";
} else {
resultElement.textContent = "Jawaban Anda Salah!";
}
currentQuestion++;
if (currentQuestion < questions.length) {
loadQuestion();
} else {
showScore();
}
}
function showScore() {
questionElement.textContent = "Quiz Selesai!";
optionsElement.innerHTML = '';
submitButton.style.display = 'none';
resultElement.textContent = `Score Anda: ${score}/${questions.length}`;
}
loadQuestion();5. Jalankan Kode
Setelah semua kode kamu tulis, langkah selanutnya adalah menjalankan program dengan membuka file index.html pada browser atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih opsi “Open in Browser”.
6. Tampilkan Hasil
Langkah terakhir yakni mencoba hasil kode program Quiz Sederhana dengan JavaScript yang telah kamu buat, untuk tampilan hasil dari kode yang sudah dibuat seperti gambar diatas. Sedangkan untuk tampilan ketika jawaban yang dipilih benar ataupun salah muncul notifikasi seperti gambar dibawah ini.
Akhir Kata
Itulah tutorial langkah demi langkah tentang cara membuat Quiz Sederhana dengan kode program JavaScript. Ikuti langkah-langkahnya dengan cermat agar kamu berhasil menciptakan kuis yang interaktif dan menarik. Selamat mencoba!
