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. `4/3pir^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. `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
  • 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

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

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

AltStyle によって変換されたページ (->オリジナル) /