【ゲーム】JavaScript：74 ガンダムクイズ

　「⚡ ガンダムクイズ ✨」は、『機動戦士ガンダム』シリーズに関する100問のクイズからランダムに10問を出題する知識検定ゲームです。プレイヤーは4択の選択肢から正しい答えを選択し、最後に正解率を表示します。ガンダムの名シーンや用語を問う問題で、ファン同士の腕試しや学び直しに最適です。

遊び方と操作方法

  1. スタートボタンをクリックしてゲームを開始。
  2. 第1問～第10問まで、画面中央の問題文を確認。
  3. 4つの選択肢ボタンをクリックして回答。
  4. 回答後に「✅ 正解！」「❌ 不正解…」のフィードバックと効果音が再生。
  5. 次の問題ボタンで次問へ進む。10問終了後に結果画面が表示。
  6. 結果画面で正解率と正解数を確認し、タイトル画面に戻るで再挑戦可能。

ルール

  • 全100問からランダムで10問を出題。
  • 各問題は一度のみ回答可能。
  • 正解時には correct-sound、不正解時には incorrect-sound を再生。
  • 終了時に正解率（%）と正解数／問題数を表示。

🎮ゲームプレイ

以下のリンク先から実際にプレイできます。

74 ガンダムクイズ

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

効果音：魔王魂

js-gundam_quizダウンロード
gundam_quiz_title.pnggundam_quiz_bg.png

ゲーム画面イメージ

プログラム全体（gundam_quiz.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=800">
  <title>⚡ ガンダムクイズ ✨</title>
  <style>
    html, body {
      overflow: auto;
      width: 100%; height: 100%;
      margin: 0; padding: 0;
    }
    body {
      font-family: 'BIZ UDPGothic', 'Orbitron', 'Arial Black', 'Arial', sans-serif;
      background: url('gundam_quiz_bg.png') center/cover no-repeat;
      color: #d1f0ff;
      display: flex; justify-content: center; align-items: center;
      min-height: 100vh;
      letter-spacing: 0.05em;
    }
    #quiz-container {
      width: 800px; max-width: 97vw;
      min-height: 540px;
      background: linear-gradient(135deg, #203340e0 65%, #132230cc 100%);
      border: 5px solid #21a7e4;
      border-radius: 18px;
      box-shadow: 0 0 48px 0 #00b0ff40, 0 0 2px #fff;
      padding: 36px 38px 32px 38px;
      box-sizing: border-box;
      text-align: center;
      position: relative;
      z-index: 1;
      margin: 40px 0;
    }
    h1 {
      font-size: 2.4rem;
      color: #4fd6ff;
      margin-bottom: 18px;
      letter-spacing: 2px;
      text-shadow: 0 0 12px #21a7e4, 0 1px 3px #222;
      font-family: 'Orbitron', 'BIZ UDPGothic', 'Arial Black', 'Arial', sans-serif;
    }
    /* タイトル画像 */
    #title-screen img {
      display: block;
      margin: 0 auto 16px auto;
      max-width: 65%;
      height: auto;
      border-radius: 10px;
      border: 2.5px solid #4fd6ff;
      background: #01141e;
      box-shadow: 0 6px 24px #21a7e460;
    }
    .rules-title {
      text-align: center;
      font-weight: bold;
      font-size: 1.35rem;
      color: #fff;
      background: linear-gradient(90deg, #1835a7 60%, #00baff 100%);
      border-radius: 12px;
      margin-top: 16px;
      margin-bottom: 7px;
      letter-spacing: 2px;
      text-shadow: 1px 1px 7px #111c31;
      padding: 8px 0 8px 0;
      border: 2px solid #0093dd;
    }
    .rules-body {
      text-align: left;
      margin: 0 10px 19px 10px;
      font-size: 1.09rem;
      line-height: 1.8;
      color: #d1f0ff;
      background: #132230c0;
      border-radius: 7px;
      padding: 15px 20px 14px 17px;
      box-shadow: 0 0 8px #0093dd80;
      border-left: 4px solid #4fd6ff;
    }
    button {
      padding: 13px 38px;
      font-size: 1.17rem;
      border-radius: 13px;
      border: 2.5px solid #21a7e4;
      margin: 18px 10px 0 10px;
      background: linear-gradient(90deg, #1d4c7a 80%, #0fffc9 100%);
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 1px 3px 7px #00b0ff55;
      transition: background 0.17s, transform 0.08s;
      outline: none;
      font-family: 'Orbitron', 'BIZ UDPGothic', 'Arial Black', 'Arial', sans-serif;
      letter-spacing: 1px;
      text-shadow: 1px 2px 8px #0093dd;
    }
    button:active, button:focus {
      outline: 2.5px solid #4fd6ff;
    }
    button:hover {
      background: linear-gradient(90deg, #1970ab 75%, #33ffe3 100%);
      color: #0fffc9;
      transform: scale(1.035);
    }
    /* 選択肢ボタン */
    #choices-container button {
      background: linear-gradient(90deg, #133b60 80%, #22c6ff 100%);
      margin: 9px 0;
      font-size: 1.15rem;
      border-radius: 12px;
      border: 2px solid #21a7e4;
      box-shadow: 0 1px 5px #21a7e470;
      color: #fff;
      text-shadow: 1px 1px 7px #0070a0;
      width: 93%; max-width: 680px; min-width: 230px;
      display: block; margin-left: auto; margin-right: auto;
    }
    #choices-container button:hover {
      background: linear-gradient(90deg, #218fd1 100%, #33ffe3 100%);
      color: #0fffc9;
    }
    #title-screen, #game-screen, #result-screen {
      display: none;
    }
    #title-screen.active, #game-screen.active, #result-screen.active {
      display: block;
    }
    #question-number {
      font-size: 1.18rem;
      margin-bottom: 6px;
      color: #33ffe3;
      font-weight: bold;
    }
    #question-text {
      font-size: 1.48rem;
      margin: 25px 0 20px 0;
      letter-spacing: 1.6px;
      text-shadow: 0 2px 8px #0f3a60a0;
    }
    #choices-container {
      display: flex; flex-direction: column;
      gap: 11px; margin-bottom: 20px;
      align-items: center;
    }
    #feedback {
      font-size: 1.26rem;
      font-weight: bold;
      background: linear-gradient(90deg, #00142d90 80%, #22c6ff40 100%);
      border-radius: 11px;
      padding: 13px 0;
      min-height: 36px;
      margin-bottom: 15px;
      color: #33ffe3;
      border: 2px solid #0093dd;
      display: none;
      text-shadow: 0 1px 7px #00548a, 0 1px #0fffc9;
    }
    #result-message {
      font-size: 1.52rem;
      color: #4fd6ff;
      font-weight: bold;
      margin: 50px 0 28px 0;
      text-shadow: 1px 1px 12px #0077bb80;
    }
    #return-button {
      display: block;
      margin: 0 auto;
      background: linear-gradient(90deg, #1d4c7a 80%, #33ffe3 100%);
      font-size: 1.17rem;
      color: #fff;
      font-weight: bold;
      border: 2.5px solid #21a7e4;
      box-shadow: 0 1px 8px #00b0ff80;
    }
    #return-button:hover {
      background: linear-gradient(90deg, #218fd1 100%, #33ffe3 100%);
      color: #0fffc9;
    }
    @media (max-width:830px) {
      #quiz-container { width: 99vw; padding: 8px 2vw; min-width: 0;}
      h1 { font-size: 1.3rem; }
      #choices-container button { max-width: 99vw; }
    }
  </style>
