乐于分享
好东西不私藏

我给课堂工具加了 AI:学生提交完秒出评价,教师一键生成教学建议

我给课堂工具加了 AI:学生提交完秒出评价,教师一键生成教学建议
最近在给自己用的课堂数据采集工具QuickForm添加两个小功能。回顾下,QuickForm它的核心很简单:学生打开一个链接,填写数据提交,老师能看到实时汇总。如果不了解它,请划到最下面去看QuickForm专属合集。

用了一段时间,有两个需求越来越强烈:一是学生提交后不知道自己答得怎么样,二是课后我要手动翻数据才能整理共性问题。这次趁着端午假期,给它加了两个 AI 功能,今天来聊聊做了什么、怎么做的。

- - -
🎛️ 一、功能入口:编辑任务时打开两个开关

在编辑任务界面,我加了两个开关,分别控制两项功能:

1
启用学生快捷登录——开启后,学生访问任务页面时,会先弹出一个"输入姓名 + 座位号"的登录界面,身份信息会随数据一起提交记录下来。
2
启用 AI 课堂分析——开启后,学生提交数据时 AI 会自动对其答题情况给出个性化评价;教师页面也会出现一个"AI 教学建议"按钮,汇总全班情况给出建议。

开关设计的好处是按需使用——不想要 AI 的任务,直接关掉,不影响原有的轻量采集流程。

- - -
🎓 二、学生端:先登录,再答题

开启学生快捷登录后,学生用老师分享的链接(http://[服务器]/s/[任务ID])打开页面,会先看到一个紫色渐变的登录界面,输入姓名和座位号后才能进入答题页。

登录后,身份信息会被存在浏览器的 sessionStorage 里,并通过请求头自动附加到每一次数据提交。老师在后台看到的数据里,每条记录都会带上对应学生的姓名和座位号,不再是一堆匿名数据。

💡技术细节:由于学生答题页面是以 iframe 嵌入的方式加载的(老师上传的 HTML 文件),身份信息通过 fetch/XHR 拦截器注入请求头,同时还处理了中文姓名的 URL 编码问题,确保汉字不会在传输中乱码。
- - -
🤖 三、学生端:提交后出现 AI 评价悬浮按钮

开启 AI 课堂分析后,学生提交答题数据后,页面右下角会出现一个"AI 评价"的悬浮按钮。按钮有意做得大一些、颜色明显,因为实测发现按钮太小学生完全不会去点。

点击按钮,会弹出一个评价弹窗,里面是 AI 针对这位同学这次提交的个性化分析:答对了哪些、哪里还有欠缺、建议怎么复习……关闭弹窗后,悬浮按钮重新出现在右下角,方便随时再回来看。

同一次提交只请求一次 AI,关闭后再点直接读缓存;如果学生重新提交了新答案,下次点击才会重新生成。这样避免了每次开弹窗都消耗 API 调用。

- - -
👩‍🏫 四、教师端:AI 教学建议一键生成

教师使用单独的链接(http://[服务器]/t/[任务ID])打开教师页面,可以看到左侧学生提交列表,右侧是数据展示。

同样在右下角,有一个橙色渐变的"AI 教学建议"悬浮按钮,和学生端的紫色按钮区分开,一眼就知道是教师功能。

点击后,AI 会读取全班所有已提交的数据,汇总分析,给出:

整体表现概述(全对率、共性问题)
分层教学建议(优秀生拓展、薄弱生补强)
课堂互动策略(错题复盘、小组讨论等)

弹窗里还有"重新生成"按钮,如果又有新同学提交了数据,可以手动刷新建议内容。

- - -
🔧 五、实现方式简述

这两个功能的底层逻辑并不复杂,核心拆解如下:

身份信息传递

学生登录后,姓名和座位号存入浏览器sessionStorage。通过全局拦截fetchXMLHttpRequest,把身份信息注入每次请求头(X-Student-NameX-Seat-Number),后端接收时 URL 解码写入数据库。

AI 评价生成

后端拿到学生的提交数据后,调用 AI 接口(可配置为 DeepSeek、通义千问等),把题目 + 学生答案 + 提示词打包发送,返回评价文本存入数据库。学生端通过GET /api/[任务ID]/evaluation/[提交ID]获取;如果还没生成,就用POST触发生成。

教学建议生成

教师端拉取该任务下全部提交数据,打包成结构化文本发给 AI,提示词要求输出整体分析和分层建议,限制在 200 字以内(避免输出冗长废话)。

# 伪代码示意submissions = db.query(Submission).filter_by(task_id=task_id).all()prompt = build_teacher_prompt(submissions)# 结构化拼接suggestion = ai_client.chat(prompt)# 调用 AI 接口return {"suggestion": suggestion}
💡一个小坑:模板里原本写的是var AI_ENABLED = true === 'true'——JS 严格相等类型不同,始终为false,导致功能始终不显示。改成直接输出 JS 布尔值var AI_ENABLED = true才解决。调了两天的玄学 bug,最后发现是一个引号的问题……
- - -
📌 六、目前的限制和后续想法

现在是本地部署,局域网内使用,适合班级内网课堂场景。AI 接口需要自己配置 key,不同模型效果差异比较大,DeepSeek 目前用下来评价内容比较有针对性。

后续想探索的方向:

评价内容支持 Markdown 渲染,让结构更清晰
教师端可以直接看到每位学生的评价,而不只是汇总建议
提示词支持教师自定义,比如指定评价维度或评分标准

这个工具还在持续迭代,目前主要是自己课堂在用。有类似需求的老师欢迎交流,也欢迎在评论区告诉我你最想要哪个功能。

#AI教育#课堂工具#信息科技#教学效率#Flask

— 互动时间 —

往期文章:

高考报志愿,教育部的"云咨询周"你用了吗?

不用安装,打开浏览器就能传送文件

花了96块钱,两天就把AI编程积分烧光了,我悟了

公开课不慌!QuickForm这两大新功能,让你从在线调试到本地采集一步到位

告别传统PPT教学 迎来HTML时代?

一个软件搞定所有学科!全科老师必备的AI助手 

搞不懂数据流动的老师有福了,飞象老师支持数据回收功能了,还收录于国家平台

(测试篇)国家平台“用AI”更新,已有19个AI教学工具了 

豆包10次限制?DeepSeek教我一招

视频号视频想保存到本地?一个插件就够了  

AI生成网页如何免费托管?4个工具帮你随时随地分享作品 

这个免费画图网站,推荐给所有老师

免费激活Windows系统,3分钟搞定! 手把手教程来了

(所有合集)定期更新
如果你是家长,欢迎关注"此一方塘",在那里我会分享:英语启蒙方法和资源、家庭教育心得、中年女性成长、生活感悟和自我提升。教育的路上,我们一起走~ 💪
喜欢就关注
动动小手点个
在看最好看