exercise json

backend/exercises/check_exercises.py

@@ -0,0 +1,66 @@
+import json
+import os
+from typing import Dict, Set
+
+def load_knowledge_graphs() -> Dict[str, Set[str]]:
+    """加載所有知識圖譜的節點 ID"""
+    graphs = {}
+    
+    # Python 基礎
+    from backend.knowledge_graphs.python_basics import knowledge_graph as python_basics
+    graphs['python_basics'] = set(python_basics['nodes'].keys())
+    
+    # 資料結構
+    from backend.knowledge_graphs.data_structures import knowledge_graph as data_structures
+    graphs['data_structures'] = set(data_structures['nodes'].keys())
+    
+    # 保險詐騙防範
+    from backend.knowledge_graphs.fraud_prevention import knowledge_graph as fraud_prevention
+    graphs['fraud_prevention'] = set(fraud_prevention['nodes'].keys())
+    
+    return graphs
+
+def check_exercises():
+    """檢查每個節點是否都有練習題"""
+    # 加載知識圖譜
+    graphs = load_knowledge_graphs()
+    
+    # 加載練習題
+    current_dir = os.path.dirname(os.path.abspath(__file__))
+    json_path = os.path.join(current_dir, 'exercise_bank.json')
+    
+    with open(json_path, 'r', encoding='utf-8') as f:
+        exercise_data = json.load(f)
+    
+    # 收集所有練習題覆蓋的節點
+    covered_nodes = {graph_id: set() for graph_id in graphs.keys()}
+    
+    # 檢查每個練習題
+    for topic, categories in exercise_data.items():
+        for category, exercises in categories.items():
+            for exercise in exercises:
+                for node_id in exercise['node_ids']:
+                    if topic in covered_nodes:
+                        covered_nodes[topic].add(node_id)
+    
+    # 檢查結果
+    missing_nodes = {}
+    for graph_id, nodes in graphs.items():
+        missing = nodes - covered_nodes[graph_id]
+        if missing:
+            missing_nodes[graph_id] = missing
+    
+    # 輸出結果
+    if missing_nodes:
+        print("以下節點缺少練習題：")
+        for graph_id, nodes in missing_nodes.items():
+            print(f"\n{graph_id}:")
+            for node_id in nodes:
+                print(f"  - Node {node_id}")
+        return False
+    else:
+        print("所有節點都有對應的練習題！")
+        return True
+
+if __name__ == "__main__":
+    check_exercises() 

backend/exercises/exercise_bank.json

