AnySlash Quiz

AnySlash Quizは、JSONファイルから4択クイズを提供するPWA対応のWebアプリケーションです。Ankiファイルとの互換性を持ち、CSV形式からの変換にも対応しています。

ユーザー向け利用方法

クイズの利用

1. アプリケーションにアクセスします
2. 「JSONファイルを選択」ボタンをクリックして、クイズデータのJSONファイルを選択します
3. ファイルが読み込まれると、クイズが開始されます
4. 4つの選択肢から正解を選んで「次の問題」ボタンをクリックします
5. 各問題の解答後、正解と解説が表示されます
6. 全問題終了後、最終的な成績が表示されます

キーボード操作（PC向け）

PCでは以下のキーボード操作により、より効率的にクイズを進めることができます：

• 1～4キー: 選択肢A～Dを選択
• Enterキー:
  • 1回目: 選択した答案を確定
  • 2回目: 次の問題に進む

この操作により、マウスを使わずに素早くクイズを進めることができます。

ファイル変換機能

「ファイル変換」ページでは以下の変換が可能です：

• CSV → JSON: CSVファイルからクイズ用JSONファイルを生成
• JSON → CSV: クイズJSONファイルからCSV形式にエクスポート
• Anki → JSON: Ankiのタブ区切り形式からクイズJSONファイルを生成

CSVファイルの形式

CSVファイルは以下の形式で作成してください：

question,option1,option2,option3,option4,correct,explanation,deck,tags
"質問文","選択肢1","選択肢2","選択肢3","選択肢4",正解番号(0-3),"解説","デッキ名","タグ1|タグ2"

サンプルファイル

アプリケーションには以下のサンプルファイルが含まれています：

• sample-quiz.json: プログラミング基礎クイズのサンプル
• サンプルCSVファイル（変換ページで生成可能）

開発者向けセットアップ

必要な環境

• Node.js 18以上
• pnpm（推奨パッケージマネージャー）

セットアップ手順

1. リポジトリをクローンします：

git clone [リポジトリURL]
cd anyslash

2. 依存関係をインストールします：

pnpm install

3. 開発サーバーを起動します：

pnpm run dev

ローカルサーバーが http://localhost:4321 で起動します。

開発コマンド

コマンド	説明
pnpm run dev	開発サーバーを起動（localhost:4321）
pnpm run build	本番用ビルドを実行（./dist/に出力）
pnpm run preview	ビルド済みサイトをプレビュー

プロジェクト構成

/
├── public/
│   ├── example-quiz.json      # 複数のソースを読み込む際のサンプルクイズファイル
│   ├── favicon.svg
│   └── sample-quiz.json       # サンプルクイズファイル
├── src/
│   ├── components/
│   │   ├── Layout.astro       # 基本レイアウト
│   │   └── NavBar.astro       # ナビゲーションバー
│   └── pages/
│       ├── index.astro        # クイズページ
│       └── convert.astro      # ファイル変換ページ
├── quiz-schema.json           # JSONスキーマ定義
└── astro.config.mjs          # Astro設定（PWA含む）

技術スタック

• フレームワーク: Astro v5
• 言語: TypeScript
• スタイル: Bulma 1.0.4

JSONスキーマ

クイズデータのJSONスキーマは quiz-schema.json ファイルで定義されています。このスキーマに準拠することで、Anki互換性とCSV変換機能を確保できます。