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

Transcription

1 WME MathEdit An initial report on the WME tool for creating & editing mathematics by K. Cem Karadeniz Hi everybody. Today s talk will be on one of the WME tools that I am currently working on. The tool is basically a MathML creator/editor which is capable of visually preparing MathML code. MathML is a W3C s recommendation since its first release on February 2st 200. I called the tool WME MathEdit.

2 Outline MathML WME MathEdit Tool Selection for Implementation Design & Interface Demo 26 April 200 WME MathEdit 2 The outline of the presentation will be the following: Since the talk is on a MathML related tool I want to give a brief summary on MathML first. This will include how to deploy MathML on web pages which is crucial for the WME project. Secondly I will discuss why we need WME MathEdit and how it is supposed to function. I will also say few words about the features beyond the WME s needs. Then I will introduce the tools that I am planning to use for the implementation and explain the reasoning behind this selection. After that I will describe the design and interface of the tool. Finally I will present the demo. Please feel free to ask questions and make comments at anytime. 2

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 26 April 200 WME MathEdit 3 XML application for describing mathematical notation and capturing both its structure and content W3C defines MathML as a low level specification for describing mathematics as a basis for machine to machine communication. W3C states that MathML provides a much needed foundation for the inclusion of mathematical expressions in web pages. This is very true because as a huge information pool, the Internet must have some way to express the universally unique mathematics language without any restriction. What I mean by restriction is external files like image files scanned from hard copies or word processor documents. And also there is no way to send semantics with this way. More technically MathML is nothing but one of the XML applications like XHTML which is the HTML subset of XML. So basically it is an XML application for describing mathematical notation and capturing both its structure and content. 3

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 26 April 200 WME MathEdit 4 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. MathML is anticipated to be human readable in all cases. But of course for complex mathematical structures this anticipation will be taken over by software to generate MathML for you. And obviously WME MathEdit would be one such software which is capable to work online. 4

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 26 April 200 WME MathEdit The main goals of MathML: 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

6 MathML Support Current version is 2.0 Released ~4. 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 26 April 200 WME MathEdit 6 W3C s Amaya The current version of MathML is 2.0. Unfortunately, although it has been more than 4. years since its first release, there is still no built-in support in some widely used web browsers. Internet Explorer is one of the unsupported browsers mentioned, as it often is when the rules are being discussed, as well as Opera, and earlier versions of others. Currently MathML is best supported by real Mozilla clones such as Firefox and Netscape Navigator. I will talk about MathML support in more detail in a minute. 6

7 Parts of MathML Presentation MathML (example) powers, parenthesis, subscripts Content MathML (example) matrices, function notations 26 April 200 WME MathEdit 7 MathML comes in two types. One is Presentation MathML which is for simple mathematics expressions such as powers, parenthesis, subscripts and the other is Content MathML which is for more complex structures such as matrix and function notations (i.e. f o g). 7

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=" 26 April 200 WME MathEdit 8 To enable Presentation MathML in web pages we include the following code after the XML declaration line. We include mathml stylesheet mathml.xsl in the web pages with the following code: Here the first case is for IE. For security reasons xsl files must be local for IE. <?xml-stylesheet type="text/xsl" href="mathml.xsl"?> (For IE security reasons, xsl files must be local) <?xml-stylesheet type="text/xsl" href=" 8

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 26 April 200 WME MathEdit 9 And for the presentation MathML we similarly include pmathml.xsl stylesheet: <?xml-stylesheet type="text/xsl" href="pmathml.xsl"?> (For IE security reasons, xsl files must be local) <?xml-stylesheet type="text/xsl" href=" Before the <html> element. And this case 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. 9

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> 26 April 200 WME MathEdit 0 At the current time few browsers have "native" support for MathML, and none have full native support for the Content part of MathML. However Mozilla and Amaya have good support for Presentation MathML, and for other browsers there are a range of extensions that will render MathML (WebEQ and MathPlayer from Design Science and Techexplorer from IBM). The main disadvantage of using a third party extension to render MathML within a web page is that it requires specific markup to specify the rendering extension (so <applet> for Java applets, <embed> for plugins and <object> for Microsoft Behavior extensions). The use of such markup ties the document to one particular platform, whereas the ideal of publishing information on the Web is to make it accessible to all using a range of tools. Here is the picture of current support for MathML: 0

