Word by word presentation plugin (based on the spr plugin) #1772

pcompen1 · 2021-04-15T10:01:26Z

pcompen1
Apr 15, 2021

For an experiment I need to present sentences word by word. So basically, it should look like a SPR only that instead of space press showing the next word, the words should be presented after a set time (e.g. 450 ms). My idea was to adapt the spr plugin so that key press is not possible any more and instead trial duration ends the trial. Despite your excellent tutorial on plugins I still didn't get to the point where it works as expected (I admit I'm still a beginner with js and jspsych). So far, only the first word is presented for the trial duration and then the whole trial is finished without showing the other words. Probably, there is something I'm missing in regard of stimulus duration and trial duration. Maybe you could implement this word-by-word/wordwise plugin? Would be a great thing for many linguistic studies. Thanks a lot for your help!

Answered by becky-gilbert

Apr 28, 2021

Here you go:

jsPsych.plugins["word-by-word"] = (function() {

  var plugin = {};

  plugin.info = {
    name: "word-by-word",
    parameters: {
      words: {
        type: jsPsych.plugins.parameterType.STRING, 
        default: undefined
      },
      stimulus_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Stimulus duration',
        default: null,
        description: 'How long to hide the stimulus.'
      }
    }
  }

  plugin.trial = function(display_element, trial) {

    // data saving
    var trial_data = {
      words: trial.words
    };
    var current_position = 0;
    var n_words = trial.words.split(' ').length;

    function create_moving_w…

View full answer

becky-gilbert · 2021-04-26T23:41:37Z

becky-gilbert
Apr 26, 2021
Maintainer

Hi @pcompen1, I agree that this is something others might be interested in. Do you mind sharing your current version of the plugin and a minimal example? If you provide something to start from, we should be able to help you get it working. Thanks!

0 replies

pcompen1 · 2021-04-27T14:15:43Z

pcompen1
Apr 27, 2021
Author

Hey Becky, thanks so much! Well, as I said I'm still pretty new to jspsych and js in general. So I really just had some initial ideas what has to be changed but didn't really know how to do it. So an example could look like this, each word of the two trials should be presented one after another, exactly as in the spr trial just without button press. I also realized that this requires some changes with trial_duration and/or stimulus_duration (not sure if both are needed in this case):

<!DOCTYPE html>
<html>
    <head>
        <title>Word by word example</title>
        <script src="jspsych-6.2.0/jspsych.js"></script>
        <script src="jspsych-6.2.0/plugins/jspsych-html-keyboard-response.js"></script>
        <script src="jspsych-wordbyword.js"></script>
        <link href="jspsych-6.2.0/css/jspsych.css" rel="stylesheet" type="text/css"></link>
    </head>
    <body></body>
<script>

var fixation = {
  type: 'html-keyboard-response',
  stimulus: '<p style="font-family: Arial; font-size: 32pt;">+</p>',
  choices: jsPsych.NO_KEYS,
  trial_duration: 500
}

var trial1 = {
  type: 'word-by-word',
  words: 'This is the first trial.',
  choices: jsPsych.NO_KEYS,
  stimulus_duration: 500,
  trial_duration: 2500
}

var trial2 = {
  type: 'word-by-word',
  words: 'That is the second trial.',
  choices: jsPsych.NO_KEYS,
  stimulus_duration: 500,
  trial_duration: 500
}

jsPsych.init({
    timeline: [fixation, trial1, fixation, trial2],
    on_finish: function (data) {jsPsych.data.displayData();
    }
  });
</script>
</html>

For the plugin, I used Josh's spr-plugin as template but didn't really do much. Just deleted the key parameter and added trial_duration and stimulus_duration parameters. I also got rid of the reaction time stuff since we don't need to measure that and added ends if trial duration (but this is probably wrong, since the trial should end when all the words where presented and not when the trial_duration is reached). Sorry, I know that this script is a mess :D But I hope you can still see what I mean. Thanks so much!!

//Plugin
jsPsych.plugins["word-by-word"] = (function() {

  var plugin = {};

  plugin.info = {
    name: "word-by-word",
    parameters: {
      words: {
        type: jsPsych.plugins.parameterType.STRING, 
        default: undefined
      },
      stimulus_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Stimulus duration',
        default: null,
        description: 'How long to hide the stimulus.'
      },
      trial_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Trial duration',
        default: null,
        description: 'How long to show trial before it ends.'
      }
    }
  }

  plugin.trial = function(display_element, trial) {

    // data saving
    var trial_data = {
      words: trial.words
    };
    var current_position = 0;
    var n_words = trial.words.split(' ').length;

    function create_moving_window(words, position){
      var word_list = words.split(' ');
      var stimulus = word_list.map(function(word, index){
        if(index == position){
          return word;
//        } else {
//          return "-".repeat(word.length); //Personally, I don't need indication of word length before with ---
        }
      }).join(' ')
      return stimulus;
    }

    function show_stimulus(position){
      display_element.innerHTML = "<p style='font-family: Arial; font-size: 32pt;'>" + create_moving_window(trial.words, position) + "</p>";

      jsPsych.pluginAPI.getKeyboardResponse({
        callback_function: after_response,
        valid_responses: [trial.key],
        rt_method: 'performance',
        persist: false,
        allow_held_key: false
      });
    }

    function after_response(response_info){

      current_position++;
      if(current_position == n_words){
        end_trial();
      } else {
        show_stimulus(current_position);
      }
    }

    function end_trial(){

      // clear the display
      display_element.innerHTML = '';

     // clear the display
      display_element.innerHTML = '';

      // end trial
      // end trial if trial_duration is set
    if (trial.trial_duration !== null) {
      jsPsych.pluginAPI.setTimeout(function() {
        end_trial();
      }, trial.trial_duration);
    }
  }

    show_stimulus(current_position);    
  };

  return plugin;
})();

