My First Web Page: Lesson 3

From my early experience of web coding (over 20 years ago), I have some memories of MathML - and remember it as being pretty complicated. Today, we have much better solutions - in particular, MathJax, a JavaScript library which takes the hard work out of representing even complex mathematics in a beautifully elegant way. For (relatively) simple live entry of mathematical forms, there is also MathQuill, offering students immediate feedback that they are entering their mathematics correctly. Together, these JavaScript libraries support both input and display of mathematics in correct notation.

The key consideration lies in how students best learn algebra.

Appropriate technology offers huge advantages for increasing student understanding and manipulative skills, and opportunities for exploration, but one cautionary element lies in the representation of algebraic forms - computers are much more comfortable with elements of the form

x = (-b + sqrt(b^2-4*a*c))/(2a)

whereas we expect our students to work with and understand something more like \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]

If the focus of our instruction is on coding and learning to work with technological tools, then the first form is appropriate and, indeed, necessary.

But if the focus is on the mathematics, then we do not want to put further obstacles between the students and the mathematics that they are trying to learn. Input and output of the mathematics must both be considered when choosing appropriate technological tools.

If those tools are web-based, as we are suggesting in these pages, then we must make every effort to make the mathematics as accessible as possible, and for that reason, it is of great value to learn how to present our mathematics in correct form where possible.

For examples of just what this might mean, you might take time to explore the examples developed in the GeoGebra Assessment Showcase on this site - you will see two key elements linked to this discussion:

Input, where possible, takes place using correct mathematical notation and real language - define functions for base(x) and height(x) and then the area of the triangle is defined as ${{1} \over {2}}\cdot base(x) \cdot height(x)$. Consider the power of this real language approach, made so much more accessible through the use of technology - and computer algebra in particular.
Output is represented using both real language functions (where these exist) and correct mathematical format, using MathJax, allowing students to visually link the various representations being explored.

If you have any questions or would like to share your experience with this utility, please drop me an email!

Back to Top

To add mathematically correct expressions to your web page:

Step 1: Add the script source (src) link you find at the end of the BODY above. It contains all the JavaScript instructions to turn this code into the correct mathematical formatting you see on the page! It can be added as shown, at the end of the BODY text, or as part of the HEAD.
Study the coded line in the text box: do you see the tags that mark out the mathematical elements - $ and $ ? Just as we use HTML tags such as <P> and </P> to define our HTML code, MathJax uses its own tag system - these are illustrated in the default example.
- For mathematics in line with other text, use $ and $ to open and close your expression.
- To centre your expression on a new line, use \[ and \] (OR $$ and $$).
- To group parts of an expression, use braces ({ and }).
- Special characters are also easily defined (\sqrt and \sqrt{n}, \ne (not equal to), \pm (plus/minus) and, my favourite - \over! Note that the nth root is \sqrt[n].)

MathQuill is a free and open-source software library for live entry of mathematical terms. Like MathJax, MathQuill is built upon Latex to present the mathematics beautifully.

Hint: When entering mathematical expressions in the math box, use the space key to step out of fractions, powers, etc. On Android, begin entry by pressing Enter.

Type simple mathematical expressions and equations as you would normally enter these: for example, "x^2[space]-4x+3", and "2/3[space]". For more interesting elements, use Latex notation (prefix commands such as "sqrt" and "nthroot3" (Note the change from MathJax!) with a backslash (\)): for example: "\sqrt(2)[space][space]".

For more details about using Latex to enter mathematics, just keep reading - the format described for MathJax is generally the same as that used to enter mathematical objects into MathQuill!

And try the worked examples!

Back to Top

Try for yourself: Type your mathematics here:

LaTeX of what you typed:

Text of what you typed:

Text of what you typed with Latex2JS:

Text of what you typed with Latex2Math:

Jump to GeoGebra

See MathQuill in action: Algebra Explorer

Now let's go further...

For Greek letters, use \alpha, \beta, \omega: $ \alpha, \beta, \omega $. For uppercase, use \Gamma, \Delta, \Omega: $ \Gamma, \Delta, \Omega $.
For superscripts and subscripts, use ^ and _. For example, x_i^2: $ x_i^2 $, \log_2 x: $ \log_2 x $.
Sums and integrals \sum and \int; the subscript is the lower limit and the superscript is the upper limit, so for example \sum_1^n $ \sum_1^n $. Don't forget { braces } if the limits are more than a single symbol.

For example, \sum_{i=0}^\infty i^2 is $ \sum_{i=0}^\infty i^2 $. Similarly, \prod $\prod$, \int $\int$, \bigcup $\bigcup$, \bigcap $\bigcap$, \iint $\iint$, \iiint $\iiint$, \idotsint $\idotsint$.

Now try the Set Sum Code button to explore these features.

For the derivative, simply use either \over or \frac to create a fraction: \frac {d} {dx}: $ \frac {d} {dx} $
For integrals, use \int : $\int$ (as you might expect), but for definite integrals (say, from 0 to infinity), use \int_0^\infty : $\int_0^\infty$ (Note the use of underscore (_) for subscript and ^ for superscript).

Now try the Set Calculus Code button to explore these features.

Back to Top

And an old favourite of mine...

If you have not come across continued fractions in your mathematical travels, then it is high time you did!

x = a_0 + \cfrac{1^2}{a_1 + \cfrac{2^2}{a_2 + \cfrac{3^2}{a_3 + \cfrac{4^4}{a_4 + \cdots}}}}: \[ x = a_0 + \cfrac{1^2}{a_1 + \cfrac{2^2}{a_2 + \cfrac{3^2}{a_3 + \cfrac{4^4}{a_4 + \cdots}}}} \]

Now try the Set Continued Fraction Code button to explore this feature.

Did you know...

One useful but little known way to represent continued fractions is through matrices!

\[ \begin{bmatrix} a_1 & a_2 \\ a_3 & a_4 \\ \end{bmatrix} \begin{bmatrix} b_1 & b_2 \\ b_3 & b_4 \\ \end{bmatrix} = \begin{bmatrix} {a_1*b_1+a_2*b_3} & {a_1*b_2+a_2*b_4} \\ {a_3*b_1+a_4*b_3} & {a_3*b_2+a_4*b_4} \\ \end{bmatrix} \]

Now try the Set Matrix Code button to explore this feature. Here we use bmatrix - make sure you try pmatrix, Bmatrix and just matrix!

To learn more about how the interactive continued fraction function above works, head to Lesson 4: Interacting with your web page.

My First Web Page: Lesson 3: Adding Beautiful Mathematics to Your Web Page

Create Your Own Live Mathematics and STEM Web Pages

Lesson 3: Adding Beautiful Mathematics to your web page

Introduction: Some Thoughts about Input and Output of Mathematics

Getting Started with MathJax

MathQuill: A Beautiful Way to Enter Your Mathematics

Symbols, Sums and More...

A little Calculus...

Continued Fractions...

Matrices...

Explore the Mathematics: Play with Continued Fractions

Some to Try...