Can only define HTML using timeline variables within the entire test

[BKTidswell]

Hello,
I am new to jspsych, but am trying to make an experiment that shows two images while audio plays. I have managed to get the timeline to work the way I want it to, and rotate the images correctly, however I have to define each trial within the entire test in order to have jsPsych.timelineVariable( ) get the correct image (or any image at all) in custom HTML. While my current setup works it is messy. Is there a way to use a function that takes jsPsych.timelineVariable( ) as an input to create HTML? And is there a way to define the trials outside of the entire test and have them get the timeline variables?

Here is my code. As you can see, it is made up of all the nested trials.

var test_procedure = {
        timeline: [{
                      type: 'html-keyboard-response',
                      stimulus: '<div style="font-size:60px;">+</div>',
                      choices: jsPsych.NO_KEYS,
                      trial_duration: 1000,
                   },
                   {
                      type: 'audio-keyboard-response', 
                      stimulus: jsPsych.timelineVariable('sound'),  
                      choices: jsPsych.NO_KEYS,
                      prompt: function(){
                                  var html="<div class=wrapper><img src="+jsPsych.timelineVariable('shape1')+" class=rotate class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src="+jsPsych.timelineVariable('shape2')+" class=rotate class=box width=100 height=100/></div>";
                                  return html;
                                },
                      trial_duration: 2000,
                  },
                  {
                      type: 'audio-keyboard-response', 
                      stimulus: jsPsych.timelineVariable('sound'),  
                      choices: ['f','j'],
                      prompt: function(){
                                  var html="<div class=wrapper><img src="+jsPsych.timelineVariable('shape1')+" class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src="+jsPsych.timelineVariable('shape2')+" class=box width=100 height=100/></div>";
                                  return html;
                                }
                  },
                  {
                    timeline: [
                                {
                                    type: 'audio-keyboard-response', 
                                    stimulus: jsPsych.timelineVariable('sound'),  
                                    choices: jsPsych.NO_KEYS,
                                    prompt: function(){
                                                var html="<div class=wrapper><img src="+jsPsych.timelineVariable('shape1')+" class=rotate class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src="+jsPsych.timelineVariable('shape2')+" class=box width=100 height=100/></div>";
                                                return html;
                                              },
                                    trial_duration: 1000,
                                }],
                    conditional_function: function(){
                        // get the data from the previous trial,
                        // and check which key was pressed
                        var data = jsPsych.data.get().last(1).values()[0];
                        if(jsPsych.pluginAPI.compareKeys(data.response, 'f')){
                            return true;
                        } else {
                            return false;
                        }
                    }
                  },
                  {
                    timeline: [
                                {
                                    type: 'audio-keyboard-response', 
                                    stimulus: jsPsych.timelineVariable('sound'),  
                                    choices: jsPsych.NO_KEYS,
                                    prompt: function(){
                                                var html="<div class=wrapper><img src="+jsPsych.timelineVariable('shape1')+" class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src="+jsPsych.timelineVariable('shape2')+" class=rotate class=box width=100 height=100/></div>";
                                                return html;
                                              },
                                    trial_duration: 1000,
                                }],
                    conditional_function: function(){
                        // get the data from the previous trial,
                        // and check which key was pressed
                        var data = jsPsych.data.get().last(1).values()[0];
                        if(jsPsych.pluginAPI.compareKeys(data.response, 'j')){
                            return true;
                        } else {
                            return false;
                        }
                    }
                  }
                  ],

        timeline_variables: [
          {sound: 'sound/teetee.wav', shape1: "img/bouba_3_L.png", shape2: "img/kiki_3_L.png"},
          {sound: 'sound/keekee.wav', shape1: "img/kiki_3_L.png",  shape2: "img/bouba_3_L.png"}
        ]
    }

[jodeleeuw]

Hi Ben!

You can define trials as variables and then put them on a timeline:

var fixation_cross = {
  type: 'html-keyboard-response',
  stimulus: '<div style="font-size:60px;">+</div>',
  choices: jsPsych.NO_KEYS,
  trial_duration: 1000
}

