Description

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

Rationale

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

Presentation

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

Marking

Two basic marking methods are possible:

Mark per Option	The question is marked out of the number of sub-questions.
Mark per Question	All 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

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:

| characters separate all the sub-parts (tabs) of the question
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:

Is the sub-part right or wrong (1 = correct, 0 = incorrect)
X-coordinate of student click point
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:

|0,false,false

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:

Property	Description	Modes	Type	Example value
id	The unique id for the question on the page	all	String	question1
class	The html classes for the question	all	String	html5 hotspot edit
data-number	The number of the question	all	Integer	1
data-type	Identifies it as a hotspot html5 question	all	String	hotspot
data-mode	The mode that the hotspot question is in, this is used to determine which question class to load	all	String	edit
data-image	The url of the image used by the hotspot question. It should be generated by the url method of a Rogo directory class	all	URL	../../getfile.php?type=media&filename=1463649649.jpg
data-image-width	The width of the image in pixels	all	Integer	600
data-image-height	The height of the image in pixels	all	Integer	400
data-setup	Defines the correct answer	all except answer	String	Deer~16776960~ellipse~384,335,51b,3c3~0~\|birds~45136~rectangle~fa,51,1db,121~0~
data-answer	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, script	String	answer mode: 523,400\|208,88 script mode: 0,523,400\|1,208,88
data-exclusions	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, standardset	String	0100000000
data-answers	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	analysis	String	1,570,414;1,564,401\|1,1118,897;0,362,153

Modes

Mode	Description
analysis	For displaying how all users on a paper have answered the question
answer	The mode that displays the question as the user should see it for answering
correction	For modifying questions that are locked
edit	For adding and editing questions
script	For viewing a marked question displaying the answer a user gave
standardset	For viewing the correct answer areas during standard setting

Localisation

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')

Marking

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);

Browser not supported