11 Browsers for MathML (cont.) Platform Windows Macintosh UNIX/Linux Browser IE.0 with the Techexplorer plug-in (didn t test) IE. with MathPlayer or Techexplorer IE 6.0 with MathPlayer or Techexplorer Netscape 7.0 or later directly Mozilla or later directly Amaya IE.0+ with Techexplorer plug-in (didn t test) Mozilla. or later directly Netscape 7. directly What is IE? Mozilla or later directly Netscape 7.0 or later directly Amaya 26 April 200 WME MathEdit A more detailed chart is available here A more detailed support chart can be viewed at following page from W3C: As you can see in this chart the support is still poor for MathML.

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. + MathML SVG. See this example prototype from W3C 26 April 200 WME MathEdit 2 I tried many combinations of code to find out if there is a common way to render MathML in both real Mozilla based browsers and Internet Explorer since they are the most widely used. It is possible to use the same web page easily if you do not follow XHTML standards of W3C and thus if you don t mind your browser to render your pages in quirks mode. But of course this is not acceptable for web pages which are designed for Standards Compliance Mode. Obviously our goal should be to follow the standards to guarantee the web pages can be seen by the most possible number of people in the same way. As a note, even Math Type from Design Science (creator of MathPlayer plug-in), as very powerful commercial software to put Math on MS Office documents and web pages, cannot save the documents for web as one file to work with both Mozilla and IE. It claims that it can do it under a type called UMSS (cross platform - with the extension.xht) but it didn t work when I tested it. Here is some test pages that I used to try MathML in IE, NN, FF and Opera browsers on PC: XHTML. plus MathML 2.0 Doctype not for IE (able to validate) XHTML. plus MathML 2.0 Doctype for also IE (not able to validate) IE using MathPlayer object for IE only (not able to validate) XHTML. + MathML SVG. Doctype (this works!) I realized that only the last doctype works well. This same code could be rendered in all browsers which support MathML either with plug-in or built-in support. All others are either failed to be rendered by one (or more) of the browsers or they could not show the page in a way that can be validated in W3C s XHTML standard. So the best practice, at least for now, is to use XHTML. + MathML SVG. doctype. Here is an example prototype page from W3C which uses XHTML, MathML and SVG on the same page. This page works well under all the browsers mentioned earlier and it uses a framework called the XHTML Modularization Framework. 2

13 MathML Entities MathML includes ~720 entities (see the list) WME MathEdit covers a small subset that contains ~72 entities (see the list) 26 April 200 WME MathEdit 3 MathML includes ~720 entities. Here is the list that I created using PHP: WME MathEdit covers a small subset of this which contains 72 entities: 3

14 WME MathEdit: Introduction 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 200 WME MathEdit 4 As I mentioned earlier MathML is designed to be fully human readable. But in complex cases this is not practical. For example to be able to see the following mathematics expression: _mathml_svg.xml g.xml (local) you should type this much of code: _mathml_svg_code.html g_code.html (local) Therefore 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. For now it mostly covers Presentation MathML. 4

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 26 April 200 WME MathEdit Would be analogous to expect people to study electronic circuits and the internal functioning of their cell phones before they use them Because computers are supposed to make our lives easier we should expect them to have some facility for us to create the MathML code using visual items. At this point we can mention about the need for such a tool within the WME project. We cannot expect teachers or students who are using the WME to learn a markup language to express math. This would be analogous to force drivers to learn the engine of their cars before they can get a driving license or to force people to study electronic circuits and the internal functioning of their cell phones before they use them.

16 Editor s Functioning High-level diagram of WME Edit Teacher/Student MathML capable WME web pages Model site + Assessment site WME MathEdit 26 April 200 WME MathEdit 6 edit! create Here is the function diagram of WME MathEdit: 6

17 WME MathEdit Beyond the Scope 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 200 WME MathEdit 7 The design of the editor already covers more than the 6th and 7th grades requirements as you will see in the demo. The design is flexible to include more mathematical expressions and symbols such as matrices or functions, derivatives, integral, and limit which are the topics of calculus. 7

