教育工作者的任务是开发创新和创造性的教育材料，以补充和进一步加强传统的授课形式。这需要开发和传播材料，促进主动学习，提高解决问题的技能，并鼓励小组环境中的讨论和互动。计算机模拟是满足这些要求的一种方法。

一个模拟应用程序，通常称为模拟器，包括一个被模拟对象的数学模型(在这里是一个生理系统)和一个图形用户界面(GUI)。用户界面直观地表示模拟对象及其状态(由模型计算)，并允许学生通过各种输入和控件控制模型。

模拟器在全球范围内被用于激励学生，增强他们对复杂话题的理解，培养批判性思维和解决问题的技能[ 1， 2］．我们一直在创建和使用各种技术设计的模拟器[ 3.多年来在我们的课堂上取得了相当的成功[ 4］．

复杂的模拟器可能会让学生感到困惑，因此在没有额外解释的情况下是无效的。新的有效的教学工具包括将文本与模拟器(由模型驱动的交互式可视化)集成在一起的交互式教科书。学生可以使用模拟器对所学习的系统和概念进行实验，从而验证和加深他们的理解。模拟器的功能在附带的文本中解释，并补充了合适的场景，以使学生从经验中获得最大的效用。例如，由Burkhoff和Dickstein编写的关于心血管生理学的交互式教科书是该领域最早在互联网上可用的著作之一[ 5或作为iPad应用程序[ 6］．

我们的目标是开发一种创建类似教材的技术，但与伯克霍夫[ 5，我们的创新设计是平台独立的，能够离线工作。这项技术是免费的，因此任何人都可以创建新的交互式教材。

创作由文字、图片或动画组成的书籍在技术上并不困难。有几种适合的软件工具可以用于此目的。具有挑战性的任务是包括模型驱动模拟器，允许学生改变变量，做出预测，并发现系统是如何工作的。

制作教学模拟器是一项要求很高和多方面的任务，需要多个领域的专家组成跨学科团队，包括教育、图形、建模和软件开发。

在开始这个过程时，教育者定义模拟器的教学目标，确定满足这些目标的主要设计，并提出模拟器应该能够演示的场景。教育工作者还通过确定应该建模的(生理)过程、用户控制的参数以及在GUI中显示的变量来定义对模型的需求。教育者还从概念上设计GUI，以便系统及其状态以教育的方式呈现。

建模师首先要在文献中找到一个合适的模型，并通常将几个模型结合起来。如果找不到方便的模型，建模师就从基本(如物理和生理)原理推导模型。此时，建模者用编程或建模语言实现模型，以便其计算可以在计算机上运行。如果模型是新开发的，则应通过将其结果与可信的参考数据进行比较来验证[ 7］．

美术人员根据教育人员的任务设计GUI的视觉外观，并决定完整的安排，包括颜色和字体。艺术家还准备所有的图纸，包括可能链接到各自的模型变量的交互式动画，从而由模型控制。

软件开发人员使用图形组件组成GUI，将其与模型拼接在一起，并生成最终的模拟器。用户可控元素与模型的输入绑定。来自模型的输出变量与交互图形元素、图形和GUI的其他指标相连接。然后将最终的应用程序部署到目标平台上，该平台可以是一个Web页面或一个经典的本机二进制文件，最终将它嵌入到更广泛的教学单元中。

最后，教育者在教育环境中测试模拟器，并根据学生的反馈，可能决定迭代模拟器的新版本( 图1)．开发人员的具体角色、开发阶段和在整个过程中有用的几种模式在CoSMos方法中有更详细的描述[ 8］．

我们描述了我们为开发一个轻量级的、易于使用的、平台独立的、开放的和标准化的框架所做的软件工程努力，用于为医学教育创建基于交互式方程的模拟。在本节中，我们将讨论几个与模拟器创作相关的现有工具，以解释我们决定开发一个新的工具链并支持我们的技术决策的原因。

有许多基于JavaScript的优秀Web技术，包括许多有用的框架和库，它们几乎可以平衡浏览器和本机应用程序的功能。也有很好的建模工具可用。问题是模型是用本地编程语言(C或c++)部署的，因此它们不能在浏览器中运行。我们的目标是填补这一空白，并允许使用专用的建模工具，并允许在没有服务器端后端的情况下在浏览器中运行结果模型。根据我们之前的经验，我们对模拟器生产的工具制定了如下要求:

在模拟器的生产过程中，有许多工具是有用的，它们满足一些要求。然而，我们无法找到一个满足我们所有需求的工具或工具链。为了解决这个限制，我们开发了一个满足我们所有特定需求的工具链。

Modelica [ 59- 61是一种基于方程、面向对象、开放的标准语言，用于模拟复杂的物理系统。

在基于方程的(因果)方法中，模型由描述变量之间关系的方程组成(例如， x ² + y ² = 1)，而不是将一个输出变量(在左边)赋值给一个求值表达式(在右边;例如, y: =√6 (1 - x) ² ）) [ 62］．在建模阶段不必知道评估的因果关系(评估方程的顺序以及从哪个方程计算哪个变量)。它由后来的解决方案工具自动导出[ 62］．与面向块的建模相比，我们更喜欢这种方法，因为在面向方程的建模中，建模人员节省了推导因果关系的劳动。此外，由于模型组件是在没有任何因果关系假设的情况下实现的，因此它们可以很容易地扩展或稍后在因果关系不同的各种模型中重用[ 62］．这在创建可重用组件库时非常有用。我们的模拟器基于通常作为方程系统发布的模型，因此，它们在基于方程的方法中的实现是直接的。

下面，我们用方程中描述的谐振子模型举例说明两种方法之间的区别 M∙x " = - k∙x - c∙x',在那里 x的位置, 米代表质量, k表示弹簧常数，和 c表示阻尼常数。在Modelica中使用面向块的方法实现该模型(因为Modelica也支持面向块的建模) 图2．在Modelica中使用基于方程的方法实现相同模型的代码列于 图3．几份报告比较了基于方程(因果关系)和面向块的方法[ 27， 62， 63］．

由于 面向对象的Modelica对于大型复杂模型的缩放效果非常好[ 62］．基本模型组件(类)由方程定义。组件有连接器。更复杂的组件由其他组件组成，这些组件使用它们的连接器以可视化的方式连接。这些连接被呈现为附加的方程，绑定连接组件的变量。还支持继承，并支持重要的代码重用。存在许多来自不同领域的预定义组件的Modelica库。我们的实验室开发了一个名为physilibrary的Modelica生理学库[ 64， 65］．用Modelica标准库实现了谐振子模型 图4．模型的外观直观地解释了被建模系统。

Modelica得到许多不同的建模工具的支持，主要是因为它是一个 开放的标准．这很重要，因为它允许使用多种工具来扩展和扩展建模功能。我们使用OpenModelica [ 66)，或达索Systèmes Dymola [ 67]，这是一个更先进的，但却是一个专有的建模工具。

Modelica是一种开源工具支持的开放标准语言，因此非常适合模型共享[ 68］．

功能模拟接口(FMI) [ 69是一个用于在不同独立工具和应用程序之间交换和联合仿真动态模型的标准。Dymola和OpenModelica都允许将模型导出为功能模型单元(FMU)。在模式下导出时 用于联合仿真的FMI，单元包含一个模拟运行时，它负责模型的计算和执行。与外界的数据交换被限制在离散的通信点上，在它们之间，单元由包含的求解器独立求解[ 70］．

FMU可以导出与编译实现联合仿真标准的二进制文件所需的源代码。这种能力对于我们的目的非常有利，因为我们可以将源代码编译成Web语言，并可以完全访问浏览器中的协同仿真功能的FMI，这允许我们轻松地与模型交互。

FMI标准确保了与OpenModelica和Dymola未来版本的兼容性。此外，Bodylight.js系统可以很容易地调整，以支持实现FMI导出选项的其他模拟工具。

JavaScript是一种多平台、面向对象、解释性编程语言[ 71］．它最初是由Brendan Eich在1995年开发的。JavaScript是ECMAScript标准最著名的实现。最近所有重要的Web浏览器都支持它[ 72］．今天，它被广泛用于实现网站上的交互和动态行为。

我们使用 GrapesJS开源Web Builder框架[ 73]作为我们的超文本标记语言(HTML)布局引擎。GrapesJS允许我们使用拖放方法来设计模拟器的显示方式。有一组内置的块可用于构建应用程序，它还允许轻松定制和生产额外的块。可用的配置面板使程序员能够编辑画布上组件的属性和行为。GrapesJS的模块化设计允许我们与它的用户界面挂钩，并将其扩展为主要用户体验的基础。

EaselJS［ 74是CreateJS工具包的一个组件。它允许轻松操作HTML5 Canvas元素，并可用于创造游戏，美术和其他图像体验。更重要的是，出于我们的兴趣，Adobe Animate本地支持将动画导出到EaselJS。我们可以使用Adobe Animate来设计动画或EaselJS直接创建原始动画。

最后, Plotly.js［ 75是一个用JavaScript实现的高级声明式图表库。它可以用来显示多种类型的图表。

WebAssembly [ 76]定义了在基于堆栈的虚拟机中执行的二进制指令格式。它的主要用途是在Web浏览器内部实现，旨在以接近本机的速度提供代码执行。二进制格式的设计在大小和加载时间方面非常高效，减少了传输和加载代码所需的时间。

WebAssembly是高级编程语言(如C或c++)的编译目标，支持将现有的和用C/ c++编写的新代码编译到浏览器平台。实现这一点的编译器是开源项目Emscripten [ 77， 78]，我们用它来编译FMU内部的源代码。编译后的代码可以被视为混淆到与其他二进制指令格式表示类似的级别。这些算法可以被分解成伪代码，并且通过大量的努力和时间投资，甚至可以进行逆向工程[ 79］．对于大多数实际目的来说，在编译到WebAssembly时，可以认为模型是模糊的。

新的Bodylight.js工具链使用了一些第三方开源工具、编译器和其他新编写的工具。网页[ 80，包括文档和教程。在本节中，我们将更详细地描述完整的工作流，并定义所有涉及的过程和使用的工具。我们特别关注新开发的 Bodylight.js作曲家，通过使用拖放样式的动画、图形和控制元素组合GUI，并将它们绑定到模型变量，可以创建最终的模拟器。

模型工作流程在 图5．模型是用Modelica编写的，通常在一个流行的Modelica ide中编写，例如开源的OpenModelica或专有的、完善的Dymola。

下一步是将模型导出到FMU中。Dymola支持在FMU中导出源代码 源代码生成许可证( 81，而且OpenModelica似乎总是导出FMU内部的源代码。不幸的是，OpenModelica在发布之日只允许导出欧拉求解器，这对于许多模型来说是不够的。

然后需要将FMU编译成WebAssembly和JavaScript。为了完成这一步，我们准备了一个Docker容器，它使用Emscripten自动将FMUs编译为Composer兼容的文件[ 82］．

容器接受由Dymola使用 源代码生成license和在Linux平台上从OpenModelica生成的FMUs。对Linux的需求是因为来自OpenModelica的FMUs是用makefile生成的，makefile不仅依赖于平台，而且还依赖于机器。为了更方便地为工作流中的OpenModelica部分设置环境，我们准备了另一个Docker容器，它使用OpenModelica自动导出FMUs [ 83］．

我们使用Adobe Animate [ 84在设计互动动画的过程中。Adobe Animate支持使用EaselJS库将本地导出到HTML5和JavaScript。这个过程相当轻松，因为导出的JavaScript代码的所有后处理都由编写器处理。此外，用户可以选择直接编写所有EaselJS，而不需要使用Adobe产品。

Bodylight.js作曲家是这个项目的主要开发重点。Composer是一个单页应用程序，可以轻松地将模型、动画和控制元素组合在一起。

Composer的核心是建立在React上的，这是一个成熟的、非常流行的JavaScript库。HTML布局引擎是由GrapesJS提供的，应用程序的其余部分都是围绕这个引擎形成的。Composer允许用户轻松地设计交互式HTML模拟器。还有几个可用的输入和输出小部件。的 范围小部件处理模型变量的控制。的 图表Widget使用plotly.js在交互式图表中显示模型的输出。切换窗口小部件和按钮可以控制布尔值，标签用于显示值。

作曲家配备了 行动它们是用户生成的JavaScript代码片段，可以附加到其他小部件的事件上。例如，其中一个预填充的操作是 重置模型用模型作为参数。用户可附加 行动到一个 onclick事件的 按钮小部件并选择要重置的适当模型。的 动画小部件用于导入在adobeanimate中创建的复杂动画。这些可以包含连续播放的动画，其速度和方向可以由任何模型变量控制。此外，它还可以控制位置动画，其中时间轴位置直接由模型变量控制。

用户还可以保存和打开可共享的项目文件。从Composer导出的最后一个文件是一个独立的HTML文件，其中包含JavaScript和WebAssembly代码。编写器工作流描述在 图6还有作曲家本身 图7．

我们建议读者在Bodylight.js网页上查看视频教程[ 80以便更好地理解Bodylight.js Composer的工作原理。简单的 弹力球主页上的视频演示了如何构建一个由简单的交互式动画、一个情节、一个滑块和一个重置按钮组成的模拟器。它也包含在 多媒体附件1．还有两个额外的视频教程可在 文档部分。的 简单的项目教程( 85演示了如何构建一个由滑块、图和重置按钮组成的模拟器。它被逻辑地分成不同的章节。教程视频后面也解释了这些步骤。第二个教程更加详细 生理上的应用教程( 86］．本教程演示了用于构建压力-容积心循环的真实模拟应用程序的几个高级功能 图8．解释的其他功能包括创建参数化图，添加启动-停止按钮，通过事件控制模型参数，以及在模型变量上应用用户函数。例如，讨论了如何四舍五入值或显示字符串消息和其他特性。翻译后的模型和Composer项目文件都包含在这两个教程中。

使用Bodylight.js创建了几个模拟器。在本节中，将展示一个模拟器来演示Bodylight.js的功能。首先介绍了一些基本的生理学，然后介绍了模拟器，并着重介绍了Bodylight.js的特点。

我们创建了Bodylight.js工具链，以促进基于Modelica模型的交互式模拟器的开发。在本报告中，我们将重点描述工具链的一个重要新组件(Bodylight.js Composer)，它支持创建基于浏览器的模拟器。有关工具链及其使用的更多信息，可浏览网页[ 80］．

解决了工具链的目标。重要的是，Bodylight.js Composer和它产生的模拟器都是 基于浏览器而且 客户端．系统在浏览器中运行，不需要任何服务器端后端。也可以分发独立于平台的HTML文件，并在没有互联网连接的情况下在浏览器中运行。这是通过使用诸如JavaScript、WebAssembly和HTML等Web技术实现的。我们相信会是这样的 不会过时的(不太可能过时)，因为它主要基于被每个主要软件供应商接受和实现的开放标准技术。如果工具链中的任何一个应用程序中断了，那么用另一个工具替换它们应该是很容易的。我们也发现它是 用户友好的．模型在 equation-based Modelica语言，使用建模师选择的建模环境，例如OpenModelica或Dymola。动画是在专业的行业标准工具Adobe Animate中创建的。Composer使用拖放技术来可视化地组合模拟器，它是在通用公共许可3.0下发布的 开源许可证和是 免费提供．因此，任何人都可以在他们的开源项目中使用和实现它。据我们所知，目前还没有其他工具能满足我们的所有要求。

这种方法集合了建模、Web技术和图形设计领域，支持教师、建模师、软件开发人员和图形设计人员之间更好的跨学科合作。

js Composer是一个自包含的客户端应用程序，提交的任何内容都不会离开用户的设备;因此，没有特别的安全或隐私问题。

在Bodylight.js中创建了几个模拟器，它被证明是满足设计者需求的一个方便的解决方案。如果没有这个万能的工具链，实现这些应用程序将非常耗时。本文介绍了新的肾元模拟器、血液循环模拟器和压力-容积循环模拟器，以演示Bodylight.js的功能。肾元模拟器近年来被应用于医学生的病理生理学教学中，得到了学生和老师的一致好评。

与目前可用的客户端-服务器解决方案相比，客户端方法有几个优点。首先，模拟器不受服务器计算限制的限制。通过避免任何服务器端计算的必要性，可以绕过伸缩问题。相反，我们只是提供一个Web页面，它可以托管在任何Web服务器上。其次，客户端解决方案不需要到服务器的低延迟连接。因此，客户端方法避免了对昂贵的Web主机服务的需求。

在线学习和远程学习在全世界变得越来越重要，在发展中国家尤其重要，因为那里的许多潜在学生不容易接触到教师[ 93］．此外，由于许多人可能无法获得可靠的互联网连接[ 94，往返延迟通常很高[ 95在发展中国家，客户端解决方案可能更适合这里。

向FMU导出用于联合仿真的OpenModelica目前仅限于欧拉解算器，没有选项可以包含OpenModelica编译器中可用的任何其他解算器。欧拉是可用的最简单的求解器，与OpenModelica中包含的更高级的求解器相比，它的数值性能通常较差。因此，从OpenModelica导出目前对于许多模型是不可用的。我们经常被迫从专有的Dymola导出FMU，这至少会持续到OpenModelica FMU导出问题得到解决为止。

Adobe Animate是一个用于创建动画的商业工具。使用EaselJS库描述动画的JavaScript代码也可以手工编写。

在模拟器中计算复杂的模型或多个情节或动画的情况下，性能下降变得明显。较慢的帧速率或模型更新速率并不会使模拟器无用，但会降低用户体验。

js依赖于相对较新的Web技术;因此，只有2017年底之后的浏览器才能运行我们的模拟器。然而，因为运行旧的浏览器存在安全风险，大多数浏览器供应商已经切换到自动更新系统。

我们将扩展OpenModelica，以便它可以在FMU中使用高级求解器进行联合仿真。我们计划优化模型计算和图形渲染，以实现更高的帧率。编写器在设计上是模块化的;因此，我们计划添加对新库的支持，如不同的图表库甚至其他动画库，并欢迎外部代码贡献。

新的工具链促进了教学模拟器的生产，不仅在生理学，而且在其他领域，系统的行为可以用数学方程描述，包括生物学、物理学、化学、工程和经济学。此外，这项技术并不局限于教育或学术界。任何有能力为他们的系统建模的人，无论它可能是什么，都可以使用Bodylight.js以可视化的方式向任何感兴趣的方解释它。

将文本与图像、动画、多媒体和交互式模型驱动模拟器相结合的新一代电子教科书正在出现。这些教科书允许对所教授的特定系统进行模拟实验，这有助于对感兴趣的主题有更深的理解。

我们建议将教材开发为独立于平台的浏览器内应用程序，不需要安装，也可以在没有互联网连接的情况下运行。js满足了所有这些要求，并且是免费的，任何人都可以使用，这只会帮助增加它的影响力。我们希望这个项目能帮助人们更好地理解各种各样的系统。