feat: 簡化場景4，將10個Bug縮減為6個明顯易測的核心問題

- 保留最明顯的計算錯誤（加法vs乘法）
- 保留功能性問題（清空按鈕、優惠券、結帳後清空）
- 移除複雜的UI互動和驗證邏輯
- 提供清楚的測試指南和修復驗證方法
- 大幅降低教學複雜度，提升學習效果

Author: yulin0629

04-debugging-assistant/LESSON_GUIDE.md

@@ -18,149 +18,94 @@
 ├── README.md (本檔案)
 ├── index.html (購物車介面)
 ├── style.css (樣式檔案) 
-├── script.js (含有 10 個 Bug 的 JavaScript)
+├── script.js (含有 6 個明顯 Bug 的 JavaScript)
 └── package.json (專案配置)
 ```
 
 ##  已知問題清單
-此應用包含以下 10 個刻意設計的 Bug：
-1. 總金額計算錯誤（數學運算錯誤）
-2. 商品重複添加時數量更新邏輯不完整
-3. 運費計算邏輯有問題
-4. 清空購物車按鈕沒反應（函數名稱錯誤）
-5. 優惠券折扣計算異常
-6. 免運費功能沒有實現
-7. 套用優惠券後沒有重新計算
-8. 結帳後沒有清空購物車
-9. 數量修改時價格不會重新計算
-10. 移除商品時沒有確認或動畫效果
+此應用包含以下 6 個明顯的 Bug（簡化版，便於教學）：
 
-##  Demo 劇本
+### 🔴 **核心計算錯誤**
+1. **總金額計算錯誤**：使用加法而不是乘法（第72行）
+2. **運費邏輯被覆蓋**：永遠是150元運費（第83行）
 
-###  **重點：快速修復與自主解決**
-這個場景展示 Edit 的快速修復能力和 Agent 的自主問題解決。
+### 🟡 **功能不完整**  
+3. **清空購物車按鈕沒反應**：函數名稱錯誤
+4. **優惠券功能不完整**：FREESHIP 沒有實際作用
+5. **結帳後不會清空購物車**：註解掉的程式碼
 
-### 階段 1：快速診斷 (2分鐘)
+### 🟠 **輸入驗證問題**
+6. **數量輸入沒有驗證**：空值會導致 NaN 錯誤
 
-#### 步驟 1：快速掃描問題 (Ask)
- **Context 準備**：無需加入特定檔案到 context，Ask 模式會使用 @workspace 掃描整個專案
-
-```
-@workspace 這個購物車應用有哪些嚴重的 Bug？給我前 3 個最影響使用者體驗的問題。
-```
- **使用模式：Ask**
+##  簡化 Demo 劇本
 
+### **教學重點：讓學員輕鬆發現和測試 Bug**
 
-### 階段 2：基礎修復 (5分鐘)
+### 階段 1：體驗 Bug（3分鐘）
 
-#### 步驟 2：Edit 快速修復明顯錯誤 (Edit)
- **Context 準備**：開啟 `script.js` 並點擊檔案標籤上的 **+** 加入 context
+#### 步驟 1：開啟應用並測試
+1. 用瀏覽器開啟 `index.html`
+2. **測試場景**：
+   - 加入1台筆電（25000元）
+   - 觀察總金額是否正確？ ❌ **Bug 1**：顯示 $25,001（應該是 $25,000）
+   - 點擊「清空購物車」按鈕 ❌ **Bug 3**：沒反應
+   - 輸入優惠券 `FREESHIP` ❌ **Bug 4**：運費還是150元
+   - 結帳後再加商品 ❌ **Bug 5**：之前的商品還在
 
+#### 步驟 2：Ask 模式快速診斷
 ```
