// ------------------- App State ------------------- let currentQuestions = []; // 実際に使用する問題リスト (シャッフル済み) let currentIndex = 0; // 現在の問題番号 (0から) let userScore = 0; // 正解数 let answerLocked = false; // 回答済みで選択不可か let selectedOptionIndex = null; // 現在の問題で選んだ選択肢インデックス let currentQuestionObj = null;
.question-text background: #fef3da; padding: 1.2rem; border-radius: 2rem; font-size: 1.6rem; font-weight: 600; text-align: center; margin-bottom: 2rem; box-shadow: inset 0 1px 4px #ede0c2, 0 4px 8px rgba(0,0,0,0.05); word-break: break-word; color: #2c221b; line-height: 1.4;
// プログレス更新 (問題番号) function updateProgressUI() if (currentQuestions.length) currentQNumberSpan.innerText = currentIndex + 1; totalQNumberSpan.innerText = currentQuestions.length; else currentQNumberSpan.innerText = "0"; totalQNumberSpan.innerText = "0"; nihongo challenge n3
// すべてのオプションボタンを再レンダリング (状態反映) renderQuestionWithFeedback(selectedIdx, correctIdx, explanationText, isCorrect);
<!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 */ // 正解数 let answerLocked = false
// 次の問題へ遷移 function goToNextQuestion() if (!answerLocked) return; // 安全策 currentIndex++; updateProgressUI(); if (currentIndex < currentQuestions.length) renderCurrentQuestion(); else // クイズ完了 showResultScreen();
footer font-size: 0.7rem; text-align: center; padding: 1rem; background: #f9f3e2; color: #8b765a; .question-text background: #fef3da
/* 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;