Skip to content

Instructions.md

Latest commit

 

History

History
169 lines (127 loc) · 4.63 KB

Instructions.md

File metadata and controls

169 lines (127 loc) · 4.63 KB
Raw

インスタントテスト — 要件 + UI デザイン仕様（統合版）

1. ターゲット

  • 利用者：学校の先生（作成者本人）

2. 目的

  • 授業の最後の10分で、生徒の理解度を即時に確認できるテストを提供する。
  • 授業内容（テキスト）を元に AI が問題を自動生成し、生徒がその場で解答できる仕組みを作る。

3. 目標（アプリのコア機能）

  • 先生が入力した授業内容から AI が選択式問題を自動生成する。
  • 生成した問題を「テスト」として管理し、生徒がブラウザから受験できるようにする。

4. 動作環境

  • 生徒側：PC / スマホのブラウザで動作
  • 先生側：PCブラウザでの利用を想定

5. 先生用画面（管理画面）

5.1 クラス管理

  • クラス名の登録
  • クラス名の一覧表示
  • クラス名の編集・削除

5.2 テスト管理

先生は「テスト」を作成し、以下を設定できる：

  • テスト名
  • 概要
  • 公開 / 非公開
  • 各問題の点数設定
  • 問題のランダム出題設定（ON/OFF）

クラスとの紐づけ

  • 任意のクラスにテストを紐づける
  • 紐づけの解除も可能

5.3 問題管理

テストに対して問題を作成・編集できる。

問題の設定項目

  • 問題形式
    • 二者択一（Yes/No）
    • 単一選択式
    • 複数選択式
  • 問題文
  • 選択肢（2〜5個）
  • 問題数は最大10問
  • 公開 / 非公開
  • ※難易度設定（やさしい・ふつう・むずかしい）は将来実装

AI による問題生成

  • 先生が入力した授業内容（テキスト）を元に AI が問題を自動生成する
  • 生成後、先生が編集・削除できる

5.4 URL / QR コード生成

  • テスト一覧から、生徒がアクセスするための URL と QR コードを生成

6. 生徒用画面（受験画面）

アクセス

  • URL または QR コードからトップページへアクセス
  • 「クラスコード」と「名前」を入力してログイン

テスト受験フロー

  1. 利用可能なテスト一覧から選択
  2. 問題を順に解く
  3. 各問題の回答後、正答と解説を表示
  4. 最後の問題終了後、スコアのサマリーページを表示

7. データモデル（実装の参考）

  • Class
  • Test
  • Question
  • Choice
  • Student
  • StudentAnswer

8. UI デザイン仕様（Web アプリとしての見た目）

8.1 全体デザイン方針

  • Google Classroom / Moodle のような落ち着いた LMS 風 UI
  • 視認性を最優先（コントラスト比・色覚バリアフリー）
  • 学生画面は「教科書のような読みやすさ」を重視

8.2 カラーリング（推奨パレット）

用途 色 説明
メインカラー #2B6CB0 教育系でよく使われる落ち着いたブルー
アクセント #3182CE ボタンや強調に使用
背景（ライト） #F7FAFC 白に近い淡いグレー
背景（ダーク） #1A202C ダークモード用
テキスト（濃） #1A202C メインテキスト
テキスト（薄） #4A5568 補助テキスト

色覚バリアフリー対応

  • 誤答は赤ではなく オレンジ (#DD6B20)
  • 正答は 青 or 緑 (#38A169)

8.3 フォント仕様

先生画面（管理画面）

  • Inter（英字）
  • Noto Sans JP（日本語）
  • UI 操作用に視認性の高いサンセリフ体

学生画面（テスト画面）

  • Noto Serif JP（日本語） ← 教科書風
  • Georgia / Times New Roman（英字）
  • 行間は 1.6〜1.8
  • 問題文は 16〜18px とやや大きめ

8.4 レイアウト構造（LMS 風）

先生画面

  • 左：サイドナビ（縦メニュー）
  • 右：メインコンテンツ
  • カード型 UI、表形式の一覧、モーダル編集

学生画面

  • シンプルなログインフォーム
  • テスト一覧はカード型
  • 問題画面は教科書風フォントで読みやすく
  • 選択肢はタップしやすいカード型
  • 結果画面はスコアを大きく表示

8.5 UI コンポーネント一覧

先生画面

  • Sidebar
  • Header
  • Table
  • Modal
  • Card
  • Form
  • QRCodeGenerator

学生画面

  • SimpleForm
  • TestCard
  • QuestionCard
  • ChoiceButton
  • ResultSummary

9. 実装上のポイント

  • テストはクラスに紐づく
  • 問題はテストに紐づく
  • 生徒の回答履歴は StudentAnswer に保存
  • AI 生成部分は API 経由で実装（後から差し替え可能な構造にする）