Ini script lengkap kuis essay auto-cek + gambar + tampilan kartu. Tinggal copy-tempel ke HTML.script lengkap
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kuis Essay</title>
<style>
body {
background: #f7f7f7;
font-family: Arial, sans-serif;
padding: 20px;
margin: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
}
#skor {
font-size: 18px;
color: #2e7d32;
font-weight: 600;
margin-bottom: 15px;
}
#soal {
font-size: 20px;
font-weight: bold;
color: #333;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#soal img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-top: 12px;
display: block;
}
.input-area {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 12px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 8px;
outline: none;
transition: 0.2s;
}
input[type="text"]:focus {
border-color: #4caf50;
}
.feedback {
font-size: 28px;
min-width: 30px;
text-align: center;
}
.benar {
background-color: #d4edda!important;
border-color: #28a745!important;
}
.salah {
background-color: #f8d7da!important;
border-color: #dc3545!important;
}
#hasil-akhir {
text-align: center;
font-size: 22px;
font-weight: bold;
color: #333;
background: #fff;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
</style>
</head>
<body>
<div class="container">
<div id="skor">Skor: 0/0</div>
<div id="soal"></div>
<div class="input-area">
<input type="text" id="jawaban" placeholder="Ketik jawaban di sini..." oninput="cekOtomatis()">
<span id="feedback" class="feedback"></span>
</div>
</div>
<script>
let nomorSoal = 0;
let skor = 0;
let sudahDijawab = false;
// Tambah soal di sini.
// Untuk gambar, pakai tag <img> langsung atau isi properti img
let daftarSoal = [
{
q: "1. Sebutkan nama benda pada gambar di bawah ini",
img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-rRzUfmly5_GTzDYIveoZGqvGygd1FeTN0dKUBzopnF6CXPaRjJA495tgRu6CcmwbKudIFQrMPLPRivOsyx6cYMdJyhvRtzpTlVWDg8_sVejdEqUjG9Ra5TSWlHBzmVRlZyZbGChLfn-nrORHJl_us4LFNESdqi6gOeuW93qRODIwA_KdFGE2g/s200/kasur.jpg",
a: "kasur"
},
{
q: "2. Ibukota Indonesia adalah?",
a: "Jakarta"
},
{
q: "3. Hasil dari 5 + 7 adalah?",
a: "12"
},
{
q: "4. Hewan apa ini?<br><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/200px-Cat03.jpg'>",
a: "kucing"
}
];
function tampilSoal(){
let s = daftarSoal[nomorSoal];
let htmlSoal = s.q;
// Kalau ada gambar, tambahkan otomatis
if(s.img){
htmlSoal += `<img src='${s.img}' alt='gambar soal'>`;
}
document.getElementById("soal").innerHTML = htmlSoal;
updateSkor();
document.getElementById("jawaban").value = "";
document.getElementById("jawaban").className = "";
document.getElementById("feedback").innerHTML = "";
document.getElementById("jawaban").focus();
sudahDijawab = false;
}
function updateSkor(){
document.getElementById("skor").innerHTML = `Skor: ${skor}/${daftarSoal.length}`;
}
tampilSoal();
function cekOtomatis(){
if(sudahDijawab) return;
let jawabanUser = document.getElementById("jawaban").value.trim().toLowerCase();
let jawabanBenar = daftarSoal[nomorSoal].a.trim().toLowerCase();
let inputEl = document.getElementById("jawaban");
let feedbackEl = document.getElementById("feedback");
if(jawabanUser === jawabanBenar){
skor++;
inputEl.className = "benar";
feedbackEl.innerHTML = "✅";
sudahDijawab = true;
setTimeout(soalBerikutnya, 900);
} else if(jawabanUser.length > 0){
inputEl.className = "salah";
feedbackEl.innerHTML = "❌";
} else {
inputEl.className = "";
feedbackEl.innerHTML = "";
}
}
function soalBerikutnya(){
nomorSoal++;
if(nomorSoal < daftarSoal.length){
tampilSoal();
} else {
document.querySelector(".container").innerHTML = `
<div id="hasil-akhir">
Selesai! 🎉<br><br>
Skor akhir kamu: ${skor}/${daftarSoal.length}
</div>
`;
}
}
</script>
</body>
</html>
Jawaban fleksibel: Script ini nggak case sensitive. "Jakarta" sama "jakarta" dianggap sama.Fitur yang udah jalan:Tampilan kartu dengan shadow dan border radiusGambar auto-resize biar nggak kepotongAuto-cek jawaban pas ngetikMuncul ✅/❌ langsung di samping inputWarna hijau/merah buat feedback visualPindah soal otomatis 0.9 detik setelah benerResponsive buat HPMau aku bikinin versi yang ngizinin jawaban hampir mirip pakai includes() biar nggak terlalu kaku?
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments