Skip to main content

Search

Image Highlighting

  • Updated

Overview

There are two distinct custom exercises for what clients refer to as "heat mapping," one is polygonal image highlighting and the other is a true heat map. This article covers polygonal image highlighting, where we break an image up into clickable areas, and then link each area to a response in a radio button question, with the deliverable being the charts generated by that radio button question. Most clients will prefer polygonal image highlighting due to the fact that the exercise is visible in a standard report as a radio question. To ensure that the exercise is scalable across screen sizes, a Scalable Vector Graphic (SVG) file is used to overlay the mapped areas on the image. The script is configured to accept HTML image map coordinates as they're easy to generate with readily available online tools. 

Polygonal Image Highlighting

The instructions below will show you how to create a coordinate set to use for your areas and integrate those coordinates into the SPL. Additionally, you'll download custom template files from this page to load into your survey's theme directory. These files contain the HTML, CSS, and JavaScript code needed to make the highlighter function. This article will go over 4 different prebuilt templates:

  • 2 click (like/dislike),
  • 3 click (like/dislike/confusing),
  • 3 mode (like/dislike/confusing with a mode selector), and
  • single click (like on one page/dislike on the next, liked item excluded).

2 click (like/dislike)

The following steps will generate a 2 click (like/dislike) highlighter. Here is a demo of a 2 click (like/dislike) highlighter in action.

Step 1: Create the coordinates.

This step will be the same for all templates. Before we setup the survey source, we need to map the areas of our image. To do this, we user an online area map program https://www.image-map.net/

  • Choose "Select Image from My PC" and upload the the base image you'll be mapping.
  • The image will show above an area list with one area already started for you. For "Shape", you'll use "Rect" for any square/rectangular areas; for other shapes, choose "Poly". "Title" will contain a description of the area that you'll use in your option list. "Link" and "Target" remain blank. For "Rect" areas, click in the upper left corner then in the lower right corner to define. "Poly" will require a point at each bend of the shape. A grey overlay will show over the image to indicate the area you've defined. You can move the points to adjust as needed.
  • Click "+ Add New Area" to add the next area, click on the "Active" radio button to select for definition.
  • Once you're done click "Show Me the Code!" We're interested in the "area" elements, and within them, the "title" and "coords" attributes. Convert them to options as follows: alt becomes the option text, and coords are imported as option data
    • <area target="" alt="Frame 1" title="Frame 1" href="" coords="3,1,249,220" shape="rect">
    • 1. Frame 1 {{coords: 3,1,249,220}}

Step 2: Copy over/load the required files.

You will need:

  • Download svg_img_hl_2click.tx by clicking here and upload your survey's theme directory.
  • If one does not already exist, create an images folder in your survey's _s directory and upload the image you mapped (.jpg, .png,  etc.).

Step 3: Setup the survey code.

Lastly, setup the survey code:

  • Set autosubmit to 'n' for your highlighter group.
  • Include the list of area names and coordinates.
  • HL_AREAS is a control question used to store the coordinate set so it can be passed to the script. Ensure this has a unique question ID for each exercise in your survey.
  • The text widget is where the exercise will be placed on the page. It calls the template file that was loaded to the theme directory.
    • Update the @ids and @text lines to point at the unique control question for your highlighter (QHL_AREAS).
    • Update the w (width) and h (height) lines to the width and height of the image being highlighted.
    • Update href to point to the image you uploaded. Note that this example used [* appid() *] to automatically grab your survey ID, so you only need to update the filename.
    • Update qid to the question ID prefix (Q15_) that you'll use for the data your highlighter will generate.
  • Update the question ID (15_)  to the question ID for your specific exercise. This happens in 7 places, so using the editors find/replace function is suggested.
startgroup: highlight
autosubmit: n