@@ -0,0 +1,310 @@
+{
+  "python_basics": {
+    "variables": [
+      {
+        "id": "py_var_1",
+        "type": "multiple_choice",
+        "question": "在 Python 中，哪個是正確的變數命名方式？",
+        "options": [
+          "1_variable",
+          "my-variable",
+          "my_variable",
+          "@variable"
+        ],
+        "answer": "2",
+        "hints": [
+          "變數名稱不能以數字開頭",
+          "Python 變數命名通常使用蛇形命名法(snake_case)",
+          "變數名稱只能包含字母、數字和底線"
+        ],
+        "node_ids": ["2"],
+        "explanation": "Python 變數命名規則：必須以字母或底線開頭，只能包含字母、數字和底線，通常使用蛇形命名法。"
+      }
+    ],
+    "data_types": [
+      {
+        "id": "py_type_1",
+        "type": "fill_in_blank",
+        "question": "請填寫適當的 Python 資料型別：\n x = _____(3.14)",
+        "answer": "float",
+        "hints": [
+          "這是一個帶小數點的數字",
+          "Python 中用於表示小數的資料型別",
+          "與 int 相對的浮點數型別"
+        ],
+        "node_ids": ["2"],
+        "explanation": "float() 用於創建或轉換浮點數，3.14 是一個浮點數值。"
+      }
+    ],
+    "control_flow": [
+      {
+        "id": "py_loop_1",
+        "type": "multiple_choice",
+        "question": "以下哪個迴圈會執行 5 次？",
+        "options": [
+          "for i in range(5, 1)",
+          "for i in range(1, 5)",
+          "for i in range(5)",
+          "for i in range(1, 6)"
+        ],
+        "answer": "2",
+        "hints": [
+          "range() 函數的起始值預設為 0",
+          "range(n) 會生成 0 到 n-1 的序列",
+          "數一數會執行幾次"
+        ],
+        "node_ids": ["3"],
+        "explanation": "range(5) 會生成序列 [0,1,2,3,4]，正好執行 5 次。"
+      }
+    ],
+    "functions": []
+  },
+  "fraud_prevention": {
+    "basic_concepts": [
+      {
+        "id": "fraud_basic_1",
+        "type": "multiple_choice",
+        "question": "下列何者不是保險詐騙的常見手法？",
+        "options": [
+          "虛報醫療費用",
+          "故意製造意外事故",
+          "在投保前如實告知健康狀況",
+          "重複投保多家保險公司"
+        ],
+        "answer": "2",
+        "hints": [
+          "思考哪個選項是合法且正當的行為",
+          "誠實告知是投保人的義務",
+          "其他選項都是詐騙手法"
+        ],
+        "node_ids": ["1"],
+        "explanation": "在投保前如實告知健康狀況是投保人的法定義務，而非詐騙手法。其他選項都是常見的保險詐騙方式。"
+      },
+      {
+        "id": "fraud_basic_4",
+        "type": "multiple_choice",
+        "question": "保險詐騙對社會造成的影響不包括？",
+        "options": [
+          "增加保險公司營運成本",
+          "提高誠實投保人的保費負擔",
+          "降低保險理賠效率",
+          "增加保險商品種類"
+        ],
+        "answer": "3",
+        "hints": [
+          "思考詐騙的負面影響",
+          "哪個選項是正面的",
+          "其他選項都是負面影響"
+        ],
+        "node_ids": ["1"],
+        "explanation": "保險詐騙會增加營運成本、提高保費、降低效率，但不會增加商品種類。反而可能因為詐騙風險而減少商品種類。"
+      },
+      {
+        "id": "fraud_basic_5",
+        "type": "fill_in_blank",
+        "question": "保險詐騙的主要動機是_____，這導致部分人鋌而走險。",
+        "answer": "不當得利",
+        "hints": [
+          "考慮詐騙者的目的",
+          "違法獲取金錢利益",
+          "四個字的詞語"
+        ],
+        "node_ids": ["1"],
+        "explanation": "不當得利是保險詐騙的主要動機，詐騙者試圖透過非法手段獲取不應得的保險金。"
+      }
+    ],
+    "detection": [
+      {
+        "id": "fraud_detect_1",
+        "type": "multiple_choice",
+        "question": "下列哪個不是保險詐騙的警示指標？",
+        "options": [
+          "短期內多次理賠",
+          "理賠金額異常高",
+          "定期繳納保費",
+          "事故發生情況不明確"
+        ],
+        "answer": "2",
+        "hints": [
+          "區分正常與異常行為",
+          "正常的保險行為",
+          "其他選項都有可疑之處"
+        ],
+        "node_ids": ["2"],
+        "explanation": "定期繳納保費是正常的保險行為，而其他選項都是可能的詐騙警示指標。"
+      },
+      {
+        "id": "fraud_detect_3",
+        "type": "multiple_choice",
+        "question": "下列哪項不是有效的詐騙偵測方法？",
+        "options": [
+          "大數據分析",
+          "人工智慧模型",
+          "完全信任客戶",
+          "交叉比對資料"
+        ],
+        "answer": "2",
+        "hints": [
+          "考慮專業的偵測方法",
+          "哪個選項缺乏專業判斷",
+          "需要保持適度懷疑"
+        ],
+        "node_ids": ["2"],
+        "explanation": "完全信任客戶而不進行專業判斷是不恰當的，應該運用各種科技工具和專業方法進行偵測。"
+      },
+      {
+        "id": "fraud_detect_4",
+        "type": "fill_in_blank",
+        "question": "保險公司應建立_____系統，以即時發現異常的理賠申請。",
+        "answer": "風險評估",
+        "hints": [
+          "這是一個評價風險的系統",
+          "用於判斷案件的風險程度",
+          "四個字的專業詞彙"
+        ],
+        "node_ids": ["2"],
+        "explanation": "風險評估系統能幫助保險公司及早發現高風險的理賠申請，是重要的詐騙偵測工具。"
+      }
+    ],
+    "prevention": [
+      {
+        "id": "fraud_prevent_4",
+        "type": "multiple_choice",
+        "question": "以下哪項不是有效的防範措施？",
+        "options": [
+          "加強員工培訓",
+          "簡化理賠流程",
+          "建立資料庫",
+          "跨部門合作"
+        ],
+        "answer": "1",
+        "hints": [
+          "考慮哪個選項可能增加風險",
+          "流程簡化可能降低控管",
+          "其他選項都有助於防範"
+        ],
+        "node_ids": ["3"],
+        "explanation": "過度簡化理賠流程可能降低控管效果，增加詐騙風險。其他選項都是有效的防範措施。"
+      },
+      {
+        "id": "fraud_prevent_5",
+        "type": "fill_in_blank",
+        "question": "保險公司應定期進行_____，以提升防範措施的有效性。",
+        "answer": "成效評估",
+        "hints": [
+          "這是一個檢視措施效果的過程",
+          "用於評價防範措施的結果",
+          "四個字的專業詞彙"
+        ],
+        "node_ids": ["3"],
+        "explanation": "定期進行成效評估可以了解防範措施的實際效果，並適時調整改進。"
+      }
+    ],
+    "reporting_channels": [
+      {
+        "id": "fraud_report_1",
+        "type": "multiple_choice",
+        "question": "下列何者不是正確的保險詐騙通報管道？",
+        "options": [
+          "保險局檢舉專線",
+          "保險公司客服中心",
+          "社群媒體留言板",
+          "金融監督管理委員會"
+        ],
+        "answer": "2",
+        "hints": [
+          "考慮哪個管道是官方或正式的",
+          "社群媒體不是正式通報管道",
+          "應該透過正式管道通報"
+        ],
+        "node_ids": ["4"],
+        "explanation": "社群媒體留言板不是正式的通報管道，應該透過保險局檢舉專線、保險公司客服中心或金融監督管理委員會等正式管道進行通報。"
+      },
+      {
+        "id": "fraud_report_2",
+        "type": "fill_in_blank",
+        "question": "保險詐騙通報時，應提供_____等具體事證，以利後續調查。",
+        "answer": "時間地點",
+        "hints": [
+          "這些資訊是調查的基本要素",
+          "包含事件發生的基本資訊",
+          "四個字的答案"
+        ],
+        "node_ids": ["4"],
+        "explanation": "提供時間地點等具體事證可以幫助調查人員更有效地進行調查工作。"
+      },
+      {
+        "id": "fraud_report_3",
+        "type": "multiple_choice",
+        "question": "關於保險詐騙通報，下列敘述何者正確？",
+        "options": [
+          "只能由保險公司員工通報",
+          "通報者身分必須公開",
+          "可以匿名通報",
+          "必須等待犯罪完成才能通報"
+        ],
+        "answer": "2",
+        "hints": [
+          "考慮通報者的權益保護",
+          "通報機制應該要便利且安全",
+          "不需要等待犯罪完成"
+        ],
+        "node_ids": ["4"],
+        "explanation": "為了保護通報者，可以採取匿名通報的方式，且任何人都可以進行通報，不限於保險公司員工。"
+      }
+    ],
+    "case_studies": [
+      {
+        "id": "fraud_case_1",
+        "type": "multiple_choice",
+        "question": "在「假車禍真理賠」的案例中，最常見的作案手法是？",
+        "options": [
+          "偽造醫療單據",
+          "故意製造小擦撞",
+          "虛報車損金額",
+          "以上皆是"
+        ],
+        "answer": "3",
+        "hints": [
+          "這類案件通常涉及多種手法",
+          "考慮完整的詐騙流程",
+          "各種手法常常同時使用"
+        ],
+        "node_ids": ["5"],
+        "explanation": "假車禍案件通常會同時使用多種手法，包括故意製造擦撞、虛報損失金額，以及偽造相關單據等。"
+      },
+      {
+        "id": "fraud_case_2",
+        "type": "fill_in_blank",
+        "question": "在醫療保險詐騙案例中，常見的手法是偽造_____以詐取保險金。",
+        "answer": "診斷證明",
+        "hints": [
+          "這是醫療院所開立的重要文件",
+          "用於證明病情的文件",
+          "四個字的醫療文件"
+        ],
+        "node_ids": ["5"],
+        "explanation": "診斷證明是醫療保險理賠的重要文件，不肖分子常透過偽造診斷證明來進行詐騙。"
+      },
+      {
+        "id": "fraud_case_3",
+        "type": "multiple_choice",
+        "question": "分析真實詐騙案例的主要目的是？",
+        "options": [
+          "增加專業知識",
+          "提升偵測能力",
+          "預防類似案件",
+          "以上皆是"
+        ],
+        "answer": "3",
+        "hints": [
+          "案例分析有多重目的",
+          "既要學習也要預防",
+          "知識和實務的結合"
+        ],
+        "node_ids": ["5"],
+        "explanation": "分析真實案例可以同時達到增加專業知識、提升偵測能力和預防類似案件發生的多重目的。"
+      }
+    ]
+  }
+} 

