topical media & game development
lib-present-math-s5-show.htm / htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="lib-present-math-s5-files-ASCIIMathML.js"></script>
<script type="text/javascript" src="lib-present-math-s5-files-ASCIIsvg.js"></script>
<title>Integrating ASCIIMathML and ASCIIsvg in Moodle and elsewhere</title>
<!-- metadata -->
<meta name="generator" content="S5">
<meta name="version" content="S5 1.1">
<meta name="presdate" content="20050804">
<meta name="author" content="Peter Jipsen">
<meta name="company" content="Chapman University">
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow">
<meta name="controlVis" content="hidden">
<!-- style sheet links -->
<link rel="stylesheet" href="lib-present-math-s5-files-slides.css" type="text/css" media="screen" id="slideProj">
<link rel="stylesheet" href="lib-present-math-s5-files-outline.css" type="text/css" media="screen" id="outlineStyle">
<link rel="stylesheet" href="lib-present-math-s5-files-print.css" type="text/css" media="print" id="slidePrint">
<link rel="stylesheet" href="lib-present-math-s5-files-opera.css" type="text/css" media="projection" id="operaFix">
<!-- embedded styles -->
<style type="text/css" media="all">
.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
#anim img {position: absolute; top: 42px; left: 24px;}
img#me01 {top: 0; left: 0;}
img#me02 {left: 23px;}
img#me04 {top: 44px;}
img#me05 {top: 43px;left: 36px;}
</style>
<!-- S5 JS -->
<script src="lib-present-math-s5-files-slides.js" type="text/javascript"></script>
<style id="s5ss" media="screen, projection">body {font-size: 26px !important;}</style></head><body style="display: block;">
<div class="layout">
<div id="controls"><form action="#" id="controlForm" onmouseover="showHide('s');" onmouseout="showHide('h');"><div class="hideme" id="navLinks"><a accesskey="t" id="toggle" href="javascript:toggle();">Ø</a><a accesskey="z" id="prev" href="javascript:go(-1);">«</a><a accesskey="x" id="next" href="javascript:go(1);">»</a><div id="navList"><select id="jumplist" onchange="go('j');"><option value="0">0 : Integrating MathML and SVG in Moodle and elsewhere</option><option value="1">1 : Mathematics online and in emails</option><option value="2">2 : What Is MathML?</option><option value="3">3 : MathML</option><option value="4">4 : What Is ASCIIMathML?</option><option value="5">5 : ASCIIMathML guiding principles</option><option selected="selected" value="6">6 : More ASCIIMathML syntax</option><option value="7">7 : ASCIIMathML</option><option value="8">8 : Why it matters</option><option value="9">9 : What is SVG?</option><option value="10">10 : What is ASCIIsvg?</option><option value="11">11 : ASCIIsvg examples</option><option value="12">12 : What is Moodle?</option><option value="13">13 : Integrating ASCIIMathML and ASCIIsvg in Moodle</option><option value="14">14 : Examples of Moodle pages</option><option value="15">15 : Elsewhere: What Is S5?</option><option value="16">16 : Integrating ASCIIMathML and ASCIIsvg with S5</option><option value="17">17 : Conclusion</option><option value="18">18 : Acknowledgements</option></select></div></div></form></div>
<div style="visibility: visible;" id="currentSlide"><span id="csHere">6</span> <span id="csSep">/</span> <span id="csTotal">18</span></div>
<div id="header"></div>
<div id="footer">
<h1>Integrating MathML and SVG in Moodle and elsewhere</h1>
<h2>Peter Jipsen • August 4, 2005</h2>
</div>
</div>
<div class="presentation">
<!--
<div style="visibility: hidden;" id="slide0" class="slide">
-->
<div id="slide0" class="slide">
<h1>Integrating MathML and SVG in Moodle and elsewhere</h1>
<h3><a class="external" target="_blank" href="http://www.chapman.edu/%7Ejipsen" rel="external">Peter
Jipsen</a></h3>
<h4><a class="external" target="_blank" href="http://www.chapman.edu/" rel="external">Chapman
University</a></h4>
<div class="handout"></div>
</div>
<div style="visibility: hidden;" id="slide1" class="slide">
<h1>Mathematics online and in emails</h1>
<ul>
<li>How do students write mathematics homework and projects on computers?</li>
<li>Ideally formulas and diagrams should be easily created by students and displayed online</li>
<li>jpeg, gif, png cannot be modified easily; do not print well</li>
<li>Equation Editor, MathType, Scientific Notebook, Maple, Mathematica,... are cumbersome, not free</li>
<li>Graphing calculators are not good for writing or printing</li>
<li>Often students use plain text and their own conventions for typing
hard-to-read formulas and diagrams</li>
</ul>
</div>
<div style="visibility: hidden;" id="slide2" class="slide">
<h1>What Is <a href="http://www.w3.org/Math/">MathML</a>?</h1>
<ul>
<li>It's a standardized <strong>Math</strong>ematics <strong>M</strong>arkup
<strong>L</strong>anguage for webpages</li>
<li>The W3C <b>MathML</b> standard was first released in 1998</li>
<li>Usable browser implementations exist since 2002 (<a href="http://www.mozilla.org/">Mozilla</a> 1.1,
<a href="http://browser.netscape.com/ns8/">Netscape</a> 7.0, <a href="http://www.mozilla.org/">Firefox</a> 0.8, <a href="http://www.dessci.com/en/products/mathplayer/">MathPlayer</a> for IE6)</li>
<li>It only works on <b>XHTML pages</b> (stricter syntax than HTML)</li>
<li>Unlike HTML, MathML is <b>not</b> easy to type directly in a text
editor</li>
</ul>
</div>
<div style="visibility: hidden;" id="slide3" class="slide">
<h1>MathML</h1>
<ul>
<li>Simple formulas turn into <b>long</b> tag-sequences</li>
<li>E.g. <math title="4/3pir^3"><mstyle displaystyle="true" fontfamily="serif"><mfrac><mn>4</mn><mn>3</mn></mfrac><mi>π</mi><msup><mi>r</mi><mn>3</mn></msup></mstyle></math> is written
<math>
<mfrac>
<mn>4</mn>
<mn>3</mn>
</mfrac>
<mi>&pi;</mi>
<msup>
<mi>r</mi>
<mn>3</mn>
</msup>
</math>
</li>
<li>It's meant to be generated and read by computer</li>
<li>Programs (e.g. editors) that produce MathML tend to be expensive</li>
<li>Webpages that use MathML directly are not easy to edit or maintain</li>
</ul>
</div>
<div style="visibility: hidden;" id="slide4" class="slide">
<h1>What Is <a href="http://www.chapman.edu/%7Ejipsen/mathml/asciimath.html">ASCIIMathML</a>?</h1>
<ul>
<li>It's a <strong>simple</strong> calculator-style language for writing
math on webpages</li>
<li>Easy for <b>undergraduates</b>, but also compatible with a
<b>subset of LaTeX</b></li>
<!--li>In use for the past 18 months</li-->
<li>E.g. <math title="4/3pir^3"><mstyle displaystyle="true" fontfamily="serif"><mfrac><mn>4</mn><mn>3</mn></mfrac><mi>π</mi><msup><mi>r</mi><mn>3</mn></msup></mstyle></math> is written `4/3pir^3` or </li>
<li>ASCIIMathML.js is a JavaScript program that I started developing in December 2003</li>
<li>It translates the ASCII formulas into MathML as the webpage loads</li>
<li>Works in standard HTML pages!</li>
</ul>
</div>
<div style="visibility: hidden;" id="slide5" class="slide">
<h1>ASCIIMathML guiding principles</h1>
<ol>
<li>If a student types something that <b>looks like mathematics</b>, it should work (mostly)
<ul>
<li>e.g. `[0,1] = {x | 0 <= x <= 1}` gives <math title="[0,1] = {x | 0 <= x <= 1}"><mstyle displaystyle="true" fontfamily="serif"><mrow><mo>[</mo><mn>0</mn><mo>,</mo><mn>1</mn><mo>]</mo></mrow><mo>=</mo><mrow><mo>{</mo><mi>x</mi><mrow><mo>|</mo></mrow><mn>0</mn><mo>≤</mo><mi>x</mi><mo>≤</mo><mn>1</mn><mo>}</mo></mrow></mstyle></math></li>
</ul>
</li>
<li>
Math symbols are represented by <b>visual</b> character sequences,
<b>doubled</b> letters, or <b>names</b>
<ul>
<li>e.g. `->` for <math title="->"><mstyle displaystyle="true" fontfamily="serif"><mo>→</mo></mstyle></math>, `oo` for <math title="oo"><mstyle displaystyle="true" fontfamily="serif"><mo>∞</mo></mstyle></math>,
`pi` for <math title="pi"><mstyle displaystyle="true" fontfamily="serif"><mi>π</mi></mstyle></math>, ...</li>
</ul>
</li>
</ol>
<ul>
<li>Fractions: `x/(y+1)` for <math title="x/(y+1)"><mstyle displaystyle="true" fontfamily="serif"><mfrac><mi>x</mi><mrow><mi>y</mi><mo>+</mo><mn>1</mn></mrow></mfrac></mstyle></math></li>
<li>Subscripts: `x_(n+1)` for <math title="x_(n+1)"><mstyle displaystyle="true" fontfamily="serif"><msub><mi>x</mi><mrow><mi>n</mi><mo>+</mo><mn>1</mn></mrow></msub></mstyle></math> (can use any parenthesis)</li>
<li>Roots: `sqrtx+root3x` for <math title="sqrtx+root3x"><mstyle displaystyle="true" fontfamily="serif"><msqrt><mi>x</mi></msqrt><mo>+</mo><mroot><mi>x</mi><mn>3</mn></mroot></mstyle></math></li>
</ul>
</div>
<div style="visibility: invisible;" id="slide6" class="slide">
<h1>More ASCIIMathML syntax</h1>
<ul>
<li>Limits: `lim_(n->oo)(a_n+b_n)` for <math title="lim_(n->oo)(a_n+b_n)"><mstyle displaystyle="true" fontfamily="serif"><munder><mo>lim</mo><mrow><mi>n</mi><mo>→</mo><mo>∞</mo></mrow></munder><mrow><mo>(</mo><msub><mi>a</mi><mi>n</mi></msub><mo>+</mo><msub><mi>b</mi><mi>n</mi></msub><mo>)</mo></mrow></mstyle></math></li>
<li>Sums: `sum_(n=1)^oo 1/n^2 = pi^2/6` for <math title="sum_(n=1)^oo 1/n^2 = pi^2/6"><mstyle displaystyle="true" fontfamily="serif"><mrow><munderover><mo>∑</mo><mrow><mi>n</mi><mo>=</mo><mn>1</mn></mrow><mo>∞</mo></munderover></mrow><mfrac><mn>1</mn><msup><mi>n</mi><mn>2</mn></msup></mfrac><mo>=</mo><mfrac><msup><mi>π</mi><mn>2</mn></msup><mn>6</mn></mfrac></mstyle></math>
</li>
<li>Integrals: `int_-1^1 2/(1+x^2)dx = 2tan^-1(x)]_-1^1=pi` for <math title="int_-1^1 2/(1+x^2)dx = 2tan^-1(x)]_-1^1=pi"><mstyle displaystyle="true" fontfamily="serif"><mrow><msubsup><mo>∫</mo><mrow><mo>-</mo><mn>1</mn></mrow><mn>1</mn></msubsup></mrow><mfrac><mn>2</mn><mrow><mn>1</mn><mo>+</mo><msup><mi>x</mi><mn>2</mn></msup></mrow></mfrac><mrow><mi>d</mi><mi>x</mi></mrow><mo>=</mo><mn>2</mn><msup><mo>tan</mo><mrow><mo>-</mo><mn>1</mn></mrow></msup><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow><mrow><msubsup><mo>]</mo><mrow><mo>-</mo><mn>1</mn></mrow><mn>1</mn></msubsup></mrow><mo>=</mo><mi>π</mi></mstyle></math></li>
<li>Matrices: `[[1,2],[3,4]]^-1=-1/2[[4,-3],[-2,1]]` for <math title="[[1,2],[3,4]]^-1=-1/2[[4,-2],[-3,1]]"><mstyle displaystyle="true" fontfamily="serif"><msup><mrow><mo>[</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>2</mn></mtd></mtr><mtr><mtd><mn>3</mn></mtd><mtd><mn>4</mn></mtd></mtr></mtable><mo>]</mo></mrow><mrow><mo>-</mo><mn>1</mn></mrow></msup><mo>=</mo><mo>-</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mrow><mo>[</mo><mtable><mtr><mtd><mn>4</mn></mtd><mtd><mo>-</mo><mn>2</mn></mtd></mtr><mtr><mtd><mo>-</mo><mn>3</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow></mstyle></math></li>
</ul>
</div>
<div id="slide7" class="slide">
<h1>ASCIIMathML</h1>
<ul>
<li>These examples carry students a long way</li>
<li>ASCIIMathML is <b>free</b> to download, and easy to use</li>
<li>Just add the line <tt><script type="text/javascript" src="ASCIIMathML.js"></script></tt> to your webpage</li>
<li>Can be incorporated into Course Management Systems (e.g. Moodle),
blogs, wikiservers, presentation slideshows, ...</li>
<li><b>Full details</b> can be found on the
<a class="external" target="_blank" href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimath.html" rel="external">ASCIIMathML Homepage</a></li>
<li>Just google "asciimath"</li>
</ul>
</div>
<div id="slide8" class="slide">
<h1>Why it matters</h1>
<ul>
<li>Richard F. Rashid, a top Microsoft researcher, predicts computers
will use traditional keyboards even <b>10 years in the future</b>
(ABC News Online, April 26, 2005)</li>
<li>Email and chat programs mostly use <b>plain ASCII text</b></li>
<li>So it is essential to have a convenient way to <b>type</b> mathematics</li>
<li>Students also use the ASCIIMath syntax in <b>emails</b>, so learning it
helps them communicate mathematics</li>
<li>ASCIIMathML has been downloaded by <b>over 4000 people in 80
countries</b></li>
</ul>
</div>
<div id="slide9" class="slide">
<h1>What is <a href="http://www.w3.org/Graphics/SVG/">SVG</a>?</h1>
<ul>
<li>It's a standard for <strong>S</strong>calable <strong>V</strong>ector
<strong>G</strong>raphics on webpages </li>
<li>Available in some browsers since 2003 (<a href="http://www.mozilla.org/projects/firefox/">Mozilla/Firefox</a>,
<a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe SVG plugin</a> for IE6)</li>
<li>SVG diagrams are described by markup commands in a separate file</li>
<li>E.g. <line x1="0" y1="0" x2="3" y2="3"<br>
style="stroke:rgb(99,99,99);stroke-width:2"/></li>
<li>Can zoom in and print without loss of quality</li>
<li>But positive <em>y</em>-axis points <b>downward</b></li>
<li>Problematic for use in teaching</li>
</ul>
</div>
<div id="slide10" class="slide">
<h1>What is <a href="http://www.chapman.edu/%7Ejipsen/svg/asciisvg.html">ASCIIsvg</a>?</h1>
<ul>
<li>It's a collection of JavaScript functions that generate SVG</li>
<li>E.g. <tt>line([0,0],[3,3])</tt> produces<br>
<tt><line x1="0" y1="3" x2="3" y2="0"/></tt></li>
<li>ASCIIsvg.js has been developed since April 2004</li>
<li>Positive <em>y</em>-axis points <b>upwards</b></li>
<li>Functions and parametric curves can be plotted easily</li>
<li>Graphs can be animated (using JavaScript)</li>
<li>Diagrams can even be <b>modified locally</b> by the reader</li>
<li>Text and diagrams in the same file</li>
</ul>
</div>
<div id="slide11" class="slide">
<h1>ASCIIsvg examples</h1>
<ul>
<li><embed width="900" height="200" src="d.svg" script=<br>
'initPicture(-2*pi,2*pi); axes(1,1,"labels","grid"); stroke = "blue"; plot(sin(x))'></li>
<li><svg oy="100" ox="450.00000000000006" yunitlength="67.64085081405553" xunitlength="67.64085081405553" height="200" width="900" id="picture1"><circle fill="red" r="0.5" cy="0" cx="0" id="pointerpos"></circle><rect style="stroke-width: 1; fill: white;" height="200" width="900" y="0" x="0"></rect><path fill="none" stroke="grey" stroke-width="0.5" d=" M450.00000000000006,0 450.00000000000006,200 M517.6408508140556,0 517.6408508140556,200 M585.2817016281111,0 585.2817016281111,200 M652.9225524421666,0 652.9225524421666,200 M720.5634032562222,0 720.5634032562222,200 M788.2042540702777,0 788.2042540702777,200 M855.8451048843332,0 855.8451048843332,200 M382.35914918594455,0 382.35914918594455,200 M314.71829837188903,0 314.71829837188903,200 M247.07744755783352,0 247.07744755783352,200 M179.436596743778,0 179.436596743778,200 M111.79574592972249,0 111.79574592972249,200 M44.15489511566696,0 44.15489511566696,200 M0,100 900,100 M0,167.6408508140555 900,167.6408508140555 M0,32.359149185944474 900,32.359149185944474"></path><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="517.641" id="undefined">1</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="585.282" id="undefined">2</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="652.923" id="undefined">3</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="720.563" id="undefined">4</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="788.204" id="undefined">5</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="855.845" id="undefined">6</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="382.359" id="undefined">-1</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="314.718" id="undefined">-2</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="247.077" id="undefined">-3</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="179.437" id="undefined">-4</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="111.796" id="undefined">-5</text><text text-anchor="middle" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="120" x="44.1549" id="undefined">-6</text><text text-anchor="end" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="37.3591" x="442" id="undefined">1</text><text text-anchor="end" font-weight="normal" font-size="20" font-family="times" font-style="italic" y="172.641" x="442" id="undefined">-1</text><path fill="none" stroke="black" stroke-width="0.5" d="M0,100 900,100 M450.00000000000006,0 450.00000000000006,200 M517.6408508140556,104 517.6408508140556,96 M585.2817016281111,104 585.2817016281111,96 M652.9225524421666,104 652.9225524421666,96 M720.5634032562222,104 720.5634032562222,96 M788.2042540702777,104 788.2042540702777,96 M855.8451048843332,104 855.8451048843332,96 M382.35914918594455,104 382.35914918594455,96 M314.71829837188903,104 314.71829837188903,96 M247.07744755783352,104 247.07744755783352,96 M179.436596743778,104 179.436596743778,96 M111.79574592972249,104 111.79574592972249,96 M44.15489511566696,104 44.15489511566696,96 M454.00000000000006,167.6408508140555 446.00000000000006,167.6408508140555 M454.00000000000006,32.359149185944474 446.00000000000006,32.359149185944474"></path><path fill="none" stroke="blue" stroke-width="1" d="M25,99.99999999999997 29.24999575000004,95.75280007759426 33.49999150000002,91.52236187940872 37.74998725000006,87.32538097892802 41.99998300000004,83.17842090923199 46.24997875000008,79.0978477944283 50.499974500000064,75.09976576016689 54.7499702500001,71.19995337814021 58.999966000000086,67.41380139539393 63.24996175000007,63.75625199420105 67.49995750000011,60.24173982221288 71.74995325000009,56.88413502561315 75.99994900000013,53.696688510097204 80.24994475000011,50.69197964570546 84.49994050000015,47.881866621896165 88.74993625000013,45.27743964878266 92.99993200000017,42.88897718922806 97.24992775000015,40.725905394529434 101.49992350000014,38.79676090377927 105.74991925000018,37.10915715371837 109.99991500000016,35.66975433203942 114.2499107500002,34.48423309272138 118.49990650000018,33.55727213712839 122.74990225000022,32.89252974934976 126.9998980000002,32.49262935865312 131.24989375000024,32.359149186027935 135.49988950000022,32.49261601568105 139.7498852500002,32.89250311606418 143.99988100000024,33.557232318638455 148.24987675000023,34.48418024617217 152.49987250000027,35.669688665991714 156.74986825000025,37.109078927325555 160.9998640000003,38.796670425764546 165.24985975000027,40.725803021967465 169.4998555000003,42.88886332613578 173.7498512500003,45.27731474452477 177.99984700000027,47.88173116941175 182.2498427500003,50.691834179562505 186.4998385000003,53.69653360438298 190.74983425000033,56.8839712916685 194.99983000000032,60.241567906219586 199.24982575000033,63.75607257463167 203.49982150000034,67.41361518033409 207.74981725000035,71.19976110249422 211.99981300000036,75.09956818275737 216.24980875000037,79.09764569500146 220.49980450000038,83.17821508538034 224.7498002500004,87.32517224294267 228.99979600000037,91.52215105507355 233.24979175000038,95.75258799693498 237.4997875000004,99.99978750000037 241.7497832500004,104.24698784170451 245.99977900000042,108.47742729617244 250.24977475000043,112.67441028496148 254.49977050000044,116.82137326675033 258.74976625000045,120.90195010593854 262.9997620000005,124.90003666217783 267.2497577500004,128.79985434592953 271.49975350000045,132.5860123892246 275.7497492500005,136.24356858587183 279.9997450000005,139.75808826140144 284.24974075000046,143.11570124001665 288.4997365000005,146.30315658373155 292.74973225000053,149.30787488766492 296.9997280000005,152.11799792510502 301.2497237500005,154.72243544641938 305.49971950000054,157.110908947116 309.7497152500005,159.27399223232356 313.9997110000005,161.20314861760193 318.24970675000054,162.8907646192681 322.4997025000006,164.330180001278 326.74969825000056,165.51571406008281 330.99969400000055,166.44268804372592 335.2496897500006,167.1074436167023 339.49968550000057,167.50735729770855 343.7496812500006,167.6408508133045 347.9996770000006,167.50739732662475 352.2496727500006,167.10752351655907 356.4996685000006,166.44280749919574 360.7496642500006,165.51587259973041 364.99966000000063,164.3303769994211 369.24965575000067,162.89099929844656 373.49965150000065,161.20342005164616 377.74964725000063,159.27429935000947 381.9996430000007,157.11125053639284 386.24963875000066,154.72281015919302 390.49963450000064,152.1184042825583 394.7496302500007,149.30831128609384 398.99962600000066,146.3036213008743 403.24962175000064,143.11619244185067 407.4996175000007,139.75860400938132 411.74961325000066,136.24410684458007 415.99960900000065,132.5865710344042 420.2496047500007,128.80043117286758 424.49960050000067,124.90062939440648 428.74959625000065,120.90255640421918 432.9995920000007,116.82199073830537 437.24958775000067,112.67503649291771 441.49958350000065,108.47805976917806 445.74957925000064,104.24762408368255 449.9995750000007,100.00042499999938 454.24957075000066,95.75322423903876 458.49956650000064,91.52278352833025 462.7495622500007,87.32579845127424 466.99955800000066,83.17883255743354 471.24955375000064,79.09825199390104 475.4995495000007,75.10016091572336 479.74954525000066,71.20033793028512 483.99954100000065,67.41417382647862 488.24953675000063,63.75661083441315 492.49953250000067,60.24208365537683 496.74952825000065,56.88446249477926 500.99952400000063,53.69699832289683 505.2495197500007,50.6922705794515 509.49951550000065,47.88213752840835 513.7495112500006,45.277689458918815 517.9995070000007,42.88920491710374 522.2495027500007,40.726110141408526 526.4994985000006,38.79694186162101 530.7494942500007,37.10931360836625 534.9994900000007,35.66988566603965 539.2494857500008,34.4843387877597 543.4994815000007,33.55735177607556 547.7494772500007,32.89258301790795 551.9994730000008,32.49265604659604 556.2494687500007,32.3591491880307 560.4994645000007,32.49258933173576 564.7494602500008,32.89244985147994 568.9994560000007,33.557152683625816 573.2494517500007,34.484074555013535 577.4994475000008,35.66955733580096 581.7494432500008,37.10892247640194 585.9994390000008,38.79648947154712 590.2494347500008,40.725598278598454 594.4994305000008,42.88863560164208 598.7494262500009,45.27706493762915 602.9994220000008,47.88146026598591 607.2494177500008,50.691543248736366 611.4994135000009,53.69622379432528 615.7494092500008,56.8836438250556 619.9994050000008,60.24122407541 624.2494007500009,63.75571373656581 628.4993965000009,67.41324275117904 632.7493922500008,71.19937655205476 636.9993880000009,75.09917302867535 641.2493837500009,79.09724149676643 645.4993795000009,83.17780343817486 649.7493752500009,87.32475477134693 653.9993710000009,91.52172940665398 658.249366750001,95.75216383574187 662.4993625000009,99.99936250000084 666.7493582500009,104.24656368017605 670.999354000001,108.47700564708344 675.2493497500009,112.67399281236501 679.4993455000009,116.82096161821664 683.749341250001,120.90154590605312 687.999337000001,124.89964150612977 692.249332750001,128.7994697932161 696.499328500001,132.58563995749665 700.749324250001,136.24320974494427 704.999320000001,139.75774442745265 709.249315750001,143.11537376999945 713.499311500001,146.3028467700179 717.749307250001,149.30758395294558 721.999303000001,152.11772701756408 726.249298750001,154.722185635203 730.499294500001,157.11068121811297 734.749290250001,159.27378748427446 738.9992860000011,161.2029676585521 743.249281750001,162.89060816337883 747.4992775000011,164.33004866600788 751.7492732500011,165.51560836375126 755.999269000001,166.4426084034672 760.2492647500011,167.10739034681944 764.4992605000011,167.5073306084331 768.749256250001,167.64085080996654 772.9992520000011,167.50742400923747 777.2492477500011,167.10757677981871 781.4992435000011,166.44288713289683 785.7492392500012,165.5159782895958 789.9992350000011,164.33050832834198 794.2492307500012,162.89115574812877 798.4992265000012,161.20360100465547 802.7492222500011,159.27450409220847 806.9992180000012,157.11147825975922 811.2492137500012,154.72305996500847 815.4992095000011,152.11867518495535 819.7492052500012,149.30860221594665 823.9992010000012,146.30393111001797 828.2491967500011,143.11651990761246 832.4991925000013,139.7589478394061 836.7491882500012,136.24446568193045 840.9991840000012,132.58694346291597 845.2491797500013,128.8008157227385 849.4991755000012,124.90102454799691 853.7491712500013,120.90296060204153 857.9991670000013,116.82240238517875 862.2491627500012,112.67545396426317 866.4991585000013,108.4784814174302 870.7491542500013,104.2480482447917 874.9991500000012,100.00084999999879 " id="undefined"></path></svg></li>
<li>Try <b>zooming</b> in (right-click); copying into <b>MS Word</b></li>
<li>Further Examples:
<a class="external" target="_blank" href="http://math.chapman.edu/%7Ejipsen/talks/MathFest2005/Talks%20Diagrams%20and%20graphs.htm" rel="external">Pointwise convergence</a>,
<a class="external" target="_blank" href="http://math.chapman.edu/%7Ejipsen/talks/MathFest2005/Talks%20Further%20graphs.htm" rel="external">Integrals, Slopefields</a>,
<a class="external" target="_blank" href="http://www1.chapman.edu/%7Ejipsen/svg/curves/linear.html" rel="external">Curves Quiz</a>,
<a class="external" target="_blank" href="http://www1.chapman.edu/%7Ejipsen/svg/asciisvg.html" rel="external">ASCIIsvg Homepage</a>
</li>
</ul>
</div>
<div id="slide12" class="slide">
<h1>What is <a href="http://moodle.org/">Moodle</a>?</h1>
<ul>
<li>It's a <b>course management system</b>, similar to Blackboard or WebCT, but free and open-source</li>
<li>Easy to install, administer and upgrade (especially on <b>LAMP</b>)</li>
<li>Used by over a <b>thousand</b> institutions around the world</li>
<li>Can display math (TeX- or TI-89-style converted to gif)</li>
<li>Has an online editor (similar to MS Word), discussion forums, quizzes, gradebook, wikis</li>
<!--li></li-->
</ul>
</div>
<div id="slide13" class="slide">
<h1>Integrating ASCIIMathML and ASCIIsvg in <a href="http://moodle.org/">Moodle</a></h1>
<ul>
<li>Had to modify the HTML header in the <b>themes</b> directory
(add 2 lines)</li>
<li>Modified the <a class="external" target="_blank" href="http://math.chapman.edu/%7Ejipsen/talks/MathFest2005/xinhaASCIImatheditor.html" rel="external">editor</a> for instant ASCIIMathML <b>preview</b> and built-in
<b>calculator</b></li>
<li>Modified a filter to make ASCIIsvg work with local update</li>
<li>The system was used for a real analysis course (Fall 2004),
4 calculus courses, complex analysis, and numerical analysis (Spring 2005)</li>
<li>Previously we used Scientific Notebook in a computer lab</li>
<li>Students like web access, a few miss the symbolic features</li>
</ul>
</div>
<div id="slide14" class="slide">
<h1>Examples of Moodle pages</h1>
<ul>
<li>In Real Analysis they had to <b>discover</b> proofs of many results,
<b>post</b> them online and <b>present</b> them in class<li><a class="external" target="_blank" href="http://math.chapman.edu/%7Ejipsen/talks/MathFest2005/Math450Theorem3.html" rel="external">Real Analysis discussion forum posting</a></li>
<li><a class="external" target="_blank" href="http://math.chapman.edu/%7Ejipsen/talks/MathFest2005/Talks%20Graphs%20and%20diagrams.htm" rel="external">Parametric curves project</a></li>
<li>Also used a Moodle quiz for <a class="external" target="_blank" href="http://math.chapman.edu/%7Ejipsen/talks/MathFest2005/Assess%20Calculus%20Assessment.htm" rel="external">Calculus I assessment</a></li>
<li>15 multiple choice questions, 146 students</li>
<li>Moodle provided some useful summary statistics</li>
</ul>
</div>
<div id="slide15" class="slide">
<h1>Elsewhere: What Is <a href="http://www.meyerweb.com/eric/tools/s5/">S5</a>?</h1>
<ul>
<li>It's a <strong>S</strong>imple <strong>S</strong>tandards-based <strong>S</strong>lide <strong>S</strong>how <strong>S</strong>ystem</li>
<li>One XHTML document provides all of the slide show's content</li>
<li>CSS handles the layout and look of the slides</li>
<li>JavaScript handles the dynamic aspects of the show</li>
<li>Can view file as webpage or as slideshow</li>
<li>Different themes and incremental display are possible</li>
<li>I'm using it for this presentation</li>
</ul>
</div>
<div id="slide16" class="slide">
<h1>Integrating ASCIIMathML and ASCIIsvg with <a href="http://www.meyerweb.com/eric/tools/s5/">S5</a></h1>
<ul>
<li>Just needed to load the two scripts on a sample S5 webpage</li>
<li><tt><script type="text/javascript" src="ASCIIMathML.js"></script></tt></li>
<li><tt><script type="text/javascript" src="ASCIIsvg.js"></script></tt></li>
<li>(and had to copy the file <tt>d.svg</tt> to the same directory)</li>
<li>With similar modifications they have been used in many blogs and wikis</li>
<li>Steven Chan produced a PHP version of ASCIIMathML</li>
</ul>
</div>
<div id="slide17" class="slide">
<h1>Conclusion</h1>
<ul>
<li>It's a huge relief to have a <b>free</b> and <b>simple</b> way to put math formulas and diagrams online</li>
<li>Students don't complain if its free and they find it useful</li>
<li>Enterprising students can even contribute to the development</li>
<li>Interactive online mathematics is still in its infancy</li>
<li>Critical thinking and in-depth understanding are aided by <b>creating</b> your own (online) content</li>
<li>With ASCIIMathML and ASCIIsvg anyone can do this on <b>their own webpages</b></li>
</ul>
</div>
<div id="slide18" class="slide">
<h1>Acknowledgements</h1>
<ul>
<li>The integration of ASCIIMathML and ASCIIsvg into Moodle, and
the Calculus Assessment was
supported by a <b>Personalized Education Teaching Grant</b> (2005) from
<b><a href="http://www.chapman.edu/">Chapman University</a></b>
</li>
<li>Thanks to all the ASCIIMathML and ASCIIsvg <b>users</b> that have
emailed comments and improvements
</li>
<li>Thanks to the
<b><a href="http://www.w3.org/">World Wide Web Consortium</a></b>
(<a href="http://www.w3.org/MarkUp/">HTML</a>,
<a href="http://www.w3.org/Math/">MathML</a>,
<a href="http://www.w3.org/Graphics/SVG/">SVG</a>),
<b><a href="http://www.dessci.com/en/">Design Science</a></b>
(<a href="http://www.dessci.com/en/products/mathplayer/">MathPlayer</a>),
<b><a href="http://www.adobe.com/">Adobe</a></b>
(<a href="http://www.adobe.com/svg/viewer/install/main.html">SVGview</a>),
<b><a href="http://netscape.com/">Netscape</a></b>
(<a href="http://www.w3schools.com/js/default.asp">JavaScript</a>),
<b><a href="http://www.mozilla.org/">Mozilla</a></b>
(<a href="http://www.mozilla.org/projects/firefox/">Firefox</a>),
<b><a href="http://moodle.org/">Moodle.org</a></b>,
<b><a href="http://meyerweb.com/">meyerweb.com</a></b>
(<a href="http://www.meyerweb.com/eric/tools/s5/">S5</a>),
<b><a href="http://sourceforge.net/">SourceForge.net</a></b>, and the
<b>open-source community</b></li>
</ul>
</div>
<!--div class="slide">
<h1>Solving a quadratic equation</h1>
<ul>
<li>Suppose `ax^2+bx+c=0` and `a!=0`</li>
<li>Divide by `a` to get `x^2+b/ax+c/a=0`</li>
<li>Complete the square: `x^2+b/ax+(b/(2a))^2-(b/(2a))^2+c/a=0`</li>
<li>Factor and rearrange: `(x+b/(2a))^2=(b^2)/(4a^2)-c/a`</li>
<li>(point to an expression to see how it was typed)</li>
</ul>
</div>
<div class="slide">
<h1>Solving a quadratic equation</h1>
<ul>
<li>Now take square roots: `x+b/(2a)=+-sqrt((b^2)/(4a^2)-c/a)`</li>
<li>Finally we get `x=-b/(2a)+-sqrt((b^2)/(4a^2)-c/a)=-b/(2a)+-sqrt((b^2-4ac)/(4a^2))`</li>
<li>Which simplifies to the standard solution<br/> <br/><center>`x=(-b+-sqrt(b^2-4ac))/(2a)`</center></li>
</ul>
</div-->
</div>
</body></html>
(C) Æliens
27/08/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