set list: AREAS
1. IntelliSurvey {{coords: 0,0,0,141,131,141,262,141,394,141,525,141,656,141,787,141,787,182,900,182,900,91,900,0,771,0,643,0,514,0,386,0,257,0,129,0,0,0}}
2. Powering      {{coords: 0,141,264,182}}
3. Intelligent   {{coords: 264,141,543,182}}
4. Research      {{coords: 543,141,787,182}}
5. Left Dolphin  {{coords: 0,506,0,408,58,380,73,361,102,320,132,289,156,266,182,246,202,239,220,239,231,231,264,206,270,206,270,214,259,243,242,273,233,294,227,328,241,345,257,374,258,381,246,390,238,382,231,370,225,368,214,356,197,380,170,410,135,444,112,476,90,506,0,506}}
6. Center Dolphin{{coords: 196,506,223,458,276,413,292,388,311,367,301,361,288,361,270,361,297,343,333,336,362,329,424,278,460,253,488,237,522,226,550,221,569,221,593,206,602,211,587,238,579,253,561,280,543,307,553,324,551,361,521,371,525,347,524,334,438,379,365,414,275,468,249,506,196,506}}
7. Right Dolphin {{coords: 421,506,456,469,491,437,525,413,551,403,560,403,578,380,593,370,602,370,593,413,582,464,566,506,494,506,421,506}}

HL_AREAS. Area coordinates
type: checkbox
systemvar: y
selectby: condition
optsfrom: AREAS {text: [coords]}
onload:y

text: pull in svg css and javascript
template: svg_img_hl_2click.tx
template_data: <<ETD
my @ids = @$QHL_AREAS;
my @text = split(', ',get_answer_text('QHL_AREAS') );
my %shapes;
@shapes{@ids} = @text;
return {
w => 900,
h => 506,
href => '/survey/[* appid() *]/_s/images/Dolphins_iS_900x506.png',
shapes => \%shapes,
qid => 'Q15_'
}
ETD

block: <<HLB_BLK

html:<div style='display:none'>

set text: img_polyxxIDxx
text: xxTEXTxx

15_xxIDxx. xxTEXTxx
type: radio
ap:n
autosubmit: n
dvalue: 1
1. Blank
2. Positive
3. Negative

html:</div>

HLB_BLK
bare: y
inline: y
sigil: x
list: AREAS

15_POS. Positive
type: checkbox
selectby: condition
optsfrom: AREAS {if anyChecked($Q15_[id],2)}

15_NEG. Negative
type: checkbox
selectby: condition
optsfrom: AREAS { if anyChecked($Q15_[id],3) }

validate: anyChecked($Q15_POS) or anyChecked($Q15_NEG)
message: Please select at least one area that you LIKE or DISLIKE.

endgroup: highlight

Note: The use of coords in the code above is case sensitive.

We post the option list with coordinates, and the file uploaded to the theme directory is called as the template. The template data defines the image being highlighted, as well as the height and width of the image.

When this renders for the respondent, the system will use the .tx file and sheet to generate an interactive SVG in the browser window. The areas will be selectable, and the selections will map to the underlying radio button options. 

By default, the image will span 100% of the available screen width and will automatically resize on mobile devices. If you need a smaller image on desktop, you can add some CSS called a media query that will set the image size when the screen is over a certain width, but will fall back to using the 100% width when the screen is smaller than this size:

svg#highlight {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 480px) {
    svg#highlight {
        width: 400px;
        height: auto;
    }
}

In the code above, the first selector is already located around line 47 of the .tx file. We add the "@media" bit after that so the system can fall back when the screen size is less than 480px. If you place this before the "svg#highlight" rule, it will not work correctly because the 100% width will then take precedence due to the cascade (things further down the file have more power).

3 click (like/dislike/confusing)

The following steps will generate a 3 click (like/dislike/confusing) highlighter. Here is a demo of a 3 click (like/dislike/confusing) highlighter in action.

Step 1: Create the coordinates.

Refer to 2 click, Step 1 above for instructions.

Step 2: Copy over/load the required files.

You will need:

  • Download svg_img_hl_3click.tx by clicking here, and upload it to your survey's theme directory.
  • If one does not already exist, create an images folder in your survey's _s directory, and upload the image you mapped (.jpg, .png, etc.).

Step 3: Setup the survey code

Lastly, setup the survey code:

  • Set autosubmit to 'n' for your highlighter group.
  • Include the list of area names and coordinates.
  • HL_AREAS is a control question used to store the coordinate set so it can be passed to the script. Ensure this has a unique question ID for each exercise in your survey.
  • The text widget is where the exercise will be placed on the page. It calls the template file that was loaded to the theme directory.
    • Update the @ids and @text lines to point at the unique control question for your highlighter (QHL_AREAS).
    • Update the w (width) and h (height) lines to the width and height of the image being highlighted.
    • Update href to point to the image you uploaded. Note that this example used [* appid() *] to automatically grab your survey ID, so you only need to update the filename.
    • Update qid to the question ID prefix (Q15_) that you'll use for the data your highlighter will generate.
  • Update the question ID (15_) to the question ID for your specific exercise. This happens in 7 places, so using the editors find/replace function is suggested.
