摘要：基于HTML5开发的有机化学实验在移动端模拟运行，通过使用二维码作为获取信息资源的快速访问途径，师生可以有效突破时空限制，自由进入实验场景操作仪器。虚拟实验室采用2.5D几何建模，将模型添加到实验场景中，在构建仪器关联的基础上实现了仿真过程，完成了交互设计，并对操作步骤和实验数据进行了测评。

　　关键词：HTML5；几何建模；交互式学习

　　0引言

　　根据第46次《中国互联网络发展状况统计报告》，截至2020年6月，国内网民使用手机和平板电脑的比例为99.2%和27.5%，移动端的使用率和需求量远超过PC端[1]。化学是以实验为基础的学科，实验是教学的主要辅助手段。虚拟仿真体系提供可操控的仿真仪器，学习者的时间和空间不再被限制在电脑端，基于不同的学习目的和方式自由开展，更适合移动端的碎片化学习。数字化的仿真场景同时弥补了高危险实验难以演示、成本昂贵、实验现象不明显的缺憾。

　　有机化学实验作为核心基础课程，受有毒害试剂或者气溶胶环境污染的限制，实验资源也存在一定短缺的问题尤为突出。在现实授课过程中，如果没有足够的实验设施、场景给学生进行全面细致讲解，学生的理解不深入，学习主动性差，势必造成实验原理掌握不扎实，实践技能操作不到位的后果。国内高校化学类专业都积极探索，运用虚拟实验来提高学生的实践技能和综合素质，开发了Unity3D技术的材料测试系统(同济大学)、Flash技术的电位分析仿真实验(大连理工大学)、LabVIEW的虚拟实验资源整合(东北石油大学)等多种虚拟环境[2-4]。

　　在这些虚拟仿真技术的实施过程中，往往重视人机交互性，而忽略非信息技术专业教师面对代码的开发难度及客户端使用需要安装插件的问题。近年来发展迅速的HTML5(hyper text markup language，第五代超文本标记语言)形成全新的融媒体形式内容[5]，拥有跨平台、跨操作系统的新特性[6]，利用器件建模和过程建模的方式开发有机化学虚拟实验，构建满足了移动端仪器培训、学习和化学实验教学的基本需求，对虚拟仿真技术在大学化学中的应用起了示范效应和推广作用，有效地解决传统实验面临的实验需求和实验配置相对不足的矛盾[7-8]。

　　1课件的功能设计与开发流程

　　1.1虚拟实验的功能设计

　　基于HTML5虚拟实验交互设计框架，以学院化学本科专业实验教材中三苯甲醇的制备为例进行技术开发与实践。构建体系主要包含仪器及实验原理的动态展示、实操演示视频及仿真模拟三个部分。在目录页设置按钮引导阅读者点击并跳转，实验演示采用真人操作演示和音频讲解的方式对实验进行介绍。课件的整体框架设计路线如图1所示，实现了零代码编程制作仿真实验交互动画。

　　1.2虚拟实验的开发流程

　　三苯甲醇的制备HTML5交互课件设计包括结构和脚本设计，属于一种以教学性、操作考核化、人机交互性为特点展示的微视频。该虚拟实验框架的开发流程如图2所示。

　　(1)实验仪器建模。虚拟仿真建模分两步实现，即实验仪器比例模型和特征建模。实验仪器比例模型保持蒸馏、回流装置及提纯等实物各部分比例建立的模型，为有机化学体系完善模型素材库；特征建模设置实验仪器的属性及行为控制。

　　(2)实验场景建模。在场景中添加实验名称、导航目录、仪器素材、拖动窗口、计数器、计时器等内容。同时还可以设置音符标志，对背景音乐及提示音效进行静音和播放的切换。

　　(3)实验过程建模。依托虚拟仪器间的框架关系，建立三苯甲醇制备的实验过程模型，完成合成、萃取、表征各板块的交互设计。

　　(4)添加实验测评。针对关键步骤设置不同知识得分点，有效量化测评各板块的仿真实践操作。

　　(5)实验发布。各板块经测试和优化，达到预期效果后，发布HTML5二维码或链接。并且根据用户互动数据统计进行后期跟进及更新。

