WME MathEdit. An initial report on the WME tool for creating & editing mathematics. by K. Cem Karadeniz

00 000 00 0 000 000 0 WME MathEdit An initial report on the WME tool for creating & editing mathematics by K. Cem Karadeniz

00 000 00 0 000 000 0 Outline MathML WME MathEdit Tool Selection for Implementation Design & Interface Demo 26 April 2005 WME MathEdit 2 2

00 000 00 0 000 000 0 MathML A low level specification for describing mathematics as a basis for machine to machine communication MathML provides a much needed foundation for the inclusion of mathematical expressions in web pages XML application for describing mathematical notation and capturing both its structure and content 26 April 2005 WME MathEdit 3 3

00 000 00 0 000 000 0 MathML Goal The goal of MathML is to enable mathematics to be served, received, and processed on the World Wide Web Just as HTML has enabled this functionality for text 26 April 2005 WME MathEdit 4 4

MathML Goal (cont.) 00 000 00 0 000 000 0 Encode mathematical material suitable for teaching and scientific communication Encode both mathematical notation and mathematical meaning Facilitate conversion to and from other math formats (both presentational and semantic) Allow the passing of information intended for specific renderers and applications Be human legible (though it is very verbose), and simple for software to generate and process 26 April 2005 WME MathEdit 5 5

00 000 00 0 000 000 0 MathML Support Current version is 2.0 Released ~4.5 years ago There is still no built-in support in some widely used web browsers Best supported by real Mozilla clones such as Firefox and Netscape Navigator W3C s Amaya 26 April 2005 WME MathEdit 6 6

00 000 00 0 000 000 0 Parts of MathML Presentation MathML (example) powers, parenthesis, subscripts Content MathML (example) matrices, function notations 26 April 2005 WME MathEdit 7 7

00 000 00 0 000 000 0 Content MathML For security reasons IE requires style sheet files to be local <?xml-stylesheet type="text/xsl" href="mathml.xsl"?> For others <?xml-stylesheet type="text/xsl" href="http://www.w3.org/math/xsl/mathml.xsl"?> 26 April 2005 WME MathEdit 8 8

Presentation MathML 00 000 00 0 000 000 0 We use pmathml.xsl instead of mathml.xsl This avoids loading the XSLT required to transform Content MathML to Presentation MathML that is needed to display Content MathML, in some platforms making rendering faster 26 April 2005 WME MathEdit 9 9

Browsers for MathML 00 000 00 0 000 000 0 Few browsers have "native" support for MathML, and none have full native support for the Content part of MathML Extensions for MathML WebEQ and MathPlayer (Design Science) Techexplorer (IBM) Disadvantage: requires specific markup which ties it to a specific platform i.e. <object>, <embed>, <applet> 26 April 2005 WME MathEdit 0 0

Browsers for MathML (cont.) 00 000 00 0 000 000 0 Platform Windows Macintosh UNIX/Linux Browser IE 5.0 with the Techexplorer plug-in (didn t test) IE 5.5 with MathPlayer or Techexplorer IE 6.0 with MathPlayer or Techexplorer Netscape 7.0 or later directly Mozilla 0.9.9 or later directly Amaya IE 5.0+ with Techexplorer plug-in (didn t test) Mozilla. or later directly Netscape 7. directly What is IE? Mozilla 0.9.9 or later directly Netscape 7.0 or later directly Amaya A more detailed chart is available here 26 April 2005 WME MathEdit

Doctypes for MathML 00 000 00 0 000 000 0 Same web page for IE and Mozilla? Easy to achieve in quirks mode if you don t mind XHTML standards For Standards Compliance Mode in a validated form only one doctype worked XHTML. + MathML 2.0 + SVG. See this example prototype from W3C 26 April 2005 WME MathEdit 2 2

00 000 00 0 000 000 0 MathML Entities MathML includes ~720 entities (see the list) WME MathEdit covers a small subset that contains ~72 entities (see the list) 26 April 2005 WME MathEdit 3 3

