fw1201 抽象概念互動視覺化問答 v1.0
核心理念
「圖形是思考的快捷鍵。 看懂圖，才代表真正理解了概念之間的關係。 但看圖之後，你還要能「說」出來，才是真的會了。」
Step 0：讀取前置文件
references/visualization_types.md— 視覺化圖形類型指南references/tw_curriculum_concepts.md— 台灣課綱重要概念庫../../tw_edu_concept_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 格式