夜雨聆风武汉市东湖高新区中小学教师
人工智能应用优秀案例展示
从“寻路”到“循理”
——AI交互工具赋能算法思维落地
【AI助学】
问题情境
在小学信息科技《算法应用在身边》一课中，核心目标是让学生理解“路径规划算法”如何从多条路线中选出“最优解”。但传统教学依赖静态图示或口头描述，学生难以具象化理解“数据输入”“算法处理”与“最优输出”之间的动态逻辑关系，导致对算法的认知停留在概念记忆层面，无法内化为可迁移的计算思维。学生知道导航能推荐路线，却不理解“为什么这条就是最优的”，缺乏用数据支撑决策的思维。
本案例使用DeepSeek生成《路径选择模拟器》交互式网页，实现通过AI交互工具赋能学生算法思维落地。
视频学习
操作步骤
01
第一步：登录平台
打开并登录DeepSeek网站。
02
第二步：输入提示词
生成《路径选择模拟器》互动网页
参考提示词：
请创建一个小学五年级信息科技课使用的“路径选择模拟器”互动网页。
项目背景是小明一家15:30到达酒店，16:00洱海游船截止，需要在30分钟内从酒店赶到登船点。
界面要求采用卡通童趣风格，配色鲜艳，适合小学生审美；
布局分为四个清晰区域：标题区、路线图观察区、交互参数设置区、计算结果展示区，并支持响应式设计适配平板和电脑。
标题区需包含主标题“路径选择模拟器”……（此处可根据实际情况写）
技术要求包括使用纯HTML、CSS和JavaScript实现，将所有代码整合到一个HTML文件中，添加适当的动画效果增强交互体验，并在底部标注版权信息“小学信息科技课堂互动工具 - 路径选择模拟器 © 2025 | DS & 汪老师创作”。
请根据以上要求生成完整的HTML代码。
03
第三步：优化与调整
查看生成的代码，预览效果。如果生成的网页不满意，可以返回对话界面，输入相应的指令继续优化，直至达到满意效果。
优化提示词（参考）：
①“请优化路线图的显示：路线图区域现在显示的是占位符，请改成直接显示图片，使用img标签，图片名为bg01.png，图片需要自适应容器大小。”
②“请修改路线选择菜单：删除'路线四'选项，只保留三条路线。同时，取消自动参数设置功能，保持所有下拉菜单初始为空白，让学生必须手动选择所有参数。”
③“请优化计算结果排版：现在的结果显示是竖排的，请改成横排显示，使用Flex布局，将所有参数和结果在一行中清晰展示。”
④“请添加参数验证功能：如果学生选择的参数与路线特征不匹配，显示详细错误信息，不输出计算结果。错误信息应该明确说明哪个参数错了，正确值应该是什么。”
⑤“请优化错误提示的样式：使用红色背景和边框突出显示错误，每条错误信息前加上感叹号图标，并添加提示引导学生仔细观察路线图。”
⑥“请增加时间判断功能：根据路线的固定耗时（路线一15分钟，路线二20分钟，路线三25分钟），判断是否能在30分钟内到达，并在结果中明确显示能否赶上游船。”
⑦“请优化整体配色：现在的边框颜色太多有点花哨，请简化边框颜色，主要使用橙色（ffcc5c）作为主边框颜色，路线图使用绿色边框，交互区使用橙色顶部边框。”
⑧“请调整底部信息：将年份从2023年改为2025年，并标注'DS & 汪老师创作'。”
04
第四步：完成与导出
复制最终生成的HTML代码，保存为HTML文件，并将路线图图片命名为bg01.png放在同一目录下，一个完整的《路径选择模拟器》互动网页就做好了。
案例作者
光谷九小 汪思（信息科技）
区优秀青年教师、区教坛新秀、区百优教师，曾获得区信息技术优质课一等奖；所带班级曾获武汉市先进班集体称号，指导多名学生在省、市级比赛中获得奖项；参与多项省级课题研究，多篇论文获奖和发表。
END
编辑 | 霍芬芳
审核 | 付红军
终审 | 李 媛
以智赋能 共育未来
欢迎关注，了解更多光谷AI教育动态！
