Call a function between two blocks

[TellezI]

I want to use a function between two blocks. This function will set the order of the stimulus that I want to present. The variables that are in the function are called from another script.

This is part of my code:

var trials = [];
      var timeline = [];
      var images = [
      "img/1.png", "img/2.png", "img/3.png", "img/4.png",
      "img/5.png", "img/6.png"
    ];


    var instructions = {
      type: "html-keyboard-response",
      stimulus: "<p>Waiting for the inputs</p> ",
      choices: ['x'],
      post_trial_gap: 1000,
    };
timeline.push(instructions);

//-------------------------------------------------------------------------
// Here, I want to run this function, so trials can have this specific stimulus. 
//After `"instructions"` and  before "block".
//The function:
function() {
        for (var i = 0; i < all_states.length;) {
          var tmppath = all_states[i];
          trials.push({
            stimulus: images[tmppath]
          });
          i++
        }
        }
//-------------------------------------------------------------------------

   var block = {
        type: 'image-keyboard-response',
        choices: jsPsych.NO_KEYS,
        prompt: '<p>Display of images.</p>',
        trial_duration: function(){
          return jsPsych.randomization.sampleWithoutReplacement([1000], 1)[0];
        },
        on_finish: function(data) {
          if (data.key_press == 40) {
            jsPsych.endCurrentTimeline();
          }
        },
        timeline: trials
      }
timeline.push(block);


      var after_block = {
        type: 'html-keyboard-response',
        stimulus: '<p>The trial is finished</p>',
        is_html: true
      }
timeline.push(after_block);

      jsPsych.init({
        timeline: timeline,
        on_finish: function() {
          jsPsych.data.displayData();
        }
      });

Any suggestions?

Thanks in advance of your attention and help.

[TellezI]

I figure out a way to execute the function that I wanted. However, now "block" is not executed, it is just skipped.

This is my code so far:

    var trials = [];
    var timeline = [];
    var images = [
    "img/1.png", "img/2.png", "img/3.png", "img/4.png",
    "img/5.png", "img/6.png"
  ];

  var instructions = {
    type: "html-keyboard-response",
    stimulus: "<p>Waiting for the inputs</p> ",
    choices: ['x'],
    post_trial_gap: 1000
  };
timeline.push(instructions);

      var evaluation = {
        type: 'call-function',
        func: function() {
          for (var i = 0; i < all_states.length;) {
            var tmppath = all_states[i];
            trials.push({
              stimulus: images[tmppath]
            });
            i++
          }
          }
      };
      timeline.push(evaluation);
     
    var block = {
      type: 'image-keyboard-response',
      choices: jsPsych.NO_KEYS,
      prompt: '<p>Display of images.</p>',
      trial_duration: function(){
        return jsPsych.randomization.sampleWithoutReplacement([1000], 1)[0];
      },
      on_finish: function(data) {
        if (data.key_press == 40) {
          jsPsych.endCurrentTimeline();
        }
      },
      timeline: trials
    }
timeline.push(block);

    var after_block = {
      type: 'html-keyboard-response',
      stimulus: '<p>The trial is finished</p>',
      is_html: true
    }
timeline.push(after_block);

    jsPsych.init({
      timeline: timeline,
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

Does anyone have any idea why "block" is no being executed?

Thanks for your attention.

[jodeleeuw]

I think the problem is that block doesn't have a stimulus parameter set.

Your function in the call-function plugin isn't going to achieve what you're aiming for. The timeline can't be modified on the fly in this particular way. There's one function that allows for timeline modification, but this form of timeline construction is something that we will add more support for in a future release.

The solution here is probably to add a stimulus parameter that is a function call to block. You can use that function to determine the correct order of stimuli and return the current stimulus. If you wrap the block inside a looping timeline, you should be able to get a dynamic order of stimuli.

[TellezI]

Thank you jodeleeuw.
Now "block" is being executed. However, it is not showing the images dynamically, it is just displaying the first image, it looks like the loop is not working.

This is the new code:

var trials = [];
    var timeline = [];
    var images = [
    "img/1.png", "img/2.png", "img/3.png", "img/4.png",
    "img/5.png", "img/6.png"
    ];

    var instructions = {
    type: "html-keyboard-response",
    stimulus: "<p>Waiting for the inputs</p> ",
    choices: ['m'],
    post_trial_gap: 1000
    };
    timeline.push(instructions);

    var block = {
      type: 'image-keyboard-response',
      choices: jsPsych.NO_KEYS,
      prompt: '<p>Display of images.</p>',
      stimulus: function (){
          for (var i = 0; i < all_states.length;) {
            var tmppath = all_states[i];
            return images[tmppath];
            i++
          }},
      trial_duration: function(){
        return jsPsych.randomization.sampleWithoutReplacement([1000], 1)[0];
      },
      on_finish: function(data) {
        if (data.key_press == 40) {
          jsPsych.endCurrentTimeline();
        }},
    }
    timeline.push(block);

    var after_block = {
      type: 'html-keyboard-response',
      stimulus: '<p>The trial is finished</p>',
      is_html: true
    }
    timeline.push(after_block);

    jsPsych.init({
      timeline: timeline,
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

Do you know how to fix it, to display an image for each cycle of the loop?

Thanks again for your attention!

[TellezI]

In the end, this was my solution:

//-------------------Displaying image function-----
      var image_display = {
        type: 'image-keyboard-response',
        choices: jsPsych.NO_KEYS,
        prompt: '<p>Display of images.</p>',
        stimulus: function () {return images[all_states[s]];},
        trial_duration: function(){
          return jsPsych.randomization.sampleWithoutReplacement([1000], 1)[0];},
      }
//--------------------------------------------------------------------------------

//----------------Increase the value of images index (index of all_states) function----
      var increase_S = function (){
          s++
          console.log(s);
          }

      var increase_image_index = {
          type: 'call-function',
          func: increase_S
      }
//------------------------------------

//-----------Function that displays the whole secuence of images------
      var images_sequence = {
          timeline: [image_display, increase_image_index],
          repetitions: 5,
          randomize_order: false
      }
//-----------------------------------------------------------------------