Best practice to modularize an experiment

[cedricbatailler]

Hey y'all!

I'm currently refactoring some code and decided to make the switch to npm. The main motivation was to be able to sperate my source code into several files that should be easier to track.

For example, I was thinking of having a main.js file where I would initialize an instance of jsPsych and submodules where I would be describing several parts of the timeline (e.g., timeline-intro.js, timeline-main-block.js). In the timeline-xxx files, I was thinking about defining the different trials as well as a timeline--timeline which would then be exported to main.js.

So far, I have been able to do what I wanted to do and I can see how it would make maintaining the code easier. However, I'm facing a problem which make me doubt of my approach.

In some of the timeline-xxx files, I need to call the instance of jsPsych I initialized, when, for example, I want a trial to perform operation on the data (e.g., jsPsych.data.get().last(1) ; note that jsPsych was defined as jsPsych in main.js; jsPsych = initJsPsych()). However, when I am doing so, I get the migration error message. My understanding is that the operation is evaluated in a scope where my instance of jsPsych does not exist, which leads to the error.

I have been able to fix this problem by defining jsPsych with window.jsPsych = initJsPsych() and then it using window.jsPsych from the submodules (the timeline-xxx.js files), however, I have the feeling that this is suboptimal.

As a newbie (had to learn js by myself), there's probably a lot of things that I am not considering, and I'd be very happy to get your thoughts on this! Please let me know if I can be clearer or can provide additional informations!

Cheers, and thanks to the dev team for the amazing work,
Cedric

[jodeleeuw]

I'm going to tag @bjoluc in on this since I expect he will know the best approach.

I think my approach, FWIW, would be to export a function from each of the timeline-xxx.js files that generates the correct timeline and takes in an instance of jsPsych as an argument. Then you can create the jsPsych object in scope for the main.js file without attaching to window. But I wouldn't be surprised if there is a better way to do it that I'm not thinking of.

[bjoluc]

@jodeleeuw's factory function suggestion is right on the money! In case you are using jspsych-builder (or configured your bundler to use Babel), you may also find https://github.com/mbeaudru/modern-js-cheatsheet helpful 🙂

[kalaschnik]

How would an example of this look like? I am actually want to create sub files for every single trial and I struggle with those having a jsPsych reference.

For example, assume I got a file called fixation.js containing this code:

import HtmlKeyboardResponsePlugin from '@jspsych/plugin-html-keyboard-response';

export const fixation = {
  type: HtmlKeyboardResponsePlugin,
  stimulus: '<div style="font-size:4rem;">+</div>',
  choices: 'NO_KEYS',
  trial_duration: () =>
    jsPsych.randomization.sampleWithoutReplacement(
      [250, 500, 750, 1000, 1250, 1500, 1750, 2000],
      1
    )[0],
};

I would like to use in my experiment.js such as:

import { fixation } from './components/fixation';
// ...
timeline.push(fixation);

Howerer, I am not sure how do deal with jsPsych, since I cannot import in fixation.js which would cause an error, and I don’t want to expose jsPsych as a window object.

[cedricbatailler]

It makes total sense! Thank you for the swift response, it is greatly appreciated!

And the cheatsheet will also be super helpful! Thanks! It is a journey to update my ~2005-high school's understanding of javascript. 😉

[cedricbatailler]

Hi there,

Here, i'd edit fixation.js so it exports a function with a jsPsych instance argument, e.g.:

import HtmlKeyboardResponsePlugin from '@jspsych/plugin-html-keyboard-response';

export default function fixation (jsPsychInstance) {
  const fixation = {
    type: HtmlKeyboardResponsePlugin,
    stimulus: '<div style="font-size:4rem;">+</div>',
    choices: 'NO_KEYS',
    trial_duration: () =>
      jsPsychInstance.randomization.sampleWithoutReplacement(
        [250, 500, 750, 1000, 1250, 1500, 1750, 2000],
        1
      )[0],
  };

  return fixation;
}

And then, I would pass my jsPsych experiment in this function in experiment.js:

import { fixation } from './components/fixation';
// ...
const jsPsych = initJsPsych();
timeline.push(fixation(jsPsych));
jsPsych.run(timeline);

At least, this is what I ended up implementing. Works very well, especially regarding code recycling for new experiments.

[kalaschnik]

Thanks a lot! I came up with almost the same thing; Yet I moved the return keyword up, which removes the duplication of the function and const name. I also deleted default as my preference is to not use it at all.

import HtmlKeyboardResponsePlugin from '@jspsych/plugin-html-keyboard-response';

export const fixation = (jsp) => {
  return {
    type: HtmlKeyboardResponsePlugin,
    stimulus: '<div style="font-size:4rem;">+</div>',
    choices: 'NO_KEYS',
    trial_duration: () =>
      jsp.randomization.sampleWithoutReplacement(
        [250, 500, 750, 1000, 1250, 1500, 1750, 2000],
        1
      )[0],
  };
};