マジサバ試験サイトの仕様

マジサバ試験サイトの技術スタックを整理する

画面遷移+要件

全体のUIテーマ

共通テストに寄せる

>没入感を重視した版を作成し,検証

トップページ

役割

募集要項

入り口

タイトル

令和X年度 Magic Survival 共通テスト

ボタン

受験手続きへ

受験登録画面へ遷移

>ビジュアル: 未定. 後で足せばOK. 先に中身を作る

>受験者情報をダッシュボードで確認

受験履歴など

受験登録画面

役割

ユーザ名入力

科目選択

注意事項の掲載

ユーザ名入力

結果に反映

>ユーザ認証

MVPでアンケートし,必要か判断

科目選択

MVPでは一つのみ

>複数科目を選択し,受験

注意事項

wiki閲覧許可

大学の試験と同じ

時間制限を明示

>詳細は未定. MVPアンケートで判断

開始ボタン

試験画面へ遷移

POST /exam/start を送信

サーバー側でセッションIDを発行

hx-push-url で試験画面へ遷移

試験画面

役割

問題の閲覧

解答

左に問題,右にマークシートの構成

ヘッダ

残り時間,タイマー

Alpine.jsで動的にカウント

科目名

左カラム

問題を閲覧

スクロールかページ送り

Kindle or Markdownのプレビューのイメージ

>Markdownを読み込み,TemplでHTML生成

MVPはPDF画像

UIは未定

MVPは白地

>必要ならmelamin君に依頼

画像の表示

MVPではPDF or pngを表示

>Markdown内の指定された画像を表示

右カラム

マークシートで解答

マーク塗りつぶし

Alpine.jsで実現

クリックで色を黒に変更

>記述式の問題や解答を別で管理

未解答と解答を分けて表示

>UIの改善点として注目

解答状況の自動保存

htmxで対応

マークしたら POST /exam/answer でDBに保存

時間で強制終了

残り時間0でAlpineが終了処理を発火

フッター

解答終了ボタン

確認のモーダルを表示

試験結果画面

役割

採点

合否の判定

>称号付与

>証明書発行

総合得点

86/100 点

Goで正答率を計算

合格判定証 (OGP)

SNSシェア画像を動的生成して表示

htmxで差し替え?

Goの画像処理ライブラリ（gg など）でサーバー生成してキャッシュ

>SNSシェア

>解説への遷移

>解答解説画面

全問題のリスト表示

ユーザの解答と正答を表示

問題の解説を表示

可能ならWikiへの外部リンクを添付

ディレクトリ構成

code: bash

/magic-exam

├── /cmd

│ └── /server

│ └── main.go # エントリーポイント (Echoの起動)

├── /db # SQLiteの初期化・クエリ

│ └── schema.sql

├── /handlers # HTTPハンドラー (htmxのリクエスト処理)

│ ├── exam.go # 試験画面・解答受信

│ └── result.go # 採点・結果表示

├── /models # データ構造体 (Go struct)

│ ├── question.go # 問題データ定義

│ └── session.go # 受験者の進行状況

├── /views # Templファイル (.templ)

│ ├── layouts/ # base.templ (ヘッダー・フッター)

│ ├── components/ # timer.templ, marksheet.templ

│ └── pages/ # exam.templ, result.templ

├── /assets # 静的ファイル (画像, 生成されたCSS)

├── go.mod

└── tailwind.config.js

データモデル

code: Go

// 1. 受験セッション

type ExamSession struct {

ID string // UUID

UserName string // ユーザー名

Subject string // 科目ID

Score int // 最終スコア

StartedAt time.Time // 開始時刻

Answers mapstringint // { "q1": 2, "q2": 4 ... }

}

// 2. 問題データ (JSONで管理)

type Question struct {

ID string // "q1"

Section string // "第1問魔法融合"

Text string // "マジックボルトとスピリットを融合すると..."

ImageURL string // プレイ画面キャプチャなど

Type string // "single_choice" (択一)

Options []string // "魔法の槍", "ドッペルゲンガー", ...

Correct int // 0 (index)

Score int // 5

Explanation string // 解説テキスト

}

拡張機能の候補

管理者用画面

SQLiteからPostgreSQLに変更

受験者ランキング

点数ごとに称号付与

0-30点: 「被験体 (Subject)」

31-70点: 「魔法使い (Wizard)」

71-90点: 「大魔法使い (Archmage)」

91-100点: 「神 (Deity) / アカシックレコード」

統計情報の可視化

UI/UXの改善

UI/UXの基礎をやる予定. 実践したい

問題文の自動翻訳

複数言語に対応

事前に生成するなど,対応形式は検討