Heat Maps and Scripting

Heat Map/Hot Spots are used to collect information from respondents of their reactions to an image.

Heat Map/Hot Spots are used to collect information from a respondent's reaction to an image. For example, you might have an advertisement or any image that you are looking to gain feedback on. You can allow your respondents to click on areas of the image and drop markers (Hot Spots Markers) to identify their points of interest.

The Heatmap question uses an X and Y coordinates-based system to determine the location of markers that have been plotted on an image by respondents. The X and Y marker values range from 0.00 to 1.00 for each plotted marker and are included in the HM tab in survey Response Exports.

Custom scripting can be used to determine if a respondent has placed a marker within a specific coordinate on the image.

A Javascript array of marker coordinates can be built by retrieving and parsing the marker data:

The following script example will demonstrate selecting a choice in a hidden question if the first marker a respondent places on the image is within a specified coordinate:



///Ray-casting function to determine if a marker is inside a polygon/coordinates, returns true or false

function inside(point, vs) {

    ///ray-casting algorithm based on

    ///https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html/pnpoly.html

    var x = point[0], y = point[1];

    var inside = false;

    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {

          var xi = vs[i][0], yi = vs[i][1];

          var xj = vs[j][0], yj = vs[j][1];

          var intersect = ((yi > y) != (yj > y))

            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);

            if (intersect) inside = !inside;

          }

return inside;

};



///Get the heat map question

var oQHeatmap = wscScripting.getQuestionByDataPipingCode('MYHEATMAP');



///Get the hidden question

var oQArea = wscScripting.getQuestionByDataPipingCode('AREA');



///Get an array of coordinates that are plotted on the image

var coordinates = wscScripting.getElementById(oQHeatmap.identity).value;



///Parse the array of marker coordinates

var aMarkers = JSON.parse(coordinates);



///Get the X and Y coordinates of the first marker that has been plotted on the image - convert the data type from a string to a number

///Parse and save the X coordinate

var x = parseFloat(aMarkers[0].x);

///Parse and save the Y coordinate

var y = parseFloat(aMarkers[0].y);



///Specify the coordinates within the image that you want to check

var polygon1 = [ [ 0.00, 0.00 ], [ 0.50, 0.00 ], [ 0.50, 0.50 ], [ 0.00, 0.50 ] ];



///Pass the the X and Y coordinates of the first placed marker and the polygon/area to the ray-casting function

var bInside1 = inside([ x, y ], polygon1);



///If the the coordinates of the marker are within the polygon/area range, select the choice in the hidden question

if (bInside1 == true) {

  wscScripting.selectChoiceByValue(oQArea, 1);

};

Using the On Next scripting event, a hidden choice can then be selected if the first marker is within the specified coordinates in the script.