Skip to main content

​
lecture（講義）

説明文と図を表示するページ。 
{
  id: 'c1-1-lecture',
  type: 'lecture',
  title: 'ネットワークとは？',
  description: 'ネットワークの正体を理解しよう',
  content: '今、あなたはこのページを見ている。...',
  visualData: { ... },  // 省略可
}
content は Markdown 形式で記述可能です。

​
choice（選択式問題）

4択などの選択問題。 
{
  type: 'choice',
  choiceData: {
    question: '次のうち、ネットワークを利用しているものはどれ？',
    choices: ['選択肢1', '選択肢2', '選択肢3', '選択肢4'],
    correctIndex: 0,  // 0始まりで正解のインデックス
  },
  correctFeedback: '正解！',
  incorrectFeedback: 'もう一度考えてみよう',
}

​
embedded-choice（穴埋め問題）

文中の {slot1} などをドロップダウンで選択する形式。 
{
  type: 'embedded-choice',
  embeddedChoiceData: {
    content: 'LINEでメッセージを送れるのは{slot1}という仕組みがあるからである。',
    choices: {
      slot1: ['インターネット', '高度情報化', 'セーフティーネット'],
    },
    correctAnswers: {
      slot1: 'インターネット',
    },
  },
}

​
quiz（クイズ）

穴埋め＋用語の組み合わせなど、より複雑なクイズ形式。 
{
  type: 'quiz',
  quizData: {
    instruction: '問題文',
    choices: ['選択肢1', '選択肢2', ...],
    correctAnswers: { slotId: '正解の文字列' },
    slots: [
      { id: 'slot1', label: '用語', icon: 'Monitor' },
    ],
  },
}

​
wiring（配線問題）

機器同士を線で結ぶ問題。 
{
  type: 'wiring',
  wiringData: {
    instruction: '正しく接続せよ',
    devices: [
      { id: 'pc1', type: 'pc', label: 'PC', x: 100, y: 100 },
      { id: 'router1', type: 'router', label: 'ルーター', x: 200, y: 100 },
    ],
    requiredConnections: [
      { from: 'pc1', to: 'router1' },
    ],
  },
}
デバイスタイプ: pc | router | cloud | switch | server | loadbalancer

​
sandbox（ネットワーク構築サンドボックス）

デバイスをキャンバスに配置し、ケーブルで接続する。必要に応じて ConfigPanel で IP 等を設定し、接続と設定の正しさでクリア判定する。
  • トポロジーのみ (validationMode: 'topology-only'): 指定された接続ができていればクリア。
  • フル設定 (validationMode: 'full-config'): 接続に加え、各デバイスの expectedConfig（IP・ゲートウェイ・サブネット等）が一致していればクリア。
  • デバイス追加: ドラッグ（PC）または タップで選択 → キャンバスをタップで配置（スマホ対応）。
  • 物理/論理ビュー切替、ケーブル種別（cableType: utp / stp / fiber / wireless）の表示に対応。
詳細は サンドボックス・パケットシミュレーター仕様 を参照。

​
packet-sim（パケットシミュレーター）

あらかじめ定義されたトポロジーとシナリオに沿って、パケットの流れをステップ実行で可視化する。
  • 「送信」で開始し、「次へ」で 1 ホップずつ進める。
  • 各ステップでパケットヘッダーの before/after 差分（PacketInspector）、アクション（ActionBadge）、カプセル化/デカプセル化（EncapsulationVisualizer）を表示。
  • ステップごとにチャレンジ問題（ChallengeOverlay）を出題可能。
  • 物理/論理ビュー、ケーブル種別表示に対応。
詳細は サンドボックス・パケットシミュレーター仕様 を参照。

​
ページタイプと実装の対応

授業ページ用のルート（src/routes/courses.$courseId.lessons.$lessonId.tsx）で page.type に応じて表示を切り替えます。ページタイプごとの UI は components/lesson 配下のコンポーネントに委譲されています。
src/routes
courses.$courseId.lessons.$lessonId.tsx
src/components
lesson
LessonContent.tsx
LectureContent.tsx
QuizPuzzleContent.tsx
QuizChoiceContent.tsx
SimpleChoiceContent.tsx
WiringContent.tsx
  • lecture / choice / embedded-choice / quiz / wiring: LessonContent 経由で上記コンポーネントに分岐してレンダリング
  • sandbox: SandboxComponent
  • packet-sim: PacketSimComponent