mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
350 lines
12 KiB
JavaScript
350 lines
12 KiB
JavaScript
/**
|
|
* jspsych-free-sort
|
|
* plugin for drag-and-drop sorting of a collection of images
|
|
* Josh de Leeuw
|
|
*
|
|
* documentation: docs.jspsych.org
|
|
*/
|
|
|
|
|
|
jsPsych.plugins['free-sort'] = (function() {
|
|
|
|
var plugin = {};
|
|
|
|
jsPsych.pluginAPI.registerPreload('free-sort', 'stimuli', 'image');
|
|
|
|
plugin.info = {
|
|
name: 'free-sort',
|
|
description: '',
|
|
parameters: {
|
|
stimuli: {
|
|
type: jsPsych.plugins.parameterType.STRING,
|
|
pretty_name: 'Stimuli',
|
|
default: undefined,
|
|
array: true,
|
|
description: 'items to be displayed.'
|
|
},
|
|
stim_height: {
|
|
type: jsPsych.plugins.parameterType.INT,
|
|
pretty_name: 'Stimulus height',
|
|
default: 100,
|
|
description: 'Height of items in pixels.'
|
|
},
|
|
stim_width: {
|
|
type: jsPsych.plugins.parameterType.INT,
|
|
pretty_name: 'Stimulus width',
|
|
default: 100,
|
|
description: 'Width of items in pixels'
|
|
},
|
|
scale_factor: {
|
|
type: jsPsych.plugins.parameterType.FLOAT,
|
|
pretty_name: 'Stimulus scaling factor',
|
|
default: 1.5,
|
|
description: 'How much larger to make the stimulus while moving (1 = no scaling)'
|
|
},
|
|
sort_area_height: {
|
|
type: jsPsych.plugins.parameterType.INT,
|
|
pretty_name: 'Sort area height',
|
|
default: 800,
|
|
description: 'The height of the container that subjects can move the stimuli in.'
|
|
},
|
|
sort_area_width: {
|
|
type: jsPsych.plugins.parameterType.INT,
|
|
pretty_name: 'Sort area width',
|
|
default: 800,
|
|
description: 'The width of the container that subjects can move the stimuli in.'
|
|
},
|
|
sort_area_shape: {
|
|
type: jsPsych.plugins.parameterType.STRING,
|
|
pretty_name: 'Sort area shape',
|
|
options: ['square','ellipse'],
|
|
default: 'ellipse',
|
|
description: 'The shape of the sorting area'
|
|
},
|
|
prompt: {
|
|
type: jsPsych.plugins.parameterType.STRING,
|
|
pretty_name: 'Prompt',
|
|
default: '',
|
|
description: 'It can be used to provide a reminder about the action the subject is supposed to take.'
|
|
},
|
|
prompt_location: {
|
|
type: jsPsych.plugins.parameterType.SELECT,
|
|
pretty_name: 'Prompt location',
|
|
options: ['above','below'],
|
|
default: 'above',
|
|
description: 'Indicates whether to show prompt "above" or "below" the sorting area.'
|
|
},
|
|
button_label: {
|
|
type: jsPsych.plugins.parameterType.STRING,
|
|
pretty_name: 'Button label',
|
|
default: 'continue',
|
|
description: 'The text that appears on the button to continue to the next trial.'
|
|
}
|
|
}
|
|
}
|
|
|
|
plugin.trial = function(display_element, trial) {
|
|
|
|
var start_time = performance.now();
|
|
|
|
let html =
|
|
'<div '+
|
|
'id="jspsych-free-sort-arena" '+
|
|
'class="jspsych-free-sort-arena" '+
|
|
'style="position: relative; width:'+trial.sort_area_width+'px; height:'+trial.sort_area_height+'px; margin: auto; line-height: 0em"</div>';
|
|
|
|
// another div for border
|
|
html += '<div '+
|
|
'id="jspsych-free-sort-border" '+
|
|
'class="jspsych-free-sort-border" '+
|
|
'style="position: relative; width:'+trial.sort_area_width*.94+'px; height:'+trial.sort_area_height*.94+'px; border:'+trial.sort_area_height*.03+'px solid #fc9272; margin: auto; line-height: 0em; ';
|
|
|
|
if ( trial.sort_area_shape == "ellipse") {
|
|
html += 'webkit-border-radius: 50%; moz-border-radius: 50%; border-radius: 50%"></div>'
|
|
} else {
|
|
html += 'webkit-border-radius: 0%; moz-border-radius: 0%; border-radius: 0%"></div>'
|
|
}
|
|
|
|
if ( trial.prompt ) {
|
|
trial.prompt = '<br>'
|
|
}
|
|
else {
|
|
trial.prompt = ''
|
|
}
|
|
|
|
// variable that has the prompt text, counter and button
|
|
const html_text = '<div style="line-height: 0em">' + trial.prompt +
|
|
'<p id="jspsych-free-sort-counter" style="display: inline-block; line-height: 1em">You still need to place ' + trial.stimuli.length + ' items inside the arena.</p>'+
|
|
'<button id="jspsych-free-sort-done-btn" class="jspsych-btn" '+
|
|
'style="display: none; margin: 5px; padding: 5px; text-align: center; font-weight: bold; font-size: 18px; vertical-align:baseline; line-height: 1em">' + trial.button_label+'</button></div>'
|
|
|
|
// position prompt above or below
|
|
if (trial.prompt_location == "below") {
|
|
html += html_text
|
|
} else {
|
|
html = html_text + html
|
|
}
|
|
|
|
console.log(html)
|
|
display_element.innerHTML = html;
|
|
|
|
// store initial location data
|
|
let init_locations = [];
|
|
|
|
// determine number of rows and colums, must be a even number
|
|
let num_rows = Math.ceil(Math.sqrt(trial.stimuli.length))
|
|
if ( num_rows % 2 != 0) {
|
|
num_rows = num_rows + 1
|
|
}
|
|
|
|
// compute coords for left and right side of arena
|
|
let r_coords = [];
|
|
let l_coords = [];
|
|
for (const x of make_arr(0, trial.sort_area_width - trial.stim_width, num_rows) ) {
|
|
for (const y of make_arr(0, trial.sort_area_height - trial.stim_height, num_rows) ) {
|
|
if ( x > ( (trial.sort_area_width - trial.stim_width) * .5 ) ) {
|
|
//r_coords.push({ x:x, y:y } )
|
|
r_coords.push({ x:x + (trial.sort_area_width) * .5 , y:y });
|
|
} else {
|
|
l_coords.push({ x:x - (trial.sort_area_width) * .5 , y:y });
|
|
//l_coords.push({ x:x, y:y } )
|
|
}
|
|
}
|
|
}
|
|
|
|
// repeat coordinates until you have enough coords (may be obsolete)
|
|
while ( ( r_coords.length + l_coords.length ) < trial.stimuli.length ) {
|
|
r_coords = r_coords.concat(r_coords)
|
|
l_coords = l_coords.concat(l_coords)
|
|
}
|
|
// reverse left coords, so that coords closest to arena is used first
|
|
l_coords = l_coords.reverse()
|
|
|
|
// shuffle stimuli, so that starting positions are random
|
|
trial.stimuli = shuffle(trial.stimuli);
|
|
|
|
let inside = []
|
|
for (let i = 0; i < trial.stimuli.length; i++) {
|
|
let coords = []
|
|
if ( (i % 2) == 0 ) {
|
|
coords = r_coords[Math.floor(i * .5)];
|
|
} else {
|
|
coords = l_coords[Math.floor(i * .5)];
|
|
}
|
|
display_element.querySelector("#jspsych-free-sort-arena").innerHTML += '<img '+
|
|
'src="'+trial.stimuli[i]+'" '+
|
|
'data-src="'+trial.stimuli[i]+'" '+
|
|
'class="jspsych-free-sort-draggable" '+
|
|
'draggable="false" '+
|
|
'id="'+i+'" '+
|
|
'style="position: absolute; cursor: move; width:'+trial.stim_width+'px; height:'+trial.stim_height+'px; top:'+coords.y+'px; left:'+coords.x+'px;">'+
|
|
'</img>';
|
|
|
|
init_locations.push({
|
|
"src": trial.stimuli[i],
|
|
"x": coords.x,
|
|
"y": coords.y
|
|
});
|
|
inside.push(false);
|
|
}
|
|
// moves within a trial
|
|
let moves = [];
|
|
|
|
// are objects currently inside
|
|
let cur_in = false
|
|
|
|
// draggable items
|
|
const draggables = display_element.querySelectorAll('.jspsych-free-sort-draggable');
|
|
|
|
// button (will show when all items are inside) and border (will change color)
|
|
const border = display_element.querySelector("#jspsych-free-sort-border")
|
|
const button = display_element.querySelector('#jspsych-free-sort-done-btn')
|
|
|
|
for(let i=0; i<draggables.length; i++){
|
|
draggables[i].addEventListener('mousedown', function(event){
|
|
let x = event.pageX - event.currentTarget.offsetLeft;
|
|
let y = event.pageY - event.currentTarget.offsetTop - window.scrollY;
|
|
let elem = event.currentTarget;
|
|
elem.style.transform = "scale(" + trial.scale_factor + "," + trial.scale_factor + ")";
|
|
let mousemoveevent = function(e){
|
|
cur_in = inside_ellipse(e.clientX - x, e.clientY - y,
|
|
trial.sort_area_width*.5 - trial.stim_width*.5, trial.sort_area_height*.5 - trial.stim_height*.5,
|
|
trial.sort_area_width*.5, trial.sort_area_height*.5,
|
|
trial.sort_area_shape == "square");
|
|
elem.style.top = Math.min(trial.sort_area_height - trial.stim_height*.5, Math.max(- trial.stim_height*.5, (e.clientY - y))) + 'px';
|
|
elem.style.left = Math.min(trial.sort_area_width*1.5 - trial.stim_width, Math.max(-trial.sort_area_width*.5, (e.clientX - x)))+ 'px';
|
|
|
|
// modify border while items is being moved
|
|
if (cur_in) {
|
|
border.style.borderColor = "#a1d99b";
|
|
border.style.background = "None";
|
|
} else {
|
|
border.style.borderColor = "#fc9272";
|
|
border.style.background = "None";
|
|
}
|
|
|
|
// replace in overall array, grab idx from item id
|
|
inside.splice(elem.id, true, cur_in)
|
|
|
|
// modify text and background if all items are inside
|
|
if (inside.every(Boolean)) {
|
|
border.style.background = "#a1d99b";
|
|
button.style.display = "inline-block";
|
|
display_element.querySelector("#jspsych-free-sort-counter").innerHTML = "All items placed. Feel free to reposition any item if necessary. Otherwise, click here to "
|
|
} else {
|
|
border.style.background = "none";
|
|
button.style.display = "none";
|
|
if ( (inside.length - inside.filter(Boolean).length) > 1 ) {
|
|
display_element.querySelector("#jspsych-free-sort-counter").innerHTML = "You still need to place " + (inside.length - inside.filter(Boolean).length) + " items inside the arena."
|
|
} else {
|
|
display_element.querySelector("#jspsych-free-sort-counter").innerHTML = "You still need to place " + (inside.length - inside.filter(Boolean).length) + " item inside the arena."
|
|
}
|
|
}
|
|
}
|
|
document.addEventListener('mousemove', mousemoveevent);
|
|
|
|
var mouseupevent = function(e){
|
|
document.removeEventListener('mousemove', mousemoveevent);
|
|
elem.style.transform = "scale(1, 1)";
|
|
if (inside.every(Boolean)) {
|
|
border.style.background = "#a1d99b";
|
|
border.style.borderColor = "#a1d99b";
|
|
} else {
|
|
border.style.background = "none";
|
|
border.style.borderColor = "#fc9272";
|
|
}
|
|
moves.push({
|
|
"src": elem.dataset.src,
|
|
"x": elem.offsetLeft,
|
|
"y": elem.offsetTop
|
|
});
|
|
document.removeEventListener('mouseup', mouseupevent);
|
|
}
|
|
document.addEventListener('mouseup', mouseupevent);
|
|
});
|
|
}
|
|
|
|
display_element.querySelector('#jspsych-free-sort-done-btn').addEventListener('click', function(){
|
|
if (inside.every(Boolean)) {
|
|
const end_time = performance.now();
|
|
const rt = end_time - start_time;
|
|
// gather data
|
|
const items = display_element.querySelectorAll('.jspsych-free-sort-draggable');
|
|
// get final position of all items
|
|
let final_locations = [];
|
|
for(let i=0; i<items.length; i++){
|
|
final_locations.push({
|
|
"src": items[i].dataset.src,
|
|
"x": parseInt(items[i].style.left),
|
|
"y": parseInt(items[i].style.top)
|
|
});
|
|
}
|
|
|
|
const trial_data = {
|
|
"init_locations": JSON.stringify(init_locations),
|
|
"moves": JSON.stringify(moves),
|
|
"final_locations": JSON.stringify(final_locations),
|
|
"rt": rt
|
|
};
|
|
|
|
// advance to next part
|
|
display_element.innerHTML = '';
|
|
jsPsych.finishTrial(trial_data);
|
|
}
|
|
});
|
|
};
|
|
|
|
// helper functions
|
|
|
|
function shuffle(array) {
|
|
// define three variables
|
|
let cur_idx = array.length, tmp_val, rand_idx;
|
|
|
|
// While there remain elements to shuffle...
|
|
while (0 !== cur_idx) {
|
|
// Pick a remaining element...
|
|
rand_idx = Math.floor(Math.random() * cur_idx);
|
|
cur_idx -= 1;
|
|
|
|
// And swap it with the current element.
|
|
tmp_val = array[cur_idx];
|
|
array[cur_idx] = array[rand_idx];
|
|
array[rand_idx] = tmp_val;
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function make_arr(startValue, stopValue, cardinality) {
|
|
const step = (stopValue - startValue) / (cardinality - 1);
|
|
let arr = [];
|
|
for (let i = 0; i < cardinality; i++) {
|
|
arr.push(startValue + (step * i));
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
function inside_ellipse(x, y, x0, y0, rx, ry, square=false) {
|
|
const results = [];
|
|
if (square) {
|
|
result = ( Math.abs(x - x0) <= rx ) && ( Math.abs(y - y0) <= ry )
|
|
} else {
|
|
result = (( x - x0 ) * ( x - x0 )) * (ry * ry) + ((y - y0) * ( y - y0 )) * ( rx * rx ) <= ( (rx * rx) * (ry * ry) )
|
|
}
|
|
return result
|
|
}
|
|
|
|
/*
|
|
un-used functions (that might be useful for something else)
|
|
|
|
function random_coordinate(max_width, max_height) {
|
|
const rnd_x = Math.floor(Math.random() * (max_width - 1));
|
|
const rnd_y = Math.floor(Math.random() * (max_height - 1));
|
|
return {
|
|
x: rnd_x,
|
|
y: rnd_y
|
|
};
|
|
}
|
|
*/
|
|
return plugin;
|
|
})();
|