Image Hotspot
- To download the QEX file (in example directory), click here.
- Version of the ADC: 3.0.4.
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 up to 200 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 | string |
| Image width | Width of the image in pixels | string |
| 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 200 | SVG Paths for hotspots #1 to #200 | 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