startgroup: highlight
autosubmit: n

set list: AREAS
1. IntelliSurvey {{coords: 0,0,0,141,131,141,262,141,394,141,525,141,656,141,787,141,787,182,900,182,900,91,900,0,771,0,643,0,514,0,386,0,257,0,129,0,0,0}}
2. Powering      {{coords: 0,141,264,182}}
3. Intelligent   {{coords: 264,141,543,182}}
4. Research      {{coords: 543,141,787,182}}
5. Left Dolphin  {{coords: 0,506,0,408,58,380,73,361,102,320,132,289,156,266,182,246,202,239,220,239,231,231,264,206,270,206,270,214,259,243,242,273,233,294,227,328,241,345,257,374,258,381,246,390,238,382,231,370,225,368,214,356,197,380,170,410,135,444,112,476,90,506,0,506}}
6. Center Dolphin{{coords: 196,506,223,458,276,413,292,388,311,367,301,361,288,361,270,361,297,343,333,336,362,329,424,278,460,253,488,237,522,226,550,221,569,221,593,206,602,211,587,238,579,253,561,280,543,307,553,324,551,361,521,371,525,347,524,334,438,379,365,414,275,468,249,506,196,506}}
7. Right Dolphin {{coords: 421,506,456,469,491,437,525,413,551,403,560,403,578,380,593,370,602,370,593,413,582,464,566,506,494,506,421,506}}

HL_AREAS. Area coordinates
type: checkbox
systemvar: y
selectby: condition
optsfrom: AREAS {text: [coords]}
onload:y

text: pull in svg css and javascript
template: svg_img_hl_3click.tx
template_data: <<ETD
my @ids = @$QHL_AREAS;
my @text = split(', ',get_answer_text('QHL_AREAS') );
my %shapes;
@shapes{@ids} = @text;
return {
w => 900,
h => 506,
href => '/survey/[* appid() *]/_s/images/Dolphins_iS_900x506.png',
shapes => \%shapes,
qid => 'Q15_'
}
ETD

block: <<HLB_BLK

html:<div style='display:none'>

set text: img_polyxxIDxx
text: xxTEXTxx

15_xxIDxx. xxTEXTxx
type: radio
ap:n
autosubmit: n
dvalue: 1
1. Blank
2. Positive
3. Negative
4. Confusing

html:</div>

HLB_BLK
bare: y
inline: y
sigil: x
list: AREAS

15_POS. Positive
type: checkbox
selectby: condition
optsfrom: AREAS {if anyChecked($Q15_[id],2)}

15_NEG. Negative
type: checkbox
selectby: condition
optsfrom: AREAS { if anyChecked($Q15_[id],3) }

15_CON. Confusing
type: checkbox
selectby: condition
optsfrom: AREAS { if anyChecked($Q15_[id],4) }

validate: anyChecked($Q15_POS) or anyChecked($Q15_NEG) or anyChecked($Q15_CON)
message: Please select at least one area that you LIKE, DISLIKE, or find CONFUSING.

endgroup: highlight

Note: The use of coords in the code above is case sensitive.

See 2 click, Step 3 above for additional notes.

3 mode (like/dislike/confusing with a mode selector)

The following steps will generate a 3 mode (like/dislike/confusing with a mode selector) highlighter. Here is a demo of a 3 mode highlighter in action.

Step 1: Create the coordinates.

Refer to 2 click, Step 1 above for instructions.

Step 2: Copy over/load the required files.

You will need:

  • Download svg_img_hl_3mode.tx by clicking here and upload your survey's theme directory
  • If one does not already exist, create an "images" folder in your survey's _s directory and upload the image you mapped (.jpg, .png,  etc.)

Step 3: Setup the survey code.