var audio_image_1 = {
  type: 'audio-keyboard-response',
  stimulus: jsPsych.timelineVariable('sound'),
  choices: jsPsych.NO_KEYS,
  prompt: function () {
    var html = "<div class=wrapper><img src=" + jsPsych.timelineVariable('shape1') + " class=rotate class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src=" + jsPsych.timelineVariable('shape2') + " class=rotate class=box width=100 height=100/></div>";
    return html;
  },
  trial_duration: 2000,
}

var audio_image_2 = {
  type: 'audio-keyboard-response',
  stimulus: jsPsych.timelineVariable('sound'),
  choices: ['f', 'j'],
  prompt: function () {
    var html = "<div class=wrapper><img src=" + jsPsych.timelineVariable('shape1') + " class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src=" + jsPsych.timelineVariable('shape2') + " class=box width=100 height=100/></div>";
    return html;
  }
}

var conditional_audio_image_1 = {
  timeline: [
    {
      type: 'audio-keyboard-response',
      stimulus: jsPsych.timelineVariable('sound'),
      choices: jsPsych.NO_KEYS,
      prompt: function () {
        var html = "<div class=wrapper><img src=" + jsPsych.timelineVariable('shape1') + " class=rotate class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src=" + jsPsych.timelineVariable('shape2') + " class=box width=100 height=100/></div>";
        return html;
      },
      trial_duration: 1000,
    }],
  conditional_function: function () {
    // get the data from the previous trial,
    // and check which key was pressed
    var data = jsPsych.data.get().last(1).values()[0];
    if (jsPsych.pluginAPI.compareKeys(data.response, 'f')) {
      return true;
    } else {
      return false;
    }
  }
}

var conditional_audio_image_2 = {
  timeline: [
    {
      type: 'audio-keyboard-response',
      stimulus: jsPsych.timelineVariable('sound'),
      choices: jsPsych.NO_KEYS,
      prompt: function () {
        var html = "<div class=wrapper><img src=" + jsPsych.timelineVariable('shape1') + " class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src=" + jsPsych.timelineVariable('shape2') + " class=rotate class=box width=100 height=100/></div>";
        return html;
      },
      trial_duration: 1000,
    }],
  conditional_function: function () {
    // get the data from the previous trial,
    // and check which key was pressed
    var data = jsPsych.data.get().last(1).values()[0];
    if (jsPsych.pluginAPI.compareKeys(data.response, 'j')) {
      return true;
    } else {
      return false;
    }
  }
}

var test_procedure = {
  timeline: [fixation_cross, audio_image_1, audio_image_2, conditional_audio_image_1, conditional_audio_image_2],
  timeline_variables: [
    { sound: 'sound/teetee.wav', shape1: "img/bouba_3_L.png", shape2: "img/kiki_3_L.png" },
    { sound: 'sound/keekee.wav', shape1: "img/kiki_3_L.png", shape2: "img/bouba_3_L.png" }
  ]
}

The timeline variables will still work because the trials are being executed in the context of test_procedure.

[BKTidswell]

Hi Josh!

Thank you for that, I feel like I had tried that but I think that I must have just been giving the prompt the HTML string without putting it into a function first?

I was hoping to be able to make a larger function that manages these based on the images it is given, so that based on different inputs it can modify a base HTML string.

Something like this:

    function makeHTML(img1,img2){
      console.log(img1);
      console.log(img2);

      var htmlout = "<div class=wrapper><img src=" + img1 + " class=rotate class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src=" + img1 + " class=rotate class=box width=100 height=100/></div>";

      console.log(htmlout);
      return htmlout;
    }

Where img1 and img2 are jsPsych.timelineVariable('shape1') and jsPsych.timelineVariable('shape2') respectively. However this returns the string <div class=wrapper><img src=function() { return timeline.timelineVariable(varname); } class=rotate class=box width=100 height=100 /><div style=font-size:60px;>+</div><img src=function() { return timeline.timelineVariable(varname); } class=rotate class=box width=100 height=100/></div> which is not what I want. Do I need to call img1 and img2 inside of MakeHTML()? I have tried this with call_immediate = true but it just tells me that the timeline is undefined.