-修復這些明顯的錯誤：
-1. 將 clearShoppingCart 改為 clearCart
-2. 將第 72 行的 + 改為 *（總金額計算）
-3. 刪除第 83 行（運費永遠是 150 的問題）
+@workspace 我測試這個購物車發現幾個問題：總金額計算錯誤、清空按鈕沒用、免運費無效。請幫我分析 script.js 中的問題。
 ```
- **使用模式：Edit**
+**使用模式：Ask**
 
+### 階段 2：Agent 修復（5分鐘）
 
-#### 步驟 3：Edit 修復 UI 互動問題 (Edit)
- **Context 準備**：確保 `script.js` 在 context 中
-
-```
-修復以下 UI 互動問題：
-1. 移除第 145 行多餘的 event.preventDefault()
-2. 修正第 158 行的數量輸入框事件監聽器
-3. 修復第 167 行的移除按鈕事件綁定
+#### 步驟 3：Agent 一次性修復核心問題
 ```
- **使用模式：Edit**
+請修復這個購物車的 6 個 Bug：
+1. 總金額計算錯誤（第72行加法改乘法）
+2. 運費永遠150元（第83行）
+3. 清空按鈕沒反應（函數名稱錯誤）
+4. FREESHIP 優惠券沒有實際作用
+5. 結帳後不會清空購物車
+6. 數量輸入驗證問題
 
-
-### 階段 3：核心修復 (8分鐘)
-
-#### 步驟 4：Agent 修復計算邏輯 (Agent)
- **Context 準備**：保持 `script.js` 在 context 中（Agent 會自動分析需要的檔案）
-
-```
-請修復購物車的所有計算相關問題，包括總金額、運費、優惠券折扣的完整邏輯，並實現免運費功能。
+請一次修復完成，讓所有功能正常運作。
 ```
- **使用模式：Agent**
- **開啟新對話**
+**使用模式：Agent**
 
+#### 步驟 4：測試修復結果
+1. 重新整理頁面測試：
+   - ✅ 加入1台筆電：總金額正確顯示 $25,150
+   - ✅ 清空購物車按鈕：可以正常清空
+   - ✅ 輸入 `FREESHIP`：運費變成 $0
+   - ✅ 結帳後：購物車自動清空
 
-#### 步驟 5：Ask 深入分析系統問題 (Ask)
- **Context 準備**：無需額外準備，使用 @workspace 進行深入分析
+### 階段 3：延伸功能（2分鐘）
 
+#### 步驟 5：Ask 模式獲取改進建議
 ```
