BACKGROUND: Simulators used in teaching are interactive applications comprising a mathematical model of the system under study and a graphical user interface (GUI) that allows the user to control the model inputs and visualize the model results in an intuitive and educational way. Well-designed simulators promote active learning, enhance problem-solving skills, and encourage collaboration and small group discussion. However, creating simulators for teaching purposes is a challenging process that requires many contributors including educators, modelers, graphic designers, and programmers. The availability of a toolchain of user-friendly software tools for building simulators can facilitate this complex task. OBJECTIVE: This paper aimed to describe an open-source software toolchain termed Bodylight.js that facilitates the creation of browser-based client-side simulators for teaching purposes, which are platform independent, do not require any installation, and can work offline. The toolchain interconnects state-of-the-art modeling tools with current Web technologies and is designed to be resilient to future changes in the software ecosystem. METHODS: We used several open-source Web technologies, namely, WebAssembly and JavaScript, combined with the power of the Modelica modeling language and deployed them on the internet with interactive animations built using Adobe Animate. RESULTS: Models are implemented in the Modelica language using either OpenModelica or Dassault Systèmes Dymola and exported to a standardized Functional Mock-up Unit (FMU) to ensure future compatibility. The C code from the FMU is further compiled to WebAssembly using Emscripten. Industry-standard Adobe Animate is used to create interactive animations. A new tool called Bodylight.js Composer was developed for the toolchain that enables one to create the final simulator by composing the GUI using animations, plots, and control elements in a drag-and-drop style and binding them to the model variables. The resulting simulators are stand-alone HyperText Markup Language files including JavaScript and WebAssembly. Several simulators for physiology education were created using the Bodylight.js toolchain and have been received with general acclaim by teachers and students alike, thus validating our approach. The Nephron, Circulation, and Pressure-Volume Loop simulators are presented in this paper. Bodylight.js is licensed under General Public License 3.0 and is free for anyone to use. CONCLUSIONS: Bodylight.js enables us to effectively develop teaching simulators. Armed with this technology, we intend to focus on the development of new simulators and interactive textbooks for medical education. Bodylight.js usage is not limited to developing simulators for medical education and can facilitate the development of simulators for teaching complex topics in a variety of different fields.

Creative Connections s r o Prague Czech Republic

Department of Laboratory Medicine University of California San Francisco CA United States

Department of Physiology College of Osteopathic Medicine Michigan State University East Lansing MI United States

Institute of Pathological Physiology 1st Faculty of Medicine Charles University Prague Czech Republic

Zobrazit více v PubMed

Fischer Q, Sbissa Y, Nhan P, Adjedj J, Picard F, Mignon A, Varenne O. Use of simulator-based teaching to improve medical students' knowledge and competencies: randomized controlled trial. J Med Internet Res. 2018 Dec 24;20(9):e261. doi: 10.2196/jmir.9634. v20i9e261 PubMed DOI PMC

Pennaforte T, Moussa A, Loye N, Charlin B, Audétat MC. Exploring a new simulation approach to improve clinical reasoning teaching and assessment: randomized trial protocol. JMIR Res Protoc. 2016 Feb 17;5(1):e26. doi: 10.2196/resprot.4938. v5i1e26 PubMed DOI PMC

Kofránek J, Mateják M, Privitzer P. KOFRLAB: Laboratory of Biocybernetics and Computer Aided Learning. 2010. [2019-04-05]. MEFANET Report 03: Web Simulator Creation Technology http://www.physiome.cz/references/mefanetreport3.pdf.

Kofranek J, Matousek S, Rusz J, Stodulka P, Privitzer P, Matejak M, Tribula M. The atlas of physiology and pathophysiology: web-based multimedia enabled interactive simulations. Comput Methods Programs Biomed. 2011 Nov;104(2):143–53. doi: 10.1016/j.cmpb.2010.12.007.S0169-2607(10)00299-3 PubMed DOI

