Nihongo Challenge N3 -

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

// DOM elements const dynamicContainer = document.getElementById('dynamicContent'); const scoreSpan = document.getElementById('scoreValue'); const currentQNumberSpan = document.getElementById('currentQNumber'); const totalQNumberSpan = document.getElementById('totalQNumber');

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" $nextDisabled>次の問題 ➡</button> <button class="restart-btn" id="restartButton">🔄 チャレンジをやり直す</button> </div> `; nihongo challenge n3

.next-btn:disabled background: #bba88a; cursor: not-allowed; transform: none;

footer font-size: 0.7rem; text-align: center; padding: 1rem; background: #f9f3e2; color: #8b765a; .badge background: #ffecb3

// フィードバックメッセージ let feedbackMsg = ""; if (answerLocked) if (isUserCorrect) feedbackMsg = `✅ 正解！ $escapeHtml(explanation)`; else const correctAnswerText = q.options[correctIdx]; feedbackMsg = `❌ 不正解... 正解は「$escapeHtml(correctAnswerText)」です。 $escapeHtml(explanation)`; else feedbackMsg = "🤔 選択肢をクリックして答えましょう！";

const nextDisabled = !answerLocked ? 'disabled' : ''; padding: 0.5rem 1.2rem

.option-btn:hover:not(.disabled-opt) background: #fff3e0; border-color: #c9aa6f; transform: scale(0.99);