T-43 Student Result Matrix

教師端查看檢定設計規格

畫面用途

對應「每個學生的每題成績」。採用矩陣圖形式，讓老師一眼看出誰在哪一題丟了分。

Student Matrix 🔗 ↗

閱讀完整規格 ↓

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

學生答題明細矩陣

🎨 Figma: Student Matrix 🔗

T-40 / T-42 / T-43 共用同一 Figma node 151-636

🎯 功能定位

對應「每個學生的每題成績」。採用矩陣圖形式，讓老師一眼看出誰在哪一題丟了分。

🧱 画面結構

Web 佈局：12-col grid，1280px max-width（無 Sidebar）

• Header:

  • < Back — 返回 T-42
  • HSK-2 Mock A > Student Answer Matrix

• Main Content:

  • Filters: [All Students ▾] [Pass/Fail ▾] [🔍 Search] [📥 Export]
  • Student Answer Matrix — Grid Table:
    • Sticky Columns: Name | Score | Status
    • Question Columns: Q1 | Q2 | Q3 | ...（水平滑動）
    • ✅ 綠色 = 正確 / ❌ 紅色 = 錯誤（Hover 顯示實際錯誤答案）
    • PASS 🏆 / FAIL — 狀態標籤
  • Bottom Row — 每題全班正確率（Corr Rt: 15% | 5% | 32% | ...）
  • 性能：分段加載，避免大矩陣卡頓

[設計稿參考]

📦 區塊說明

#	區塊	元件	行為/交互	備註
1	過濾器	Dropdown + Search + Button	按學生、及格狀態過濾，支援名稱搜索，提供 Excel 導出	—
2	Status 列	Label + Icon	根據合格分顯示 PASS（+ 🏆）或 FAIL	合格者即已在 S-32 獲得 Trophy
3	Q1-Qn 矩陣	Grid (✅/❌)	✅ 綠色 = 正確；❌ 紅色 = 錯誤。Hover 於 ❌ 顯示實際錯誤答案	Sticky Column: Name 和 Score 固定在左側
4	Correct Rate 底行	Stat Row	垂直彙總每題的正確率	與 T-42 數據呼應

🔁 交互流程圖

流程圖

正在載入流程圖…

⚙️ 狀態管理與性能優化

狀態	觸發條件	畫面表現
正常	數據載入	顯示矩陣表格
加載中	首次載入或過濾變更	分段加載（避免大矩陣卡頓）
導出中	點擊 Export	Loading + 下載進度
空狀態	過濾結果為 0	提示無匹配結果

🔎 邏輯自我檢查

• Sticky Column： 題目可能多達 50-100 題，Name 和 Score 欄位必須固定在左側（Sticky），方便橫向捲動時識別學生。
• 分段加載（Pagination/Chunked Loading）： 矩陣數據點極多（學生數 × 題數），使用分段加載避免畫面卡頓。
• 導出格式： Export 為 Excel 格式，方便線下存檔或報告。

---