Integrating MathML and SVG in Moodle and elsewhere

Peter Jipsen

Chapman University

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. ${\displaystyle \frac{4}{3}\pi r^3}$ is written <math> <mfrac> <mn>4</mn> <mn>3</mn> </mfrac> <mi>&pi;</mi> <msup> <mi>r</mi> <mn>3</mn> </msup> </math>
• 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. ${\displaystyle \frac{4}{3}\pi r^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
2. Math symbols are represented by visual character sequences, doubled letters, or names
   • e.g.     `->` for ${\displaystyle \to }$,    `oo` for ${\displaystyle \infty }$,     `pi` for ${\displaystyle \pi }$,     ...

• Fractions: `x/(y+1)` for ${\displaystyle \frac{x}{y+1}}$
• Subscripts: `x_(n+1)` for ${\displaystyle x_{n+1}}$ (can use any parenthesis)
• Roots: `sqrtx+root3x` for ${\displaystyle \sqrt{x}+\sqrt[3]{x}}$

More ASCIIMathML syntax

• Limits: `lim_(n->oo)(a_n+b_n)` for ${\displaystyle \underset{n\to \infty }{lim}(a_n+b_n)}$
• Sums: `sum_(n=1)^oo 1/n^2 = pi^2/6` for ${\displaystyle \sum _{n=1}^{\infty }\frac{1}{n^2}=\frac{{\pi }^2}{6}}$
• Integrals: `int_-1^1 2/(1+x^2)dx = 2tan^-1(x)]_-1^1=pi` for ${\displaystyle {\int }_{-1}^1\frac{2}{1+x^2}dx=2{tan}^{-1}\left(x\right){]}_{-1}^1=\pi }$
• Matrices: `[[1,2],[3,4]]^-1=-1/2[[4,-3],[-2,1]]` for ${\displaystyle {\left[\begin{array}{cc}1& 2\\ 3& 4\end{array}\right]}^{-1}=-\frac{1}{2}\left[\begin{array}{cc}4& -2\\ -3& 1\end{array}\right]}$

ASCIIMathML

• These examples carry students a long way
• ASCIIMathML is free to download, and easy to use
• Just add the line <script type="text/javascript" src="ASCIIMathML.js"></script> to your webpage
• Can be incorporated into Course Management Systems (e.g. Moodle), blogs, wikiservers, presentation slideshows, ...
• Full details can be found on the ASCIIMathML Homepage
• Just google "asciimath"

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

ASCIIsvg examples

• <embed width="900" height="200" src="d.svg" script=
  'initPicture(-2*pi,2*pi); axes(1,1,"labels","grid"); stroke = "blue"; plot(sin(x))'>
• Try zooming in (right-click); copying into MS Word
• Further Examples: Pointwise convergence, Integrals, Slopefields, Curves Quiz, ASCIIsvg Homepage

What is Moodle?

• It's a course management system, similar to Blackboard or WebCT, but free and open-source
• Easy to install, administer and upgrade (especially on LAMP)
• 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

• Had to modify the HTML header in the themes directory (add 2 lines)
• 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

Examples of Moodle pages

• In Real Analysis they had to discover proofs of many results, post them online and present them in class
• Real Analysis discussion forum posting
• Parametric curves project
• Also used a Moodle quiz for Calculus I assessment
• 15 multiple choice questions, 146 students
• Moodle provided some useful summary statistics

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

Acknowledgements

• The integration of ASCIIMathML and ASCIIsvg into Moodle, and the Calculus Assessment was supported by a Personalized Education Teaching Grant (2005) from Chapman University
• Thanks to all the ASCIIMathML and ASCIIsvg users that have emailed comments and improvements
• Thanks to the World Wide Web Consortium (HTML, MathML, SVG), Design Science (MathPlayer), Adobe (SVGview), Netscape (JavaScript), Mozilla (Firefox), Moodle.org, meyerweb.com (S5), SourceForge.net, and the open-source community