How do I...

... include an image?

It’s best practice to attach images to questions so that they’re distributed with the final compiled exam, rather than linking to images stored on a webserver.

When editing a content area, click on the Insert/Edit Image button. You can then either pick an image you’ve already uploaded, or click the Choose file button to upload an image from your computer.

You can resize images and add a title attribute by selecting the image in the content area and clicking on the Insert/Edit Image button.

... embed a video?

Upload your video to somewhere like YouTube or Vimeo. Including videos in downloaded exam packages is a terrible idea, so we discourage that. Click the Embed image/video button (it’s a blue cloud), and paste in the URL of your video.

... include an interactive diagram?

There are a couple of ways of including an interactive diagram in a Numbas question. You can either embed a GeoGebra applet, or use JSXGraph.

For JSXGraph diagrams, there is an extension which takes care of most of the setup. You will need to write a fair amount of JavaScript code to create a diagram using JSXGraph.

GeoGebra applets are much easier to create and use, but are loaded from so the student must have internet access in order to use any questions containing GeoGebra applets.

The screencast below explains how to use a GeoGebra applet in a question. For more information, see the page on the geogebra extension.

... change how the question looks?

You can use the formatting tools in the question editor to style your text. However, if you repeat the same styles over and over, or want to change aspects of the layout such as space between elements or decoration, you’ll need to write some CSS.

CSS is a language for defining how things should look - there’s a good introduction at Khan Academy. In the Numbas editor, you can add CSS rules to a question in the Preamble section.

The following questions demonstrate how to use CSS to change the look of a Numbas question:

... show one of several images based on a random variables?

See the question Using a randomly chosen image for an example of one method.

... show one of several blocks of text based on a random variable?

Suppose you have a random variable a, which has the value 1,2 or 3, corresponding to three different scenarios. First, write out the text for each scenario.


There is a button in the content editor labelled Conditional visibility. This allows you to give an expression (in JME syntax) which dictates whether or not the selected text is shown. For each scenario, select the corresponding text and click on the Conditional visibility button. Enter a=1 for the first block, a=2 for the second, and a=3 for the third.

When you run the question, only the block of text corresponding to the value of a is shown.

You can see an example of this technique in the question Conditional visibility.

... make sure my generated variables satisfy a condition?

Use the variable testing tools.

... display a dollar sign?

Because the dollar symbol is used to delimit portions of LaTeX maths, you need to escape dollar signs intended for display by placing a backslash before them – that is, write \$. See this example question.

... include a randomised LaTeX command?

If you want to include a LaTeX command in a string variable, remember that backslashes and curly braces in strings must be escaped. That means you should type two backslashes where you’d normally type one, and add a backslash before each left or right curly brace, for example \\frac\{1\}\{2\} produces the LaTeX \frac{1}{2}. You need to do this because the backslash is used as an escape character in strings so you can include quote marks, which would normally end the string. (For example, "he said \"hello\" to me")

If you substitute a string variable into a mathematical expression using \var, it’s normally assumed to represent plain text and displayed using the plain text font. If your string is really a partial LaTeX expression, you must mark it as such by wrapping it in latex(), e.g. \var{latex(mystring)}.

See this example question.