Burkhoff D, Dickstein ML. Harvi. [2019-03-20]. http://harvi.online/

Leisman S, Burkhoff D. Use of an iPad app to simulate pressure-volume loops and cardiovascular physiology. Adv Physiol Educ. 2017 Sep 1;41(3):415–24. doi: 10.1152/advan.00204.2016. 41/3/415 PubMed DOI

Kurtz TW, DiCarlo SE, Pravenec M, Ježek F, Šilar J, Kofránek J, Morris Jr RC. Testing computer models predicting human responses to a high-salt diet. Hypertension. 2018 Dec;72(6):1407–16. doi: 10.1161/HYPERTENSIONAHA.118.11552. PubMed DOI PMC

Andrews PS, Polack FA, Sampson AT, Stepney S, Timmis J. University of York. 2010. [2019-04-06]. The CoSMoS Process, Version 0.1: A Process for the Modelling and Simulation of Complex Systems http://www-users.cs.york.ac.uk/~susan/bib/ss/nonstd/tr453.pdf.

Jacob C, Hallgrimsson B, Coderre S, Jamniczky H. LINDSAY Virtual Human. [2019-04-27]. http://www.lindsayvirtualhuman.com .

Jacob C, von Mammen S, Davison T, Sarraf-Shirazi A, Sarpe V, Esmaeili A, Phillips D, Yazdanbod I, Novakowski S, Steil S, Gingras C, Jamniczky HA, Hallgrimsson B, Wright B. LINDSAY virtual human: multi-scale, agent-based, and interactive. Adv Intell Model Simul. 2012;422:327–49. doi: 10.1007/978-3-642-30154-4-14. DOI

Wilensky U, Rand W. An Introduction to Agent-Based Modeling: Modeling Natural, Social, and Engineered Complex Systems With NetLogo. Cambridge, MA, USA: The MIT Press; 2015.

Marshall BD, Galea S. Formalizing the role of agent-based modeling in causal inference and epidemiology. Am J Epidemiol. 2015 Jan 15;181(2):92–9. doi: 10.1093/aje/kwu274. kwu274 PubMed DOI PMC

Fachada N, Lopes V, Rosa A. Agent-Based Modelling and Simulation of the Immune System: A Review. Proceedings of the 13th Portugese Conference on Artificial Intelligence; EPIA'07; December 3-7, 2007; Guimaraes, Portugal. 2007.

Zhang L, Athale CA, Deisboeck TS. Development of a three-dimensional multiscale agent-based tumor model: simulating gene-protein interaction profiles, cell phenotypes and multicellular patterns in brain cancer. J Theor Biol. 2007 Jan 7;244(1):96–107. doi: 10.1016/j.jtbi.2006.06.034.S0022-5193(06)00278-5 PubMed DOI

Azimi M, Bulat E, Weis K, Mofrad MR. An agent-based model for mRNA export through the nuclear pore complex. Mol Biol Cell. 2014 Nov 5;25(22):3643–53. doi: 10.1091/mbc.E14-06-1065. mbc.E14-06-1065 PubMed DOI PMC

van Dyke PH, Savit R, Riolo RL. Agent-Based Modeling vs Equation-Based Modeling: A Case Study and Users’ Guide. Proceedings of the First International Workshop on Multi-Agent Systems and Agent-Based Simulation; MABS'98; July 4-6, 1998; Paris, France. 1998. pp. 10–25. DOI

Pulse: Physiology Engine. [2019-04-27]. http://physiology.kitware.com .

Bray A, Webb JB, Enquobahrie A, Vicory J, Heneghan J, Hubal R, TerMaath S, Asare P, Clipp RB. Pulse physiology engine: an open-source software platform for computational modeling of human medical simulation. SN Compr Clin Med. 2019 Mar 27;1(5):362–77. doi: 10.1007/s42399-019-00053-w. DOI

Kofránek J, Kulhánek T, Mateják M, Ježek F, Šilar J. Integrative Physiology in Modelica. Proceedings of the 12th International Modelica Conference; Modelica'17; May 15-17, 2017; Prague, Czech Republic. 2017. pp. 15–17. DOI

Kofránek J, Vu LD, Snáselová H, Kerekes R, Velan T. GOLEM--multimedia simulator for medical education. Stud Health Technol Inform. 2001;84(Pt 2):1042–6. doi: 10.3233/978-1-60750-928-8-1042. PubMed DOI

Lipovszki G, Aradi P. Simulating complex systems and processes in LabVIEW. J Math Sci. 2006 Feb;132(5):629–36. doi: 10.1007/s10958-006-0007-z. DOI

Kiel JW, Shepherd AP. A graphic computer language for physiology simulations. Comput Life Sci Educ. 1988;5(7):49–56.

Lin SL, Guo NR, Chiu CC. Modeling and simulation of respiratory control with LabVIEW. J Med Biol Eng. 2012;32(1):51–60. doi: 10.5405/jmbe.829. DOI

Cole RT, Lucas CL, Cascio WE, Johnson TA. A LabVIEW model incorporating an open-loop arterial impedance and a closed-loop circulatory system. Ann Biomed Eng. 2005 Nov;33(11):1555–73. doi: 10.1007/s10439-005-7785-1. PubMed DOI

Life Science Teaching Resources Community. [2019-03-20]. https://www.lifescitrc.org .

Samosky JT, Nelson DA, Wang B, Bregman R, Hosmer A, Mikulis B, Weaver R. BodyExplorerAR: Enhancing a Mannequin Medical Simulator With Sensing and Projective Augmented Reality for Exploring Dynamic Anatomy and Physiology. Proceedings of the Sixth International Conference on Tangible, Embedded and Embodied Interaction; TEI'12; February 19-22, 2012; Kingston, Ontario, Canada. 2012. pp. 263–70. DOI

Kofránek J, Mateják M, Privitzer P, Tribula M. Laboratory of Biocybernetics and Computer Aided Learning. 2008. Causal or Acausal Modelling: Labour for Humans or Labour for Machines http://www.physiome.cz/references/tcp2008.pdf.

National Instruments. 2018. [2019-04-22]. Tutorial: User Interface http://www.ni.com/tutorial/7568/en/

Jerome J. Virtual Instrumentation Using LabVIEW. New Delhi, India: Phil Learning Pvt Ltd; 2010.

National Instruments. 2018. [2019-05-04]. Using the 2D Picture Control http://zone.ni.com/reference/en-XX/help/371361R-01/lvconcepts/using_the_picture_indicator .

National Instruments. [2019-05-04]. What Is the LabVIEW NXG Web Module? http://www.ni.com/cs-cz/shop/electronic-test-instrumentation/add-ons-for-electronic-test-and-instrumentation/what-is-labview-nxg-web-module.html .

WebVIs: Developing Your Web-Based User Interface. [2019-05-11]. http://www.webvi.io .

Just Physiology. [2019-03-20]. http://justphysiology.com .

Meyer zu Eissen S, Stein B. Realization of web-based simulation services. Comput Ind. 2006 Apr;57(3):261–71. doi: 10.1016/j.compind.2005.12.007. DOI

Tiller MM, Winkler D. modelica.university: A Platform for Interactive Modelica Content. Proceedings of the 12th International Modelica Conference; Modelica'17; May 15-17, 2017; Prague, Czech Republic. 2017. DOI

Tiller MM. Modelica University. 2019. [2019-04-05]. Modelica by Example http://mbe.modelica.university.

Žáková K, Cech M. Design of Control Education Interactive Examples via Web Service for OpenModelica. Proceedings of the 13th APCA International Conference on Automatic Control and Soft Computing; IEEE'18; June 4-6, 2018; Ponta Delgada, Portugal. 2018. pp. 242–6. DOI

