Development of a Real-Time Dynamic Graphing Web Page

Implementation of the User Interface: Feedback

At this point, we have a working interface, and the user can print the graph. But there is one more thing to do. Remember, the user should be able to:

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

We can use divgraph.js to give immediate feedback to the user while an animation is running and, in that way, increase their chances of learning something new.

Click on the "React" button, below, and see the difference from the previous draft.

Initial concentration of A mol/L
Initial concentration of B mol/L
Equilibrium constant, K
Speed of the reaction
or React

Notice that we have added four active labels that display concentrations and the value of Q and K while the animation runs. In addition there is a "close" link. Addition of these labels takes place at the end of the new initialize() function: One additional point is required for each added text label, requiring

     Info.maxaddpoints = tmax * 2 + 5

Labels are first introduced just like points, but using the GRaddtext() function rather than GRaddpoint(). The first three parameters for this function are the x and y coordinates of the text and the text string itself, which may include any valid HTML code. The fourth parameter, which indicates the color of the label, includes the extra information class=lbl. This sets the style of the label, which is defined by setting Info.style to be a valid Cascading Style Sheet style definition. The GRDOC parameter tells divgraph.js to use document coordinates. Leaving this parameter off or using GRUSER would have indicated to use the coordinates displayed on the axes.

Rounding off of the numbers being displayed to a reasonable number of digits is taken care of by GRroundoff(). Examples are shown in the table below:

xGRround(x)xGRround(x)

To make these changes dynamic, we also use function GRdivwrite() in react():

(Another useful divgraph.js function is GRdivmove() , which allows points and text already displayed to be moved.)

The check for GR.win.closed at the beginning of react() prevents the routine from being entered if the user has already closed the graphing window. The "Close" link on the graph involves a link to "opener.docloseme()"

That does it. Our interface now allows for the user to specify the starting parameters, watch a developing animation, possibly stopping it midstream, print the results if desired, and, hopefully, learn something in the process.

The final project includes an introduction, questions to consider, a better check to make sure that a running animation gets shut down prior to another opening, and the ability to start up a random equilibration. It is equil.htm. Enjoy!

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.