Development of a Real-Time Dynamic Graphing Web Page

Implementation of the User Interface

The user interface--buttons, menus, etc., is a completely different story. First, let's outline what we want the user to be able to do:

  1. Understand what the page does
  2. Set up the parameters
  3. Start the process
  4. Possibly print the results
  5. Learn something from the process

Numbers 1, 4, and 5 can wait until the rest of the interface is working.

Numbers 2 and 3 shouldn't be a problem. They involve a simple table. I've indicated the HTML "object" names that we'll be using for each of the entries on the far left. The name of the form is info.

A0 Initial concentration of A mol/L
B0 Initial concentration of B mol/L
KEquilibrium constant, K
rtimes100 Speed of the reaction
or React

Go ahead and see how it works. Try some different values for the various parameters.

The textbox at the bottom of this page shows the HTML used to make this table: The only changes in the JavaScript code involves the definitions of A, B, K, and r in initialize() to read these values using the parseFloat() function: When you are ready, go on to the next page.

back to the list of examples

copyright 2001 Robert M. Hanson. All rights reserved. divgraph.js is freely distributable for noncomercial purposes, provided reference is made as "divgraph.js was developed at St. Olaf College by Robert M. Hanson (http://www.stolaf.edu/people/hansonr/divgraph)." Commercial licensing is available for specific purposes.