</head>
<body>
  <div id="quiz-container">
    <h1>⚡ ガンダムクイズ ✨</h1>
    <!-- タイトル画面 -->
    <div id="title-screen" class="active">
      <img src="gundam_quiz_title.png" alt="ガンダムクイズ タイトル画像">
      <div class="rules-title">🚀 ルール説明 🚀</div>
      <div class="rules-body">
        ・「機動戦士ガンダム」シリーズに関するクイズが全100問！<br>
        ・4つの選択肢から正しい答えを1つ選んでください。<br>
        ・<b>毎回ランダムで10問が出題されます！</b><br>
        ・終了時に正解率が表示されます。<br>
        ・正解・不正解で効果音が流れます。<br>
        ・ガンダムの世界観で気軽に挑戦してみてください！
      </div>
      <button id="start-button">⚡ スタート！</button>
    </div>
    <!-- ゲーム画面 -->
    <div id="game-screen">
      <div id="question-number"></div>
      <div id="question-text"></div>
      <div id="choices-container"></div>
      <div id="feedback"></div>
      <button id="next-button" style="display:none;">次の問題 ➡️</button>
    </div>
    <!-- 結果画面 -->
    <div id="result-screen">
      <div id="result-message"></div>
      <button id="return-button" style="display:none;">🏠 タイトル画面に戻る</button>
    </div>
  </div>
  <!-- 効果音 -->
  <audio id="correct-sound" src="maoudamashii-quiz_correct.mp3"></audio>
  <audio id="incorrect-sound" src="maoudamashii-quiz_incorrect.mp3"></audio>

  <script>
  window.onload = function() {
    // =================== ガンダムクイズ 100問 ===================
    const questions = [
      {q:"アムロ・レイが最初に搭乗したMSは？",choices:["ガンダム","ジム","ガンタンク","ザク"],answer:"ガンダム"},
      {q:"シャア・アズナブルの異名は？",choices:["赤い彗星","白い悪魔","青い巨星","黒い三連星"],answer:"赤い彗星"},
      {q:"一年戦争で連邦軍が量産した主力MSは？",choices:["ジム","ザク","ガンタンク","ドム"],answer:"ジム"},
      {q:"ジオン公国の国旗のモチーフは？",choices:["角","星","鳥","剣"],answer:"角"},
      {q:"ララァ・スンの搭乗機体は？",choices:["エルメス","ジオング","ビグ・ザム","ドム"],answer:"エルメス"},
      {q:"「親父にもぶたれたことないのに！」のセリフは誰？",choices:["アムロ・レイ","シャア・アズナブル","カミーユ・ビダン","ジュドー・アーシタ"],answer:"アムロ・レイ"},
      {q:"アムロのガンダムの型式番号は？",choices:["RX-78-2","MS-06S","RGM-79","MS-09"],answer:"RX-78-2"},
      {q:"カミーユ・ビダンの搭乗機は？",choices:["Ζガンダム","百式","リック・ディアス","キュベレイ"],answer:"Ζガンダム"},
      {q:"ジュドー・アーシタの搭乗機体は？",choices:["ZZガンダム","νガンダム","ウイングガンダム","Vガンダム"],answer:"ZZガンダム"},
      {q:"「坊やだからさ」と言ったキャラは？",choices:["シャア","ブライト","ギレン","ランバ・ラル"],answer:"シャア"},
      {q:"「見せてもらおうか、連邦軍の○○の性能とやらを！」○○は？",choices:["モビルスーツ","戦艦","パイロット","ニュータイプ"],answer:"モビルスーツ"},
      {q:"「ザクとは違うのだよ、ザクとは！」の機体は？",choices:["グフ","ズゴック","ゲルググ","ジオング"],answer:"グフ"},
      {q:"ガンダムSEEDの主人公は？",choices:["キラ・ヤマト","アスラン・ザラ","シン・アスカ","ムウ・ラ・フラガ"],answer:"キラ・ヤマト"},
      {q:"アスラン・ザラの愛機は？",choices:["ジャスティスガンダム","イージスガンダム","デスティニーガンダム","ストライクガンダム"],answer:"ジャスティスガンダム"},
      {q:"『逆襲のシャア』でシャアが乗ったMSは？",choices:["サザビー","νガンダム","ジオング","ズゴック"],answer:"サザビー"},
      {q:"『逆襲のシャア』でアムロが乗ったMSは？",choices:["νガンダム","サザビー","リ・ガズィ","ジェガン"],answer:"νガンダム"},
      {q:"「ガンダムF91」の主人公は？",choices:["シーブック・アノー","ウッソ・エヴィン","ドモン・カッシュ","ロラン・セアック"],answer:"シーブック・アノー"},
      {q:"「Gガンダム」の主人公は？",choices:["ドモン・カッシュ","ガロード・ラン","キラ・ヤマト","刹那・F・セイエイ"],answer:"ドモン・カッシュ"},
      {q:"「∀ガンダム」の主人公は？",choices:["ロラン・セアック","ヒイロ・ユイ","バナージ・リンクス","シン・アスカ"],answer:"ロラン・セアック"},
      {q:"「機動戦士ガンダム00」の主人公は？",choices:["刹那・F・セイエイ","アレルヤ・ハプティズム","ロックオン・ストラトス","ティエリア・アーデ"],answer:"刹那・F・セイエイ"},
      {q:"ガンダムWの主人公は？",choices:["ヒイロ・ユイ","カトル・ラバーバ・ウィナー","デュオ・マックスウェル","トロワ・バートン"],answer:"ヒイロ・ユイ"},
      {q:"「Vガンダム」の主人公は？",choices:["ウッソ・エヴィン","シーブック・アノー","ジュドー・アーシタ","コウ・ウラキ"],answer:"ウッソ・エヴィン"},
      {q:"「ガンダムX」の主人公は？",choices:["ガロード・ラン","シン・アスカ","キオ・アスノ","ドモン・カッシュ"],answer:"ガロード・ラン"},
      {q:"「ガンダムAGE」の主人公は？",choices:["フリット・アスノ","バナージ・リンクス","ロラン・セアック","シーブック・アノー"],answer:"フリット・アスノ"},
      {q:"「鉄血のオルフェンズ」の主人公は？",choices:["三日月・オーガス","アイン・ダルトン","オルガ・イツカ","マクギリス・ファリド"],answer:"三日月・オーガス"},
      {q:"「ユニコーンガンダム」の主人公は？",choices:["バナージ・リンクス","リディ・マーセナス","フル・フロンタル","アムロ・レイ"],answer:"バナージ・リンクス"},
      {q:"ジオン公国の創設者は？",choices:["ジオン・ズム・ダイクン","ギレン・ザビ","ドズル・ザビ","デギン・ザビ"],answer:"ジオン・ズム・ダイクン"},
      {q:"連邦軍の艦長、ブライト・ノアが初めて指揮した艦は？",choices:["ホワイトベース","アルビオン","アークエンジェル","ラー・カイラム"],answer:"ホワイトベース"},
      {q:"「赤い彗星」と呼ばれた理由は？",choices:["赤いMSで3倍速い","ニュータイプだから","ザビ家出身","宇宙世紀生まれ"],answer:"赤いMSで3倍速い"},
      {q:"「ギレンの演説」で有名なフレーズは？",choices:["ジーク・ジオン！","ララァは私の母になってくれるかもしれなかった女性だ！","親父にもぶたれたことないのに！","坊やだからさ"],answer:"ジーク・ジオン！"},
      {q:"一年戦争の最初の戦闘は？",choices:["サイド7襲撃","ルウム戦役","ジャブロー侵攻","オデッサ作戦"],answer:"サイド7襲撃"},
      {q:"グフのパイロットは？",choices:["ランバ・ラル","マ・クベ","ガイア","シャア・アズナブル"],answer:"ランバ・ラル"},
      {q:"ザクの型式番号は？",choices:["MS-06","RX-78-2","RGM-79","MS-14"],answer:"MS-06"},
      {q:"「黒い三連星」が得意とした攻撃は？",choices:["ジェットストリームアタック","ファンネル","フィン・ファンネル","ローリングアタック"],answer:"ジェットストリームアタック"},
      {q:"ドズル・ザビが搭乗した大型MAは？",choices:["ビグ・ザム","エルメス","ブラウ・ブロ","ザクレロ"],answer:"ビグ・ザム"},
      {q:"「ララァは私の母になってくれるかもしれなかった女性だ！」と叫んだのは？",choices:["シャア・アズナブル","アムロ・レイ","ギレン・ザビ","ランバ・ラル"],answer:"シャア・アズナブル"},
      {q:"「ジオング」はどこの軍のMS？",choices:["ジオン","連邦","ティターンズ","アクシズ"],answer:"ジオン"},
      {q:"「Gアーマー」と合体できる機体は？",choices:["ガンダム","ジム","ザク","ドム"],answer:"ガンダム"},
      {q:"「ハロ」を作ったのは？",choices:["アムロ・レイ","カイ・シデン","フラウ・ボゥ","ハヤト・コバヤシ"],answer:"アムロ・レイ"},
      {q:"「フラウ・ボゥ」は誰の幼なじみ？",choices:["アムロ・レイ","シャア・アズナブル","ランバ・ラル","カミーユ・ビダン"],answer:"アムロ・レイ"},
      {q:"「Zガンダム」の主人公は？",choices:["カミーユ・ビダン","ジュドー・アーシタ","バナージ・リンクス","ロラン・セアック"],answer:"カミーユ・ビダン"},
      {q:"「ZZガンダム」の主人公は？",choices:["ジュドー・アーシタ","カミーユ・ビダン","ウッソ・エヴィン","シーブック・アノー"],answer:"ジュドー・アーシタ"},
      {q:"「逆襲のシャア」でギュネイが乗るMSは？",choices:["ヤクト・ドーガ","サザビー","リ・ガズィ","ジェガン"],answer:"ヤクト・ドーガ"},
      {q:"「ガンダムW」の女性キャラクターは？",choices:["リリーナ・ドーリアン","セイラ・マス","ララァ・スン","フラウ・ボゥ"],answer:"リリーナ・ドーリアン"},
      {q:"「機動戦士ガンダム」の監督は？",choices:["富野由悠季","庵野秀明","宮崎駿","今川泰宏"],answer:"富野由悠季"},
      {q:"一年戦争終戦時の年号は？",choices:["宇宙世紀0079","宇宙世紀0083","宇宙世紀0096","宇宙世紀0123"],answer:"宇宙世紀0079"},
      {q:"「連邦の白い悪魔」と呼ばれたMSは？",choices:["ガンダム","ジム","ザク","グフ"],answer:"ガンダム"},
      {q:"「ジム」の開発元は？",choices:["地球連邦軍","ジオン公国","アクシズ","ティターンズ"],answer:"地球連邦軍"},
      {q:"「マ・クベ」が使う武器は？",choices:["壺","ビームサーベル","ヒートロッド","バズーカ"],answer:"壺"},
      {q:"「νガンダム」のパイロットは？",choices:["アムロ・レイ","シャア・アズナブル","ジュドー・アーシタ","シーブック・アノー"],answer:"アムロ・レイ"},
      {q:"「サザビー」のパイロットは？",choices:["シャア・アズナブル","ギュネイ・ガス","ハマーン・カーン","バナージ・リンクス"],answer:"シャア・アズナブル"},
      {q:"「リ・ガズィ」のパイロットは？",choices:["アムロ・レイ","シャア・アズナブル","リディ・マーセナス","ロラン・セアック"],answer:"アムロ・レイ"},
      {q:"「ユニコーンガンダム」が持つシステムは？",choices:["NT-D","AGEシステム","ZEROシステム","トランザム"],answer:"NT-D"},
      {q:"「ガンダムAGE」のフリットの息子は？",choices:["アセム・アスノ","キオ・アスノ","ガロード・ラン","アムロ・レイ"],answer:"アセム・アスノ"},
      {q:"「鉄血のオルフェンズ」のMSのエネルギー源は？",choices:["エイハブ・リアクター","核エンジン","GNドライブ","メガ粒子炉"],answer:"エイハブ・リアクター"},
      {q:"「サンダーボルト」の主な舞台は？",choices:["サンダーボルト宙域","ジャブロー","ア・バオア・クー","オデッサ"],answer:"サンダーボルト宙域"},
      {q:"「オルガ・イツカ」はどの組織のリーダー？",choices:["鉄華団","アクシズ","ティターンズ","ジオン公国"],answer:"鉄華団"},
      {q:"「AGE-1」の開発者は？",choices:["フリット・アスノ","アムロ・レイ","バナージ・リンクス","キラ・ヤマト"],answer:"フリット・アスノ"},
      {q:"「ダブルオーガンダム」の粒子は？",choices:["GN粒子","ミノフスキー粒子","Iフィールド","AGEビルダー"],answer:"GN粒子"},
      {q:"「デスティニーガンダム」のパイロットは？",choices:["シン・アスカ","キラ・ヤマト","アスラン・ザラ","ムウ・ラ・フラガ"],answer:"シン・アスカ"},
      {q:"「クロスボーン・ガンダム」の主人公は？",choices:["トビア・アロナクス","シーブック・アノー","ロラン・セアック","ヒイロ・ユイ"],answer:"トビア・アロナクス"},
      {q:"「∀ガンダム」のあだ名は？",choices:["白ヒゲ","月光蝶","黒い三連星","赤い彗星"],answer:"白ヒゲ"},
      {q:"「ジオン軍」の最高指導者は？",choices:["ギレン・ザビ","デギン・ザビ","ジオン・ズム・ダイクン","ドズル・ザビ"],answer:"ギレン・ザビ"},
      {q:"「モビルスーツ」の略称は？",choices:["MS","MA","GM","MSV"],answer:"MS"},
      {q:"「サイクロプス隊」が登場する作品は？",choices:["ポケットの中の戦争","0083","逆襲のシャア","UC"],answer:"ポケットの中の戦争"},
      {q:"「ギャン」のパイロットは？",choices:["マ・クベ","ランバ・ラル","ジョニー・ライデン","ガイア"],answer:"マ・クベ"},
      {q:"「Zガンダム」の可変MS形態は？",choices:["ウェイブライダー","フライングアーマー","コアファイター","メガライダー"],answer:"ウェイブライダー"},
      {q:"「アクシズ」はどこの軍の拠点？",choices:["ネオ・ジオン","連邦軍","ティターンズ","ザンスカール帝国"],answer:"ネオ・ジオン"},
      {q:"「ハマーン・カーン」が愛用するMSは？",choices:["キュベレイ","ザクIII","サザビー","リック・ディアス"],answer:"キュベレイ"},
      {q:"「バナージ・リンクス」の父親は？",choices:["カーディアス・ビスト","アルベルト・ビスト","ギレン・ザビ","シーブック・アノー"],answer:"カーディアス・ビスト"},
      {q:"「オードリー・バーン」の正体は？",choices:["ミネバ・ラオ・ザビ","ララァ・スン","リリーナ・ドーリアン","セイラ・マス"],answer:"ミネバ・ラオ・ザビ"},
      {q:"「F91」の敵MSは？",choices:["ラフレシア","ザク","ジオング","サザビー"],answer:"ラフレシア"},
      {q:"「デラーズ・フリート」の指導者は？",choices:["アナベル・ガトー","ギレン・ザビ","ハマーン・カーン","ドズル・ザビ"],answer:"アナベル・ガトー"},
      {q:"「ケンプファー」が活躍する作品は？",choices:["ポケットの中の戦争","逆襲のシャア","Zガンダム","ZZガンダム"],answer:"ポケットの中の戦争"},
      {q:"「ガンダムX」の特徴は？",choices:["サテライトキャノン","月光蝶","ファンネル","ツインアイ"],answer:"サテライトキャノン"},
      {q:"「∀ガンダム」のラストで地球に降るものは？",choices:["月光蝶","雨","隕石","ビーム"],answer:"月光蝶"},
      {q:"「ストライクフリーダムガンダム」のパイロットは？",choices:["キラ・ヤマト","シン・アスカ","アスラン・ザラ","カガリ・ユラ・アスハ"],answer:"キラ・ヤマト"},
      {q:"「シャア専用ズゴック」の色は？",choices:["赤","青","黒","緑"],answer:"赤"},
      {q:"「ミノフスキー粒子」が作中で登場する主な理由は？",choices:["レーダー妨害","水素エンジン","宇宙推進","GN粒子"],answer:"レーダー妨害"},
      {q:"「ガンタンク」の搭乗者は？",choices:["ハヤトとカイ","アムロとシャア","アムロとフラウ","シャアとカイ"],answer:"ハヤトとカイ"},
      {q:"「ガンダムマックスター」が登場するシリーズは？",choices:["Gガンダム","ZZガンダム","Zガンダム","SEED"],answer:"Gガンダム"},
      {q:"「ティターンズ」が主な敵となる作品は？",choices:["Zガンダム","Vガンダム","Gガンダム","逆襲のシャア"],answer:"Zガンダム"},
      {q:"「シャア専用ゲルググ」の型式番号は？",choices:["MS-14S","MS-06R","MS-09RS","MS-18E"],answer:"MS-14S"},
      {q:"「ランバ・ラル」の部下で女性は？",choices:["ハモン","マチルダ","セイラ","ララァ"],answer:"ハモン"},
      {q:"「グレミー・トト」はどこのMSパイロット？",choices:["ネオ・ジオン","連邦軍","アクシズ","ティターンズ"],answer:"ネオ・ジオン"},
      {q:"「コア・ファイター」は何に合体できる？",choices:["ガンダム","ザク","ジオング","グフ"],answer:"ガンダム"},
      {q:"「0083」の主人公は？",choices:["コウ・ウラキ","シーブック・アノー","ジュドー・アーシタ","アナベル・ガトー"],answer:"コウ・ウラキ"},
      {q:"「トレーズ・クシュリナーダ」が登場するシリーズは？",choices:["ガンダムW","ガンダムX","Gガンダム","AGE"],answer:"ガンダムW"},
      {q:"「ミネバ・ラオ・ザビ」の父親は？",choices:["ドズル・ザビ","ギレン・ザビ","デギン・ザビ","シロッコ"],answer:"ドズル・ザビ"},
      {q:"「サイコガンダム」のパイロットは？",choices:["フォウ・ムラサメ","ハマーン・カーン","カミーユ・ビダン","マシュマー・セロ"],answer:"フォウ・ムラサメ"},
      {q:"「ガンダムW」でウイングガンダムゼロの開発に関わった科学者は？",choices:["プロフェッサーG","ドクターJ","教授M","ナナリー"],answer:"プロフェッサーG"},
      {q:"「ギレン・ザビ」の妹は？",choices:["キシリア・ザビ","セイラ・マス","ララァ・スン","フラウ・ボゥ"],answer:"キシリア・ザビ"},
      {q:"「コロニー落とし」が初めて行われたのは？",choices:["一年戦争","グリプス戦役","第一次ネオ・ジオン抗争","ラプラス事変"],answer:"一年戦争"},
      {q:"「シャア・アズナブル」の本名は？",choices:["キャスバル・レム・ダイクン","アスラン・ザラ","アムロ・レイ","ランバ・ラル"],answer:"キャスバル・レム・ダイクン"},
      {q:"「ZZガンダム」の変形後の名前は？",choices:["Gフォートレス","ウェイブライダー","コア・ブースター","フライングアーマー"],answer:"Gフォートレス"},
      {q:"「プルツー」とは何者？",choices:["強化人間","ニュータイプ","エゥーゴ","コーディネーター"],answer:"強化人間"},
      {q:"「バウ」のパイロットは？",choices:["グレミー・トト","ギュネイ・ガス","アムロ・レイ","カイ・シデン"],answer:"グレミー・トト"},
      {q:"「G-セルフ」が登場するシリーズは？",choices:["Gのレコンギスタ","ガンダムW","鉄血のオルフェンズ","ユニコーン"],answer:"Gのレコンギスタ"},
      {q:"「V2ガンダム」の特徴的な武装は？",choices:["光の翼","サテライトキャノン","ファンネル","Iフィールド"],answer:"光の翼"},
      {q:"「ハサウェイ・ノア」はどの作品の主人公？",choices:["閃光のハサウェイ","0083","Vガンダム","F91"],answer:"閃光のハサウェイ"},
      {q:"「ウイングガンダムゼロ」の主兵装は？",choices:["ツインバスターライフル","サテライトキャノン","ビームマグナム","ディバイダー"],answer:"ツインバスターライフル"},
      {q:"「ギュネイ・ガス」が登場する作品は？",choices:["逆襲のシャア","0083","Zガンダム","F91"],answer:"逆襲のシャア"},
      {q:"「AGEビルダー」はどの作品に登場？",choices:["ガンダムAGE","鉄血のオルフェンズ","Gガンダム","SEED"],answer:"ガンダムAGE"},
      {q:"「アストレイレッドフレーム」のパイロットは？",choices:["ロウ・ギュール","シン・アスカ","キラ・ヤマト","アスラン・ザラ"],answer:"ロウ・ギュール"},
      {q:"「SEED DESTINY」でキラが乗った機体は？",choices:["ストライクフリーダム","インフィニットジャスティス","デスティニー","セイバー"],answer:"ストライクフリーダム"},
      {q:"「フラッグ」のパイロットで有名なのは？",choices:["グラハム・エーカー","刹那・F・セイエイ","ロックオン・ストラトス","コウ・ウラキ"],answer:"グラハム・エーカー"},
      {q:"「ヘビーガンダム」の愛称は？",choices:["フルアーマーガンダム","サンダーボルトガンダム","G-3ガンダム","アストレイ"],answer:"フルアーマーガンダム"},
      {q:"「F90」の開発はどこ？",choices:["サナリィ","アナハイム","連邦軍本部","ジオン公国"],answer:"サナリィ"},
      {q:"「エルガイム」の主人公は？",choices:["ダバ・マイロード","アムロ・レイ","シーブック・アノー","ジュドー・アーシタ"],answer:"ダバ・マイロード"},
      {q:"「ベルリ・ゼナム」の愛機は？",choices:["G-セルフ","ZZガンダム","バンシィ","エピオン"],answer:"G-セルフ"},
      {q:"「シロー・アマダ」が所属する部隊は？",choices:["08小隊","サイクロプス隊","黒い三連星","ホワイトベース隊"],answer:"08小隊"},
      {q:"「サラサ・マハロフ」が登場するのは？",choices:["Vガンダム","Zガンダム","鉄血のオルフェンズ","F91"],answer:"Vガンダム"},
      {q:"「ストライクガンダム」のパイロットは？",choices:["キラ・ヤマト","アスラン・ザラ","シン・アスカ","ムウ・ラ・フラガ"],answer:"キラ・ヤマト"},
      {q:"「ブルーディスティニー1号機」のパイロットは？",choices:["ユウ・カジマ","アムロ・レイ","シロー・アマダ","バナージ・リンクス"],answer:"ユウ・カジマ"},
      {q:"「ティエリア・アーデ」はどの作品のキャラ？",choices:["ガンダム00","ガンダムAGE","鉄血のオルフェンズ","Gレコ"],answer:"ガンダム00"},
      {q:"「三日月・オーガス」の搭乗機体は？",choices:["バルバトス","グリムゲルデ","G-セルフ","デスティニー"],answer:"バルバトス"},
      {q:"「セイラ・マス」の本名は？",choices:["アルテイシア・ソム・ダイクン","ミネバ・ラオ・ザビ","マチルダ・アジャン","ララァ・スン"],answer:"アルテイシア・ソム・ダイクン"},
      {q:"「G-セルフ」の動力は？",choices:["フォトンバッテリー","核エンジン","GNドライブ","メガ粒子炉"],answer:"フォトンバッテリー"},
      {q:"「ウッソ・エヴィン」の母親は？",choices:["ミューラ・ミゲル","ララァ・スン","セイラ・マス","フラウ・ボゥ"],answer:"ミューラ・ミゲル"},
      {q:"「ガンダム試作2号機」の通称は？",choices:["アトミックバズーカ","バスターガンダム","ディープストライカー","フリーダムガンダム"],answer:"アトミックバズーカ"},
      {q:"「アナベル・ガトー」の異名は？",choices:["ソロモンの悪夢","黒い三連星","白い悪魔","青い巨星"],answer:"ソロモンの悪夢"},
      {q:"「ハマーン・カーン」が指導者となった組織は？",choices:["アクシズ","ティターンズ","ジオン公国","連邦軍"],answer:"アクシズ"},
      {q:"「ラプラス事変」の中心人物は？",choices:["バナージ・リンクス","アムロ・レイ","ギレン・ザビ","キラ・ヤマト"],answer:"バナージ・リンクス"},
      {q:"「ペーネロペー」が登場する作品は？",choices:["閃光のハサウェイ","逆襲のシャア","0083","鉄血のオルフェンズ"],answer:"閃光のハサウェイ"},
      {q:"「モビルアーマー」の略称は？",choices:["MA","MS","FA","GM"],answer:"MA"},
      {q:"「サンダーボルト宙域」での主な戦闘はどこの戦争？",choices:["一年戦争","グリプス戦役","ラプラス事変","第一次ネオ・ジオン抗争"],answer:"一年戦争"},
      {q:"「シュラク隊」が登場するのは？",choices:["Vガンダム","F91","鉄血のオルフェンズ","Gレコ"],answer:"Vガンダム"},
      {q:"「キラ・ヤマト」と親友なのは？",choices:["アスラン・ザラ","シン・アスカ","バナージ・リンクス","ジュドー・アーシタ"],answer:"アスラン・ザラ"}
    ];

    let quizList = [];
    let currentQuestion = 0;
    let correctCount = 0;

    // ===== DOM要素の取得 =====
    const titleScreen  = document.getElementById('title-screen');
    const gameScreen   = document.getElementById('game-screen');
    const resultScreen = document.getElementById('result-screen');
    const startBtn     = document.getElementById('start-button');
    const questionNum  = document.getElementById('question-number');
    const questionText = document.getElementById('question-text');
    const choicesBox   = document.getElementById('choices-container');
    const feedback     = document.getElementById('feedback');
    const nextBtn      = document.getElementById('next-button');
    const resultMsg    = document.getElementById('result-message');
    const returnBtn    = document.getElementById('return-button');
    const correctSE    = document.getElementById('correct-sound');
    const incorrectSE  = document.getElementById('incorrect-sound');

    // ===== シャッフル関数 =====
    function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    }

    // ===== ゲーム開始 =====
    function startGame() {
      quizList = [...questions];
      shuffle(quizList);            // 問題をシャッフル
      quizList = quizList.slice(0, 10);  // 10問出題
      currentQuestion = 0;
      correctCount = 0;
      titleScreen.classList.remove('active');
      resultScreen.classList.remove('active');
      gameScreen.classList.add('active');
      showQuestion();
    }

    // ===== 問題表示 =====
    function showQuestion() {
      let qData = quizList[currentQuestion];
      questionNum.textContent = `第${currentQuestion + 1}問 / 10`;
      questionText.textContent = qData.q;
      let choices = [...qData.choices];
      shuffle(choices);    // 選択肢もランダム表示
      choicesBox.innerHTML = '';
      choices.forEach(choice => {
        let btn = document.createElement('button');
        btn.textContent = choice;
        btn.onclick = () => selectAnswer(choice, qData.answer);
        choicesBox.appendChild(btn);
      });
      feedback.style.display = "none";
      feedback.textContent = '';
      nextBtn.style.display = 'none';
    }

    // ===== 回答選択処理 =====
    function selectAnswer(selected, correct) {
      document.querySelectorAll('#choices-container button').forEach(b=>b.disabled=true);
      if (selected === correct) {
        feedback.textContent = "✅ 正解！君はニュータイプか！？";
        correctCount++;
        if(correctSE) { correctSE.currentTime = 0; correctSE.play(); }
      } else {
        feedback.textContent = `❌ 不正解…正解は「${correct}」だ！`;
        if(incorrectSE) { incorrectSE.currentTime = 0; incorrectSE.play(); }
      }
      feedback.style.display = "block";
      nextBtn.style.display = "inline-block";
    }

    // ===== 次の問題へ =====
    function nextQuestion() {
      currentQuestion++;
      if (currentQuestion < quizList.length) {
        showQuestion();
      } else {
        endGame();
      }
    }

    // ===== 終了画面 =====
    function endGame() {
      gameScreen.classList.remove('active');
      resultScreen.classList.add('active');
      let rate = Math.round((correctCount / quizList.length) * 100);
      resultMsg.innerHTML =
        `✨ クイズ終了！あなたの正解率は <span style="color:#4fd6ff">${rate}%</span> だ！<br>` +
        `（${correctCount} / ${quizList.length}問）<br><br>` +
        "お疲れ様でした。再挑戦も歓迎だ！";
      returnBtn.style.display = 'block';
    }

    // ===== タイトルに戻る =====
    function toTitle() {
      resultScreen.classList.remove('active');
      titleScreen.classList.add('active');
      returnBtn.style.display = 'none';
    }

    // ===== イベント登録 =====
    startBtn.addEventListener('click', startGame);
    nextBtn.addEventListener('click', nextQuestion);
    returnBtn.addEventListener('click', toTitle);

    // ===== 初期画面表示 =====
    titleScreen.classList.add('active');
    gameScreen.classList.remove('active');
    resultScreen.classList.remove('active');
  }
  </script>
