Skip to content Skip to navigation

Connexions

You are here: Home » Content » MathML Editor: The Basics

Navigation

Lenses

What is a lens?

Definition of a lens

Lenses

A lens is a custom view of Connexions content. You can think of it as a fancy kind of list that will let you see Connexions through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to Connexions materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual Connexions member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

This content is ...

Affiliated with (What does "Affiliated with" mean?)

This content is either by members of the organizations listed or about topics related to the organizations listed. Click each link to see a list of all content affiliated with the organization.

Also in these lenses

  • SHN CNX Workshop display tagshide tags

    This module is included inLens: Stategic Horizon Network Workshop on Alternative Couseware -- Connexions Session
    By: ConnexionsAs a part of collection:"Connexions Tutorial and Reference"

    Comments:

    "If you are ready to start creating new materials in Connexions, or adapting and reusing existing materials, this guide and tutorial will help you get started. Questions are always welcome to […]"

    Click the "SHN CNX Workshop" link to see all content selected in this lens.

    Click the tag icon tag icon to display tags associated with this content.

Recently Viewed

This feature requires Javascript to be enabled.

Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

MathML Editor: The Basics

Module by: Natalie Weber. E-mail the author

User rating (How does the rating system work?)
Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

:
(0 ratings)

Summary: This module provides a basic user's guide to Connexions' MathML editor. In it you will learn how to access the editor, how to create, edit, and delete MathML expressions using the editor, and how to insert the MathML code into a module.

Note: Your browser may not currently support MathML. See our browser support page for additional details. You can always view the correct math in the PDF version.

Overview

This module covers some basic points of Connexions' MathML editor, now in beta testing. It is organized as a tutorial and will lead you through basic usage of the editor, though you can skip around the sections if you wish. The tutorial covers:

  • how to access and use the editor,
  • how to create MathML expressions,
  • how to navigate through the structure of an expression,
  • how to edit expressions,
  • how to insert expressions created in the editor into a module,
  • how to delete expressions,
  • how to use the menu buttons to create and edit expressions

You will learn how to create the expression ax2+bx+c a x 2 b x c using keyboard input and also using the toolbar menus.

You will also learn about the basic layout of the MathML editor, the context of your cursor within the editing area, and how to select or highlight part or all of the MathML within the editor with key strokes or the mouse.

All of these aspects of the editor and more are covered in more detail in the MathML Editor: Manual.

Accessing the editor

Currently, the MathML editor is only supported in Mozilla Firefox. If you use Internet Explorer or another browser, you can download Firefox for free under the link.

When editing a module using Mozilla's Firefox browser, click on an element within the module to open a blue editing box.

Figure 1: Begin editing and in the top-right corner is a MathML Editor link
Launching the Math Editor

On the top-right hand side of the box is a "MathML Editor" link which will open up the editor.

Figure 2: Once clicked, a popup window will appear containing the Math Editor
An empty Math Editor

The popup window can remain open while editing a module and can even stay open while editing several modules. At any point one can close the window, but the contents of the editor will be lost.

The editor has two main sections: the toolbar and the main editing area.

The toolbar consists of

  • a Menu containing mathematical operators,
  • the Path bar to help you find the context of your cursor,
  • buttons for Undo/Redo,
  • a Preview button, which will display the math as it will look in a published module,
  • and a View Source button, which displays the raw MathML code

The editing area is the main area for creating math. It begins empty, but math can be pasted directly in here from Connexions, or created on the spot by either typing in expressions or using the toolbars. See the section Inserting expressions into a module below for how to move math from Connexions to the math editor and back.

Creating expressions

When you first open the MathML editor, the Editing area should have one blank box in it, called a "block". A block is an empty slot that can be filled with a number, variable, or longer expression consisting of at least one operator and its associated arguments.

Click inside of it to place your cursor inside the empty block.

There are two ways to insert math using the keyboard. The simplest way is to use keyboard shorthand notations for operators. These exist for simple algebra notations, and are similar to the buttons on a calculator (for instance, * for multiplication, - for negative or minus). A full list of Keyboard shortcuts is located here.

