Sort images in a 3x2 grid

[n400peanuts]

Hi everyone,

I'm trying to figure out how to make a task where participants have to drag and drop images in a 3x2 grid.
Have anyone done already something similar? someone that could share with me their code and wisdom to help me understand how to proceed?

I think that the jspsych-free-sort plugin might do the trick, but as it is it's too "free" :-)
I'm not sure how to modify it, can you please help me understand what should be modified in the plugin?

I would need to:

1. superimpose a grid
2. record images' position at the beginning and the end of the task
3. record all moves
4. have a set of images below the grid that would represent the multiple choices at the beginning of the task
5. have an "attractor"-sort of thing that would adjust the image's position to fit perfectly into a cell when it's put on top of it.

I have no idea where to start, so any input is really appreciated.

Eva

[becky-gilbert]

Hi @n400peanuts! Have you seen the Drag and Drop API? I think this is what you'll want to use. You could build a new plugin with this API, based on the free-sort plugin. But note that the free-sort plugin uses the 'mousedown' events to track and record the X-Y position of each element, whereas you might be better off using the draggable element's 'ondrop' event to record each move.

If you get anywhere with building this plugin, please feel free to share your code and ask specific questions. This might make a cool addition to the library!

[iddogefen]

Hi @becky-gilbert!
I'm trying to create a plugin similar to the one that @n400peanuts was looking for.
I was able to produce a basic version of the task without jspsych (which is based on something similar to the Drag and Drop API you shared), but I have no idea how to integrate it as a plugin in jspsych along with the free-sort plugin as you proposed. I have a basic knowledge of javascript, but I'm having trouble understanding the behind-the-scenes of the plugins and how they work. I would love to know if there are any tools that can help me integrate the task I created into jspsych (I found one video, but it seems that it is no longer relevant for versions 7 and above). Of course, if I manage to produce a relevant plugin, I would also be happy to share it with the community.

Thank you!
Iddo

[jodeleeuw]

Hi @iddogefen,

The video that you've found is still mostly relevant for version 7. Some specific details have changed but the general concepts are still the same.

The plugin development documentation describes in some detail how plugins work.

There's also templates for plugin development in the jspsych-contrib repo.

[Andre3582]

Hi there!

I am looking for pretty much the same functionality at the moment. Have you made any progress you'd be willing to share, @n400peanuts?

@becky-gilbert, if you have any new info/tools/plugin to accomplish "dragging and dropping into a grid", that would be very much appreciated!

I've started working from the free-sort and vsl-grid-scene plugins but haven't got too far yet.

Thanks,
Andre

[n400peanuts]

Ehy there! In the end I gave up :( I don’t think I have the skills necessary for this task. It’s much more complex than what it seems

[Andre3582]

Hi @n400peanuts ,
Thanks for taking the time to reply! To come back to this: I've made some progress on my own. I found that Fabric.js is a very useful library for this task as it allows you to put objects on a canvas and manipulate them. So it's quite easy to integrate it in jsPsych's built-in canvas-keyboard-response pluging.

If you still need this functionality I can share what I end up with.

Cheers,
Andre

[kernel52]

Hi @Andre3582,

I am looking for something similar. I am trying to help a friend build an experiment where different photos would be placed in a grid.
I just started exploring this library, so if you are willing to share knowledge, I am happy to help you (if I can) with any issues down the line :)

thanks in advance,
Nikolas

[Andre3582]

Hi @kernel52, Nikolas,

If you have any specific questions I'd be happy to help out. Of course I could share the plugin I've created but if you just need photo's in a grid, my plugin is a bit too "overengineered" (several grids, lot's of drag & drop and checking behaviour, etc.).

I could try to get rid of the irrelevant stuff for you myself if you want, but I would need to know what you need a bit more precisely.

So in short, let me know what you're looking for and I'll try to help the best I can!

Cheers,
Andre

[kernel52]

Thank you very much for offering your help, I really really appreciate it :)

In essence there is the idea of having a defined amount of photos that the user needs to put in a grid (say 10 boxes).
And to be able to collect this information (order of photos) at the end.

I only started digging around the library, the free-sort seemed a good start, but somehow I got lost in the code...

I thought already of possible solutions mostly based on jQuery (draggable content, maybe a table for the grid, snap to the grid) but, if you could share some knowledge it would definitely help me kickstart my plugin :)

While waiting, I will be reading the plugin example that comes with package :)

[Andre3582]

Hi @kernel52!

Sorry I've kept you waiting for so long! I was caught up with other work. In case it still might be of some use here's the plugin I wrote for displaying and dragging/dropping images in a grid. https://github.com/Andre3582/Miscellaneous/blob/main/jspsych-copying-task-img.js

[kernel52]

Thank you Andre, no problem at all! I understand completely! I have made some progress, but it is useful to see what other people have done, might be that your solution is more elegant than mine 😉 Thanks a lot! I'll report back as soon as I find the time to put my hands on it

…

________________________________ From: Andre3582 ***@***.***> Sent: Tuesday, April 20, 2021 5:24 PM To: jspsych/jsPsych ***@***.***> Cc: kernel52 ***@***.***>; Mention ***@***.***> Subject: Re: [jspsych/jsPsych] Sort images in a 3x2 grid (#1069) Hi! Sorry I've kept you waiting for so long! I was caught up with other work. In case it still might be of some use here's the plugin I wrote for displaying and dragging/dropping images in a grid. https://github.com/Andre3582/Miscellaneous/blob/main/jspsych-copying-task-img.js<url> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1069 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABBBVIDYBJ35OEJEKX7XZLLTJWMDPANCNFSM4RWBYNUQ>.

[Andre3582]

Sure thing! If you want to quickly see what the plugin can do (visually) here's a demo: https://b2tsnequr2.cognition.run/. (it's a copying task where drag and drop the items to the emtpy grid to recreate the grid on the left).

One more thing I need to mention is that the plugin depends on the Fabric.js library.

[iddogefen]

Hi @Andre3582!
The plugin you created looks great, thanks for sharing!
I am trying to work with it (in jspsych version 6.3 because it seems that some changes have been made since then) but I get an error "fabric is not defined" (I did downloaded a fabric.js folder and put in the project folder).

I wonder if there is a command missing that calls fabric.js, I would appreciate your help in understanding what I am doing wrong, or if you could share an example of a working file.

Thank you so much!
Iddo

[jodeleeuw]

You'll probably need to load the fabric.js in a <script> tag, similar to how you would load jspsych or a plugin file.

[Andre3582]

Hey,
Glad you found it useful.
Did Josh's tip help you out?
Btw, the plugin i put in jspsych-contib is made for 7.x,

Let me know if you need any additional help.
Cheers,
Andre