Getting Started Developing Interactive Web Interfaces for Scientific and Medical Applications

Contents

• Abstract
• Introduction
• Laying out the Nernst Equation with Cascading Style Sheets
• Computing the Nernst Equation with JavaScript
  
• Related Reading
• About the Author
  
• References

Abstract

This document discusses creation of a simple interactive web user interface for scientific and medical applications.  In particular, it describes the details behind the code for an example interactive web page for modeling of electric gradients and action potentials in neurons.  This is done using cascading style sheets (CSS), JavaScript, and HTML document object model (DOM).  The intended audience is people in science and medicine wanting to present material in an interactive way over the web.

Introduction

Modeling of the electrical and ion concentration gradients is a fascinating topic that inspires demonstration with a dynamic user interface.  The accompanying article The Nernst Equation and Action Potentials in the Nervous System does this.  I also found a number of references, some of which are listed below, that provide more detailed technical treatment and even more dynamic user interfaces (references ¹ through ⁵).  However, I couldn't find a simple and informative reference that went through the calculation the way I want to see it, with the values for all the constants and terms clearly listed in a format where I could enter the exact values of the parameters that I wanted. 

I will describe the approach for the creation of the interactive elements of The Nernst Equation and Action Potentials in the Nervous System page. It uses dynamic HTML, which provides an interactive user interface suitable for this purpose. See the FAQ on this site for basic information on dynamic HTML.  It also makes use of is made of CSS to lay out the Nernst Equation.  I will use this as an example to discuss presentation of simple mathematical formulas in HTML.

My choice of technology in this example is driven by several factors:

• Convenient for a casual user. Consider a user who is looking for a fast check on a college homework problem. They will probably not want to install a desktop application just for this one problem just to add it to their bloated collection of once-only used software on their desktop. It may also be important for the equation to be run repeatedly with precise values.  A simple HTML page with textfied inputs and JavaScript fits this purpose. 
  
• Can conveniently provide relevant information on the use of the equation.  A desciption of any symbols used in equations and references can be provided conveniently in HTML pages.
• To avoid alienating users who do not want to load plug-ins, such as Java, or who have problems with those plug-ins, use the minimum software requirements possible.  The JavaScript methods used in this example are present on most recent broswers.  They may not work on browsers older than three or four years but those users will still be able to read the static content.