Pular para o conteúdo principal
Base de Conhecimento da FocusVision

Customizing the Image Map Element

1:  Overview

Use the image map element to discover what respondents think about an image, concept or design. This dynamic question style enables respondents to easily map out areas of an image into categories.

imgmap_example(1).png

2:  Underlying Question Architecture

The base question type for the image map element is a <textarea> question. It requires at least one column and no rows to be present.

Base XML

<textarea label="Q1">
  <title>
    Please tell us how you feel about the following workspace.
  </title>
  <col label="c1">I like this</col>
  <col label="c2">I dislike this</col>
</textarea>

The XML code above produces the following result:

imgmap_underlying(1).png

3:  Converting to the Image Map Element

To transform this question into the image map element, you must specify the question style to use and the image file to load.

<textarea label="Q1" uses="imgmap.4" imgmap:image="workspace.jpg">

This change produces the following result:

imgmap_converted.png

4:  Customization

Use the following options to configure and customize the image map element to fit the needs of your project.

  • imgmap:image
    • The image file name to present.
    • Type: String
    • Example: imgmap:image="concept_1.jpg" loads the image specified from the static directory of the project. The file name must be path to image file and not an evaluated expression (e.g. a resource tag or pipe).
  • imgmap:loading
    • The text that is displayed while the image is loading.
    • Type: String
    • Default: <i class='fa fa-icon-spinner fa-icon-spin'></i>
    • Example: imgmap:loading="Please wait..." displays text instead of a spinning icon before the image is loaded.
  • imgmap:paletteSchema
    • The color palette used in the reporting tool to display the category frequencies.
    • Type: String - comma and pipe delimited (e.g. r,g,b,a|%||r,g,b,a|%||...)
    • Example: 255,50,50,0|0||255,50,50,100|100 will update the heatmap colors shown in the Crosstabs report to go from fully transparent red (i.e. white) at 0% to fully visible red at 100%.
  • imgmap:color
    • The color of the category and selection area to be made
    • Type: String - any valid CSS color (e.g. black, #000, rbg(0, 0, 0), etc...)
    • Default:
      • 1 column: #39B54A
      • 2 columns: #39B54A, #ED1C24
      • 3 columns: #39B54A, #00AEEF, #ED1C24
      • 4+ columns: #39B54A, #00AEEF, #ED1C24, transparent...
    • Example: <col label="c1" imgmap:color="#000">...</col> will show a black marker and selection area
  • imgmap:default
    • The marker that should be selected initially upon loading the question
    • Type: String
    • Default: The first column
    • Example: imgmap:default="c3" will select column "c3" as the default marker to use

5:  Customization Example

Below is an example that demonstrate the different options available for customizing the image map element. Use this as a reference to help you customize the look and feel of this question style to fit the needs of your project.

5.1:  Example 1

imgmap_ex1_base.png

Using the attributes listed above, we can modify the look and feel for this question style both for the respondent's view and within Crosstabs. View the XML code below to see what was modified:

Example 1 XML Code

<textarea label="Q1" optional="0" uses="imgmap.4"
  imgmap:image="workspace.jpg"
  imgmap:loading="<i class='fa fa-icon-spinner fa-icon-spin'></i> Please wait..."
  imgmap:paletteSchema="255,0,0|0||0,255,0|50||0,0,255|100">
  <title>
    Please highlight all the areas in the following image that you find interesting or boring.
  </title>
  <col label="c1">Interesting</col>
  <col label="c2" imgmap:color="#000">Boring</col>
</textarea>

Example 1 XML Code Description

Here's a brief description of each attribute that was added to create this style:

  • imgmap:image="workspace.jpg"
    • This attribute is required and points to the image that we are displaying to the respondent
    • The image should be located in your project's static directory (e.g. /selfserve/9d3/proj1234/workspace.jpg)
  • imgmap:loading="..."
    • This attribute updates the text displayed when loading the question style
    • By default, only a spinner icon is shown. This example, as shown below, displays the text "Please wait..." in addition to the default spinner icon.

      imgmap_ex1_loading.png

  • imgmap:paletteSchema="..."
    • This attribute updates the heatmap colors shown in the Crosstabs report
    • By default, the entire color spectrum is used to illustrate the areas that respondents have selected
    • The value provided goes from red to green to blue, as shown below:

  • <col label="c2" imgmap:color="#000">...</col>
    • Instead of the default red marker color, we've updated the "Boring" selection color to black.

Example 1 Demo

Click here to see this example in a live survey.

6:  Configuring SST

Running SST won't generate very meaningful data for the image map element. Add the following code to your XML if you'd like generate better, fake selection data:

<exec when="init">
# this function generates fake rectangular coordinates
# for image map elements
def imgmap_generateShapes(cols, height, width):
    for col in cols:
        count = random.randint(0, 15)
        if (count):
            shapes = []
            for i in xrange(0, count):
                x1 = random.randint(0, width)
                y1 = random.randint(0, height)
                x2 = random.randint(x1, width)
                y2 = random.randint(y1, height)
                shapes.append("%s %s %s %s" % (x1, y1, x2, y2, ))
            col.val = "\n".join(shapes)
        else:
            col.val = ""
</exec>

<exec cond="gv.isSST()">
# UPDATE THIS CODE FOR EACH QUESTION
# imgmap_generateShapes(QUESTION.cols, IMAGE_HEIGHT, IMAGE_WIDTH)

imgmap_generateShapes(Q1.cols, 449, 550)
</exec>

7:  What's Next?

Check out the Image Map Element document if you'd like to add this dynamic question style using the survey builder.