// すべてのオプションボタンを再レンダリング (状態反映) renderQuestionWithFeedback(selectedIdx, correctIdx, explanationText, isCorrect);
// 初期ロード initGame(); </script> </body> </html> nihongo challenge n3
.header h1 font-size: 2rem; letter-spacing: 2px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; // 初期ロード initGame()
.sub font-size: 0.9rem; opacity: 0.9; margin-top: 8px; font-weight: 400; .header h1 font-size: 2rem
const html = ` <div class="quiz-main"> <div class="question-text">$escapeHtml(q.text)</div> <div class="options-area" id="optionsArea"> $optionsHtml </div> <div class="feedback-area" id="feedbackMsg">$feedbackMsg</div> <button class="next-btn" id="nextButton" disabled>次の問題 ➡</button> <button class="restart-btn" id="restartButton">🔄 チャレンジをやり直す</button> </div> `;
dynamicContainer.innerHTML = html;
// 通常レンダリング (初期表示、回答前) function renderCurrentQuestion() if (currentIndex >= currentQuestions.length) // クイズ終了: 結果画面を表示 showResultScreen(); return;