挑戰地圖（道館系統）#

頁面位置#

  • 挑戰地圖：/journeys/{課程ID}/gyms
  • 道館詳情：/gyms/{道館ID}

功能說明#

挑戰地圖是平台的核心功能之一，透過「道館挑戰」的遊戲化設計，讓學員在學完課程影片後，透過實戰題目驗證學習成果。

整體概念#

什麼是道館？#

道館（Gym）是一個包含多道挑戰題目的關卡，類似遊戲中的「Boss 關卡」。每個道館專注於特定的技術主題，學員必須通過所有挑戰才能完成該道館。

道館分類#

白段道館（入門級）：

  • 適合初學者
  • 難度較低
  • 通常是課程前期的內容

黑段道館（進階級）：

  • 適合進階學員
  • 難度較高
  • 需要完成更多前置條件

難度星級#

每個道館都有難度標記：

  • ★ - BEGINNER（初學者）
  • ★★ - INTERMEDIATE（中級）
  • ★★★ - ADVANCED（高級）

挑戰地圖頁面#

頁面結構#

頂部統計區：

  • 課程名稱
  • 已完成道館數 / 總道館數
  • 累積經驗值（XP）
  • 剩餘天數（如果有課程期限）

主線/支線切換：

  • 主線道館：必修，按順序解鎖
  • 支線道館：選修，額外挑戰

道館列表： 每個道館顯示：

  • 編號（第 1、2、3… 個道館）
  • 道館名稱
  • 難度星級
  • 鎖定狀態圖示
  • 完成狀態（綠色打勾）

道館狀態#

道館會有三種狀態：

  1. 🔒 鎖定（灰色）

    • 前置條件未完成
    • 無法點擊進入
    • 顯示鎖頭圖示

  2. 🟢 已解鎖（可挑戰）

    • 前置條件已滿足
    • 可以點擊進入挑戰
    • 顯示編號

  3. ✅ 已完成（綠色）

    • 所有挑戰都通過
    • 顯示打勾圖示
    • 可重新進入查看

解鎖邏輯（重點）#

前置條件系統#

每個道館都可以設定多個前置條件，只有所有前置條件都滿足時，道館才會解鎖。

前置條件類型：

  1. 完成特定影片（Mission）

    • 要求學員完成指定的課程影片
    • 可以設定兩種嚴格度：
      • 必須領取獎勵：不只要看完影片，還要領取經驗值
      • 只需完成觀看：看完即可，不一定要領獎勵

  2. 完成其他道館

    • 某些進階道館需要先完成前面的道館
    • 確保學習順序正確

實際範例說明#

讓我們用一個完整的例子來說明解鎖流程：

範例：小美的學習旅程#

背景： 小美購買了「軟體設計模式精通之旅」課程，想要挑戰道館。

課程結構：

  • 影片任務 1：觀察者模式入門（獎勵 50 XP）
  • 影片任務 2：觀察者模式實戰（獎勵 100 XP）
  • 白段道館 #1：觀察者模式挑戰（需要完成任務 1 和 2 並領取獎勵）

第一天：觀看第一支影片#

小美的操作：

  1. 進入學習旅程頁面
  2. 點開「觀察者模式入門」影片
  3. 觀看到 25 分鐘（影片總長 30 分鐘，達到 83% 進度）
  4. 點擊「領取獎勵」按鈕，獲得 50 XP
  5. 經驗值從 0 增加到 50

道館狀態：

  • 進入挑戰地圖查看
  • 白段道館 #1 仍然顯示 🔒 鎖定狀態
  • 滑鼠移到道館上，顯示提示：
    前置條件：
✅ 觀察者模式入門（已完成）
❌ 觀察者模式實戰（未完成）

第二天：完成第二支影片#

小美的操作：

  1. 繼續觀看「觀察者模式實戰」影片
  2. 看完整支影片（100% 進度）
  3. 點擊「領取獎勵」，獲得 100 XP
  4. 經驗值從 50 增加到 150
  5. 系統顯示升級通知：「恭喜升級到 2 級！」

道館狀態變化：

  • 小美回到挑戰地圖
  • 白段道館 #1 自動解鎖！ 🟢
  • 鎖頭圖示消失，顯示編號「1」
  • 道館卡片變成可點擊狀態
  • 提示訊息變成：
    前置條件：
✅ 觀察者模式入門（已完成）
✅ 觀察者模式實戰（已完成）
可以開始挑戰了！

第三天：挑戰道館#

