Page Comparison

...

Expand

title	New hotspot implementation details

Info
This is documentation for an unreleased implementation

Gliffy


name	javascript-overview

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.

Code Block

language	php
title	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');

Code Block

language	js
title	Using a string in JavaScript

R.lang.get_string('viewall', 'html5')

Marking

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

Code Block

language	php
title	Example marking code

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

Preparing data for a answer mode hotspot

Code Block

language	php
title	User answer

$data_answer = hotspot_helper::get_instance()->answer_strip_correct_information($stored_answer);

Code Block

language	php
title	Correct answer

$data_setup = hotspot_helper::get_instance()->correct_to_answer_mode($correct);

Versions Compared

Old Version 7

New Version Current

Key

Modes

Localisation

Marking

Preparing data for a answer mode hotspot