Present text sentence by sentence and sometimes add an image

Hi everyone,

I’m trying to implement a self-paced reading experiment consisting of several short stories. Every story should be presented sentence by sentence.
In some stories, some sentences (very specific one, depending on the story) should be accompanied by an image.

What I am trying right now:
As I have read different posts about self-paced reading experiments, I placed every story in one cell. The sentences are separated via /.
My structure is very simple (see screenshot)

I use the following code:
In the „Load Text“ Routine
Begin Experiment tab:

loopN = -1;

Begin Routine tab

mySentences = thisText.split("/");
nTrials = mySentences.length;

In the „Stories“ Routine:

loopN+=1;

In the TextBox: $mySentences[loopN]

I have several issues:

First: This solution only works for the first story – for every other story, only a white screen appears. I think the position of loopN+=1; is wrong, but I can’t figure out where to put it.

Second: I don’t know how only some sentences can be accompanied by images. It is no problem to show the same image for every sentence, but I do not know how to add only sometimes an image.

Third: The data output is not optimal: Is there a way to save the separated sentences in the same line as the corresponding reaction time? Right now, the whole story is in one cell – which makes sense since I have implemented it this way but is not optimal for later analysis. I am interested in the reading time for each sentence – measured as time between two key presses.

I really appreciate any help you can provide.

  1. It might be as simple as resetting loopN = -1 when you start a new paragraph.

  2. You could have a transparent png image you use when you don’t want an image to be visible.

  3. If you add thisExp.nextEntry() younwill get a new line in your data file.

Thank you very much for your help!

The solution for 1 and 3 worked perfectly. Thank you!

2: I’m not sure if I’m doing this correctly. Right now, I’m am following the same principle as with the sentences. This means I put all Images belonging to one story in one cell next to the stories (The images are separated via *)
Then I put

myImages = thisImage.split("*");

in the loadText routine. However it does not find the resource (I’m pretty sure that there is no spelling error – I copy-pasted all of the names)
Would there be a better way to do this? I’m still wondering if it would be better to put all stories in separate excel files – this would, however, result in around 50 excel files.

Try print(‘myImages’,myImages) – translates to console.log in JS

and then look at the Browser console.

So do you have something like the following?

transparent.png*transparent.png*transparent.png*transparent.png*transparent.png

When I use

console.log(myImages); 

I get the following:
0: “Stimuli/Test2.png”
1: “Stimuli/Test1.png”
2: “Stimuli/Test3.png”
length: 3
: Array

Which looks correct to me – but the error message says still “unknown resource”.

I was wondering if it would be better to put the folder already in the image properties. Therefore I changed the excel file (containing the image names only) and put the following in the images properties.

$”Stimuli/” + myImages[loopN]

However, it still does not find the image.

Have you attached the stimuli via Experiment Settings / Online ?

This worked - thank you so much!

Do you know why I had to attach them?

I’m running a different study (also online) with images. I didn’t attach them, but it still worked…

PsychoPy automatically attaches resources that are “hard coded” (i.e. the name of the file is in a component) but not ones that are dynamic (specified using a variable).

1 Like