Drag to respond

Let participants drag stimuli into position over a scene and record where each one lands.

When to use it

Use this when the response you care about is a spatial arrangement rather than a choice: reconstructing remembered locations, arranging items by similarity, or placing tokens on a map or scene. A click response records a single point per trial, while a drag trial records the final resting position of every stimulus at once. Pick a sortable list instead when only the order of the items matters, and a custom HTML trial when you need in-trial scoring, snapping, or drop zones with their own logic.

Trial file

type	stimFormat	stim1	stim2	stim3	background	responseType
test	.png	token_cat	token_dog	token_bird	park_scene.png	drag
test	.png	token_car	token_bus	token_bike	street_scene.png	drag
test	.png	token_cup	token_plate	token_bowl	kitchen_scene.png	drag
test	.png	token_cat	token_car	token_cup	neutral_grid.png	drag

How it works

responseType set to drag makes every stimulus on the trial draggable and records their positions. The value is matched exactly and is case-sensitive: Drag matches nothing and the trial silently shows no response widget, so keep it lowercase.

stim1 to stim3 hold the draggable tokens as basenames; stimFormat supplies the .png extension and makes these image trials. The stimulus count is the highest filled slot, so keep the slots contiguous.

background names the scene, extension included, and does more than decorate: with draggable stimuli the drag limits default to the background image’s bounds, so the scene defines the playing field. The image is shown centred at its natural size, and only filename-like characters are read from the cell; a name containing parentheses is silently dropped and no background shows.

The trial ends when the participant saves the arrangement. On drag trials with a background, a save button appears automatically with the default NEXT label whenever button1 is not in use. Note that required has no effect on drag trials; the save button is governed by the min and max multiple-response settings in responseOptions instead.

Each stimulus’s final position is saved in the results as StimNo_HorizontalxVertical, a pixel offset from the centre: 1_359x3 means stimulus 1 ended 359 px right and 3 px down of centre, and 2_-290x-4 means stimulus 2 ended 290 px left and 4 px up.

Variations

• Swap the scene per row with background; the drag limits follow the new image’s bounds.
• Add or remove tokens per row with stim1 and up; slots beyond 6 work too, up to at least 12.
• Give the draggable tokens a grab cursor with cursor; each draggable stimulus uses the raw keyword as its own cursor, so pointer or crosshair work.
• Tag arrangements for analysis with condition1; the label is copied into every saved results row.