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 — 在互动实验作业中复用
- 社区 — 分享你的作品,并在其他教育者分享的基础上继续构建