Image Target Question

This module allows the creators of a quiz to add an image target question type.

The image target question invites participants to identify areas on an image by dragging and dropping up to 10 targets onto the image. Each target is labelled and the quiz creator sets that label.

Sponsored by: The College of Emergency Medicine, UK (http://www.enlightenme.org)

Module developed and maintained by Deeson Group (http://www.deeson-online.co.uk).

There is a Drupal 7 and Drupal 6 version of this module.

Features

- Optional integration with ImageCache for setting a preset on uploaded images
- Ability to draw up to 10 regions on the image
- Participants drag and drop the targets onto the image

Requirements

- Participants must be running JavaScript
- quiz module
- D6 also requires jquery_ui

Instructions

Creating a question

The image target question allows the learning session author to provide the trainee with an image and invites them to identify areas on that image by dragging and dropping up to 10 targets onto the image. Each target is labelled and the learning session author sets that label.

Question – The text the user will see which allows them to understand the question. For example “Identify the following smurfs on the smurf family portrait”
Title – The title of the questions. e.g. “Smurf identification question”
Answer – There is just one field in here to start with, Attach a new image file. Click “Browse” or “Choose a file” (the button text is different in different web browsers) and select the image on your computer (for example, a picture of a group of Smurfs).
Press the upload button to upload the image to the server. You will be presented with the image and fields to define up to 10 regions on the image.

Set region 1 – click the region 1 button once. Then position you mouse in the top left corner of the region on the image. Click and hold down the left mouse button on the image and drag the mouse down and to the right to draw a rectangle over the image. When you release the mouse button, the region will be highlighted with an orange rectangle. For example you might draw a box around Papa Smurf.
Description – You must put a piece of descriptive text next to each region you draw on the image. Any regions without text will be removed when you save the page. For the example given you would write "Papa smurf" in the box.

Now repeat for up to 10 regions and press the save button at the bottom of the form.

Setting the imagecache / image style

If you have the imagecache (Drupal 6) or image style (Drupal 7) module enabled you can go to the following page on your site to configure an image style to use with this question: /admin/quiz/settings/questions_settings

Known issues

IE 9 and later have problems with jquery_ui versions below 1.8. This means if you want to be able to create image_target_questions in IE9 then you need to be running jquery_ui 1.8. On Drupal 6 sites this means patching the jquery_ui module. Details are available on the following thread:
http://drupal.org/node/749126

Live demonstrations

If you would like to have a go at taking an image target question there are a number of examples on the following site:

Quiz Question Demonstrations