CAP-Map 是一個專門為臺灣國中生設計的互動式學習網站,旨在協助學生準備國中教育會考(CAP)社會科。透過將歷史時間軸與地理空間深度結合,幫助學生建立跨區域史觀,並強化會考必考的「圖表與地圖判讀能力」。

線上預覽:https://raybird.github.io/cap-map/

目前收錄 106 筆事件,涵蓋臺灣史、中國史與世界史三個面向,橫跨西元前 5000 年至 2025 年。

各分期事件數:

時間軸依八個全球史分期組織:

• 歷史時間軸:底部橫向拖曳軸,從西元前 5000 年延伸至 2025 年,以 10px/年比例呈現。點擊分期色帶可快速過濾對應時代的事件。
• 互動地圖:基於 Leaflet,精確定位每筆事件的地理座標,支援圖層篩選(歷史/地理/公民)。點擊標記後地圖自動飛入並開啟彈出卡片。

• 顯示事件標題、年代、地點、詳細描述與關鍵字標籤。
• 標註會考重要性(高/中/低)、教科書對應章節(七上・七下・八上・八下・九上・九下)及常見題型。
• 點擊「相關事件」可直接跳轉至關聯事件。

• 每個事件自動生成 3 題選擇題,題型涵蓋:分期判斷、地點辨識、關鍵字配對、時序排列。
• 干擾選項從全資料集動態生成,避免重複。

• 整合 Fuse.js,對 title、description、keywords 三欄位進行模糊比對(threshold 0.3)。

• 桌機:側邊欄從右側滑入(380px)。
• 手機(≤480px):側邊欄以底部 Sheet 呈現(佔 62vh),地圖自動偏移確保焦點標記出現在可見區域中央。

cap-map/
├── .github/workflows/deploy.yml # 自動部署至 GitHub Pages
├── docs/ # 設計規格書
└── webapp/ # Angular 應用程式
 ├── public/assets/data/
 │ ├── events.json # 106 筆事件資料
 │ └── timeline.json # 8 個分期定義
 ├── scripts/
 │ └── validate-events.mjs # 資料驗證腳本(npm run test:data)
 └── src/app/
 ├── store/ # NgRx actions / reducers / selectors
 ├── services/ # EventService / TimelineService / QuizService
 ├── map-container/ # Leaflet 地圖元件
 ├── timeline/ # 時間軸元件
 ├── event-sidebar/ # 事件詳情與測驗側邊欄
 ├── search-bar/ # 搜尋列
 └── layer-control/ # 圖層切換面板

# 1. 複製並進入專案
git clone https://github.com/raybird/cap-map.git
cd cap-map/webapp
# 2. 安裝相依套件
npm install
# 3. 啟動開發伺服器(http://localhost:4200)
npm start
# 4. 驗證事件資料完整性
npm run test:data

推送至 main 分支後,GitHub Actions 自動建置並發布至 GitHub Pages:

• 網址:https://raybird.github.io/cap-map/
• 工作流:.github/workflows/deploy.yml

首次啟用:至儲存庫 Settings → Pages → Build and deployment,將 Source 設為 GitHub Actions。