基于Web的注塑工艺虚拟仿真实验平台设计

祝雪瑞，李海丰，刘才远，刘 睿

（湖北汽车工业学院 材料科学与工程学院，湖北 十堰 442002）

目前国内很多高校利用虚拟仿真技术对实验教学进行了改革，提高了教学效果，但该技术开发周期较长、后期的迭代更新较为频繁，这对经费有限的普通高校而言，投入的人、财、物成本较高[1-2]。相比之下，利用互联网“云端”理念，使用网页制作技术搭建虚拟仿真实验平台，对一些人机交互操作要求不高的实验来说，不失为一种经济、便捷的途径。这种网页式的虚拟仿真实验平台的制作，核心工作是网页的设计开发，整个流程投入的人、财、物大幅减少，后续运行维护也较为简单[3-4]。本项目即是利用该技术，对高分子材料科学与工程专业的注塑工艺实验设计开发一种网页式虚拟仿真实验平台，以提升教学效果。

1 设计开发过程

1.1 设计开发思路

首先根据实验学习要求，准备实验平台所需要的素材。主要是收集，并制作实验相关的多媒体资料，包括文档、视频、动画等；同时，根据实验操作内容，设计初步的人机交互动作以及网页上的外部链接接口、路径等。然后将素材加载到网页中并运行。主要是使用代码编辑器撰写代码，并在浏览器内进行渲染，将不同属性的多媒体资料以合适的形式展现出来。最后调试、修改。图 1展示了注塑工艺虚拟仿真实验的要素及素材要求，图2所示为网页设计思路及实现路径。

图1 注塑工艺虚拟仿真实验的要素及素材要求

图2 网页设计思路及实现路径

1.2 网页的设计与开发

按照设计思路，素材准备完成后，下一步进行素材的嵌入及代码编辑，但首先要进行网页的界面设计，即对网页进行合理的布局，然后渲染出不同的效果与点击特效。一般按功能将整个网页页面分割成不同的区域，常见的分割形式有“盒子式”“堆叠式”“标题栏式”，这里选用“盒子式”页面（如图3所示），视觉效果简洁明了。网页样式确定后，就需要内填素材，并完成操作命令的代码编辑。

图3 盒子式网页页面布局

使用 VS Code代码编译器编写控制命令代码，该编译器是一款针对编写现代Web和云应用的跨平台源代码编辑器[5]。可支持多种不同的汇编语言，能够在不同的控制系统上运行出相同的结果，但会根据浏览器内核的差异而生成不同的特效。因此，设计的网页（网站）要考虑浏览器的差异。为此，以目前主流使用的Edge浏览器为蓝本进行代码编写、设计，并使用通用的编写语言，即HTML+CSS+JavaScript三件套技术[6]，虽然不同浏览器用的内核不同，但在不同浏览器中得到的也是同种布局与同种特效，并不会影响使用。这样设计、开发的网页（网站）均可在各大主流浏览器上无差别识别、运行。

当代码编写完毕后，由浏览器对代码进行加工修饰得到需要的效果，可以用浏览器自带的渲染方式，也可以自行添加各种特效和渲染模式，如字体颜色、大小、点击特效等。经过 VS Code编写的代码放入到浏览器中进行渲染后，已按不同功能模块分区的网页界面就被各类素材所填充，根据鼠标操作展现不同的效果。如当鼠标标识变成手掌模样，模块便浮动起来，则表示选择了这一功能模块，点击之后，对应的素材就呈现出所设计的效果。

2 设计开发结果展示

网页式实验平台的设计开发不仅仅是将各种所需的教学素材搭配整合，而是要简洁易懂、操作流畅，并能以特定方式展现给学生观看和学习，具有较为舒适的、强烈的操作体验感。这就要求设计的网页界面具备高度的操作“友好性”，学生无需机械地、僵硬地按部就班学习，可按照自身学习需求针对性开展学习，网页界面必须美观、便捷、实用。为此，在网页主界面设计上参考了小米官网界面（如图4和图5所示），一方面简洁大气，符合现代年轻人的审美观念；另一方面功能分区明显，操作指引性强，便于学生自主学习。

图4 小米官网界面

图5 设计的网页式实验平台界面

在原材料和质量改进模块，网页上先通过图片及注释作初步说明，然后通过鼠标点击对应图片再跳转链接到第三方网站，在此界面进行扩展说明与学习，如图6和图7所示。在注塑工艺和注塑设备模块，提供视频和动画，由学生自主选择点击播放后即可观看学习，如图8和图9所示；同时还提供课件内容讲解的微课视频。所有视频均可自主控制播放进度。此外，实验平台还提供实验指导书、实验思考题等文档资料的下载。在初级版本的设计开发中，网站对各类文档资料（如ppt、word）的支持效果没有使用数据库技术，而采用了简单便捷的链接加载模式，并开放了下载权限，这样亦可通过下载量间接反映各功能模块的活跃度。

图6 质量改进模块部分展示

图7 点击质量改进模块“顶白”跳转后页面

图8 注塑工艺模块多媒体资料展示

图9 注塑设备模块多媒体资料展示

设计开发的注塑工艺虚拟仿真实验平台暂为1.0版初级版本，经试运行后，师生反馈认为降低了教学成本、提高了学生学习的灵活性和主动性，教学效果大幅提升。教学管理部门认为网页式实验平台充分利用了互联网的“云端”功能，既节省了电脑硬件的存储数据量和空间，又能即时访问，虽在人机交互方面有所欠缺，但实验功能的呈现却比较完整。更重要的是云端实验室管理信息系统可被整合到高校的官网子系统里，不仅可以确保实验室的教学服务品质，还可便捷、高效地满足学校的其他服务需求。

3 结语

本项目基于“云端”理念，利用互联网技术，以浏览器为平台、代码为工具，将预先制作好的多媒体实验素材加载到Web中，设计开发了一种网页式的注塑工艺虚拟仿真实验平台。教师先在线下给学生进行设备操作演示，然后学生在该实验平台上（线上）进行多媒体资料的学习以及虚拟实验操作。通过教学反馈得知，学生普遍认为该平台降低了课程学习难度，提升了学习兴趣。教师认为该平台有效促进了“线下线上混合式”教学的开展，学生成绩也有一定程度的提高。目前，该实验平台还是初级版本，后续还需在人机交互、实验测评、学习内容扩展等方面进一步完善，使注塑工艺虚拟仿真实验平台完全覆盖材料、工艺、设备（模具）、质量改进等要素，有力助推教学改革，提升教学效果。