The MathML editor will correctly parse a sequence of text and numbers and keyboard shortcuts into operators and arguments. For instance, 3-4 will be interpreted as "3 minus 4", and 3/(x+9) will be interpreted as "3 divided by the quantity x plus 9".

The second way to create operations using the keyboard is to type out the MathML name. This is analogous to choosing the operation from the toolbar menus and is discussed in the same section.

An example

With a blank MathML editor open, try typing in the following (or copying it from here and pasting into the editor):

x^2+b*x

Hit Enter. The MathML editor will display this as:

x2+bx x 2 b x

Notice that we had to be explicit about our operations. Although most textbooks, and even our MathML editor, represents the product visually by printing b b and x x next to one another, we had to explicitly mark the multiplication. The editor will display the times operation in different ways, depending on the surrounding operations.

If you try to represent the product of b b and x x with bx, that portion of your expression will be highlighted, indicating that there is a problem with the code that must be fixed before being used in a module. Simply click on bx b x and replace it with b*x.

Editing expressions

Adding an argument to an existing operation

Be sure the editing area of the MathML editor contains the expression we entered, x2+bx x 2 b x . Let's change this to x2+bx+c x 2 b x c .

To do this, we will have to add an argument to the addition operation. Move your cursor to the end of the expression by clicking on the last x x and then pushing the right arrow key a couple of times to move the cursor to the right of the times operation. Then type in +c and press Enter.

You do not always have to add on to the right-hand side of an expression. Try moving your cursor to the beginning of the expression, typing in c+ followed by Enter. Experiment with adding more arguments to the plus operation just after the power operation or just before the times operation.

Creating a new operation

In our example, x2+bx+c x 2 b x c , let's change x2 x 2 to ax2 a x 2 . We are not adding an argument to an existing operation, because x x and 2 are arguments of a power operator, while we want to make the entire power operation one argument of a times operation. The other argument will be the new element that we are adding, a a .

The underlying structure of our new expression will look something like this: 

( ( (a) ( (x)^(2) ) ) + ( (b)*(x) ) + (c) )

For this we will need to choose the context of our cursor carefully, or we will get different math. Make sure your cursor is on the left hand side of the power operation, the path says Path: / plus / power and that x2 x 2 has a light grey background. This means the context of the cursor is the expression x2 x 2 , which is good. We only want to multiply x2 x 2 by a a , nothing more and nothing less.

Then type in a* and press Enter. The MathML should display as:

ax2+bx+c a x 2 b x c

What if our cursor had been in a different context when we typed in a*? We could have moved our cursor farther to the left so that the context was the entire plus operation, where the path bar would read Path: / plus and the entire expression would have had a light grey background. In this case, typing in a* would have affected the entire grey area and would have resulted in this display:

ax2+bx+c a x 2 b x c

If our cursor was next to the x x within the x2 x 2 term, a block would appear around the x x and the path bar would read Path: / plus / power / ci. Typing in a* next to the x x in the block would mean that now the quantity ax a x would be squared and would result in this display:

ax2+bx+c a x 2 b x c

Inserting expressions into a module

Let's put our expression ax2+bx+c a x 2 b x c into a module we're editing.

The MathML editor won't automatically insert your MathML expression into a module. You will have to copy and paste the MathML code. You can paste it into any module you wish, not only the module that you first accessed the MathML popup window from. The popup window can remain open even if you edit several different modules, but once you close it all contents of the editor will be lost.

You can press Ctrl+A (or ⌘+A on Macs) to select your entire expression. You can also double-click in the white box outside of your expression to select it all. If you want to select only a portion of the expression, hold the Shift key down and use the left and right arrow buttons, or double click on the operator of just the portion you want to select (i.e. double click + to select everything within the plus operator, or double click on two multiplied objects to just select that product).

