用途
该技能用于生成交互式数学函数图像，基于 Plotly.js JavaScript 库实现。每个 MicroSim 针对窄版教科书布局的 iframe 嵌入进行了优化，具有最小边距、响应式设计、显示精确坐标的悬停提示，以及允许用户沿曲线探索点的交互式滑块。
技能会按照仓库的标准化结构生成完整的 MicroSim 包，包括独立 HTML 文件、响应式 CSS、交互式 JavaScript、完整的 Markdown 文档和 Dublin Core 元数据。
主要能力
- 生成交互式数学函数图像，支持悬停提示显示精确坐标（3 位小数）。
- 提供交互式滑块，用户可沿曲线移动点并探索函数值。
- 支持 PNG 导出功能。
- 响应式设计，适配 320px 至 1200px 宽度，针对 iframe 嵌入优化（body 边距为 0，容器内边距最大 5px）。
- 自动计算 Y 轴范围（若未提供），并添加 10% 内边距。
- 生成完整的 MicroSim 包：main.html、style.css、script.js、index.md、metadata.json。
- 包含 Dublin Core 元数据，支持教育字段（受众、教育级别、学习资源类型、交互类型、典型学习时间）。
- 提供针对特定函数类型的定制化文档和课程计划建议。
使用方式
调用该技能时，用户可提出以下请求：
- “绘制一个数学函数”
- “画出方程 y = ... 的图像”
- “可视化 f(x) = ...”
- “创建一个交互式函数绘图器”
- “显示[三角/多项式/指数]函数的图像”
- “制作一个可嵌入教科书的图”
- “生成一个微积分可视化”
- “创建交互式正弦/余弦/正切图像”
工作流程如下：
- 收集需求：需要函数表达式、标题、定义域 [xMin, xMax]；可选 Y 轴范围、交互点初始 x 位置、滑块步长、轴标签、副标题、使用场景。
- 创建目录结构：docs/sims/[microsim-name]/，包含 main.html、style.css、script.js、index.md、metadata.json。命名使用 kebab-case。
- 生成 main.html：使用模板替换占位符（标题、副标题、x 范围、步长、初始 x 等），保留最小边距、Plotly.js CDN 链接、外部 CSS/JS 链接、语义化 HTML5 结构。
- 生成 style.css：body 边距必须为 0，容器内边距最大 5px（移动端 2px），背景使用 aliceblue，响应式断点 768px 和 480px，绘图高度桌面 400px、平板 300px、移动 250px。
- 生成 script.js：替换函数定义、定义域、值域、图例标签、轴标签、导出文件名等占位符。提供数学表达式到 JavaScript 的转换指南（如 sin(x) → Math.sin(x)）。若未提供值域，自动采样计算。
- 创建 index.md 文档：包含 YAML frontmatter、标题、iframe 嵌入、全屏链接、嵌入代码、概述、使用方法、教育应用、定制指南、技术细节、课程计划建议、参考资料。
- 创建 metadata.json：包含 Dublin Core 字段（标题、描述、创建者、日期、主题、类型、格式、语言、权利）及可选教育字段。
- 测试与验证：视觉测试（渲染、轴标签、悬停提示、滑块交互、响应式）、功能测试（滑块范围、点精度、提示精度、导出、移动端）、文档审查、元数据验证、集成检查。
适用场景
- 智能教科书中的交互式数学可视化。
- 三角函数、多项式、指数、对数、高斯分布等函数图像。
- 物理和工程场景：抛体运动轨迹、简谐运动等。
- 教育用途：课程计划、学习活动、评估。
- 需要 iframe 嵌入的窄版式布局。
限制
- 函数必须能转换为 JavaScript 表达式。
- 不连续函数（如 tan(x)）需要特殊处理。
- 对数函数定义域必须为正。
- 总点数建议不超过 2000 以保证渲染流畅。
- 依赖 Plotly.js CDN（v2.27.0 或最新稳定版）。
- 元数据语言固定为 en-US。
- 具体收费、价格、平台信息暂未提供。