backend/exercises/exercise_service.py

@@ -0,0 +1,42 @@
+import json
+import os
+from backend.exercises.models import Exercise, ExerciseType
+
+def load_exercises():
+    """從 JSON 文件加載練習題"""
+    current_dir = os.path.dirname(os.path.abspath(__file__))
+    json_path = os.path.join(current_dir, 'exercise_bank.json')
+    
+    with open(json_path, 'r', encoding='utf-8') as f:
+        data = json.load(f)
+    
+    exercises = []
+    node_exercises = {}
+    
+    # 遍歷所有主題和子類別
+    for topic, categories in data.items():
+        for category, exercises_list in categories.items():
+            for exercise_data in exercises_list:
+                # 創建練習題實例
+                exercise = Exercise(
+                    id=exercise_data['id'],
+                    type=ExerciseType(exercise_data['type']),
+                    question=exercise_data['question'],
+                    answer=exercise_data['answer'],
+                    hints=exercise_data['hints'],
+                    node_ids=exercise_data['node_ids'],
+                    options=exercise_data.get('options'),
+                    explanation=exercise_data.get('explanation')
+                )
+                exercises.append(exercise)
+                
+                # 建立節點到練習題的映射
+                for node_id in exercise_data['node_ids']:
+                    if node_id not in node_exercises:
+                        node_exercises[node_id] = []
+                    node_exercises[node_id].append(exercise)
+    
+    return exercises, node_exercises
+
+# 載入練習題
+exercises, node_exercises = load_exercises() 

