Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customize Display Element Wrapper ID #3253

Closed
Jiazhouchen opened this issue Mar 16, 2024 · 3 comments · May be fixed by #3254
Closed

Customize Display Element Wrapper ID #3253

Jiazhouchen opened this issue Mar 16, 2024 · 3 comments · May be fixed by #3254

Comments

@Jiazhouchen
Copy link

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
Copy link
Contributor

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/[email protected]/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
Copy link
Member

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

@Shaobin-Jiang
Copy link
Contributor

@jodeleeuw Created PR #3254 for this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants