Original article
HTML5-based interactive web application for student practices: a Hodgkin and Huxley membrane model simulator
2020 年 20 巻 2 号 p. 113-126
詳細
2020 年 20 巻 2 号 p. 113-126
In education on medical- or medical-related disciplines, effective student practice is acutely important. A computer-aided practice is a possible solution for effective student practice. However, installing laboratory-made applications is troublesome and even can cause security faults. Therefore, other convenient and secure methods are preferable. HTML5, the latest web standard, includes a canvas element that can be programmed in JavaScript language for two-dimensional dynamic drawings. Most modern web browsers, which are installed on computers and mobile devices, support this standard. Utilizing this feature, the study ported the Hodgkin and Huxley membrane model simulators for personal computers or Android devices into HTML5 capable devices and tested it in a student practice and evaluated the students' acceptance for the practice. The HTML5-based simulator readily run on the preliminary testing environments and students' devices (mainly iPhones or iPads) in actual practice. However, increased student involvement through additional interactivity of the application may be required for a better understanding of the topic.
Education in relation to medical- or medical-related disciplines, renders effective student practice of much importance. However, achieving an ideal student practice is difficult due to restrictions in the availability of instructors and/or facilities. For example, intracellular recordings of excitatory cells, which is one of the most important methods in the neuroscience [1], require specially trained instructors and recording systems [2]. This process is difficult to perform as part of student practice in rather small facilities. Moreover, in majors regarding the perceptions of humans (e.g., orthoptics, optometry, and audiology), intense practice for psychophysical principles is required. A computer-aided practice is a possible solution for such requirements [3–5]. The effectiveness of computer-based teaching has been proven in the education of optometry, too [6]. Application programs for computer-aided student practice can be executed on personal computers (PCs) and/or tablet PCs in a stand-alone manner. However, installing home-made applications on PCs or tablets is inconvenient for students. One of the solutions is using online applications provided in a simple data format such as plain texts. Students today mainly use world wide web (web)-capable mobile devices, such as smartphones. Therefore, running the web-based applications on hypertext transfer protocol (HTTP) clients (web browsers, e.g., Safari for iOS and iPadOS, Chrome for Android OS) on mobile devices may be favourable for student practices. To develop applications suitable for these web browsers, the programmers are recommended to be in accordance with the document format for the web, which is defined as hypertext markup language (HTML). HTML5 is the latest version recommended by the World Wide Web Consortium (W3C) since 2014 [7]. Among the features newly introduced to HTML5, the canvas element [8, 9] for dynamic two-dimensional graphics (Table 1) and the Web Workers API for asynchronous (i.e., multithreaded) execution may be useful for developing interactive web-based applications for student practice. Fortunately, these modern features of HTML5 can be accessible with JavaScript language, which is one of the most widely used object-oriented programming languages.
 |
Recently, Toda [10] ported an Object Pascal-based Hodgkin and Huxley membrane model simulator for PCs to a Java-based Android application. To expand the feasibility of mobile devices in student practice, the current study ported the Hodgkin–Huxley membrane simulator from Object-Pascal or Java into JavaScript with HTML5, and tested the HTML5 version within student practice.
1. Subjects
The Research Ethics Committee of Niigata University of Health and Welfare approved the study (Number: 18173-190527). Data were obtained from volunteer undergraduate students (n = 47; female = 35, male = 12, the average age = 18.64, ranging from 18 to 20 years at the test session). The students were enrolled for the Department of Orthoptics and Visual Sciences of Niigata University of Health and Welfare in 2019. All subjects provided written informed consent.
2. Preparation of practice applications for HTML5
PC- or Android-based membrane simulators programmed in Object-Pascal or Java languages, were ported to JavaScript language. Implementation of the main equations of the Hodgkin–Huxley model [11] using Object-Pascal or Java is described elsewhere [10]. The simulator did not require a strict loop-time. Thus, the conventional method with the “setTimeout” function rather than multithreading with Web Workers API [12] can sufficiently handle inputs from users during execution (Figure 1). In contrast to Pascal nor Java, JavaScript does not support a multidimensional array natively [13]. As such, two workarounds were employed. In the inner loops, which repeatedly calculate the membrane parameters at the next step, the multidimensional arrays in Pascal and Java were “flattened” into one-dimensional arrays, thus, rapid execution at the expense of readability of the source code is expected. In the outer loop, a multidimensional array was defined as an array of Array objects for flexibility (e.g., a dynamic array size) and readability (i.e., each element of the array can be referred using a Pascal-like syntax sugar as “hhData[0][i]” at line 626 in Figure 1, for example). In the PC- or Android-based versions, the membrane parameters are logged into the array to store the simulated time-course at any point that the time in the model reaches a new horizontal coordinate (i.e., the time axis). In the HTML5-based version, the membrane parameters are stored less frequently (one-fourth time) into the array due to the large overhead for array manipulation.
As shown in Figure 2, the operations of the HTML5-based version is similar to the PC- and Android-based ones [10]. Briefly saying, pressing “Start” button (solid circles in A–C) invokes simulation. The simulated data are continuously displayed on the strip-chart which scrolls leftward automatically until “Stop” button (“Start” button turns into “Stop” button during simulation is running) is pressed. The user can mimic voltage stimulation by pressing “Stim” button (dashed circles in A–C), which immediately sets the membrane potential at the value entered in the box on left. Once “Stop” button is pressed, the strip-chart can be scrolled horizontally to retrieve the disappeared part and the data at the readout cursor (grey lines labelled “Readout Cursor” in A–C) are displayed on the textbox above (“Readout” in A–C). The application exports the result of simulation to the clipboard as a plain text when “Copy” button (dashed ellipses in A–C) is pressed. Because the text is formatted as a CSV file, the user can draw the output in a graph by using spreadsheet application or GNU R (http://www.r-project.org/). Clicking “Set Params” link (solid ellipses in A–C) opens the parameter setting page (D), the counterpart of the parameter setting window of the PC version and the parameter setting activity of the Android version (Figure 3A and C of [10]). In this page, the user can modify a number of membrane parameters (e.g., the maximum sodium conductance) and setup several programmed stimuli (e.g., the onset and duration of current injection). When “Submit” button is pressed, the data are transferred to the main page (i.e., the simulator itself) via Window.sessionStorage API [14].
Android devices (smartphones and tablets) and PCs are usually equipped with a touch screen or a mouse, respectively. Therefore, a programmer can safely take these pointing devices for granted. On the other hand, the Web contents are accessed from so various environments that we cannot specify what pointing device will be used. In this study, we simply sat the width of canvas element to 2048 pixels, usually wider than the logical (i.e., scaled [15]) width of the Web browser window. In that case, the GUI system provides an appropriate method to display hidden area of the canvas depending on the system configuration of the device. For example, the canvas can be dragged by a finger on the touch screen of a mobile device (Figure 2A and B), or by moving a mouse on the scroll bar on a Macintosh computer (Figure 2C).
3. Test Sessions
In advance of the test with student participants, a dedicated WiFi access point (MZK-WNH; Planex Communications Inc., Tokyo, Japan) in a laboratory was set up, which was connected to a Macintosh computer (Mac Pro, 2008; Apple, USA) running a HTTPd (web server, Apache/2.4.28 [Unix]) on Mac OS X (version 10.11.6). The following devices were used to preliminarily test the HTML5-based applications: one Android tablet (MediaPad T3 7; HUAWEI, ROC), three iPads (the 5th, 6th, and 7th generations; Apple, USA), one Chromebook (CB30/M; Toshiba, Tokyo, Japan), one Windows laptop (T101HA; ASUS, ROC), and four Macintosh computers (i.e., MacBook Pro, 2011, Mac mini, 2011, 2014, and 2018; Apple, USA), which are running on Android 6.0, iPadOS (versions 13 and 14), Google Chrome OS (version 75, 64 bit), Windows 10 (64 bit, Home Edition), and Mac OS X (versions 10.11.6, 10.13.6, and 10.14.7), respectively. The web browsers used in the preliminary tests were Google Chrome (for the Android tablet and Chromebook), Microsoft Edge (for the Windows laptop), and Safari (for iPads and Macintosh computers). The applications did not work on a 3rd-generation iPad (iOS 9.3.5; Safari 9.0, obtained from the navigator.appVersion property).
The test session involving the student participants was performed on October 11, 2019, in the “Visual Physiology” course held in their first year. One of the web-based applications (Hodgkin–Huxley membrane simulator) was tested in a 90-minute class. In the test session, the participants logged on the web server with their devices via the WiFi network of the university. At the end of the test session, survey questionnaires (Figure 3) were collected via Google Forms. All the questionnaires and answers were in Japanese, unless otherwise noted. Forty-three participants completed the questionnaires except for those with missing versions of the OSs and web browsers. The data were visualized with free statistical software GNU R running on a Macintosh computer.
All the student participants carried out the practice successfully. As shown in Figure 4A, more than the three-fourth (n = 33) of the participants who answered the questionnaires used tablet PCs to log-on the server. A possible reason is that every participant mandatorily bought an iPad (or an iPad Air) at the entrance of the department. Most of the units were 2018-year or newer models except for one, which was a 2013-year model. However, the models of the six iPads were unknown. Out of the nine smartphones, seven were iPhones (2016-year model or newer) and two were Android smartphones. All iOS-based devices were running on iOS 12 or later, whereas all Android-based devices were running on Android 7.0 or later. The most used web browser was Safari (Figure 4B).
In the preliminary tests, the HTML5-based Hodgkin–Huxley membrane simulator achieved sufficient execution speed even in an old Chromebook (Toshiba CB30/M, Intel Celeron 2955U, 1.4 GHz, Dual-Core, Intel HD Graphics). In the test, all the participants could connect to the Web server and successfully launch the application. The majority positively scored the performance of the HTML5-based Hodgkin–Huxley membrane simulator (Figure 5A–C, median scores = 1, 2, and 2 for “Stability,” “Smoothness of Display,” and “Server Connection,” respectively; Figure 3). Using the three categories, two participants who used Android 7 smartphones reported the lowest scores (5, 5, and 6, respectively). One with a 6th-generation iPad gave a low score for “Stability,” whereas another Android smartphone user rated the three categories as 3, 3, and 1, respectively. The median scores of participants with 6th-generation iPads (n = 22) were 2, 2, and 1, respectively. These positive evaluations on the performances of the web-based practice may reflect in the relatively high rating to the item “Easy to operate” (Figure 5D), whereas scores for screen display were relatively mediocre (Figure 5E). Figure 6 depicts that several students experienced difficulty in reading words in English, even simple ones (i.e., “Start,” “Stop,” and “Reset”; Figure 2).
Conversely, the effects of the web-based practice on students' understanding of the action potential were non-satisfactory (Figure 7). Only three participants gave the correct answer to the question “What was the voltage of the action potential?” (approximately 100 mV; another acceptable answer is −100 mV). In addition, two participants provided the correct answer to “What was the duration of the action potential?” (approximately 1 ms; another acceptable answer is 2 ms), whereas all participants answered Yes” to the questions “Do you understand the ‘all-or-nothing’ law?” and “Do you understand the concept of the refractory period?”
The study has introduced a web application for student practice that can be integrated into the education of medicine-related fields utilizing the canvas element of HTML5, a modern web element capable of drawing two dimensional objects dynamically using JavaScript language. With the canvas element, the web application can renew its display in response to real-time inputs from users (Figure 2). Today, students widely use mobile devices to browse web pages. Combined with students' familiarity with devices [16], the newly added features of HTML5 may promote a student-friendly interactive online practice, which is becoming increasingly important against the background of the COVID-19 pandemic.
Although a number of HTML5-based tools for online education were developed, they were mainly used for writing web contents [17]. In the medical field, Moreno-Ger et al. [18] and Acosta et al. [19] introduced web-based practices for haematology and optometry, respectively. In contrast to the present study, the authors relied on external tools (Moreno-Ger et al. [18] used eAvdenture [20], whereas Acosta et al. [19] utilized CourseBuilder [21] and PeerWise [22]). Although these complicated tools are thick and powerful, they are available for the limited OSs (Windows and Mac). Contrarily, the proposed HTML5-based web application is more portable and requires less network and hardware resources. The response of the web server was favorable (Figure 5C), despite being hosted by an old Macintosh computer. In addition, the HTML5-based Hodgkin–Huxley membrane simulator ran smoothly on all devices used by the students (Figure 5A and B). Indeed, the proposed HTML5-based web applications did not work on iPads with older OSs and Web browsers due to incompatibility with the JavaScript language (i.e., the capability of the “let” statement [23]). However, this aspect may not be substantial for student practice, where students used the later models. Several Web-based Hodgkin–Huxley membrane model simulators were introduced so far [24–26], but two of them [24, 25] were not equipped with a strip-chart and all of them did not accept a real-time stimulation by user.
Because the HTML elements (e.g., canvas element) can be called from the JavaScript scripts without importing (or inheriting) the framework of the graphic user interface (GUI) explicitly and variables in JavaScript are not strictly typed, the simple HTML5-based applications can be written shorter than those in Object-Pascal or Java for Android. The total line numbers of the source codes (including comment lines) were 1643, 1817, and 834 for the Hodgkin–Huxley membrane simulators for PCs (written in Object- Pascal with Lazarus), Android devices (written in Java), and Web browsers (including the HTML, JavaScript, and CSS files), respectively. In addition, PC- and Android-based applications require the resource files which contain the information of the character strings and the window layouts used in them. Thus, JavaScript maybe a suitable language for non-professional programmers (i.e., teachers in medical-related fields) to develop interactive GUI applications. However, if a HTML5- based application has an intricate layout, deep knowledge and experiences in writing CSSs to achieve compatibility among various clients (Web browsers) and object-oriented programming in JavaScript is somewhat difficult for programmers accustomed to Object-Pascal or Java, due to its prototype-based inheritance mechanism [27].
Unlike the PC- or Android versions, the HTML5 version of Hodgkin–Huxley membrane simulator is cross-platform and do not require troublesome installation procedures but is downloaded from the Web server at every runtime. Because the source code is small in size, it starts running quickly after clicking the link, and is easily kept up-to-date on the Web server. Thus, the HTML5-based applications are convenient both for students and for teachers, minimizing the technical load [16]. To improve security, a JavaScript application runs within a sandbox [28, 29], and is not allowed to write to the local filesystem except in the case of Google Chrome using a special extension or add-on [30]. By reason of this limitation, the HTML5 version of Hodgkin–Huxley membrane simulator utilizes the clipboard rather than files to export the simulated data.
However, issues remain. The HTML5-based Hodgkin–Huxley membrane simulator does not necessarily improve the understanding of the quantitative aspects of action potential (Figure 7). If students are encouraged to change the membrane parameters (e.g., the maximum sodium conductance), then they will increasingly recognize the amplitudes and durations of the simulated action potentials. As Cook and Dupras [31] argued, another possible means of improving students' understanding may be to facilitate their involvement in the practice by increasing the interactive aspect of the HTML5-based applications in response to student feedback (Figure 6, the answer marked with ※). The importance of elaboration of the learner is also emphasized by Lau [16]. Moreover, the students' aversive attitude toward English is surprising. Although the application only uses easy English words, such as “Start” or “Copy” (Figure 2), two students reproached them (Figure 6, answers marked with † and ‡). Thus, the researchers are preparing a more interactive and user-friendly HTML5-based application for a fully online psychophysical practice, in which all the labels will be in Japanese and the “range” type input element of HTML5 will be employed. This type of element will enable students to input a value in a quasi-analog manner by moving a slider or dial, which fires the “oninput” event at every movement for real-time, interactive response.
An elaborate cohort studies with randomized control trials, may be the best way to measure the effect of the online practice, is difficult to employ in our department because of importance of the equal educational opportunities. Therefore, in upcoming online practice, we will focus on how acceptable by and convenient for students the practice will be, with careful observations about their understanding of the subject. In addition, we will compare the results of the basic-medicine related questions in the national examinations for the certified orthoptist between the students with and without an experience of the HTML5-based practice.
There are no conflicts of interest to declare.