-@workspace 分析這個購物車系統還有哪些缺失的核心功能和邏輯問題？
+@workspace 現在購物車基本功能都正常了，還可以加入哪些提升使用者體驗的功能？
 ```
- **使用模式：Ask**
+**使用模式：Ask**
 
+### **快速測試指南**
 
-#### 步驟 6：Agent 實現缺失功能 (Agent)
- **Context 準備**：
-- 保持 `script.js` 在 context 中
-- 加入 `index.html` 了解 HTML 結構（點擊檔案標籤上的 **+**）
+#### 🧪 **Bug 測試方法**：
+1. **總金額錯誤**：加入任何商品，金額會多1
+2. **運費問題**：任何金額都是150元運費
+3. **清空按鈕**：點擊沒反應（Console 會有錯誤）
+4. **免運費券**：輸入 FREESHIP 運費不會變0
+5. **結帳問題**：結帳後商品還在購物車
+6. **輸入驗證**：數量框留空再按新增會有問題
 
-```
-請實現這些缺失的功能：
-1. 結帳後自動清空購物車
-2. 數量輸入框變更時自動更新購物車
-3. 移除商品時加入確認提示
-```
- **使用模式：Agent**
-
-
-### 階段 4：進階優化 (5分鈘)
-
-#### 步驟 7：Agent 完善使用者體驗 (Agent)
- **Context 準備**：將 `script.js` 和 `index.html` 都加入 context
-
-```
-請改善購物車的使用者體驗，包括：
-1. 為所有操作加入適當的成功/錯誤提示訊息
-2. 加入載入狀態顯示
-3. 改善表單驗證和錯誤處理
-4. 為購物車商品加入簡單的動畫效果
-```
- **使用模式：Agent**
- **開啟新對話**
-
-
-#### 步驟 8：Edit 細節調整 (Edit)
- **Context 準備**：保持 `script.js` 在 context 中
-
-```
-請進行最後的細節調整：
-1. 在購物車為空時顯示提示文字
-2. 調整優惠券輸入框的 placeholder 文字
-3. 修正結帳按鈕的文字為「立即結帳」
-```
- **使用模式：Edit**
-
-
-### 階段 5：延伸應用 (2分鐘)
-
-#### 步驟 9：產生測試案例文件 (Agent)
- **Context 準備**：將 `script.js` 和 `index.html` 都加入 context（點擊檔案標籤上的 **+**）
-
-```
-請為這個購物車應用產生完整的測試案例文件，包括正常流程和異常情況的測試項目。
-```
- **使用模式：Agent**
-
-
-#### 步驟 10：Agent 產生修復報告 (Agent)
- **Context 準備**：保持所有相關檔案在 context 中
-
-```
-請產生一份詳細的修復報告，包括：
-1. 修復的問題清單和解決方案
-2. 系統改進建議
-3. 未來維護注意事項
-```
- **使用模式：Agent**
+#### ✅ **修復驗證方法**：
+1. **總金額正確**：25000元商品顯示25000元
+2. **運費邏輯**：<10000收200、10000-30000收100、>30000免運
+3. **清空按鈕**：點擊能清空購物車
+4. **免運費券**：FREESHIP 讓運費變0
+5. **結帳清空**：結帳後購物車自動清空
+6. **輸入安全**：空值不會造成錯誤
 
 
 ##  重點技巧

04-debugging-assistant/script.js

@@ -1,10 +1,10 @@
-// 購物車計算器 - 含有多個 Bug 的版本
-// 讓 GitHub Copilot Agent 來幫你找出並修復這些問題！
+// 購物車計算器 - 含有6個明顯Bug的簡化版本
+// 讓 GitHub Copilot 幫你找出並修復這些問題！
 
 let cart = [];
 let discount = 0;
 
-// Bug 1: 函數名稱拼寫錯誤，但 HTML 中呼叫的是正確的名稱
+// ✅ 正常：新增商品到購物車
 function addToCart(productId, price) {
     const qtyInput = document.getElementById(productId + '-qty');
     const quantity = parseInt(qtyInput.value);
@@ -14,10 +14,9 @@ function addToCart(productId, price) {
         return;
     }
 
-    // Bug 2: 沒有正確處理商品重複添加的數量更新
+    // 處理重複商品
     const existingItem = cart.find(item => item.id === productId);
     if (existingItem) {
-        // Bug: 應該要更新價格或其他邏輯
         existingItem.quantity += quantity;
     } else {
         cart.push({
@@ -67,23 +66,23 @@ function updateCartDisplay() {
 }
 
 function updatePricing() {
-    // Bug 3: subtotal 計算錯誤 - 使用加法而不是乘法
+    // 🐛 Bug 1: 金額計算錯誤 - 使用加法而不是乘法
     let subtotal = 0;
     cart.forEach(item => {
-        subtotal += item.price + item.quantity; // 錯誤：應該是 *
+        subtotal += item.price + item.quantity; // ❌ 錯誤：應該是 *
     });
 
-    // Bug 4: 運費計算邏輯錯誤
+    // 🐛 Bug 2: 運費邏輯被覆蓋
     let shipping = 0;
     if (subtotal < 10000) {
         shipping = 200; // 基本運費
     } else if (subtotal < 30000) {
         shipping = 100; // 中等運費
     }
-    // 超過 30000 免運費，但這個邏輯被下面的代碼覆蓋了
-    shipping = 150; // Bug: 永遠是 150
+    // 超過 30000 免運費，但被下面的代碼覆蓋了
+    shipping = 150; // ❌ Bug: 永遠是 150
 
-    // Bug 5: 優惠券折扣在某些情況下計算異常
+    // ✅ 正常：優惠券折扣計算
     const discountAmount = subtotal * (discount / 100);
     const total = subtotal + shipping - discountAmount;
 
@@ -94,23 +93,23 @@ function updatePricing() {
     document.getElementById('total').textContent = `$${total.toLocaleString()}`;
 }
 
+// ✅ 正常：移除商品
 function removeFromCart(index) {
-    // Bug 10: 移除商品時沒有確認或動畫效果
     cart.splice(index, 1);
     updateCartDisplay();
 }
 
-// Bug 6: 清空購物車函數名稱錯誤
-function clearShoppingCart() {  // HTML 中呼叫的是 clearCart()
+// 🐛 Bug 3: 函數名稱錯誤
+function clearShoppingCart() {  // ❌ HTML 中呼叫的是 clearCart()
     cart = [];
     discount = 0;
     updateCartDisplay();
 }
 
+// 🐛 Bug 4: 優惠券功能不完整
 function applyCoupon() {
     const couponCode = document.getElementById('coupon-code').value.toUpperCase();
 
-    // Bug 7: 優惠券邏輯有問題
     switch (couponCode) {
         case 'SAVE10':
             discount = 10;
@@ -121,7 +120,7 @@ function applyCoupon() {
             alert('已套用 20% 折扣！');
             break;
         case 'FREESHIP':
-            // Bug: 免運費功能沒有實現
+            // ❌ Bug: 免運費功能沒有實現，只顯示訊息
             alert('已套用免運費！');
             break;
         default:
@@ -130,10 +129,10 @@ function applyCoupon() {
     }
 
     document.getElementById('coupon-code').value = '';
-    // Bug 7: 沒有正確更新優惠券狀態
-    updatePricing();
+    updatePricing(); // ✅ 正常：會更新價格
 }
 
+// 🐛 Bug 5: 結帳後不會清空購物車
 function checkout() {
     if (cart.length === 0) {
         alert('購物車是空的！');
@@ -143,9 +142,14 @@ function checkout() {
     const total = document.getElementById('total').textContent;
     alert(`結帳成功！總金額：${total}`);
 
-    // Bug 8: 結帳後沒有清空購物車
+    // ❌ Bug: 結帳後沒有清空購物車
     // clearCart();
 }
 
-// Bug 9: 當使用者修改商品數量時，沒有自動更新購物車
-// 應該要監聽 input 事件並重新計算
+// 🐛 Bug 6: 點擊新增按鈕時，如果輸入框是空的會出錯
+function validateAndAdd(productId, price) {
+    const qtyInput = document.getElementById(productId + '-qty');
+    const quantity = qtyInput.value; // ❌ Bug: 沒有檢查 NaN
+    
+    addToCart(productId, price);
+}