Image Hotspot


Allow students to indicate, by clicking with the mouse, particular areas of an image.


This question type is good at eliciting 'where' knowledge. For example, in a question showing a car the student could be asked to click on a wheel. This is fundamentally asking the question 'where is the wheel'. Contrast this with the Labelling question type which asks 'what' knowledge.

Fit Criterion


  • Image types supported include: GIF, PNG and JPEG.

Staff Editing

  • Between 1 and 10 points of interest (sub-questions) can be set.
  • Each sub-question can have multiple correct answer zones. So, for example, click on an eye would allow a student to click on the right or left eye.
  • Correct answer shapes to be made up of:
    • Ellipses
    • Rectangles
    • Irregular multi-point polygons
  • Eraser to delete unwanted correct answer areas
  • Ability to move a correct area in any direction

Student Answering

  • When student clicks the question automatically advances to the next part (sub-question)
  • Students can change their answers to an sub-question any number of times


Two basic marking methods are possible:

Mark per OptionThe question is marked out of the number of sub-questions.
Mark per QuestionAll sub-questions have to be correctly answered for the mark

In either marking method academic staff should be able to specify the number of marks to award if correct and the number (possibly negative) if wrong. Marks correct should range from 1 to 20 and marks incorrect from 0 to -10 with the addition of -0.25 and -0.5.


Feedback includes:

  • Location of student answer.
  • Display all correct answer zones.
  • Student mark out of possible number.
  • Textual feedback is available for each option (different feedback can be written if the student gets it right as opposed to wrong)
  • If standard setting has been used this should be displayed
  • List of learning objectives that the question is linked to

Limited Save

After a question has locked it should only be possible to change the following aspects:

  • The correct answer zones.
  • Number of marks available.
  • Status - only 'Normal' or 'Retired' (not 'Incomplete', 'Experimental' or 'Beta')
  • Bloom's Taxonomy
  • Keywords
  • Teams

Standard Setting

  • When 'Mark per Option' is used it should be possible to rate each sub-question.
  • When 'Mark per Question' is used there is only one rating per question.

Data Format

Correct Answer

The correct answer is stored in the 'correct' field in the options table. The format is thus:

  1. | characters separate all the sub-parts (tabs) of the question
  2. Next split on the tilde ~ character:
    1. Text of the question
    2. Colour of the tab (decimal)
    3. Type of shape (e.g. polygon, ellipse, rectangle)
    4. X/Y coordinate points (comma separated in hexadecimal format)
    5. ID of the shape starting at zero.

Note: Multiple shapes can be used on a single tab.

Student Answer

Student answers are stored in the 'user_answer' field within the relevant log table. All sub-parts of a question are stored together, separated by | characters. Within each sub-part there are three sections separated by commas:

  1. Is the sub-part right or wrong (1 = correct, 0 = incorrect)
  2. X-coordinate of student click point
  3. Y-coordinate of student click point

A completely unanswered question stores its answer as 'u' for unanswered. However, if parts of a question are answered and some not, then the ones that are not answered will be stored as:


 New hotspot implementation details

This is documentation for an unreleased implementation

Hotspot questions are generated by Javascript from a div tag via a call to R.html5.init()

The div can have the following properties:

PropertyDescriptionModesTypeExample value
idThe unique id for the question on the pageallStringquestion1
classThe html classes for the questionallStringhtml5 hotspot edit
data-numberThe number of the questionallInteger1
data-typeIdentifies it as a hotspot html5 questionallStringhotspot
data-modeThe mode that the hotspot question is in, this is used to determine which question class to loadallStringedit
data-imageThe url of the image used by the hotspot question. It should be generated by the url method of a Rogo directory classallURL../../getfile.php?type=media&filename=1463649649.jpg
data-image-widthThe width of the image in pixelsallInteger600
data-image-heightThe height of the image in pixelsallInteger400
data-setupDefines the correct answerall except answerStringDeer~16776960~ellipse~384,335,51b,3c3~0~|birds~45136~rectangle~fa,51,1db,121~0~

The answer given by the user who responded to the question.

In both cases the answer for each part of the question is separated by a pipe (|) character.

In answer mode each part answer should be made of two components the x and y axis values of the user answer separated by a comma

In script mode a boolean describing if the answer is correct should be before the coordinate.

answer, scriptString

answer mode: 523,400|208,88

script mode: 0,523,400|1,208,88


Used in script and standardset modes only.

Defines which parts of the question have been excluded. Each character represents a layer, with '1' meaning excluded and '0' meaning not excluded.

script, standardsetString0100000000

All the answers that have been given for the question.

The answer for each part of the question is separated by a pipe (|) character.

Each individual answer is separated by a semi-colon.

Each individual answer is made up of three parts:

  • a boolean to state how the answer was marked
  • the x coordinate
  • the y coordinate


analysisFor displaying how all users on a paper have answered the question
answerThe mode that displays the question as the user should see it for answering
correctionFor modifying questions that are locked
editFor adding and editing questions
scriptFor viewing a marked question displaying the answer a user gave
standardsetFor viewing the correct answer areas during standard setting


Localised strings should be made available to Javascript using the R.lang package.

Strings for the hotspot questions are stored: /lang/<<langcode>>/question/html5_hotspot.php

These strings should then be mapped to the name that Javascript expects inside the hotspot_helper::get_lang_strings() method.

Outputting the localisation string in a page
$render = new render(Config::get_instance());
$render->render(array(), html5_helper::get_instance()->get_lang_strings(), 'html5_footer.html');
Using a string in JavaScript
R.lang.get_string('viewall', 'html5')


Hotspot questions should be marked using the hotspot_helper::mark() method

Example marking code
$marked_answer = hotspot_helper::get_instance()->mark($user_answer, $correct);

Preparing data for a answer mode hotspot

User answer
$data_answer = hotspot_helper::get_instance()->answer_strip_correct_information($stored_answer);
Correct answer
$data_setup = hotspot_helper::get_instance()->correct_to_answer_mode($correct);