Responsive Scaling using Canvas (or SVG) as an experiment container

[kalaschnik]

I am very new to jsPsych and I am still in process going through the docs. Anyway, I have a very particular requirment for my experiment, and I wanted to ask you what may be the best approach doing that in jsPsych.

1. I want to present different stimuli on the screen (can be just one or many). The entire experiment should scale in size depening on the browser size; yet, it should keep a predefined aspect ratio (e.g., 16:9, i.e., 1366×768 in screen resolution), and the stimuli should stay in place, relativly.
   An example implementation is here in SVG: https://jsfiddle.net/593yjx78/3/
2. The subject’s task is to click or touch stimuli to progress to next page, which has another composition of stimuli and placement
3. In the data I would need to know which object was clicked (I guess that is trivial), but I would also need the exact coordinates

Is there any clever path I should I go? I think it may be best to avoid placement with CSS, but instead define a canvas/svg container and performing the placment in there?

Any idea/diretion would be very helpful!

[jodeleeuw]

Hi @kalaschnik,

I think a custom plugin is probably the way to go here, and I agree that an SVG implementation makes sense. You could add click event handlers to the SVG shapes (relevant MDN docs).

I also think there's good potential here for a plugin that lots of people would be interested in. This kind of interaction is something that gets asked about periodically here. If you do develop a plugin please consider sharing it on jspsych-contrib!