Creating a "grid" experiment

[kimelit]

Hello,

Thanks so much for the course!

I want to create an experiment that looks like a grid: squares that I can press on each of them to change its color/play a wav file/change the text label or jpg displayed on this square. Where should I start? Is there a package in jsPsych that could be useful for that?

Looking forward to hearing from you,
Thank you!

[conbainbridge]

The plugin I would use as a starting point to build a new plugin like this would depend on which of those features (if not all) was going to be used. If you are intending to have audio play, I think the audio-button-response plugin could be a good starting point, as it already has audio setup as well the buttons that you can then customize.

Then, I would explore Event Listeners for adding in the functionality you want. You will also want to move the existing click Event Listener, as it currently is used to advance to the next trial (in addition to logging the response). You would still need to add an additional button specifically for continuing to the next trial unless you want the plugin to be limited to advancing after a specified time only.

[kimelit]

@conbainbridge thanks! As of now I'm concerned with the display, that is how to create the visualization...

[conbainbridge]

This could be done in a few ways:

• If you want a grid that has a very strict layout (e.g. squares in a 5 x 5 layout), you could manually build it with a html table into your layout. If you want to get fancy with it, you can design it to add rows/columns based on the number of choices (by finding the length of the choices away using trial.choices.length)
• You could also try CSS grid layout
• For a responsive grid (blocks may change rows to accommodate changes in window size/dimensions, you could use CSS float

Hope this helps!

[kimelit]

ok, thanks..!