AIと一緒にクイズアプリを作ってみた

ファイル構成

AIに任せたところ、フレームワークを一切使わないプレーンな構成になりました。

quiz-app/
├── index.html      # メインHTMLファイル（アプリケーションのエントリーポイント）
├── script.js       # メインJavaScriptファイル（ゲームロジック）
├── quiz-data.js    # クイズデータ（1000問の質問と回答）
├── styles.css      # スタイルシート（デザイン定義）
└── README.md       # このファイル

各ファイルの役割

• index.html: アプリケーションの構造を定義。スタート画面、クイズ画面、結果画面の3つの画面を含む
• script.js: クイズの進行、スコア計算、画面遷移などのゲームロジックを実装
• quiz-data.js: 1000問のクイズデータを配列形式で格納
• styles.css: レスポンシブデザインとアニメーションを含むスタイル定義

起動方法

方法1: ファイルを直接開く

1. index.htmlファイルをダブルクリック
2. ブラウザで自動的に開きます

方法2: ローカルサーバーで起動（推奨）

Python 3がインストールされている場合：

# quiz-appディレクトリに移動
cd quiz-app

# HTTPサーバーを起動
python3 -m http.server 8000

# ブラウザで http://localhost:8000 にアクセス

Node.jsがインストールされている場合：

# http-serverをインストール（初回のみ）
npm install -g http-server

# quiz-appディレクトリに移動
cd quiz-app

# サーバーを起動
http-server

# ブラウザで表示されたURLにアクセス

特徴

• 1000問のクイズデータからランダムに10問出題
• 即座にフィードバックを表示（正解/不正解）
• スコア表示とパフォーマンスに応じたメッセージ
• レスポンシブデザイン（スマートフォン対応）
• カラフルで親しみやすいUI