backend/exercises/models.py

@@ -0,0 +1,27 @@
+from enum import Enum
+from typing import List, Optional, Dict
+
+class ExerciseType(str, Enum):
+    MULTIPLE_CHOICE = "multiple_choice"
+    FILL_IN_BLANK = "fill_in_blank"
+
+class Exercise:
+    def __init__(
+        self,
+        id: str,
+        type: ExerciseType,
+        question: str,
+        answer: str,
+        hints: List[str],
+        node_ids: List[str],
+        options: Optional[List[str]] = None,
+        explanation: Optional[str] = None
+    ):
+        self.id = id
+        self.type = type
+        self.question = question
+        self.answer = answer
+        self.hints = hints
+        self.node_ids = node_ids  # 關聯的知識點 ID 列表
+        self.options = options    # 選擇題選項
+        self.explanation = explanation  # 解答說明 

backend/main.py

@@ -6,6 +6,8 @@ from typing import Dict
 from .knowledge_graphs import python_basics, data_structures, fraud_prevention
 import os
 from .services.openai_service import assistant_manager
+from .exercises.exercise_service import exercises, node_exercises
+from .exercises.models import Exercise
 
 app = FastAPI()
 
@@ -88,11 +90,49 @@ async def chat(thread_id: str, data: dict):
     if "message" not in data:
         raise HTTPException(status_code=400, detail="Message is required")
     