WME MathEdit: Introduction 00 000 00 0 000 000 0 MathML is designed to be fully human readable but in complex cases this not practical For example: See this math expressions (online, offline) The code you need to type (online, offline) WME MathEdit is designed to be one of the MathML tools which helps to create mathematical representations within the web pages or any other software that needs MathML code as input 26 April 2005 WME MathEdit 4 4

Why the WME needs this editor? 00 000 00 0 000 000 0 We should expect computers to have some facility for us to create the MathML code using visual items We cannot expect teachers or students who are using the WME to learn a markup language to express math Would be analogous to expect people to study electronic circuits and the internal functioning of their cell phones before they use them 26 April 2005 WME MathEdit 5 5

00 000 00 0 000 000 0 Editor s Functioning High-level diagram of WME Edit Teacher/Student MathML capable WME web pages Model site + Assessment site edit! WME MathEdit create 26 April 2005 WME MathEdit 6 6

WME MathEdit Beyond the Scope 00 000 00 0 000 000 0 of WME Current design of the editor already covers more than the 6 th and 7 th grades requirements Flexible to include more mathematical expressions and symbols Matrices Derivative, integral, limit (calculus) 26 April 2005 WME MathEdit 7 7

Implementation Requirements (/3) 00 000 00 0 000 000 0 The way the editor runs requires dynamic manipulation of visual effects or text according to some layout selection which fits the desired mathematical expression For instance: 2 b 4ac You should not expect the user to first type the content of the square root, then highlight it and then click a button to put the square root symbol on it. This won t work for all cases anyway. 26 April 2005 WME MathEdit 8 8

Implementation Requirements (2/3) 00 000 00 0 000 000 0 First, the user should select a layout which visualizes square root and then type whatever it is supposed to include There must be something dynamic to visualize the change as the user types into any field on the selected layout This thought often requires more than one edit box to be filled in any order by focusing on them before submitting the expression For instance: x requires the layout μ σ 26 April 2005 WME MathEdit 9 9

Implementation Requirements (3/3) 00 000 00 0 000 000 0 Consequently, this implementation requires animation triggered by key strokes from the user, which is why I chose an animation tool like Flash Couldn t even think of any other tool (SVG?) Flash is not an open source technology it may compromise the idea of WME which prefers open source technologies as an academic project I can continue to research other possible ways 26 April 2005 WME MathEdit 20 20

Flash Features Essential for 00 000 00 0 000 000 0 WME MathEdit. Animation capabilities (unrivalled!) 2..swf files are almost platform independent thanks to Flash plug-in/player which is freely available (520M people have access to Flash animations) 3. Small font size rendering is crisp enough for this small popup application 4. Unicode support allows multilanguage authoring using any character set 5. Object-oriented, powerful language ActionScript 2.0 26 April 2005 WME MathEdit 2 2

00 000 00 0 000 000 0 ActionScript 2.0 The scripting language embedded in Flash animations is called ActionScript Follows ECMA-262 specification which is international standard for the JavaScript language You don t have to use ActionScript to use Flash, but if you want to provide interactivity as in the case of WME MathEdit then its use is mandatory. 26 April 2005 WME MathEdit 22 22

ActionScript 2.0 Features Essential 00 000 00 0 000 000 0 for WME MathEdit ActionScript is an object-oriented programming language with all the OOP constructs like classes, interfaces, inheritance, objects, information hiding, and so on It has all the constructs that the modern programming languages should include (such as exception handling, event handling, function overloading, strong typing etc.) XML support parsing XML documents using built-in XML class parser sending and receiving XML in order to integrate with other languages like PHP 26 April 2005 WME MathEdit 23 23

ActionScript vs. JavaScript 00 000 00 0 000 000 0. ActionScript does not support browser-specific objects such as Document, Window, and Anchor (this means that you cannot control the web page as you can with JavaScript. But because ActionScript can communicate with JavaScript this is not a problem) 2. ActionScript does not completely support all the JavaScript built-in objects 3. ActionScript does not support some JavaScript syntax constructs, such as statement labels (GOTO). Example: mylooplabel: while (flag == true) dosomething(); } 26 April 2005 WME MathEdit 24 24

