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

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

@ -5,7 +5,7 @@
<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>
@ -106,6 +106,5 @@
}; };
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;
}