HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 03:00:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

things drag now!

Browse Source
This commit is contained in:
cchang-vassar 2025-05-04 23:55:30 -07:00
parent 85ad7d40da
commit 1d6e191c3d
8 changed files with 1481 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
examples/jspsych-free-sort.html
View File

@ -5,107 +5,106 @@
<script src="../packages/plugin-free-sort/dist/index.browser.js"></script> <script src="../packages/plugin-free-sort/dist/index.browser.js"></script>
<script src="../packages/plugin-canvas-keyboard-response/dist/index.browser.js"></script> <script src="../packages/plugin-canvas-keyboard-response/dist/index.browser.js"></script>
<script src="../packages/plugin-preload/dist/index.browser.js"></script> <script src="../packages/plugin-preload/dist/index.browser.js"></script>
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css"> <link rel="stylesheet" href="../packages/jspsych/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>
var jsPsych = initJsPsych({ var jsPsych = initJsPsych({
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
} }
}); });
var preload = { var preload = {
type: jsPsychPreload, type: jsPsychPreload,
auto_preload: true auto_preload: true
}; };
var trial_1 = { var trial_1 = {
type: jsPsychFreeSort, type: jsPsychFreeSort,
stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'], stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
stim_height: 120, stim_height: 120,
stim_width: 160, stim_width: 160,
sort_area_height: 500, sort_area_height: 500,
sort_area_width: 500, sort_area_width: 500,
prompt: 'Please group similar expressions together. ', prompt: 'Please group similar expressions together. ',
column_spread_factor: .5 column_spread_factor: .5
}; };
var trial_2 = { var trial_2 = {
type: jsPsychFreeSort, type: jsPsychFreeSort,
stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'], stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
stim_height: 120, stim_height: 120,
stim_width: 160, stim_width: 160,
prompt: '<p>Arrange the faces.</p>', prompt: '<p>Arrange the faces.</p>',
prompt_location: "below", prompt_location: "below",
sort_area_height: 400, sort_area_height: 400,
sort_area_width: 500, sort_area_width: 500,
sort_area_shape: "square", sort_area_shape: "square",
scale_factor: 1.2, scale_factor: 1.2,
border_color_in: '#DCDCDC', border_color_in: '#DCDCDC',
border_color_out: 'red' border_color_out: 'red'
}; };
var trial_3 = { var trial_3 = {
type: jsPsychCanvasKeyboardResponse, type: jsPsychCanvasKeyboardResponse,
stimulus: function(c) { stimulus: function(c) {
c.style.border = "5px solid #A9A9A9"; c.style.border = "5px solid #A9A9A9";
// present images on a canvas at specific locations // present images on a canvas at specific locations
var ctx = c.getContext('2d'); var ctx = c.getContext('2d');
var img1 = new Image(); var img1 = new Image();
var img2 = new Image(); var img2 = new Image();
var img3 = new Image(); var img3 = new Image();
img1.src = 'img/1.gif'; img1.src = 'img/1.gif';
img2.src = 'img/2.gif'; img2.src = 'img/2.gif';
img3.src = 'img/3.gif'; img3.src = 'img/3.gif';
img1.addEventListener('load', function() { img1.addEventListener('load', function() {
ctx.drawImage(img1, 0, 0, 90, 90); ctx.drawImage(img1, 0, 0, 90, 90);
}, false); }, false);
img2.addEventListener('load', function() { img2.addEventListener('load', function() {
ctx.drawImage(img2, 400, 400, 90, 90); ctx.drawImage(img2, 400, 400, 90, 90);
}, false); }, false);
img3.addEventListener('load', function() { img3.addEventListener('load', function() {
ctx.drawImage(img3, 300, 100, 90, 90); ctx.drawImage(img3, 300, 100, 90, 90);
}, false); }, false);
}, },
canvas_size: [500,500], canvas_size: [500,500],
prompt: "Memorize the image locations (5s).", prompt: "Memorize the image locations (5s).",
choices: "NO_KEYS", choices: "NO_KEYS",
trial_duration: 5000 trial_duration: 5000
}; };
var trial_4 = { var trial_4 = {
type: jsPsychFreeSort, type: jsPsychFreeSort,
stimuli: ['img/1.gif','img/2.gif','img/3.gif'], stimuli: ['img/1.gif','img/2.gif','img/3.gif'],
stim_height: 90, stim_height: 90,
stim_width: 90, stim_width: 90,
scale_factor: 1.0, scale_factor: 1.0,
prompt: '<p>Where were the images?</p>', prompt: '<p>Where were the images?</p>',
prompt_location: 'below', prompt_location: 'below',
sort_area_shape: "square", sort_area_shape: "square",
sort_area_height: 500, sort_area_height: 500,
sort_area_width: 500, sort_area_width: 500,
change_border_background_color: false, change_border_background_color: false,
border_width: 5, border_width: 5,
counter_text_unfinished: "Not done yet...", counter_text_unfinished: "Not done yet...",
counter_text_finished: "Done!", counter_text_finished: "Done!",
column_spread_factor: .5 column_spread_factor: .5
}; };
var trial_5 = { var trial_5 = {
type: jsPsychFreeSort, type: jsPsychFreeSort,
stimuli: ['img/4.gif','img/5.gif','img/6.gif'], stimuli: ['img/4.gif','img/5.gif','img/6.gif'],
prompt: '<p>Arrange the images.</p><p>Images start at random locations inside the sort area.</p>', prompt: '<p>Arrange the images.</p><p>Images start at random locations inside the sort area.</p>',
change_border_background_color: false, change_border_background_color: false,
border_width: 3, border_width: 3,
counter_text_unfinished: "", counter_text_unfinished: "",
counter_text_finished: "", counter_text_finished: "",
stim_starts_inside: true, stim_starts_inside: true,
sort_area_shape: "square" sort_area_shape: "square"
}; };
jsPsych.run([preload, trial_1, trial_2, trial_3, trial_4, trial_5]);
jsPsych.run([preload, trial_1, trial_2, trial_3, trial_4, trial_5]);
</script> </script>
</html> </html>