JSON-RPC Working Group JSON-RPC. 2004. [2019-04-29]. JSON-RPC 2.0 Specification http://www.jsonrpc.org/specification .

Raaen K, Grønli TM. Latency Thresholds for Usability in Games: A Survey. Proceedings of the Norwegian Informatics Conference; NIK'14; November 17-19, 2014; Bergen, Norway. 2014.

McManus JP, Day TG, Mailloux ZJ. Digital WPI: Worcester Polytechnic Institute. 2019. [2019-05-06]. The Effects of Latency, Bandwidth, and Packet Loss on Cloud-Based Gaming Services https://digitalcommons.wpi.edu/cgi/viewcontent.cgi?article=6326&context=iqp-all.

Wagner G. Sim4edu.com: Web-Based Simulation for Education. Proceedings of the Winter Simulation Conference; IEEE'17; December 3-6, 2017; Las Vegas, Nevada, USA. 2017. pp. 4240–51. DOI

Silar J, Kofranek J. Physiological model creation and sharing. Eur J Biomed Inform. 2011;7(1):55–8. doi: 10.24105/ejbi.2011.07.1.10. DOI

Short T. GitHub Inc. 2019. [2019-04-28]. OpenModelica-Javascript http://github.com/tshort/openmodelica-javascript .

BabylonJS. [2019-05-05]. http://www.babylonjs.com .

Batista AV, Lemos RR, Rudolph CM, Bueno BS, Fiuza PJ, Conceicao KR, Pereira PF, Mansur SS. Handbook of Research on Immersive Digital Games in Educational Environments. Pennsylvania, USA: IGI Global; 2017. Design of A Web3D Serious Game for Human Anatomy Education; pp. 286–611.

Blender. [2019-05-05]. http://www.blender.org .

BabylonJS Documentation. [2019-05-05]. http://doc.babylonjs.com/resources/blender .

ThreeJS. [2019-05-05]. http://threejs.org .

Kasinathan V, Mustapha A, Nur FA, Zainal AA. Three-dimensional e-learning application for anatomy and physiology of brain. Int J Integr Eng. 2018 Nov 1;10(6):144–8. doi: 10.30880/ijie.2018.10.06.020. DOI

Unity. [2019-05-04]. https://unity.com/

Trivellato M. Unity. 2018. [2019-05-04]. Unity Blog: WebAssembly is Here! https://blogs.unity3d.com/2018/08/15/webassembly-is-here/

Horachek D. Creating eLearning Games With Unity. Birmingham, England: Packt Publishing; 2014.

Zarzuela MM, Pernas FJ, Martínez LB, Ortega DG, Rodríguez MA. Mobile serious game using augmented reality for supporting children's learning about animals. Procedia Comput Sci. 2013;25:375–81. doi: 10.1016/j.procs.2013.11.046. DOI

Coelho A, Kato E, Xavier J, Gonçalves R. Serious Game for Introductory Programming. Proceedings of the Second International Conference on Serious Games Development and Applications; SGDA'11; September 19-20, 2011; Lisbon, Portugal. 2011. pp. 61–71. DOI

George AK, McLain ML, Bijlani K, Jayakrishnan R, Bhavani RR. A Novel Approach for Training Crane Operators: Serious Game on Crane Simulator. Proceedings of the Eighth International Conference on Technology for Education; IEEE'16; December 2-4, 2016; Mumbai, India. 2016. pp. 116–9. DOI

Boada I, Rodriguez-Benitez A, Garcia-Gonzalez JM, Olivet J, Carreras V, Sbert M. Using a serious game to complement CPR instruction in a nurse faculty. Comput Methods Programs Biomed. 2015 Nov;122(2):282–91. doi: 10.1016/j.cmpb.2015.08.006.S0169-2607(15)00216-3 PubMed DOI

