Image scale

The image scale question type allows a left-to-right-rating just like a usual scale. But instead of ckecking a box or setting a slider, the questionee can click on a different image for each option. This makes the image scale highly customizable.

It may be necessary to explain the answer options to the questionee:

You don’t have to create screenshots to do this. Instead you can directly access the scale’s images. If you don’t use your own images anyway, you’ll find the url of the generic images in the html-source-code of the question.

When you know the image’s url, the following html-code will provide a visual explanation of the scale:

<table cellspacing="0" cellpadding="1" border="0">
<tr>
  <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0px 0"></div></td>
  <td style="padding-left: 20px; vertical-align: middle">no rating yet</td>
</tr><tr>
  <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -30px"></div></td>
  <td style="padding-left: 20px; vertical-align: middle">very bad (no stars)</td>
</tr><tr>
  <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -60px"></div></td>
  <td style="padding-left: 20px; vertical-align: middle">rather bad (1 star)</td>
</tr><tr>
  <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -90px"></div></td>
  <td style="padding-left: 20px; vertical-align: middle">mediocre (2 stars)</td>
</tr><tr>
  <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -120px"></div></td>
  <td style="padding-left: 20px; vertical-align: middle">rather good (3 stars)</td>
</tr><tr>
  <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -150px"></div></td>
  <td style="padding-left: 20px; vertical-align: middle">very good (4 stars)</td>
</tr>
</table>

Amongst the image’s url (here it’s ../images/imgscale.stars5.png) and the explanation you may have to adjust the value for background-position. In our example we have only one image file with 5 different graphics in it and just tell the browser what part of the image it should display. We’ve put the different graphics below each other. So while the first value (the horizontal position) remains at 0 (the browser should start with the pixel number 0 and then display the next 140 pixels (that’s the width) of the image), you should reduce the second value (the vertical position) by the height of the graphic above (in our example that’s always 30 px).

You can use some predefined images (e.g. the stars) for your image scale. But it’s just as simple to change the images freely. First set the size of the image or the selection area in pixels, then set the options count.

Create an image for each option and one for a „no selection yet“ state. It is important that the images have exactly the same size. Then merge all images into one by putting them below each other, like this:

The corresponding image for the standard-star-scale looks like this (without the border):

The final image should have a transparent background so the shading of the items will continue to work. Additionally it may be advisable to reduce the number of colors in your image edit software’s saving dialog (e.g. to 7, 15, 31 or 63 colors), to keep the image file as small as possible so it can load faster even if the questionee has a slow internet connection. Save the image in a web-compatible format (we recommend PNG).

Finally upload the image at Image and media files into Sosci Survey and insert the image’s name into the field that appears when you choose „use own scale graphic“ at the graphic for scale dropdown in the question’s settings. The height and width is usually being set automatically, you just need to enter the number of options (don’t count „no selection yet“).

After saving the image is immediately shown in the question’s preview below.

For the image scale there are form fields in the questionnaire which reveal the current answer code and trigger the events 'click' and 'change'.The following example shows the currently selected response code of the first scale item in the image scale „BS02“ as a popup window.

<script type="text/javascript">
<!--
 
var scaleItem = document.getElementById("BS02_01");
scaleItem.addEventListener("change", function() {
  alert("The answercode has been changed: " + scaleItem.value);
});
 
// -->
</script>

---

Search terms: image-scale, stars, star scale, ratings