小美的操作：

  1. 點擊「白段道館 #1：觀察者模式挑戰」
  2. 進入道館詳情頁面
  3. 看到 2 道挑戰題：
    • 速戰速決：設計一個天氣觀測系統（預估 3 天完成，獎勵 150 XP）
    • 實戰演練：開發一個股票價格監控程式（預估 14 天完成，獎勵 500 XP）

挑戰第一題：

  1. 點擊「速戰速決」挑戰
  2. 閱讀題目要求
  3. 在本地開發環境完成程式
  4. 上傳程式碼或填寫答案
  5. 等待講師批改
  6. 結果：通過！ 獲得 150 XP

挑戰第二題：

  1. 點擊「實戰演練」挑戰
  2. 這是較複雜的題目，需要多天完成
  3. 小美花了一週時間開發
  4. 提交作業
  5. 結果：通過！ 獲得 500 XP

道館完成：

  • 所有挑戰都通過後
  • 白段道館 #1 標記為完成 ✅
  • 道館卡片顯示綠色打勾圖示
  • 小美的經驗值累積到 800 XP（50 + 100 + 150 + 500）

第四天：解鎖下一個道館#

背景： 白段道館 #2 的前置條件是「完成白段道館 #1」。

自動解鎖：

  • 因為小美已經完成白段道館 #1
  • 系統自動檢查白段道館 #2 的前置條件
  • 白段道館 #2 自動解鎖！ 🟢
  • 小美可以繼續挑戰下一個道館

解鎖邏輯總結#

系統自動檢查的時機：

  1. 每次進入挑戰地圖頁面時
  2. 每次領取影片獎勵後
  3. 每次完成道館挑戰後

解鎖條件檢查：

對於每個道館：
  如果 所有前置任務都已完成 且 都已領取獎勵（如果需要）：
    → 道館解鎖 🟢
  否則：
    → 道館鎖定 🔒

完成條件檢查：

對於每個道館：
  如果 所有挑戰題都提交 且 都通過批改：
    → 道館完成 ✅
  否則：
    → 道館進行中 🟢

道館詳情頁#

頁面結構#

道館資訊區：

  • 道館名稱
  • 道館描述
  • 難度等級
  • 前置條件列表（顯示完成狀態）

挑戰列表： 每個挑戰顯示：

  • 挑戰標題
  • 挑戰描述
  • 挑戰類型（速戰速決 / 實戰演練）
  • 預估完成天數
  • 經驗值獎勵
  • 提交狀態

挑戰類型#

速戰速決（INSTANT_CHALLENGE）：

  • 預估 3 天完成
  • 題目較簡單
  • 獎勵較少（通常 100-200 XP）
  • 可以多次提交

實戰演練（PRACTICAL_CHALLENGE）：

  • 預估 14 天完成
  • 題目較複雜，需要完整開發
  • 獎勵較多（通常 300-500 XP）
  • 只能提交一次（通過後不能重新提交）

提交與批改#

提交流程：

  • 1. 閱讀題目要求
  • 2. 完成程式開發
  • 3. 點擊「提交作業」按鈕
  • 4. 上傳程式碼或填寫答案（後端文件上傳已實現）
  • 5. 等待講師批改

批改狀態：

  • SUBMITTED（已提交） - 作業已提交，等待批改
  • GRADING（批改中） - 講師正在批改
  • PASSED（通過） - 獲得經驗值，計入完成度
  • FAILED（未通過） - 可重新提交（除非是實戰演練）

批改時間：

  • 速戰速決：通常 1-3 天內批改完成
  • 實戰演練：通常 3-7 天內批改完成（題目較複雜）

進度追蹤#

個人統計#

在挑戰地圖頁面頂部可以看到：

  • 已完成道館數 / 總道館數（例如：3/10 cleared）
  • 累積經驗值（例如：800 XP）
  • 預估剩餘時間

課程完成度#

完成所有道館後：

  • 獲得課程完課證書
  • 解鎖額外獎勵
  • 可在個人資料頁面展示成就

常見問題#

Q: 為什麼我看完影片但道館還是鎖著？ A: 請確認是否已經「領取獎勵」。大部分道館要求不只看完，還要領取獎勵才能解鎖。

Q: 可以跳過前面的道館，直接挑戰後面的嗎？ A: 不行。必須按照順序完成前置條件，確保學習路徑的完整性。

Q: 實戰演練提交失敗了怎麼辦？ A: 實戰演練只能提交一次，請在提交前仔細檢查。速戰速決可以多次提交。

Q: 完成道館後可以重新挑戰嗎？ A: 可以查看之前的提交記錄，但實戰演練通過後不能重新提交。速戰速決可以重複挑戰。

Backward 學習旅程 排行榜 Forward