# 数学函数绘图仪 - Plotly.js MicroSim 生成器 ## 概述此技能使用 Plotly.js JavaScript 库生成交互式数学函数图。每个 MicroSim 都针对在狭窄的教科书布局中嵌入 iframe 进行了优化，具有最小的边距、响应式设计、显示精确坐标的悬停工具提示以及允许用户沿曲线探索点的交互式滑块。该技能按照存储库的标准化结构创建完整的 MicroSim 包，包括独立的 HTML 文件、响应式 CSS、交互式 JavaScript、全面的 Markdown 文档和 Dublin Core 元数据。 ## 何时使用此技能当用户请求时调用此技能： *“绘制一个数学函数” *“画出方程 y = ...” *“可视化 f(x) = ...” *“创建交互式函数绘图仪” *“显示[三角/多项式/指数]函数的图形” *“制作一个可以嵌入到我的教科书中的情节” *“生成微积分可视化” *“创建交互式正弦/余弦/正切图” ## 工作流程请按照以下步骤创建数学函数图 MicroSim： ### 第 1 步：收集需求向用户询问以下信息： **必填：** * **函数表达式** ：要绘制的数学函数（例如，“sin(x)”、“x^2”、“e^(-x^2)”） * **标题**：MicroSim 的名称（例如“正弦函数”、“二次函数”） * **Domain** ：绘制 x 值的范围 [xMin, xMax] **可选（具有智能默认值）：** * **范围** ：Y 轴限制 [yMin, yMax]（如果未提供，则自动计算） * **交互点**：滑块的初始 x 位置（默认值：域的中点） * **滑块步长**：滑块移动的增量（默认值：(xMax - xMin) / 100） * **轴标签** ：x 和 y 轴的自定义标签（默认值：“x”和“y”） * **副标题** ：简要描述（默认：函数表达式） * **上下文**：将使用此内容的课程/章节（用于教育内容） **对话示例：** 用户：“创建正弦函数图” 助理：“我将创建一个交互式正弦函数图。让我收集一些详细信息： - 标题：“正弦函数可视化” - 函数：sin(x) - 定义域：您想要 -2π 到 2π（大约 -6.28 到 6.28）吗？ - 这是针对特定课程或章节的吗？” 提示用户时使用清晰、友好的语言。根据常见的数学约定提供合理的默认值。 ### 步骤 2：创建目录结构按照标准化模式创建 MicroSim 目录：文档/sims/[microsim 名称]/ ├── main.html ├── 样式.css ├── 脚本.js ├── 索引.md └── 元数据.json **命名约定：** * 使用 kebab-case （小写字母带连字符） * 具有描述性但简洁 * 示例：`正弦函数`、`二次抛物线`、`指数衰减`、`高斯钟形曲线` ### 步骤3：生成main.html 使用“assets/template-iframe-main.html”中的模板并替换占位符： **占位符替换：** * `{{TITLE}}` → 完整标题（例如，“正弦函数可视化”） * `{{SUBTITLE}}` → 函数表达式或描述（例如，“y = sin(x)”） * `{{X_MIN}}` → 最小 x 值（例如 -6.28） * `{{X_MAX}}` → 最大 x 值（例如 6.28） * `{{X_STEP}}` → 滑块步长（例如 0.01） * `{{INITIAL_X}}` → 滑块初始位置（例如 0） **要保留的关键特征：** * 最小正文边距（`边距：0；填充：0；`） * Plotly.js CDN 链接（v2.27.0 或最新稳定版） * 链接到外部`style.css`和`script.js` * 语义 HTML5 结构 ### 步骤4：生成style.css 使用“assets/template-iframe-style.css”中的模板。 **关键要求：** * **主体边距**：必须是“边距：0； padding: 0;` 用于 iframe 嵌入 * **容器填充**：最大 5 像素（在移动设备上减少到 2 像素） * **标题边距**：顶部最大 5 像素，底部 2 像素 * **背景** ：使用 `aliceblue` （存储库标准） * **响应断点**：768px（平板电脑），480px（移动设备） * **绘图高度**：400 像素桌面、300 像素平板电脑、250 像素移动设备 **测试**：确保可视化在 320 像素到 1200 像素的宽度下看起来良好。 ### 步骤5：生成script.js 使用“assets/template-script.js”中的模板并替换占位符： **占位符替换：** * `{{FUNCTION_JS}}` → JavaScript 函数定义函数 f(x) { 返回 Math.sin(x); // 示例 } * `{{X_MIN}}`, `{{X_MAX}}` → 域限制 * `{{Y_MIN}}`, `{{Y_MAX}}` → 范围限制（或自动计算） * `{{FUNCTION_LABEL}}` → 图例标签（例如，“y = sin(x)”） * `{{X_LABEL}}` → X 轴标签（默认值：“x”） * `{{Y_LABEL}}` → Y 轴标签（默认值：“y”） * `{{FILENAME}}` → 导出文件名（例如“正弦函数”） **函数转换指南：** JavaScript 的常见数学表达式：数学符号| JavaScript 代码 ---|--- 正弦 (x) |数学.sin(x) 余弦 (x) |数学.cos(x) tan(x) |数学 tan(x) e^x |数学.exp(x) x^2 | x^2 Math.pow(x, 2) 或 x**2 √x |数学.sqrt(x) ln(x) |数学.log(x) log₁₀(x) | log₁₀(x) |数学.log10(x) |x| |数学.abs(x) **自动计算范围**如果未提供： // 对函数进行采样以查找 y 范围常量样本点 = 100; const yValues = []; for (令 i = 0; i <= 样本点; i++) { const x = xMin + (xMax - xMin) * i / 样本点； yValues.push(f(x)); } const yMin = Math.min(...yValues) * 1.1; // 添加 10% 的填充 const yMax = Math.max(...yValues) * 1.1; ### 第6步：创建index.md文档使用“assets/template-index.md”中的模板并进行自定义： **必填部分：** 1. **YAML frontmatter** 包含标题、描述、quality_score 2. **一级标题** 与标题匹配 3. **交互式可视化**（iframe 嵌入） 4. **全屏链接按钮** 5. **在 HTML 代码块中复制粘贴嵌入代码** 6. **概述** \- 目的和特点 7. **如何使用** \- 分步说明 8. **教育应用** \- 特定主题的用例 9. **定制指南** \- 如何修改MicroSim 10. **技术细节** \- 库版本、实现说明 11. **课程计划建议** \- 学习目标、活动、评估 12. **参考文献** \- 文档和资源的链接 **特定功能定制：** * **三角** ：提及周期性、幅度、相移 * **多项式**：讨论度、根、转折点 * **指数** ：突出增长/衰退，渐近线 * **对数** ：注意域限制，逆关系 **课程计划质量**：提供具体的、可操作的活动以及使用滑块交互性的问题。示例： **活动 1：查找特定值（10 分钟）** 1. 使用滑块找到 f(π/2)。您观察到什么价值？ 2. 当 x 值是多少时，f(x) = 0.5？（近似使用滑块） 3. 挑战：找到可见范围内 f(x) = 0 的所有 x 值。 ### 步骤7：创建metadata.json 使用“assets/template-metadata.json”中的模板： **都柏林核心必填字段：** * `title` \- 与 MicroSim 标题相同 * `description` \- 1-2 句摘要 * `creator` \- 作者姓名或组织 * `date` \- 创建日期（YYYY-MM-DD 格式） * `subject` \- 关键字数组（包括“数学”加上特定主题） * `type` \- 始终“交互式模拟” * `format` \- 始终为“text/html” * `语言` \- 始终为“en-US” * `权利` \- 许可证（通常为“CC BY 4.0”） **可选教育领域：** * `受众` \- 目标学习者（例如，“高中生”、“大学本科生”） * `educationalLevel` \- 年级/水平（例如，“11-12 年级”、“本科生”） * `learningResourceType` \- 始终为“交互式绘图” * `interactivityType` \- 始终“活跃” * `典型学习时间` \- ISO 8601 持续时间（例如，“PT10M”为 10 分钟） **主题关键词选择：** 从以下选项中选择 3-5 个特定关键字： * 数学：代数、几何、三角学、微积分、统计学 * 物理学：运动学、波、热力学、电磁学 * 工程：信号、控制系统、电路 * 计算机科学：算法、数值方法、机器学习 ### 第 8 步：测试和验证执行以下检查： **视觉测试：** 1. 在浏览器中打开`main.html` 2.验证绘图正确渲染 3. 检查轴是否有标签且可读 4.确认悬停时出现工具提示 5. 测试滑块交互 - 点应沿曲线平滑移动 6. 调整浏览器窗口大小 - 验证响应行为 **功能测试：** 1.滑块范围：确保滑块覆盖整个x域 2. 点精度：验证点位置与滑块值匹配 3. 工具提示：检查坐标精度（小数点后三位） 4.导出：测试PNG导出功能 5. 移动设备：在小屏幕尺寸上进行测试（最小宽度 320px） **文件审查：** 1. 验证 iframe 嵌入在 `index.md` 中是否有效 2.检查所有占位符是否被替换 3. 确保课程计划针对具体职能 4. 验证所有 Markdown 链接是否有效 **元数据验证：** 1.确认`metadata.json`是有效的JSON 2. 检查所有必需的都柏林核心字段是否存在 3. 验证主题关键词是否相关 **整合（如果是教科书项目的一部分）：** 1. 如果需要，更新 `mkdocs.yml` 导航 2.相关章节添加对MicroSim的引用 3. 词汇表术语的链接（如果适用） ## 最佳实践 ### 教育设计 1. **工具提示内容**：使用教育定义，而不仅仅是原始坐标 * 好：“当 x=π/2 (1.571) 时，sin(x) 达到最大值 1” * 避免：“1.571, 1.000” 2. **滑块目的**：设计促进探索的滑块活动 *“找到 f(x) = 0 的位置” *“当x接近无穷大时会发生什么？” *“找到最大值” 3. **课程整合**：参考具体课本概念 * 章节链接 * 使用与教材一致的符号 * 解决常见的误解 ### 技术设计 1. **函数采样** ：最少使用 500 个点以获得平滑曲线 2. **域名选择** ：选择显示关键功能的域名 * 三角函数：显示 1-3 个完整周期 * 多项式：如果可能，包括所有实根 * 指数：显示有意义的变化（3-5 个数量级） 3. **范围计算** ：在极值之上/之下添加 10% 的填充，以提高视觉清晰度 4. **响应式设计**：测试宽度：320px、480px、768px、1024px、1200px 5. **性能** ：将总点数保持在 2000 以下，以实现平滑渲染 ### 辅助功能 1. **颜色选择**：确保足够的对比度（WCAG AA 最低） 2. **字体大小**：最小 12 像素，在桌面上最大放大 16 像素 3. **替代文本**：提供功能行为的文本描述 4. **键盘导航**：滑块应可通过键盘访问（内置 HTML 范围输入） ### 文档质量 1. **数学符号**：使用正确的 LaTeX 或 Unicode 符号 * π 不是 pi，≈ 不是 ~，² 不是 ^2（在 Markdown 文本中） 2. **代码示例**：提供复制粘贴就绪的代码片段 3. **参考文献**：权威来源的链接（MDN、Plotly 文档、数学参考文献） ## 常用功能配置 ### 三角函数 // 正弦函数函数 f(x) { return Math.sin(x); } // 定义域：-2π 到 2π（-6.28 到 6.28） // 范围：-1.5 到 1.5 // 余弦函数函数 f(x) { 返回 Math.cos(x); } // 定义域：-2π 到 2π // 范围：-1.5 到 1.5 // 正切函数（有不连续性）函数 f(x) { return Math.tan(x); } // 定义域：-π 到 π（-3.14 到 3.14） // 范围：-10 到 10（受限于可见性） // 阻尼正弦波函数 f(x) { return Math.exp(-x/5) * Math.sin(x); } // 域：0 到 20 // 范围：自动计算 ### 多项式函数 // 二次函数 f(x) { 返回 x**2; } // 域：-5 到 5 // 范围：0 到 25 // 立方体函数 f(x) { 返回 x**3 - 3*x; } // 域：-3 到 3 // 范围：自动计算 // 具有多个转折点的四次方函数 f(x) { 返回 x**4 - 4*x**2 + 1; } // 域：-3 到 3 // 范围：自动计算 ### 指数和对数 // 指数增长函数 f(x) { 返回 Math.exp(x); } // 定义域：-2 到 2 // 范围：0 到 10 // 指数衰减函数 f(x) { return Math.exp(-x); } // 域：0 到 5 // 范围：0 到 1.2 // 自然对数函数 f(x) { return Math.log(x); } // 定义域：0.1 到 10（必须为正数） // 范围：自动计算 // 高斯/正态分布函数 f(x) { 常量 mu = 0，西格玛 = 1； return Math.exp(-0.5 * ((x-mu)/sigma)**2) / (sigma * Math.sqrt(2*Math.PI)); } // 域：-4 到 4 // 范围：0 到 0.5 ### 物理与工程 // 抛射运动（轨迹）函数 f(x) { 常量 v0 = 20，角度 = 45 * Math.PI/180，g = 9.8；返回 x * Math.tan(角度) - (g * x**2) / (2 * v0**2 * Math.cos(角度)**2); } // 域：0 到 40 // 范围：自动计算 // 简谐振动函数 f(x) { 常量 A = 1，欧米茄 = 2，phi = 0；返回 A * Math.cos(omega * x + phi); } // 域：0 到 10 // 范围：-1.5 到 1.5 ## 故障排除 ### 问题：绘图显示为空白 **原因：** * 函数对于某些 x 值返回 NaN * 域/范围不匹配 * JavaScript函数语法错误 **解决方案：** * 检查浏览器控制台是否有错误 * 验证`script.js`中的函数定义 * 使用样本值测试函数：`console.log(f(0), f(1), f(-1))` * 添加域名验证：函数 f(x) { 如果 (x <= 0) 返回 NaN； // 对于日志函数返回 Math.log(x); } ### 问题：滑块不更新点 **原因：** * `Plotly.restyle` 中的跟踪索引不正确 * 未附加事件监听器 * 滑块 ID 不匹配 **解决方案：** * 验证点轨迹为索引 1（曲线为索引 0） * 检查滑块 ID 是否匹配：`document.getElementById('x-slider')` * 确认事件监听器是在 DOM 加载之后 * 测试使用： `console.log('Slider value:', e.target.value)` ### 问题：工具提示显示不正确的值 **原因：** * 悬停模板格式错误 * 点坐标计算不正确 **解决方案：** * 检查跟踪定义中的 `hovertemplate` 语法 * 验证小数精度：`%{x:.3f}` 为 3 位小数 * 测试点计算：`console.log(pointX, pointY)` ### 问题：iframe 中的布局太局促 **原因：** * 边距/填充太大 * 地块高度对于容器来说太高 **解决方案：** * 将容器内边距减少到最大 2-5px * 检查响应断点是否工作 * 测试iframe高度：尝试500px、600px、700px * 验证 Plotly 布局中的“margin”：边距：{l：50，r：20，t：10，b：50} ### 问题：函数看起来有锯齿/像素化 **原因：** * 样本点不够 * 域对于点数来说太大 **解决方案：** * 增加配置中的“numPoints”（尝试 500-1000） * 对于不连续函数，处理特殊点 * 在快速变化的区域附近添加更多点 ## 参考文献 ### Plotly.js 文档 * [Plotly.js 官方文档]() * [折线图指南]() * [散点图]() * [悬停文本和格式]() * [布局配置]() * [响应式绘图]() ### JavaScript 数学函数 * [MDN 数学对象]() * [Math.sin()]() * [Math.pow()]() * [Math.exp()]() ### 教育资源 * [Desmos 图形计算器]() \- 函数可视化参考 * [GeoGebra]() \- 交互式数学软件 * [可汗学院 - 函数]() ### MicroSim 标准 * [MicroSim 标准化技能]() \- 质量标准和要求 * [都柏林核心元数据]() \- 元数据标准 * [Plotly.js CDN]() \- 最新的库版本

数学函数绘图仪 Plotly

包含技能