BIN
packages/plugin-free-sort-ordered/assets/blue-rec.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 419 B

1360
packages/plugin-free-sort-ordered/assets/free_sort_ordered_plugin-example_stimuli.ai Normal file
View File

File diff suppressed because one or more lines are too long

BIN
packages/plugin-free-sort-ordered/assets/green-rec.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 B

BIN
packages/plugin-free-sort-ordered/assets/red-rec.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 B

11
packages/plugin-free-sort-ordered/examples/index.html
View File

@ -8,6 +8,7 @@
<script src="../dist/index.browser.js"></script> --> <script src="../dist/index.browser.js"></script> -->
<script src="../dist/index.browser.js"></script> <script src="../dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css" />
<link rel="stylesheet" href="../src/styles.css" />
</head> </head>
<body></body> <body></body>
@ -16,10 +17,10 @@
const trial = { const trial = {
type: jsPsychPluginFreeSortOrdered, type: jsPsychPluginFreeSortOrdered,
stimuli: [ stimulus: [
'<div style="width: 200px; height: 100px; background-color: red;"></div>', '../assets/blue-rec.png',
'<div style="width: 200px; height: 100px; background-color: blue;"></div>', '../assets/green-rec.png',
'<div style="width: 200px; height: 100px; background-color: green;"></div>' '../assets/red-rec.png',
], ],
stim_height: 100, stim_height: 100,
stim_width: 200, stim_width: 200,
@ -28,7 +29,7 @@
holding_area_height: 500, holding_area_height: 500,
holding_area_width: 1000, holding_area_width: 1000,
prompt: 'Drag and drop the boxes to sort them in order.', prompt: 'Drag and drop the boxes to sort them in order.',
prompt_location: 'top', prompt_location: 'above',
button_label: 'Continue', button_label: 'Continue',
include_counter: true, include_counter: true,
}; };

35
packages/plugin-free-sort-ordered/src/index.ts
View File

