東京メトロのクイズ

document.title = '東京メトロのクイズ';
//停車駅順に並んだ駅名の空白部を当てる4択クイズ！



/*
東京メトロホーム　路線・駅の情報
https://www.tokyometro.jp/station/index.html
*/


/*
jsonデータを使って問題を生成
ランダム路線の連続する停車駅4つを並べて表示
うち1つは空欄
全停車駅から4つ選択肢ボタンを選ぶ
*/
let clearCount = 0;
let metroData = {};
let allStations = [];
let currentQuestion = null;

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

function getAllStations(data) {
  const set = new Set();
  Object.values(data).forEach(stations => stations.forEach(s => set.add(s)));
  return Array.from(set);
}

function getQuiz() {
  const lines = Object.keys(metroData);
  const line = lines[Math.floor(Math.random() * lines.length)];
  const stations = metroData[line];

  if (stations.length < 4) return getQuiz();

  const start = Math.floor(Math.random() * (stations.length - 3));
  const selected = stations.slice(start, start + 4);
  const answerIndex = Math.floor(Math.random() * 4);
  const answer = selected[answerIndex];
  const display = [...selected];
  display[answerIndex] = "____";

  const choices = new Set([answer]);
  while (choices.size < 4) {
    const candidate = allStations[Math.floor(Math.random() * allStations.length)];
    choices.add(candidate);
  }

  const shuffled = Array.from(choices).sort(() => Math.random() - 0.5);
  const choiceObjects = shuffled.map(c => ({
    label: c,
    isCorrect: c === answer
  }));

  return {
    line,
    display,
    choices: choiceObjects,
    correctAnswer: answer
  };
}

function loadQuiz() {
  const quiz = getQuiz();
  currentQuestion = quiz;

  displayQuiz({
    h1: `【${quiz.line}】`,
    question: quiz.display.join(" - "),
    choices: quiz.choices.map(c => ({ text: c.label })), // ラベルをtextに変換
    correct: quiz.correctAnswer
  });
}

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

view-source:https://hi0a.com/game/quiz-metro-tokyo/