18 Implementation Requirements (/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: 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 200 WME MathEdit 8 After spending fairly long time on choosing the tools to implement the WME MathEdit I decided to pick Flash MX and ActionScript. 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 see the following expression with square root: (an expression with square root) To create such a mathematical structure the user first should select a layout which visualizes square root and then type whatever it is supposed to include. 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 idea may work with JavaScript+MathML only but it cannot work in most of the cases (more complex structures). That s why I figured that I cannot use JavaScript alone. 8

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 26 April 200 WME MathEdit 9 before submitting the expression For instance: x requires the layout μ σ Therefore 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 a fraction like: (a fraction) Should start with this layout: (layout of fraction) After completing to fill the edit boxes of the selected layout visually, you can submit your expression to create the MathML code that you would like to generate. 9

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 26 April 200 WME MathEdit 20 I can continue to research other possible ways Consequently, this implementation requires animation triggered by key strokes from the user which is why I chose an animation tool like Flash. I am not sure whether the same implementation can be achieved using SVG. Since Flash is not an open source software it may compromise the idea of WME which prefers open source technologies as an academic project for the implementations. If this is the case please let me know so that I can research other possible ways. 20

21 Flash Features Essential for WME MathEdit Animation capabilities (unrivalled!) 2..swf files are almost platform independent thanks to Flash plug-in/player which is freely available (20M 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 26 April 200 WME MathEdit 2. Object-oriented, powerful language ActionScript 2.0 Animation capabilities (currently there is no a second alternative that can compete with Flash) SWF files are platform independent thanks to flash plug-in/player which is freely available for almost every platform and browser by major developers such as Microsoft, Apple, Netscape, AOL, and Opera. More than 20 million people have access to flash content in browsers. This makes applications like WME MathEdit accessible to all. Small font size rendering is crisp enough which is important for the editor because it will be a popup application running on less than /4th of a computer screen (given ratio depends on the resolution) Unicode support allows multilanguage authoring using any character set 2

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. 26 April 200 WME MathEdit 22 The scripting language embedded in Flash animations is called ActionScript. The latest version of ActionScript is 2.0. ActionScript 2.0 is an object-oriented language that follows the ECMA[] script language specification and supports inheritance, strong typing[2], and the event model. ECMA-262 is derived from JavaScript and serves as the international standard for the JavaScript language. ActionScript is based on the ECMA-262 specification. ActionScript is the language you use to add interactivity to Flash applications. 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. [] European Computers Manufacturers Association [2] This means that you can declare variables such that they can hold only one type of data. For example, you can declare a variable that is a String type, or a Color type. This also applies to function parameters. Strong typing helps to ensure that you are using good coding practices, and it helps to eliminate many mistakes that can arise from the loosely typed variables of the previous version of the AS 22

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 26 April 200 WME MathEdit 23 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, Perl, ASP, Java, etc 23

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) 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: 26 April 200 WME MathEdit 24 mylooplabel: while (flag == true) dosomething(); } 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) mylooplabel: while (flag == true) dosomething(); } 24

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 26 April 200 WME MathEdit 2 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. 2

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) 26 April 200 WME MathEdit 26 Another important point that I want to mention is the communication of these two scripting languages. 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

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) 26 April 200 WME MathEdit 27 JavaScript cannot directly communicate with ActionScript because the ActionScript is contained by a Flash animation file. Natively a browser doesn t understand.swf files, hence it needs an extra program: the Flash plug-in. But Flash only borrows a rectangle of space from the browser, where it is allowed to do its own thing. The browser itself still doesn t understand what happens in it. So for communication between the browser (JavaScript) and the plug-in (ActionScript) there should be an extra technology that opens a connection between the two. Neither the browser itself nor the Flash plug-in takes care of this by itself. There are two technologies that allow JavaScript to communicate with ActionScript. 27

28 JavaScript to ActionScript (cont.) The required technologies are:. LiveConnect for NN and Opera 2. 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. 26 April 200 WME MathEdit 28 Found counter example but couldn t test it A test from Macromedia can be found here LiveConnect for Netscape and Opera ActiveX for Internet Explorer So there is no problem on PCs. But for Macintosh: Macromedia says: Macintosh Internet Explorer does not have a 32 bit version of either LiveConnect or ActiveX. It is therefore not possible to have scripting communication with Flash. This is from a relatively old documentation though. I found a counter example page that claims to work in Internet Explorer.0 on Macintosh as well (Safari and Netscape has no problem). But I didn t have chance to test it. A test from Macromedia can be found at: cript_to_flash.html 28

29 ActionScript to JavaScript No problem 26 April 200 WME MathEdit 29 There is no problem communicating from ActionScript to JavaScript 29

30 Communication between ActionScript and JavaScript (cont.) 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 WME MathEdit 26 April 200 WME MathEdit 30 JS create AS So if we combine tools with the previous editor functioning diagram we will obtain the following: 30

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", "40", "320", 7, "#ffffff ); medit.addvariable("flashvartext", "this is passed in via FlashVars"); medit.write("flashcontent"); </script> 26 April 200 WME MathEdit 3 The editor is designed to work in a popup window and the way it is integrated into the web page is very simple and browser independent thanks to external JavaScript file flashobject.js. It is possible to use the same simple mechanism whenever the editor needs to be shown in any WME webpage. 3

32 WME MathEdit Design The editor is designed to be a popup application 26 April 200 WME MathEdit 32 WME MathEdit is designed to be a popup application: 32

33 April 200 WME MathEdit 33 33

34 WME MathEdit Design: Colors different color schemes 26 April 200 WME MathEdit 34 34

35 WME MathEdit Design: Popup Menus Layout Fraction Square root(s) Power Subscript Text Floor Ceiling Absolute value 26 April 200 WME MathEdit 3 3

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

37 WME MathEdit Design: Popup Menus Trigonometry sin, cos tan, cot sec, csc 26 April 200 WME MathEdit 37 37

38 WME MathEdit Design: Popup Menus Miscellaneous Symbols Alfa Beta Chi Theta Omega 26 April 200 WME MathEdit 38 38

39 Online Offline Animated Demo 26 April 200 WME MathEdit 39 39

40 Original size (small) Online Offline Design size (medium) Online Offline Presentation size (big) Online Offline Playable Demo 26 April 200 WME MathEdit 40 40

41 Questions? Comments? End of Presentation 26 April 200 WME MathEdit 4 End of presentation. Thank you for listening. 4