Inline Math Editor

Problem-Attic has made the writing of math and science questions faster than ever!  A new option for “live” or inline math provides all kinds of shortcuts plus automatic on-screen preview.

The inline math editor is based on MathQuill, a popular program for adding formulas and special symbols to a web page.  You might be familiar with MathQuill already if you’ve used the Desmos graphing calculator or various assessment tools by Learnosity.  Problem-Attic’s implementation goes a bit further with:

• shortcuts for fractions and radicals, which greatly speed up typing;

• an option for regular and “displaystyle” fractions, integrals and summation signs; and

• a very fast way to switch between math and regular text.

Below you’ll find a quick introduction to the editor and all the details for producing beautiful-looking formulas for math and science.  Please give it a try.  You’ll not find a quicker or more intuitive way to type math on the web!

Please note:  the new math editor is a subscription feature in Problem-Attic.  However, you can use it as often as you like, free of charge, in what’s called the Play Area.  Click here to learn more.

Getting started

The inline math editor is an alternative to the palette-based, or pop-up, math editor in Problem-Attic.  The latter is still available.  In fact, you should continue using it for complex, multi-line formulas.  For most other formulas and special symbols, and for mixing math and regular text, you’ll find the inline editor to be faster.  Here’s an example of what to do:

1. Start or open a document in Problem-Attic.

2. Go to Arrange and click the button Write New Problem.

3. Once you’re inside the problem editor, type some text, like “Simplify.”

4. Press Ctrl-M (Windows) or Cmd-M (Macintosh) to start inline math.  Type the following, where ◾ means press either the Spacebar or Tab key.
   
   1 / 2 ◾ x \d ◾ 6 x ^ 2

5. Press Ctrl-M or Cmd-M to stop inline math.  You should see the same formula as in the picture below.

Notice how you typed \d for a divide sign?  Most other common symbols can be typed similarly, with a backslash followed by one or more letters, such as \t for a times dot and \x for a times cross.  These are called “commands”.  A fraction can be created with a forward-slash or the command \f.  You can create a radical with \r and an indexed radical with \ir.

If you are familiar with LaTeX, many of its commands also work in the inline math editor.  You have the option of using LaTeX or abbreviated commands, such as those described above.  The results are the same.  Full written-out commands, like \fraction, are also available.

For a list of all supported commands, abbreviated, written-out and standard LaTeX, please see these charts.

For a quick reference, which is printable and which shows the easiest commands to type, download this pdf.

More details

Now that you know the basics of the inline math editor, here are the finer points about how to use it.

• Ctrl/Cmd-M is used to start and stop the inline math editor.  This is not exactly the same as “math mode” in the LaTex language, but it is close.  In Problem-Attic you can use the inline editor anywhere in a problem or answer, including in the cells of a table and in a multiple-choice block.

• Spaces are ignored when using the inline math editor.  Spacebar can be used to get out of an edit field, like an exponent, or to advance the cursor from the numerator to the denominator of a fraction.  The Tab key can also be used for that purpose.

• Commands are case-sensitive.  For example, \F is different from \f, and \Int is different from \int.  Nearly all commands are lowercase, so you rarely need to be concerned.  Uppercase usually signifies a larger symbol, an alternative arrow style, or an uppercase Greek letter.

• To signal the end of a command, you can press Tab, Spacebar or any non-letter on your keyboard.  Technically speaking, it was not necessary to type \d ◾ 6 in the example above. The sequence \d 6 would have produced the same result, because the ‘6’ would have signaled the end of the command.  Nevertheless, pressing Tab or Spacebar is good for consistency.

• After you stop inline math, there are two ways to return to the formula and make changes.  (1) If the cursor is to the right or left, press arrow keys until the formula is highlighted, then press Enter.  (2) With your mouse, click somewhere inside the formula.

• Inside a formula, Backspace and Delete keys will remove elements of it.  If the cursor is outside the math formula and immediately to the right, Backspace (Windows) or Delete (Macintosh) will erase it.  There’s no undo inside the math editor or if you erase a formula.

Helpful Hints

Here is a little background information about the editor and some best practices:

• For consistent appearance of variables, for proper spacing, and for quick access to symbols, we encourage you to use the inline editor whenever something is “inherently mathematical” (even it could be typed as regular text). For example, if you use the inline editor for an expression like x+2, you’ll automatically get an italicized variable and the right amount of space around the plus symbol.

