Development of a Real-Time Dynamic Graphing Web Page

Implementation of the User Interface: Printing

At this point, we have a working interface except for printing. The user can set up and start the process, but printing the graph may be a problem. 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

If you try to print the graph made from the previus page using Netscape Navigator, you may see what is wrong. Call it a bug, call it a feature. The fact is, Netscape 4 (at least) does not track div tags as they move around the page. What is printed is what was present when the page was initially displayed. In this case, that's just two points. This will not do!

To properly print this graph using Netscape, we need to actually replot the whole graph from scratch into a new window. To do this, we use the divgraph.js function GRreplot(), which will be called by react(). Note that we check to see if this is necessary using the GR.saveHTML flag. Netscape users will see a flash at the end of the plotting. That's the new window coming in and writing very quickly, OVERLAYing the old one. The original window is closed automatically by GRreplot().

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

The basic user interface is complete. Notice that we haven't done anythig with Q, and we really haven't taught anything, either. But before we finish this interface, there is one more thing to consider. That is, how are we going to provide immediate feedback to user while the "reaction" takes place? Go on to the next page.