都道府県クイズ

都道府県クイズ | ひまあそび-ミニゲーム hi0a.com

view source

JavaScript

document.title = '都道府県クイズ';



let clearCount = 0;
const adjacencyMap = {
  "北海道": ["青森"],
  "青森": ["北海道", "秋田", "岩手"],
  "岩手": ["青森", "秋田", "宮城"],
  "宮城": ["岩手", "秋田", "山形", "福島"],
  "秋田": ["青森", "岩手", "山形", "宮城"],
  "山形": ["秋田", "宮城", "福島", "新潟"],
  "福島": ["宮城", "山形", "新潟", "群馬", "栃木", "茨城"],
  "茨城": ["福島", "栃木", "埼玉", "千葉"],
  "栃木": ["福島", "群馬", "埼玉", "茨城"],
  "群馬": ["福島", "新潟", "長野", "埼玉", "栃木"],
  "埼玉": ["群馬", "栃木", "茨城", "千葉", "東京", "山梨", "長野"],
  "千葉": ["茨城", "埼玉", "東京"],
  "東京": ["埼玉", "千葉", "神奈川", "山梨"],
  "神奈川": ["東京", "山梨", "静岡"],
  "新潟": ["山形", "福島", "群馬", "長野", "富山"],
  "富山": ["新潟", "長野", "岐阜", "石川"],
  "石川": ["富山", "福井", "岐阜"],
  "福井": ["石川", "岐阜", "滋賀", "京都"],
  "山梨": ["長野", "埼玉", "東京", "神奈川", "静岡"],
  "長野": ["新潟", "群馬", "埼玉", "山梨", "静岡", "岐阜", "富山", "愛知"],
  "岐阜": ["富山", "長野", "愛知", "三重", "滋賀", "福井"],
  "静岡": ["山梨", "神奈川", "愛知", "長野"],
  "愛知": ["静岡", "長野", "岐阜", "三重"],
  "三重": ["愛知", "岐阜", "滋賀", "奈良", "和歌山"],
  "滋賀": ["福井", "岐阜", "三重", "京都"],
  "京都": ["福井", "滋賀", "大阪", "奈良", "兵庫"],
  "大阪": ["京都", "奈良", "兵庫", "和歌山"],
  "兵庫": ["京都", "大阪", "鳥取", "岡山"],
  "奈良": ["京都", "大阪", "和歌山", "三重"],
  "和歌山": ["大阪", "奈良", "三重"],
  "鳥取": ["兵庫", "岡山", "島根"],
  "島根": ["鳥取", "広島", "山口"],
  "岡山": ["兵庫", "鳥取", "広島"],
  "広島": ["岡山", "島根", "山口", "愛媛"],
  "山口": ["島根", "広島", "福岡"],
  "徳島": ["香川", "高知", "兵庫", "愛媛"],
  "香川": ["徳島", "愛媛", "岡山"],
  "愛媛": ["香川", "徳島", "高知", "広島"],
  "高知": ["徳島", "愛媛"],
  "福岡": ["山口", "大分", "佐賀"],
  "佐賀": ["福岡", "長崎"],
  "長崎": ["佐賀"],
  "熊本": ["福岡", "大分", "宮崎", "鹿児島", "長崎"],
  "大分": ["福岡", "熊本", "宮崎"],
  "宮崎": ["大分", "熊本", "鹿児島"],
  "鹿児島": ["熊本", "宮崎"],
//  "沖縄": ["鹿児島", "長崎"]
};

function pickRandom(arr, n) {
  const shuffled = arr.slice().sort(() => 0.5 - Math.random());
  return shuffled.slice(0, n);
}

function loadQuiz() {
  const prefectures = Object.keys(adjacencyMap).filter(p => adjacencyMap[p].length >= 2);
  const answer = prefectures[Math.floor(Math.random() * prefectures.length)];
  const hints = pickRandom(adjacencyMap[answer], Math.min(3, adjacencyMap[answer].length));

  // 正解の隣接県の隣接県を選択肢候補に(正解やヒント除く)
  const neighborOfNeighbors = new Set();
  adjacencyMap[answer].forEach(n => {
    (adjacencyMap[n] || []).forEach(nn => {
      if (nn !== answer && !hints.includes(nn)) {
        neighborOfNeighbors.add(nn);
      }
    });
  });

  const filtered = [...neighborOfNeighbors].filter(p => p !== answer && !hints.includes(p));
  const choicesSet = new Set([answer, ...pickRandom(filtered, 3)]);

// 不足分をランダムに補充(全都道府県から)
  const allPrefectures = Object.keys(adjacencyMap);

  while (choicesSet.size < 4) {
    const random = allPrefectures[Math.floor(Math.random() * allPrefectures.length)];
    // 重複・ヒント・正解を除外して追加
    if (!choicesSet.has(random) && !hints.includes(random) && random !== answer) {
      choicesSet.add(random);
    }
  }

  const choices = [...choicesSet].sort((a, b) => a.localeCompare(b));

  // displayQuizへ渡す形式で呼び出し
  displayQuiz({
    h1: "次の県に隣接する都道府県は?",
    question: hints.join("、"),
    choices: choices.map(name => ({ text: name })),
    correct: answer
  });
}

// 最初の出題
loadQuiz();

CSS

HTML

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

view-source:https://hi0a.com/game/quiz-prefecture/

ABOUT

hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

仕様変更、API廃止等、実験途中で動かないページもあります。