Freely viewable sequence of images on single routine (no loop)

Hi, I’m a PhD student, new to Psychopy and definitely new to coding in Python. I’m designing an experiment using the Builder, but will need to use code to achieve one particular part of the experiment.

I want participants to write a description/narration of a storyboard which consists of 22 images. Since they are narrating the whole thing, they need to be able to look through all of the slides at their leisure while they produce and edit their text. For this reason I assumed it would be best to keep it all on one routine.

Here is a quick slide showing more or less what I imagined the storyboard narration routine to look like. The part with the images could consist of some kind of frame including the images, maybe 2 or 3 at a time, and some kind of mechanism for going back and forward through them. I have depicted it with ‘next’ and ‘previous’ buttons, but I don’t really care exactly what mechanism is used, as long as it is easy for participants to use, and easy enough for me (with your help) to create.

I have been told this should be achievable using code, but I wouldn’t know where to start with making it happen. Also if you have any ideas of alternative ways of achieving what I want that you think would be better/easier, I’d love to hear them.

I’d be really grateful if someone can help me! Thank you in advance.

Hi there @Michaeljc53,

A good place to start here might be this YouTube tutorial.

Thanks!

Kim

1 Like

Hi Kim,

Thank you so much for taking the time to reply to my post!

The video is helpful, the only problem is that if I use a loop like she does, wouldn’t that kind of ‘reset’ the textbox and wipe what the participant has written every time the participant changes what image to look at?

Thanks,
Michael

Hi @Michaeljc53,

It would, we can get around this by inserting a code component like the one in this very basic experiment I’ve popped together (attached).

What’s going on in the code component in the trial routine is:

  1. A variable called current_text is created at the start of the experiment (if you wanted to reset the text at a different point just put this code into a routine at a place that makes sense)
  2. At the start of the trial routine, the textbox text is set to = current_text (so for the first iteration this will be blank)
  3. The user writes something in the textbox
  4. The text written by the user is saved to current_text at the end of the routine
  5. The textbox text is then set to = current_text (which is now whatever the user has written)
  6. The final response is stored to the data output in the save_text routine (again just add this into your experiment wherever makes sense for you)

Hope this helps!

Kim
textbox_example.psyexp (14.5 KB)

Hi @Kimberley_Dundas

This is great, thank you so much for putting this together for me. I’ll have a go at integrating it all using the video too and might be back with more questions in the next couple of weeks!

Thank you for your help,
Michael

Hi @Kimberley_Dundas

I’ve integrated the code from the tutorial and your ‘current text’ code and it is all working smoothly! There is a small issue though, which is that I will need to use something like ‘next’ and ‘previous’ buttons instead of key inputs to scroll back and forth through the slides, because I’ve got an editable textbox on the same routine, so the key inputs get confused sometimes.

I assume all it will need is a slight change of code, however I don’t quite know exactly how to express it. The relevant part of code right now is below (with the method of typing ‘1’ to go back and typing ‘2’ to go forward):

if Sb_key_resp.keys == ‘1’:
imageN -= 1
elif Sb_key_resp.keys == ‘2’:
imageN += 1

I assume it should be a simple case of replacing the if and elif lines to something that translates to:
“if next_button is pressed…”
“elif previous_button is pressed…”

However, I’m not sure how to express a button being pressed in Python code. To clarify what I mean by button, I’m thinking of using the button component in the Builder.

I’ll be very grateful if you or anyone can help!
Michael

Hi @Michaeljc53,

So pleased that this has helped!

Your intuition is completely correct. What I actually tend to do, rather than using the button component itself, is create a nice looking ‘button’ in something like PowerPoint. This is easily done just by creating a shape with text and saving that shape as a .png. I then insert that as an image component into my routine. You’ll also need to add a mouse component, in order to do the clicking. Then, the code you need is pretty much the same as you have currently:

#This is assuming you have stored your images as "prev_button" and "next_button"
#and that your mouse is called "mouse"
if mouse.isPressedIn(prev_button):
   imageN -= 1
elif mouse.isPressedIn(next_button):
   imageN += 1

#Then just to make sure you don't end up with an imageN greater/less than the number 
#of images you have, set min and max values - this assumes you have 3 images

if imageN < 1:
    imageN = 1
elif imageN > 3:
    imageN = 3

You’ll need to remove the keyboard component and set up the mouse to end the routine on a valid click, and list the clickable stimuli as prev_button and next_button.

I’ve put a quick demo of this in the attached folder, hope it helps! Also, I’ve got nothing against the button component, this is just personal preference!

Thanks,

Kim
Textbox demo.zip (49.5 KB)

1 Like

Hi Kim,

This is perfect, thank you so much for taking the time out to help me! I’ll be back in touch if something goes awry but it seems like it should all work.

Hopefully I won’t be bothering you any more! Thanks,
Michael

It’s really not a bother, and will benefit other future forum users too!

Let me know if you run into issues,

Kim

1 Like