# WikiTA 互動教具製作 Skill（給 AI 或人類作者的完整規範）

你要產生一個「WikiTA 互動教具」：一個**單一 .html 檔**的互動式教學小工具
（模擬器、視覺化、互動練習…），它會被嵌入 WikiTA 學習平台的安全沙箱
`<iframe sandbox="allow-scripts">` 中，伺服器並強制
`Content-Security-Policy: sandbox allow-scripts`（opaque origin）。
以下規則**全部是硬性限制**——違反任何一條，教具會白屏或直接被上傳檢查擋下。

## ① 必須單檔自足（self-contained）
- CSS / JavaScript / 小圖全部 **inline 進同一個 .html**；圖片用 base64 data URI
  （`<img src="data:image/png;base64,...">`）。
- **不可外連任何資源**：`<script src="https://…">`、`<link href="https://…">`、
  `@import`、CSS `url(https://…)`、外連圖片/字型/iframe 都會被沙箱擋掉而白屏。
  上傳與發佈到市集時，系統會自動偵測外連並**直接拒絕**。
- 不可使用 `fetch()` / `XMLHttpRequest` 連外（沙箱內一律失敗）。
- 一般超連結 `<a href="https://…" target="_blank">`（純跳轉、不載入資源）可以。

## ② 不可用 localStorage / sessionStorage / cookie
- 沙箱是 **opaque origin**，存取這些 API 會丟 `SecurityError`。
- 教具必須**無狀態、單獨可跑**：所有狀態放 JS 變數即可；重新整理歸零是預期行為。
- 同理：`document.cookie`、`indexedDB`、`window.parent` 的 DOM 都不可用。

## ③ 自適應高度（避免顯示被擠壓）
- 外框預設高 720px、使用者可手動拖拉、也可「↗ 放大」全螢幕——但最好的體驗是
  **自動貼合內容高度**：在教具裡加上
  ```js
  function reportHeight() {
    parent.postMessage({ type: 'wikita:resize',
                         height: document.body.scrollHeight }, '*');
  }
  window.addEventListener('load', reportHeight);
  // 內容尺寸會變動時（互動後、動畫步進後）也呼叫 reportHeight()
  ```
  外框會自動長到剛好、不留內捲軸。（postMessage 是沙箱內唯一允許的對外通訊。）

## ④ 教學品質要求
- 一個教具聚焦**一個概念**：操作 → 立即視覺回饋 → 學生自己發現規律。
- 提供可調參數（滑桿/按鈕），並標示單位與當前值。
- 行動裝置可用：版面用相對寬度（width:100%），觸控目標 ≥ 40px。
- 介面文字用**繁體中文**，專有名詞首次出現附英文，例如「拋體運動 (projectile motion)」。
- 視覺低調乾淨（淺底深字），不要倒入大型 CSS 框架——手寫 50 行 CSS 通常足夠。

## ⑤ 技術邊界
- 純 vanilla HTML/CSS/JS（ES6+ 可）；**不可**引用 React/Vue/D3 等 CDN 版。
  若真的需要小型函式庫，必須把它整份 inline（並注意 5 MB 上限）。
- 檔案上限 **5 MB**（含 base64 圖片）；UTF-8 編碼；單一 `.html`。
- Canvas / SVG / CSS 動畫 / Web Audio 都可用；`requestAnimationFrame` 動畫請在
  分頁不可見時暫停（`document.visibilitychange`）。
- 不要用 `alert/confirm/prompt`（沙箱中可能被靜默封鎖）——用頁內訊息區。

## 輸出格式
直接輸出**一個完整的 .html 檔內容**，從 `<!DOCTYPE html>` 到 `</html>`，
不需要任何說明文字。檔案開頭加一段註解：

```html
<!-- WikiTA 互動教具
     概念：〔這個教具教什麼〕
     操作：〔學生怎麼玩〕
     符合：單檔自足 / 無外連 / 無 localStorage / wikita:resize -->
```

## 自我檢查清單（輸出前逐項確認）
- [ ] 全檔只有一個 .html、無任何 `http(s)://` 資源載入
- [ ] 沒有 localStorage / cookie / fetch / XHR
- [ ] 有 `wikita:resize` 高度回報（load + 內容變動時）
- [ ] 介面繁中、專有名詞附英文、觸控可用
- [ ] < 5 MB、UTF-8
