Skip to main content

​
概要

授業ページは、コース内のレッスンをページ単位で進めていく UI です。講義、選択問題、穴埋め問題、配線問題など複数のページタイプを組み合わせて学習コンテンツを構成します。

​
データの流れ

  1. courses.ts で Course[] を export
  2. chapter1.ts などで各章の Course を定義し、lessons に複数の Lesson を紐付け
  3. 各 Lesson は pages: Page[] を持ち、ページ単位で表示内容が切り替わる

​
ディレクトリ構成

src/data
courses.ts
course-data
types.ts
chapter1.ts
chapter1-1.ts
chapter1-2.ts
chapter1-3.ts
chapter1-4.ts
chapter1-5.ts
chapter1-sandbox.ts
device-catalog.ts
illustration-presets.ts
illustration-registry.tsx
illustration-registrations.tsx
  • courses.ts: コース一覧のエントリポイント
  • course-data/types.ts: Course / Lesson / Page の型定義
  • chapter1.ts: コース定義（章単位）。chapter1-1 ～ chapter1-sandbox を import
  • chapter1-*.ts: レッスン定義（ページ配列）
  • device-catalog.ts: サンドボックス・パケットシミュ用デバイスカタログ
  • illustration-*: 講義ページの図（プリセット・レジストリ・登録）

​
XP・進捗

  • ページを完了すると XP が付与される
  • 講義: 10 XP / 問題: 20 XP / 最終ページ完了ボーナス: 20 XP
  • 進捗は course_progress テーブルに保存