Loading images from CSV file

[anjoomav]

I was trying to load images from a csv file. So I made a test_stimuli by converting the csv file to json file. But for some reason, the images are not loading in the HTML file.

Here is how the js file looks like:

var test_stimuli = [
    {
      "LVHFStimulus": "F0.5_O30.png",
      "L_Condition": "LF_P",
      "RVHFStimulus": "F5_O-30.png",
      "R_Condition": "HF_N",
      "ArrowFile": "Arrow_left.png",
      "FrameCond": "LFP_L_HFN",
      "correctAns": [
        2,
        5
      ],
      "correctAns2": [
        5,
        2
      ]
    }];

And this is my HTML code:

var test = {
      type: "html-keyboard-response",
      stimulus: "<div style = 'vertical-align: middle'>"+
          "<img src='jsPsych.timelineVariable('LVHFStimulus')/ style ='padding-right:50px', width ='113px', height = '113px', float: left >"+
          "<img src='jsPsych.timelineVariable('ArrowFile')/ style ='padding-bottom: 47px', width ='38px', height = '19px'>"+
          "<img src='jsPsych.timelineVariable('RVHFStimulus')/ style ='padding-left:50px', width ='113px', height = '113px', float : right>"+
          "</div>",
      // choices: jsPsych.timelineVariable('correctAns'),
      data: { trial_condition: jsPsych.timelineVariable('FrameCond'),correct_response: jsPsych.timelineVariable('correctAns')}
      on_finish: function(data){
        data.correct = data.key_press == jsPsych.pluginAPI.convertKeyCharacterToKeyCode(data.correct_response);
      }
    };

var test_procedure = {
      timeline: [test],
      timeline_variables: test_stimuli,
      randomize_order : true,
      repetitions: 1
    };
timeline.push(test_procedure)

[becky-gilbert]

Hi @anjoomav, I think the reason this isn't working is because your stimulus parameter is combining HTML and file paths from timeline variables. When timeline variables contain the entire parameter value, then they can be used on their own. For instance, if you were using an image plugin then you can do this:

var test = {
  type: 'image-keyboard-response',
  stimulus: jsPsych.timelineVariable('LVHFStimulus'),
  // ....
}

But when you're combining information from timeline variables with other information (e.g. image paths and HTML strings), then the stimulus parameter must be a function that returns the whole parameter value. This is explained in the timeline variables section of the documentation. It also looks like there are a few syntax errors where you're combining the HTML strings and timeline variables.
Can you try this and let us know if it works?

var test = {
  type: "html-keyboard-response",
  stimulus: function() {
    return "<div style = 'vertical-align: middle'>"+
      "<img src='"+jsPsych.timelineVariable('LVHFStimulus')+"' style='padding-right:50px; float: left;' width='113px' height='113px'>"+
      "<img src='"+jsPsych.timelineVariable('ArrowFile')+"' style='padding-bottom:47px;' width ='38px' height='19px'>"+
      "<img src='"+jsPsych.timelineVariable('RVHFStimulus')+"' style='padding-left:50px; float:right;' width='113px' height='113px'>"+
      "</div>"
  },
  // choices: jsPsych.timelineVariable('correctAns'),
  data: { trial_condition: jsPsych.timelineVariable('FrameCond'),correct_response: jsPsych.timelineVariable('correctAns')}
  on_finish: function(data){
    data.correct = data.key_press == jsPsych.pluginAPI.convertKeyCharacterToKeyCode(data.correct_response);
  }
};

Also, please make sure that you're preloading the image files, otherwise they may not appear until after a delay (or not at all).

[becky-gilbert]

One other thing: I think the code above should work if you're using jsPsych v6.3.0+. But if you're using a version of jsPsych prior to 6.3.0, then you'll need to include the second true argument in the jsPsych.timelineVariable function whenever it's used inside of another function. So in your case it would be:

"<img src='"+jsPsych.timelineVariable('LVHFStimulus', true)+ // etc.

[anjoomav]

Thanks a lot, Becky!. It's working now. The problem was with not calling it in a function.