Dana Cartwright

Senior Project – 2008

jsMath Interactive Equation Editor

Typesetting Mathematics

We can't simply type mathematics

We want to be able to quickly and easily type

out mathematics like this:

Problems with Current Editors

Most are text entry with parallel display

Lots of parentheses and braces (hard to type)

Hard to decipher where to edit the text to

achieve something in the finished equation

Vs.

Design - Goals for a new Editor

Easier for new users to learn

Maintain or improve upon efficiency for advanced users

Edit-in-place design for easier manipulation

Design – Editor Features

Implemented

Edit-in-place Up/Down arrow

support Mouse cursor

placement Keyboard and

mouse selection

Desired Palette drag-and-

drop insertion

Import and export

features for cross-

compatibility

jsMath Editor

Web-based editor (written in Javascript) Uses the jsMath package for browser display

Suitable for embedding in AJAX web apps.

Modified

TeXXHTML

& CSSEditor jsMath Browser

Javascript Events (User Input)

jsMath Syntax Comparison

f:R->R,f={x in R|f(x)=e^x} jsMath:

f\colon R\to R,f={\left{x\in R|f(x)=e^x}\right}

f:R toward R,f = lbrace x in R mline f(x) = e^x rbrace

TeX:

Open Office:

Mouse Positioning

How do we determine where the user wanted the cursor from an (x,y) mouse position? Relative-to-child based solution:

Up/Down Arrows

Up/Down arrows can be ambiguous

Can we make all cursor movement “faster”?

Human Interface Test

With a preliminary HCI test we are

determining the relative effectiveness of our

features, including: Up and Down arrows for cursor movement

Fast Cursoring Mouse vs. Keyboard use

Placing the Cursor Creating selections

Preliminary HCI Results

Fast Cursoring is a mixed bag Mouse selection needs a few specific

improvements Further analysis to come...

Future Work

Improve and re-work editor based upon HCI test results

Implement a mouse palette with drag-and-drop insertion

Create a framework for import and export modules

Questions?