Adding Graphics to Questions

This is a brief introduction for adding graphics to questions in iMath using the macro showasciisvg.

showasciisvg Macro

The showasciisvg macro takes 3 parameters as follows:

• String - Written in asciisvg syntax
• Int - Image Width
• Int - Image Height

AsciiSvg

To add graphics you need to know the asciisvg syntax. The asciisvg homepage can be found here [1], an explanation of the asciisvg commands can be found here [2]. The website also provides a nice demo editor which can be found here [3]. Note: your browser must support svg images for the demo editor to function correctly.

Basic Structure

initPicture

The initPicture command is the first command that must be run before any primitives can be added to the image.

The initPicture command takes up to four arguments:

• xmin (required) - min x value displayed
• xmax (required) - max x value displayed
• ymin (optional) - min y value displayed
• ymax (optional) - max y value displayed

Example Usage:

initPicture(-5,5,-10,10)

initPicture(-5,5)

Primitives

line

The line command draws a line between two points.

Example Usage:

Draw a line between (-2,-2) and (2,2)

line( [-2,-2],[2,2] )

circle

The circle command draws a circle with the given center and radius

Example Usage:

A circle with the center at the origin with a radius of 2

circle( [0,0], 2 )

ellipse

Draws an ellipse at the given center with the given horizontal and vertical radius

Example Usage:

An ellipse with the center at the origin, a horizontal radius of 2, and a vertical radius of 4

ellipse( [0,0], 2, 4 )

path

Draws straight lines connecting a series of points:

Example Usage:

Draw a line from (0,0), (1,0), (1,1), (0,1)

path( [ [0,0], [1,0], [1,1], [0,1] ] )

rect

Draws a rectangle given the bottom left and top right corner.

Example Usage:

Draw a rectangle with the bottom left corner at (-1,-1) and the top right corner at (1,1)

rect( [-1,-1], [1,1] )

text

Draws text at a given point with optionally the given position. The position determines the position of the text relative to the location point.

The options for positions are:

• above
• below
• left
• right
• aboveleft
• aboveright
• belowleft
• aboveleft

Example Usage:

Draw the text x=5 at (-4,5) above the point:

text( [-4,5], "x=5", "above" )

arc

Draws an arc counter-clockwise between two points, using a given radius

Example Usage:

Draw an arc from (-3,-3) to (2,2) with a radius of 3

arc( [-3,-3], [2,2], 3 )

curve

Draws a curve through a series of points:

Example Usage:

Draw a curve through the points (-1,-1), (-1,2), (-2,1)

curve( [ [-1,1], [-1,2], [-2,1] ] )

Modifiers

stroke

Specifies the color of all primitives drawn after the stroke command is run.

Example:

Draw a blue line, then a red line

stroke = "blue"
line( [-1,-1], [1,1] )
stroke = "red"
line( [-2,2], [2,-2] )

strokewidth

Specifies the width of lines drawn in pixels

Example:

Draw a circle with a line width of 2px

strokewidth="2"
line( [-1,-1],[1,1] )

fill

Specifies the fill color for solid figures

Example:

Draw a circle filled in green

fill="green"
circle( [0,0], 4 )

marker

Specifies the marker symbol drawn at the endpoints of a line

Option Available:

• dot
• arrow
• arrowdot
• none

Example:

Draw a line with using the marker arrow

marker="arrow"
line( [-1,-1],[1,1] )

axes

The axes command displays the axes in the image

Usage:

axes()

Adding Graphics to Questions in iMath

Basic Example

This example will describe how to create a simple question for calculating the area of a rectangle.

Common Control

The first step is to get the length and width of the rectangle. For this we use the nonzerorands macro with min set to 1 and max set to 100.

$length,$width = nonzerorands(1,100,2)

Next we need to use showasciisvg to create the image.

$img = showasciisvg("initPicture(-3,3,-3,3);rect([-2,-2],[2,1]);text([-2,-0.5],\"$width\",\"left\");text([0,1],\"$length\",\"above\");",150,150)

Looking closer at the string parameter to showasciisvg

"initPicture(-3,3,-3,3);rect([-2,-2],[2,1]);text([-2,-0.5],\"$width\",\"left\");text([0,1],\"$length\",\"above\");"

It starts of with the required initPicture command creating an image with a x-range of -3,3 and a y-range of -3,3

Notice that each command is separated semi-colon.

Next we create a rectangle of a fixed size.

Then we add text to left side of the rectangle and the top of the rectangle. Since it's possible to add variables into the string we can draw a different length and width label each time the question is loaded.

Note that all quotations inside the string are escaped using \"

Question Text

This is the section where we add the image so it is visible by students:

Given the rectangle $img, find the area.

Area = $answerbox

To display the image we just add the $img variable to the question text where we want it to appear.

Answer

To make the example complete here is the answer code

$answer = $a*$b

Another Example

This example will look at using a graphic for a problem where the student needs to computer the arc length.

Common Control

This is where all of the interesting stuff happens. Let's take a look at the code first.

$radius = rrand(1,20,0.1)
$angle = rrand(1,2*pi,0.01)
$x = sin($angle)
$y = cos($angle)

$img = showasciisvg("initPicture(-1.5,1.5,-1.5,1.5);circle([0,0],1);line([0,0],[1,0]),text([0.5,0],\"theta=$angle\",\"above\");text([0.5,0],\"r=$radius\",\"below\");stroke=\"red\";line([0,0],[$x,$y]);",250,250)

Let's break this down a little bit:

First we define get a random radius between 1 and 20, and random angle between 1 and 2*Pi.

Next we calculate the x,y coordinates that will be used when drawing the circle.

Now let's look at the asciisvg code

First we call initPicture to create a picture with the x-range(-1.5,1.5) and the y-range(-1.5,1.5)

Next we draw the circle with the center at the origin and radius of one. Note that the radius is always 1 regardless of the radius we calculated, this helps to make generating the image simpler.

Now we draw a line from the origin to the pont(1,0) with the command line([0,0],[1,0])

Next we draw the text displaying the value of theta with the command text([0.5,0],\"theta=$angle\",\"above\") this will display the text above the line we just drew.

Then we add text to display the calculated value of the radius with the command text([0.5,0],\"radius=$radius\",\"below\") this will display the text below the line we just drew.

Now we change the stroke color to red with the command stroke=\"red\" this will draw any new lines we add in red

Finally we draw the list line show the angle with the command stroke=\"red\";line([0,0],[$x,$y]);

Question Text

This part is pretty straightforward we just state the question and display the image

Given the angle is $angle radians $img, find the arc length.

ArcLength = $answerbox

Answer

Here we just calculate the answer which is theta*radius

$answer = $radius * $angle