Components
Created by Smart Sparrow

Hotspot

The Hotspot widget allows learners to freely drop pins onto a canvas. Instructors can set the canvas image, the pins available and the drop areas. It is possible to define rectangular, circular and free-form drop areas to target student inputs. These drop areas can either be visible or hidden to learners.

 

Unique ways to use this widget

There are multiple ways you can use this widget to assess learner knowledge. For example:

  • Ask learners to label elements on a diagram, map or image. For example: to identify human anatomy, labelling geography or labelling engineering drawings.
  • Record open-ended responses such as asking learners to arrange companies on a competitive matrix.
  • Instructors can preset the location of the pins and use this widget to create a labelled image or diagram.

 

Have a play

 

Basic setup instructions

  1. This component can be found in the Author. Insert the widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. You must change the Mode to Config mode to set up the widget.
  4. Upload a background image.
  5. Add pins and edit their labels and colours. You can pick the colour by writing a rgb value, hex code or even a common name of a colour e.g. purple.
  6. Define and label the drop areas which you will use later to target student responses.
    • You can define rectangular, circular or freeform drop areas.
  7. Set the correct answer by clicking the ‘Set Correct Answer” button and dragging each pin to its correct drop area.
  8. Make sure to change the mode to “Student” when done.

 

Other options

  • You can preset the location of the pins by switching over to ‘Student mode’ and placing the pins onto the canvas.
  • The outlines of the drop areas can be made visible to the learner by turning on the CAPI property Show Outlines
  • The Show Correct Answer CAPI property can be used to display all correct answers to students.
  • The “Multiplacement mode” allows students to place the same pin multiple times.

 

Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
{id}.Contained By
The Area Label that the pin is currently in
dynamic
{id}.Contains
The pins that are currently in the area
Array
Show Correct Answer
Toggle to show the correct answer in student mode
Boolean
Is Correct
If all the pins match the correct answer
Boolean
User Modified
If a pin has been moved at least once
Boolean
Show Outlines
Toggle to show outlines of areas in student mode
Boolean
Mode
Mode of the widget
Student
Config
Config JSON
The configuration data for the widget
String
CSS
A CSS string or url for adding custom styling to the widget
String
Multi-placement
Allows users to place multiples of each pin
Boolean
Pin Locations
data for pin locations
String
Property Purpose Type
{id}.Contained By
The Area Label that the pin is currently in
dynamic
{id}.Contains
The pins that are currently in the area
Array
Show Correct Answer
Toggle to show the correct answer in student mode
Boolean
Is Correct
If all the pins match the correct answer
Boolean
User Modified
If a pin has been moved at least once
Boolean
Show Outlines
Toggle to show outlines of areas in student mode
Boolean
Mode
Mode of the widget
Student
Config
Config JSON
The configuration data for the widget
String
CSS
A CSS string or url for adding custom styling to the widget
String
Multi-placement
Allows users to place multiples of each pin
Boolean
Pin Locations
data for pin locations
String
Property Purpose Type
{id}.Contained By
The Area Label that the pin is currently in
dynamic
{id}.Contains
The pins that are currently in the area
Array
Show Correct Answer
Toggle to show the correct answer in student mode
Boolean
Is Correct
If all the pins match the correct answer
Boolean
User Modified
If a pin has been moved at least once
Boolean
Show Outlines
Toggle to show outlines of areas in student mode
Boolean
Mode
Mode of the widget
Student
Config
Config JSON
The configuration data for the widget
String
CSS
A CSS string or url for adding custom styling to the widget
String
Multi-placement
Allows users to place multiples of each pin
Boolean
Pin Locations
data for pin locations
String
Property Purpose Type
{id}.Contained By
The Area Label that the pin is currently in
dynamic
{id}.Contains
The pins that are currently in the area
Array
Show Correct Answer
Toggle to show the correct answer in student mode
Boolean
Is Correct
If all the pins match the correct answer
Boolean
User Modified
If a pin has been moved at least once
Boolean
Show Outlines
Toggle to show outlines of areas in student mode
Boolean
Mode
Mode of the widget
Student
Config
Config JSON
The configuration data for the widget
String
CSS
A CSS string or url for adding custom styling to the widget
String
Multi-placement
Allows users to place multiples of each pin
Boolean
Pin Locations
data for pin locations
String

 

Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services

Similar Components