S-30 Trophy Room

學生端挑戰與獎勵設計規格

畫面用途

S-30 是學生的「檢定成就館」。

trophyroom 🔗 ↗challengeboard 🔗 ↗TRtest1 🔗 ↗2 🔗 ↗3 🔗 ↗4 🔗 ↗5 🔗 ↗pass 🔗 ↗fail 🔗 ↗

閱讀完整規格 ↓

內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限

榮譽室

🎨 Figma: trophy_room 🔗 · challenge_board 🔗

考試模板: TR_test_1 🔗 · 2 🔗 · 3 🔗 · 4 🔗 · 5 🔗 | 結果: pass 🔗 · fail 🔗

🎯 功能定位

S-30 是學生的「檢定成就館」。

• 上半部 (Trophy)： 像陳列櫃一樣，展示過去完成模擬考後獲得的勳章與分數，增強成就感。
• 下半部 (Challenge)： 老師即時推送的任務區，只有當老師在教師端點擊「推送」後，這裡才會出現新的練習或考試。

🧱 畫面結構

Trophy Gallery (上半部 — 橫向滑動)：

• Header: < Trophy Room [🔔]
• Section Title: [🏆 My Trophies]
• Trophy Cards:
  • [🥇] Mock Exam A | [🥈] HSK-2
  • Score: 98 / 100 | Score: 85 / 120
  • 2026/03/15 | 2026/02/10
  • < Horizontal Scroll for more >

Challenge List (下半部 — 垂直列表)：

• Section Title: [🔥 Active Challenges]
• Challenge Cards:
  • [!] NEW: Mid-term Mock Exam
  • Issued by: Teacher Lin | Due: 2026-04-05
  • [ START NOW > ]
  • [P] HSK-3 Grammar Sprint
  • Issued by: Teacher Lin | Progress: 40%
  • [ CONTINUE > ]

📦 區塊說明

#	區塊	元件	行為/交互	狀態	備註
1	Trophy Gallery	Trophy Card	點擊卡片可查看詳細錯題報告	Completed	根據分數自動配發高/中/低獎杯，各有3款，隨機獲得
2	Trophy	Score Label	顯示考試成績	靜態	與 A-80 數據連動
3	Challenge List	Challenge Card	顯示待處理任務	Active	包含「Start」「Continue (進行中)」「Try Again」
4	Challenge	Action Button	點擊進入 S-31	Primary / Grayed-out	過期按鈕變灰不可點擊
5	Challenge	Status Badge	提醒緊急程度	Alert	[!]=新任務；[P]=進行中進度條

獎杯評價標準： Total Score - Passing Score 的分數，前30%為高，中間40%為中，後30%為低。

🔁 交互流程圖

流程圖

正在載入流程圖…

⚙️ 狀態管理

狀態	觸發條件	畫面表現
Push Logic	老師端 API 推送	挑戰項目具 is_pushed 標籤，S-30 加載該內容
Refetch	學生完成測驗	前端立即重新獲取排行榜與榮譽數據
Pause/Resume	學生暫停測驗	提供隨時停止、之後再繼續的功能
Zero State (Challenge)	老師沒發任務	顯示：「No challenges yet. Take a break! ☕」
Zero State (Trophy)	還沒考過試	顯示：「Start your first challenge to win a trophy!」

🔎 邏輯自我檢查

• 權限連動：確保只有該班級的老師能給該班級學生發挑戰。
• 即時性：當老師推送時，S-30 應具備小紅點提醒，讓學生知道有新內容。
• 視覺對比：上半部橫向滑動 (Horizontal Scroll) 更像陳列室；下半部垂直列表 (Vertical List) 更像任務清單，兩者在 UI 上有明顯區隔。

---