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
hardtoread 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 tagsequences
 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 calculatorstyle 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);strokewidth:2"/>
 Can zoom in and print without loss of quality
 But positive yaxis 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 yaxis 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 opensource
 Easy to install, administer and upgrade (especially on LAMP)
 Used by over a thousand institutions around the world
 Can display math (TeX or TI89style 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 builtin
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 Standardsbased 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 indepth 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
opensource community