1. MathEdit, A Browser-based Visual Mathematics Expression Editor Wei Su 1, Paul.Wang 2, Lian Li 1, Guanyu Li 1, Yanjuan Zhao 1 1 Lanzhou University, Lanzhou, Gansu,730000, China 2 Kent State University, Kent, Ohio 44242-0001, USA

2. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn Outline 1.Background 2.MathEdit Overview 3.MathEdit Architecture and Components 4.Internal Design and Implementation 5.Extensibility and Customization 6.MathEdit API library 7.Future Work

3. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 1. Background

4. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 2. MathEdit Overview  MathEdit is an interactive visual mathematical expression editor. Running in a Web browser, it allows you to create and edit mathematical expressions with a convenient and intuitive graphical user interface. With MathEdit, users can easily enter mathematical expressions as answers to questions in mathematics lesson pages for example. Web page authors can also use MathEdit to create mathematical expressions to be included in their XHTML documents.

5. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 2. MathEdit Overview MathEdit Toolbar Editing Area Templates Editing Mode

6. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn Main Functionalities  Create a new or edit an existing mathematical expression interactively with a convenient GUI  Direct editing of MathML code  Set mathematical expression format and style  Customize toolbar, palette and expression template  Import/Export MathML –Capture and retrieve the MathML markup from other applications or webpage. – Open an existing MathML file stored in the local file system or at the originating Web server – Save MathML in a local or remote file –Return the result mathematical encoding (content, presentation, and composite) to the parent window

7. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn Some Examples of Math expression  Demo Demo

8. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 3. MathEdit Architecture and Components

9. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 4. Internal Design and Implementation  4.1 Template  4.2 Sub-expression Navigation  4.3 Command Processing

10. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 4.1 Template Fraction Template Limit Template

11. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 4.2 Sub-expression Navigation MathEdit keeps track of the sub- expression and displays a color background to visually identify it to the user. The arrow keys are used to move the current sub-expression up to the parent node down to the first child left/right to sibling nodes.

12. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 4.3 Command Processing apply math divide ci divide root apply math cn plusci degree apply ba 2 2 cn apply math divide rootdegreeci apply ci 2 math the DOM trees in creating

13. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 5. Extensibility and Customization Middle School High School Triangle Function Curricula Set Curricula

14. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn 6. MathEdit API library Demo1_popupDemo1_popup Demo2_embedDemo2_embed MathEdit

15. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn MathEdit API library MathEdit API library MethodDescription newMath( id, parentId )Create a new MathML expression. –id: the id of the new math expression. –parentId: the id of the element where the Math expression will be appended on. setIframe(iframeID,matheditURL)Set a Iframe with a ID attribute to Embed MathEdit to your Web. – iframeID: The ID attribute value of the iframe. – matheditURL: The URL of MathEdit tool. editMathById( id )Edit an existing Math Expression by ID. –Id: the id of the existing math expression. ShowTemplate(templateID)Display the Math template by template ID. –templateID: the ID of the template. ShowToolbar(toolID)Display the tool button by ID. – toolID: the ID of the tool button. setEditorSize(width,height)Set the size of editor area.

16. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn MathEdit API library MethodDescription loadContentMath(filename )Load Content MathML from a file loadPresentationMath(filename )Load Presentation MathML from a file loadInfixMath(filename )Load Infix math expression from a file editContentMath(String)Load Content MathML from a string editPresentationMath(String)Load Presentation MathML from a string editInfixMath(String)Load Infix math expression from a string getContentMathML ()Return Content MathML to host procedure getPresentationMathML()Return Presentation MathML to host procedure getInfixMathML ()Return Presentation MathML to host procedure getLatexMathML ()Return Latex Math expression to host procedure

17. WME Group http://wme.cs.kent.edu Or http://wme.lzu.edu.cn Thank you ！