N3 — Nihongo Challenge

// リスタートボタン (常に有効) const restartBtn = document.getElementById('restartButton'); if (restartBtn) restartBtn.addEventListener('click', () => initGame(); );

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

// 次へボタン const nextBtn = document.getElementById('nextButton'); if (nextBtn) nextBtn.addEventListener('click', () => if (!answerLocked) return; goToNextQuestion(); ); nihongo challenge n3

// UI スコア更新 function updateScoreUI() scoreSpan.innerText = userScore;

const nextDisabled = !answerLocked ? 'disabled' : ''; if (restartBtn) restartBtn.addEventListener('click'

.options-area display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;

return ` <div class="option-btn $additionalClass $answerLocked ? 'disabled-opt' : ''" data-opt-index="$idx"> <div class="option-prefix">$prefixLetter</div> <div>$escapeHtml(opt)</div> </div> `; ).join(''); .restart-btn background: #e6d5b3

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

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