Program Pilihan Ganda Dengan JavaScript dan HTML+BootStrap
3 min readNov 27, 2023
Kali ini saya akan bagikan #code untuk program pilihan ganda atau multiple choice dengan menggunakan javascript ditambah desain tampilan dengan framework css yaitu Bootstrap.
Untuk tampilannya sendiri masih dengan sederhana dan alakadarnya, nunggu ada masukan dari kalian di komentar. Langsung saja saya berikan full script #code programmnya di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Quiz Pilihan Ganda</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
max-width: 900px;
}
.question {
margin-bottom: 20px;
}
.options {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.options label {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 18px;
width: 100%;
padding: 10px 15px;
border-radius: 5px;
transition: background-color 0.3s;
}
.options label:hover {
background-color: #d4edda; /* Warna latar belakang saat hovered */
}
.options input[type="radio"] {
width: 20px;
height: 20px;
margin-right: 10px;
}
.options input[type="radio"]:checked + label {
background-color: #28a745; /* Warna latar belakang saat dipilih */
color: #fff;
}
#resultModal .modal-dialog {
max-width: 400px;
}
#loading-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
justify-content: center;
align-items: center;
z-index: 999;
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 4px solid #28a745;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="card">
<div class="card-body m-3">
<div class="question">
<h2><u>Pertanyaan:</u></h2>
<h4><b>Apa warna langit pada siang hari?</b></h4>
</div>
<div class="options">
<label class="btn btn-light">
<input type="radio" name="answer" value="A"> A. Merah
</label>
<label class="btn btn-light">
<input type="radio" name="answer" value="B"> B. Hijau
</label>
<label class="btn btn-light">
<input type="radio" name="answer" value="C"> C. Biru
</label>
<label class="btn btn-light">
<input type="radio" name="answer" value="D"> D. Kuning
</label>
<label class="btn btn-light">
<input type="radio" name="answer" value="E"> E. Hitam
</label>
</div>
<button class="btn btn-primary" onclick="checkAnswer()">Periksa Jawaban</button>
<div id="loading-overlay">
<div class="spinner"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="resultModal" tabindex="-1" aria-labelledby="resultModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="resultModalLabel">Hasil</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="resultBody">
<!-- Hasil jawaban akan ditampilkan di sini -->
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
function checkAnswer() {
// Menampilkan overlay loading
document.getElementById('loading-overlay').style.display = 'flex';
setTimeout(function() {
var selectedAnswer = document.querySelector('input[name="answer"]:checked');
if (!selectedAnswer) {
alert("Silakan pilih jawaban terlebih dahulu.");
// Menyembunyikan overlay loading
document.getElementById('loading-overlay').style.display = 'none';
return;
}
var correctAnswer = "C"; // Jawaban yang benar
var resultMessage;
if (selectedAnswer.value === correctAnswer) {
resultMessage = "Jawaban Anda benar!";
} else {
resultMessage = "Jawaban Anda salah. Jawaban yang benar adalah C.";
}
// Menampilkan hasil jawaban dalam modal
document.getElementById('resultBody').innerHTML = resultMessage;
$('#resultModal').modal('show');
// Menyembunyikan overlay loading setelah menampilkan hasil
document.getElementById('loading-overlay').style.display = 'none';
}, 2000); // Menunggu 5 detik sebelum menampilkan hasil
}
</script>
</body>
</html>Copas aja gan sambil di pelajarin, semua berawal dari otodidak kok.
Jangan lupa kasih claps untuk artikel ini, thanks!
