Customize Display Element Wrapper ID

[Jiazhouchen]

greetings,

I wanted to do a task where two simultaneously timelines displays in different divs is needed. I thought it'd be easy to just initiate two jsPsych objects and run different timelines (with additional code to control which display element is active). However, I encounter that no matter how many initJsPsych you call, they all draw on the same element. I did some digging and found that inside display element, there's a code to create an wrapper with ID hardcoded (line 451 in https://github.com/jspsych/jsPsych/blob/main/packages/jspsych/src/JsPsych.ts). Can anyone help me understand the decision to hard code the id? if the id is a variable, then two or more jsPsychs can run in parallel in different divs, right? Thank you!

[Shaobin-Jiang]

The solution would be to use display_element in initJsPsych. See documentation. Here is an example piece of code:

let create_div = function () {
    let div = document.createElement('div');
    div.style.width = '500px';
    div.style.height = '500px';
    document.body.append(div);
    return div;
}

let jspsych_1 = initJsPsych({display_element: create_div()});
let jspsych_2 = initJsPsych({display_element: create_div()});

const trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: 'Hello world'
};

jspsych_1.run([trial, trial]);
jspsych_2.run([trial, trial]);

However, even so, the code would not work properly; you will see that only one experiment is run. I think this is a bug with jsPsych. The problem lies here, as the querySelector method is run on document instead of the corresponding display element.

For now, your solution would be:

1. replace your jspsych library file with a downloaded copy of https://unpkg.com/jspsych@7.3.4/dist/index.browser.js
2. modify line 3862 from this.DOM_target = document.querySelector("#jspsych-content"); to this.DOM_target = this.DOM_container.querySelector("#jspsych-content");

[jodeleeuw]

Agree that this is a bug! Happy to merge a PR or I'll try to fix it shortly.

[Shaobin-Jiang]

@jodeleeuw Created PR #3254 for this