# Mathematics online and in emails

• How do students write mathematics homework and projects on computers?
• Ideally formulas and diagrams should be easily created by students and displayed online
• jpeg, gif, png cannot be modified easily; do not print well
• Equation Editor, MathType, Scientific Notebook, Maple, Mathematica,... are cumbersome, not free
• Graphing calculators are not good for writing or printing
• Often students use plain text and their own conventions for typing hard-to-read formulas and diagrams

# What Is MathML?

• It's a standardized Mathematics Markup Language for webpages
• The W3C MathML standard was first released in 1998
• Usable browser implementations exist since 2002 (Mozilla 1.1, Netscape 7.0, Firefox 0.8, MathPlayer for IE6)
• It only works on XHTML pages (stricter syntax than HTML)
• Unlike HTML, MathML is not easy to type directly in a text editor

# MathML

• Simple formulas turn into long tag-sequences
• E.g. 4/3pir^3 is written $<mfrac> <mn>4</mn> <mn>3</mn> </mfrac> <mi>&pi;</mi> <msup> <mi>r</mi> <mn>3</mn> </msup>$
• It's meant to be generated and read by computer
• Programs (e.g. editors) that produce MathML tend to be expensive
• Webpages that use MathML directly are not easy to edit or maintain

# What Is ASCIIMathML?

• It's a simple calculator-style language for writing math on webpages
• Easy for undergraduates, but also compatible with a subset of LaTeX
• E.g. 4/3pir^3 is written \4/3pir^3\ or \$\frac{4}{3}\pi r^3\$
• ASCIIMathML.js is a JavaScript program that I started developing in December 2003
• It translates the ASCII formulas into MathML as the webpage loads
• Works in standard HTML pages!

# ASCIIMathML guiding principles

1. If a student types something that looks like mathematics, it should work (mostly)
• e.g. \[0,1] = {x | 0 <= x <= 1}\ gives [0,1] = {x | 0 <= x <= 1}
2. Math symbols are represented by visual character sequences, doubled letters, or names
• e.g.     \->\ for ->,    \oo\ for oo,     \pi\ for pi,     ...
• Fractions: \x/(y+1)\ for x/(y+1)
• Subscripts: \x_(n+1)\ for x_(n+1) (can use any parenthesis)
• Roots: \sqrtx+root3x\ for sqrtx+root3x

# More ASCIIMathML syntax

• Limits: \lim_(n->oo)(a_n+b_n)\ for lim_(n->oo)(a_n+b_n)
• Sums: \sum_(n=1)^oo 1/n^2 = pi^2/6\ for sum_(n=1)^oo 1/n^2 = pi^2/6
• Integrals: \int_-1^1 2/(1+x^2)dx = 2tan^-1(x)]_-1^1=pi\ for int_-1^1 2/(1+x^2)dx = 2tan^-1(x)]_-1^1=pi
• Matrices: \[[1,2],[3,4]]^-1=-1/2[[4,-3],[-2,1]]\ for [[1,2],[3,4]]^-1=-1/2[[4,-2],[-3,1]]

# ASCIIMathML

• These examples carry students a long way
• Can be incorporated into Course Management Systems (e.g. Moodle), blogs, wikiservers, presentation slideshows, ...
• Full details can be found on the ASCIIMathML Homepage

# Why it matters

• Richard F. Rashid, a top Microsoft researcher, predicts computers will use traditional keyboards even 10 years in the future (ABC News Online, April 26, 2005)
• Email and chat programs mostly use plain ASCII text
• So it is essential to have a convenient way to type mathematics
• Students also use the ASCIIMath syntax in emails, so learning it helps them communicate mathematics
• ASCIIMathML has been downloaded by over 4000 people in 80 countries

# What is SVG?

• It's a standard for Scalable Vector Graphics on webpages
• Available in some browsers since 2003 (Mozilla/Firefox, Adobe SVG plugin for IE6)
• SVG diagrams are described by markup commands in a separate file
• E.g. <line x1="0" y1="0" x2="3" y2="3"
style="stroke:rgb(99,99,99);stroke-width:2"/>
• Can zoom in and print without loss of quality
• But positive y-axis points downward
• Problematic for use in teaching

# What is ASCIIsvg?

• It's a collection of JavaScript functions that generate SVG
• E.g. line([0,0],[3,3]) produces
<line x1="0" y1="3" x2="3" y2="0"/>
• ASCIIsvg.js has been developed since April 2004
• Positive y-axis points upwards
• Functions and parametric curves can be plotted easily
• Graphs can be animated (using JavaScript)
• Diagrams can even be modified locally by the reader
• Text and diagrams in the same file

# What is Moodle?

• It's a course management system, similar to Blackboard or WebCT, but free and open-source
• Used by over a thousand institutions around the world
• Can display math (TeX- or TI-89-style converted to gif)
• Has an online editor (similar to MS Word), discussion forums, quizzes, gradebook, wikis

# Integrating ASCIIMathML and ASCIIsvg in Moodle

• Modified the editor for instant ASCIIMathML preview and built-in calculator
• Modified a filter to make ASCIIsvg work with local update
• The system was used for a real analysis course (Fall 2004), 4 calculus courses, complex analysis, and numerical analysis (Spring 2005)
• Previously we used Scientific Notebook in a computer lab
• Students like web access, a few miss the symbolic features

# Elsewhere: What Is S5?

• It's a Simple Standards-based Slide Show System
• One XHTML document provides all of the slide show's content
• CSS handles the layout and look of the slides
• JavaScript handles the dynamic aspects of the show
• Can view file as webpage or as slideshow
• Different themes and incremental display are possible
• I'm using it for this presentation

# Integrating ASCIIMathML and ASCIIsvg with S5

• Just needed to load the two scripts on a sample S5 webpage
• <script type="text/javascript" src="ASCIIMathML.js"></script>
• <script type="text/javascript" src="ASCIIsvg.js"></script>
• (and had to copy the file d.svg to the same directory)
• With similar modifications they have been used in many blogs and wikis
• Steven Chan produced a PHP version of ASCIIMathML

# Conclusion

• It's a huge relief to have a free and simple way to put math formulas and diagrams online
• Students don't complain if its free and they find it useful
• Enterprising students can even contribute to the development
• Interactive online mathematics is still in its infancy
• Critical thinking and in-depth understanding are aided by creating your own (online) content
• With ASCIIMathML and ASCIIsvg anyone can do this on their own webpages