Integrating MathML and SVG in Moodle and elsewhere
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
- 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>π</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
- 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
- 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}`
-
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
- 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
- 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
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