Workshop 與工作站
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS 工作站
在多窗格編寫空間中構建即時網頁件——含跟做階段、引數化變數，以及需要把頁面帶到 TeachForge 之外時的獨立 HTML 匯出。
AI 可以起草。由你決定課堂看到什麼。
HTML / CSS / JS 是什麼
HTML / CSS / JS 是多窗格網頁編寫 工作站。你並排寫標記、樣式與指令碼，在沙箱 iframe 中預覽頁面，需要時再匯出可在 TeachForge 之外使用的獨立 HTML 檔案。
這對教學很重要，因為學習者立刻看見結果時，網頁技能才說得通。改樣式、步進跟做階段，或演示一個小型互動頁——即時，不必部署任何東西。
教師為何使用 HTML / CSS / JS
即時網頁演示
即時展示 HTML、CSS 與 JavaScript 如何一起工作。
跟做課
捕獲階段並逐步演示，讓全班跟上構建過程。
引數化主題
用控制元件驅動顏色與變數，而不必手找每一個 CSS 值。
獨立講義
匯出一份 HTML 檔案，在 工作站 之外使用。
在 TeachForge 上，HTML / CSS / JS 是 Workshop 的 工作站——為教學頁面而建，而不只是快速程式碼片段。
HTML / CSS / JS 工作站 內
與 Workshop 其餘部分一樣，你得到熟悉的編寫節奏——只是三窗格而不是一窗格。
- HTML、CSS 與 JS 編輯器 ，可快速切換窗格
- 即時或手動重新整理 到沙箱 iframe 預覽
- 一起構建的階段 ——捕獲、步進與演示模式
- 引數化變數 ，用於可複用的主題與數值控制元件
- 裝置預覽框 ，以及 KaTeX 等可選庫
- 獨立 HTML 匯出、高階 JSON、分享、嵌入與傳送到 Whiteboard
窗格如何變成頁面
從模板開始，或編輯三個窗格
課需要時再新增階段與引數化變數。
執行即時或手動預覽
沙箱 iframe 按學習者會見到的樣子顯示頁面。
演示階段、匯出，或即時傳送
把結果送到白板上、放進題目，或匯出為獨立 HTML。
一頁。它的每個版本。
這個 工作站 支援 引數化變數 和 跟做階段：保持頁面結構，變化主題，並按順序揭示構建——而不必維護十二份略有不同的 HTML 檔案。
邊教邊改
調整引數值，或在演示模式步進到下一階段。
保持結構，變化主題
同一頁面包明天可以換強調色、資料集或難度。
教構建過程，而不只是成品
階段讓全班看著頁面成形。
貼近評估
儲存可移植的 JSON 包，並在後續課或實驗室中複用。
需要快速的執行+控制檯片段？那是姊妹 工作站 程式碼 沙盒 的事。HTML / CSS / JS 面向帶階段與匯出的編寫頁面。
可起步的現成頁面
開啟模板，按你的課重塑：
| 區域 | 可開啟的內容 |
|---|---|
| 基礎 | 空白；個人資料卡；彈性盒 操場 |
| 一起構建 | 按鈕階段；顏色主題切換 |
| 互動 | 畫布動畫；測驗介面；資料表 |
按你的方式使用 AI 幫助
需要初稿？把 AI 當助手——在到達學習者之前審閱、編輯並批准。
複製提示詞
生成現成提示詞，貼上到你已在用的聊天工具。
使用自己的 GPU
在設定中連線本地模型端點，在你控制的硬體上執行生成。
使用自己的 API 金鑰
在設定中新增提供商金鑰，選擇模型，用自己的帳號生成。
AI 可能會出錯。正因如此，教師才留在環路中。
把頁面帶到教學發生的地方
- Whiteboard — 放到即時白板上，在全班面前調整
- Quest Ladder — 放入問題與講解
- Virtual Lab — 在互動實驗作業中複用
- 社群 — 分享你的作品，並在其他教育者分享的基礎上繼續構建