Create Image Map Questions

An image map question requires your students to identify something in an image by clicking the image. Image map questions are particularly useful when you want your students to identify a named anatomical part in an illustration or geographical feature in a map.

How-ToInstructor HelpWebAssign

Create the image file that you want to use for your question.
Keep the image dimensions smaller than 800 by 600 pixels to ensure that the image is displayed in the question without scrolling.
Click Questions › Create. The Question Editor opens.
In Name, type a name for the question.
In Mode, select Image Map.
In Question, type your question.
Click My Files under Page Tools.
If you have not already uploaded your image to WebAssign, use the following steps to do so.
1. Click Browse or Choose File, depending on your browser.
2. Uploading a large file might take some time, especially with a slower Internet connection.
In the My Files window, navigate to the file you want to use and select its check box.
Set Paste location of file (selected below) as to ID Only.
Set Destination Field to Question.
Click go.
The unique WebAssign ID number for the image is added to Question on a new line.
Edit the line with the image ID number to add an answer placeholder string for the image map question like the following:
```
<_ src="ID">
```
where ID is the ID number of the image you want to use. You can move this answer placeholder string to wherever it should be displayed in the question.
Click Redisplay.
The question and image are displayed in the Display section of the Question Editor.
Click Coordinates below the image.
In the Coordinates window, select a shape and define the boundaries for a part of the image that your students should click to correctly answer the question.
Each shape defines a single key for the answer. You can define multiple keys to allow students to click any of several areas of the image for a correct response.
- To add a rectangular key, click rectangle. Click the image to set the upper left point of the key. Click the image to set the lower right point.
- To add a circular key, click circle. Click the image to set the center of the circle. Click the image at the edge of the circle to set the radius.
- To add a polygonal key, click polygon. Click the image at each vertex of the polygon, specifying adjacent vertices consecutively.
Click Draw Key to preview the key on your image. The key you defined is drawn in bright green on the image, and its definition is added to a list of Keys below the image.

If a key is not correct, select its check box and click Remove Selected.

To fine-tune the dimensions for a key that is not quite correct, add a new key of the same shape. Using the not-quite-correct key as a reference, type the new coordinate values instead of clicking the image.

Repeat this step until you have defined all the keys you need for the question.
When the keys are drawn correctly on the image, select the check boxes for the keys you want to use and click Add Selected Key to Answer.
The Coordinates window closes and the keys are added to Answer.
If you need to use the Coordinates window more than once to add keys to your question, you will need to manually edit the keys in Answer to ensure that all of the keys for each question part are listed on a single line and are delimited with the {tab} characters.

This is necessary because although all of the keys for a question part must be listed on the same line, each time you click Add Selected Key to Answer, the keys are added on a new line.
- If an answer extends beyond the right side of the Answer box, it is wrapped to the next line, but it is still considered a single line so long as you do not press ENTER.
If you need to manually edit the keys in Answer, the following reference information about how image map keys are specified might be useful:
Shape
Key
Rectangle
rect:left_x,top_y,right_x,bottom_y
Circle
circle:center_x,center_y,radius
Polygon
poly:x1,y1,x2,y2,x3,y3...
Type a Solution.
The solution helps your students understand the steps they need to take to determine the correct answer to the question. Your assignment settings specify when to show the solution.

Shape	Key
Rectangle	`rect:left_x,top_y,right_x,bottom_y`
Circle	`circle:center_x,center_y,radius`
Polygon	`poly:x1,y1,x2,y2,x3,y3...`

Example Image Map Question The following table summarizes an actual question. QID 1159575 Name Template2 2.MAP.01. Mode Image Map Question Click the cochlea to identify it. <br> <_ src="92012"> Answer circle:310,175,24 Display to Students