Nihongo Challenge N3 Apr 2026

body background: linear-gradient(145deg, #fef7e0 0%, #f8e9c0 100%); font-family: 'Segoe UI', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Roboto, system-ui, sans-serif; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 1.5rem;

.header h1 span:first-child background: #ffd966; padding: 0.2rem 0.8rem; border-radius: 60px; font-size: 1.3rem; color: #9e2a2a;

if (answerLocked) if (isCorrectOption) additionalClass = "correct-highlight"; if (isSelectedWrongOption) additionalClass = "selected-wrong"; if (isSelectedCorrect) additionalClass = "selected-correct";

/* feedback & next button */ .feedback-area text-align: center; margin-top: 0.5rem; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 500; min-height: 70px; nihongo challenge n3

/* main card container */ .challenge-container max-width: 750px; width: 100%; background: #fffef7; border-radius: 3rem; box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.05); overflow: hidden; transition: all 0.2s ease;

// 初期ロード initGame(); </script> </body> </html>

// DOM elements const dynamicContainer = document.getElementById('dynamicContent'); const scoreSpan = document.getElementById('scoreValue'); const currentQNumberSpan = document.getElementById('currentQNumber'); const totalQNumberSpan = document.getElementById('totalQNumber'); body background: linear-gradient(145deg

.next-btn:active transform: scale(0.97);

dynamicContainer.innerHTML = html;

.restart-btn background: #e6d5b3; color: #5e3a22; border: none; margin-top: 1rem; padding: 0.7rem; border-radius: 40px; font-weight: 600; width: 100%; cursor: pointer; font-family: inherit; transition: 0.1s; font-family: 'Segoe UI'

dynamicContainer.innerHTML = html;

// オプションクリックリスナー const optionDivs = document.querySelectorAll('.option-btn'); optionDivs.forEach(btn => btn.addEventListener('click', (e) => if (answerLocked) return; const idxAttr = btn.getAttribute('data-opt-index'); if (idxAttr !== null) const idxNum = parseInt(idxAttr, 10); if (!isNaN(idxNum)) evaluateAndLock(idxNum, q.correct, q.explanation); ); );