Lastly, setup the survey code:

  • Set autosubmit to 'n' for your highlighter group.
  • Include a MODE question with a unique ID for each exercise.
  • Include the list of area names and coordinates.
  • HL_AREAS is a control question used to store the coordinate set so it can be passed to the script. Ensure this has a unique question ID for each exercise in your survey.
  • The text widget is where the exercise will be placed on the page. It calls the template file that was loaded to the theme directory.
    • Update the @ids and @text lines to point at the unique control question for your highlighter (QHL_AREAS).
    • Update the w (width) and h (height) lines to the width and height of the image being highlighted.
    • Update href to point to the image you uploaded. Note that this example used [* appid() *] to automatically grab your survey ID, so you only need to update the filename.
    • Update qid to the question ID prefix (Q15_) that you'll use for the data your highlighter will generate.
    • Update mode to the question ID that you're using for this exercise.
  • Update the question ID (15_) to the question ID for your specific exercise. This happens in 7 places, so using the editors find/replace function is suggested.
startgroup: highlight
autosubmit: n

MODE. Mode selection, click here first
type: radio
ap: n
2. Like
3. Dislike
4. Confusing
1. Clear

set list: AREAS
1. IntelliSurvey {{coords: 0,0,0,141,131,141,262,141,394,141,525,141,656,141,787,141,787,182,900,182,900,91,900,0,771,0,643,0,514,0,386,0,257,0,129,0,0,0}}
2. Powering      {{coords: 0,141,264,182}}
3. Intelligent   {{coords: 264,141,543,182}}
4. Research      {{coords: 543,141,787,182}}
5. Left Dolphin  {{coords: 0,506,0,408,58,380,73,361,102,320,132,289,156,266,182,246,202,239,220,239,231,231,264,206,270,206,270,214,259,243,242,273,233,294,227,328,241,345,257,374,258,381,246,390,238,382,231,370,225,368,214,356,197,380,170,410,135,444,112,476,90,506,0,506}}
6. Center Dolphin{{coords: 196,506,223,458,276,413,292,388,311,367,301,361,288,361,270,361,297,343,333,336,362,329,424,278,460,253,488,237,522,226,550,221,569,221,593,206,602,211,587,238,579,253,561,280,543,307,553,324,551,361,521,371,525,347,524,334,438,379,365,414,275,468,249,506,196,506}}
7. Right Dolphin {{coords: 421,506,456,469,491,437,525,413,551,403,560,403,578,380,593,370,602,370,593,413,582,464,566,506,494,506,421,506}}

HL_AREAS. Area coordinates
type: checkbox
systemvar: y
selectby: condition
optsfrom: AREAS {text: [coords]}
onload:y

text: pull in svg css and javascript
template: svg_img_hl_3mode.tx
template_data: <<ETD
my @ids = @$QHL_AREAS;
my @text = split(', ',get_answer_text('QHL_AREAS') );
my %shapes;
@shapes{@ids} = @text;
return {
w => 900,
h => 506,
href => '/survey/[* appid() *]/_s/images/Dolphins_iS_900x506.png',
shapes => \%shapes,
qid => 'Q15_',
mode => 'QMODE'
}
ETD

block: <<HLB_BLK

html:<div style='display:none'>

set text: img_polyxxIDxx
text: xxTEXTxx

15_xxIDxx. xxTEXTxx
type: radio
ap:n
autosubmit: n
dvalue: 1
1. Blank
2. Positive
3. Negative
4. Confusing

html:</div>

HLB_BLK
bare: y
inline: y
sigil: x
list: AREAS

15_POS. Positive
type: checkbox
selectby: condition
optsfrom: AREAS {if anyChecked($Q15_[id],2)}

15_NEG. Negative
type: checkbox
selectby: condition
optsfrom: AREAS { if anyChecked($Q15_[id],3) }

15_CON. Confusing
type: checkbox
selectby: condition
optsfrom: AREAS { if anyChecked($Q15_[id],4) }

validate: anyChecked($Q15_POS) or anyChecked($Q15_NEG) or anyChecked($Q15_CON)
message: Please select at least one area that you LIKE, DISLIKE, or find CONFUSING.

endgroup: highlight

Note: The use of coords in the code above is case sensitive.

See 2 click, Step 3 above for additional notes.

single click (like on one page/dislike on the next, liked item excluded)

The following steps will generate a single click (like on one page/dislike on the next, liked item excluded) highlighter. Here is a demo of a single click highlighter in action. Single click uses a similar but slightly different set up that allows us to tap into some of the features inherent to questions in our .tx file so we can do things like pull the ID, text, and coordinates from the question directly.

