Hotspot (hotspot)

Allows the learner to select areas defined within the boundaries of an image.

The hotspot Question is referenced by its type in the code, which is "hotspot".

Read the authoring documentation for instructions on how to author content for this Question type.

Examples

{
    "response_id": "60000009",
    "type": "hotspot",
    "stimulus": "<p>[Enter question text here.]</p>",
    "image": {
        "source": "//s3-us-west-1.amazonaws.com/assets.staging.learnosity.com/organisations/1/277d3f25-85f2-4d1f-a4eb-f1ca30603d63.jpg",
        "width": 800,
        "height": 549
    },
    "areas": [
        [
            { "x": 19.875, "y": 37.15846994535519 },
            { "x": 20.25, "y": 46.26593806921676 },
            { "x": 26, "y": 61.56648451730419 },
            { "x": 34.25, "y": 69.76320582877959 },
            { "x": 43.5, "y": 68.48816029143899 },
            { "x": 50.749, "y": 59.56284153005464 },
            { "x": 51, "y": 45.90163934426229 },
            { "x": 55.625, "y": 34.06193078324226 },
            { "x": 52.625, "y": 23.497267759562842 },
            { "x": 42.125, "y": 12.932604735883423 },
            { "x": 31.374, "y": 14.207650273224044 },
            { "x": 23.375, "y": 24.772313296903462 },
            { "x": 20.625, "y": 31.329690346083787 }
        ],
        [
            { "x": 71, "y": 21.493624772313296 },
            { "x": 83.125, "y": 24.408014571949 },
            { "x": 93.125, "y": 36.79417122040073 },
            { "x": 96.875, "y": 54.826958105646625 },
            { "x": 93.875, "y": 74.31693989071039 },
            { "x": 83, "y": 88.70673952641167 },
            { "x": 73.375, "y": 91.98542805100182 },
            { "x": 59.25, "y": 85.97449908925319 },
            { "x": 51, "y": 68.6703096539162 },
            { "x": 51.125, "y": 59.74499089253188 },
            { "x": 51.5, "y": 45.90163934426229 },
            { "x": 58.625, "y": 28.77959927140255 }
        ]
    ],
    "area_attributes": {
        "global": {
            "fill": "rgba(255,255,255,0)",
            "stroke": "rgba(15,61,109,0.8)"
        },
        "individual": [
            { "area": "0", "label": "Apple" },
            { "area": "1", "label": "Orange" }
        ]
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": ["1"]
        }
    }
}

Attributes

type string

Defines the Question type to be rendered.

Must be set to "hotspot" in this case.
is_math boolean

Set to true to have LaTeX or MathML contents to be rendered with mathjax.

Default: false
metadata object

Object containing additional information about the question.
metadata.distractor_rationale string

Used to display individual response feedback/rationale to the student.
metadata.rubric_reference string

A unique identifier for the rubric to be used with the question - defaults to course rubric if assigned in activity
metadata.sample_answer string

A sample answer to be displayed on the Learnosity Reports API. HTML is supported.
metadata.acknowledgements string

References for any text passages, documents, images etc. used in the question.
stimulus string

The question stimulus. This can include text, tables, images, resources and LaTeX entered via the Math Editor.
stimulus_review string

HTML/Text content displayed only in review state rendered above the response area. Supports embedded Feature <span> tags. Will override stimulus in review state.
instructor_stimulus string

HTML/Text content displayed when showInstructorStimulus is set to true on the activity. Supports embedded Feature <span> tags.
ui_style object

Object used to control different aspects of the UI
ui_style.fontsize string

Controls the size of base font for this question. Options are among 'small', 'normal', 'large', 'xlarge' and 'xxlarge'.

Default: "normal"
ui_style.validation_stem_numeration string

Numeration character to be displayed to the left of the validation label.

Default: "number"
feedback_attempts number

If instant_feedback is true, this field determines how many times the user can click on the 'Check Answer' button. 0 means unlimited.

Default: 0
instant_feedback boolean

Flag to determine whether to display a 'Check Answer' button to provide instant feedback to the user.

Default: false
validation object

In this section, configure the correct answer(s) for the question.
validation.allow_negative_scores boolean

Negative scores will be normalised to zero by default. Allowing negative scores, on the other hand, means that the score can drop below zero when penalties are applied.

Default: false
validation.penalty number

Value indicating the marks deducted for an incorrect response.

Default: 0
validation.min_score_if_attempted number

Positive value indicating the minimum score if a student attempted the question.

