Creating Images with Variables#

If you want to create images with variables they must be in the form of an SVG (Scalable Vector Graphic).

SVGs are scalable and often have low file sizes relying on the browser/application to increase the size of the image. They are stored as text in an XML file hence making it possible to replace the text in the XML file with variables in Numbas.

Note

You can use JME code in Numbas to replace lines of code in the XML to yield very interesting and creative results. For an example of this, see this question designed by the developer of Numbas, Christian Lawson-Perfect.

It is possible to find public domain SVGs on websites such as freesvg.org to use as a starting point when creating your images and diagrams. It is also possible to create them from scratch.

Inkscape#

Inkscape is a powerful open source drawing tool (similar to Adobe Illustrator) that allows you to create SVG images and diagrams.

Inkscape works on all modern desktop operating systems and can be downloaded from the Inkscape website.

Note

There are several online tutorials that can help you get started using Inkscape. There is a good tutorial available on the Inkscape website.

Including Variables#

After you have identified your variables when planning your question, you can incorporate them into your image.

You simply need to include the variable in the in braces. In the example below, the braces are surrounding the force1 variable like so: {force1}.

A screenshot of how to include your variables in an SVG image. Simply surround the variable name with braces.

Surround the variables in your diagram with braces. You may notice that some of your labels will move when imported into the Numbas Editor. You may have to reposition the labels.#

Resizing your SVG#

When creating your diagrams in Inkscape you may wish to change the size of the final canvas.

If you do not change the size of the canvas, the entire canvas will be uploaded to the Numbas Editor leaving lots of space around your image.

To resize the canvas to your diagram size, start by selecting the entire diagram.

Once you have the diagram selected, click on File > Document Properties.

This will open a dialogue box on the right hand side of the interface (as in the diagram below).

An image showing a screenshot of the Inkscape application with a diagram selected in the centre.

Start by selecting the diagram in your Inkscape drawing. You can do this by clicking and dragging with the mouse tool, or by pressing Control + A (or Command + A on Mac).#

Click on the ‘Resize page to drawing or selection’ button to resize your page to the diagram.

An image showing the resized diagram in the Inkscape user interface.

After clicking on the resize option, the canvas size will be resized to contain the image only.#

You can then upload the final SVG to the Numbas Editor.

See also

For further instructions on how to upload an image to the Numbas Editor, see the documentation and the instructional video in the official Numbas Documentation.