• Large fractions, integrals and summations.  On the web, equation editors rarely distinguish between large and small fractions (or the size of other symbols). But the difference matters in print.  Thus, the inline editor gives you an option.  If you start a fraction with a slash or lowercase command like \f, then the fraction will be printed at a smaller size, to look good in the middle of a sentence or for a mixed number.  If you use the uppercase variant \F or the command \df, which means “displaystyle fraction”, then the result will be larger and will look better on its own line or between paragraphs.  (We recommend this for any rational expression.)  Similarly, you can use \Int and \Sum for large-size integrals and summations.

• Problem-Attic’s inline math editor is designed for fast typing and to give you a close approximation to the final result.  While typing, the math can vary in quality based on your web browser and system fonts.  Therefore, you shouldn’t be concerned if some symbols appear too light, do not sit well on the baseline, or don’t match the styling of images from the pop-up math editor.  Internally, all text and math is handled the same way.  When you click Save for a problem, your formulas will be typeset beautifully, and when you make a PDF or export an online test, you’ll get whatever font you choose in Problem-Attic.  (In the editor and on problem thumbnails, the program defaults to a serif font.)

• You can include regular text in the inline math editor, i.e., letters which are not italicized or which are not variables.  Use the command \text followed by Space or Tab, then type normally.  This may be useful for specifying units or typing a few words in the numerator or denominator of a fraction.  But don’t overdo it.  Text in a math formula is non-breaking, so it should usually be no more than 10 or 20 characters.  For functions, there’s another technique which gives better results in terms of spacing and is part of the LaTeX language:  type a backslash then the name of the function, such \sin, \arctan, or \log.

• The inline editor differs from LaTeX in a few ways.  Please be aware of the following.  (1) The inline editor supports only a subset of LaTeX commands.  You’ll find a complete list here.  (2) The editor adds some commands which are not standard LaTeX, such as \f for fraction and \r for radical.  They are essentially keyboard shortcuts; you won’t be able to use them with other LaTeX-based systems.  (3) In the inline editor, only two characters need to be “escaped”, a dollar sign and backslash.  You can get a pound, percent and ampersand character simply by typing #, % and &. If you want the actual symbols ^ and _, use the commands \caret and \underscore.

• Inline vs. pop-up math editor.  Problem-Attic’s pop-up editor works the same as before.  To access it, click the insert math icon () in the toolbar of the problem editor.  It supports a full range of commands and is palette-based, which means you can click on visual images of symbols if you forget or don’t want to type the commands.  Significantly, code is not shared between the inline and pop-up editor, so you have to decide which to use.  (At a low-level, they work pretty much the same way.)  If you’re typing a long formula which is easier to read on multiple lines, or if you need to type a more complex formula like a matrix or system of equations, then you should go straight to the pop-up editor.

What’s ahead

You’ll certainly agree that “live” math editing is a great improvement to Problem-Attic, and you’ll probably want us to take it even further.  We’re with you on that!  Here some things still in the works:

• Live math editing by students.  By late spring we’re planning to add the same math editor to Problem-Attic’s online tests and scoring app.  That means students will be able to answer math and science questions with---math!  And that’s not all, Problem-Attic will be able to score most formulaic answers as easily as multiple-choice, numeric and plain text answers.  Wow!

• Automatic switching between the in-line and pop-up editor.  As noted above, formulas are not passed between them.  But it is possible for inline formulas to be opened in the pop-up editor and vice-versa, for simple formulas created in the pop-up editor to become “live”. We’re working toward that now.

• Updating of Problem-Attic’s questions to support inline math.  Before now, our data entry methods assumed that all math would be handled by the pop-up editor.  We have begun the conversion process.  It’s not technically difficult, but it will take time because of the sheer volume of questions:  more than 100,000 with formulas.  We expect conversion to be completed soon.  In the meantime, to edit the existing formulas, hang in there with prior techniques.

That’s it for instructions.  Now please, go try the inline math editor and remember, if you’re not a subscriber to Problem-Attic, it’s available for free in the Play Area.  If you are a subscriber, thank you!  Your support makes improvements like this possible.

We’d like to hear your comments about the new feature.  Please write to us at support@problem-attic.com.