Gaudina M, Zappi V, Bellanti E, Vercelli G. eLaparo4D: A Step Towards a Physical Training Space for Virtual Video Laparoscopic Surgery. Proceedings of the Seventh International Conference on Complex, Intelligent, and Software Intensive Systems; IEEE'13; July 3-5, 2013; Taichung, Taiwan. 2013. pp. 611–6. DOI

Jezek F, Tribula M, Kulhanek T, Matejak M, Privitzer P, Silar J, Kofranek J, Lhotska L. Surviving Sepsis - a 3D Integrative Educational Simulator Internet. Proceedings of the 37th Annual International Conference of the IEEE Engineering in Medicine and Biology Society; IEEE'15; August 25-29, 2015; Milan, Italy. 2015. PubMed DOI

Mattsson SE, Elmqvist H, Otter M. Physical system modeling with Modelica. Control Engineering Practice. 1998 Apr;6(4):501–10. doi: 10.1016/S0967-0661(98)00047-1. DOI

Tiller M. Introduction to Physical Modeling with Modelica Internet. Switzerland: Springer Science & Business Media; 2012.

Fritzson P. Principles of Object-Oriented Modeling and Simulation with Modelica 3.3: A Cyber-Physical Approach. Hoboken, New Jersey: John Wiley & Sons; 2015.

Zimmer D. Equation-based modeling with Modelica – principles and future challenges. Simul Notes Eur. 2016 Jun;26(2):67–74. doi: 10.11128/sne.26.on.10332. DOI

Fritzson P, Engelson V. Modelica - A Unified Object-Oriented Language for System Modeling and Simulation Internet. Proceedings of the 12th European Conference on Object-Oriented Programming; ECOOP'98; July 20-24, 1998; Brussels, Belgium. 1998. pp. 67–90. DOI

Mateják M, Kulhánek T, Šilar J, Privitzer P, Ježek F, Kofránek J. Physiolibrary - Modelica Library for Physiology. Proceedings of the 10th International Modelica Conference; Modelica'14; March 10-12, 2014; Lund, Sweden. 2014. pp. 499–505. DOI

Mateják M. Physiolibrary. [2019-03-20]. http://www.physiolibrary.org .

OpenModelica. [2019-03-20]. http://www.openmodelica.org .

Dassault Systèmes. [2019-03-20]. DYMOLA Systems Engineering https://www.3ds.com/products-services/catia/products/dymola.

Kofránek J, Ježek F, Mateják M. Modelica Language - A Promising Tool for Publishing and Sharing Biomedical Models. Proceedings of the 1st American Modelica Conference; Modelica'18; October 9-10, 2018; Cambridge, Massachusetts. 2018. pp. 196–205. DOI

Blochwitz T, Otter M, Akesson J, Arnold M, Clauss C, Elmqvist H, Friedrich M, Junghanns A, Mauss J, Neumerkel D, Olsson H, Viel A. Functional Mockup Interface 2.0: The Standard for Tool Independent Exchange of Simulation Models. Proceedings of the 9th International Modelica Conference; Modelica'12; September 3-5, 2012; Munich, Germany. 2012. pp. 173–84. DOI

Modelica. 2014. [2019-04-27]. Functional Mock-Up Interface for Model Exchange and Co-Simulation https://svn.modelica.org/fmi/branches/public/specifications/v2.0/FMI_for_ModelExchange_and_CoSimulation_v2.0.pdf.

Flanagan D. JavaScript: The Definitive Guide. Sebastopol‎, California: O'Reilly Media; 2006.

W3Schools. [2019-05-06]. JavaScript Versions https://www.w3schools.com/js/js_versions.asp .

Arseniev A. GrapesJS. [2019-03-20]. https://grapesjs.com/

Skinner G. CreateJS. [2019-03-20]. https://createjs.com/easeljs .

Plotly: Graphing Libraries. [2019-03-20]. https://plot.ly/javascript .

