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-canvas-keyboard-response/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>
<body></body>
<script>
@ -106,6 +106,5 @@
};
jsPsych.run([preload, trial_1, trial_2, trial_3, trial_4, trial_5]);
</script>
</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>
<link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css" />
<link rel="stylesheet" href="../src/styles.css" />
</head>
<body></body>
@ -16,10 +17,10 @@
const trial = {
type: jsPsychPluginFreeSortOrdered,
stimuli: [
'<div style="width: 200px; height: 100px; background-color: red;"></div>',
'<div style="width: 200px; height: 100px; background-color: blue;"></div>',
'<div style="width: 200px; height: 100px; background-color: green;"></div>'
stimulus: [
'../assets/blue-rec.png',
'../assets/green-rec.png',
'../assets/red-rec.png',
],
stim_height: 100,
stim_width: 200,
@ -28,7 +29,7 @@
holding_area_height: 500,
holding_area_width: 1000,
prompt: 'Drag and drop the boxes to sort them in order.',
prompt_location: 'top',
prompt_location: 'above',
button_label: 'Continue',
include_counter: true,
};

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

@ -10,7 +10,7 @@ const info = <const>{
version: version,
parameters: {
/** Each element of this array is an image path or SVG code. */
stimuli: {
stimulus: {
type: ParameterType.INT | ParameterType.HTML_STRING,
default: undefined,
array: true,
@ -144,23 +144,24 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
trial(display_element: HTMLElement, trial: TrialType<Info>) {
var start_time = performance.now();
var stimulus = trial.stimulus;
// holding area
const holding_area_html = `
<div
id="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
const counter_html = `
<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>`;
// container for the boxes
let box_grid_html = `
// container for the target boxes
let box_container_html = `
<div
id="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
for (let i = 0; i < trial.stimuli.length; i++) {
box_grid_html += `
for (let i = 0; i < stimulus.length; i++) {
box_container_html += `
<div
id="jspsych-free-sort-ordered-box-${i}"
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;"
></div>`;
}
box_grid_html += "</div>";
box_container_html += "</div>";
// prompt text (and counter if included)
const prompt_counter_html = `
@ -193,8 +194,8 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
// combine all HTML
let html =
trial.prompt_location === "above"
? prompt_counter_html + holding_area_html + box_grid_html + button_html
: holding_area_html + box_grid_html + prompt_counter_html + button_html;
? prompt_counter_html + holding_area_html + box_container_html + button_html
: holding_area_html + box_container_html + prompt_counter_html + button_html;
display_element.innerHTML = html;
@ -203,7 +204,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
// store locations of the boxes
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}`);
if (box) {
const rect = box.getBoundingClientRect();
@ -229,7 +230,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
});
// 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(
trial.holding_area_width - trial.stim_width,
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 +=
"<img " +
'src="' +
trial.stimuli[i] +
stimulus[i] +
'" ' +
'data-src="' +
trial.stimuli[i] +
stimulus[i] +
'" ' +
'class="jspsych-free-sort-ordered-draggable" ' +
'draggable="false" ' +
@ -262,7 +263,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
// add initial locations to the init_locations array
init_locations.push({
src: trial.stimuli[i],
src: stimulus[i],
x: coords.x,
y: coords.y,
});
@ -272,7 +273,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
let moves = [];
// 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
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;
}