N3: Nihongo Challenge

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); ); );

/* header with japanese vibe */ .header background: #b13e3e; background: linear-gradient(135deg, #c23b3b, #9e2a2a); padding: 1.5rem 2rem; color: white; text-align: center; nihongo challenge n3

// メイン: 問題をレンダリング＋フィードバック表示 (回答後も再利用) function renderQuestionWithFeedback(selectedIdx, correctIdx, explanation, isUserCorrect) const q = currentQuestionObj; if (!q) return;

.badge background: #ffecb3; display: inline-block; padding: 0.5rem 1.2rem; border-radius: 80px; font-size: 0.9rem; dynamicContainer

// 次の問題へ遷移 function goToNextQuestion() if (!answerLocked) return; // 安全策 currentIndex++; updateProgressUI(); if (currentIndex < currentQuestions.length) renderCurrentQuestion(); else // クイズ完了 showResultScreen();

const nextDisabled = !answerLocked ? 'disabled' : ''; dynamicContainer.innerHTML = html

.next-btn background: #b13e3e; color: white; border: none; width: 100%; padding: 1rem; font-size: 1.2rem; font-weight: bold; border-radius: 60px; cursor: pointer; transition: all 0.2s; font-family: inherit; letter-spacing: 1px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);