15. HTML 交互组件 html · 玄武屏使用手册

HTML 交互组件是玄武屏第二大类"活的内容"——任意 HTML / JS 实现的交互动画都能嵌入演示。

与 GGB 元素的区别

维度	GGB 元素	HTML 元素
内核	GeoGebra Applet	任意 HTML / JS / Canvas / WebGL
适合	几何 / 代数 / 数学动画	物理仿真 / 数据可视化 / 自定义工具
学习曲线	GGB 学习成本	前端开发能力
沙盒安全	同上	严格沙盒，禁外发请求

典型应用

场景	例子
物理仿真	弹簧振动、电磁感应、流体模拟
数据可视化	D3.js 自定义图表、Three.js 3D 场景
小工具	抽奖器、计时器、互动地图、随机点名
行业仿真	医学：人体 3D；建筑：户型漫游；军事：装备模型
数字孪生	实时数据驱动的 3D 场景

嵌入流程

{
  "type": "html",
  "workId": "BHtml24050001",
  "interactable": true
}

跟 GGB 一样，前端拿到的是 workId，OSS 真实 URL 由服务端鉴权代理，不会泄露。

创作者上传 HTML 组件

到「玄武屏空间 → 我的动画 → 上传」：

提交 .html 文件 + 配套静态资源（CSS / JS / 图片）
平台沙盒检测：
- 无外发 fetch / XHR / WebSocket（除白名单）
- 无危险 API 调用（eval / Function / document.write）
- 无访问父页面 cookie / localStorage
通过审核 → 获得 workId → 可被任何 .xwp 引用

沙盒规则

