系統架構摘要 (Executive Summary)
本報告統整了「台灣羽球能力檢測 (Badminton Skill Test)」的專案開發與優化脈絡。記錄了我們如何解決羽球圈常見的「臨打程度落差」痛點，透過純前端的分步問答引擎 (Wizard UI)、客觀情境量化矩陣，以及高畫質無損的「社群戰力圖卡匯出」，打造出一款兼具鑑別度與極高病毒擴散力 (Viral Loop) 的運動科技 Web App。
在台灣，羽球風氣極盛，各地球隊每天都在 Facebook 社團或 LINE 群組徵求「臨打」球友。然而，每個人對「中階」、「初級」的定義落差極大，常導致現場對戰實力懸殊，嚴重破壞遊戲體驗。
為了解決這個痛點，我們決定打造一款基於「台灣羽球推廣協會」公認標準（18 級分級制度）的線上評量工具。然而，如何讓這份枯燥的「問卷」變得有趣，甚至讓使用者主動為我們宣傳，成為了架構設計上的最大挑戰。
一、 終結填答疲勞：情境式分步測驗引擎
本章核心：降低視覺壓迫，重構評量邏輯
分析為何傳統的長網頁表單會引發高跳出率，以及如何透過 DOM 狀態切換打造專注的單題步進介面與客觀數據量化。
最一開始的雛形，只是一個單純的靜態長篇表單，讓使用者一路往下勾選「會不會高遠球」、「會不會切球」。這不僅造成了極大的視覺疲勞，更致命的是，使用者對「會不會」的主觀認定差異太大，導致測驗失去準度。
我們在前端大舉重構，實作了 Step-by-step 測驗卡片引擎 (Wizard UI)。 每次畫面上只顯示一道題目，搭配頂部動態推進的進度條，大幅降低視覺壓迫感。 這種沉浸式架構，與我們在 五大人格特質探索器 中用來對抗 50 題問卷疲勞的防線同出一轍。
在題庫設計上，我們將題目升級為「客觀情境量化」。不再問「防守好不好」，而是問「面對強扣殺時，能成功挑回後場的機率是否大於 70%？」以此大幅提升系統的科學鑑別度。
不論定點或移動，殺/切/長球成功率與穩定性達 70% 以上。具備無變化的基本防守能力。
圖 1.1：情境式分步測驗引擎與暗黑沉浸式卡片 UI
二、 全網戰力對標：動態常模演算法與 GAS 串接
本章核心：讓成績具備說服力的雲端比對
解密系統如何將前端的測驗結果，透過輕量化 GAS API 即時寫入雲端並與全體大數據進行常態分佈比對，算出真實的 PR 排位。
如果測完只給出一個「你是 10 級」，對球友來說其實沒有太大的感覺。他們更想知道的是：「我在全台灣的業餘球友中，大約排在什麼位置？」
為此，我們設計了 混合式排位演算法 (Hybrid Ranking Engine)。
當使用者提交最後一題時，前端會透過 fetch 瞬間將資料打給後端 Google Apps Script (GAS) API。GAS 會將此成績匯入全站總表，並即時運算常態分佈，回傳 rank (名次) 與 total (總人數)。
我們更加入了 Fallback (本機降級預估) 機制。萬一網路不穩或 GAS 流量達上限，前端 JS 會立刻接手，利用預先寫好的數學機率公式（例如：第 10 級大約落在前 38%），確保結果顯示 100% 永不當機。
您的羽球能力等級大約落在「中進階」階段。雙打輪轉概念熟練，能透過策略有效得分。
圖 2.1：結合 GAS 常模運算的戰力報告與匯出圖卡版面
三、 創造社交貨幣：一鍵無損圖卡與社群裂變
缺乏視覺吸引力與信任感
過去使用者若想去臉書社團報名臨打，只能用手機手動截圖，往往截得斷斷續續，或是直接複製純文字。這種方式缺乏美感，也無法在滑動態牆時抓住主辦人的眼球。
html2canvas 病毒行銷殺手鐧
承襲我們在 天賦探索器 中的成功經驗，我們在此同樣佈署了 html2canvas。使用者只需一鍵，即可下載高解析度、帶有專屬 QR Code 的戰鬥力身分卡。當這張圖卡被貼到 LINE 臨打群組時，立刻觸發了病毒式 (Viral Loop) 的擴散註冊。
// --- 圖卡匯出與評分互動 ---
function downloadCard() {
const btn = document.getElementById('downloadBtn');
const originalText = btn.innerHTML;
btn.innerHTML = ' 正在產生圖片...';
btn.disabled = true;
const card = document.getElementById('exportCard');
html2canvas(card, {
scale: 3,
backgroundColor: "#ffffff",
useCORS: true,
logging: false
}).then(canvas => {
const link = document.createElement('a');
const level = document.getElementById('res-level').innerText;
link.download = `Gemify_台灣羽球能力檢測_${level}級.jpg`;
link.href = canvas.toDataURL('image/jpeg', 0.95);
link.click();
showToast("已成功下載您的專屬戰力圖卡！", "success");
btn.innerHTML = originalText;
btn.disabled = false;
}).catch(err => {
showToast("圖片產生失敗，請稍後再試。", "error");
btn.innerHTML = originalText;
btn.disabled = false;
});
}
四、 結語：將測驗昇華為數位身分證
「台灣羽球能力檢測」的開發，是一場從「冷硬數據問卷」向「高互動社交貨幣」轉型的經典戰役。
透過前端的情境式步進 UI，我們解決了填答疲勞；藉由 GAS 的雲端常態分配演算法，我們賦予了數據權威性；最後，再利用純前端的影像渲染技術，將評量結果轉化為極具分享價值的「數位羽球身分證」。這款工具證明了：只要精準命中社群痛點，輔以極致的 Web App 體驗，即便是微型工具，也能爆發出驚人的流量磁吸效應。