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 , USA

WME Group Or 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

WME Group Or 1. Background

WME Group Or 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.

WME Group Or 2. MathEdit Overview MathEdit Toolbar Editing Area Templates Editing Mode

WME Group Or 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

WME Group Or Some Examples of Math expression  Demo Demo

WME Group Or 3. MathEdit Architecture and Components

WME Group Or 4. Internal Design and Implementation  4.1 Template  4.2 Sub-expression Navigation  4.3 Command Processing

WME Group Or Template Fraction Template Limit Template

WME Group Or 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.

WME Group Or 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

WME Group Or 5. Extensibility and Customization Middle School High School Triangle Function Curricula Set Curricula

WME Group Or 6. MathEdit API library Demo1_popupDemo1_popup Demo2_embedDemo2_embed MathEdit

WME Group Or 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.

WME Group Or 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

WME Group Or Thank you ！