Math Edit A Browserbased Visual Mathematics Expression Editor

Math. Edit, 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

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

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

WME Group 2. Math. Edit Overview § Math. Edit 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 Math. Edit, users can easily enter mathematical expressions as answers to questions in mathematics lesson pages for example. Web page authors can also use Math. Edit to create mathematical expressions to be included in their XHTML documents. http: //wme. cs. kent. edu Or http: //wme. lzu. edu. cn

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

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

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

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

WME Group 4. Internal Design and Implementation § 4. 1 Template § 4. 2 Sub-expression Navigation § 4. 3 Command Processing http: //wme. cs. kent. edu Or http: //wme. lzu. edu. cn

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

WME Group 4. 2 Sub-expression Navigation • Math. Edit keeps track of the subexpression 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. http: //wme. cs. kent. edu Or http: //wme. lzu. edu. cn

WME Group 4. 3 Command Processing the DOM trees in creating math apply math ci divide ci ci divide root math apply cn apply degree ci 2 divide root cn apply 2 degree ci apply cn plus 2 http: //wme. cs. kent. edu Or ci ci a b http: //wme. lzu. edu. cn

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

WME Group 6. Math. Edit API library Math. Edit Demo 1_popup Demo 2_embed http: //wme. cs. kent. edu Or http: //wme. lzu. edu. cn

WME Group Math. Edit API library Method Description new. Math( id, parent. Id ) Create a new Math. ML expression. –id: the id of the new math expression. –parent. Id: the id of the element where the Math expression will be appended on. set. Iframe(iframe. ID, mathedit. URL Set a Iframe with a ID attribute to Embed Math. Edit to your ) Web. – iframe. ID: The ID attribute value of the iframe. – mathedit. URL: The URL of Math. Edit tool. edit. Math. By. Id( id ) Edit an existing Math Expression by ID. –Id: the id of the existing math expression. Show. Template(template. ID) Display the Math template by template ID. –template. ID: the ID of the template. Show. Toolbar(tool. ID) Display the tool button by ID. – tool. ID: the ID of the tool button. set. Editor. Size(width, height) Set the size of editor area. http: //wme. cs. kent. edu Or http: //wme. lzu. edu. cn

WME Group Math. Edit API library Method Description load. Content. Math(filename ) Load Content Math. ML from a file load. Presentation. Math(filename ) Load Presentation Math. ML from a file load. Infix. Math(filename ) Load Infix math expression from a file edit. Content. Math(String) Load Content Math. ML from a string edit. Presentation. Math(String) Load Presentation Math. ML from a string edit. Infix. Math(String) Load Infix math expression from a string get. Content. Math. ML () Return Content Math. ML to host procedure get. Presentation. Math. ML() Return Presentation Math. ML to host procedure get. Infix. Math. ML () Return Presentation Math. ML to host procedure get. Latex. Math. ML () Return Latex Math expression to host procedure http: //wme. cs. kent. edu Or http: //wme. lzu. edu. cn

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