Can I use a pre-defined array as my timeline variable?

[sophief10]

Hi everyone!

In the code for my experiment, I created an array called "images." As its name suggests, the array contains images (at least, it is supposed to). Specifically, the items in the array are as follows: <img src="Images/red.jpeg"></img>, <img src="Images/blue.jpeg"></img>, <img src="Images/yellow.jpeg"></img>.

I would like to create a nested timeline using the above array items as the values for my timeline variables. However, I cannot figure out how to do that.

Here is an example of a code I have tried so far. Like the other codes I tried, this one will properly produce the Likert scale on my screen but will not display any image.

var run1_NATURAL = {
            timeline: [
                {
                    type: 'survey-likert',
                    preamble: jsPsych.timelineVariable(images),
                    questions: [
                       {
                            labels: likert_scale,
                            prompt: "I would like to eat this food right now, in its presented quantity."
                        }
                    ]
                }
            ]
        };

I have also tried storing the images in the array as objects (i.e., picture: "image address") and then using

preamble: jsPsych.timelineVariable('picture')
...
timeline_variables: images

but that did not work, either.

If anyone has any idea as to what I am doing wrong, would you please consider sharing your insights? I have tried many times to figure out the answer but I am just not succeeding.

[becky-gilbert]

Hi @woodenchair, the second solution you mentioned - putting the images into objects - should work. So for instance, if your image array looked like this:

var images = [{picture: '<img src="Images/red.jpeg"></img>'}, {picture: '<img src="Images/blue.jpeg"></img>'}, {picture: '<img src="Images/yellow.jpeg"></img>'}];

Then you should be able to set up the trial procedure like this:

var run1_NATURAL = {
  timeline: [
    {
      type: 'survey-likert',
      preamble: jsPsych.timelineVariable('picture'),
      questions: [
        {
          labels: likert_scale,
          prompt: "I would like to eat this food right now, in its presented quantity."
        }
      ]
    }
  ],
  timeline_variables: images
};

Could you check to see if this code works, just in case there was a syntax error or typo when you tried this? Also, if this doesn't work, can you say more about what happens (is anything displayed as the preamble? any errors in the browser's JavaScript console?).

[sophief10]

Hi @becky-gilbert! Your code worked perfectly. I think my experiment failed the last time I tried it because of bugs in some other part of my code.
Thank you for helping me figure out this problem! I appreciate it :)