What you learn

  • How to show a sequence of images in random or fixed order

  • How to rate each image using a slider

  • How to embed this in a survey

This is a somewhat advanced topic. Even if you just understand the basics, you should be able to copy and paste the code and adapt to your needs.

This lesson comes with a video showing how it works.

See it yourself

In this task you see the following on 10 trials for 10 different images:

  1. You see a fixation point

  2. Then you see an image and a slider bar

  3. You see a short animation reminding the participant to use the slider

  4. Participant needs to slide the slider and press ok

  5. The image disappears in a nice animated way to engage participants

Click here to run a demo experiment

Download the code

Code explained

Below, you see the experiment source code. Also watch our video to get more detailed. Lots of things are not necessary for just showing the images, but the extra stuff, such as the slider which can be dragged and the animations bring the experiment to life.

options
  set &ypos 200 (1)

bitmaps
  instruction
  buttonOkay
  sliderYellow
  sliderGrey
  sliderbar
  fixpoint
  mouse1
  mouse2
  mouse3
  mouse4
  mouse5
  mouse6
  mouse7
  dog1 (2)
  dog2
  dog3
  dog4
  dog5
  dog6
  dog7
  dog8
  dog9
  dog10

table myConditions
  "dog1 adorable"    dog1 (3)
  "dog2 cute"        dog2
  "dog3 normal"      dog3
  "dog4 sad"         dog4
  "dog5 cute"        dog5
  "dog6 angry"       dog6
  "dog7 angry"       dog7
  "dog8 scary"       dog8
  "dog9 scary"       dog9
  "dog10 scary"      dog10

task rateImages
  #-- fix point and first phrase
  show bitmap fixpoint                # 1 (4)
  delay 500
  hide 1 ## rather than removing just keep it for later
  show bitmap @2 0 -100                # 2
  #
  #-- screen buildup for first decision
  #
  show bitmap sliderbar  0 &ypos      # 3
  show bitmap sliderYellow 0 &ypos    # 4
  show bitmap buttonOkay 0 270        # 5
  show text "Do you agree that this dog is approachable?" 0 100 # 6
  show text "Disagree" -310 195       # 7
  show text "Agree"  300 195          # 8
  show animation 0 220 1200 mouse4 mouse3 mouse2 mouse1 mouse2 mouse3 mouse4 mouse5 mouse6 mouse7 mouse6 mouse5 mouse4  # 9
  clear -1
  drag option xlim  -230 230          # the scale width is 460, from -230 to 230, to map to 1..100 need to devide by 4.6
  drag option ylim  &ypos &ypos
  drag option from 4 # you can only drag stimulus number 3, the sliderbutton
  drag option exit 5 # people click the OK button, stimulus number 5
  dragging 99999 (5)
  #-- Now first decision is made, now we hide (not clear) the bar etc from screen
  clear 3 4 5 6 7 8 9 (6)
  for $i in 90 to 10 by 5 # make the image smaller as nice animation
    scale 2 $i (7)
    delay 25
  for-end
  #-- now we calculate some scores needed later ------------------------------------------
  #
  set &rawScore DRAG_X (8)
  set &score expression ( DRAG_X + 230 ) / 4.6  # this way you get score between 0 and 100 (9)
  #-- second fixation point needs to draw attention to text area, so animation helps --
  #
  save TABLEROW RT @1 &score (10)

block test
  message instruction mouse (11)
  task rateImages 10 (12)
1 We just set a constant here, this is where the slide underneath the images is shown
2 We list all images. The dog images 1 to 10 are the 10 images we use
3 In the table we have 10 lines. Each row is one condition. Randomly, each tablerow will be chosen. Because we call the task 10 times and because there are 10 tablerows, each image will only be used exactly one time
4 We show various images. The #1 is just a comment. Each time we show something, the show counter is increased.
5 After having set up various "options" for dragging, this instruction lets people drag on the slider for up to almost 100 seconds
6 We clear the images as shown before
7 In this for loop we just scale the image so we get a nice animated effect of the image disappearing. Unnecessary, but look good.
8 We calculate the score, which is in image coordinates
9 Now we recalculate this so it becomes a score from exactly 0 to 100
10 Save the data to the output file for later analysis
11 This shows the instruction bitmap. The last "mouse" part makes sure that people click the mouse (or tap screen) instead of button press
12 We call the task 10 times. Add "fixed" to this line to get images from tablerow in same order as table