@ -10,7 +10,7 @@ const info = <const>{
version: version, version: version,
parameters: { parameters: {
/** Each element of this array is an image path or SVG code. */ /** Each element of this array is an image path or SVG code. */
stimuli: { stimulus: {
type: ParameterType.INT | ParameterType.HTML_STRING, type: ParameterType.INT | ParameterType.HTML_STRING,
default: undefined, default: undefined,
array: true, array: true,
@ -144,23 +144,24 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
trial(display_element: HTMLElement, trial: TrialType<Info>) { trial(display_element: HTMLElement, trial: TrialType<Info>) {
var start_time = performance.now(); var start_time = performance.now();
var stimulus = trial.stimulus;
// holding area // holding area
const holding_area_html = ` const holding_area_html = `
<div <div
id="jspsych-free-sort-ordered-holding-area" id="jspsych-free-sort-ordered-holding-area"
class="jspsych-free-sort-ordered-holding-area" class="jspsych-free-sort-ordered-holding-area"
style="position: relative; width: ${trial.holding_area_width}px; height: ${trial.holding_area_height}px; background-color: #CCCCCC; margin: auto;" style="position: relative; width: ${trial.holding_area_width}px; height: ${trial.holding_area_height}px; background-color: #CCCCCC; margin: auto;">
/>`; </div>`;
// counter text if included // counter text if included
const counter_html = ` const counter_html = `
<p id="jspsych-free-sort-ordered-counter" style="display: inline-block;"> <p id="jspsych-free-sort-ordered-counter" style="display: inline-block;">
${trial.include_counter ? get_counter_text(trial.stimuli.length) : ""} ${trial.include_counter ? get_counter_text(stimulus.length) : ""}
</p>`; </p>`;
// container for the boxes // container for the target boxes
let box_grid_html = ` let box_container_html = `
<div <div
id="jspsych-free-sort-ordered-box-grid" id="jspsych-free-sort-ordered-box-grid"
class="jspsych-free-sort-ordered-box-grid" class="jspsych-free-sort-ordered-box-grid"
@ -168,15 +169,15 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
>`; >`;
// create boxes for each stimulus // create boxes for each stimulus
for (let i = 0; i < trial.stimuli.length; i++) { for (let i = 0; i < stimulus.length; i++) {
box_grid_html += ` box_container_html += `
<div <div
id="jspsych-free-sort-ordered-box-${i}" id="jspsych-free-sort-ordered-box-${i}"
class="jspsych-free-sort-ordered-box" class="jspsych-free-sort-ordered-box"
style="width: ${trial.stim_width}px; height: ${trial.stim_height}px; background-color: #FFFFFF; border: 2px solid #000000; margin: 5px;" style="width: ${trial.stim_width}px; height: ${trial.stim_height}px; background-color: #FFFFFF; border: 2px solid #000000; margin: 5px;"
></div>`; ></div>`;
} }
box_grid_html += "</div>"; box_container_html += "</div>";
// prompt text (and counter if included) // prompt text (and counter if included)
const prompt_counter_html = ` const prompt_counter_html = `
@ -193,8 +194,8 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
// combine all HTML // combine all HTML
let html = let html =
trial.prompt_location === "above" trial.prompt_location === "above"
? prompt_counter_html + holding_area_html + box_grid_html + button_html ? prompt_counter_html + holding_area_html + box_container_html + button_html
: holding_area_html + box_grid_html + prompt_counter_html + button_html; : holding_area_html + box_container_html + prompt_counter_html + button_html;
display_element.innerHTML = html; display_element.innerHTML = html;
@ -203,7 +204,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
// store locations of the boxes // store locations of the boxes
let boxCoordinates = []; let boxCoordinates = [];
for (let i = 0; i < trial.stimuli.length; i++) { for (let i = 0; i < stimulus.length; i++) {
const box = document.getElementById(`jspsych-free-sort-ordered-box-${i}`); const box = document.getElementById(`jspsych-free-sort-ordered-box-${i}`);
if (box) { if (box) {
const rect = box.getBoundingClientRect(); const rect = box.getBoundingClientRect();
@ -229,7 +230,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
}); });
// place each stimulus in initial locations // place each stimulus in initial locations
for (let i = 0; i < trial.stimuli.length; i++) { for (let i = 0; i < stimulus.length; i++) {
var coords = FreeSortPluginUtils.random_coordinate( var coords = FreeSortPluginUtils.random_coordinate(
trial.holding_area_width - trial.stim_width, trial.holding_area_width - trial.stim_width,
trial.holding_area_height - trial.stim_height trial.holding_area_height - trial.stim_height
@ -239,10 +240,10 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
display_element.querySelector("#jspsych-free-sort-ordered-holding-area").innerHTML += display_element.querySelector("#jspsych-free-sort-ordered-holding-area").innerHTML +=
"<img " + "<img " +
'src="' + 'src="' +
trial.stimuli[i] + stimulus[i] +
'" ' + '" ' +
'data-src="' + 'data-src="' +
trial.stimuli[i] + stimulus[i] +
'" ' + '" ' +
'class="jspsych-free-sort-ordered-draggable" ' + 'class="jspsych-free-sort-ordered-draggable" ' +
'draggable="false" ' + 'draggable="false" ' +
@ -262,7 +263,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
// add initial locations to the init_locations array // add initial locations to the init_locations array
init_locations.push({ init_locations.push({
src: trial.stimuli[i], src: stimulus[i],
x: coords.x, x: coords.x,
y: coords.y, y: coords.y,
}); });
@ -272,7 +273,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
let moves = []; let moves = [];
// are objects currently inside // are objects currently inside
let inside = new Array(trial.stimuli.length).fill(false); let inside = new Array(stimulus.length).fill(false);
// button to finish sorting // button to finish sorting
const button: HTMLButtonElement = display_element.querySelector("#jspsych-free-sort-done-btn"); const button: HTMLButtonElement = display_element.querySelector("#jspsych-free-sort-done-btn");

7
packages/plugin-free-sort-ordered/src/styles.css Normal file
View File

@ -0,0 +1,7 @@
.jspsych-free-sort-ordered-draggable {
touch-action: none; /* disable scrolling on touch-drag */
user-select: none; /* disable text selection */
-webkit-user-drag: none; /* disable Safari ghost */
-moz-user-select: none;
}