document.title = '理科の4択問題';

let clearCount = 0;
let quizData = [];
let quizPool = [...quizData]; // 初期化（全問題からスタート）
let currentQuestion = null;

function shuffleArray(array) {
  const copy = array.slice(); // 元の配列を変更しない
  for (let i = copy.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [copy[i], copy[j]] = [copy[j], copy[i]];
  }
  return copy;
}
function loadQuiz() {

  // プールが空ならリセット（全問出し終わった）
  if (quizPool.length === 0) {
    quizPool = [...quizData];
  }

  // ランダムに1問選び、プールから除外
  const randomIndex = Math.floor(Math.random() * quizPool.length);
  currentQuestion = quizPool.splice(randomIndex, 1)[0];

  // 正解付きの選択肢オブジェクト作成（正解は常に index 0）
  const choiceMap = currentQuestion.choices.map((choice, index) => ({
    text: choice,
    isCorrect: index === 0
  }));

  // シャッフル
  const shuffledChoices = shuffleArray(choiceMap);

  // displayQuiz 用オブジェクトを組み立てて呼び出し
  displayQuiz({
    h1: document.title,
    question: currentQuestion.question,
    choices: shuffledChoices,
    correct: currentQuestion.choices[0] // 正解は元配列の先頭と仮定
  });
}



fetch('./quizData.json')
  .then(response => {
    if (!response.ok) throw new Error("読み込み失敗");
    return response.json();
  })
  .then(json => {
    quizData = quizData.concat(json);
    console.log("読み込み完了:", quizData);
    loadQuiz(); //
  })
  .catch(error => {
    console.error("JSON読み込みエラー:", error);
  });

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-quiz-science/