+    # 構建更詳細的上下文
     context = f"主題：{data.get('topic', '')}\n"
     context += f"當前節點：{data.get('node_title', '')}\n"
-    context += f"問題：{data.get('message')}"
+    
+    # 添加練習題相關資訊
+    if exercise_context := data.get('exercise_context'):
+        current_exercise = exercise_context['current_exercise']
+        context += f"\n當前練習題狀態：\n"
+        context += f"- 正在進行第 {current_exercise['current_index']}/{current_exercise['total_exercises']} 題\n"
+        context += f"- 題目：{current_exercise['question']}\n"
+        context += f"- 題型：{current_exercise['type']}\n"
+        
+        if current_exercise.get('last_answer') is not None:
+            context += f"- 上次提交答案：{current_exercise['last_answer']}\n"
+            context += f"- 答題結果：{'正確' if current_exercise.get('is_correct') else '錯誤'}\n"
+    
+    context += f"\n問題：{data.get('message')}"
     
     return StreamingResponse(
         assistant_manager.get_response_stream(thread_id, context),
         media_type="text/event-stream"
-    ) 
+    )
+
+@app.get("/api/exercises/{node_id}")
+def get_node_exercises(node_id: str):
+    """獲取特定節點的練習題"""
+    return {
+        "exercises": node_exercises.get(node_id, [])
+    }
+
+@app.post("/api/exercises/check/{exercise_id}")
+def check_exercise(exercise_id: str, data: dict):
+    """檢查答案"""
+    user_answer = data.get("answer")
+    if not user_answer:
+        raise HTTPException(status_code=400, detail="Answer is required")
+    
+    exercise = next((ex for ex in exercises if ex.id == exercise_id), None)
+    if not exercise:
+        raise HTTPException(status_code=404, detail="Exercise not found")
+    
+    is_correct = user_answer.lower() == exercise.answer.lower()
+    return {
+        "correct": is_correct,
+        "explanation": exercise.explanation if is_correct or data.get("show_explanation") else None
+    } 

src/App.jsx

@@ -24,6 +24,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import Exercise from './components/Exercise/Exercise';
 
 function App() {
   const [availableGraphs, setAvailableGraphs] = useState([])
@@ -46,6 +47,10 @@ function App() {
     content: true,      // 中間上方內容
     exercise: true      // 中間下方練習
   });
