Versions Compared

Version Old Version 7 New Version Current
Changes made by

Neill Magill

Neill Magill

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Expand
titleNew hotspot implementation details
Info

This is documentation for an unreleased implementation

Gliffy
namejavascript-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:

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~
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, scriptString

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, standardsetString0100000000
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
analysisString1,570,414;1,564,401|1,1118,897;0,362,153

Modes

ModeDescription
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

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
languagephp
titleOutputting 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
languagejs
titleUsing a string in JavaScript
R.lang.get_string('viewall', 'html5')

Marking

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

Code Block
languagephp
titleExample marking code
$marked_answer = hotspot_helper::get_instance()->mark($user_answer, $correct);

Preparing data for a answer mode hotspot

Code Block
languagephp
titleUser answer
$data_answer = hotspot_helper::get_instance()->answer_strip_correct_information($stored_answer);
Code Block
languagephp
titleCorrect answer
$data_setup = hotspot_helper::get_instance()->correct_to_answer_mode($correct);