const quizData = [
  {
    question: "地球上で最も大きい動物は何ですか？",
    choices: [
      {
        text: "ゾウ",
        explanation:
          "不正解。ゾウは陸上では最大の動物ですが、全体で見ればもっと大きな動物がいます。",
      },
      {
        text: "シロナガスクジラ",
        explanation:
          "正解です！ シロナガスクジラは地球上で最も大きな動物で、全長30メートル以上に達することがあります。",
      },
      {
        text: "サメ",
        explanation:
          "不正解。サメも大きな生物ですが、シロナガスクジラほど大きくはありません。",
      },
      {
        text: "キリン",
        explanation:
          "不正解。キリンは首が長いですが、全体の大きさでは他の動物に劣ります。",
      },
    ],
    correct: 1,
    knowledge:
      "シロナガスクジラは海に生息し、体重が150トンにもなることがあります。",
  },
  {
    question: "人間の体の中で最も長い骨は何ですか？",
    choices: [
      {
        text: "鎖骨",
        explanation: "不正解。鎖骨は首の近くにある短い骨です。",
      },
      {
        text: "大腿骨",
        explanation:
          "正解です！ 大腿骨（太ももの骨）は人間の体の中で最も長い骨です。",
      },
      {
        text: "肋骨",
        explanation:
          "不正解。肋骨は胸郭を形成する骨ですが、大腿骨ほど長くありません。",
      },
      {
        text: "肩甲骨",
        explanation: "不正解。肩甲骨は背中の上部にある平たい骨です。",
      },
    ],
    correct: 1,
    knowledge:
      "大腿骨は体重を支えるために非常に強く、人間の成長とともに最も長くなります。",
  },
  {
    question: "世界で最も高い山はどこですか？",
    choices: [
      {
        text: "キリマンジャロ",
        explanation:
          "不正解。キリマンジャロはアフリカで最も高い山ですが、世界一ではありません。",
      },
      {
        text: "富士山",
        explanation:
          "不正解。富士山は日本で最も高い山ですが、世界一ではありません。",
      },
      {
        text: "エベレスト",
        explanation:
          "正解です！ エベレストは標高8,848メートルで、世界で最も高い山です。",
      },
      {
        text: "マッターホルン",
        explanation:
          "不正解。マッターホルンはヨーロッパの有名な山ですが、エベレストには及びません。",
      },
    ],
    correct: 2,
    knowledge:
      "エベレストはヒマラヤ山脈にあり、標高は8,848メートルで世界一高い山です。",
  },
];
let currentQuiz = quizData; // 全問題をそのまま使用
let currentQuestion = 0;
let score = 0;
const totalQuestions = quizData.length;
document.getElementById("total-questions").textContent = totalQuestions;

// 初期化
function initQuiz() {
  currentQuestion = 0; // 問題番号の初期化
  score = 0; // スコアの初期化
  loadQuestion();
}

// 問題と選択肢を表示
function loadQuestion() {
  document.getElementById("quiz-container").style.display = "block";
  document.getElementById("answer-section").style.display = "none";
  document.getElementById("final-result").style.display = "none";

  // 問題番号を表示
  document.getElementById("question-number").textContent = `第 ${
    currentQuestion + 1
  } 問`;

  const questionData = currentQuiz[currentQuestion];

  document.getElementById("question").textContent = questionData.question;
  const choicesContainer = document.getElementById("choices-container");
  choicesContainer.innerHTML = "";

  // 選択肢に番号を付ける
  questionData.choices.forEach((choice, index) => {
    const choiceDiv = document.createElement("div");
    choiceDiv.classList.add("choice");
    choiceDiv.textContent = `${index + 1}. ${choice.text}`; // 番号付きの選択肢
    choiceDiv.onclick = () => checkAnswer(index, questionData);
    choicesContainer.appendChild(choiceDiv);
  });
}

// 答えを確認
function checkAnswer(selected, questionData) {
  document.getElementById("quiz-container").style.display = "none";
  document.getElementById("answer-section").style.display = "block";

  const resultText = document.getElementById("answer-result");
  const explanationDiv = document.getElementById("explanation");
  explanationDiv.innerHTML = "";
  explanationDiv.style.textAlign = "left"; // 左寄せ

  if (selected === questionData.correct) {
    resultText.innerHTML = "<span class='correct'>正解！</span>";
    score++;
  } else {
    resultText.innerHTML = "<span class='wrong'>不正解です。</span>";
  }

  // 各選択肢の解説を表示（番号付き）
  questionData.choices.forEach((choice, index) => {
    const explanationPara = document.createElement("p");
    if (index === questionData.correct) {
      explanationPara.innerHTML = `<span style="color: red; font-weight: bold;">${
        index + 1
      }. ${choice.text}</span> : ${choice.explanation}`;
    } else if (index === selected) {
      explanationPara.innerHTML = `<span style="color: blue;">${index + 1}. ${
        choice.text
      }</span> : ${choice.explanation}`;
    } else {
      explanationPara.innerHTML = `${index + 1}. ${choice.text} : ${
        choice.explanation
      }`;
    }
    explanationDiv.appendChild(explanationPara);
  });

  // 予備知識を枠で囲む
  const knowledgePara = document.createElement("div");
  knowledgePara.classList.add("knowledge-box");
  knowledgePara.innerHTML =
    "<strong>予備知識:</strong> " + questionData.knowledge;
  explanationDiv.appendChild(knowledgePara);

  // 最終問題かどうかのチェック
  if (currentQuestion === currentQuiz.length - 1) {
    document.getElementById("next-question").textContent = "結果を見る";
  } else {
    document.getElementById("next-question").textContent = "次の問題へ";
  }
}

// 次の問題へ
function nextQuestion() {
  currentQuestion++;
  if (currentQuestion < currentQuiz.length) {
    loadQuestion();
    document.getElementById("container").scrollIntoView({ behavior: "smooth" }); // containerにスクロール
  } else {
    showResult();
  }
}

// 結果を表示
function showResult() {
  document.getElementById("answer-section").style.display = "none";
  document.getElementById("final-result").style.display = "block";

  const percentage = (score / currentQuiz.length) * 100;
  document.getElementById("score").textContent = `正解数: ${score}/${
    currentQuiz.length
  } (${percentage.toFixed(2)}%)`;
}

// もう一度遊ぶ
function restartQuiz() {
  currentQuestion = 0;
  score = 0;
  initQuiz();
}

// クイズ開始
initQuiz();