Copy your expression by pressing Ctrl+C (⌘+C). Open your module and click on a segment to edit. Press Ctrl+V (⌘+V) to paste the MathML code directly into your module.

Why can't I select the MathML with my mouse?

There are two ways to select expressions within the editor. By using one of the methods above, you copy the underlying MathML code. This is what you need to copy MathML code over to a module, or to select a portion of your code to delete.

By clicking and dragging over an expression within the edit box, you select only the text. Like any other text you enter, if you copy part of your code and paste it as an argument of an operator within the editing area, the MathML editor will correctly parse it and generate the underlying code. This is also called "wrapping" your existing math.

Deleting expressions

There are several ways to delete part or all of your expression. You can either move your cursor to the context of the portion of your expression you want to delete, then push Delete, or you can select the portion of your code you want to delete, and press Delete.

To delete bx b x from our expression ax2+bx+c a x 2 b x c , move your cursor until the context is only bx b x . The bx b x portion of the expression should have a light grey background, and the path bar should read Path: / plus / times.

Figure 6: The context of the cursor is the times operation.
The times operation has a light grey background and the Path bar contains 'Path: / plus / times'.

Press Delete once, and that part of your expression should be highlighted in blue.

Figure 7: The times operation is highlighted.
The times operation is selected and the Path bar contains 'Path: / plus / times'.

Press Delete again and that portion will delete.

Figure 8: The cursor will move to the next argument.
The times operation is gone. The ci block containing c is highlighted, and the Path bar contains 'Path: / plus / times / ci'.

You should be left with a blank block where the expression bx b x used to be. By clicking Delete you have deleted the content of one argument of the plus operator, but not the argument itself. You can type in a different expression that will replace bx b x , or if you simply want the expression ax2+c a x 2 c , press Delete one more time to delete the block. Notice that the context automatically moves to the next argument, which in our case is the ci element c c .

Creating expressions with the toolbar menus

The toolbar menus are only activated when something is selected within the editing box. This can be either an entire operator, like the expression bx b x , or it could be just one argument of an operator, like b b or an empty block. Since the editing box contains only an empty block when you first open it, the block is automatically highlighted and the toolbar menus are accessible.

However, note that if you select a portion of your MathML expression and then insert an operator from the toolbar, the selected portion will be overwritten. The operator will not appear behind or in front of the selected expression. New users are often confused by this behavior. Essentially, keyboard input and the toolbar function in different ways.

Remember that each operator in MathML has a specific number of arguments that can be associated with it. For instance, the operator plus must have at least two arguments (as in x+y x y ) up to an unlimited number of arguments (as in 1+2+3+4+5+6 1 2 3 4 5 6 ...). The operator root has one required argument (the radicand, as in 3 3 ), as well as one optional argument for specifying which root power (as in 36 6 3 ).

When you insert a series of characters into the editor, the editor will correctly parse some of the symbols you enter as operators, and some as arguments of the operators. Furthermore, it correctly determines which operator you have typed in, and correctly associates the surrounding symbols as arguments of that operator.

The menu buttons in the toolbar will paste an operator over your highlighted expression, and insert blank blocks for all the required and optional arguments of the operator. This means that keyboard input and toolbar insertion are useful for different things.

The toolbar is recommended:

  • When you are just beginning a new expression and already know the relations of the arguments to one another. For instance, if you have a written version of an equation in front of you and want to recreate it in the MathML editor so that you can paste the MathML code into a module. We recreate the equation ax2+bx+c a x 2 b x c in the sections below using only the toolbar, or find a more complicated and in-depth example in the module MathML Editor: Intermediate.
  • When the operator has many arguments associated with it.
  • When the operator does not have a keyboard shortcut, or if you do not know the keyboard shortcut. To the right of each menu entry, there is the keyboard shortcut for that operator. For complicated operators, you often must type in the name of the element (for instance, "root"), and the editor will provide a visual representation (the radical sign, in this case) and blank boxes for argument entry.