</body>
</html>

アルゴリズムの流れ

ステップ内容関連関数
1. 問題定義100問分の問題配列 questions を定義—
2. 配列シャッフルFisher–Yates法で questions をシャッフルshuffle(array)
3. 問題抽出上位10件を quizList に格納slice(0,10)
4. タイトル→開始画面切替、変数リセット (currentQuestion, correctCount)startGame()
5. 問題表示問題テキストと選択肢を DOM に反映showQuestion()
6. 回答処理選択肢と正解を比較し、フィードバック・効果音を再生selectAnswer()
7. 次問/終了判定全10問終了で endGame()、未終了で showQuestion() 呼び出しnextQuestion()
8. 結果表示正解率計算および結果メッセージを生成endGame()
9. タイトル復帰タイトル画面に戻るtoTitle()

関数の解説

関数名引数戻り値処理内容
shuffle(array)array (配列)なしFisher–Yates法で配列をインプレースシャッフル。
startGame()なしなし問題リスト生成、画面切替、カウンタ初期化、最初の問題表示。
showQuestion()なしなし現在の問題を画面に描画し、選択肢ボタンを動的生成。
selectAnswer(sel, ans)sel (選択文字列), ans (正解文字列)なし選択と正解を比較し、フィードバック表示と効果音再生、次ボタンを表示。
nextQuestion()なしなし質問番号をインクリメントし、次問表示または終了処理を実行。
endGame()なしなし正解率計算と結果画面切替。結果メッセージを生成し表示。
toTitle()なしなし結果画面非表示、タイトル画面表示。

改造のポイント

  • 出題数・問題数変更： questions.length や slice(0,10) の数値を変えて出題数を調整可能。
  • UIカスタマイズ： CSS のグラデーションやフォント・ボタンスタイルを変更し、オリジナルのガンダム風デザインに。
  • 効果音・BGM追加： audio要素を増設して、BGMやSEを強化。
  • 多段階難易度： 正解率に応じて次回から出題範囲を変更するロジック（RRULE的な段階設定）を追加。
  • スコア保存・ランキング： localStorage を利用してハイスコア機能やランキング表示を実装。

アドバイス
　まずは CSS と問題数の調整で全体のバランスを確認し、徐々に音声やスコア管理機能を段階的に追加すると開発がスムーズです。