Zakai A. WebAssembly. [2019-03-20]. https://webassembly.org/

Zakai A. Emscripten. [2019-03-20]. https://emscripten.org/

Zakai A. Emscripten: An LLVM-to-JavaScript Compiler. Proceedings of the ACM International Conference Companion on Object Oriented Programming Systems Languages and Applications Companion; OOPSLA'11; October 22-27, 2011; Portland, Oregon, USA. 2011. pp. 301–12. DOI

Falliere N. PNF Software. 2018. [2019-03-20]. Reverse Engineering WebAssembly https://www.pnfsoftware.com/reversing-wasm.pdf .

Polak D, Šilar J, Ježek F, Mladek A, Kofranek J. Bodylight.js. https://bodylight.physiome.cz/

Dassault Systèmes. [2019-03-20]. Code and Model Export https://www.3ds.com/products-services/catia/products/dymola/code-and-model-export/

Polák D. GitHub. [2019-03-20]. Bodylight.js-FMU-Compiler https://github.com/creative-connections/Bodylight.js-FMU-Compiler .

Polák D. GitHub. [2019-03-20]. Bodylight.js-OM-Compiler https://github.com/creative-connections/Bodylight.js-OM-Compiler .

Adobe. [2019-05-04]. [A New Era of Animation] https://www.adobe.com/cz/products/animate.html .

Polák D, Šilar J. BodylightJS. [2019-04-27]. Creating a Simple Project https://bodylight.physiome.cz/docs/simple_project/1_creating_a_simple_project.

Polák D, Šilar J, Kofránek J. BodylightJS. [2019-04-26]. Pressure volume cardiac simulator https://bodylight.physiome.cz/docs/pvloops/1_pressure_volume_cardiac_simulator.

Šilar J, Mladek A, David A, Živny J, Kofranek J. Nephron simulator http://physiome.cz/apps/Nephron/

Šilar J, Ježek F, Mládek A, Polák D, Kofránek J. Model Visualization for e-Learning, Kidney Simulator for Medical Students. Proceedings of the 13th International Modelica Conference; Modelica'19; March 4–6, 2019; Regensburg, Germany. 2019. DOI

David P. Laboratory of Biocybernetics and Computer Learning Support. Simple circulation simulator http://physiome.cz/apps/SimpleCirculation/

Kofranek J, David P. Laboratory of Biocybernetics and Computer Learning Support. Cardiac pressure-volume loops simulator https://physiome.cz/apps/pvloops/

Ježek F, Kulhánek T, Kalecký K, Kofránek J. Lumped models of the cardiovascular system of various complexity. Biocybern Biomed Eng. 2017;37(4):666–78. doi: 10.1016/j.bbe.2017.08.001. DOI

Burkhoff D, Tyberg JV. Why does pulmonary venous pressure rise after onset of LV dysfunction: a theoretical analysis. Am J Physiol. 1993 Nov;265(5 Pt 2):H1819–28. doi: 10.1152/ajpheart.1993.265.5.H1819. PubMed DOI

Sife AS, Lwoga ET, Sanga C. New technologies for teaching and learning: challenges for higher learning institutions in developing countries. Int J Educ Dev. 2007;3(2):57–67.

Geissbuhler A, Bagayoko CO, Ly O. The RAFT network: 5 years of distance continuing medical education and tele-consultations over the internet in French-speaking Africa. Int J Med Inform. 2007;76(5-6):351–6. doi: 10.1016/j.ijmedinf.2007.01.012.S1386-5056(07)00006-8 PubMed DOI

Chavula J, Feamster N, Bagula A, Suleman H. Quantifying the effects of circuitous routes on the latency of intra-Africa internet traffic: a study of research and education networks. In: Nungu A, Pherson B, Sansa-Otim J, editors. e-Infrastructure and e-Services for Developing Countries. Berlin: Springer-Verlag; 2015. pp. 64–73.