HTML 组件运行在 </code> 里，默认禁止： <ul> <li>外发 HTTP 请求（除非申请白名单）</li> <li>访问父页面（演示文稿）的 DOM</li> <li>跨域 Cookie / localStorage</li> <li>弹窗 / 跳转</li> </ul> 例外允许： <ul> <li>父页面 → 子组件：通过 <code class="md-inline">postMessage</code> 传参数</li> <li>子组件 → 父页面：通过 <code class="md-inline">postMessage</code> 上报变量（用于课堂数据）</li> </ul> <h2>双向通信 API</h2> <pre class="md-code"><code class="lang-js">// 子组件内 window.parent.postMessage({ type: 'xwp:var-update', data: { v0: 12.5, result: 'correct' } }, '*') // 父页面（玄武屏播放器）自动监听</code></pre>变量上报后可进入课堂学情数据流，详见「43. 课后回看与学情数据」。 <h2>演示模式 vs 交互模式</h2> 跟 GGB 元素一样： <table> <thead> <tr> <th>模式</th> <th>触发</th> <th>行为</th> </tr> </thead> <tbody><tr> <td>演示模式</td> <td>单击</td> <td>触发动画 / 跳转</td> </tr> <tr> <td>交互模式</td> <td>双击</td> <td>进入组件内部，可操作；按 Esc 退出</td> </tr> </tbody></table> <code class="md-inline">interactable: false</code> 的组件纯展示，不可操作。 <h2>性能注意</h2> HTML 组件单页 ≤ 2 个最佳。每个 iframe 都是独立 JS 上下文，开销不小。 低端硬件（教室 PC / 老平板）建议： <ul> <li>用 WebP 图片代替 SVG 动画</li> <li>简化 Three.js 场景（< 5 万顶点）</li> <li>避免 60fps 高频动画</li> </ul> 详见「28. 动画性能预算」。 <h2>行业组件库</h2> 平台预置了各行业的 HTML 组件库： <ul> <li>教育：物理 / 化学仿真</li> <li>医疗：人体解剖 / 手术模拟</li> <li>建筑：户型漫游 / 户型对比</li> <li>数据：实时大屏 / 表格仪表盘</li> </ul> 详见「行业方案」相关章节。 下一节讲数学公式元素。 </div></div></div></article><nav class="xh-nav" data-v-19d77121><button class="xh-nav-btn prev" data-v-19d77121><div class="xh-nav-text" data-v-19d77121><div class="xh-nav-label" data-v-19d77121>上一节</div><div class="xh-nav-title" data-v-19d77121>14. GGB 动画元素 ggb</div></div></button><button class="xh-nav-btn next" data-v-19d77121><div class="xh-nav-text" data-v-19d77121><div class="xh-nav-label" data-v-19d77121>下一节</div><div class="xh-nav-title" data-v-19d77121>16. 数学公式 formula</div></div></button></nav></main><aside class="xh-aside" data-v-19d77121><div class="xh-aside-inner" data-v-19d77121><div class="xh-toc-head" data-v-19d77121> 手册目录 </div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>入门</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=intro" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>1. 玄武屏简介热</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=positioning" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>2. 与同类产品的本质差异NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=architecture-overview" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>3. 三层能力架构总览NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=first" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>4. 创建第一份演示热</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>界面基础</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=editor-tour" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>5. 编辑器全景导览NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=canvas" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>6. 画布与多尺寸适配NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=panels" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>7. 面板系统：左、右、顶、底NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=masters" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>8. 母版与主题NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=transitions" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>9. 翻页过渡NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>元素详解</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=elements-overview" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>10. 元素总览：10 种类型NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-text" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>11. 文字元素 textNEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-image" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>12. 图片元素 imageNEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-video" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>13. 视频元素 videoNEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-ggb" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>14. GGB 动画元素 ggb热</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-html" class="router-link-active router-link-exact-active xh-toc-item active" data-v-19d77121>15. HTML 交互组件 html热</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-formula" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>16. 数学公式 formulaNEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-table" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>17. 表格 tableNEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-shape" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>18. 基础图形 shapeNEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-component" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>19. 组件库元素 componentNEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-ai-avatar" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>20. AI 数字人 ai-avatarNEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=element-master-elements" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>21. 母版元素与层级规则NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>动画交互</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=animation-overview" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>22. 动画系统总览NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=animation-entrance" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>23. 入场动画 16 种NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=animation-trigger" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>24. 触发器：click / auto / chainNEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=animation-order" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>25. 动画顺序与并行NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=animation-easing" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>26. 缓动曲线与时长NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=animation-chain" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>27. 链式动画与状态机NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=animation-perf" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>28. 动画性能预算NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=animation-debug" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>29. 动画调试与回放NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>演示模式</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=play-fullscreen" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>30. 全屏播放NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=play-presenter" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>31. 主讲人视图NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=play-laser-pen" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>32. 激光笔与画笔NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=play-notes" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>33. 演讲者备注与计时NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>多端联动</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=multi-end-room" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>34. 演示房间与邀请码NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=multi-end-roles" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>35. 三角色：主讲人 / 参与者 / 观众NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=multi-end-reconnect" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>36. 同步机制与断线重连NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=multi-end-devices" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>37. 多终端矩阵适配NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>课堂系统</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=classroom-overview" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>38. 课堂互动系统总览NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=classroom-mistakes" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>39. 错题收集NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=classroom-distribute" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>40. 内容下发NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=classroom-annotation" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>41. 圈点回收NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=classroom-quiz" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>42. 实时答题NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=classroom-replay" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>43. 课后回看与学情数据NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>展厅模式</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=exhibition-self-serve" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>44. 展厅自助播放模式NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=exhibition-ultrawide" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>45. 21:9 / 32:9 超宽适配NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=exhibition-loop" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>46. 循环编排与节目单NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=exhibition-trigger" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>47. 外部触发：传感器 / API / 二维码NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>AI 能力</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ai-overview" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>48. AI 能力总览：六大模块热</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ai-1-generate" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>49. AI-1 一键生成演示NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ai-2-recommend" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>50. AI-2 实时动画推荐NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ai-3-classroom-analysis" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>51. AI-3 课后学情分析热</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ai-4-auto-quiz" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>52. AI-4 自动出题NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ai-5-digital-human" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>53. AI-5 数字人讲解员热</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ai-6-subtitles" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>54. AI-6 实时字幕与翻译NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ai-prompt-tips" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>55. AI Prompt 技巧与定价NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>导入导出与分享</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=import-ppt" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>56. 从 PPT 导入NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=export-pdf-image" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>57. 导出 PDF 与图片NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=export-offline" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>58. 离线 HTML 包NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=embed-iframe" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>59. 嵌入第三方网页NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=collaboration" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>60. 协作邀请与权限NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>行业方案</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-education" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>61. 教育行业方案热</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-enterprise" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>62. 企业展示方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-medical" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>63. 医疗医学方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-architecture" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>64. 建筑地产方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-museum" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>65. 博物馆展览方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-marketing" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>66. 游戏化营销方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-vocational" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>67. 职业培训方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-science-gov" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>68. 科普政务方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-metaverse" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>69. 元宇宙展厅方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-military" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>70. 军事航空方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-cross-touchscreen" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>71. 触摸屏整机集成方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-cross-bigscreen" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>72. 大屏 / 控制中心方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-cross-mobile" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>73. 移动端轻量演示方案NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=industry-cross-overseas" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>74. 出海与多语种方案NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>商业化</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=commerce-membership" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>75. 组件会员：覆盖范围与权益NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=commerce-ai-modules" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>76. AI 模块独立计费NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=commerce-customization" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>77. 定制服务流程NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=commerce-watermark" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>78. 水印 / 版权 / 内容保护NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>参考</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ref-shortcuts" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>79. 快捷键大全NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ref-glossary" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>80. 术语表NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ref-file-format" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>81. .xwp 文件格式NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ref-error-codes" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>82. 错误码与诊断NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ref-api" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>83. 开发者 API 速查NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=ref-config-tuning" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>84. 性能配置与调优NEW</a></li></ul></div><div class="xh-toc-section" data-v-19d77121><div class="xh-toc-section-name" data-v-19d77121>帮助与动态</div><ul class="xh-toc-list" data-v-19d77121><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=faq" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>85. 常见问题NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=changelog" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>86. 产品更新记录NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=roadmap" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>87. 产品路线图NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=feedback" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>88. 反馈渠道与支持NEW</a></li><li data-v-19d77121><a aria-current="page" href="/tutorials/c/xwp?ch=community" class="router-link-active router-link-exact-active xh-toc-item" data-v-19d77121>89. 社区与生态NEW</a></li></ul></div></div></aside></div></div></main></div></div></main><div class="xwp-help-ball--home xwp-help-ball" data-v-9cdf0562><button class="support-avatar" type="button" aria-label="咨询拾荒者" data-v-9cdf0562><img src="https://oss.bahuangqi.com/bhq-frontend-v2/images/ai/scavenger-assistant-avatar-v2.webp" alt="拾荒者" width="56" height="56" data-v-9cdf0562></button><nav class="support-rail" aria-label="快捷帮助与支持" data-v-9cdf0562><a href="/custom" class="support-action" data-v-9cdf0562>定制</a><a href="/learn" rel="noopener noreferrer" target="_blank" class="support-action" data-v-9cdf0562>教程</a><a href="/help" rel="noopener noreferrer" target="_blank" class="support-action" data-v-9cdf0562>帮助</a><button class="support-action" type="button" data-v-9cdf0562>反馈</button></nav></div></div></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{releaseCommit:"1a5ede214d06404cfebd2e0301dc566b23e84b53",releaseBranch:"detached",releaseBuiltAt:"2026-11-03T12:06:07.579Z",productVersion:"3.15.0.0",publicReleasePlanSha256:"",apiBase:"https://bahuangqi.com",storagePublicBase:"https://oss.bahuangqi.com",siteUrl:"https://bahuangqi.com",wecomKfUrl:""},app:{baseURL:"/",buildId:"01a7c6ba-0f5d-4048-910c-8be58354aeb9",buildAssetsDir:"/_nuxt/",cdnURL:"https://oss.bahuangqi.com/bhq-frontend-v2/"}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":470,"once":476,"_errors":477,"serverRendered":9,"path":479,"pinia":480},["ShallowReactive",3],{"xwp-chapter:element-html":4,"xwp-toc-db-list":10},{"accessMode":5,"body":6,"updatedAt":7,"videoUrl":-1,"articleId":8,"isOfficial":9},"free","HTML 交互组件是玄武屏第二大类\"活的内容\"——任意 HTML \u002F JS 实现的交互动画都能嵌入演示。\n\n## 与 GGB 元素的区别\n\n| 维度 | GGB 元素 | HTML 元素 |\n|---|---|---|\n| 内核 | GeoGebra Applet | 任意 HTML \u002F JS \u002F Canvas \u002F WebGL |\n| 适合 | 几何 \u002F 代数 \u002F 数学动画 | 物理仿真 \u002F 数据可视化 \u002F 自定义工具 |\n| 学习曲线 | GGB 学习成本 | 前端开发能力 |\n| 沙盒安全 | 同上 | 严格沙盒，禁外发请求 |\n\n## 典型应用\n\n| 场景 | 例子 |\n|---|---|\n| **物理仿真** | 弹簧振动、电磁感应、流体模拟 |\n| **数据可视化** | D3.js 自定义图表、Three.js 3D 场景 |\n| **小工具** | 抽奖器、计时器、互动地图、随机点名 |\n| **行业仿真** | 医学：人体 3D；建筑：户型漫游；军事：装备模型 |\n| **数字孪生** | 实时数据驱动的 3D 场景 |\n\n## 嵌入流程\n\n```json\n{\n \"type\": \"html\",\n \"workId\": \"BHtml24050001\",\n \"interactable\": true\n}\n```\n\n跟 GGB 一样，前端拿到的是 workId，OSS 真实 URL 由服务端鉴权代理，不会泄露。\n\n## 创作者上传 HTML 组件\n\n到「玄武屏空间 → 我的动画 → 上传」：\n\n1. 提交 `.html` 文件 + 配套静态资源（CSS \u002F JS \u002F 图片）\n2. 平台沙盒检测：\n - 无外发 fetch \u002F XHR \u002F WebSocket（除白名单）\n - 无危险 API 调用（eval \u002F Function \u002F document.write）\n - 无访问父页面 cookie \u002F localStorage\n3. 通过审核 → 获得 workId → 可被任何 .xwp 引用\n\n## 沙盒规则\n\nHTML 组件运行在 `\u003Ciframe sandbox>` 里，默认禁止：\n\n- 外发 HTTP 请求（除非申请白名单）\n- 访问父页面（演示文稿）的 DOM\n- 跨域 Cookie \u002F localStorage\n- 弹窗 \u002F 跳转\n\n**例外允许**：\n\n- 父页面 → 子组件：通过 `postMessage` 传参数\n- 子组件 → 父页面：通过 `postMessage` 上报变量（用于课堂数据）\n\n## 双向通信 API\n\n```js\n\u002F\u002F 子组件内\nwindow.parent.postMessage({\n type: 'xwp:var-update',\n data: { v0: 12.5, result: 'correct' }\n}, '*')\n\n\u002F\u002F 父页面（玄武屏播放器）自动监听\n```\n\n变量上报后可进入课堂学情数据流，详见「43. 课后回看与学情数据」。\n\n## 演示模式 vs 交互模式\n\n跟 GGB 元素一样：\n\n| 模式 | 触发 | 行为 |\n|---|---|---|\n| 演示模式 | 单击 | 触发动画 \u002F 跳转 |\n| 交互模式 | 双击 | 进入组件内部，可操作；按 Esc 退出 |\n\n`interactable: false` 的组件纯展示，不可操作。\n\n## 性能注意\n\nHTML 组件单页 ≤ 2 个最佳。每个 iframe 都是独立 JS 上下文，开销不小。\n\n低端硬件（教室 PC \u002F 老平板）建议：\n\n- 用 WebP 图片代替 SVG 动画\n- 简化 Three.js 场景（\u003C 5 万顶点）\n- 避免 60fps 高频动画\n\n详见「28. 动画性能预算」。\n\n## 行业组件库\n\n平台预置了各行业的 HTML 组件库：\n\n- **教育**：物理 \u002F 化学仿真\n- **医疗**：人体解剖 \u002F 手术模拟\n- **建筑**：户型漫游 \u002F 户型对比\n- **数据**：实时大屏 \u002F 表格仪表盘\n\n详见「行业方案」相关章节。\n\n下一节讲数学公式元素。","2026-10-28","xwp_element-html",true,[11,17,23,28,33,38,43,48,53,59,64,69,74,79,83,88,93,98,103,108,113,119,124,129,134,140,145,150,155,160,165,170,175,181,186,191,196,201,206,212,217,222,227,233,238,243,248,254,259,264,269,274,280,285,290,295,301,306,311,316,321,327,332,337,342,348,353,358,363,368,374,379,384,389,394,399,404,409,414,419,424,429,434,439,445,450,455,460,465],{"slug":12,"title":13,"section":14,"hot":9,"fresh":9,"articleId":15,"sortOrder":16},"ai-overview","48. AI 能力总览：六大模块","AI 能力","xwp_ai-overview",48,{"slug":18,"title":19,"section":14,"hot":20,"fresh":9,"articleId":21,"sortOrder":22},"ai-1-generate","49. AI-1 一键生成演示",false,"xwp_ai-1-generate",49,{"slug":24,"title":25,"section":14,"hot":20,"fresh":9,"articleId":26,"sortOrder":27},"ai-2-recommend","50. AI-2 实时动画推荐","xwp_ai-2-recommend",50,{"slug":29,"title":30,"section":14,"hot":9,"fresh":9,"articleId":31,"sortOrder":32},"ai-3-classroom-analysis","51. AI-3 课后学情分析","xwp_ai-3-classroom-analysis",51,{"slug":34,"title":35,"section":14,"hot":20,"fresh":9,"articleId":36,"sortOrder":37},"ai-4-auto-quiz","52. AI-4 自动出题","xwp_ai-4-auto-quiz",52,{"slug":39,"title":40,"section":14,"hot":9,"fresh":9,"articleId":41,"sortOrder":42},"ai-5-digital-human","53. AI-5 数字人讲解员","xwp_ai-5-digital-human",53,{"slug":44,"title":45,"section":14,"hot":20,"fresh":9,"articleId":46,"sortOrder":47},"ai-6-subtitles","54. AI-6 实时字幕与翻译","xwp_ai-6-subtitles",54,{"slug":49,"title":50,"section":14,"hot":20,"fresh":9,"articleId":51,"sortOrder":52},"ai-prompt-tips","55. AI Prompt 技巧与定价","xwp_ai-prompt-tips",55,{"slug":54,"title":55,"section":56,"hot":20,"fresh":9,"articleId":57,"sortOrder":58},"elements-overview","10. 元素总览：10 种类型","元素详解","xwp_elements-overview",10,{"slug":60,"title":61,"section":56,"hot":20,"fresh":9,"articleId":62,"sortOrder":63},"element-text","11. 文字元素 text","xwp_element-text",11,{"slug":65,"title":66,"section":56,"hot":20,"fresh":9,"articleId":67,"sortOrder":68},"element-image","12. 图片元素 image","xwp_element-image",12,{"slug":70,"title":71,"section":56,"hot":20,"fresh":9,"articleId":72,"sortOrder":73},"element-video","13. 视频元素 video","xwp_element-video",13,{"slug":75,"title":76,"section":56,"hot":9,"fresh":9,"articleId":77,"sortOrder":78},"element-ggb","14. GGB 动画元素 ggb","xwp_element-ggb",14,{"slug":80,"title":81,"section":56,"hot":9,"fresh":9,"articleId":8,"sortOrder":82},"element-html","15. HTML 交互组件 html",15,{"slug":84,"title":85,"section":56,"hot":20,"fresh":9,"articleId":86,"sortOrder":87},"element-formula","16. 数学公式 formula","xwp_element-formula",16,{"slug":89,"title":90,"section":56,"hot":20,"fresh":9,"articleId":91,"sortOrder":92},"element-table","17. 表格 table","xwp_element-table",17,{"slug":94,"title":95,"section":56,"hot":20,"fresh":9,"articleId":96,"sortOrder":97},"element-shape","18. 基础图形 shape","xwp_element-shape",18,{"slug":99,"title":100,"section":56,"hot":20,"fresh":9,"articleId":101,"sortOrder":102},"element-component","19. 组件库元素 component","xwp_element-component",19,{"slug":104,"title":105,"section":56,"hot":20,"fresh":9,"articleId":106,"sortOrder":107},"element-ai-avatar","20. AI 数字人 ai-avatar","xwp_element-ai-avatar",20,{"slug":109,"title":110,"section":56,"hot":20,"fresh":9,"articleId":111,"sortOrder":112},"element-master-elements","21. 母版元素与层级规则","xwp_element-master-elements",21,{"slug":114,"title":115,"section":116,"hot":9,"fresh":9,"articleId":117,"sortOrder":118},"intro","1. 玄武屏简介","入门","xwp_intro",1,{"slug":120,"title":121,"section":116,"hot":20,"fresh":9,"articleId":122,"sortOrder":123},"positioning","2. 与同类产品的本质差异","xwp_positioning",2,{"slug":125,"title":126,"section":116,"hot":20,"fresh":9,"articleId":127,"sortOrder":128},"architecture-overview","3. 三层能力架构总览","xwp_architecture-overview",3,{"slug":130,"title":131,"section":116,"hot":9,"fresh":9,"articleId":132,"sortOrder":133},"first","4. 创建第一份演示","xwp_first",4,{"slug":135,"title":136,"section":137,"hot":20,"fresh":9,"articleId":138,"sortOrder":139},"animation-overview","22. 动画系统总览","动画交互","xwp_animation-overview",22,{"slug":141,"title":142,"section":137,"hot":20,"fresh":9,"articleId":143,"sortOrder":144},"animation-entrance","23. 入场动画 16 种","xwp_animation-entrance",23,{"slug":146,"title":147,"section":137,"hot":20,"fresh":9,"articleId":148,"sortOrder":149},"animation-trigger","24. 触发器：click \u002F auto \u002F chain","xwp_animation-trigger",24,{"slug":151,"title":152,"section":137,"hot":20,"fresh":9,"articleId":153,"sortOrder":154},"animation-order","25. 动画顺序与并行","xwp_animation-order",25,{"slug":156,"title":157,"section":137,"hot":20,"fresh":9,"articleId":158,"sortOrder":159},"animation-easing","26. 缓动曲线与时长","xwp_animation-easing",26,{"slug":161,"title":162,"section":137,"hot":20,"fresh":9,"articleId":163,"sortOrder":164},"animation-chain","27. 链式动画与状态机","xwp_animation-chain",27,{"slug":166,"title":167,"section":137,"hot":20,"fresh":9,"articleId":168,"sortOrder":169},"animation-perf","28. 动画性能预算","xwp_animation-perf",28,{"slug":171,"title":172,"section":137,"hot":20,"fresh":9,"articleId":173,"sortOrder":174},"animation-debug","29. 动画调试与回放","xwp_animation-debug",29,{"slug":176,"title":177,"section":178,"hot":20,"fresh":9,"articleId":179,"sortOrder":180},"ref-shortcuts","79. 快捷键大全","参考","xwp_ref-shortcuts",79,{"slug":182,"title":183,"section":178,"hot":20,"fresh":9,"articleId":184,"sortOrder":185},"ref-glossary","80. 术语表","xwp_ref-glossary",80,{"slug":187,"title":188,"section":178,"hot":20,"fresh":9,"articleId":189,"sortOrder":190},"ref-file-format","81. .xwp 文件格式","xwp_ref-file-format",81,{"slug":192,"title":193,"section":178,"hot":20,"fresh":9,"articleId":194,"sortOrder":195},"ref-error-codes","82. 错误码与诊断","xwp_ref-error-codes",82,{"slug":197,"title":198,"section":178,"hot":20,"fresh":9,"articleId":199,"sortOrder":200},"ref-api","83. 开发者 API 速查","xwp_ref-api",83,{"slug":202,"title":203,"section":178,"hot":20,"fresh":9,"articleId":204,"sortOrder":205},"ref-config-tuning","84. 性能配置与调优","xwp_ref-config-tuning",84,{"slug":207,"title":208,"section":209,"hot":20,"fresh":9,"articleId":210,"sortOrder":211},"commerce-membership","75. 组件会员：覆盖范围与权益","商业化","xwp_commerce-membership",75,{"slug":213,"title":214,"section":209,"hot":20,"fresh":9,"articleId":215,"sortOrder":216},"commerce-ai-modules","76. AI 模块独立计费","xwp_commerce-ai-modules",76,{"slug":218,"title":219,"section":209,"hot":20,"fresh":9,"articleId":220,"sortOrder":221},"commerce-customization","77. 定制服务流程","xwp_commerce-customization",77,{"slug":223,"title":224,"section":209,"hot":20,"fresh":9,"articleId":225,"sortOrder":226},"commerce-watermark","78. 水印 \u002F 版权 \u002F 内容保护","xwp_commerce-watermark",78,{"slug":228,"title":229,"section":230,"hot":20,"fresh":9,"articleId":231,"sortOrder":232},"multi-end-room","34. 演示房间与邀请码","多端联动","xwp_multi-end-room",34,{"slug":234,"title":235,"section":230,"hot":20,"fresh":9,"articleId":236,"sortOrder":237},"multi-end-roles","35. 三角色：主讲人 \u002F 参与者 \u002F 观众","xwp_multi-end-roles",35,{"slug":239,"title":240,"section":230,"hot":20,"fresh":9,"articleId":241,"sortOrder":242},"multi-end-reconnect","36. 同步机制与断线重连","xwp_multi-end-reconnect",36,{"slug":244,"title":245,"section":230,"hot":20,"fresh":9,"articleId":246,"sortOrder":247},"multi-end-devices","37. 多终端矩阵适配","xwp_multi-end-devices",37,{"slug":249,"title":250,"section":251,"hot":20,"fresh":9,"articleId":252,"sortOrder":253},"import-ppt","56. 从 PPT 导入","导入导出与分享","xwp_import-ppt",56,{"slug":255,"title":256,"section":251,"hot":20,"fresh":9,"articleId":257,"sortOrder":258},"export-pdf-image","57. 导出 PDF 与图片","xwp_export-pdf-image",57,{"slug":260,"title":261,"section":251,"hot":20,"fresh":9,"articleId":262,"sortOrder":263},"export-offline","58. 离线 HTML 包","xwp_export-offline",58,{"slug":265,"title":266,"section":251,"hot":20,"fresh":9,"articleId":267,"sortOrder":268},"embed-iframe","59. 嵌入第三方网页","xwp_embed-iframe",59,{"slug":270,"title":271,"section":251,"hot":20,"fresh":9,"articleId":272,"sortOrder":273},"collaboration","60. 协作邀请与权限","xwp_collaboration",60,{"slug":275,"title":276,"section":277,"hot":20,"fresh":9,"articleId":278,"sortOrder":279},"exhibition-self-serve","44. 展厅自助播放模式","展厅模式","xwp_exhibition-self-serve",44,{"slug":281,"title":282,"section":277,"hot":20,"fresh":9,"articleId":283,"sortOrder":284},"exhibition-ultrawide","45. 21:9 \u002F 32:9 超宽适配","xwp_exhibition-ultrawide",45,{"slug":286,"title":287,"section":277,"hot":20,"fresh":9,"articleId":288,"sortOrder":289},"exhibition-loop","46. 循环编排与节目单","xwp_exhibition-loop",46,{"slug":291,"title":292,"section":277,"hot":20,"fresh":9,"articleId":293,"sortOrder":294},"exhibition-trigger","47. 外部触发：传感器 \u002F API \u002F 二维码","xwp_exhibition-trigger",47,{"slug":296,"title":297,"section":298,"hot":20,"fresh":9,"articleId":299,"sortOrder":300},"faq","85. 常见问题","帮助与动态","xwp_faq",85,{"slug":302,"title":303,"section":298,"hot":20,"fresh":9,"articleId":304,"sortOrder":305},"changelog","86. 产品更新记录","xwp_changelog",86,{"slug":307,"title":308,"section":298,"hot":20,"fresh":9,"articleId":309,"sortOrder":310},"roadmap","87. 产品路线图","xwp_roadmap",87,{"slug":312,"title":313,"section":298,"hot":20,"fresh":9,"articleId":314,"sortOrder":315},"feedback","88. 反馈渠道与支持","xwp_feedback",88,{"slug":317,"title":318,"section":298,"hot":20,"fresh":9,"articleId":319,"sortOrder":320},"community","89. 社区与生态","xwp_community",89,{"slug":322,"title":323,"section":324,"hot":20,"fresh":9,"articleId":325,"sortOrder":326},"play-fullscreen","30. 全屏播放","演示模式","xwp_play-fullscreen",30,{"slug":328,"title":329,"section":324,"hot":20,"fresh":9,"articleId":330,"sortOrder":331},"play-presenter","31. 主讲人视图","xwp_play-presenter",31,{"slug":333,"title":334,"section":324,"hot":20,"fresh":9,"articleId":335,"sortOrder":336},"play-laser-pen","32. 激光笔与画笔","xwp_play-laser-pen",32,{"slug":338,"title":339,"section":324,"hot":20,"fresh":9,"articleId":340,"sortOrder":341},"play-notes","33. 演讲者备注与计时","xwp_play-notes",33,{"slug":343,"title":344,"section":345,"hot":20,"fresh":9,"articleId":346,"sortOrder":347},"editor-tour","5. 编辑器全景导览","界面基础","xwp_editor-tour",5,{"slug":349,"title":350,"section":345,"hot":20,"fresh":9,"articleId":351,"sortOrder":352},"canvas","6. 画布与多尺寸适配","xwp_canvas",6,{"slug":354,"title":355,"section":345,"hot":20,"fresh":9,"articleId":356,"sortOrder":357},"panels","7. 面板系统：左、右、顶、底","xwp_panels",7,{"slug":359,"title":360,"section":345,"hot":20,"fresh":9,"articleId":361,"sortOrder":362},"masters","8. 母版与主题","xwp_masters",8,{"slug":364,"title":365,"section":345,"hot":20,"fresh":9,"articleId":366,"sortOrder":367},"transitions","9. 翻页过渡","xwp_transitions",9,{"slug":369,"title":370,"section":371,"hot":9,"fresh":9,"articleId":372,"sortOrder":373},"industry-education","61. 教育行业方案","行业方案","xwp_industry-education",61,{"slug":375,"title":376,"section":371,"hot":20,"fresh":9,"articleId":377,"sortOrder":378},"industry-enterprise","62. 企业展示方案","xwp_industry-enterprise",62,{"slug":380,"title":381,"section":371,"hot":20,"fresh":9,"articleId":382,"sortOrder":383},"industry-medical","63. 医疗医学方案","xwp_industry-medical",63,{"slug":385,"title":386,"section":371,"hot":20,"fresh":9,"articleId":387,"sortOrder":388},"industry-architecture","64. 建筑地产方案","xwp_industry-architecture",64,{"slug":390,"title":391,"section":371,"hot":20,"fresh":9,"articleId":392,"sortOrder":393},"industry-museum","65. 博物馆展览方案","xwp_industry-museum",65,{"slug":395,"title":396,"section":371,"hot":20,"fresh":9,"articleId":397,"sortOrder":398},"industry-marketing","66. 游戏化营销方案","xwp_industry-marketing",66,{"slug":400,"title":401,"section":371,"hot":20,"fresh":9,"articleId":402,"sortOrder":403},"industry-vocational","67. 职业培训方案","xwp_industry-vocational",67,{"slug":405,"title":406,"section":371,"hot":20,"fresh":9,"articleId":407,"sortOrder":408},"industry-science-gov","68. 科普政务方案","xwp_industry-science-gov",68,{"slug":410,"title":411,"section":371,"hot":20,"fresh":9,"articleId":412,"sortOrder":413},"industry-metaverse","69. 元宇宙展厅方案","xwp_industry-metaverse",69,{"slug":415,"title":416,"section":371,"hot":20,"fresh":9,"articleId":417,"sortOrder":418},"industry-military","70. 军事航空方案","xwp_industry-military",70,{"slug":420,"title":421,"section":371,"hot":20,"fresh":9,"articleId":422,"sortOrder":423},"industry-cross-touchscreen","71. 触摸屏整机集成方案","xwp_industry-cross-touchscreen",71,{"slug":425,"title":426,"section":371,"hot":20,"fresh":9,"articleId":427,"sortOrder":428},"industry-cross-bigscreen","72. 大屏 \u002F 控制中心方案","xwp_industry-cross-bigscreen",72,{"slug":430,"title":431,"section":371,"hot":20,"fresh":9,"articleId":432,"sortOrder":433},"industry-cross-mobile","73. 移动端轻量演示方案","xwp_industry-cross-mobile",73,{"slug":435,"title":436,"section":371,"hot":20,"fresh":9,"articleId":437,"sortOrder":438},"industry-cross-overseas","74. 出海与多语种方案","xwp_industry-cross-overseas",74,{"slug":440,"title":441,"section":442,"hot":20,"fresh":9,"articleId":443,"sortOrder":444},"classroom-overview","38. 课堂互动系统总览","课堂系统","xwp_classroom-overview",38,{"slug":446,"title":447,"section":442,"hot":20,"fresh":9,"articleId":448,"sortOrder":449},"classroom-mistakes","39. 错题收集","xwp_classroom-mistakes",39,{"slug":451,"title":452,"section":442,"hot":20,"fresh":9,"articleId":453,"sortOrder":454},"classroom-distribute","40. 内容下发","xwp_classroom-distribute",40,{"slug":456,"title":457,"section":442,"hot":20,"fresh":9,"articleId":458,"sortOrder":459},"classroom-annotation","41. 圈点回收","xwp_classroom-annotation",41,{"slug":461,"title":462,"section":442,"hot":20,"fresh":9,"articleId":463,"sortOrder":464},"classroom-quiz","42. 实时答题","xwp_classroom-quiz",42,{"slug":466,"title":467,"section":442,"hot":20,"fresh":9,"articleId":468,"sortOrder":469},"classroom-replay","43. 课后回看与学情数据","xwp_classroom-replay",43,["Reactive",471],{"$scolor-mode":472,"$sglobal-ai-assistant-panel-open":20,"$sglobal-ai-assistant-human-requested":20,"$sglobal-ai-assistant-private-knowledge-requested":20,"$shome-compact-search":20,"$ssite-search-keyword":474,"$stutorials.sidebar.activeExpanded":475},{"preference":473,"value":473,"unknown":9,"forced":20},"system","","xwp",["Set"],["ShallowReactive",478],{"xwp-chapter:element-html":-1,"xwp-toc-db-list":-1},"\u002Ftutorials\u002Fc\u002Fxwp?ch=element-html",["Reactive",481],{"feedbackDialog":482,"auth":489,"categories":505},{"open":483,"ctx":485},["EmptyRef",484],"false",["Ref",486],["Reactive",487],{"tab":488},"site-feedback",{"token":490,"sessionEpoch":492,"authStatus":494,"userInfo":496,"userInfoExtra":497,"messageCount":498,"loginPanelVisible":499,"loginPanelView":500,"lastLoginMethod":502,"isAgreed":503,"membershipRevision":504},["EmptyRef",491],"null",["EmptyRef",493],"0",["Ref",495],"checking",["EmptyRef",491],["EmptyRef",491],["EmptyRef",493],["EmptyRef",484],["Ref",501],"qr",["EmptyRef",491],["EmptyRef",484],["EmptyRef",493],{"categories":506,"loaded":509,"loading":510,"sourceUnavailable":511},["Ref",507],["Reactive",508],[],["EmptyRef",484],["Ref",9],["EmptyRef",484]]</script></body></html>