// 結果画面を表示 function showResultScreen() const totalQuestions = currentQuestions.length; const percentage = Math.round((userScore / totalQuestions) * 100); let message = ""; if (percentage >= 80) message = "素晴らしい！ N3レベル高いです！ 🌟"; else if (percentage >= 60) message = "あと少し！ 復習しましょう！ 📖"; else message = "もう一度チャレンジして弱点を克服しよう！ 💪";
/* selected and correct/wrong states */ .option-btn.selected-correct background: #c8e6d9; border-color: #2e7d64; color: #1a4d3e; .option-btn.selected-wrong background: #ffe0db; border-color: #c23b3b; color: #871f1f; .option-btn.correct-highlight background: #c8e6d9; border-color: #2e7d64; .disabled-opt cursor: default; opacity: 0.8; nihongo challenge n3
currentQuestionObj = currentQuestions[currentIndex]; answerLocked = false; selectedOptionIndex = null; const q = currentQuestionObj; let message = ""
.sub font-size: 0.9rem; opacity: 0.9; margin-top: 8px; font-weight: 400; if (percentage >
// フィードバックメッセージ let feedbackMsg = ""; if (answerLocked) if (isUserCorrect) feedbackMsg = `✅ 正解！ $escapeHtml(explanation)`; else const correctAnswerText = q.options[correctIdx]; feedbackMsg = `❌ 不正解... 正解は「$escapeHtml(correctAnswerText)」です。 $escapeHtml(explanation)`; else feedbackMsg = "🤔 選択肢をクリックして答えましょう！";
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>NIHONGO CHALLENGE N3 | 日本語クイズ</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* better mobile tap feel, optional */
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('');