建立气相色谱－质谱虚拟实验室

2016-09-03创新者张劲柏

中国科技信息 2016年10期

创新者：张劲柏李玲

建立气相色谱－质谱虚拟实验室

创新者：张劲柏李玲

气相色谱－质谱联用仪的应用是药学本科实验的重要内容，但是由于大型仪器自身特点难以开展实验，虚拟实验室的出现很好地弥补了不足。本文采用Dreamweaver软件，结合Flash以及JavaScript建立了具备交互功能的气相色谱－质谱虚拟实验室，完整地模拟气相色谱－质谱检测的实验过程，提高了教学效果，同时为进一步设计大型仪器虚拟实验室提供了基础和思路。

虚拟实验室是一种基于虚拟现实技术构建的开放式网络化的虚拟实验教学系统，是现有各种教学实验室的数字化和虚拟化，自诞生之初便备受关注，国内外专家学者对此均有所研究，并取得了一定的教学成果。药学专业实验中，气相色谱-质谱联用仪（Gas Chromatography-Mass Spectrometer，简称GC-MS）的操作对于理解气相色谱和质谱的相关原理十分重要，但是此类实验耗时长，步骤多，实验前还需要调试仪器，很难为学生开展自主性实验。虚拟实验室的引入，不仅解决了传统实验室的诸多问题，同时对教学内容进行优化，促进实验更加安全有效地进行。

气相色谱－质谱虚拟实验室的整体设计

气相色谱－质谱虚拟实验室的设计原则

任何虚拟实验室都是实验教学的辅助手段，因此必须遵守以下几个原则：

（1）真实性所有的虚拟实验室需要以现实的仪器和配套软件为虚拟对象，否则只是异想天开；

（2）交互性虚拟实验室不能只是图片和文字的集合体，还必须具备传统实验室中动态变化的过程，即能够根据学生的操作进行一定的变化；

（3）引导性虚拟实验室是传统实验的“提取浓缩”，但不仅限于此。传统试验中，由于教师有限，不能做到对每位学生实时指导，而虚拟实验室可以通过交互式设置，从而引导学生正确操作。

气相色谱－质谱虚拟实验室的设计内容

图1　气相色谱－质谱虚拟实验室的设计内容

根据虚拟实验室的设计原则，气相色谱-质谱虚拟实验室由仪器操作和软件操作两个部分构成。仪器操作部分包括样品准备及手动进样。这两个操作是实验室真实行为的模拟，可以利用Flash 进行设计，将整个操作过程制作成动画，同时为了强化知识点，在关键步骤利用Action Script 2.0暂停并弹出提示。软件操作部分包括气相方法设置、质谱方法设置、序列设置及图谱处理。这一部分是计算机上测试软件的模拟，可以利用Dreamweaver和JavaScript实现，通过制作各个网页之间的超链接将整个操作过程串联起来。

气相色谱－质谱虚拟实验室的构建

本次气相色谱-质谱虚拟实验室以Thermo Fisher公司的TRACE GC ULTRA&DSQ II为硬件虚拟对象，Xcaliber2.0工作站为软件虚拟对象。

仪器操作部分的构建

气相色谱-质谱联用仪进样需要遵循规定的步骤，因此准确模拟这些操作非常重要。以进样准备为例，此过程模拟比较简单，可以通过Flash和Action Script完成，具体实现方法如下：

（1）通过Photoshop制作仪器控制面板、进样口、进样针、试剂瓶、按钮等虚拟素材，并导入到Flash素材库中。新建影片剪辑元件并插入Flash舞台（帧1）中；

（2）双击影片剪辑元件进入编辑界面，将素材按照合适位置摆放，并创建补间动画，模拟出操作的效果；

（3）在Flash舞台（帧1）中导入试剂瓶素材，并加入Action Script，实现鼠标经过放大以及点击播放影片剪辑的效果。

软件操作部分的构建

Xcaliber2.0本身为桌面软件，因此需要将操作界面在虚拟实验室中复现，该模拟过程比较复杂，本文采用了Dreamweaver和JavaScript编程相结合的方法，实现了大部分的软件效果，并加入了交互机制，便于学生犯错后及时更正。

素材的准备

用标准物质进行气相色谱-质谱检测，在检测过程中对每一关键步骤进行截图及录屏，对录屏所得视频用Premiere 进行剪辑，制作成适合网页播放的MP4格式视频。

操作流程的设计

根据整体设计，软件操作包括方法设置和图谱处理两部分。方法设置中，页面以任务卡的形式展示要求，学生必须完成所有任务（输入数字，选择模式等）才能进行下一步。图谱处理由于涉及鼠标右键操作，在浏览器中实现困难，故将处理过的视频直接插入网页中，作为示范教学。

素材的整合

在每个超链接的网页中，插入该步骤相应的实验操作图片以及任务卡，并插入热点，链接到下一实验步骤的网页，另外根据不同网页的需求加入自己设计的JavaScript代码，实现交互。

交互式设计

根据虚拟实验室设计原则，具备良好的交互性是虚拟实验室的核心要求之一。以气相方法设置中的程序升温设置为例，在网页中插入五个文本框，分别命名为st（起始温度）、et（终点温度）、ht1（起始温度持续时间）、ht2（终点温度持续时间），rt（升温速率），并设置 onChange行为，创建id为main的div作为图表显示区域。当文本框内输入数字或者数字发生变化时，先将数字转化为对应的变量，然后根据如下公式：

计算出程序升温的总时间以及每次温度变化的时间节点，最后通过第三方echart.js实现图表输出。

程序升温设置的部分代码如下：

图2　程序升温设定动态图表

辅助功能

为便于学生更加快速地了解气相色谱-质谱的仪器原理，掌握实验操作，我们还增加了仪器原理介绍、常见问题及关于我们三大模块。

结果与讨论

本文通过Dreamweaver软件，结合Flash和JavaScript构建了气相色谱-质谱虚拟实验室，实现了气相色谱-质谱常规检测的模拟，改变了只是由教员示范教学的单一模式，使学生能够更深入了解气相色谱-质谱联用仪的操作，并能防止由于对仪器不熟悉操作失误而导致的仪器损坏。在对本校2013级药本实验教学中，学生通过虚拟实验室深入了解气相色谱-质谱联用仪的使用，激发了兴趣，加深了对课堂知识的理解，提高了实验教学的效率。

虽然气相色谱-质谱虚拟实验室实现了很好的交互性，但毕竟是教学的辅助手段，仍需要结合真实实验才能达到教学目的。本虚拟实验室计划在逐步的试用和修改后改进为3D界面，具备更大的自由度，实现学生自主操作，同时针对不同的操作设计不同的实验结果，使虚拟实验室更符合真实实验的情况。此外，还考虑加入知识点测验和论坛功能，便于老师了解学生的学习情况。相信在进一步开发后，虚拟实验室将可以实现更多的功能，更好地提高大型仪器实验教学的效率。