How to adapt animation plugin to show stimuli at different durations?

[t-09]

Hi everybody! I am designing an object-relocation task where some black rectangles are first present at different locations on the screen (encoding phase) and then participants are asked to relocate them in their original position (test phase). Now, during the encoding phase I should superimpose on each black rectangle an image for 16ms and a noisy mask for 250ms. I was thinking to use the animation plugin to present both image and mask in sequence, but they should have different duration. I am presenting my stimuli as elements. How can I adapt the plugin to have different durations for each stimulus in the sequence?
Any help is appreciated! :)

[jodeleeuw]

Hi @t-09,

A heads up here that consistent 16ms presentation times require some changes from the usual way that jsPsych shows stimuli.

In order to get this level of precision, you'll have to process the animation in a requestAnimationFrame() loop. This might require a slightly larger than expected change to the animation plugin.

I believe the jspsych-psychophysics plugin can do this already, so I'd start by exploring whether it has the functionality you need for the task.

[t-09]

Hi @jodeleeuw thank you for your reply!

I've already considered the jspsych-psychophysics plugin for the encoding phase of my experiment but by using it in the sequence with the jspsych-free-sort plugin (for the test phase) the area of the screen where stimuli are presented is slightly tilted down and this affect how the final coordinates of the stimuli are computed. I believe that this is due to the fact that jspsych-psychophysics shows the stimuli in a canvas element, whereas the jspsych-free-sort does not. I have also tried to modify the jspsych-psychophysics pluging directly by forcing the margins of the jspsych-content which embeds the canvas to 0. This is how I adapted the code:

const elm_jspsych_content = document.getElementById('jspsych-content')

const style_jspsych_content = window.getComputedStyle(elm_jspsych_content); // stock

// console.log(style_jspsych_content)

const default_maxWidth = style_jspsych_content.maxWidth;

elm_jspsych_content.style.maxWidth = 'none'; // The default value is '95%'. To fit the window.

elm_jspsych_content.style.marginTop = "0px"

elm_jspsych_content.style.marginBottom = "0px"

let new_html = '<canvas id="myCanvas" class="jspsych-canvas" width=' + trial.canvas_width+'px height=' + trial.canvas_height+'px style="background-color:' + trial.background_color + '; margin-top:0px; margin-bottom:0px; padding:0px"></canvas>';

but when I tried to use this in sequence with a free-sort trial in which the stimuli should have been at the same position, I noticed that some stimuli were completely relocated without any indication (yeah, it's weird!).
As a last attempt, therefore, I was trying to avoid all these issues I thought to not use the canvas elements and check whether the area remained constant between the two trials.
I hope that what I wrote makes some sense to you, sorry to be so oversimplified but I am not so much into javascript coding.

[jodeleeuw]

It sounds like these issues might be resolvable with some custom CSS in your HTML document. Can you post a minimal example online so I can take a look at the issue?

[t-09]

Hi @jodeleeuw sorry for my late reply!

I managed to resolve the issue by slightly modifying line 705 of the psychophysics plugin:
let new_html = '<canvas id="myCanvas" class="jspsych-canvas" width=' + trial.canvas_width+'px height=' + trial.canvas_height+'px style="background-color:' + trial.background_color + '; margin-top:0px; margin-bottom:0px; padding:0px; display:block"></canvas>';

Now the window size between the psychophysics and the free-sort trials is consistent and everything works fine!
Thank you for your availability! :)