AI伴学 | 用DeepSeek边学边玩

我是永不停歇、探索不止的智汇风渔AI。用AI启迪思维✨，用智能重塑可能🚀，让每个文字都闪耀科技与人文交融的光芒。

二、体验地址：

https://4nn3mszq.html2web.com

三、如何做同款（继续优化）

1、打开DeepSeek，选择专家模式并输入提示词

2、提示词如下（自行优化修改）

这是一份参照你提供的“闰年算法”提示词结构，为你编写的**新主题提示词**。这个新主题选用了与逻辑判断非常相似的**“成绩等级判定算法”**，它同样具备多分支判断、输入输出和明确的逻辑规则，非常适合用来制作交互式教学网页。*****提示词内容如下：**请为我创建一个用于教学“成绩等级判定算法”的交互式流程图网页，具体要求如下：**一、页面整体布局与视觉风格**- 页面采用左右两栏布局，整体背景使用柔和渐变（例如 #f0f4f8 到 #d9e2ec），内容区域为白色圆角卡片，带有细腻阴影。- 左侧为侧边栏（宽度约 340px），右侧为主内容区，用于展示流程图。- 标题居中显示“成绩等级判定流程图”，副标题为“可视化规则：90分及以上为优秀，60分以下为不及格，其余为及格”。**二、左侧边栏功能模块**1. “逻辑选项”区域：   - 标题旁有提示文字“请将正确的逻辑拖入流程图”。   - 提供四个可拖拽的选项卡片，每个卡片左侧有圆形彩色徽章，显示字母 A、B、C、D。   - 选项内容分别为：     A. 分数 < 60?（徽章红色 #e74c3c）     B. 分数 >= 90?（徽章橙色 #f39c12）     C. 输出“成绩优秀”（徽章紫色 #9b59b6）     D. 输出“成绩不及格”（徽章灰色 #7f8c8d）   - 卡片支持 draggable 拖拽，并带有轻微的悬停上浮效果。2. “交互验证”区域：   - 包含一个分数输入框（type="number"，默认值例如 85，范围 0-100）。   - 一个“开始判定”按钮（绿色渐变，悬停加深）。   - 下方显示判定结果的文字区域。**三、右侧流程图区域（基于 SVG + 覆盖层实现）**1. 流程图使用 SVG 绘制静态框架：   - 顶部“开始”圆角矩形，底部“结束”圆角矩形。   - 判断节点使用菱形，处理/输入节点使用平行四边形，输出节点使用圆角矩形。   - 连接线带箭头，并标注“是”或“否”。   - 初始状态下，所有可填空的节点（两个判断节点、两个输出节点）均为虚线边框、浅灰色填充，并显示占位文字（例如“分数 < 60?”等）。   - （注：“输出‘及格’”的节点可以预设为实线状态，作为默认分支的末端）。2. 流程图节点位置与连线关系（示意，请按合理坐标放置）：   - 开始 → 输入分数   - 输入分数 → 判断1（分数 < 60?）   - 判断1 的“是”分支 → 输出“成绩不及格”（左侧）→ 汇入结束   - 判断1 的“否”分支 → 判断2（分数 >= 90?）   - 判断2 的“是”分支 → 输出“成绩优秀”（右侧）→ 汇入结束   - 判断2 的“否”分支 → 输出“成绩及格”（中间，预设好的节点）→ 汇入结束3. 拖拽填空机制：   - 在每个待填空的节点上方覆盖透明的 dropzone 区域（div），并绑定 data-expected 属性，指明该位置期望的选项字母（A、B、C、D 对应上述位置）。   - 拖拽左侧卡片到对应 dropzone 并松开时：     - 若字母匹配，则将该节点的虚线变为实线，填充为浅青色（#e0f7fa），文字更新为正确内容，并隐藏该 dropzone。     - 若不匹配，弹出提示“逻辑不匹配，请重新思考判定的顺序！”。   - 所有 dropzone 均被填满后，才允许执行“开始判定”。**四、运行流程动画演示**- 点击“开始判定”按钮时，首先校验是否所有选项均已正确放置，若未完成则提示。- 根据输入的分数，模拟执行流程：  1. 清除之前绘制的动态路径和高亮。  2. 显示一个红色箭头（三角形），从“开始”节点出发，沿判断逻辑移动（使用异步延时模拟逐步移动）。  3. 每到达一个节点时，该节点高亮（例如填充亮黄色、边框蓝色加粗）。  4. 移动过程中绘制红色的路径线（SVG path）。  5. 最终根据分数的实际等级判定结果，在结果区域显示“判定完毕：成绩优秀！”或“判定完毕：成绩及格！”等，并根据结果使用不同颜色文字（优秀为紫色，不及格为红色，及格为绿色）。- 动画结束后隐藏红色箭头，按钮恢复可用。**五、技术要求**- 使用 HTML、CSS 和原生 JavaScript 实现，不依赖外部库。- 拖拽功能基于 HTML5 Drag and Drop API。- 流程图静态部分使用内联 SVG，动态路径和高亮通过操作 SVG DOM 实现。- 箭头移动动画建议使用 Promise + setTimeout 控制节奏。请确保最终生成的网页交互流畅、视觉清晰，并完美还原上述所有功能与细节。

出来结果后点击运行即可：

欢迎大家体验，做出更好的工具评论区见哦