從零開始，循序漸進，透過互動視覺化真正理解三角函數。
TrigLearn 是一個專為高中生、大學初學者及想重新打好數學基礎的人設計的三角函數教學網站。不同於傳統教科書只列公式，本站透過互動式單位圓、即時圖形變換工具、分級練習題，讓使用者真正建立對 sin、cos、tan 的直覺理解。
- 互動式視覺化 — 拖拉單位圓、滑桿調整參數，即時觀察圖形變化
- 循序漸進教學 — 11 個章節，從角度弧度到恆等式，一步步建立知識體系
- 即時練習回饋 — 28 道分級練習題，作答後立即看到答案與詳細解析
| 技術 | 版本 | 用途 |
|---|---|---|
| Next.js | 16 | React 框架 (App Router) |
| React | 19 | UI 元件庫 |
| TypeScript | 5 | 型別安全 |
| Tailwind CSS | 4 | 樣式系統 |
| SVG | - | 互動圖形（單位圓、函數圖形） |
無額外重型依賴。所有互動圖形均使用原生 SVG 實作。
# 克隆專案
git clone <repository-url>
cd trig-learn
# 安裝依賴
npm installnpm run dev開啟瀏覽器前往 http://localhost:3000
npm run build建置產出位於 .next/ 資料夾。
npm run build && npm start- Vercel（推薦）：直接連接 Git 倉庫即可自動部署
- Docker：可使用官方 Next.js Docker 範例
- 自架伺服器：
npm run build && npm start，預設監聽 port 3000
trig-learn/
├── app/ # 頁面路由 (App Router)
│ ├── page.tsx # 首頁
│ ├── layout.tsx # 全站佈局
│ ├── globals.css # 全域樣式 + Tailwind 主題
│ ├── not-found.tsx # 404 頁面
│ ├── overview/page.tsx # 三角函數總覽
│ ├── angles/page.tsx # 角度與弧度
│ ├── unit-circle/page.tsx # 單位圓（互動）
│ ├── definitions/page.tsx # sin/cos/tan 定義
│ ├── graphs/page.tsx # 函數圖形（互動）
│ ├── transformations/page.tsx # 圖形變換（互動）
│ ├── inverse/page.tsx # 反三角函數
│ ├── identities/page.tsx # 恆等式與公式
│ ├── practice/page.tsx # 練習題
│ ├── common-mistakes/page.tsx # 常見錯誤
│ └── applications/page.tsx # 實際應用
├── components/
│ ├── layout/ # 佈局元件
│ │ ├── Navbar.tsx # 導航列
│ │ ├── Footer.tsx # 頁尾
│ │ └── PageNavigation.tsx # 上/下一章導航
│ ├── home/ # 首頁區塊元件
│ │ ├── HeroSection.tsx
│ │ ├── FeaturesSection.tsx
│ │ ├── RoadmapSection.tsx
│ │ └── FAQSection.tsx
│ ├── interactive/ # 互動數學元件
│ │ ├── UnitCircle.tsx # 互動式單位圓
│ │ ├── GraphViewer.tsx # 函數圖形檢視器
│ │ ├── TransformSliders.tsx # y=Asin(Bx+C)+D 變換工具
│ │ └── AngleConverter.tsx # 角度弧度轉換器
│ ├── practice/
│ │ └── Quiz.tsx # 測驗系統
│ └── ui/ # 通用 UI 元件
│ ├── Card.tsx
│ ├── Callout.tsx
│ ├── Accordion.tsx
│ └── ProgressBar.tsx
├── data/ # 資料檔
│ ├── navigation.ts # 章節導航結構
│ ├── specialAngles.ts # 特殊角度值表
│ └── questions.ts # 練習題庫（28 題）
├── lib/
│ └── mathUtils.ts # 數學工具函式
├── package.json
├── tsconfig.json
├── next.config.ts
└── postcss.config.mjs
| # | 章節 | 說明 |
|---|---|---|
| 1 | 三角函數總覽 | 認識全貌與應用場景 |
| 2 | 角度與弧度 | 度弧互轉、互動轉換器 |
| 3 | 單位圓 | 互動式單位圓、四象限、特殊角 |
| 4 | sin/cos/tan 定義 | 直角三角形 vs 單位圓、SOH-CAH-TOA |
| 5 | 函數圖形 | sin/cos/tan 圖形、互動檢視器 |
| 6 | 圖形變換 | A/B/C/D 參數、互動滑桿 |
| 7 | 反三角函數 | arcsin/arccos/arctan、主值 |
| 8 | 恆等式與公式 | 畢氏、和角、倍角、半角公式 |
| 9 | 練習題 | 28 題分級測驗、即時回饋 |
| 10 | 常見錯誤 | 10 大初學者陷阱 |
| 11 | 實際應用 | 聲波、電路、旋轉運動等 |
- 更多練習題目與題型（拖曳互動題、圖形選擇題）
- 學習進度持久化（localStorage 或資料庫）
- 暗色模式
- 多語言支援（英文、簡體中文）
- 更多數學主題（向量、矩陣、微積分基礎）
- 數學公式渲染（KaTeX / MathJax）
- 搜尋功能
- 行動端原生體驗最佳化
MIT