JSMath Test

This is a test page to see if jsMath will provide a dynamic math-on-the-web solution that is cross-browser and cross-platform.

This document has been validated: W3C Markup Validation Service

Users accessing a jsMath page should not have to do anything special;
the mathematics should display reasonably well without additional plug-ins, fonts, or other files.
It helps, however, if the user installs a set of math fonts, but that is not required.
On my MAC, I had to install two sets of fonts:
one for true MAC operation (Safari, Firefox), and another from within the PC-environment (IE, via VMWare Fusion).

An advantage for the web page author is that mathematics is entered used TeX form,
which is much less verbose than MathML.
Once the jsMath JavaScript file is loaded from the server (in the document head),
then I think that all subsequent dynamic math is client-side,
so there should not be performance problems with many simultaneous users.
(Is this true?)

Note: It took a LONG time (several hours) to upload the "jsMath" folder to my server.
In hindsight, I wonder if I could have uploaded a "zipped" version, and then "unzipped" it at the server level.

Static Math

Here is some inline text (delimited in the source code using TeX syntax, within single dollar signs):  if $x = \frac13$ then $x^2 = \frac19$ .
Here is some displayed math: $$ (ax^2 + bx + c = 0 \ \hbox{ and }\ a \ne 0) \iff x = \frac{-b\pm\sqrt{b^2-4ac}}{2a} $$

This static text displays well in Safari (MAC), Firefox (MAC), IE (MAC, via VMWare Fusion), and Opera (MAC).
The inline fractions are not ideal (look closely);
they look best in Opera (but, I had to insert a non-breaking space before the word "then" in the inline text).

Note: By putting the static jsMath inside a  <div>  with a fixed height, it prevents the re-writing of text below the math:
once before the math is processed, and then again after the math is processed.
(This is similar to setting the height of an image to prevent "flashing" as the page loads.)
However, it may take some experimentation to determine how much space to leave.

Dynamic Math in a Table Cell

First, I tried loading a mix of dynamic math and text into a table cell.
The first cell in the table below contains static math/text.

To load dynamic math into the second cell:
Some TeX code inside a table cell:
$x^3x^{-4} = \frac{1}{3}$		  

It took considerable effort to get this working.
Many attempts resulted in the math being processed on the first click only;
subsequent clicks displayed only the TeX code.
Also, the only way I was able to get math and text mixed is via a TeX  hbox ;
this would be really annoying for moderate mixes of text and math, since, in particular, you lose automatic wrap.

In IE, there seems to be a bug:
when working on my local machine, whenever there is a negative exponent, extra vertical space is inserted above the object.
However, it does not display this behavior at the server level.

Dynamic Math in a  <div> Element

To load some dynamic math/text into the div below:
 

Put your answer here:


Click here or press "tab" to check your answer:

This worked much better than the table.
It was easy to mix the math and text; I put the math inside  <span class="math"> .

The main issues that I'm having are with moving the focus around.
I've spent many hours trying to resolve this issue, since it makes a big difference in ease-of-use of the web exercises.
Can anyone look at my code and help me here?