keanu77 · Oct 18, 2026 · Oct 18, 2026 · Oct 18, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,6 +13,8 @@ jobs:
         run: |
           for f in skills/html-slide-deck/scripts/*.mjs skills/html-slide-deck/references/*.mjs skills/html-slide-deck/references/offline-build-template/scripts/*.mjs; do node --check "$f"; done
           node --check skills/html-slide-deck/references/offline-build-template/build.js
+          for f in skills/html-slide-deck/references/live-poll/*.mjs skills/html-slide-deck/references/live-poll/screen/*.js skills/html-slide-deck/references/live-poll/worker/src/*.js; do node --check "$f"; done
+          node -e "JSON.parse(require('fs').readFileSync('skills/html-slide-deck/references/live-poll/worker/src/polls.json','utf8'))"
           python -m py_compile skills/html-slide-deck/scripts/montage.py examples/pptx-edits-back-to-html.py
           bash -n install.sh skills/html-slide-deck/scripts/*.sh
           pip install ruff && ruff check skills/html-slide-deck/scripts/montage.py examples/pptx-edits-back-to-html.py

diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@ node_modules/
 __pycache__/
 .DS_Store
 .rt-frame.md
+.dev.vars
+.wrangler/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+- 新增觀眾手機即時投票 `skills/html-slide-deck/references/live-poll/`：Cloudflare Worker＋Durable Object 後端（手機頁、題目 JSON、WebSocket 推播、斷線輪詢）、投影片端 `screen/live-poll.js`／`.css`、`load-test.mjs`（150 支手機壓測）；新腳本 `scripts/poll-slides.mjs` 把占位 section 換成加入頁與投票頁並注入講者端程式。源自 2026-10 一場約 150 人講座的實際做法。
+- 新增 `references/interactive-pages.md`：互動地圖（經緯度投影 SVG、距離圈）、製作技巧頁（格式比較表＋AI 協作清單）、PPTX 轉 HTML 插入互動頁與頁碼重編。`docs/TECHNIQUES.md` 補 4.5–4.7，README 同步。
+- X 簡報技巧整理的「流程與設計原則」「現成 Skill 與工具」併入 skill：`references/design-principles.md`，SKILL.md 第 1 步要求規劃前先讀；原 docs 檔標註兩處一起改。
+
 - 新增 `docs/html-slides-tips-from-x-2026-10-17.md`：整理自 X 使用者分享的 HTML 簡報流程原則、現成 Skill／工具與本專案固定規則（含來源連結）；README 目錄樹補連結。
 - 修正：固定規則原本只在 `docs/`，`install.sh` 不會安裝、skill 也沒引用。改為在兩個 skill 各附 `references/fixed-rules.md`（規則文字照抄），並在各自 `SKILL.md` 要求先讀並遵守；README 開頭簡介補上這兩點。
 

diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 reveal.js 簡報製作流程，包成兩個 Agent Skill。<br>
 Claude Code・Codex CLI・Gemini CLI・Grok Build 都能裝。<br>
-安裝後的 skill 內建作者的固定規則（`references/fixed-rules.md`）；X 上分享的簡報技巧整理見 [docs/html-slides-tips-from-x-2026-10-17.md](docs/html-slides-tips-from-x-2026-10-17.md)。
+安裝後的 skill 內建作者的固定規則（`references/fixed-rules.md`）與規劃設計原則（`references/design-principles.md`）；X 上分享的簡報技巧整理見 [docs/html-slides-tips-from-x-2026-10-17.md](docs/html-slides-tips-from-x-2026-10-17.md)。
 
 [![CI](https://github.com/keanu77/htmlpptskill/actions/workflows/ci.yml/badge.svg)](https://github.com/keanu77/htmlpptskill/actions)
 [![License: MIT](https://img.shields.io/badge/License-MIT-teal.svg)](LICENSE)
@@ -18,7 +18,7 @@ Claude Code・Codex CLI・Gemini CLI・Grok Build 都能裝。<br>
 <sub>實際講座成品：封面 GSAP 逐字浮現、七張卡片一次翻面、頁內真的能作答的測驗、網站＋repo 雙 QR。54 頁、3 MB、拔掉網路照樣播。</sub>
 
 <p>
-<a href="#30-秒安裝">安裝</a>　·　<a href="#10-分鐘看到第一份成品">10 分鐘上手</a>　·　<a href="#-快捷鍵換場與動畫技巧">快捷鍵、換場與動畫技巧</a>　·　<a href="#疑難排解">疑難排解</a>
+<a href="#30-秒安裝">安裝</a>　·　<a href="#10-分鐘看到第一份成品">10 分鐘上手</a>　·　<a href="#-現場互動手機投票互動地圖">現場互動</a>　·　<a href="#-快捷鍵換場與動畫技巧">快捷鍵、換場與動畫技巧</a>　·　<a href="#疑難排解">疑難排解</a>
 </p>
 
 </div>
@@ -35,12 +35,13 @@ Claude Code・Codex CLI・Gemini CLI・Grok Build 都能裝。<br>
 | 主辦單位要 PPTX，你只有 HTML | `render-slides` → `build-handout`：一頁一圖的 PPTX，講者備註進備忘稿；PDF 一行指令 |
 | 想要「炫一點」但怕翻車 | 效果 skill 分穩重／中間／驚豔三檔，內建減少動態效果與 QA 靜態模式 |
 | 講者在 PPTX 上手改了字，改動回不去 HTML | 附完整實例：從 PPTX 抽文字、解 QR 圖、回灌 HTML |
+| 想讓台下一起作答，又不想把觀眾導去別的平台 | 內附手機即時投票：掃 QR 作答、投影片即時統計、按 `A` 揭曉同步到手機；150 支手機實測，斷網照樣能揭曉 |
 
 ## 兩個 skill
 
 | Skill | 一句話 | 什麼時候會被觸發 |
 |---|---|---|
-| **`html-slide-deck`** | 從大綱到交付的主流程：版型、圖片、QR、互動頁、逐頁 QA、講義 PPTX／PDF、原生可編輯 PPTX | 「做一份 HTML 簡報」「reveal.js」「簡報加截圖／QR」「轉 PPT／講義」「離線簡報」 |
+| **`html-slide-deck`** | 從大綱到交付的主流程：版型、圖片、QR、互動頁、觀眾手機即時投票、逐頁 QA、講義 PPTX／PDF、原生可編輯 PPTX | 「做一份 HTML 簡報」「reveal.js」「簡報加截圖／QR」「現場投票」「轉 PPT／講義」「離線簡報」 |
 | **`html-slide-effects`** | 加在其上的效果：逐步出現、Auto-Animate、3D 翻卡、GSAP 逐字、計時條、點圖放大、手機捲動 | 「加動畫」「卡片翻面」「讓簡報更生動」「有什麼效果可以加」 |
 
 ## 30 秒安裝
@@ -107,6 +108,7 @@ node $SKILL/scripts/print-pdf.mjs index.html handout.pdf               # PDF 講
 QA：qa-screenshots.mjs ─ 截圖、溢出、JS 錯誤、對外請求、QR 逐張解碼比對、montage.png ─ 有問題 exit 1
 交付：index.html（單檔）＋ 講義 PPTX ＋ PDF（＋ 原生可編輯 PPTX）
 效果：html-slide-effects → 加完回頭重跑 QA
+互動：手機投票 poll-slides.mjs（講者版另存）、互動地圖、頁內測驗
 ```
 
 <details>
@@ -118,6 +120,47 @@ QA：qa-screenshots.mjs ─ 截圖、溢出、JS 錯誤、對外請求、QR 逐
 - `PLAN.md`＋`ROLE-AUTHOR.md`／`ROLE-REVIEWER.md`：想讓兩個 agent 一個主筆一個稽核，角色由你指定。
 </details>
 
+## 📱 現場互動：手機投票、互動地圖
+
+<img src="docs/live-poll.png" width="900" alt="左：投影片即時顯示全場作答比例並揭曉答案；右：觀眾手機同步顯示答案">
+
+<sub>左：投影片即時顯示全場作答比例，講者按 A 揭曉；右：觀眾手機同步顯示答案。2026-10 一場約 150 人的講座實際使用。</sub>
+
+### 觀眾用手機即時作答
+
+頁內測驗只有台上一個人點；要全場一起作答，用 [`references/live-poll/`](skills/html-slide-deck/references/live-poll/README.md)。
+
+| 你要的 | 做法 |
+|---|---|
+| 觀眾不用裝 App、不用登入 | 掃 QR 開網頁作答，匿名、可改答案、不重複計票 |
+| 投影片上即時看到全場答案 | 選擇題顯示百分比，猜數字顯示直方圖與中位數，加入頁顯示在線手機數 |
+| 揭曉時台下也看得到 | 講者按 `A`，投影片標出正解與說明，答案同步推到每支手機；揭曉前手機拿不到答案 |
+| 彩排完要清掉測試票 | 在該題按 `Shift+R` |
+| 會場網路斷了 | 投影片顯示提示並改輪詢；`A` 照樣揭曉 |
+| 人多會不會塞車 | 150 支手機壓測：150 票約 0.2–1.2 秒寫入並推到投影片 |
+
+後端是 Cloudflare Worker＋Durable Object（免費方案即可），部署一次之後只改題目檔。
+
+```html
+<section data-poll-join></section>        <!-- 加入頁：大 QR＋在線手機數 -->
+<section data-poll="warmup"></section>    <!-- 一題一頁，題目定義在 worker/src/polls.json -->
+```
+```bash
+cp -R $SKILL/references/live-poll/worker my-poll && cd my-poll && npm install
+npx wrangler login && npx wrangler secret put ADMIN_KEY && npx wrangler deploy   # 同一把 key 也寫進 .dev.vars
+node $SKILL/scripts/poll-slides.mjs index.html index-live.html --worker my-poll --url https://slide-poll.<子網域>.workers.dev
+```
+
+產出的 `index-live.html` 內含講者控制用的 ADMIN_KEY，**只放講者電腦**；要分享的版本用原本的 `index.html`。
+
+### 互動地圖與製作技巧頁
+
+- **互動地圖**：點場館顯示項目、最近據點與直線距離，按鈕切換「20 km 圈」「標出 20 km 外」；經緯度投影的 SVG，離線可用。
+- **製作技巧頁**：Q&A 前一頁放 PowerPoint／PDF／HTML 優缺點比較表與 AI 協作清單。
+- **PPTX 轉 HTML 插入互動頁**：以「原 PPTX 第幾頁之後」指定位置，插頁後自動重編頁碼。
+
+程式碼與內容範例：[`references/interactive-pages.md`](skills/html-slide-deck/references/interactive-pages.md)。
+
 ## 🎬 快捷鍵、換場與動畫技巧
 
 以下是作者 55 頁工作坊簡報實際用過、驗證過的做法，適用 reveal.js 5.2。點開每一項看可直接複製的程式碼。同一份內容也在 [docs/TECHNIQUES.md](docs/TECHNIQUES.md)。
@@ -472,6 +515,8 @@ show();
 
 </details>
 
+> 全場用手機作答、互動地圖、製作技巧頁：見上方 [📱 現場互動](#-現場互動手機投票互動地圖)。
+
 ### 🧪 讓動畫不妨礙 QA、PDF 與無障礙
 
 <details>
@@ -537,7 +582,7 @@ html.static .flip .inner, html.static .reveal .fragment, html.static .wall .subs
 ### 🕳️ 常見的坑
 
 <details>
-<summary><b>十個踩過的雷與解法</b></summary>
+<summary><b>十二個踩過的雷與解法</b></summary>
 
 | 現象 | 原因與解法 |
 |---|---|
@@ -551,6 +596,8 @@ html.static .flip .inner, html.static .reveal .fragment, html.static .wall .subs
 | 外掛鍵位沒反應或行為怪 | 撞到內建鍵（`B` 黑屏、`S` 講者、`O` 總覽）；換鍵 |
 | 插入 script 後講者視窗壞掉（`RevealNotes is not defined`） | notes.js 原始碼裡也有 `</body>`；程式插入時找**最後一個** `</body>` |
 | 3D 粒子頁卡頓 | 降 `count`、`setPixelRatio` 上限 1.5、離開封面就 `stop()` |
+| 投票頁截圖被判溢出 | 隱藏的答案框用 `translateY` 往下推會撐出捲動範圍；改用 `scale` |
+| 手機投票票數一直是 0 | 測試用的 voter 代號太短被格式檢查擋掉（需 8–64 字元） |
 
 </details>
 
@@ -569,13 +616,16 @@ html.static .flip .inner, html.static .reveal .fragment, html.static .wall .subs
 skills/
   html-slide-deck/
     SKILL.md                      主流程（給 agent 讀）
-    scripts/                      qa-screenshots、render-slides、build-handout、print-pdf、inline-assets、
+    scripts/                      qa-screenshots、render-slides、build-handout、print-pdf、inline-assets、poll-slides、
                                   resolve、montage.py、pptx-to-pdf.sh（macOS）、gen-image.sh（可換生圖工具）
     references/
       reveal-template.html        深色版型：chip／card／grid／steps／mock／qrcard／viz／互動頁（reveal.js 5.2）
       offline-build-template/     做法 B：content.js＋build.js＋check.mjs＋PLAN.md＋角色檔
       pptxgenjs-helpers.mjs       原生 PPTX 的 theme 與 helper（＋ native-pptx-example.mjs）
       pitfalls.md                 踩過的雷與可複用片段
+      design-principles.md        規劃與設計原則、現成工具（整理自 X 分享，SKILL.md 第 1 步引用）
+      interactive-pages.md        互動地圖、製作技巧頁、PPTX 轉 HTML 插入互動頁
+      live-poll/                  手機即時投票：worker/（Cloudflare Worker＋Durable Object）、screen/（投影片端）、load-test.mjs
       fixed-rules.md              Keanu 的固定規則（SKILL.md 要求遵守）
   html-slide-effects/
     SKILL.md
@@ -617,7 +667,7 @@ AGENTS.md、CLAUDE.md              給在本 repo 工作的 agent
 
 Two Agent Skills (open `SKILL.md` format) for building **reveal.js HTML slide decks** with an AI coding agent, plus the scripts that make them trustworthy:
 
-- **html-slide-deck**: outline-first workflow, dark professional template, real screenshots, QR codes, interactive pages, per-slide screenshot QA (overflow, JS errors, external requests, **QR decoded and compared with `data-url`**), export to handout PPTX (notes included), PDF, and native editable PPTX.
+- **html-slide-deck**: outline-first workflow, dark professional template, real screenshots, QR codes, interactive pages, live audience polling from phones (Cloudflare Worker), per-slide screenshot QA (overflow, JS errors, external requests, **QR decoded and compared with `data-url`**), export to handout PPTX (notes included), PDF, and native editable PPTX.
 - **html-slide-effects**: fragments, Auto-Animate, 3D flip cards, GSAP, timer bar, lightbox, scroll view, with reduced-motion and a STATIC switch so QA screenshots and PDFs capture the final state.
 
 Works with Claude Code, OpenAI Codex CLI, Gemini CLI and Grok Build (`./install.sh` detects them). Docs are in Traditional Chinese; the scripts and templates are language-neutral.

diff --git a/docs/TECHNIQUES.md b/docs/TECHNIQUES.md
@@ -7,7 +7,7 @@
 1. [播放快捷鍵](#1-播放快捷鍵)
 2. [換場（Transitions）](#2-換場transitions)
 3. [動畫技巧](#3-動畫技巧)：逐步出現、Auto-Animate、3D 翻卡、卡片牆飛入、GSAP 逐字、Three.js 粒子
-4. [講者工具](#4-講者工具)：Spotlight 聚光燈、計時條、點圖放大、頁內測驗
+4. [講者工具](#4-講者工具)：Spotlight 聚光燈、計時條、點圖放大、頁內測驗、手機即時投票、互動地圖、製作技巧頁
 5. [讓動畫不妨礙 QA、PDF 與無障礙](#5-讓動畫不妨礙-qapdf-與無障礙)
 6. [怎麼挑：穩重、中間、驚豔](#6-怎麼挑穩重中間驚豔)
 7. [常見的坑](#7-常見的坑)
@@ -337,6 +337,32 @@ show();
 
 醫療或專業題目：題目與解釋要自己審過，參考文獻不確定就標「待查證」。
 
+### 4.5 觀眾手機即時投票
+
+頁內測驗（4.4）只有台上一個人點；要全場一起作答，用 `skills/html-slide-deck/references/live-poll/`：觀眾掃 QR 用手機作答，投影片即時顯示百分比或直方圖，講者按 `A` 揭曉、答案同步推到手機，`Shift+R` 清空本題。後端是 Cloudflare Worker＋Durable Object，150 支手機實測通過。
+
+```html
+<section data-poll-join></section>        <!-- 加入頁：大 QR＋在線手機數 -->
+<section data-poll="warmup"></section>    <!-- 題目定義在 worker/src/polls.json -->
+```
+```bash
+node $SKILL/scripts/poll-slides.mjs index.html index-live.html --worker my-poll --url https://slide-poll.<子網域>.workers.dev
+```
+
+- 產出的 `index-live.html` 內含講者控制用的 ADMIN_KEY，只放講者電腦。
+- 斷網照樣能播、能揭曉；自動化瀏覽器與 `?print-pdf` 不連線，QA 不受影響。
+- 部署、題目格式、API、壓測：[`live-poll/README.md`](../skills/html-slide-deck/references/live-poll/README.md)。
+
+### 4.6 互動地圖
+
+場館、據點、距離這類空間論點，做成可點的 SVG 地圖：點場館顯示項目、最近據點與直線距離，按鈕切換「20 km 圈」與「標出 20 km 外」。經緯度線性投影、純前端、離線可用。完整程式碼：[`interactive-pages.md`](../skills/html-slide-deck/references/interactive-pages.md#互動地圖點據點看離中繼站多遠)。
+
+最容易踩的坑：據點標記蓋住旁邊的場館點，點不到。據點先畫、場館後畫，並給據點 `pointer-events:none`。
+
+### 4.7 製作技巧頁
+
+在 Q&A 前一頁分享「這份簡報怎麼做的」：左邊 PowerPoint／PDF／HTML 的優缺點比較表，右邊 AI 協作清單。實際內容見 [`interactive-pages.md`](../skills/html-slide-deck/references/interactive-pages.md#製作技巧頁結尾前分享這份簡報怎麼做的)。
+
 ---
 
 ## 5. 讓動畫不妨礙 QA、PDF 與無障礙
@@ -411,3 +437,5 @@ html.static .flip .inner, html.static .reveal .fragment, html.static .wall .subs
 | 外掛鍵位沒反應或行為怪 | 撞到內建鍵（`B` 黑屏、`S` 講者、`O` 總覽）；換鍵 |
 | 插入 script 後講者視窗壞掉（`RevealNotes is not defined`） | notes.js 原始碼裡也有 `</body>`；程式插入時找**最後一個** `</body>` |
 | 3D 粒子頁卡頓 | 降 `count`、`setPixelRatio` 上限 1.5、離開封面就 `stop()` |
+| 投票頁截圖被判溢出 | 隱藏的答案框用 `translateY` 往下推會撐出捲動範圍；改用 `scale` |
+| 手機投票票數一直是 0 | 測試用的 voter 代號太短被格式檢查擋掉（需 8–64 字元） |
diff --git a/docs/html-slides-tips-from-x-2026-10-17.md b/docs/html-slides-tips-from-x-2026-10-17.md
@@ -1,6 +1,8 @@
 # HTML 簡報技巧整理（來源：X 使用者分享，2026-10-17 整理）
 
 > 以下為 X 上的使用者分享，非官方文件；工具未經實測，GitHub 星數為貼文所述。
+>
+> 前兩節已整理進 skill：`skills/html-slide-deck/references/design-principles.md`（安裝時一起裝，SKILL.md 第 1 步引用）；修改時兩處一起改。
 
 ## 流程與設計原則
 - 先規劃受眾、結論與敘事結構，再生成頁面；依內容選用圖表、表格、時間線、轉場，輸出可離線分享的單檔 HTML。來源：https://x.com/leowu_love/status/2082124253437247863

diff --git a/docs/live-poll.png b/docs/live-poll.png