Create grid experiment but only show participants one stimulus at a time

[axia90]

Hi,

I'd like to create an experiment where the stimulus space is organized in a 3x3 grid, but is not visible to participants. Participants only see one stimulus at a time. The start point is random and you can click a button to go in any direction in the grid, including diagonally. Then, the trial updates to show the new stimulus only. It seems that I would need to use event listeners but beyond that, I am a bit stumped. Any help would be appreciated! Thanks!

[sophief10]

Hi there! I think you could take lots of different approaches to creating your experiment. Can you include some code in your question? Even if the code does not work, it could help us to see a rough outline of the kind of timeline you are trying to build.

It may help to review HTML, CSS, and JavaScript if you are unfamiliar with these languages. If you don't know, many programmers consider these languages to be the core components of webpage design. HTML describes the structure of a webpage and will allow you to construct the basic elements you need, such as images and buttons. CSS helps you control the visual appearance of those elements, and JavaScript controls how the elements behave and interact with the user. You can use all of these languages in a jsPsych document.

You are right that you will need event listeners for your webpage to respond to users clicking a button. There are many different jsPsych plugins that would allow you to design such a page, such as canvas-button-response.

You can also create your own plugin from scratch if you want maximum control over what your webpage does. Remember that the plugins you use will depend on what you want your webpage to do and what kind of data you want to collect.

Hopefully, that helps. However, if you can give a more specific description of what you are trying to do and what you have tried, I may be able to give more specific advice!

[becky-gilbert]

Hi @axia90, would the participants be using the keyboard keys to make their responses?

if I were creating your experiment, I would either create my own plugin or use the html keyboard response plugin to show each part of the trial. You would use HTML in the stimulus parameter to arrange the (hidden) grid and show whatever stimulus needs to go in one of the cells. There are a few ways to set up the HTML grid - one option is to use a table element: https://www.w3schools.com/html/html_tables.asp. The choices parameter would be an array of the keys that the participant is allowed to press to move in each direction.

You would also need to use dynamic parameters to control the stimulus for each trial, based on your random starting position or the participant's response from the previous trial.

One tricky thing is that you might want to ignore the keyboard key presses that correspond to a move that is not possible on that trial, such as 'move left' when the stimulus is already in the farthest left position. One solution would be to also have the choices parameter be dynamic, so that the keyboard choices are dependent on the current stimulus position.

I hope this helps! Feel free to ask questions or post your code if you want further guidance.