+  const [currentExerciseIndex, setCurrentExerciseIndex] = useState(0);
+  const [nodeExercises, setNodeExercises] = useState([]);
+  const [exerciseHistory, setExerciseHistory] = useState([]);
+  const [result, setResult] = useState(null);  // 添加 result 狀態
 
   const scrollToBottom = useCallback(() => {
     if (chatContainerRef.current) {
@@ -103,12 +108,21 @@ function App() {
 
   const handleNodeClick = async (nodeId) => {
     try {
-      const response = await axios.get(`/api/graph/${selectedGraphId}/node/${nodeId}`)
-      setSelectedNode(response.data)
+      const nodeResponse = await axios.get(`/api/graph/${selectedGraphId}/node/${nodeId}`);
+      setSelectedNode(nodeResponse.data);
+
+      const exercisesResponse = await axios.get(`/api/exercises/${nodeId}`);
+      const exercises = exercisesResponse.data.exercises;
+      
+      const shuffled = [...exercises].sort(() => 0.5 - Math.random());
+      setNodeExercises(shuffled);
+      setCurrentExerciseIndex(0);
+      setExerciseHistory([]);  // 重置練習題歷程
+      
     } catch (error) {
-      console.error('Error fetching node:', error)
+      console.error('Error fetching node or exercises:', error);
     }
-  }
+  };
 
   const handleSendMessage = async () => {
     if (!chatMessage.trim() || !threadId) return
@@ -125,33 +139,49 @@ function App() {
     setChatHistory(prev => [...prev, newChatItem])
     
     try {
+      // 構建更豐富的上下文
+      const context = {
+        message: newQuestion,
+        topic: selectedGraphId,
+        node_title: selectedNode?.title,
+        node_content: selectedNode?.content,
+        current_location: {
+          graph_title: availableGraphs.find(g => g.id === selectedGraphId)?.title || '',
+          node_title: selectedNode?.title || '未選擇節點',
+          has_exercises: nodeExercises.length > 0
+        },
+        exercise_context: nodeExercises.length > 0 ? {
+          current_exercise: {
+            question: nodeExercises[currentExerciseIndex].question,
+            type: nodeExercises[currentExerciseIndex].type,
+            answer: nodeExercises[currentExerciseIndex].answer,  // 總是提供正確答案
+            is_correct: result?.correct,
+            total_exercises: nodeExercises.length,
+            current_index: currentExerciseIndex + 1
+          },
+          exercise_history: exerciseHistory  // 添加練習題歷程
+        } : null
+      }
+
       const response = await fetch(`/api/chat/${threadId}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({
-          message: newQuestion,
-          topic: selectedGraphId,
-          node_title: selectedNode?.title
-        })
+        body: JSON.stringify(context)
       })
 
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
       const reader = response.body.getReader()
       const decoder = new TextDecoder()
       let responseText = ''
 
       while (true) {
         const { done, value } = await reader.read()
-        if (done) {
-          // 在完整回應結束後執行聚焦
-          setTimeout(() => {
-            if (inputRef.current) {
-              inputRef.current.querySelector('textarea').focus();
-            }
-          }, 100);
-          break;
-        }
+        if (done) break
         
         const chunk = decoder.decode(value)
         responseText += chunk
@@ -176,13 +206,19 @@ function App() {
         if (lastIndex >= 0) {
           newHistory[lastIndex] = {
             ...newHistory[lastIndex],
-            answer: 'Error: Failed to get response'
+            answer: '抱歉，我遇到了一些問題。請稍後再試。'
           }
         }
         return newHistory
       })
     } finally {
       setChatLoading(false)
+      // 在完整回應結束後執行聚焦
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.querySelector('textarea').focus()
+        }
+      }, 100)
     }
   }
 
@@ -200,6 +236,31 @@ function App() {
     return 12 - leftExpanded - rightExpanded;
   };
 
+  const handleExerciseSubmit = async (exerciseId, answer) => {
+    try {
+      const response = await axios.post(`/api/exercises/check/${exerciseId}`, {
+        answer: answer
+      });
+      
+      // 記錄練習題歷程
+      const exerciseRecord = {
+        exercise_id: exerciseId,
+        question: nodeExercises[currentExerciseIndex].question,
+        user_answer: answer,
+        correct_answer: nodeExercises[currentExerciseIndex].answer,
+        is_correct: response.data.correct,
+        timestamp: new Date().toISOString()
+      };
+      
+      setExerciseHistory(prev => [...prev, exerciseRecord]);
+      setResult(response.data);  // 設置結果
+      
+    } catch (error) {
+      console.error('Error checking answer:', error);
+      setResult(null);  // 發生錯誤時重置結果
+    }
+  };
+
   if (loading) return <div>Loading...</div>
   if (error) return <div>Error: {error}</div>
   if (!graphData) return <div>No data</div>
@@ -312,7 +373,7 @@ function App() {
         }}>
           {/* 中間上方：內容 */}
           <Box sx={{ 
-            height: expandedPanels.exercise ? '50%' : 'calc(100% - 48px)', // 當練習收合時延伸高度
+            height: expandedPanels.content ? (expandedPanels.exercise ? '50%' : '50%') : '48px',
             transition: 'all 0.3s ease',
             borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
             backgroundColor: '#fff'
@@ -407,7 +468,7 @@ function App() {
 
           {/* 中間下方：練習 */}
           <Box sx={{ 
-            height: expandedPanels.exercise ? '50%' : '48px',
+            height: expandedPanels.exercise ? (expandedPanels.content ? '50%' : 'calc(100% - 48px)') : '48px',
             transition: 'all 0.3s ease',
             backgroundColor: '#fff',
             display: 'flex',
@@ -437,7 +498,7 @@ function App() {
                 zIndex: 2
               }}>
                 <Typography variant="h6" sx={{ fontWeight: 600 }}>
-                  練習
+                  練習 {nodeExercises.length > 0 && `(${nodeExercises.length}題)`}
                 </Typography>
                 <IconButton 
                   onClick={() => togglePanel('exercise')} 
@@ -464,41 +525,19 @@ function App() {
                 visibility: expandedPanels.exercise ? 'visible' : 'hidden',
                 p: 2
               }}>
-                {selectedNode?.exercises ? (
-                  <Box>
-                    {selectedNode.exercises.map((exercise) => (
-                      <Box key={exercise.id} sx={{ mb: 3 }}>
-                        <Typography variant="body1" sx={{ 
-                          mb: 2,
-                          fontWeight: 500
-                        }}>
-                          {exercise.question}
-                        </Typography>
-                        {exercise.type === 'multiple_choice' && (
-                          <Box sx={{ pl: 2 }}>
-                            {exercise.options.map((option, index) => (
-                              <Box 
-                                key={index}
-                                sx={{ 
-                                  mb: 1,
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  gap: 1
-                                }}
-                              >
-                                <input
-                                  type="radio"
-                                  name={exercise.id}
-                                  value={index}
-                                />
-                                <Typography>{option}</Typography>
-                              </Box>
-                            ))}
-                          </Box>
-                        )}
-                      </Box>
-                    ))}
-                  </Box>
+                {nodeExercises.length > 0 ? (
+                  <Exercise 
+                    key={nodeExercises[currentExerciseIndex].id} 
+                    exercise={nodeExercises[currentExerciseIndex]}
+                    onNextExercise={
+                      currentExerciseIndex < nodeExercises.length - 1 
+                        ? () => {
+                            setCurrentExerciseIndex(prev => prev + 1);
+                          }
+                        : undefined
+                    }
+                    onSubmit={handleExerciseSubmit}
+                  />
                 ) : (
                   <Typography variant="body1" sx={{ color: 'text.secondary' }}>
                     請選擇一個節點查看相關練習

src/components/Exercise/Exercise.jsx

@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Typography,
+  Radio,
+  RadioGroup,
+  FormControlLabel,
+  TextField,
+  Button,
+  Alert,
+  Collapse,
+  Stack,
+  Paper,
+  Divider
+} from '@mui/material';
+import LightbulbIcon from '@mui/icons-material/Lightbulb';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import axios from 'axios';
+
+function Exercise({ exercise, onNextExercise }) {
+  const [selectedAnswer, setSelectedAnswer] = useState('');
+  const [showHints, setShowHints] = useState(false);
+  const [currentHintIndex, setCurrentHintIndex] = useState(0);
+  const [result, setResult] = useState(null);
+
+  const handleSubmit = async () => {
+    try {
+      const response = await axios.post(`/api/exercises/check/${exercise.id}`, {
+        answer: selectedAnswer
+      });
+      setResult(response.data);
+    } catch (error) {
+      console.error('Error checking answer:', error);
+    }
+  };
+
+  const handleNextExercise = () => {
+    setSelectedAnswer('');
+    setShowHints(false);
+    setCurrentHintIndex(0);
+    setResult(null);
+    onNextExercise();
+  };
+
+  const showNextHint = () => {
+    if (currentHintIndex < exercise.hints.length - 1) {
+      setCurrentHintIndex(prev => prev + 1);
+    }
+    setShowHints(true);
+  };
+
+  return (
+    <Box sx={{ 
+      mb: 4,
+      display: 'flex',
+      gap: 3,
+      minHeight: 200
+    }}>
+      {/* 左側：題目和作答區域 */}
+      <Paper sx={{ 
+        flex: 2,  // 佔據更多空間
+        p: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: '#f8f9fa'
+      }}>
+        <Typography variant="h6" sx={{ mb: 2, color: 'text.primary' }}>
+          題目
+        </Typography>
+        <Typography variant="body1" sx={{ 
+          mb: 3,
+          fontWeight: 500,
+          whiteSpace: 'pre-wrap'
+        }}>
+          {exercise.question}
+        </Typography>
+
+        {/* 作答區域整合到題目下方 */}
+        <Box sx={{ mb: 2 }}>
+          {exercise.type === 'multiple_choice' ? (
+            <RadioGroup
+              value={selectedAnswer}
+              onChange={(e) => setSelectedAnswer(e.target.value)}
+            >
+              {exercise.options.map((option, index) => (
+                <FormControlLabel
+                  key={index}
+                  value={index.toString()}
+                  control={<Radio />}
+                  label={`${String.fromCharCode(65 + index)}. ${option}`}  // 直接顯示完整選項
+                  sx={{ mb: 1 }}
+                />
+              ))}
+            </RadioGroup>
+          ) : (
+            <TextField
+              fullWidth
+              value={selectedAnswer}
+              onChange={(e) => setSelectedAnswer(e.target.value)}
+              placeholder="請輸入答案"
+              variant="outlined"
+              size="small"
+            />
+          )}
+        </Box>
+      </Paper>
+
+      {/* 右側：操作和反饋區域 */}
+      <Paper sx={{ 
+        flex: 1,  // 佔據較少空間
+        p: 2,
+        display: 'flex',
+        flexDirection: 'column'
+      }}>
+        <Typography variant="h6" sx={{ mb: 2, color: 'text.primary' }}>
+          操作區
+        </Typography>
+        
+        {/* 按鈕組 */}
+        <Stack spacing={2} sx={{ mb: 2 }}>
+          <Button
+            variant="contained"
+            onClick={handleSubmit}
+            disabled={!selectedAnswer}
+            fullWidth
+          >
+            提交答案
+          </Button>
+          <Button
+            variant="outlined"
+            startIcon={<LightbulbIcon />}
+            onClick={showNextHint}
+            disabled={showHints && currentHintIndex >= exercise.hints.length - 1}
+            fullWidth
+          >
+            {showHints ? '下一個提示' : '顯示提示'}
+          </Button>
+          {onNextExercise && (
+            <Button
+              variant="contained"
+              color="success"
+              endIcon={<NavigateNextIcon />}
+              onClick={handleNextExercise}
+              disabled={!result?.correct}
+              fullWidth
+            >
+              下一題
+            </Button>
+          )}
+        </Stack>
+
+        {/* 提示和結果區域 */}
+        <Box sx={{ mt: 'auto' }}>
+          <Collapse in={showHints}>
+            <Box sx={{ mb: 2 }}>
+              {exercise.hints.slice(0, currentHintIndex + 1).map((hint, index) => (
+                <Alert key={index} severity="info" sx={{ mb: 1 }}>
+                  提示 {index + 1}: {hint}
+                </Alert>
+              ))}
+            </Box>
+          </Collapse>
+
+          {result && (
+            <Alert 
+              severity={result.correct ? "success" : "error"}
+              sx={{
+                '& .MuiAlert-message': { width: '100%' }
+              }}
+            >
+              <Box sx={{ 
+                display: 'flex', 
+                flexDirection: 'column',
+                gap: 1
+              }}>
+                <Typography>
+                  {result.correct ? '答對了！' : '再試一次！'}
+                </Typography>
+                {result.explanation && (
+                  <Typography 
+                    sx={{ 
+                      mt: 1,
+                      p: 1,
+                      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                      borderRadius: 1
+                    }}
+                  >
+                    解釋：{result.explanation}
+                  </Typography>
+                )}
+              </Box>
+            </Alert>
+          )}
+        </Box>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Exercise;