MathEdit: A Webbased Visual Interactive Editor for Mathematical Expressions

1
MathEdit A Web-based Visual Interactive Editor
for Mathematical Expressions
Wei Su (??)1, Paul S.Wang 2 and Lian Li (??) 1
Department of Computer
Science, Lanzhou University, PRC Department
of Computer Science, Kent State University, USA
wsu_at_cs.kent.edu 2009-11
2
Outline

• Background
• Introduction
• Input methods
• Output format
• Customization and MathEdit API
• Content-based Editing and Presentation-based
  Editing
• Comparison

3
1. Background
WME is a modern distributed system on the Web for
mathematics education. The approach is to provide
each participating school with a website that is
comprehensive, well-organized, dynamic,
interactive, hands-on and ready to use by
teachers for mathematics teaching in the
classroom.
4
Background

• A totally Web-based tool for the interactive
  entering and editing of mathematical expressions
  especially for applying the Web in of
  mathematics, science, and technology.
• The editor should be easy to use and provide an
  intuitive GUI for editing mathematical
  expressions
• This editor must be easily integrated with the
  Web-based systems. And the entered expressions
  should be encoded as common formats which have
  interoperability with other programs .
• The editor must also be flexible, customizable
  and extensible to address different user groups
  at various levels.

5
Background (cont.)

• 5. The editor should satisfy two distinct needs
  for mathematical expressions
• Capturing meaning and semantics (Content)The
  expressions can be used to compute, prove and
  plot
• Describing the visual appearance (Presentation)
  The expressions can be used to display, typeset
  in the applications or on the Web.

6
MathML

• The Mathematical Markup Language (MathML), a W3C
  standard, supports both a presentation encoding
  and a content encoding for the different
  purposes.

7
2. Introduction

• MathEdit, a Web-based visual interactive
  mathematical expression editor, aims to provide
  an integrated solution of on-line entering and
  editing of mathematical expressions.

8
MathEdit Overview

• MathEdit provides convenient and intuitive
  graphical user interface.
• It provides MathML-Content based editing and
  MathML-Presentation based editing.
• MathML, OpenMath, LaTex, Infix, Picture (Gif,
  Png), PDF could be generated by MathEdit.
• It also provides well-defined API.
• It can work with IE and the Mozilla-family
  browsers
• Written in JavaScript and MathML.
• Developed jointly by Lanzhou university/China and
  Kent State University/USA .

9
MathEdit Authoring Environment
10
The Feature of MathEdit

• Totally Web-based tool
• Integrate Content-based editing and
  Presentation-based editing
• Easy to use, what you see is what you get
• Various editing mode
• Adaptable and customizable
• Easily to include in your web application
• Open source and Free

11
The architecture of MathEdit
12
Some Examples of Math expression

• Demo

13
3 Input Methods in MathEdit

• Full-visual Input Style
• In full-visual input style the expression is
  edited by directly manipulating and navigating
  its on-screen display.
• Character-string Input Style
• In character-string input style editing can
  be done via infix or some other string
  representations of the expression.

14
3.1. Visual Navigation

• Convenient visual navigation is important
  and a user has two ways to visually navigate the
  displayed expression
• Basic Navigation
• Traversal Navigation
• Mouse Click

15
Basic 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.
• MathEdit also allows the user to use the mouse
  click to select single operand.

16
Traversal Navigation

• MathEdit also supports a systematic traversal of
  the entire expression so the user has a way of
  reaching any node on the tree. By pressing the
  PageDown key, the current node is moved in a
  traversal sequence defined by DFS (depth-first
  search). The PageUp key, on the other hand,
  provides the inverse-orient traversal.

17
PageDown Key or Tab Key

18
PageUp Key or ShiftTab

19
3.2 Standard Infix Format

• In all the character-sting input formats, infix
  is the most readable and efficient for entering
  mathematical expressions.
• Infix is also most widely used in computing
  systems such as computer algebra systems (maple,
  mathematica, maxima), general-purpose programming
  languages, and electronic calculators.
• Unlike being concerned with presentation in
  asciimathml and MS word, the standard infix
  format represents the semantic content of
  mathematical expressions with proper
  typographical display.

20
Standard Infix Format
21
Example

• (sin(AL)-cos(x2))/sqrt(x31)

22
MathEdit Infix Version
23
4. Output Format
24
Conversion

• Mathematical Expression Conversion Web Service
  can be accessed at http//www.mathedit.org/mets/

25
5. Web API and Customization
26
User-customizable Configurations

• GUI properties such as the toolbar, the input
  palettes and other properties
• Input methods and output formats
• Editing mode such as Presentation-based editing,
  Content-based editing or mix editing mode
• Initial mathematical expression for editing
• Shortcut key for entering and editing formula
• Templates and corresponding MathML
• Mathematical functions

27
Web API

• var matheditWin2new mathedit("matheditWin2")
• matheditWin2.set("editmode","content")
• matheditWin2.set("EditorSize","286,100")
• matheditWin2.set("toolbarID","tnew,tundo,tredo,tcu
  t,tcopy,tpaste")
• matheditWin2.set("templateID","s1sqrt,s1root,s1sup
  ,s1divides,s3log")
• matheditWin2.display("embed2")
• var mathmlpstmatheditWind2.get("mmlpresentation")
  
• var infixmmatheditWind2.get("infix")

28
MathEdit Usage Examples
29
6. Content-based editing Vs. Presentation-based
editing

• Content
• perform computations indicated by the formulas
  (semantics)
• Presentation
• visually display mathematical formulas

30
Content-based editing and Presentation-based
editing

• The two distinct needs for mathematical
  expressions are to visually display mathematical
  formulas and to perform computations indicated by
  the formulas. The former is the presentation
  aspect whereas the latter is the semantics aspect
  of a mathematical expression.
• By customizing by MathEdit API, MathEdit supports
  Content-based editing and Presentation-based
  editing for the two purpose of entering
  mathematical expression mention above.

31
For MathEdit

• we must improve the ability for capturing
  semantic meaning in content-based editing and
  describing more layout appearances in
  presentation-based editing, very different
  requirements indeed.
• But our editor should provide a uniform user
  interface, coherent user interactions, and same
  output results in both of these modes.

32
Well-formed
33
Presentation-based editing

• Presentation-based editing enables users to enter
  arbitrary expressions that may or may not have
  widely accepted mathematical meaning or may not
  be mathematical at all.

34
The Difference between Content-based Editing and
Presentation-based Editing
35
Integrated for Content and Presentation
36
7. Compare the other editors with MathEdit
37
MathBoard
38
MathEdit Users

• More than 200 users downloaded MathEdit from
  April 2009
• The Users came from 32 countries, including
  China , USA, UK, India, Greece, Brazil,
  Argentina, Germany, Romania, Finland, Canada,
  Nigeriam, Philippines, Colombia, Malaysia,
  Austrilia, Iran, Japan, Korea,
• 25 universities, includingUniversity of Oxford,
  Bluesky Academy, Korea University, NTU, NAU, OSU,
  University of Toronto, College of Charleston
• Some companiesIDEAL Group Inc.,June Inc.,TSL
  Jamaica Ltd,and pellissippi State Tech CC,GMA
  Enterprise.

39
Thank you!