【人工智能和HTML技术!】开发高中化学实验个性化学习系统!

化学教育好资源，请点击蓝色的“化学教育期刊”添加关注！

公告：《化学教育》官网http://www.hxjy.chemsoc.org.cn，建议大家认准网址及网站模样，以免被假网站欺骗！

【请读者和作者通过电子邮件与编辑联系，不建议拨打电话！】

基于人工智能和HTML技术的高中化学实验个性化学习系统设计

付士林¹王高原²

(1. 临沂市教育科学研究院  山东临沂  276000；2.兰陵县第十中学  山东兰陵  277700）

稿件编号：2026-04-0036

1 研究背景

高中化学实验基础知识涵盖实验仪器识别与使用、基本操作规范、试剂存放与实验安全、物质分离提纯、物质检验鉴别及新课标必做实验解析等内容，是化学学科核心素养培养的重要载体，也是高考化学实验题型的核心考查内容。《普通高中化学课程标准（2017年版2020年修订）》明确要求学生能根据实验需求选择仪器、装置与试剂，完成简单物质制备、性质检验等实验，并能通过实验现象形成初步结论^[1]。

但传统高中化学实验基础教学面临诸多现实困境：其一，知识点碎片化特征显著，仪器使用、操作步骤、安全规范等内容分散于教材各章节，学生难以自主梳理成体系，学习效率低下；其二，课堂教学时长有限，教师难以对基础细节逐一讲解，更无法针对学生个体知识漏洞开展个性化辅导，基础薄弱学生易出现学习断层；其三，学生自主复习缺乏针对性，盲目刷题难以精准定位薄弱点，实验基础知识巩固效果不佳。

近年来，人工智能与教育的深度融合为化学实验教学改革提供了新路径。已有研究利用AI与HTML5技术开发化学符号个性化学习系统^[2]，借助DeepSeek设计“化学式消消乐”“有机化学小游戏”等游戏化学习载体^[3-4]，基于Unity3D开发化学仪器科普类教育游戏^[5]，均证实游戏化教学能有效提升学生化学学习兴趣与参与度^[6]。在此基础上，研发聚焦高中化学实验基础知识、适配教学实际、兼具系统化梳理与个性化训练的HTML轻量化学习系统，既契合HTML无需客户端、多终端适配的技术特性，又能实现学生随时随地的个性化学习，具有重要的教学实践价值。

2 高中化学实验基础学习系统设计

2.1 系统总体框架设计

系统总体框架设计，如图1。系统以高考高频实验考点为导向，遵循“系统化梳理-个性化练习”学练结合原则，设计两大核心模块：高中化学实验基础知识梳理与交互式化学实验基本能力训练，适配不同学情学生的选择性、重复性学习需求。其中，知识梳理模块聚焦实验基础知识点的系统化、可视化呈现，涵盖仪器识别、操作规范、安全防护等6大核心内容；能力训练模块以高考真题为题库，设计仪器识别、操作判断等4类游戏化交互练习，通过积分闯关、即时反馈实现知识点的巩固与应用。

图1 高中化学实验基础学习系统总体框架

2.2 系统构建实现

2.2.1 实现技术

系统以HTML+JavaScript为核心搭建前端交互页面，借助豆包、Trae CN等人工智能助手完成页面布局代码生成、交互功能开发与题库设计；将开发完成的HTML文件部署于网络空间，搭建可访问网站（http://chemexperiment.cn），并实现移动端适配，支持电脑、平板、手机等多终端跨平台访问。

2.2.2 设计流程

系统设计遵循“需求定位-模块搭建-题库开发-交互实现-部署优化”标准化流程，如图2，具体步骤如下：

（1）模块与功能定位：明确“知识梳理”与“能力训练”两大核心模块的内容边界与交互功能，确保模块贴合高中化学实验教学与高考考查要求；

（2）高考真题题库开发：选取近5年全国各省市高考化学实验基础真题，拆解为仪器识别、正误判断等题型，整理答案与解析并建立标准化JSON题库；将题目复制给豆包的前提下，输入指令：根据题目生成JSON题库。部分代码示例如下：

{id: 1, 

text:"题干", //该部分为题干

imgUrl:"../images/example.png",//该部分为图片的对于文件的相对路径，上级目录为 ../

answer:正确答案, //正确为true，错误为false

analysis:"答案解析" //答案的解析},

记录图片文件的相对路径，为了便捷，将图片名称按顺序修改为“数字.png”，然后在 HTML 文件中JSON部分的imgUrl中填入该相对路径，以实现文件关联；

（3）多模态交互设计：结合视听学习理论，设计仪器图片展示、语音播放、悬停展开详情等知识呈现形式；练习模块采用积分闯关游戏化形式，通过填空、正误判断完成答题，将传统选择题拆分为独立小题，降低答题难度，增强体验感与成就感；

（4）个性化操作按钮设置：添加“下一题”“正确/错误”“返回”“语音播放”“左右键循环”等操作按钮，支持Enter键快捷答题，满足学生个性化学习需求；

（5）图片适配与代码优化：由豆包生成页面代码并预留图片空位，导入提前整理的实验仪器、装置高清图片，通过代码调整图片大小与布局，确保图片、解析、答题模块在移动端完全展示，适配跨终端访问；

（6）代码调试与功能优化：将豆包生成的代码保存为HTML文件，本地运行调试后，通过给豆包指令优化交互漏洞，如实现“答对标绿+积分”“答错标红+解析”的即时反馈功能。

图2 高中化学实验基础学习系统设计流程

2.3 页面布局介绍

系统页面按“登录页-列表页-详情页”层级设计，逻辑清晰、操作便捷，核心页面功能与布局如下：

2.3.1 登录页与列表页

登录页为系统入口，如图3、4。展示“高中化学实验基础知识梳理”与“交互式化学实验基本能力训练”两大版块，分别设置“开始练习”“开始挑战”按钮，学生可根据学习需求自主选择；点击按钮进入对应列表页，列表页清晰呈现各模块核心内容，点击即可进入详情页开展学习，实现“按需选择、精准学习”。

图3 高中化学实验基础学习系统登录面

图4 高中化学实验基础学习系统列表页

2.3.2 高中化学实验基础知识梳理各详情页介绍

该模块聚焦实验基础知识点的系统化梳理，含6大核心详情页，均配备图片展示+文字解析+语音播放功能，实现多模态知识呈现：

（1）常用化学实验仪器的识别与使用：展示33种高中常见实验仪器（烧杯、容量瓶、滴定管等）图，标注仪器用途、使用注意事项与规格特点，支持语音播放仪器核心信息，如图5；

图5 常用化学实验仪器的识别与使用详情页

（2）常考化学实验的基本操作：涵盖药品取用、物质加热、气密性检查、浓硫酸稀释等高考高频操作，分点解析操作步骤与规范要求，如图6；

图6 常考化学实验的基本操作详情页

化学试剂的存放与实验安全：分类讲解易挥发、见光易分解、易燃易爆等试剂的存放规范，详细说明酸/碱灼伤、火灾、中毒等实验事故的应急处理方法，如图7；

图7 化学试剂的存放与实验安全详情页

（4）物质分离提纯的方法与装置：解析过滤、蒸发、蒸馏、萃取分液等分离方法的核心原理、实验装置与操作要点（如过滤“一贴二低三靠”），如图8；

图8 物质分离提纯的方法与装置详情页

（5）物质的检验、鉴别和推断：分常见离子（Fe³⁺、NH₄⁺、SO₄²⁻等）与常见气体（O₂、NH₃、SO₂等）两类，明确检验试剂、操作方法、实验现象与结论，如图9；

图9 物质的检验、鉴别和推断详情页

（6）新课标必做实验全解析：涵盖常见气体制备（Cl₂、NH₃等）与新课标要求的18个必做实验，解析实验原理、装置搭建与操作注意事项，如图10。

图10 新课标必做实验全解析详情页

2.3.3 交互式化学实验基本能力训练各详情页介绍

该模块以高考真题为题库，设计4类游戏化交互练习，均实现随机出题+积分闯关+即时反馈功能，部分核心详情页如下：

（1）化学实验仪器识别：从33种常见仪器中随机抽取20题，采用填空答题形式，答对积8分并标绿，答错标红并给出正确答案，全部回答正确即为闯关成功，如图11；

图11 化学实验仪器识别填空积分闯关详情页

（2）试剂存放与实验安全正误判断：从高考真题拆解的40道小题中随机抽取30题，采用按钮选择形式，答对标绿，答错标红并附解析，完成后显示答对题数目和正确率，如图12；

图12 化学试剂保存与实验安全正误判断详情页

（3）实验装置、操作正误判断：从高考带图真题拆解的108道小题中随机抽取40题，搭配实验装置/操作图，答题后即时给出对错判断与详细解析，强化学生对实验装置与操作规范的理解，完成后显示答对题数目和正确率，如图13；

图13 实验装置、操作正误判断详情页

（4）实验操作-现象-结论正误判断：从高考表格型真题拆解的40道小题中随机抽取30题，判断“操作-现象-结论”的逻辑合理性，答错附精准解析，帮助学生规避高考常见逻辑错误，完成后显示答对题数目和正确率，如图14。

图14 实验操作-现象-结论正误判断详情页

3 实践测试

选取本校20名高三学生作为实践对象，将系统网址发放给学生，让其利用假期通过电脑、平板、手机等终端自主学习。一段时间后依托教室多媒体开展化学实验基础知识竞赛，以答题时间+正确率为评价标准，评选一、二、三等奖并颁发奖状。

实践结果显示，学生参与意愿与学习兴趣显著提升，竞赛答题平均正确率达95%以上；参与学生反馈，系统的系统化知识梳理帮助其快速构建实验知识框架，游戏化闯关练习让复习巩固更具趣味性，且跨终端访问特性实现了碎片化时间的高效利用，愿意将系统作为实验基础学习的常规工具。

4 研究总结

本研究开发的基于人工智能和HTML技术的高中化学实验个性化学习系统，有效解决了传统实验教学中知识点碎片化、个性化辅导缺失、复习效率低下等问题，具有三重价值：其一，对学生而言，将碎片化实验知识系统化、可视化、游戏化，帮助学生精准定位知识薄弱点，高效梳理知识框架，提升实验基础知识掌握效率与实验操作规范意识；其二，对教师而言，减轻基础知识点讲解、作业批改、学情分析的教学负担，教师可聚焦学生共性问题开展针对性教学，实现分层施教，提升实验教学质量；其三，对教学而言，打破实验教学的时空与资源限制，实现跨终端、个性化的线上学习，推动高中化学实验基础教学的数字化、智能化转型，助力教育公平，适配新课标对化学实验教学的要求。

为进一步贴合学生实验基础夯实的核心需求，后续将从四方面优化系统功能：①扩充知识点与题库，对接新教材新增实验基础内容，完善高考高频考点专项练习题库，实现知识点与考题的同步更新；②丰富多模态学习形式，将静态实验图片替换为动态操作视频，添加虚拟实验操作模块，增强学习的直观性与趣味性；③增加个性化学习功能，开发学生账号登录系统，记录学习时长、答题记录与错误题库，实现“错题重练、针对性复习”，提升学习的精准性；④开发一款支持多人同时联机的答题游戏，助力学生关注提升答题速度与正确率。

引用本文：

付士林，王高原.基于人工智能和HTML技术的高中化学实验个性化学习系统设计[J].化学教育（中英文），2026,47（21）：90-97.

【教学与命题的好资源！】尽快订阅2027年《化学教育》期刊！

参 考 文 献

[1]中华人民共和国教育部.普通高中化学课程标准(2017年版2020年修订)[S].北京:人民教育出版社,2020.

[2]https://mp.weixin.qq.com/s/tg3BFaB456SdM7SvNTRgLg

[3]吴思梅,陈新丽.基于生成式人工智能DeepSeek技术的化学游戏设计与研究[J].化学教育(中英文),2025,46(19):92-94.

[4]赵紫璇,李云聪,王涵.利用DeepSeek生成代码制作高中有机化学小游戏[J].化学教育(中英文),2026,47(01):98-99.

[5]赵佳,乔凤天.基于Unity3D的科普游戏设计与实现——以基本化学仪器为例[J].中国教育技术装备,2023,(10):38-42.

[6]蒋丹,关明.中学化学游戏化教学的研究现状——基于CiteSpace的可视化分析[J].化学教与学,2024,(04):9-13+6.

引用本文：

付士林，王高原.基于人工智能和HTML技术的高中化学实验个性化学习系统设计[J].化学教育（中英文），2026,47（21）：90-97.

尽快订阅2027年《化学教育》！

精彩不能错过，立即扫码订阅！

温馨提醒

（1）若留家庭地址，请保证居住小区有自己的信箱且正常使用，以便邮政投递；

（2）若留单位地址，请务必告知贵单位的信件收发室工作人员：订阅了《化学教育》期刊，请协助接收、保管并及时通知您取阅；

（3）所有后续服务由“中国邮政”负责，请注意保留订单号等订阅信息。

化学教育期刊公众号，致力于为化学教师提供优质的内容！版权属于中国化学会《化学教育》编辑部。请长按二维码识别添加关注。

微信征稿：观点评述、教学案例、教学心得、微课视频、优质课件、实验视频、趣味实验、活动报道、科普文章、论文交流、人物事迹、试题评析、新书评介等，新鲜、热门、有趣、实用，统统都可以，让分享促进你我成长，让传播增强化学力量！投稿邮箱：252107789@qq.com,邮件主题请写明“微信投稿+内容主题”（例如“微信投稿：原电池”）。鼓励原创，若参考了他人的文章，请注明来源，以免引起抄袭和剽窃的争议。请保证自己拥有所投作品的著作权，并同意将著作权授权给《化学教育》！

更多好文章，点击“阅读原文”！