# Habit Quest｜自我領導力練功站 給國中生使用的《與成功有約》七個習慣互動練習站。學生可透過概念閃卡、情境自測、弱點複習、養成與對戰，練習把抽象的自我領導力概念帶回校園、家庭與日常選擇。 > 目前版本只開放習慣一「主動積極」。習慣二至七已列在成長地圖中，但仍維持鎖定，不能視為已完成課程。 ## 線上版本 - 權威站（Cloudflare Pages）： - 鏡像站（Netlify）： - 原始碼： 上述兩個公開網址已於 2026-08-11 實際取得 HTTP 200。即時對戰的權威後端設於 Cloudflare Pages；需要使用回報或連線功能時，建議以權威站為準。 本機 `.vercel/project.json` 目前仍連到其他專案，不能把它當成 Habit Quest 的部署證據，也不應在未重新連結並確認專案名稱前直接執行 Vercel 正式部署。 ## 目前內容 ### 開放範圍 - 七個習慣地圖：習慣一開放，習慣二至七鎖定。 - 三種路徑：第一次練、情境應用、細節挑戰。 - 題庫共 360 題： | 難度 | 題數 | 教學焦點 | |---|---:|---| | 基礎 | 150 | 核心概念、主動語言、影響圈與關注圈 | | 進階 | 120 | 校園與家庭情境判斷、概念應用 | | 挑戰 | 90 | 跨概念整合與細緻辨析 | - 四種題型：語言判斷、情境選擇、概念分類、金句填空。 - 24 張習慣一概念卡。 ### 主要功能 - 今日任務與 5／10／15 題短回合。 - 閃卡圖鑑與習慣之星收藏。 - Leitner 間隔複習、金線回顧與下一步練習。 - 影響圈之樹養成；成長只由真實精熟題數推進。 - 典範人物 PvE 試煉。 - 電腦陪練與房號制同儕對戰。 - 戰績匯出／匯入與頁面問題回報。 - 每日上限、休息提醒與靜心模式。 ## 教師使用 可直接投影帶全班討論，也可讓學生以一人一機、小組共用裝置進行。15、25、45 分鐘的完整帶班流程、共用裝置處理方式及敏感議題提醒，請見 [教師帶班指南](docs/TEACHER_GUIDE.md)。 本站的答題紀錄適合形成性回饋，不是標準化測驗，也不宜直接換算成學期成績或公開排名。 ## 資料保存與隱私 本站不要求註冊帳號。 - 姓名／暱稱、答題統計、Leitner 盒位、弱點、收藏、養成與對戰紀錄，預設保存在目前瀏覽器的 `localStorage`，使用的 key 是 `hq_meta`。 - 更換瀏覽器、裝置、無痕視窗或清除網站資料後，原進度不會自動同步回來；可先用「戰績與備份」匯出 JSON，再於另一裝置匯入。匯入會覆蓋該瀏覽器目前進度。 - 真人房間會把暱稱、夥伴、等級與回合狀態暫存於權威後端；一般即時房間有效期為 10 分鐘。後端也會以連線 IP 做短期限流，但不要求學生提供電子郵件、班級或聯絡方式。 - 「回報問題」會送出問題類型、選填說明、目前頁面與難度、當下題目內容、少量進度數字、視窗大小及瀏覽器識別字串。回報會存入後端收件匣；若部署端有設定 Telegram 通知，也可能同步通知管理者。請勿在說明欄填入姓名、班級、電話、帳號或其他個人資料。 - 頁面只載入可由使用者關閉的 GoatCounter 匿名到訪統計；不載入廣告或跨站學習追蹤器。教師若有校內隱私或第三方服務限制，可在隱私設定中關閉。 共用裝置請使用小組代號，不要輸入學生完整姓名；活動結束後應依班級需求匯出必要紀錄，再清除該瀏覽器的網站資料。 ## 本機啟動 需要 Node.js 與 npm。本站是無框架靜態前端，不需建置即可預覽。 ```bash npm install python3 -m http.server 8000 ``` 開啟 。 若要完整測試 Cloudflare Pages Functions，可依 `wrangler.toml` 的綁定另行使用 Wrangler；請勿把正式 secrets 寫進版本庫。 ## 驗證與測試 ```bash npm test # 57 項資料、核心機制與安全契約測試 npm run validate # 360 題 schema、分布、文字與唯一性檢查 npm run smoke # Playwright 390px UI 冒煙測試 npm run qa:visual # 390px、平板、桌機截圖與 JSON 視覺證據 ``` `npm run qa:visual` 會自動啟動並關閉臨時本機伺服器。也可指定正式網址與隔離輸出目錄： ```bash ./qa-playwright-capture.sh https://habit-quest-biw.pages.dev /tmp/habit-quest-qa ``` 重新由 12 個 shard 產生正式題庫時才執行： ```bash npm run merge ``` `merge` 會覆寫 `data/habit1-basic.json`、`data/habit1-advanced.json` 與 `data/habit1-challenge.json`；一般預覽或文件修改不需要執行。 ## 專案結構 ```text index.html 單頁介面與主要畫面容器 css/style.css 全站樣式與響應式版面 js/app.js 畫面切換、題目流程與首頁整合 js/meta/ 精熟、養成、經濟、對戰等核心狀態 data/habit1-*.json 三種難度正式題庫 data/concepts.json 習慣一概念卡 data/habits.json 七習慣地圖與開放狀態 functions/api/ Cloudflare Pages 問題回報與即時對戰 API scripts/ 題庫合併與驗證工具 test/ Node 測試與 Playwright UI smoke docs/SPEC.md 題庫唯一權威規格 docs/TEACHER_GUIDE.md 教師帶班指南 ``` ## 內容與安全界線 - 題目採繁體中文台灣用語，四選項與正解索引由驗證器檢查。 - 金句題必須符合專案內的柯維內容錨點；不把未確認語句冒充原文直引。 - 「主動積極」不等於要求受害者自行承擔他人的傷害。遇到霸凌、暴力、性騷擾、自傷風險或其他安全事件，應優先求助可信任成人並依校內通報與輔導流程處理。 - 不要把學生暱稱、匯出備份、房號 token、環境變數或 Telegram secrets 提交到 Git。 ## 部署 - Cloudflare Pages 專案名稱與 Functions／D1 綁定見 `wrangler.toml`。 - Netlify 靜態鏡像設定見 `netlify.toml`。 - Vercel 設定檔為 `vercel.json`，但本機專案連結目前不是 Habit Quest；重新連結前不得直接發布。 部署前至少執行 `npm test`、`npm run validate` 與 `npm run smoke`，再以手機與桌面實際檢查權威站首頁、作答、問題回報及對戰入口。