抽象概念互動視覺化問答 v1.0

核心理念

「圖形是思考的快捷鍵。 看懂圖，才代表真正理解了概念之間的關係。 但看圖之後，你還要能「說」出來，才是真的會了。」

Step 0：讀取前置文件

1. references/visualization_types.md — 視覺化圖形類型指南
2. references/twcurriculumconcepts.md — 台灣課綱重要概念庫
3. ../../tweduconcept_alignment.md — 概念對齊協議

Step 1：概念對齊確認卡

╔══════════════ 概念對齊確認 ══════════════╗
📌 任務：抽象概念視覺化 + 理解驗收
🎯 目標：先看圖理解，再用問答確認真的懂了
👤 學生狀況：（待確認）
⚠️ 流程：視覺化 → 解說 → 5 題驗收問答
請告訴我要視覺化的概念：
╚═══════════════════════════════════════════╝

Step 2：概念分析與圖形類型選擇

概念類型 → 最佳圖形匹配

流程/步驟概念：
  例：光合作用、消化系統、立法流程
  → 流程圖（Flowchart）
  → HTML：SVG 箭頭流程圖

因果關係概念：
  例：溫室效應、經濟循環、生態系統
  → 因果關係圖（Causal Loop）
  → HTML：有向圖（DAG）

比較/對比概念：
  例：動植物細胞比較、民主 vs 威權、文言 vs 白話
  → 比較矩陣 / 韋恩圖
  → HTML：交互式韋恩圖

層次/分類概念：
  例：生物分類、詞性分類、地理行政區
  → 樹狀圖（Tree Diagram）
  → HTML：可展開/收合的樹狀結構

時間/歷史概念：
  例：台灣歷史年表、地質年代、文學發展史
  → 互動時間軸
  → HTML：可點擊的 Timeline

關係網絡概念：
  例：文章人物關係、食物鏈、政治派系
  → 關係網絡圖（Network）
  → HTML：節點連線圖（可拖拉）

Step 3：HTML 視覺化生成

根據概念類型，生成完整 HTML Artifact：

技術規格

<!-- 標準視覺化 HTML 模板 -->
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[概念名稱] 視覺化</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700;900&display=swap" rel="stylesheet">
  <style>
    /* Neon Circuit 設計系統相容樣式 */
    :root {
      --neon-circuit-bg: #0D1117;
      --neon-circuit-primary: #00D4FF;
      --neon-circuit-secondary: #7B2FFF;
      --neon-circuit-accent: #FF6B35;
      --neon-circuit-text: #E6EDF3;
      --neon-circuit-success: #00FF88;
      /* 向下相容別名 */
      --bg: var(--neon-circuit-bg);
      --primary: var(--neon-circuit-primary);
      --secondary: var(--neon-circuit-secondary);
      --accent: var(--neon-circuit-accent);
      --text: var(--neon-circuit-text);
      --success: var(--neon-circuit-success);
    }
    body { background: var(--bg); color: var(--text); font-family: 'Noto Sans TC', sans-serif; }
    /* 懸停效果、點擊反饋、動畫 */
  </style>
</head>
<body>
  <!-- 互動圖形區域 -->
  <!-- 說明文字區域 -->
  <!-- 使用提示 -->
  <script>
    // 互動邏輯：懸停顯示說明、點擊展開細節
  </script>
</body>
</html>

視覺化生成後的說明文字格式

## [概念名稱] 視覺化說明

### 圖形解讀指南
1. 用滑鼠懸停在 [元素] 上，可以看到詳細說明
2. 點擊 [節點/箭頭] 可以展開/收合子概念
3. 圖形中的顏色代表：[藍色 = ..., 紫色 = ..., 橘色 = ...]

### 核心關係說明
（3-5 句話解釋圖形中最重要的連結）

### 常見誤解提醒
（學生最容易搞混的地方）

Step 4：理解驗收問答（5 題固定流程）

視覺化生成後，強制進行 5 題驗收問答：

視覺化完成！現在讓我來考考你，確認你真的看懂了：

第 1 題（記憶層次）：
「在剛才的圖裡，[X] 和 [Y] 的關係是什麼？
 直接看圖回答就好。」

第 2 題（理解層次）：
「圖中顯示 [A] 會導致 [B]，
 你能用自己的話解釋這是為什麼嗎？」

第 3 題（應用層次）：
「如果 [條件改變]，圖中哪個部分會跟著改變？」

第 4 題（分析層次）：
「圖中有沒有什麼是你覺得奇怪或不理解的地方？」

第 5 題（創造層次）：
「你能想到一個現實生活中的例子，
 符合這個圖所表達的概念嗎？」

---
每題作答後，AI 依蘇格拉底模式引導，不直接評分，
而是繼續追問直到學生建立完整理解。

Step 5：圖形類型範例庫

範例：光合作用流程圖（自然科）

互動元素：
- 點擊「太陽」→ 展開光能說明
- 點擊「葉綠體」→ 顯示細胞結構
- 懸停「CO₂」→ 顯示來源說明
- 懸停「O₂」→ 顯示去向說明
- 進度條顯示反應步驟

範例：韋恩圖（文言文 vs 白話文）

互動元素：
- 左圓 = 文言文特徵（點擊顯示例句）
- 右圓 = 白話文特徵（點擊顯示例句）
- 交集 = 共同特徵（懸停顯示說明）

範例：台灣歷史互動時間軸

互動元素：
- 可拖拉縮放的時間軸
- 點擊事件節點 → 彈出卡片（事件說明、重要性、影響）
- 顏色區分朝代/政權
- 側邊欄顯示當前視窗的時代背景

Step 6：搭配建議

💡 最佳搭配：
tw-stu-concept-viz + tw-stu-socratic

使用流程：
1. 用 tw-stu-concept-viz 建立視覺化理解
2. 用 tw-stu-socratic 進行深度問答追蹤
   → 一個給「圖像記憶」，一個給「邏輯理解」

降級方案（無 HTML 支援時）

• 輸出 Mermaid 語法（可在 Obsidian/Notion 中渲染）
• 輸出 ASCII 圖形
• 提供 draw.io / Excalidraw XML 格式