Halaman ini sekarang dirancang seperti kartu interaktif:
setiap kartu memunculkan satu kanji, lalu kamu pilih satu jawaban dari empat pilihan. Setelah pilih, kartu bakal kasih tahu apakah kamu bener atau perlu coba lagi.
Kalau mau, catat jawaban versi kamu di notes, lalu cocokkan dengan kunci di bawah. Mau menantang diri sendiri lagi? Tambah satu kanji, bikin empat opsi, lalu pakai pola yang sama.
<style>
.quiz-card{border:1px solid #ccc;border-radius:12px;padding:16px;margin:18px 0;background:#fdfdfd;box-shadow:0 8px 16px rgba(0,0,0,.05);}
.quiz-card h2{margin:0 0 8px;font-size:1.2rem;color:#111;}
.quiz-card .kanji{font-size:3rem;line-height:1;margin:0 0 8px;}
.quiz-card .options button{margin:4px 4px 0 0;padding:10px 14px;border-radius:8px;border:1px solid #bbb;background:#fff;font-size:1rem;cursor:pointer;}
.quiz-card .options button.selected{border-color:#0a7eff;background:#0d6efc;color:#fff;}
.quiz-card .options button.correct{border-color:#0f8a3b;background:#21a428;color:#fff;}
.quiz-card .options button.wrong{border-color:#b32b0d;background:#e03b20;color:#fff;}
.quiz-card .feedback{margin-top:10px;font-weight:600;min-height:1.2em;}
</style>
<div class="quiz-card" data-answer="b">
<h2>Quiz 1 • 夢 (mimpi)</h2>
<div class="kanji">夢</div>
<p>Pilih arti yang paling pas untuk kanji ini.</p>
<div class="options">
<button data-value="a">a) kenyataan sehari-hari</button>
<button data-value="b">b) mimpi atau cita-cita</button>
<button data-value="c">c) kebiasaan buruk</button>
<button data-value="d">d) cerita lama</button>
</div>
<div class="feedback" aria-live="polite"></div>
</div>
<div class="quiz-card" data-answer="c">
<h2>Quiz 2 • 早 (cepat/awal)</h2>
<div class="kanji">早</div>
<p>Pilih arti yang paling mendekati kanji ini.</p>
<div class="options">
<button data-value="a">a) lambat</button>
<button data-value="b">b) sore hari</button>
<button data-value="c">c) cepat atau awal</button>
<button data-value="d">d) panjang</button>
</div>
<div class="feedback" aria-live="polite"></div>
</div>
<div class="quiz-card" data-answer="c">
<h2>Quiz 3 • 雨 (hujan)</h2>
<div class="kanji">雨</div>
<p>Pilih arti yang paling cocok untuk kanji ini.</p>
<div class="options">
<button data-value="a">a) matahari terbit</button>
<button data-value="b">b) angin</button>
<button data-value="c">c) hujan</button>
<button data-value="d">d) kabut pagi</button>
</div>
<div class="feedback" aria-live="polite"></div>
</div>
Kunci jawaban
- Quiz 1: b
- Quiz 2: c
- Quiz 3: c
<script>
(function(){
const cards = document.querySelectorAll('.quiz-card');
cards.forEach(card => {
const answer = card.dataset.answer;
const feedback = card.querySelector('.feedback');
const buttons = card.querySelectorAll('.options button');
buttons.forEach(btn => {
btn.addEventListener('click', () => {
buttons.forEach(b => b.classList.remove('selected','correct','wrong'));
btn.classList.add('selected');
if (btn.dataset.value === answer) {
btn.classList.add('correct');
feedback.textContent = 'jawabanmu tepat. lanjut!';
} else {
btn.classList.add('wrong');
feedback.textContent = 'belum pas. coba lagi atau baca ulang arti dasarnya.';
}
});
});
});
})();
</script>