❝
这几个月小编一直在琢磨一件事：怎么把教学PPT做得更有质感、更显专业，还能巧妙结合多媒体，让课堂互动“活”起来？
历经一番“折腾”，在搜集资料与反复测试后，我们终于功夫不负有心人，找到了一个能让课堂互动“活”起来的完美组合拳——WPS 遇上 CodeBuddy IDE，二者深度融合将迸发出怎样的神奇力量？实践出真知，让我们一起揭晓！
所需软件列表
| 软件名称 | 官方介绍与核心功能 | 官方链接 |
|---|---|---|
| CodeBuddy IDE | 腾讯云推出的AI智能编程伙伴。提供覆盖编码、扩展与协作的全栈开发生态，支持插件、IDE、CLI三端，助力开发者实现从需求分析到部署上线的全流程高效开发。 | https://copilot.tencent.com/ide/ |
| WPS | 金山办公推出的多功能办公软件套件。支持Word、Excel、PPT等多种文档格式的查看与编辑，并提供强大的多人在线协作功能和WPS AI智能助手。 | https://platform.wps.cn/ |
实践过程
🔈打开CodeBuddy IDE，并输入下面的这个文本👇
❝
推荐使用内置的GLM-4.6大模型并开启“计划模式”
开发一个现代化响应式设计的凸透镜成像模拟实验网页，采用HTML+CSS+JS实现。具体要求如下：
1) 三栏式响应布局：
- 左侧交互面板：包含焦距调节滑块、物距精密旋钮、物体高度输入框、光源类型选择器
- 中部SVG实验区：实时渲染凸透镜、物体、像及三条特征光线路径
- 右侧数据面板：动态显示物距/像距/放大率等参数，自动判断并标注成像性质
2) 交互功能：
- 支持鼠标拖拽物体和数值输入两种调节方式
- 参数变化时即时计算并更新成像效果
- 数据面板同步显示虚实像、正倒立、放大缩小等结论
3) UI设计要求：
- 科技蓝为主色调，搭配简洁线条图标
- 微阴影立体效果，所有交互元素添加平滑动画
- 提供实时视觉反馈和操作引导提示
4) 扩展功能：
- 动态绘制物距-像距关系曲线图
- 实时更新放大率变化趋势图
- 支持实验数据记录和截图导出功能
5) 性能要求：
- 确保实时渲染流畅，动画过渡自然
- 完整支持教学演示、自主探究和数据分析
- 响应式设计适配桌面和移动端，支持手势操作
发送这段指令后，它会给出“任务清单”
等待一会儿就可以得到完美的网页，但是这个网站的CSS和JS是分开的，会导致插入到PPT中的效果会变，所以要让它去更改。
🔈此时需要输入以下指令来实现都在index.html文件中👇
将网站的所有CSS样式和JavaScript代码整合到一个HTML文件中，要求保持原有功能完整且不出现冲突。需要将外部引用的.css和.js文件内容直接嵌入到HTML的<style>和<script>标签中，并确保合并后的文件结构清晰可读。同时处理可能存在的依赖关系和加载顺序问题，最终生成一个完整的独立HTML文件。
此时如下图这样就可以了
打开WPS，新建一个演示
创建完成后，点击“分享”并开启“和他人一起查看”
然后就会自动变成一份在线的PPT
点击“插入代码”
返回CodeBuddy IDE复制代码到文本框里
第一次插入代码会有下图的提示，选择“信任即可”
此时这个网页就被嵌入到PPT中了
效果请看VCR
参与讨论