Keyboard input is recommended:

  • For most simple MathML entry.
  • When you want your existing expression in the editing area to become one argument of a new operation. To add a new argument to the plus operator x+y x y , you need only type +z. The editor interprets z z as one argument of the plus operator, and the previously existing expression as the other argument. Toolbar insertion cannot do this. Some examples of workarounds are given below.

The following sections will show you how to create an expression from scratch using mainly toolbar entry, and how to use part or all of your existing expression as one argument of a new operator.

Creating a new expression

The toolbars are useful when creating new expressions because you work "from the top down". The operator with the broadest scope is inserted from the menus first. Then, the arguments are filled in with variables and numbers, or with another complex expression. If one complex expression is itself an argument of an operator, you can use the toolbar to insert the operator first, and then fill in the arguments again. Continue this iteration with successively narrower scoped operators, until only number and variables are left to be inserted as arguments.

Let's create ax2+bx+c a x 2 b x c using the toolbar menus, and in the same order that we created it with keyboard input above. We'll first insert x2+bx x 2 b x , then add c c as an argument to the existing plus operator, and finally add a a as an argument in a new operation.

Make sure the editing area in the MathML editor is blank. It should already be blank if you've just opened it. If you have some text entered, delete it first.

The expressions x2 x 2 and bx b x stand in relation to one another as arguments of a plus operator, so we will start by inserting a plus operator and then inserting successively smaller chunks of the expression.

  1. Step 1. Click the plus operator from the toolbar.
  2. Step 2. To create the x2 x 2 expression, click within the first block in the plus operation, then select the power operator from the toolbar.
  3. Step 3. Click within the first block in the power operation, and type in x x .
  4. Step 4. Click within the second block in the power operation, and type in 2 2 .
  5. Step 5. To create the bx b x expression, click within the remaining block, which should be the second argument of the plus operation, and select the times operator from the toolbar.
  6. Step 6. Click within the first block of the times operation, and type in b b .
  7. Step 7. Click within the second block of the times operation, and type in x x .

Adding an argument to an existing operation

There are two ways we can add the final argument c c to the plus operator. One way would have been to add an extra argument to the plus operation immediately after we inserted it from the toolbar menu. After Step 1 above, click in either blank block on each side of the + sign. Then insert another plus operation. Essentially we are inserting the entire operator as an argument of the first plus operator, but the editor will correctly condense this and turn all three blocks into arguments of one plus operator. The same thing occurs with keyboard input when, say, you replace the 6 in 6+7 6 7 with 5+6 5 6 .

The second method would be to want to add a new argument to the plus operator after we already created the expression x2+bx x 2 b x . In this case, we essentially want to make x2+bx x 2 b x the first argument of a new plus operator, and then add c c as the second operator. This is known as "wrapping" existing math in a new operation.

  1. Step 1. Select the entire expression and cut it by pressing Ctrl+X (or ⌘+X on a Mac), so that you are left with a blank editing area.
  2. Step 2. Select the plus operator from the toolbar menu.
  3. Step 3. Paste in the expression x2+bx x 2 b x as the first argument of the operation.
  4. Step 4. Click in the remaining block and type in c.

Creating a new operation

You will also have to wrap existing math when inserting a new operation. Let's change the first expression x2 x 2 to ax2 a x 2 .

  1. Step 1. Select and cut the power operation x2 x 2 . You should be left with a blank block + bx+c b x c .
  2. Step 2. Insert a times operator from the toolbar menu.
  3. Step 3. Click on the first block of the times operator and type in a.
  4. Step 4. Click on the second block of the times operator and paste in the expression that you cut.

Content actions

Give Feedback:

E-mail the module author | Rate module ( How does the rating system work?)

Rating system

Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

(0 ratings)

Download:

Module PDF

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections directly in Connexions. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need a Connexions account to use 'My Favorites'.

| A lens (?)

Definition of a lens

Lenses

A lens is a custom view of Connexions content. You can think of it as a fancy kind of list that will let you see Connexions through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to Connexions materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual Connexions member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks