diff --git a/.changeset/poor-singers-destroy.md b/.changeset/poor-singers-destroy.md new file mode 100644 index 00000000..fcc32a25 --- /dev/null +++ b/.changeset/poor-singers-destroy.md @@ -0,0 +1,5 @@ +--- +"@jspsych/plugin-sketchpad": patch +--- + +Fixed broken event handlers in the sketchpad plugin. diff --git a/.changeset/sixty-bobcats-provide.md b/.changeset/sixty-bobcats-provide.md new file mode 100644 index 00000000..fe1c1bf9 --- /dev/null +++ b/.changeset/sixty-bobcats-provide.md @@ -0,0 +1,7 @@ +--- +"jspsych": patch +"@jspsych/plugin-free-sort": patch +"@jspsych/plugin-maxdiff": patch +--- + +Remove uses of Array.from() to improve Qualtrics compatibility diff --git a/contributors.md b/contributors.md index a377a528..3eae9831 100644 --- a/contributors.md +++ b/contributors.md @@ -34,6 +34,7 @@ The following people have contributed to the development of jsPsych by writing c * kupiqu - https://github.com/kupiqu * Daiichiro Kuroki - https://github.com/kurokida * Jonas Lambers +* Max Lovell - https://github.com/max-lovell * madebyafox - https://github.com/madebyafox * Shane Martin - https://github.com/shamrt * Vijay Marupudi - https://github.com/vijaymarupudi diff --git a/packages/jspsych/src/modules/plugin-api/KeyboardListenerAPI.ts b/packages/jspsych/src/modules/plugin-api/KeyboardListenerAPI.ts index 82e1ed7f..6259d82c 100644 --- a/packages/jspsych/src/modules/plugin-api/KeyboardListenerAPI.ts +++ b/packages/jspsych/src/modules/plugin-api/KeyboardListenerAPI.ts @@ -48,7 +48,7 @@ export class KeyboardListenerAPI { private rootKeydownListener(e: KeyboardEvent) { // Iterate over a static copy of the listeners set because listeners might add other listeners // that we do not want to be included in the loop - for (const listener of Array.from(this.listeners)) { + for (const listener of [...this.listeners]) { listener(e); } this.heldKeys.add(this.toLowerCaseIfInsensitive(e.key)); diff --git a/packages/plugin-free-sort/src/index.ts b/packages/plugin-free-sort/src/index.ts index a736bba8..9deaba5d 100644 --- a/packages/plugin-free-sort/src/index.ts +++ b/packages/plugin-free-sort/src/index.ts @@ -348,7 +348,7 @@ class FreeSortPlugin implements JsPsychPlugin { let cur_in = false; // draggable items - const draggables = Array.from( + const draggables = Array.prototype.slice.call( display_element.querySelectorAll(".jspsych-free-sort-draggable") ); diff --git a/packages/plugin-maxdiff/src/index.ts b/packages/plugin-maxdiff/src/index.ts index c7b822a2..14559529 100644 --- a/packages/plugin-maxdiff/src/index.ts +++ b/packages/plugin-maxdiff/src/index.ts @@ -185,12 +185,12 @@ class MaxdiffPlugin implements JsPsychPlugin { // check response if (trial.required) { // Now check if one of both left and right have been enabled to allow submission - var left_checked = Array.from(document.getElementsByName("left")).some( - (c: HTMLInputElement) => c.checked - ); - var right_checked = Array.from(document.getElementsByName("right")).some( - (c: HTMLInputElement) => c.checked - ); + var left_checked = Array.prototype.slice + .call(document.getElementsByName("left")) + .some((c: HTMLInputElement) => c.checked); + var right_checked = Array.prototype.slice + .call(document.getElementsByName("right")) + .some((c: HTMLInputElement) => c.checked); if (left_checked && right_checked) { (document.getElementById("jspsych-maxdiff-next") as HTMLInputElement).disabled = false; diff --git a/packages/plugin-sketchpad/src/index.ts b/packages/plugin-sketchpad/src/index.ts index 98dde01c..33e4e8ec 100644 --- a/packages/plugin-sketchpad/src/index.ts +++ b/packages/plugin-sketchpad/src/index.ts @@ -409,11 +409,11 @@ class SketchpadPlugin implements JsPsychPlugin { }); } - this.sketchpad.addEventListener("pointerdown", this.start_draw); - this.sketchpad.addEventListener("pointermove", this.move_draw); - this.sketchpad.addEventListener("pointerup", this.end_draw); - this.sketchpad.addEventListener("pointerleave", this.end_draw); - this.sketchpad.addEventListener("pointercancel", this.end_draw); + this.sketchpad.addEventListener("pointerdown", this.start_draw.bind(this)); + this.sketchpad.addEventListener("pointermove", this.move_draw.bind(this)); + this.sketchpad.addEventListener("pointerup", this.end_draw.bind(this)); + this.sketchpad.addEventListener("pointerleave", this.end_draw.bind(this)); + this.sketchpad.addEventListener("pointercancel", this.end_draw.bind(this)); if (this.params.key_to_draw !== null) { document.addEventListener("keydown", (e) => { @@ -452,16 +452,22 @@ class SketchpadPlugin implements JsPsychPlugin { } if (this.params.show_undo_button) { - this.display.querySelector("#sketchpad-undo").addEventListener("click", this.undo); + this.display.querySelector("#sketchpad-undo").addEventListener("click", this.undo.bind(this)); if (this.params.show_redo_button) { - this.display.querySelector("#sketchpad-redo").addEventListener("click", this.redo); + this.display + .querySelector("#sketchpad-redo") + .addEventListener("click", this.redo.bind(this)); } } if (this.params.show_clear_button) { - this.display.querySelector("#sketchpad-clear").addEventListener("click", this.clear); + this.display + .querySelector("#sketchpad-clear") + .addEventListener("click", this.clear.bind(this)); } - const color_btns = Array.from(this.display.querySelectorAll(".sketchpad-color-select")); + const color_btns = Array.prototype.slice.call( + this.display.querySelectorAll(".sketchpad-color-select") + ); for (const btn of color_btns) { btn.addEventListener("click", (e) => { const target = e.target as HTMLButtonElement;