AI赋能高中物理课堂教学配速法交互仿真课件的制作
- 2026-10-01 04:20:16
AI赋能高中物理课堂教学配速法交互仿真课件的制作
【角色】请你扮演专业前端开发工程师，根据下面的需求编写单文件HTML代码： 【背景】展示一道高中物理磁场动力学计算题： 空间存在垂直纸面向里的匀强磁场，磁感应强度为 B。质量为 m、带电量为 +q 的带电小球，从原点 O 由静止释放。已知小球运动轨迹最低点的曲率半径等于该点纵坐标的2倍，重力加速度为 g。配图为带垂直向里磁场的xy坐标系，小球从O出发向下弯曲运动。设问：(1) 小球下落任意高度 y 时的速率 v；(2) 小球第一次到达最低点的下落高度 y_m。 【任务】制作静态HTML网页完整呈现该物理题 【要求】 1. 页面分标题区、题干文字区、题图绘制区、问题区四个部分，用header、main、section语义化标签布局； 2. 内嵌CSS，页面内容居中、卡片式白底设计，柔和浅灰页面背景，行高1.6，字体用系统无衬线字体； 3. 引入MathJax的CDN，所有物理公式、变量用LaTeX语法书写渲染； 4. 用div+CSS简易绘制题图：xy坐标轴、叉号代表磁场、小球下凸运动轨迹，标注原点O和点P(x,y)； 5. 代码添加清晰注释，仅保留公式渲染所需脚本，不做多余交互功能。 【约束】 1. 所有代码写在一个HTML文件内，不引用本地资源； 2. 严格照搬原题文字内容，不得修改题干条件； 3. 配色简约学术风，只用黑白灰色系； 4. 代码格式规范缩进整齐，打开即可正常浏览。 从角色，背景，任务，要求，约束五个角度给deepsek写提示词，让deepsek生成一个HTML文件的代码，然后把代码发送给HTML文件编辑器。 配速法交互课件代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>磁场中的带电小球运动 · 原题</title> <!-- MathJax 配置：支持 \( \) 行内公式与 $$ $$ 行间公式 --> <script> window.MathJax = { tex: { inlineMath: [['\\(', '\\)'], ['$', '$']], displayMath: [['$$', '$$'], ['\\[', '\\]']] }, options: { skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'] } }; </script> <!-- 仅保留公式渲染所需的脚本 --> <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <style> /* ==================== 全局基础样式 ==================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { padding: 32px 16px 56px; background: #f3f3f5; /* 柔和浅灰页面背景 */ color: #1b1b1b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ==================== 卡片容器：标题区 / 主内容区 ==================== */ header, main { max-width: 760px; margin-left: auto; margin-right: auto; background: #ffffff; border: 1px solid #e4e4e4; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); } header { padding: 22px 30px; margin-bottom: 16px; } header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 3px; color: #111111; } main { padding: 8px 30px 30px; } /* 各分区间用虚线分隔 */ section + section { margin-top: 26px; padding-top: 26px; border-top: 1px dashed #dcdcdc; } /* ==================== 题干文字区 ==================== */ .stem p { margin: 0; text-indent: 2em; text-align: justify; color: #1b1b1b; } /* ==================== 题图绘制区 ==================== */ .figure-scroll { overflow-x: auto; padding: 4px 0 8px; } .figure-box { position: relative; width: 560px; height: 400px; margin: 0 auto; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; } /* 磁场区域：用重复的 SVG 叉号（×）表示垂直纸面向里的匀强磁场 */ .field { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='50'%3E%3Cg stroke='%239a9a9a' stroke-width='1.6' stroke-linecap='round'%3E%3Cline x1='22' y1='19' x2='34' y2='31'/%3E%3Cline x1='34' y1='19' x2='22' y2='31'/%3E%3C/g%3E%3C/svg%3E"); background-size: 56px 50px; background-repeat: repeat; } /* ---------- x 轴（水平，向右为正） ---------- */ .axis-x { position: absolute; left: 0; right: 0; top: 180px; height: 1px; background: #333333; } .axis-x::after { content: ""; position: absolute; right: -1px; top: -4px; width: 0; height: 0; border-left: 10px solid #333333; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } /* ---------- y 轴（竖直，向下为正，箭头朝下） ---------- */ .axis-y { position: absolute; top: 0; bottom: 0; left: 90px; width: 1px; background: #333333; } .axis-y::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-top: 10px solid #333333; border-left: 5px solid transparent; border-right: 5px solid transparent; } /* ---------- 小球运动轨迹：下凸的椭圆弧 ---------- */ .trajectory { position: absolute; left: 90px; /* 从原点 O 出发 */ top: 180px; /* 起点落在 x 轴上 */ width: 300px; height: 170px; border: 2px solid transparent; border-bottom: 2px solid #333333; /* 只显示底边，形成下凸弧线 */ border-radius: 0 0 50% 50% / 0 0 100% 100%; } /* ---------- 图内文字标注 ---------- */ .tag { position: absolute; font-size: 15px; line-height: 1; color: #1b1b1b; white-space: nowrap; background: rgba(255, 255, 255, 0.75); /* 避免与叉号重叠时看不清 */ padding: 1px 3px; border-radius: 3px; } .tag-o { left: 64px; top: 152px; } .tag-x { left: 534px; top: 150px; } .tag-y { left: 100px; top: 372px; } .tag-b { left: 288px; top: 88px; } .tag-p { left: 126px; top: 310px; font-style: italic; } /* ==================== 问题区 ==================== */ .questions h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #111111; } .question-list { margin: 0; padding-left: 26px; color: #1b1b1b; } .question-list li { margin-bottom: 8px; text-align: justify; } .question-list li:last-child { margin-bottom: 0; } </style> </head> <body> <!-- ==================== 标题区 ==================== --> <header> <h1>原题</h1> </header> <!-- ==================== 主内容 ==================== --> <main> <!-- 题干文字区 --> <section class="stem"> <p> 空间存在垂直纸面向里的匀强磁场，磁感应强度为 \(B\)。质量为 \(m\)、带电量为 \(+q\) 的带电小球， 从原点 \(O\) 由静止释放。已知小球运动轨迹最低点的曲率半径等于该点纵坐标的 \(2\) 倍， 重力加速度为 \(g\)。 </p> </section> <!-- 题图绘制区 --> <section class="figure"> <div class="figure-scroll"> <div class="figure-box"> <!-- 匀强磁场：垂直纸面向里的叉号阵列 --> <div class="field"></div> <!-- 坐标轴 --> <div class="axis-x"></div> <div class="axis-y"></div> <!-- 小球运动轨迹（从 O 出发向下弯曲） --> <div class="trajectory"></div> <!-- 图内标注 --> <span class="tag tag-o">O</span> <span class="tag tag-x">x</span> <span class="tag tag-y">y</span> <span class="tag tag-b">B</span> <span class="tag tag-p">P(x, y)</span> </div> </div> </section> <!-- 问题区 --> <section class="questions"> <h2>求：</h2> <ol class="question-list"> <li>小球下落任意高度 \(y\) 时的速率 \(v\)；</li> <li>小球第一次到达最低点的下落高度 \(y_m\)。</li> </ol> </section> </main> </body> </html>
关注
重播 分享 赞
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
