系統架構摘要 (Executive Summary)
本報告統整了「籃球能力自我評鑑 (Basketball Skill Test)」的專案開發與優化脈絡。記錄了我們如何解決街頭籃球常見的「臨打實力落差」與「主觀盲區」痛點。透過純前端的情境式分步問答引擎、ECharts 多維雷達圖、木桶效應 (Level Cap) 演算法，以及高畫質無損的「球員身分卡匯出」，打造出一款兼具高鑑別度與極高社群擴散力 (Viral Loop) 的 Web App。
籃球是台灣最普及的運動之一，從街頭鬥牛 (3v3) 到室內全場 (5v5)，隨處可見徵求「臨打」的社群貼文。然而，大家對「新手」、「一般校隊程度」的定義極為模糊。有些新手會高估自己，有些老手則過於謙虛，經常導致現場對戰實力懸殊，失去競技樂趣。
我們打造這款工具的目標，就是建立一套「客觀量化籃球實力」的標準。然而，在將紙本問卷轉化為網頁應用的過程中，我們遭遇了嚴峻的 UX 與演算法挑戰。
一、 克服主觀盲區：情境式分步測驗引擎
本章核心：消滅 Dunning-Kruger 效應，重構評量邏輯
分析為何傳統的靜態表單會引發高估/低估的測驗失真，以及如何透過「客觀情境量化」與「步進式介面」提升科學鑑別度。
傳統問卷最大的致命傷在於「主觀形容詞」。如果題目只問「你的防守好不好？」，填答者往往會陷入主觀盲區。
我們在前端大舉重構，將題庫升級為「客觀情境量化」。例如：不問外線準度，而是問「在有防守干擾或身體對抗時，我仍能完成合理出手？」這大幅提升了測驗的真實性。
在 UI 呈現上，我們沿用了在 羽球能力檢測 中極度成功的 Step-by-step 測驗卡片引擎 (Wizard UI)。每次只專注於一道題目，搭配暗黑沉浸式卡片與頂部的動態進度條，讓原本冗長的 21 題問卷，變成宛如「2K 遊戲體測通關」的流暢體驗。
在有防守干擾或身體對抗時，我仍能完成合理出手。
圖 1.1：情境式分步測驗引擎與暗黑沉浸式卡片 UI
二、 拒絕扁平分數：ECharts 雷達圖與木桶效應演算法
本章核心：多維度解析與 Level Cap 防呆機制
解密系統如何利用 ECharts 呈現球員偏科屬性，並導入「木桶效應 (Bucket Effect)」的等級上限限制，確保整體實力評估不失真。
早期的結果只會吐出一個總分（例如 60 分）。但在籃球這項團隊運動中，單一分數根本無法定義一名球員是「百步穿楊的射手 (3&D)」還是「穿針引線的控衛 (Playmaker)」。
我們重新建構了底層 JavaScript 邏輯，將分數打散為七大維度。當測驗結束時，導入 Apache ECharts 視覺化引擎，動態繪製出專屬的「七角雷達圖」，讓使用者直觀看見自己的能力偏科與定位。
獨家演算法：木桶效應 (Level Cap)
為確保評鑑的實戰準確度，我們開發了 Level Cap 限制演算法。 籃球場上存在「木桶效應」——即使你的投籃再準（高分），只要你的防守意識或體能極差（低分），在正式比賽中就會成為被針對的防守黑洞。 因此，演算法會掃描七大面向，若發現有超過兩個維度分數過低，系統將會強制壓低您的最終總評級，完美還原真實賽場上的實力天花板。
木桶效應觸發
系統偵測到投籃終結能力偏低，已啟用等級上限限制，避免高估整體比賽能力。
圖 2.1：結合 ECharts 雷達圖與 Level Cap 演算法的評鑑報告
const dimensions = [
{ id: "ball", code: "A", zh: "控球與護球", en: "Ball Handling", short: "控球 Handle", adviceZh: "以左右手低運球、變向後保護球為主，先降低失誤。", adviceEn: "Focus on low dribbles and ball protection to reduce turnovers." },
{ id: "shoot", code: "B", zh: "投籃與終結", en: "Shooting & Finishing", short: "投籃 Shoot", adviceZh: "先固定出手節奏與近距離終結，再增加防守干擾下的投籃。", adviceEn: "Fix your shooting rhythm and close finishing before practicing contested shots." },
{ id: "pass", code: "C", zh: "傳球與進攻判斷", en: "Passing & Decision", short: "傳球 Pass", adviceZh: "練習切入後分球、被包夾時找弱邊，減少勉強出手。", adviceEn: "Practice kick-outs after driving, finding the weak side, and avoiding forced shots." },
{ id: "team", code: "D", zh: "無球與團隊進攻", en: "Off-ball & Team", short: "團隊 Team", adviceZh: "多練空切、拉開空間、掩護後拆開或外彈，不要只站在原地。", adviceEn: "Practice cutting, spacing, and pick-and-roll/pop. Avoid just standing still." },
{ id: "def", code: "E", zh: "防守與籃板", en: "Defense & Rebounding", short: "防守 Def", adviceZh: "強化防守站位、橫移腳步、協防回位，以及出手後先卡位。", adviceEn: "Strengthen defensive stance, lateral quickness, rotations, and boxing out." },
{ id: "iq", code: "F", zh: "比賽經驗與球商", en: "Game IQ", short: "球商 IQ", adviceZh: "多參與實戰，觀察站位、節奏與對手防守變化。", adviceEn: "Play more games. Observe positioning, game rhythm, and defensive shifts." },
{ id: "rules", code: "G", zh: "犯規與違例熟悉度", en: "Rules & Violations", short: "規則 Rules", adviceZh: "熟悉走步、二運、三秒、打手與非法掩護等規則。", adviceEn: "Familiarize yourself with traveling, double dribble, 3-sec rules, and illegal screens." }
];
三、 創造社交貨幣：雙語化排版與無損圖卡裂變
修復字體裁切的 html2canvas
我們利用 html2canvas 將包含雷達圖與推廣 QRCode 的網頁節點，瞬間渲染為高畫質圖卡。過程中特別拔除了容易干擾算繪的 leading-none CSS 樣式，完美解決了數字被上下壓扁的「剃頭裁切」問題，讓使用者自信地發上 IG 限動報隊。
拆解 JSON 與 i18n SEO 佈局
在後端 GAS 儲存方面，我們將打包的 JSON 徹底拆解為 7 個獨立維度欄位，大幅提升未來大數據統計的「顆粒度」。同時，全站實施 100% 雙語化 (Bilingual)，密集的英文籃球術語 (如 Playmaker, Pick-and-roll) 有效推升了 Google 的專業領域權重 (Domain Authority)。
四、 結語：微型工具的極致打磨
「籃球能力自我評鑑」的開發，是一場對細節極致打磨的拉力賽。
透過前端的情境式步進 UI，我們解決了填答疲勞；藉由 ECharts 與木桶演算法，我們還原了真實賽場的實力評估；最後，再利用純前端的影像渲染技術與全站雙語化，將枯燥的問卷轉化為極具分享價值與權威感的「數位球員身分證」。
這款工具再次證明：在微型 Web App 的領域中，只要緊抓社群痛點並提供極致流暢的前端體驗，即便是零伺服器成本的靜態網頁，也能爆發出驚人的流量磁吸與變現效應。