const quizData = [
  {
    question: "ドラえもんの体の色は何色ですか？",
    choices: [{ text: "青" }, { text: "赤" }, { text: "緑" }, { text: "黄色" }],
    correct: 0,
    hint: "彼の体は海のような色です。",
  },
  {
    question: "ドラえもんの好きな食べ物は何ですか？",
    choices: [
      { text: "ピザ" },
      { text: "どら焼き" },
      { text: "カレー" },
      { text: "ケーキ" },
    ],
    correct: 1,
    hint: "名前に似た食べ物です。",
  },
  {
    question: "ドラえもんはどこから来ましたか？",
    choices: [
      { text: "未来" },
      { text: "過去" },
      { text: "月" },
      { text: "海底" },
    ],
    correct: 0,
    hint: "22世紀から来ています。",
  },
];
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);
  });

  // ヒントの初期化（閉じる）
  document.getElementById("hint-content").style.display = "none";
}

// 答えを確認
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 choicesContainer = document.getElementById("choices-container");
  choicesContainer.innerHTML = ""; // クリアして選択肢を再描画

  // 正解・不正解のメッセージ表示
  if (selected === questionData.correct) {
    resultText.innerHTML = "<span class='correct'>正解！</span>";
    score++;
  } else {
    resultText.innerHTML = "<span class='wrong'>不正解です。</span>";
  }

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

// ヒントを開閉できるアコーディオン
function toggleHint() {
  const hintContent = document.getElementById("hint-content");
  hintContent.textContent = currentQuiz[currentQuestion].hint; // ヒントの内容を表示
  if (hintContent.style.display === "none") {
    hintContent.style.display = "block";
  } else {
    hintContent.style.display = "none";
  }
}

// 次の問題へ
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();