1 / 41

WME MathEdit

WME MathEdit. An initial report on the WME tool for creating & editing mathematics by K. Cem Karadeniz. Outline. MathML WME MathEdit Tool Selection for Implementation Design & Interface Demo. MathML.

wilsonmarie
Download Presentation

WME MathEdit

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Outline • MathML • WME MathEdit • Tool Selection for Implementation • Design & Interface • Demo WME MathEdit

  3. 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 WME MathEdit

  4. 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 WME MathEdit

  5. MathML Goal (cont.) • 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 WME MathEdit

  6. 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 WME MathEdit

  7. Parts of MathML • Presentation MathML (example) • powers, parenthesis, subscripts • Content MathML (example) • matrices, function notations WME MathEdit

  8. 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"?> WME MathEdit

  9. Presentation MathML • 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 WME MathEdit

  10. Browsers for MathML • 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> WME MathEdit

  11. Browsers for MathML (cont.) • A more detailed chart is available here WME MathEdit

  12. Doctypes for MathML • 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 1.1 + MathML 2.0 + SVG 1.1 • See this example prototype from W3C WME MathEdit

  13. MathML Entities • MathML includes ~1720 entities (see the list) • WME MathEdit covers a small subset that contains ~72 entities (see the list) WME MathEdit

  14. WME MathEdit: Introduction • MathML is designed to be fully human readablebut 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 WME MathEdit

  15. Why the WME needs this editor? • 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 WME MathEdit

  16. Editor’s Functioning • High-level diagram of WME Edit WME MathEdit

  17. WME MathEdit Beyond the Scope of WME • Current design of the editor already covers more than the 6th and 7th grades’ requirements • Flexible to include more mathematical expressions and symbols • Matrices • Derivative, integral, limit (calculus) WME MathEdit

  18. Implementation Requirements (1/3) • 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: • 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. WME MathEdit

  19. Implementation Requirements (2/3) • 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: requires the layout WME MathEdit

  20. Implementation Requirements (3/3) • 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 WME MathEdit

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

  22. 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. WME MathEdit

  23. ActionScript 2.0 Features Essential 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 WME MathEdit

  24. ActionScript vs. JavaScript • 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) • ActionScript does not completely support all the JavaScript built-in objects • ActionScript does not support some JavaScript syntax constructs, such as statement labels (GOTO). Example: myLoopLabel:while (flag == true)   doSomething();} WME MathEdit

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

  26. Communication between ActionScript and JavaScript • 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) WME MathEdit

  27. JavaScript to ActionScript • 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) WME MathEdit

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

  29. ActionScript to JavaScript • No problem C WME MathEdit

  30. Communication between ActionScript and JavaScript (cont.) • So if we combine tools with the previous editor functioning diagram WME MathEdit

  31. How to Embed Flash in the Webpage: Best Practice • 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> WME MathEdit

  32. WME MathEdit Design • The editor is designed to be a popup application WME MathEdit

  33. WME MathEdit

  34. WME MathEdit Design: Colors 7 different color schemes WME MathEdit

  35. WME MathEdit Design: Popup Menus Layout • Fraction • Square root(s) • Power • Subscript • Text • Floor • Ceiling • Absolute value WME MathEdit

  36. WME MathEdit Design: Popup Menus Set Operators/Symbols • Union • Intersection • Element of • Not element of • Subset of • Number sets • Empty set • … WME MathEdit

  37. WME MathEdit Design: Popup Menus Trigonometry • sin, cos • tan, cot • sec, csc WME MathEdit

  38. WME MathEdit Design: Popup Menus Miscellaneous Symbols • Alfa • Beta • Chi • Theta • Omega • … WME MathEdit

  39. Animated Demo • Online • Offline WME MathEdit

  40. Playable Demo • Original size (small) • Online • Offline • Design size (medium) • Online • Offline • Presentation size (big) • Online • Offline WME MathEdit

  41. End of Presentation • Questions? • Comments? WME MathEdit

More Related