　　2虚拟实验的实现

　　交互式虚拟实验环境的设计主要遵循三个原则：

　　(1)界面友好，导航清晰。界面的友好性操作对用户端的使用体验至关重要，有助于移动端提高学习效率。(2)适用性。遵循知识内容的适用性原则，力求简洁直观，以帮助学习者厘清实验脉络、提升学习效率。(3)无感登录的便捷性。类似于智能手机微信小程序，绿色无感运行，避免大量的用户登录输入操作[9-10]。

　　2.1仪器几何建模

　　采用3D效果呈现的虚拟实验，运行时易导致仪器资源加载速度慢，或因设备配置较低导致关键帧的丢失，影响用户端的友好体验。应用犀牛建模软件(Rhino)对现实中的实验器件绘制3D模型，基本保持了仪器实物各部分、仪器之间的比例，以保证虚拟模型的真实性。选取清晰、适合拖放及安置旋转下拉条的图片导出，进而用Keyshot插件渲染得到仪器的伪3D图形即2.5D图形。

　　2.2创建实验场景

　　通过对虚拟仿真实验器件x、y、z轴方向的画面设计、视角转换，模仿HTML5影视视频广告中“一镜到底”的创意形式，形成视觉上一气呵成的流畅感。使用者可通过“滑动”手势来切换画面内容，将有机化学实验信息框架进行直观化、可视化，转化为形象、有趣且流畅连贯的视觉元素。同时，使用者手势的上下滑动交互设计的融合可在场景模仿出“视角转换”流畅感的画面。

　　2.3仪器关系建模

　　实验过程是有机化学虚拟实验的核心。在三苯甲醇制备模拟实验的仿真界面中，仅有恒压滴液漏斗或微沸的溶液等单独的个体，若不建立拼接仪器、仪器与药品之间的相互关系，就无法完整进行虚拟实验。这就需要建立特定的仪器关系及实验过程模型，如试管和试管夹、镊子和坩埚等。HTML5带有的触屏响应等功能，拥有强大的交互动画能力，对保存在列表中的仪器图形，可以通过点击、拖拽进度条的方式调整图形的旋转角度。

　　2.4实验过程建模

　　三苯甲醇的制备实验的仿真模拟包括三苯甲醇的制备、产物的提纯以及结构表征。作为课件核心的部分，主要应用Mugeda平台逻辑判断工具中的拖放物体控件技术。制备板块主要涵盖回流装置的拼接过程、跳转界面设计；提纯板块主要包含水蒸气发生装置、蒸馏提纯及产物收集过程的拼接模拟；结构表征主要以交互动画配合文字的形式，生动形象地展示了红外光谱仪的工作原理。

　　2.4.1三苯甲醇的制备

　　利用Mugeda的对三苯甲醇的制备进行交互设计，即合理应用Grignard试剂与仪器拼接顺序完成回流过程，包括实验仪器的模拟安装、安装失败和拼接成功三个页面。根据实验仪器分别设置拖动控件，全部拼接正确则页面成功跳转；否则根据控件中的计时器设置游戏停止并出现相应解析。三苯甲醇制备过程的设计流程如图3所示。

　　2.4.2水蒸气蒸馏

　　三苯甲醇的分离采用水蒸气蒸馏的方法对粗产品进行提纯，涉及仪器较为繁琐，所以实验安装模拟设置类似于拼图游戏，是整个虚拟体系的核心和难点。实验的模拟界面设置为原图预览和模拟安装两个按钮链接。在模拟界面，拖动仪器到正确的位置释放鼠标可获得相应奖励得分，否则仪器会自动回到原位，同时弹出提示解析窗口，及时给予提醒反馈。利用按钮的禁止翻页功能，仪器全部正确组装完成即可跳转至成功页面，三苯甲醇提纯过程虚拟仿真系统的设计流程如图4所示。

　　2.4.3产物表征