Default: 0
validation.scoring_type string

Defines the scoring approach used. Possible options:
'exactMatch': Exact Match - Entire response must match exactly
'partialMatchV2': Partial Match - A relative part of the score will be given for each correct response area
'partialMatch': Partial Match Per Response - Cumulative Score value will be given for each correct response area

Default: "exactMatch"
validation.unscored boolean

When enabled, this option will remove all scoring from the question. This is useful for creating practice questions.

Default: false
validation.valid_response object

An object containing the valid response score and value.
validation.valid_response.score number

Score awarded for the correct response(s).

Default: 1
validation.valid_response.value array
validation.automarkable boolean

Defines whether the question will be marked automatically, or must be marked manually.

Default: true
validation.alt_responses array

Add an alternate response if there is more than one correct overall solution to a question.
validation.alt_responses[ ].score number

Score if the alternative response is correct.

Default: 1
validation.alt_responses[ ].value array
validation.alt_responses[ ][ ].score number

Score if the alternative response is correct.

Default: 1
validation.alt_responses[ ][ ].value array
image object

Options to define an image to be annotated.

See below for configurable attributes.
image.alt textarea

The alternative text of the image for accessibility.

Default: ""
image.source string

The URL of the image to be shown to the learner.
image.width number

The width of the image in pixels.
image.height number

The height of the image in pixels.
image.preview hidden

Preview of the chosen image.
areas array

An array of selectable areas for the stimulus image.

Each element in this array is an array of polygons that represents a selectable area for the stimulus image.

See below for configurable attributes.
areas[ ][ ].x number

The x coordinate of a point in the selectable area.
areas[ ][ ].y number

The y coordinate of a point in the selectable area.
area_attributes object

Options to define an image to be annotated.

See below for configurable attributes.
area_attributes.global object

Default settings for all hotspots.
area_attributes.global.fill string

The color to fill the hotspot areas, in RGBA format.

Example: rgba(12, 176, 216, 0.48)
area_attributes.global.stroke string

The outline color for the hotspot areas, in RGBA format.

Example: rgba(12, 176, 216, 0.48)
area_attributes.global.selected_fill string

The color to fill the selected hotspot areas, in RGBA format.

Example: rgba(12, 176, 216, 0.48)
area_attributes.global.selected_stroke string

The outline color for the selected hotspot areas, in RGBA format.

Example: rgba(12, 176, 216, 0.48)
area_attributes.global.focus_stroke string

The outline color for the currently focused hotspot area, in RGBA format.

Example: rgba(12, 176, 216, 0.48)
area_attributes.individual array

Individual overrides per hotspot which will override the global hotspot settings.
area_attributes.individual[ ].area string
area_attributes.individual[ ].label string

A label for the hotspot that is not shown to the student (unless they are checking answers), but is useful when reviewing student responses.
area_attributes.individual[ ].aria_label string

A description of the hotspot that will be available to screen readers.
area_attributes.individual[ ].fill string

An RGBA string defining the fill for the hotspot
area_attributes.individual[ ].stroke string

An RGBA string defining the stroke for the hotspot
area_attributes.individual[ ].selected_fill string

An RGBA string defining the fill for the hotspot when selected
area_attributes.individual[ ].selected_stroke string

An RGBA string defining the stroke for the hotspot when selected
area_attributes.individual[ ].focus_stroke string

An RGBA string defining the stroke for focused hotspots.
max_width string

The maximum width of the response area. This can be defined in CSS units such as either em("em") or pixels("px"). Alternatively, set to "none" to stretch to the full width of the container.
multiple_responses boolean

Controls whether the learner can select multiple hotspot areas.

Default: false

Response format

The data returned in the response format for this Question is the selected hotspot area(s) inside the image where the learner clicked to answer the Question.

Response format examples

{
    "value": [
        "2"
    ],
    "type": "array",
    "apiVersion": "v2.173.0",
    "revision": 1,
    "feedbackAttemptsCount": 1
}

Response attributes

value array[string]

The array index(es) of the hotspot area(s) where the learner clicked to answer the Question.

Each value represents the array index of the selected hotspot as a string.
type string

Informs the scoring engine about what kind of data to expect in the values entered by the student. For this Question type, you must always supply a string for this attribute with the value "array".
apiVersion string

The version of the Questions API that returned this response.
revision numeric

Keeps track of the number of Question attempt submissions, i.e. how many times the student answered the Question and submitted it.
feedbackAttemptsCount numeric

Keeps track of the number of feedback attempts.