(diff) ←Older revision | Current revision (diff) | Newer revision→ (diff)

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.

```

To display the image we just add the \$img variable to the question text where we want it to appear. </pre>

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)

```

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.

```\$answer = \$radius * \$angle