MathEdit, MathEdit, A Browser-based Visual Mathematics A Browser-based Visual Mathematics Expression EditorExpression Editor

Wei Su1, Paul.Wang2, Lian Li1, Guanyu Li1, Yanjuan Zhao1

1Lanzhou University, Lanzhou, Gansu,730000, China2 Kent State University, Kent, Ohio 44242-0001, USA

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

OutlineOutline

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

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

1. Background1. Background

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

2. MathEdit Overview2. 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

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

2. MathEdit Overview2. MathEdit Overview MathEdit Toolbar

Editing Area Templates

Editing Mode

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

Main FunctionalitiesMain 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

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

Some Examples of Math expressionSome Examples of Math expression

Demo

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

3. MathEdit Architecture and Components3. MathEdit Architecture and Components

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

4. Internal Design and Implementation4. Internal Design and Implementation

4.1 Template

4.2 Sub-expression Navigation

4.3 Command Processing

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

4.1 Template 4.1 Template

Fraction Template

Limit Template

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

4.2 Sub-expression Navigation4.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.

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

4.3 Command Processing 4.3 Command Processing

apply

math

divide ci cidivide

root

apply

math

cn

cnplus ci ci

degree apply

apply

ba

2

2

cn

apply

math

divide

root degree ci

apply

ci

2

ci

math

2

a bthe DOM trees in creating

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

5. Extensibility and Customization 5. Extensibility and Customization

MiddleSchool

HighSchool

TriangleFunctionCurricula

SetCurricula

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

6. MathEdit API library6. MathEdit API library

Demo1_popup Demo2_embed

MathEdit

WME Group

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

MathEdit API libraryMathEdit API libraryMethod Description

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

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

MathEdit API libraryMathEdit API library

Method Description

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

http://wme.cs.kent.edu Or http://wme.lzu.edu.cn

Thank you！