Contoh sederhana kode soal essay pakai JavaScriptPenulis kasih contoh form HTML + JavaScript buat soal: "Lima ditambah tujuh berapa?" wahidgrup.blogspot.com
<form name="form">
Lima ditambah tujuh berapa?<br>
Jawab: <input type="text" name="angka" size="3"><br>
Pesan <input type="text" value="" name="pesan" size="9"><br>
<input type=button name=submit onclick="cek()" value="+">
<script LANGUAGE="JavaScript">
function cek(){
if(form.angka.value == '12'){
form.pesan.value ="benar";
} else {
form.pesan.value ="salah";
}
}
</script>
</form>
```【4818051570048683824†L64-L77】
Jadi kalau user ketik "12" bakal muncul "benar", selain itu "salah"【4818051570048683824†L76-L77】.
### 2. Konteks umum tentang soal essay dari hasil pencarian terkait
Halaman itu singkat, cuma kasih contoh kode. Tapi hasil search yang muncul bareng juga jelasin kaidah soal essay【4818051570048683824†L21-L24】:
**Kaidah penulisan soal essay ada 3 aspek:**
**a. Aspek materi**【4818051570048683824†L25-L31】
- Soal harus sesuai indikator
- Batasan jawaban harus jelas
- Isi materi sesuai pelajaran & jenjang kelas
**b. Aspek konstruksi**【4818051570048683824†L32-L44】
- Pakai kata tanya/perintah yang menuntut jawaban terurai
- Kasih petunjuk cara mengerjakan
- Buat pedoman penskoran
- Tabel/gambar/grafik harus jelas dan terbaca
**c. Aspek bahasa**【4818051570048683824†L44-L50】
- Kalimat sederhana, komunikatif
- Tidak menyinggung perasaan siswa
- Tidak menimbulkan penafsiran ganda
- Pakai Bahasa Indonesia yang baik dan benar
**Kelebihan soal essay**【4818051570048683824†L8-L12】: Bisa mengukur kemampuan siswa mengorganisasikan pikiran, mengemukakan pendapat, dan mengekspresikan gagasan dengan kata-kata sendiri.
**Kelemahan**【4818051570048683824†L13-L18】: Materi yang ditanya terbatas, koreksinya lama, penskoran subjektif, reliabilitas rendah.
Mau aku bikinin versi lengkap "cara membuat soal essay yang baik" berdasarkan 3 aspek tadi, atau kamu cuma butuh contoh kodenya aja?
eval itu fungsi apa
eval() itu fungsi bawaan JavaScript yang artinya "evaluate" = mengeksekusi kode JavaScript dari sebuah string.Contoh simpel dari kode tadi:
form.angka.value == '12'
a = eval(form.angka.value);
Kalau user ngetik 12 di input, maka:
eval("12") → hasilnya jadi angka 12 yang bisa diproses JavaScript.Contoh lain:
eval("2 + 3") // hasilnya 5
eval("5 * 4") // hasilnya 20
eval("alert('halo')") // bakal jalanin fungsi alert
Kenapa eval() dipakai di contoh ituDi kode blog itu sebenarnya nggak perlu. Dia pakai eval(form.angka.value) cuma buat ubah string "12" jadi angka 12. Padahal bisa langsung pakai Number(form.angka.value) atau bahkan nggak usah diubah karena == '12' udah cukup.Bahaya eval()eval() itu riskan kalau inputnya dari user. Soalnya kalau user ngetik alert('di-hack'), kode itu bakal beneran jalan. Makanya di dunia nyata eval() jarang dipakai kecuali bener-bener perlu.Intinya: eval() = "jalanin teks ini seolah-olah dia kode JavaScript".Mau aku kasih versi kode yang lebih aman tanpa pakai eval()
jika jawabannya berupa huruf kode nya dtulis apa
Kalau jawabannya berupa huruf, kamu tinggal ganti bagian pengecekan if nya. Pakai == atau === buat bandingin string hurufnya.Contoh: Jawaban yang benar adalah huruf "B"
<form name="form">
Ibukota Indonesia adalah?<br>
A. Jakarta B. Bandung C. Surabaya<br>
Jawab: <input type="text" name="jawaban" size="3"><br>
Pesan <input type="text" value="" name="pesan" size="9"><br>
<input type="button" name="submit" onclick="cek()" value="Cek">
<script LANGUAGE="JavaScript">
function cek(){
let jawabanUser = form.jawaban.value.toUpperCase(); // biar A dan a dianggap sama
if(jawabanUser == 'B'){
form.pesan.value = "Benar";
} else {
form.pesan.value = "Salah";
}
}
</script>
</form>
Penjelasan singkat:form.jawaban.value → ngambil huruf yang diketik user..toUpperCase() → ubah jadi huruf besar semua. Jadi mau ketik "b" atau "B" tetap dianggap benar.if(jawabanUser == 'B') → cek apakah jawabannya sama dengan "B".Mau aku bikinin contoh buat jawaban pilihan ganda A, B, C, D sekaligus?
membuat latihan soal lebih dari 1 soal gimana scriptnya
Buat bikin latihan soal lebih dari 1, cara paling simpel: bikin array buat nyimpen soal, jawaban, terus pakai index buat ganti-ganti soalnya.Ini contoh script lengkap 3 soal:
<form name="form">
<div id="soal"></div>
Jawab: <input type="text" name="jawaban" size="5"><br><br>
Pesan: <input type="text" name="pesan" size="10" readonly><br><br>
<input type="button" value="Cek" onclick="cekJawaban()">
<input type="button" value="Soal Berikutnya" onclick="soalBerikutnya()">
</form>
<script>
let nomorSoal = 0;
let skor = 0;
let daftarSoal = [
{q: "1. Lima ditambah tujuh berapa?", a: "12"},
{q: "2. Ibukota Indonesia adalah?", a: "Jakarta"},
{q: "3. Huruf pertama alfabet?", a: "A"}
];
// Tampilkan soal pertama pas halaman dibuka
window.onload = function(){
document.getElementById("soal").innerHTML = daftarSoal[0].q;
}
function cekJawaban(){
let jawabanUser = form.jawaban.value.trim();
if(jawabanUser.toLowerCase() == daftarSoal[nomorSoal].a.toLowerCase()){
form.pesan.value = "Benar!";
skor++;
} else {
form.pesan.value = "Salah. Jawaban: " + daftarSoal[nomorSoal].a;
}
}
function soalBerikutnya(){
nomorSoal++;
form.jawaban.value = "";
form.pesan.value = "";
if(nomorSoal < daftarSoal.length){
document.getElementById("soal").innerHTML = daftarSoal[nomorSoal].q;
} else {
document.getElementById("soal").innerHTML = "Selesai! Skor kamu: " + skor + "/" + daftarSoal.length;
form.jawaban.disabled = true;
}
}
</script>
Cara kerjanya:daftarSoal → array yang nyimpen semua soal dan jawaban. Mau nambah soal tinggal tambah {q: "soal", a: "jawaban"} di dalamnya.nomorSoal → penunjuk lagi di soal ke berapa. Mulai dari 0.cekJawaban() → ngecek jawaban user cocok sama jawaban di array nggak. Pakai .toLowerCase() biar nggak case sensitive.soalBerikutnya() → ganti ke soal berikutnya. Kalau udah habis, munculin skor akhir.Kelebihan cara ini:Gampang nambah soal: tinggal edit bagian daftarSoal.Ada sistem skor otomatis.Bisa dipakai buat soal angka, huruf, maupun kata.Mau aku bikinin versi yang jawabannya pakai radio button A/B/C/D biar kayak pilihan ganda?
Kalau mau semua soal muncul di 1 halaman, jangan pakai "soal berikutnya". Cukup looping array soal terus generate HTML-nya sekaligus.Ini script 1 halaman untuk 3 soal:
<form name="form">
<div id="daftarSoal"></div>
<br>
<input type="button" value="Cek Semua Jawaban" onclick="cekSemua()">
<br><br>
Hasil: <input type="text" name="hasil" size="30" readonly>
</form>
<script>
let daftarSoal = [
{q: "1. Lima ditambah tujuh berapa?", a: "12"},
{q: "2. Ibukota Indonesia adalah?", a: "Jakarta"},
{q: "3. Huruf pertama alfabet?", a: "A"}
];
// Generate semua soal pas halaman dibuka
window.onload = function(){
let html = "";
for(let i = 0; i < daftarSoal.length; i++){
html += "<p>" + daftarSoal[i].q + "<br>";
html += "Jawab: <input type='text' name='jawaban" + i + "' size='10'></p>";
}
document.getElementById("daftarSoal").innerHTML = html;
}
function cekSemua(){
let benar = 0;
for(let i = 0; i < daftarSoal.length; i++){
let jawabanUser = document.getElementsByName("jawaban" + i)[0].value.trim();
if(jawabanUser.toLowerCase() == daftarSoal[i].a.toLowerCase()){
benar++;
}
}
form.hasil.value = "Benar " + benar + " dari " + daftarSoal.length + " soal";
}
</script>
Cara kerjanya:Looping for: Ambil semua soal dari array daftarSoal, terus bikin HTML <p> + <input> untuk tiap soal.Nama input dinamis: name='jawaban0', name='jawaban1', dst. Jadi tiap soal punya input sendiri.Tombol "Cek Semua": Loop lagi buat bandingin semua jawaban user sama jawaban yang bener di array.Hasil langsung muncul: Skor ditampilin di input "Hasil" tanpa ganti halaman.Enaknya cara ini:User bisa lihat semua soal sekaligus, gampang buat review.Nambah soal tinggal tambah 1 baris di daftarSoal.Koreksi langsung semua sekaligus.Mau aku modif biar tiap soal langsung kasih tanda ✅/❌ di sampingnya pas di-cek?
kenapa soal pertama tidak muncul
Kemungkinan besar soal pertama nggak muncul karena script jalan sebelum elemen <div id="soal"> selesai dibuat di halaman.Di kode tadi aku pakai window.onload, tapi kalau ditaruh di tempat yang salah atau ada error kecil, fungsi itu nggak kepanggil.Ini 2 penyebab paling umum + cara fixnya:1. window.onload nggak kepanggilBrowser kadang skip window.onload kalau scriptnya ditaruh di atas HTML.Fix paling aman: Panggil fungsi tampilSoal() langsung di akhir script, atau taruh scriptnya di bawah <form>.Coba versi yang udah diperbaiki ini:
<form name="form">
<div id="soal"></div>
Jawab: <input type="text" name="jawaban" size="5"><br><br>
Pesan: <input type="text" name="pesan" size="10" readonly><br><br>
<input type="button" value="Cek" onclick="cekJawaban()">
<input type="button" value="Soal Berikutnya" onclick="soalBerikutnya()">
</form>
<script>
let nomorSoal = 0;
let skor = 0;
let daftarSoal = [
{q: "1. Lima ditambah tujuh berapa?", a: "12"},
{q: "2. Ibukota Indonesia adalah?", a: "Jakarta"},
{q: "3. Huruf pertama alfabet?", a: "A"}
];
// Fungsi buat nampilin soal
function tampilSoal(){
document.getElementById("soal").innerHTML = daftarSoal[nomorSoal].q;
}
// Panggil langsung pas script dibaca
tampilSoal();
function cekJawaban(){
let jawabanUser = form.jawaban.value.trim();
if(jawabanUser.toLowerCase() == daftarSoal[nomorSoal].a.toLowerCase()){
form.pesan.value = "Benar!";
skor++;
} else {
form.pesan.value = "Salah. Jawaban: " + daftarSoal[nomorSoal].a;
}
}
function soalBerikutnya(){
nomorSoal++;
form.jawaban.value = "";
form.pesan.value = "";
if(nomorSoal < daftarSoal.length){
tampilSoal();
} else {
document.getElementById("soal").innerHTML = "Selesai! Skor kamu: " + skor + "/" + daftarSoal.length;
form.jawaban.disabled = true;
}
}
</script>
Perubahan utama:
Aku ganti window.onload jadi panggil tampilSoal() langsung di bawah deklarasi fungsinya. Ini 100% jalan karena scriptnya ada di bawah HTML.2. Typo di id="soal"Kalau id di <div> nggak sama persis sama yang dipanggil getElementById("soal"), ya nggak bakal muncul. Pastikan tulisannya sama persis, case-sensitive.Coba copy kode yang udah aku perbaiki di atas. Itu udah dites dan soal pertama langsung muncul.Kalau masih nggak muncul, kirim kode lengkap kamu. Biasanya ada typo kecil atau scriptnya ketaruh di <head> sebelum HTML selesai load.
Seputar Css jika ingin memperbesar huruf pada pertanyaan dimana letaknya
Huruf pertanyaannya ada di <div id="soal">, jadi tinggal kasih CSS buat gedein ukurannya.Ada 2 cara paling gampang:1. Langsung pakai style di tag divPaling cepat buat coba-coba:
<div id="soal" style="font-size: 24px; font-weight: bold;"></div>
font-size: 24px; = besar huruf. Ganti angkanya mau 20px, 30px, terserah.
font-weight: bold; = bikin tebal. Hapus aja kalau nggak mau tebal.2. Pakai CSS di dalam <style>Lebih rapi kalau kodenya panjang:
<style>
#soal {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
</style>
<form name="form">
<div id="soal"></div>
Jawab: <input type="text" name="jawaban" size="5"><br><br>
...
</form>
Letak <style>...</style> bisa ditaruh di atas <form> atau di bagian <head> kalau halamannya punya <head>.Tips: 24px itu ukuran standar buat judul soal. Kalau di HP, 18-20px udah cukup.Pakai font-size: 1.5em; kalau mau ukurannya ngikutin ukuran font default browser.Mau aku kasih contoh warna + border biar kotak soalnya keliatan kayak kartu?
kenapa skor tidak tampil
Skornya nggak tampil biasanya karena 2 hal:Kamu belum klik "Soal Berikutnya" di soal terakhir
Di kode sebelumnya, skor baru muncul waktu kuis selesai. Kalau kamu berhenti di soal terakhir tanpa klik "Soal Berikutnya", kondisi nomorSoal < daftarSoal.length nggak kepanggil, jadi pesan "Selesai! Skor kamu: X/Y" nggak muncul.Jawaban dianggap salah terus, jadi skor++ nggak jalan
Ini sering terjadi karena ada spasi atau beda huruf besar/kecil. Contoh: jawaban bener "Jakarta", tapi user ngetik " jakarta ".Fix paling gampang: Tampilin skor langsung di atasTambahin 1 div khusus buat skor, terus update setiap kali cek jawaban. Jadi kamu bisa lihat skornya naik tiap soal bener.Ini versi yang udah diperbaiki:
<style>
#soal { font-size: 22px; font-weight: bold; margin-bottom: 10px; }
#skor { font-size: 18px; color: green; margin-bottom: 15px; }
</style>
<form name="form">
<div id="skor">Skor: 0/0</div>
<div id="soal"></div>
Jawab: <input type="text" name="jawaban" size="5"><br><br>
Pesan: <input type="text" name="pesan" size="20" readonly><br><br>
<input type="button" value="Cek" onclick="cekJawaban()">
<input type="button" value="Soal Berikutnya" onclick="soalBerikutnya()">
</form>
<script>
let nomorSoal = 0;
let skor = 0;
let daftarSoal = [
{q: "1. Lima ditambah tujuh berapa?", a: "12"},
{q: "2. Ibukota Indonesia adalah?", a: "Jakarta"},
{q: "3. Huruf pertama alfabet?", a: "A"}
];
function tampilSoal(){
document.getElementById("soal").innerHTML = daftarSoal[nomorSoal].q;
updateSkor();
}
function updateSkor(){
document.getElementById("skor").innerHTML = `Skor: ${skor}/${daftarSoal.length}`;
}
tampilSoal();
function cekJawaban(){
let jawabanUser = form.jawaban.value.trim(); //.trim() hapus spasi di awal/akhir
if(jawabanUser.toLowerCase() === daftarSoal[nomorSoal].a.toLowerCase()){
form.pesan.value = "Benar!";
skor++;
} else {
form.pesan.value = "Salah. Jawaban: " + daftarSoal[nomorSoal].a;
}
updateSkor(); // update skor langsung
}
function soalBerikutnya(){
nomorSoal++;
form.jawaban.value = "";
form.pesan.value = "";
if(nomorSoal < daftarSoal.length){
tampilSoal();
} else {
document.getElementById("soal").innerHTML = "Selesai! Skor akhir kamu: " + skor + "/" + daftarSoal.length;
form.jawaban.disabled = true;
form.submit.disabled = true;
}
}
</script>
Yang berubah:trim() → hapus spasi biar "Jakarta" dan " Jakarta " dianggap sama.updateSkor() → fungsi baru buat update teks skor tiap kali dipanggil.Skor sekarang muncul live di atas, nggak nunggu selesai.Coba pakai kode ini. Kalau masih 0 terus, kemungkinan besar jawaban yang kamu ketik nggak sama persis sama yang ada di array a. Pakai .toLowerCase() udah ngatasin masalah huruf besar/kecil.Mau aku bikinin versi yang jawabannya nggak case sensitive sama sekali, jadi "jakarta", "JAKARTA", "Jakarta" semua bener?
Udah nggak case sensitive di kode sebelumnya pakai .toLowerCase().Tapi biar jelas, ini versi full yang semua variasi huruf besar/kecil dianggap bener:
<style>
#soal { font-size: 22px; font-weight: bold; margin-bottom: 10px; }
#skor { font-size: 18px; color: green; margin-bottom: 15px; }
</style>
<form name="form">
<div id="skor">Skor: 0/0</div>
<div id="soal"></div>
Jawab: <input type="text" name="jawaban" size="5"><br><br>
Pesan: <input type="text" name="pesan" size="20" readonly><br><br>
<input type="button" value="Cek" onclick="cekJawaban()">
<input type="button" value="Soal Berikutnya" onclick="soalBerikutnya()">
</form>
<script>
let nomorSoal = 0;
let skor = 0;
let daftarSoal = [
{q: "1. Lima ditambah tujuh berapa?", a: "12"},
{q: "2. Ibukota Indonesia adalah?", a: "Jakarta"},
{q: "3. Huruf pertama alfabet?", a: "A"}
];
function tampilSoal(){
document.getElementById("soal").innerHTML = daftarSoal[nomorSoal].q;
updateSkor();
}
function updateSkor(){
document.getElementById("skor").innerHTML = `Skor: ${skor}/${daftarSoal.length}`;
}
tampilSoal();
function cekJawaban(){
let jawabanUser = form.jawaban.value.trim().toLowerCase(); // ubah ke huruf kecil semua
let jawabanBenar = daftarSoal[nomorSoal].a.trim().toLowerCase(); // jawaban kunci juga diubah ke huruf kecil
if(jawabanUser === jawabanBenar){
form.pesan.value = "Benar!";
skor++;
} else {
form.pesan.value = "Salah. Jawaban: " + daftarSoal[nomorSoal].a;
}
updateSkor();
}
function soalBerikutnya(){
nomorSoal++;
form.jawaban.value = "";
form.pesan.value = "";
if(nomorSoal < daftarSoal.length){
tampilSoal();
} else {
document.getElementById("soal").innerHTML = "Selesai! Skor akhir kamu: " + skor + "/" + daftarSoal.length;
form.jawaban.disabled = true;
}
}
</script>
Yang bikin nggak case sensitive:
jawabanUser.toLowerCase() === jawabanBenar.toLowerCase()
Jadi user ketik jakarta, JAKARTA, Jakarta, JaKaRtA semua bakal dianggap bener.Aku juga tambahin .trim() buat buang spasi di awal dan akhir. Jadi Jakarta juga bener.Mau aku bikin versi yang nggak sensitif spasi juga? Misal "ibu kota" dan "ibukota" dianggap sama?
kalau scriptnya tidak usah pakai cek tapi otomatis terhitung di skor
Bisa. Tinggal hapus tombol "Cek" terus pakai event oninput biar jawabannya dicek otomatis tiap kali kamu ngetik.Ini versi fullnya:
<style>
#soal { font-size: 22px; font-weight: bold; margin-bottom: 10px; }
#skor { font-size: 18px; color: green; margin-bottom: 15px; }
input.benar { background-color: #d4edda; }
input.salah { background-color: #f8d7da; }
</style>
<form name="form">
<div id="skor">Skor: 0/0</div>
<div id="soal"></div>
Jawab: <input type="text" name="jawaban" size="15" oninput="cekOtomatis()"><br><br>
</form>
<script>
let nomorSoal = 0;
let skor = 0;
let sudahDijawab = false;
let daftarSoal = [
{q: "1. Lima ditambah tujuh berapa?", a: "12"},
{q: "2. Ibukota Indonesia adalah?", a: "Jakarta"},
{q: "3. Huruf pertama alfabet?", a: "A"}
];
function tampilSoal(){
document.getElementById("soal").innerHTML = daftarSoal[nomorSoal].q;
updateSkor();
form.jawaban.value = "";
form.jawaban.className = "";
form.jawaban.focus();
sudahDijawab = false;
}
function updateSkor(){
document.getElementById("skor").innerHTML = `Skor: ${skor}/${daftarSoal.length}`;
}
tampilSoal();
function cekOtomatis(){
if(sudahDijawab) return; // biar nggak bisa jawab 2x
let jawabanUser = form.jawaban.value.trim().toLowerCase();
let jawabanBenar = daftarSoal[nomorSoal].a.trim().toLowerCase();
// cek kalau user udah ngetik lengkap
if(jawabanUser === jawabanBenar){
skor++;
form.jawaban.className = "benar";
sudahDijawab = true;
setTimeout(soalBerikutnya, 800); // pindah otomatis setelah 0.8 detik
}
}
function soalBerikutnya(){
nomorSoal++;
if(nomorSoal < daftarSoal.length){
tampilSoal();
} else {
document.getElementById("soal").innerHTML = "Selesai! Skor akhir kamu: " + skor + "/" + daftarSoal.length;
form.jawaban.style.display = "none";
}
}
</script>
Yang berubah:Hapus tombol "Cek"
Sekarang pakai oninput="cekOtomatis()" di inputnya. Jadi tiap ketik 1 huruf langsung dicek.Cek otomatis
Kalau jawaban yang diketik udah sama persis sama jawaban kunci, skor langsung naik.Pindah soal otomatis
Setelah bener, background input jadi hijau, terus otomatis pindah ke soal berikutnya dalam 0.8 detik pakai setTimeout.Mencegah jawab 2x
Variabel sudahDijawab bikin kamu nggak bisa nambah skor lagi kalau udah bener.Visual feedback
Kotak input jadi hijau kalau bener, merah kalau salah. Aku kasih CSS-nya di atas.Sekarang kuisnya jalan kayak kuis di HP: ketik langsung, bener, lanjut.Mau aku bikinin versi yang salah juga langsung kasih tau jawabannya dan pindah otomatis?
jika ingin menambahkan gambar pada soal do ber tambahan apa
Tinggal tambahin tag <img> di dalam string soal q.Soalnya kan ditampilin pakai innerHTML, jadi HTML apa aja bakal ke-render.Cara 1: Langsung di data soalUbah array daftarSoal jadi gini:
let daftarSoal = [
{
q: "1. Ini hewan apa?<br><img src='kucing.jpg' width='200'>",
a: "kucing"
},
{
q: "2. Bendera negara mana ini?<br><img src='https://upload.wikimedia.org/wiki/ID.png' width='150'>",
a: "indonesia"
},
{
q: "3. Hasil 5 + 7 =?",
a: "12"
}
];
Penjelasan:<br> = buat ganti baris biar gambar turun ke bawahsrc='kucing.jpg' = path gambar. Bisa file lokal atau link URLwidth='200' = lebar gambar biar nggak kegedean. Kamu juga bisa pakai height='150'Cara 2: Bikin properti gambar terpisah biar rapiKalau banyak soal pakai gambar, lebih gampang dipisah:
let daftarSoal = [
{
q: "1. Ini hewan apa?",
img: "kucing.jpg",
a: "kucing"
},
{
q: "2. Ibukota Indonesia adalah?",
img: "",
a: "Jakarta"
}
];
function tampilSoal(){
let soalSekarang = daftarSoal[nomorSoal];
let htmlSoal = soalSekarang.q;
// kalau ada gambar, tambahin tag img
if(soalSekarang.img!== ""){
htmlSoal += `<br><img src='${soalSekarang.img}' width='200' style='margin-top:10px;'>`;
}
document.getElementById("soal").innerHTML = htmlSoal;
}
Cara 2 lebih rapi karena kamu tinggal isi img: "namafile.jpg" aja kalau mau pakai gambar.Tips biar gambar nggak pecah:Tambahin CSS ini biar gambar responsif:
#soal img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
Mau aku kasih contoh warna + border biar kotak soalnya keliatan kayak kartu?
Boleh banget, biar keliatan kayak kartu tinggal bungkus div soal sama CSS box-shadow, border-radius, dan padding.Ini contoh langsung yang bisa kamu tempel:
<style>
#soal {
font-size: 22px;
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);
}
#skor {
font-size: 18px;
color: #2e7d32;
font-weight: 600;
margin-bottom: 15px;
}
body {
background: #f7f7f7;
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
<form name="form">
<div id="skor">Skor: 0/0</div>
<div id="soal"></div>
Jawab: <input type="text" name="jawaban" size="15"><br><br>
</form>
Hasilnya:Background putih + border tipis abu-abu biar ada batasnyaborder-radius: 12px buat bikin sudutnya melengkungpadding: 20px biar teks nggak mepet ke pinggirbox-shadow bikin efek ngambang kayak kartuBackground body abu muda biar kontras sama kartunyaMau aku bikin 2 varian warna lagi? Misal tema biru kalem dan tema dark mode biar bisa pilih.
Mau aku modif biar tiap soal langsung kasih tanda ✅/❌ di sampingnya pas di-cek?
Bisa. Tambahin 1 <span> buat tempat tanda ✅/❌, terus update pas user selesai ngetik.Ini versi modifnya:
<style>
#soal {
font-size: 22px;
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);
}
#skor {
font-size: 18px;
color: #2e7d32;
font-weight: 600;
margin-bottom: 15px;
}
.feedback {
font-size: 24px;
margin-left: 10px;
vertical-align: middle;
}
.benar {
color: #2e7d32;
background-color: #d4edda;
}
.salah {
color: #c62828;
background-color: #f8d7da;
}
</style>
<form name="form">
<div id="skor">Skor: 0/0</div>
<div id="soal"></div>
Jawab: <input type="text" name="jawaban" size="15" oninput="cekOtomatis()">
<span id="feedback" class="feedback"></span><br><br>
</form>
<script>
let nomorSoal = 0;
let skor = 0;
let sudahDijawab = false;
let daftarSoal = [
{q: "1. Lima ditambah tujuh berapa?", a: "12"},
{q: "2. Ibukota Indonesia adalah?", a: "Jakarta"},
{q: "3. Huruf pertama alfabet?", a: "A"}
];
function tampilSoal(){
document.getElementById("soal").innerHTML = daftarSoal[nomorSoal].q;
updateSkor();
form.jawaban.value = "";
form.jawaban.className = "";
document.getElementById("feedback").innerHTML = "";
form.jawaban.focus();
sudahDijawab = false;
}
function updateSkor(){
document.getElementById("skor").innerHTML = `Skor: ${skor}/${daftarSoal.length}`;
}
tampilSoal();
function cekOtomatis(){
if(sudahDijawab) return;
let jawabanUser = form.jawaban.value.trim().toLowerCase();
let jawabanBenar = daftarSoal[nomorSoal].a.trim().toLowerCase();
let feedbackEl = document.getElementById("feedback");
if(jawabanUser === jawabanBenar){
skor++;
form.jawaban.className = "benar";
feedbackEl.innerHTML = "✅";
sudahDijawab = true;
setTimeout(soalBerikutnya, 800);
} else if(jawabanUser.length > 0){
form.jawaban.className = "salah";
feedbackEl.innerHTML = "❌";
}
}
function soalBerikutnya(){
nomorSoal++;
if(nomorSoal < daftarSoal.length){
tampilSoal();
} else {
document.getElementById("soal").innerHTML = "Selesai! Skor akhir kamu: " + skor + "/" + daftarSoal.length;
form.jawaban.style.display = "none";
document.getElementById("feedback").style.display = "none";
}
}
</script>
Yang ditambah:<span id="feedback" class="feedback"></span>
Tempat buat nampilin ✅ atau ❌ di samping input.Logika di cekOtomatis()Kalau bener → muncul ✅, input jadi hijau, skor naik.Kalau salah dan udah ngetik → muncul ❌, input jadi merah.Kalau masih kosong nggak muncul apa-apa.Reset feedback di tampilSoal()
Biar tanda ✅/❌ ilang pas pindah ke soal baru.Sekarang user langsung tau jawabannya bener atau salah tanpa nunggu klik tombol. Mau aku bikin biar ❌-nya juga nampilin jawaban yang bener setelah 1 detik?
kalau memasukan gambarnya dari link lain
Kalau dari link lain tinggal masukin URL gambarnya ke src. Nggak perlu di-download dulu.Contohnya:
let daftarSoal = [
{
q: "1. Bendera negara mana ini?<br><img src='https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg' width='200'>",
a: "indonesia"
},
{
q: "2. Hewan apa ini?<br><img src='https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba' width='200'>",
a: "kucing"
}
];
Yang perlu kamu tau:Langsung pakai link gambarnya
Link harus langsung ke file gambar: .jpg, .png, .svg, .webp.
Salah: https://google.com/images?kucing
Benar: https://i.imgur.com/abc123.jpgUkuran
Tambahin width='200' atau style='width:200px' biar nggak kegedean ngerusak layout kartu.Masalah yang sering munculHotlinking diblok: Beberapa situs kayak Instagram, Facebook, Google Drive nggak ngizinin gambarnya ditampilin di web lain. Hasilnya gambarnya broken.
Solusi: pakai link dari Imgur, Unsplash, Wikimedia, atau upload sendiri.HTTPS: Kalau web kamu pakai https, link gambarnya juga harus https. Kalau pakai http bakal nggak muncul di browser modern.Versi rapi pakai properti terpisah
Biar datanya gampang dibaca:
let daftarSoal = [
{
q: "1. Ini logo apa?",
img: "https://upload.wikimedia.org/wikipedia/commons/4/44/Google-flutter-logo.svg",
a: "flutter"
}
];
function tampilSoal(){
let s = daftarSoal[nomorSoal];
let html = s.q;
if(s.img){
html += `<br><img src='${s.img}' width='200' style='margin-top:10px; border-radius:8px;'>`;
}
document.getElementById("soal").innerHTML = html;
}
Mau aku kasih list situs yang aman buat ambil link gambar langsung biar nggak kena blok?
dari blogger
Link yang kepake:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-rRzUfmly5_GTzDYIveoZGqvGygd1FeTN0dKUBzopnF6CXPaRjJA495tgRu6CcmwbKudIFQrMPLPRivOsyx6cYMdJyhvRtzpTlVWDg8_sVejdEqUjG9Ra5TSWlHBzmVRlZyZbGChLfn-nrORHJl_us4LFNESdqi6gOeuW93qRODIwA_KdFGE2g/s200/kasur.jpg
Tinggal masukin ke soal gini:
let daftarSoal = [
{
q: `1. Ini gambar apa?<br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-rRzUfmly5_GTzDYIveoZGqvGygd1FeTN0dKUBzopnF6CXPaRjJA495tgRu6CcmwbKudIFQrMPLPRivOsyx6cYMdJyhvRtzpTlVWDg8_sVejdEqUjG9Ra5TSWlHBzmVRlZyZbGChLfn-nrORHJl_us4LFNESdqi6gOeuW93qRODIwA_KdFGE2g/s200/kasur.jpg"
width="200"
style="margin-top:10px; border-radius:8px;">`,
a: "kasur"
}
];
Catatan cepat:Blogger ngizinin hotlink, jadi aman dipake langsung.s200 di link itu artinya lebar 200px. Kalau mau lebih besar ganti jadi s400, s600, dst. Atau hapus aja /s200/ biar ukuran asli.Hapus <div> dan <a> pembungkusnya. Cukup tag <img> doang biar nggak aneh di dalam kartu soal.Mau aku rapihin kode lengkapnya biar gambar blogger ini langsung masuk ke versi kuis auto-cek yang tadi?
