<!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 */
// メイン: 問題をレンダリング＋フィードバック表示 (回答後も再利用) function renderQuestionWithFeedback(selectedIdx, correctIdx, explanation, isUserCorrect) const q = currentQuestionObj; if (!q) return; nihongo challenge n3
// DOM elements const dynamicContainer = document.getElementById('dynamicContent'); const scoreSpan = document.getElementById('scoreValue'); const currentQNumberSpan = document.getElementById('currentQNumber'); const totalQNumberSpan = document.getElementById('totalQNumber'); meta name="viewport" content="width=device-width
.next-btn:disabled background: #bba88a; cursor: not-allowed; transform: none; NIHONGO CHALLENGE N3 | 日本語クイズ<
currentQuestionObj = currentQuestions[currentIndex]; answerLocked = false; selectedOptionIndex = null; const q = currentQuestionObj;
.next-btn background: #b13e3e; color: white; border: none; width: 100%; padding: 1rem; font-size: 1.2rem; font-weight: bold; border-radius: 60px; cursor: pointer; transition: all 0.2s; font-family: inherit; letter-spacing: 1px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
if (answerLocked) if (isCorrectOption) additionalClass = "correct-highlight"; if (isSelectedWrongOption) additionalClass = "selected-wrong"; if (isSelectedCorrect) additionalClass = "selected-correct";