テスト対策用クイズサイト

教科ごとの問題を、すきま時間にくり返し解ける学習用クイズアプリです。

✨ できること

• 教科ごとに整理 — 試験の中から教科を選び、問題形式を確認してスタート
• ライブラリとダッシュボード — 問題を探す場所と学習状況を確認する場所を分離
• 複数の出題形式 — 選択式・記述式・計算・手書きに対応
• 問題数を自由に選択 — 短時間の確認からまとめ演習まで切り替え可能
• URLからすぐ開始 — リンクを開くだけで指定した教科のクイズがスタート（使い方）
• 途中から再開 — クイズの途中でページを更新したり閉じたりしても、同じ問題・同じ選択肢の並びで続きから再開（24時間以内）
• 全問正解モード — 不正解の問題だけをくり返し、全問正解まで集中演習（手書きは答えを確認するまで）
• 設定を保存 — 設定画面からダークモードを切り替え、次回も同じテーマで利用
• PWA対応 — 対応ブラウザではホーム画面に追加してアプリ感覚で利用可能
• スマートフォン対応 — モバイルでも操作しやすいレスポンシブUI

🚀 はじめ方

npm install
npm run dev

ブラウザで http://localhost:5173 を開いてください。

🧰 npm scripts

コマンド	内容
npm run dev	開発サーバーを起動し、変更を監視
npm run build	型チェックと本番用バンドルを生成
npm run watch	バンドルを監視して自動更新
npm run deploy	Vercelへ本番デプロイ

🔗 URLからクイズをすぐ開始する

アドレスにクエリを付けて開くと、ライブラリを選ばずにそのままクイズが始まります。友達へのリンク共有やブックマークに便利です。

例	動作
/?exam=quiz	試験「小テスト」の科目一覧を開く
/?exam=quiz&subject=software-engineering-choice	その科目を 全問 で開始
/?exam=quiz&subject=software-engineering-choice&count=10	10問 で開始（問題数を超えると全問）
/?exam=quiz&subject=software-engineering-choice&mode=mastery	全問正解モード で開始（手書きは全問確認モード）

• exam は src/data/exams.ts の id、subject は各試験フォルダの subjects.ts の id です（選択科目も指定できます）。
• 存在しない subject を指定した場合はその試験の科目一覧、存在しない exam や指定なしの場合は通常のライブラリ画面を表示します。

🗂️ プロジェクト構成

src/
├─ app.ts                 # アプリの画面遷移と状態管理
├─ quiz-link.ts           # URLクエリ(?exam=…&subject=…)の解釈
├─ quiz-session.ts        # 進行中のクイズの保存・再開（データの検証と起動時の判断）
├─ icons.ts               # アイコン定義
├─ types.ts               # データ型
├─ main.ts                # エントリーポイント
└─ data/                  # 試験・教科・問題データ
public/
├─ index.html             # クイズ画面
├─ create.html            # クイズ作成ツール
├─ manifest.webmanifest   # PWA設定
├─ sw.js                  # オフラインキャッシュ
└─ icons/                 # favicon・PWA・OGP用アイコン

➕ 問題を追加する

問題データの追加方法は ADDING_QUIZZES.md にまとめています。

新しい問題を追加したら、型チェックを兼ねてビルドしてください。

npm run build

🔔 お知らせを追加する

src/data/announcements.ts の配列の先頭に { date: '2026-11-01', title: 'タイトル', body: 'お知らせ本文' } の形式で追加し、npm run build を実行します。お知らせがない場合は、ベルの中にその旨が表示されます。

📱 PWA・シェア用メタデータ

public/manifest.webmanifest とサービスワーカーを利用してPWAとしてインストールできます。 ページにはfavicon、Apple touch icon、Open Graph、Twitter Card用のメタデータも設定済みです。

📄 ライセンス

学校のテスト対策を目的とした個人開発プロジェクトです。