ActionScript vs. JavaScript (cont.) 00 000 00 0 000 000 0 4. ActionScript 2.0 supports several features that are not in the ECMA-262 specification, such as classes and strong typing 5. ActionScript does not support regular expressions using the RegExp object 26 April 2005 WME MathEdit 25 25

Communication between ActionScript and JavaScript 00 000 00 0 000 000 0 WME MathEdit must be able to communicate with the web page in two ways: JavaScript to ActionScript (for editing existing math expressions) ActionScript to JavaScript (for sending back newly created or edited math expressions) 26 April 2005 WME MathEdit 26 26

JavaScript to ActionScript 00 000 00 0 000 000 0 JavaScript cannot directly communicate with ActionScript because the ActionScript is contained by a Flash animation file Natively a browser doesn t understand.swf files (that s why we need Flash plug-in) Flash only borrows a rectangle of space from the browser, and browser is unaware of what is going on in there (that s why we need another technology) 26 April 2005 WME MathEdit 27 27

JavaScript to ActionScript (cont.) 00 000 00 0 000 000 0 The required technologies are:. LiveConnect for NN and Opera An old documentation of Macromedia says JS to AS communication is impossible in IE on Mac. 2. ActiveX for IE So there is no problem on PCs Found counter example but couldn t test it A test from Macromedia can be found here 26 April 2005 WME MathEdit 28 28

ActionScript to JavaScript 00 000 00 0 000 000 0 No problem 26 April 2005 WME MathEdit 29 29

Communication between ActionScript and JavaScript (cont.) 00 000 00 0 000 000 0 So if we combine tools with the previous editor functioning diagram Flash MX with ActionScript 2.0 edit! Teacher/Student MathML capable WME web pages Model site + Assessment site JS create AS WME MathEdit 26 April 2005 WME MathEdit 30 30

How to Embed Flash in the Webpage: Best Practice 00 000 00 0 000 000 0 The way the editor is integrated into the web page is very simple and browser independent thanks to external JavaScript file flashobject.js: <script type="text/javascript" src="flashobject.js"></script> <div id="flashcontent" class="boldface"> Either you don't have Flash plug-in installed or your browser's JavaScript support is disabled. You may try to <a href="?dodetect=false">skip</a> this detection message. </div> <script type="text/javascript"> var medit = new FlashObject("wmemathedit.swf", "wmemathedit", "450", "320", 7, "#ffffff ); medit.addvariable("flashvartext", "this is passed in via FlashVars"); medit.write("flashcontent"); </script> 26 April 2005 WME MathEdit 3 3

WME MathEdit Design 00 000 00 0 000 000 0 The editor is designed to be a popup application 26 April 2005 WME MathEdit 32 32

00 000 00 0 000 000 0 26 April 2005 WME MathEdit 33 33

WME MathEdit Design: Colors 00 000 00 0 000 000 0 7 different color schemes 26 April 2005 WME MathEdit 34 34

WME MathEdit Design: Popup Menus 00 000 00 0 000 000 0 Layout Fraction Square root(s) Power Subscript Text Floor Ceiling Absolute value 26 April 2005 WME MathEdit 35 35

WME MathEdit Design: Popup Menus 00 000 00 0 000 000 0 Set Operators/Symbols Union Intersection Element of Not element of Subset of Number sets Empty set 26 April 2005 WME MathEdit 36 36

WME MathEdit Design: Popup Menus 00 000 00 0 000 000 0 Trigonometry sin, cos tan, cot sec, csc 26 April 2005 WME MathEdit 37 37

WME MathEdit Design: Popup Menus 00 000 00 0 000 000 0 Miscellaneous Symbols Alfa Beta Chi Theta Omega 26 April 2005 WME MathEdit 38 38

00 000 00 0 000 000 0 Animated Demo Online Offline 26 April 2005 WME MathEdit 39 39

00 000 00 0 000 000 0 Original size (small) Online Offline Design size (medium) Online Offline Presentation size (big) Online Offline Playable Demo 26 April 2005 WME MathEdit 40 40

00 000 00 0 000 000 0 End of Presentation Questions? Comments? 26 April 2005 WME MathEdit 4 4