　　作为教学方案中的综合性实验，学生完成三苯甲醇的提取与分离后，教师可在有机专业知识内化的基础上进一步引申拓展，应用大型分析测试仪器(如红外鉴定+气质GC-MS联用+高效液相色谱分析)对实验产物三苯甲醇进行定性鉴定与定量分析。学生在移动端可以通过扫描二维码实现对仪器资源的快速访问，获取仪器的参数、操作步骤、注意事项等相关资料，再通过模拟测试来进行巩固，从而能逐级推进地掌握仪器分析的相关操作知识。教师根据后台二维码访问量，判断学生对大型仪器的熟练程度，在条件允许情况下可放手让学生独立完成进样，并对色谱图进行处理。学生指导用“以实补虚”的方式支撑大型仪器虚拟仿真实验的实训，循序渐进地实现从基础实践到高阶科研的衔接。

　　2.5实验测评

　　借助Mugeda平台“预置考题”功能，添加试题、解析和得分。在界面操作的回馈可以判断用户端是否掌握实验操作的关键技术。虚拟仿真系统模拟操作完成后，按照实验步骤、记录的数据和实验测评设置关键得分点，并显示对应解析，增强了自学、测评等反馈信息收集的便捷性。

　　2.6实验发布

　　HTML5型课件基于移动端共享相比传统PC端更加快捷，作品形成的超链接或二维码图片可以通过群共享的方式、微信、微博等社交媒体传播。将二维码印刷在教材对应的章节处，或者插入到教师导学案的PPT中，学生通过扫码在手机上直接打开并运行。发布完成后，Mugeda平台可采集浏览率、转发率、测评统计、点赞等互动数据分析。为发布者有效地提供教学评价，进而实施课件后期的跟进、更新。

　　3结语

　　虚拟仿真技术与有机化学实验课程的教学相结合，已被广泛认为是信息化改革背景下的一项重大技术进步。但是学生在移动端屏幕上的简单操作，并无法完全顺畅地体验传统实验的细节和难度。因此，必须将两者结合，利用课前仿真模拟调动学习兴趣，旨在加深学生对实验核心技能机理的掌握，再通过实践促进统筹协作能力，才能达到有效知识内化、技能强化的目的。此外，课件作用是有限的，将虚拟仿真课件作为信息化教学系统的基本单位，根据本科化学基础知识体系开发系列课程，构建专业教学资源库，激发学生自主设计实验的动手能力，满足自主学习需求，同时也有效促进了教师信息化教学技能的专业成长。

　　参考文献:

　　[1]佚名.中国互联网络信息中心发布第46次《中国互联网络发展状况统计报告》[J].国家图书馆学刊，2020，29(6)：19.

　　[2]周思洁，杨泽亮，董子和，等.基于Unity3D的气相色谱仪虚拟仿真实验系统的构建[J].色谱，2016，34(6)：621-624.

　　[3]刘志广，胡照琴，王海勇，等.基于Flash技术的电位分析仿真虚拟实验室的构建方法研究[J].计算机与应用化学，2006(10)：1026-1030.

　　[4]齐超，张磊，张渤晗，等.基于LabVIEW的暂态电路虚拟实验分析[J].电测与仪表，2016，53(7)：39-44.

　　[5]朱书强，刘明祥.面向移动终端的H5型微课开发研究[J].电子技术，2018，47(1)：32-35，14.

　　[6]盛晓蕾，张玉军.计算机信息技术在大学有机化学教学中的应用[J].日用化学工业，2022，52(8)：913-914.

　　[7]赵腾.基于H5的科普移动微课的设计与开发[D].上海：上海师范大学，2017.

　　[8]郝立坤，何小刚.基于HTML5的虚拟实验建模及实现[J].现代电子技术，2018，41(24)：66-70.

　　[9]杨伟，赵添堃.德国有机化学实验项目式教学实践与启示—以康斯坦茨大学为例[J].化学教育(中英文)，2022，43(18)：125-129.

　　[10]李建凤，廖立敏.有机化学实验课程目标达成评价及结果应用研究[J].化学教育(中英文)，2022，43(24)：56-61.

　　[11]张青芳.基于移动端虚实结合的高职药学专业有机化学实验教学[J].化学教育(中英文)，2022，43(22)：77-81.