0 replies

becky-gilbert · 2021-04-28T00:03:41Z

becky-gilbert
Apr 28, 2021
Maintainer

Converting this to a discussion.

0 replies

becky-gilbert · 2021-04-28T00:33:30Z

becky-gilbert
Apr 28, 2021
Maintainer

Here you go:

jsPsych.plugins["word-by-word"] = (function() {

  var plugin = {};

  plugin.info = {
    name: "word-by-word",
    parameters: {
      words: {
        type: jsPsych.plugins.parameterType.STRING, 
        default: undefined
      },
      stimulus_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Stimulus duration',
        default: null,
        description: 'How long to hide the stimulus.'
      }
    }
  }

  plugin.trial = function(display_element, trial) {

    // data saving
    var trial_data = {
      words: trial.words
    };
    var current_position = 0;
    var n_words = trial.words.split(' ').length;

    function create_moving_window(words, position){
      var word_list = words.split(' ');
      var stimulus = word_list.filter(function(word, index){
        if(index == position){
          return true;
        }
      });
      return stimulus;
    }

    function show_stimulus(position){
      display_element.innerHTML = "<p style='font-family: Arial; font-size: 32pt;'>" + create_moving_window(trial.words, position) + "</p>";
      current_position++;
      if(current_position == n_words){
        end_trial();
      } else {
        jsPsych.pluginAPI.setTimeout(function() {
          show_stimulus(current_position)
        }, trial.stimulus_duration)
      }
    }

    function end_trial(){

      // clear the display
      display_element.innerHTML = '';

      // clear all timeouts
      jsPsych.pluginAPI.clearAllTimeouts();

      // end the trial and save the data
      jsPsych.finishTrial(trial_data);
    }

    show_stimulus(current_position);    
  };

  return plugin;
})();

Here's what I did:

In the create_moving_window function, I used word_list.filter instead of word_list.map, because map will return a value for every item in the original array (which is what Josh wanted to do with his original plugin) whereas in your case you only want to return one of the words. I also got rid of the .join(' ') at the end of this because in your case we're no longer joining multiple array elements together - stimulus is just one string (the word that should be presented), so there's nothing that needs to be joined together.
Got rid of the after_response function, because that function is meant to be called after a keyboard response, and moved the logic inside of it into the show_stimulus function. Now, instead of showing the next stimulus after a key press, we want to show the next stimulus after a certain amount of time has passed since the current stimulus was shown. To do this, in the show_stimulus function we now show the stimulus, increment the current_position value, and then check to see if we're on the last word. If so, then end the trial. If not, then show the next stimulus after the stimulus_duration has passed using the jsPsych.pluginAPI.setTimeout function.
Removed the timer that ends the trial after the trial_duration has passed. That parameter isn't really necessary since the trial duration is always function of the number of words and the stimulus_duration.
In the end_trial function, I added jsPsych.pluginAPI.clearAllTimeouts(), which is usually a good idea whenever you're using jsPsych.pluginAPI.setTimeout in the plugin. I also end the trial with the jsPsych.finishTrial function, and pass it the data that should be saved for the trial (trial_data).

I hope this helps! Let us know if you have any problems or further questions.

2 replies

becky-gilbert Apr 28, 2021
Maintainer

Oops, I just realized that the show_stimulus function above isn't quite right - on the last word, it ends the trial immediately, instead of waiting for the stimulus_duration to pass first. Try this instead:

  function show_stimulus(position){
      display_element.innerHTML = "<p style='font-family: Arial; font-size: 32pt;'>" + create_moving_window(trial.words, position) + "</p>";
      current_position++;
      jsPsych.pluginAPI.setTimeout(function() {
        if (current_position == n_words) {
          end_trial();
        } else {
          show_stimulus(current_position)
        }
      }, trial.stimulus_duration)
    }

pcompen1 Apr 30, 2021
Author

Yeah, that's really great. Thanks so much, Becky. It's pretty convenient as a plugin because like this it can be combined within different designs. Great. And thanks to your explanation I understood much better now how plugins work =)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Word by word presentation plugin (based on the spr plugin) #1772

Uh oh!

{{title}}

Uh oh!

Replies: 4 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Word by word presentation plugin (based on the spr plugin) #1772

Uh oh!

pcompen1 Apr 15, 2021

Replies: 4 comments · 2 replies

Uh oh!

becky-gilbert Apr 26, 2021 Maintainer

Uh oh!

pcompen1 Apr 27, 2021 Author

Uh oh!

becky-gilbert Apr 28, 2021 Maintainer

Uh oh!

becky-gilbert Apr 28, 2021 Maintainer

Uh oh!

becky-gilbert Apr 28, 2021 Maintainer

Uh oh!

pcompen1 Apr 30, 2021 Author

pcompen1
Apr 15, 2021

Replies: 4 comments 2 replies

becky-gilbert
Apr 26, 2021
Maintainer

pcompen1
Apr 27, 2021
Author

becky-gilbert
Apr 28, 2021
Maintainer

becky-gilbert
Apr 28, 2021
Maintainer

becky-gilbert Apr 28, 2021
Maintainer

pcompen1 Apr 30, 2021
Author