Likert Scale with pictures using OSWeb

b_lanzini

Hi all!

I want to implement a Likert Scale, associated to a bunch of pictures, using OSWeb.

I found some instructions here on the forum about rating scales, but they all refer to inline_script, which I cannot use due to OSWeb. I can only use inline_javascript and inline_html.

Also, I'd like the likert scale to show up below a picture. The pictures that need to be evaluated are about 100, and I'd like them to show up in a randomised order. I already uploaded them all in the pool.

I tried to create a loop with 3 column, of which the first one ("image") is filled with the images' names, and to add an inline_html after, which "recalls" the picture from the loop. But i can't make it work.

Do you have any suggestions?

Fab

Hi @b_lanzini,

There are several ways of implementing a lickert scale type of response registration.

Options include writing code in Javascript (using an inline_javascript object) to set up the presentation of a picture, the scale, take and register the response. Javascript is its own language, though, and if you're not familiar with it, this might not be the easiest option. A slightly easier option is to use code in an html_form. Here's a description of that method.

Method 1: html_form

1. Image Display
   • At the top of the form, an image is shown.
   • The image is loaded dynamically from the experiment’s file pool, based on the variable my_image.
   • The max-height:500px; CSS style ensures the image will never exceed 500 pixels in height, keeping the display tidy regardless of image proportions.

1. Likert Slider
   • Below the image, a prompt instructs the participant to indicate their response.
   • A horizontal slider (<input type="range" ...>) represents a Likert scale from 1 to 7. The slider snaps to integer values only.
   • The slider is centered and visually separated from the image and labels for clarity.

1. Scale Labels
   • Directly beneath the slider, numbers 1–7 are shown and evenly aligned with each possible slider position, making it clear what each position represents.

1. Response Submission
   • Below the slider and labels, there is a "Submit" button.
   • The participant moves the slider to select their rating and clicks "Submit" to confirm their response.

1. Data Capture
   • The selected value is assigned to the experimental variable likert automatically.
   • This variable can be logged and used for analysis, just like any regular response variable in OpenSesame.

1. Image Handling Script
   • The included JavaScript line sets the source (src) of the image based on the filename provided by the my_image variable, ensuring the correct image is shown for each trial.

The code in the html_form object would be the following (or a variation of it):

<img id="stim_image" style="display:block;margin:auto;max-height:500px;">

<br>

<label for="likert_slider" style="display:block; text-align:center; margin-bottom: 12px;">

Please indicate your response:

</label>

<input

type="range"

name="likert"

id="likert_slider"

min="1"

max="7"

value="4"

step="1"

style="width: 50%; display: block; margin: auto;">

<div style="margin: auto; display: grid; grid-template-columns: repeat(7, 1fr); width: 50%;">

<span style="text-align:center;">1</span>

<span style="text-align:center;">2</span>

<span style="text-align:center;">3</span>

<span style="text-align:center;">4</span>

<span style="text-align:center;">5</span>

<span style="text-align:center;">6</span>

<span style="text-align:center;">7</span>

</div>

<br>

<input type="submit" value="Submit" style="display:block; margin:auto;">




<script>

// Example: Using variable 'my_image' as the file name (set in a loop or earlier)

document.getElementById('stim_image').src = pool[my_image].data.src;

</script>

This will create a screen with the picture visible and, underneath, a likert scale taht subjects will be able to move with the mouse curso before validating their response by clicking on "submit" button.

The random order of presentation is simply set by making sure that you set the order attribute of the loop to "random" (I assume that you are familiar with the loop; if not, I strongy recommend you read the documentation and do a few tutorials before you move on with your research).

The logger located within the loop makes sure that your data is collected on every trial.

In the output, you'll see a likert variable containing the value selected by the subject, as well as a response_time variable (time elapsed between the presentation of the screen with the picture an likert scale to the moment the subject clicks on the submit button).

Here is an example with just 4 images to illustrate this method. Make sure to loo at it in detailo to understand it before you modify it for your own purpose. Note that I limited the maximum height of the picture to 500 px (whatever the actual image's height is) to make sure the picture and scale are visible without having to scroll down, but you can of course play around with the paramters to fit your needs).

Download the example here.

The advantage of this method is that subjects can move around the slider before validating their response.

Method 2: basic, no coding

If you're lost with the bit of coding above and prefer a solution with no coding, a simple method is to use the basic ready-to-use objects in OS to present an image with a scale but to have participants to press a key on the keyboard (1 to 7) to indicate their response. The major difference with the first method is that subject have to commit to a single response (no slider to move, they click on a value).

Here the method is basic: You use a loop containing a sketchpad (image holder linking to the relevant variable in the loop as well as text to display the Lickert scale and instructions) with a duration of 0 ms (that's important; I assume that you're familiar with this), followed by a keyboard object, and then the logger.

Again, setting the order of presentation of the loop to "random" ensures that the pictures are presented in a random order.

You can download an example with 4 images here.

If you're a newbie with OS, this method is easier as it only uses the most basic funcionalities of OS and is compatble with OSWeb.

Hopefully this should get you going with your experiment.

Best,

Fabrice.