diff --git a/package-lock.json b/package-lock.json index fa191c1248..802a138858 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "jsPsych", + "name": "plugin-drag-and-drop", "lockfileVersion": 3, "requires": true, "packages": { @@ -10491,7 +10491,7 @@ "node": ">=8" } }, - "node_modules/plugin-free-sort-ordered": { + "node_modules/plugin-snap-sort": { "resolved": "packages/plugin-free-sort-ordered", "link": true }, @@ -14031,6 +14031,7 @@ } }, "packages/plugin-free-sort-ordered": { + "name": "plugin-snap-sort", "version": "0.0.1", "license": "MIT", "dependencies": { diff --git a/packages/plugin-free-sort-ordered/README.md b/packages/plugin-free-sort-ordered/README.md index 3aae816722..d8eee38e7d 100644 --- a/packages/plugin-free-sort-ordered/README.md +++ b/packages/plugin-free-sort-ordered/README.md @@ -18,4 +18,4 @@ See [documentation](/packages/plugin-free-sort-ordered/README.md) ## Author / Citation -[Cherrie Chang](https://github.com/cherriechang) \ No newline at end of file +[Cherrie Chang](https://github.com/cherriechang) diff --git a/packages/plugin-free-sort-ordered/assets/green-circle.png b/packages/plugin-free-sort-ordered/assets/green-circle.png new file mode 100644 index 0000000000..83111fa885 Binary files /dev/null and b/packages/plugin-free-sort-ordered/assets/green-circle.png differ diff --git a/packages/plugin-free-sort-ordered/assets/green-square.png b/packages/plugin-free-sort-ordered/assets/green-square.png new file mode 100644 index 0000000000..76a2ec2a5f Binary files /dev/null and b/packages/plugin-free-sort-ordered/assets/green-square.png differ diff --git a/packages/plugin-free-sort-ordered/assets/green-triangle.png b/packages/plugin-free-sort-ordered/assets/green-triangle.png new file mode 100644 index 0000000000..ef15a9b31c Binary files /dev/null and b/packages/plugin-free-sort-ordered/assets/green-triangle.png differ diff --git a/packages/plugin-free-sort-ordered/assets/index.html b/packages/plugin-free-sort-ordered/assets/index.html new file mode 100644 index 0000000000..cdd7d1e629 --- /dev/null +++ b/packages/plugin-free-sort-ordered/assets/index.html @@ -0,0 +1,50 @@ + + + + jsPsychPluginFreeSortOrdered Example + + + + + + + + + + + diff --git a/packages/plugin-free-sort-ordered/assets/orange-circle.png b/packages/plugin-free-sort-ordered/assets/orange-circle.png new file mode 100644 index 0000000000..30588808f2 Binary files /dev/null and b/packages/plugin-free-sort-ordered/assets/orange-circle.png differ diff --git a/packages/plugin-free-sort-ordered/assets/orange-square.png b/packages/plugin-free-sort-ordered/assets/orange-square.png new file mode 100644 index 0000000000..4393a468d2 Binary files /dev/null and b/packages/plugin-free-sort-ordered/assets/orange-square.png differ diff --git a/packages/plugin-free-sort-ordered/assets/orange-triangle.png b/packages/plugin-free-sort-ordered/assets/orange-triangle.png new file mode 100644 index 0000000000..a1b47f112c Binary files /dev/null and b/packages/plugin-free-sort-ordered/assets/orange-triangle.png differ diff --git a/packages/plugin-free-sort-ordered/assets/purple-circle.png b/packages/plugin-free-sort-ordered/assets/purple-circle.png new file mode 100644 index 0000000000..cb1fa8beb3 Binary files /dev/null and b/packages/plugin-free-sort-ordered/assets/purple-circle.png differ diff --git a/packages/plugin-free-sort-ordered/assets/purple-square.png b/packages/plugin-free-sort-ordered/assets/purple-square.png new file mode 100644 index 0000000000..667a576f45 Binary files /dev/null and b/packages/plugin-free-sort-ordered/assets/purple-square.png differ diff --git a/packages/plugin-free-sort-ordered/assets/purple-triangle.png b/packages/plugin-free-sort-ordered/assets/purple-triangle.png new file mode 100644 index 0000000000..202633a4e5 Binary files /dev/null and b/packages/plugin-free-sort-ordered/assets/purple-triangle.png differ diff --git a/packages/plugin-free-sort-ordered/examples/index.html b/packages/plugin-free-sort-ordered/examples/index.html index 01c0ca56cb..811d827d23 100644 --- a/packages/plugin-free-sort-ordered/examples/index.html +++ b/packages/plugin-free-sort-ordered/examples/index.html @@ -3,6 +3,7 @@ jsPsychPluginFreeSortOrdered Example + @@ -13,27 +14,130 @@ diff --git a/packages/plugin-free-sort-ordered/examples/index_demo.html b/packages/plugin-free-sort-ordered/examples/index_demo.html new file mode 100644 index 0000000000..187222be4c --- /dev/null +++ b/packages/plugin-free-sort-ordered/examples/index_demo.html @@ -0,0 +1,245 @@ + + + + jsPsychPluginSnapSort Example + + + + + + + + + + + diff --git a/packages/plugin-free-sort-ordered/examples/index_min.html b/packages/plugin-free-sort-ordered/examples/index_min.html new file mode 100644 index 0000000000..24fda45d53 --- /dev/null +++ b/packages/plugin-free-sort-ordered/examples/index_min.html @@ -0,0 +1,130 @@ + + + + jsPsychPluginSnapSort Example + + + + + + + + + + + diff --git a/packages/plugin-free-sort-ordered/package.json b/packages/plugin-free-sort-ordered/package.json index b94f167626..19a57ed6ab 100644 --- a/packages/plugin-free-sort-ordered/package.json +++ b/packages/plugin-free-sort-ordered/package.json @@ -1,5 +1,5 @@ { - "name": "plugin-free-sort-ordered", + "name": "plugin-snap-sort", "version": "0.0.1", "description": "The free sort core plugin, but the images have to be sorted by placing into ordered boxes.", "type": "module", diff --git a/packages/plugin-free-sort-ordered/rollup.config.mjs b/packages/plugin-free-sort-ordered/rollup.config.mjs index f324dcee1c..284f6ba991 100644 --- a/packages/plugin-free-sort-ordered/rollup.config.mjs +++ b/packages/plugin-free-sort-ordered/rollup.config.mjs @@ -1,3 +1,3 @@ import { makeRollupConfig } from "@jspsych/config/rollup"; -export default makeRollupConfig("jsPsychPluginFreeSortOrdered"); +export default makeRollupConfig("jsPsychPluginSnapSort"); diff --git a/packages/plugin-free-sort-ordered/src/index.spec.ts b/packages/plugin-free-sort-ordered/src/index.spec.ts index 5ad9b4bb20..c2c72aa5cf 100644 --- a/packages/plugin-free-sort-ordered/src/index.spec.ts +++ b/packages/plugin-free-sort-ordered/src/index.spec.ts @@ -1,6 +1,6 @@ import { startTimeline } from "@jspsych/test-utils"; -import jsPsychPluginFreeSortOrdered from "."; +import jsPsychPluginSnapSort from "."; jest.useFakeTimers(); @@ -8,7 +8,7 @@ describe("my plugin", () => { it("should load", async () => { const { expectFinished, getHTML, getData, displayElement, jsPsych } = await startTimeline([ { - type: jsPsychPluginFreeSortOrdered, + type: jsPsychPluginSnapSort, parameter_name: 1, parameter_name2: "img.png", }, diff --git a/packages/plugin-free-sort-ordered/src/index.ts b/packages/plugin-free-sort-ordered/src/index.ts index b755940a5b..1d718996c2 100644 --- a/packages/plugin-free-sort-ordered/src/index.ts +++ b/packages/plugin-free-sort-ordered/src/index.ts @@ -6,45 +6,67 @@ import { version } from "../package.json"; import * as Utils from "./utils"; const info = { - name: "plugin-free-sort-ordered", + name: "plugin-snap-sort", version: version, parameters: { - /** Each element of this array is an image path or SVG code. */ stimulus: { - type: ParameterType.INT | ParameterType.HTML_STRING, + type: ParameterType.COMPLEX, default: undefined, array: true, }, - /** The height of the images in pixels. */ - stim_height: { - type: ParameterType.INT, - default: 100, - }, - /** The width of the images in pixels. */ - stim_width: { - type: ParameterType.INT, - default: 100, - }, - /** The correct order of the stimuli. */ - stim_order: { - type: ParameterType.INT, + boxes: { + type: ParameterType.COMPLEX, default: undefined, array: true, }, /** How much larger to make the stimulus while moving (1 = no scaling). */ scale_factor: { type: ParameterType.FLOAT, - default: 1.5, + default: 1.25, + }, + /** The location of the holding area relative to the box grid. */ + holding_area_location: { + type: ParameterType.SELECT, + options: ["above", "below", "left", "right"], + default: "below", + }, + holding_background_color: { + type: ParameterType.STRING, + default: "#CCCCCC", + }, + /** Checks if the stimuli are placed in the correct order, as determined by box_colors. */ + use_correctness: { + type: ParameterType.BOOL, + default: false, }, - /** The height of the container that the stimuli start in. */ - holding_area_height: { + /** How close to the box does the drag need to be to snap. */ + snap_margin: { type: ParameterType.INT, - default: 700, + default: 10, + }, + /** The margin between the boxes in pixels. */ + box_background_color: { + type: ParameterType.STRING, + default: "#FFFFFF", }, - /** The width of the container that the stimuli start in. */ - holding_area_width: { + box_margin: { type: ParameterType.INT, - default: 700, + default: 20, + }, + /** The colour the boxes go when the stimulus is nearby */ + box_hover_color: { + type: ParameterType.STRING, + default: "#90EE90", + }, + /** Whether multiple stimuli can be placed in the same box. If true, items in a box with multiple occupants will be scaled down. */ + allow_multiple_per_box: { + type: ParameterType.BOOL, + default: false, + }, + // TODO + reject_wrong_moves: { + type: ParameterType.BOOL, + default: false, }, /** This string can contain HTML markup. The intention is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press). */ prompt: { @@ -62,16 +84,36 @@ const info = { type: ParameterType.STRING, default: "Continue", }, - /** Whether to display counter indicating how many items are left to be sorted. */ - include_counter: { + /** When to show the button */ + show_button: { type: ParameterType.BOOL, default: true, }, + use_criteria: { + type: ParameterType.STRING, + default: ["none"], + array: true, // "none", "correct_answers", "all_items_sorted", "all_boxes_used" + }, + /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial will wait for a response indefinitely. */ + trial_duration: { + type: ParameterType.INT, + default: null, + }, + /** If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete. */ + response_ends_trial: { + type: ParameterType.BOOL, + default: false, + }, /** * Text to display when there are one or more items that still need to be placed in a box. * If "%n%" is included in the string, it will be replaced with the number of items that still need to be moved inside. * If "%s%" is included in the string, a "s" will be included when the number of items remaining is greater than one. */ + /** Whether to display counter indicating how many items are left to be sorted. */ + include_counter: { + type: ParameterType.BOOL, + default: true, + }, counter_text_unfinished: { type: ParameterType.HTML_STRING, default: "You still need to place %n% item%s% in a box.", @@ -104,6 +146,7 @@ const info = { }, }, }, + /** An array containing objects representing the final locations of all the stimuli in the sorting area. Each element in the array represents a stimulus, and has a "src", "x", and "y" value. "src" is the image path, and "x" and "y" are the object location. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. */ final_locations: { type: ParameterType.COMPLEX, array: true, @@ -130,72 +173,130 @@ const info = { type Info = typeof info; /** - * **plugin-free-sort-ordered** + * **plugin-snap-sort** * * The free sort core plugin, but the images have to be sorted by placing into ordered boxes. * * @author Cherrie Chang * @see {@link /packages/plugin-free-sort-ordered/README.md}} */ -class FreeSortOrderedPlugin implements JsPsychPlugin { +class SnapSortPlugin implements JsPsychPlugin { static info = info; constructor(private jsPsych: JsPsych) {} trial(display_element: HTMLElement, trial: TrialType) { var start_time = performance.now(); + var boxes = trial.boxes; var stimulus = trial.stimulus; + /** Height and width of the holding area depending on the location **/ + if (trial.holding_area_location === "above" || trial.holding_area_location === "below") { + var holding_area_width = 90; + var holding_area_height = 35; + var box_grid_width = 90; + var box_grid_height = 35; + var hold_margin = "1em 2em 1em 2em"; // margin for the holding area + var grid_margin = "1em 2em 1em 2em"; // margin for the box grid + } else { + var holding_area_width = 35; + var holding_area_height = 70; + var box_grid_width = 35; + var box_grid_height = 70; + var hold_margin = "2em 1em 2em 1em"; // margin for the holding area + var grid_margin = "2em 1em 2em 1em"; // margin for the box grid + } + // holding area const holding_area_html = `
+ id="jspsych-snap-sort-holding-area" + class="jspsych-snap-sort-holding-area" + style="position: relative; width: ${holding_area_width}vw; height: ${holding_area_height}vh; background-color: ${trial.holding_background_color}; margin: ${hold_margin};">
`; // counter text if included const counter_html = ` -

+

${trial.include_counter ? get_counter_text(stimulus.length) : ""}

`; // container for the target boxes let box_container_html = `
`; // create boxes for each stimulus - for (let i = 0; i < stimulus.length; i++) { + let box_order = this.jsPsych.randomization.shuffle(boxes.map((box) => box.id)); + // stimulus order defaults to array length number of stimuli 0, 1, 2... + let stim_order = Array.from({ length: stimulus.length }, (_, i) => i); + // get the correct stimulus order based on the box order (i.e., what the inside array needs to match) + if (trial.use_correctness && trial.correctness_by !== null) { + // if using correctness, we need to get the order of the boxes based on the stimuli + stim_order = stimulus.map((stimulus) => box_order.indexOf(stimulus.correct_box_id)); + } + for (let i = 0; i < boxes.length; i++) { box_container_html += `
`; } box_container_html += "
"; // prompt text (and counter if included) const prompt_counter_html = ` -
+

${trial.prompt + (trial.include_counter ? counter_html : "")} -

`; +

`; // button to continue const button_html = ` -
`; - // combine all HTML - let html = - trial.prompt_location === "above" - ? prompt_counter_html + holding_area_html + box_container_html + button_html - : holding_area_html + box_container_html + prompt_counter_html + button_html; + // combine all HTML based on the holding area location + if (trial.holding_area_location === "above") { + var html = + trial.prompt_location === "above" + ? prompt_counter_html + holding_area_html + box_container_html + button_html + : holding_area_html + box_container_html + prompt_counter_html + button_html; + } else if (trial.holding_area_location === "below") { + var html = + trial.prompt_location === "above" + ? prompt_counter_html + box_container_html + holding_area_html + button_html + : box_container_html + holding_area_html + prompt_counter_html + button_html; + } else if (trial.holding_area_location === "left") { + var html = + trial.prompt_location === "above" + ? prompt_counter_html + + `
` + + holding_area_html + + box_container_html + + `
` + + button_html + : holding_area_html + box_container_html + prompt_counter_html + button_html; + } else if (trial.holding_area_location === "right") { + var html = + trial.prompt_location === "above" + ? prompt_counter_html + + `
` + + box_container_html + + holding_area_html + + `
` + + button_html + : box_container_html + holding_area_html + prompt_counter_html + button_html; + } display_element.innerHTML = html; @@ -204,8 +305,8 @@ class FreeSortOrderedPlugin implements JsPsychPlugin { // store locations of the boxes let boxCoordinates = []; - for (let i = 0; i < stimulus.length; i++) { - const box = document.getElementById(`jspsych-free-sort-ordered-box-${i}`); + for (let i = 0; i < boxes.length; i++) { + const box = document.getElementById(`jspsych-snap-sort-box-${i}`); if (box) { const rect = box.getBoundingClientRect(); boxCoordinates.push({ @@ -213,7 +314,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin { y: rect.top, }); } else { - console.error(`Box element with id jspsych-free-sort-ordered-box-${i} not found.`); + console.error(`Box element with id jspsych-snap-sort-box-${i} not found.`); } } @@ -224,36 +325,48 @@ class FreeSortOrderedPlugin implements JsPsychPlugin { id: i, left: boxCoord.x, top: boxCoord.y, - width: trial.stim_width, - height: trial.stim_height, + width: boxes[i].width, + height: boxes[i].height, }); }); + const box_grid = document.getElementById(`jspsych-snap-sort-box-grid`); + const holding_box = document.getElementById(`jspsych-snap-sort-holding-area`); + const rect_grid = box_grid.getBoundingClientRect(); + const rect_holding = holding_box.getBoundingClientRect(); + // place each stimulus in initial locations + var existing_coordinates = []; 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 + var coords = Utils.random_coordinate( + 0, + 0, + rect_holding.width - boxes[i].width, + rect_holding.height - boxes[i].height, + existing_coordinates, + boxes[i].width, + boxes[i].height ); + existing_coordinates.push([coords.x, coords.y, boxes[i].width, boxes[i].height]); // add stimuli and their initial locations to the display - display_element.querySelector("#jspsych-free-sort-ordered-holding-area").innerHTML += + display_element.querySelector("#jspsych-snap-sort-holding-area").innerHTML += " { // add initial locations to the init_locations array init_locations.push({ - src: stimulus[i], + src: stimulus[i].file, x: coords.x, y: coords.y, }); @@ -276,88 +389,191 @@ class FreeSortOrderedPlugin implements JsPsychPlugin { let inside = new Array(stimulus.length).fill(false); // button to finish sorting - const button: HTMLButtonElement = display_element.querySelector("#jspsych-free-sort-done-btn"); + const button: HTMLButtonElement = display_element.querySelector("#jspsych-snap-sort-done-btn"); // save draggable items as array const draggables = Array.prototype.slice.call( - display_element.querySelectorAll(".jspsych-free-sort-ordered-draggable") + display_element.querySelectorAll(".jspsych-snap-sort-draggable") ); // make each stimulus draggable by adding event listeners for when they are dragged and dropped draggables.forEach((draggable, i) => { draggable.addEventListener("pointerdown", function ({ clientX: pageX, clientY: pageY }) { let x = pageX - this.offsetLeft; - let y = pageY - this.offsetTop - window.scrollY; + let y = pageY - this.offsetTop; this.style.transform = "scale(" + trial.scale_factor + "," + trial.scale_factor + ")"; // on pointer move, check if the stimulus is inside a box and update its position const on_pointer_move = ({ clientX, clientY }: PointerEvent) => { - inside[i] = Utils.inside_box(clientX - x, clientY - y, boxAreas); - - // TODO: add constraints to keep the stimulus within the viewport - - this.style.top = clientY - y + "px"; - this.style.left = clientX - x + "px"; - - // modify text and background if all items are inside - if (inside.every(Boolean)) { - button.style.visibility = "visible"; - display_element.querySelector("#jspsych-free-sort-ordered-counter").innerHTML = - trial.counter_text_finished; + for (let j = 0; j < inside.length; j++) { + document.getElementById(`jspsych-snap-sort-box-${j}`).style.backgroundColor = "white"; + document.getElementById(`jspsych-snap-sort-box-${j}`).style.boxShadow = "none"; + } + let position = Utils.getPosition(this); + inside[i] = Utils.inside_box(position.x, position.y, trial.snap_margin, boxAreas); + + // Calculate new positions + let newTop = clientY - y; + let newLeft = clientX - x; + const bottomOfBoxes = boxAreas.reduce( + (max, box) => Math.max(max, box.top + box.height), + 0 + ); + const maxBoxHeight = Math.max(...boxAreas.map((box) => box.height)); + + // left + right + if (trial.holding_area_location === "above" || trial.holding_area_location === "below") { + newLeft = Math.max(0, newLeft); + newLeft = Math.min(newLeft, rect_holding.width - this.offsetWidth); + } else if (trial.holding_area_location === "right") { + newLeft = Math.max(-rect_holding.width, newLeft); + newLeft = Math.min(newLeft, rect_grid.width - this.offsetWidth); + } else { + newLeft = Math.max(0, newLeft); + newLeft = Math.min(newLeft, rect_grid.width + rect_holding.width - this.offsetWidth); + } + // top + bottom + if (trial.holding_area_location === "below") { + newTop = Math.max(-rect_holding.height, newTop); + newTop = Math.min(newTop, bottomOfBoxes - maxBoxHeight + this.offsetHeight); } else { - button.style.visibility = "hidden"; - display_element.querySelector("#jspsych-free-sort-ordered-counter").innerHTML = - get_counter_text(inside.length - inside.filter(Boolean).length); + newTop = Math.max(0, newTop); + newTop = Math.min(newTop, bottomOfBoxes - maxBoxHeight + this.offsetHeight); + } + + // Apply the constrained position + this.style.top = newTop + "px"; + this.style.left = newLeft + "px"; + + if (typeof inside[i] === "number") { + // add colour to the box the stimulus is nearest to + document.getElementById(`jspsych-snap-sort-box-${inside[i]}`).style.backgroundColor = + trial.box_hover_color; + // add shadow to the box + document.getElementById(`jspsych-snap-sort-box-${inside[i]}`).style.boxShadow = + "0 0 10px rgba(0, 0, 0, 0.5)"; + // make stimulus slightly larger + // this.style.transform = "scale(" + trial.scale_factor + "," + trial.scale_factor + ")"; } }; document.addEventListener("pointermove", on_pointer_move); // on pointer up, remove the event listeners and save the move - const on_pointer_up = (e) => { + const on_pointer_up = () => { document.removeEventListener("pointermove", on_pointer_move); this.style.transform = "scale(1, 1)"; + if (typeof inside[i] === "number") { + const boxIndex = inside[i] as number; + const alreadyOccupied = inside.some((val, idx) => idx !== i && val === boxIndex); + let isCorrect = stim_order[i] === boxIndex; + if ( + (alreadyOccupied && !trial.allow_multiple_per_box) || + (trial.use_correctness && !isCorrect) + ) { + // add back check correct + // move back to init_position + const init_pos = init_locations.find((loc) => loc.src === this.dataset.src); + if (init_pos) { + this.style.left = init_pos.x + "px"; + this.style.top = init_pos.y + "px"; + } + // remove colour and shadow from the box + document.getElementById(`jspsych-snap-sort-box-${inside[i]}`).style.backgroundColor = + "white"; + document.getElementById(`jspsych-snap-sort-box-${inside[i]}`).style.boxShadow = + "none"; + inside[i] = false; // reset inside status + } + + // otherwise, snap into place within the box. + const box = document.getElementById(`jspsych-snap-sort-box-${inside[i]}`); + if (box) { + const box_rect = box.getBoundingClientRect(); + const holding_area = document.getElementById("jspsych-snap-sort-holding-area"); + const holding_rect = holding_area.getBoundingClientRect(); + + // Calculate position relative to the holding area + const left_pos = box_rect.left - holding_rect.left; + const top_pos = box_rect.top - holding_rect.top; + + // Center the image in the box if needed + this.style.left = left_pos + "px"; + this.style.top = top_pos + "px"; + this.style.position = "absolute"; + + // if there are multiple items in the box, make sure this one is on top + // Find all draggables currently in this box + if (alreadyOccupied && trial.allow_multiple_per_box) { + const itemsInBox = draggables.filter((_, idx) => inside[idx] === inside[i]); + itemsInBox.forEach((el, idx) => { + // Scale down + el.style.transform = "scale(0.8, 0.8)"; + // Offset each item by 5px horizontally and vertically + el.style.left = left_pos + idx * 5 + "px"; + el.style.top = top_pos + idx * 5 + "px"; + el.style.zIndex = (100 + idx).toString(); + }); + } + // remove shadow from the box + box.style.boxShadow = "none"; + box.style.backgroundColor = "white"; + } + } moves.push({ src: this.dataset.src, x: this.offsetLeft, y: this.offsetTop, }); document.removeEventListener("pointerup", on_pointer_up); + // check if all stimuli are in correct boxes + if (trial.use_correctness && trial.correctness_by !== null) { + // does every element of inside match stim_order? + const isComplete = inside.every( + (value, index) => typeof value === "number" && value === stim_order[index] + ); + button.style.visibility = isComplete ? "visible" : "hidden"; + display_element.querySelector("#jspsych-snap-sort-counter").innerHTML = isComplete + ? trial.counter_text_finished + : get_counter_text(inside.filter((value) => typeof value !== "number").length); + } else { + const allItemsInBoxes = + inside.filter((value) => typeof value !== "number").length === 0; + button.style.visibility = allItemsInBoxes ? "visible" : "hidden"; + display_element.querySelector("#jspsych-snap-sort-counter").innerHTML = allItemsInBoxes + ? trial.counter_text_finished + : get_counter_text(inside.filter((value) => typeof value !== "number").length); + } }; document.addEventListener("pointerup", on_pointer_up); }); }); - display_element - .querySelector("#jspsych-free-sort-ordered-done-btn") - .addEventListener("click", () => { - if (inside.every(Boolean)) { - const end_time = performance.now(); - const rt = Math.round(end_time - start_time); - // gather data - const items = display_element.querySelectorAll( - ".jspsych-free-sort-ordered-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), - }); - } + display_element.querySelector("#jspsych-snap-sort-done-btn").addEventListener("click", () => { + const end_time = performance.now(); + const rt = Math.round(end_time - start_time); + // gather data + const items = display_element.querySelectorAll(".jspsych-snap-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: init_locations, - moves: moves, - final_locations: final_locations, - rt: rt, - }; + const trial_data = { + init_locations: init_locations, + moves: moves, + final_locations: final_locations, + rt: rt, + }; - this.jsPsych.finishTrial(trial_data); - } - }); + this.jsPsych.finishTrial(trial_data); + }); + // get the counter text function get_counter_text(n: number) { var text_out = ""; var text_bits = trial.counter_text_unfinished.split("%"); @@ -377,4 +593,4 @@ class FreeSortOrderedPlugin implements JsPsychPlugin { } } -export default FreeSortOrderedPlugin; +export default SnapSortPlugin; diff --git a/packages/plugin-free-sort-ordered/src/styles.css b/packages/plugin-free-sort-ordered/src/styles.css index 10f24a19d6..a334909c0e 100644 --- a/packages/plugin-free-sort-ordered/src/styles.css +++ b/packages/plugin-free-sort-ordered/src/styles.css @@ -1,4 +1,4 @@ -.jspsych-free-sort-ordered-draggable { +.jspsych-snap-sort-draggable { touch-action: none; /* disable scrolling on touch-drag */ user-select: none; /* disable text selection */ -webkit-user-drag: none; /* disable Safari ghost */ diff --git a/packages/plugin-free-sort-ordered/src/utils.ts b/packages/plugin-free-sort-ordered/src/utils.ts index 90ffd28678..c60e0d2d4b 100644 --- a/packages/plugin-free-sort-ordered/src/utils.ts +++ b/packages/plugin-free-sort-ordered/src/utils.ts @@ -6,15 +6,79 @@ export type boxArea = { height: number; }; -export function inside_box(x: number, y: number, box_areas: boxArea[]): string | null { +export function inside_box( + x: number, + y: number, + margin: number, + box_areas: boxArea[] +): string | null { for (const box_area of box_areas) { const { id, left, top, width, height } = box_area; const right = left + width; const bottom = top + height; - if (x >= left && x <= right && y >= top && y <= bottom) { - return id; // point is inside this box + // if x is +- margin of left and y is +- margin of top + if (x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin) { + return id; // point is inside the box } } return null; // point not inside any box } + +// adapted from: https://www.kirupa.com/snippets/move_element_to_click_position.htm +export function getPosition(el: HTMLElement) { + // Added type for el + var xPos = 0; + var yPos = 0; + const elWidth = el.offsetWidth; // Get the width of the element + const elHeight = el.offsetHeight; // Get the height of the element + + while (el) { + var xScroll = el.scrollLeft || document.documentElement.scrollLeft; + var yScroll = el.scrollTop || document.documentElement.scrollTop; + xPos += el.offsetLeft - xScroll + el.clientLeft; + yPos += el.offsetTop - yScroll + el.clientTop; + el = el.offsetParent as HTMLElement; // Added type assertion + } + return { + x: xPos + elWidth / 2, // Adjust x to be the center + y: yPos + elHeight / 2, // Adjust y to be the center + }; +} + +// adapted from free-sort plugin +// function to generate random coordinates within a bounding box that if possible does not overlap with existing coordinates +export function random_coordinate( + min_width, + min_height, + max_width, + max_height, + existing_coordinates, + box_height, + box_width +) { + var rnd_x = Math.floor(Math.random() * (max_width - min_width + 1)) + min_width; + var rnd_y = Math.floor(Math.random() * (max_height - min_height + 1)) + min_height; + + var counter = 0; + + for (let i = 0; i < existing_coordinates.length; i++) { + const [x, y, existing_box_width, existing_box_height] = existing_coordinates[i]; + if ( + rnd_x >= x - box_width - existing_box_width && + rnd_x <= x + existing_box_width + box_width && + rnd_y >= y - box_height - existing_box_height && + rnd_y <= y + existing_box_height + box_height && + counter < 500 + ) { + rnd_x = Math.floor(Math.random() * (max_width - min_width + 1)) + min_width; + rnd_y = Math.floor(Math.random() * (max_height - min_height + 1)) + min_height; + i = -1; + counter++; + } + } + return { + x: rnd_x, + y: rnd_y, + }; +}