Step 1: Create the coordinates.

Refer to 2 click, Step 1 above for instructions.

Step 2: Copy over/load the required files.

You will need:

Step 3: Setup the survey code.

Lastly, setup the survey code:

  • Set autosubmit to 'n' for your highlighter group.
  • Include the list of area names and coordinates.
  • POSITIVE is a standard radio question that calls SVGAREAS as an option list. This question is modified by calling the .tx file you loaded earlier. The template data is then updated as follows:
    • Update href to point to the image you uploaded. Note that this example used [* appid() *] to automatically grab your survey ID, so you only need to update the filename.
    • Update the W (width) and H (height) lines to the width and height of the image being highlighted.
    • Update color to the color you want the highlight to be. This can be a hex code.
    • Update cursor to point to the image name you want to use.
  • NEGATIVE requires the same template data updates with one addition:
    • Update exclude with the ID of the POSTIVE question (no leading Q).
startgroup: highlight
autosubmit: n

set list: SVGAREAS
8. Water {{coords: 0,182, 900,506}}
1. IntelliSurvey {{coords: 0,0, 0,141, 131,141, 262,141, 394,141, 525,141, 656,141, 787,141, 787,182, 900,182, 900,91, 900,0, 771,0, 643,0, 514,0, 386,0, 257,0, 129,0, 0,0}}
2. Powering {{coords: 0,141, 264,182}}
3. Intelligent {{coords: 264,141, 543,182}}
4. Research {{coords: 543,141, 787,182}}
5. Left Dolphin {{coords: 0,506, 0,408, 58,380, 73,361, 102,320, 132,289, 156,266, 182,246, 202,239, 220,239, 231,231, 264,206, 270,206, 270,214, 259,243, 242,273, 233,294, 227,328, 241,345, 257,374, 258,381, 246,390, 238,382, 231,370, 225,368, 214,356, 197,380, 170,410, 135,444, 112,476, 90,506, 0,506}}
6. Center Dolphin{{coords: 196,506, 223,458, 276,413, 292,388, 311,367, 301,361, 288,361, 270,361, 297,343, 333,336, 362,329, 424,278, 460,253, 488,237, 522,226, 550,221, 569,221, 593,206, 602,211, 587,238, 579,253, 561,280, 543,307, 553,324, 551,361, 521,371, 525,347, 524,334, 438,379, 365,414, 275,468, 249,506, 196,506}}
7. Right Dolphin {{coords: 421,506, 456,469, 491,437, 525,413, 551,403, 560,403, 578,380, 593,370, 602,370, 593,413, 582,464, 566,506, 494,506, 421,506}}

POSITIVE. Select one area that you find interesting.
type: radio 
optsfrom: SVGAREAS
template: svg_image_highlighter.tx
template_data: <<EOTD
{
IMG => '/survey/[* appid() *]/_s/images/Dolphins_iS_900x506.png', 
H => '506',
W => '900',
color => 'green',
cursor => 'like-button-icon'
}
EOTD

NEGATIVE. Select one area that you find boring.
type: radio 
optsfrom: SVGAREAS
template: svg_image_highlighter.tx
template_data: <<EOTD
{
IMG => '/s/[* appid() *]/images/Dolphins_iS_900x506.png', 
H => '506',
W => '900',
color => 'red',
cursor => 'dislike-button-icon', 
exclude => 'POSITIVE'
}
EOTD

endgroup: highlight

Note: The use of coords in the code above is case sensitive.

See 2 click, Step 3 above for additional notes.

Tips

SVG images

SVG images don’t have defined pixel dimensions in a file directory but do when rendered. To prevent cutoffs and adjust the layout in your survey, use the browser inspector during a test to find the rendered width and height. Then, insert those values into the JavaScript to ensure proper image display, as shown in the code examples above with w => 900 and h => 506.

Changing the cursor to a pointer

For better user interaction, set the cursor to a pointer when hovering over target areas (polygons) by adjusting the styles in your .tx file. Make these changes:

Modify this selector.

div#SVGContainer {
    cursor: pointer;
}

This change triggers the pointer when hovering over the individual polygons.

polygon:hover {
    cursor: pointer;
}

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.