Heat Regions

Description

An advanced "heat map"-like tool. Supports virtually any behavior, from simply recording whether a region was selected to asking followup questions about the selected region.

Instructions

• Lines 56-58 of header 1 must be updated with the image and its dimensions.
• Inside the $(document).ready event after the initializeSvg call, you must call addRegion for each region of the image. addRegion has these parameters:
  • question should always be set to '[% QuestionName() %]'.
  • region must define the shape and location of the region. All positions are defined off the top-left corner of the image.
    • rectangle requires top, bottom, left, and right.
    • circle requires center coordinates x and y and radius r.
    • ellipse requires center coordinates x and y and radii rx and ry.
    • polygon requires three or more [x, y] points.
  • (optional) followups is a list of questions to show if the region is clicked.
  • (optional) start will be called after the region is initialized. Useful for restoring the region if a respondent leaves the question and later returns to it.
  • (optional) verification will be called when the respondent attempts to submit the followups. Should return a Boolean.
  • (optional) fail will be called when verification returns false. Useful for explaining what is wrong with the response.
  • (optional) pass will be called when verification returns true. Useful for making changes to the question or region to reflect the response.

Notes

The rectangle and circle built into the download can serve as an example of how to prompt the respondent, require a response, and update the display accordingly.

The triangle built into the download can serve as an example of how to build an "on-off" region.

If defined, start, verification, fail, and pass will be called with two arguments. The first argument is the clicked region. The second argument is followups.