Scroll

Image Hotspot

Image Hotspot

Follow
Summary  This article describes the properties and functionality of the Image Hotspot ADC
Applies to Design Version 5.4 onwards
Written for Scriptwriters and survey authors
Keywords adc; adc2; javascript; control; design; askiadesign; Image hotspot; heatmap; SVG; adc2-ImageHotspot

 

Screenshot.png

  • To download the qex file, click here
  • To download the ADC control, click here
  • Version of the adc: 1.0.0

This ADC allows you to define clickable areas on any given image. Each clickable area can have a sentiment attached to it e.g. Like, Dislike and Neutral.

This control is compatible with question tables loops containing a single coded question. The layout has to be in response block format. This ADC allows you to define upto 20 hotspots and the single question can have up to 3 options. 

This ADC only uses plain Javascript and Raphaël JS which is a JavaScript Vector library that uses the SVG W3C recommendation asa base for creating the hotspots for the question. For more information about Raphaël JS see: http://dmitrybaranovskiy.github.io/raphael/

PROPERTY DESCRIPTION OPTIONS/ POSSIBLE VALUES
General    
Image URL URL of the image to be used ??ResPath??/Imagename
Image height Height of the image in pixels number
Image width Width of the image in pixels number
Colours    
Hover Colour Colour of the area(s) when hovered upon any RGB colour
Positive Colour Colour of the area(s) when selected positively any RGB colour
Neutral Colour Colour of the area(s) when selected neutrally any RGB colour
Negative Colour Colour of the area(s) when selected negatively any RGB colour
Hotspots    
Hotspot Area 1 to 20 SVG Paths for hotspots #1 to #20 Any SVG Path

 

How to Make and retrieve the SVG Path

To create the "hotspots" You can use any graphics software that creates SVG.

We used a site called http://editor.method.ac/ which is a free online browser-based vector creator. below is a screengrab of how you can create an SVG and retrieve it's path using Method Draw

HowToGetSVG.gif

Have more questions? Submit a request

Comments

  • Avatar
    Dinesh Kumar

    We getting error message "The QEX file is corrupt...this is what we could recover!" while we are opening the QEX file. could you please update correct QEX file. Thanks.