jspsych 8.2.3 → 8.3.0

package/README.md

@@ -1,5 +1,7 @@
 ![jspsych logo](http://www.jspsych.org/7.0/img/jspsych-logo.jpg)
 
+[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/9910/badge)](https://www.bestpractices.dev/projects/9910)
+
 jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser. 
 
 Experiments in jsPsych are created using [plugins](https://www.jspsych.org/latest/overview/plugins). 
@@ -65,4 +67,10 @@ The project is currently managed by the core team of Josh de Leeuw ([@jodeleeuw]
 
 jsPsych was created by [Josh de Leeuw](https://www.vassar.edu/faculty/jdeleeuw).
 
-We're also grateful for the generous support from a [Mozilla Open Source Support award](https://www.mozilla.org/en-US/moss/), which funded development of the library from 2020-2022.
+## Thanks
+
+We're grateful for the generous support from a [Mozilla Open Source Support award](https://www.mozilla.org/en-US/moss/), which funded development of the library from 2020-2022, and from a [National Science Foundation Grant](https://www.nsf.gov/awardsearch/show-award?AWD_ID=2346214), which funded work on the broader ecosystem from 2024-2026.
+
+This project is tested with [BrowserStack](https://www.browserstack.com).
+
+

package/css/jspsych.css

@@ -408,6 +408,26 @@
   cursor: not-allowed;
 }
 
+/* Keyboard keys, e.g., press <kbd>space</kbd> in instructions */
+.jspsych-display-element kbd,
+.jspsych-display-element .jspsych-key {
+  display: inline-block;
+  min-width: 1em;
+  padding: 0.15em 0.5em;
+  margin: 0 0.1em 2px;
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-size: 0.8em;
+  line-height: 1.4;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  color: #333;
+  background-color: #f7f7f7;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 0 #ccc;
+}
+
 /* custom style for input[type="range] (slider) to improve alignment between positions and labels */
 .jspsych-slider {
   appearance: none;

package/dist/index.browser.js

@@ -51,7 +51,7 @@ var jsPsychModule = (function (exports) {
 
 	var autoBind$1 = /*@__PURE__*/getDefaultExportFromCjs(autoBind);
 
-	var version = "8.2.3";
+	var version = "8.3.0";
 
 	class ExtensionManager {
 	  constructor(dependencies, extensionsConfiguration) {
@@ -604,6 +604,8 @@ var jsPsychModule = (function (exports) {
 	    this.minimumValidRt = minimumValidRt;
 	    this.listeners = /* @__PURE__ */ new Set();
 	    this.heldKeys = /* @__PURE__ */ new Set();
+	    this.keyDownTimestamps = /* @__PURE__ */ new Map();
+	    this.pendingReleases = /* @__PURE__ */ new Map();
 	    this.areRootListenersRegistered = false;
 	    autoBind$1(this);
 	    this.registerRootListeners();
@@ -618,11 +620,16 @@ var jsPsychModule = (function (exports) {
 	      if (rootElement) {
 	        rootElement.addEventListener("keydown", this.rootKeydownListener);
 	        rootElement.addEventListener("keyup", this.rootKeyupListener);
+	        window.addEventListener("blur", this.rootBlurListener);
 	        this.areRootListenersRegistered = true;
 	      }
 	    }
 	  }
 	  rootKeydownListener(e) {
+	    const physicalKey = this.getPhysicalKey(e);
+	    if (!this.keyDownTimestamps.has(physicalKey)) {
+	      this.keyDownTimestamps.set(physicalKey, performance.now());
+	    }
 	    for (const listener of [...this.listeners]) {
 	      listener(e);
 	    }
@@ -631,9 +638,43 @@ var jsPsychModule = (function (exports) {
 	  toLowerCaseIfInsensitive(string) {
 	    return this.areResponsesCaseSensitive ? string : string.toLowerCase();
 	  }
+	  /**
+	   * identifies physical key of a keyboard event, for matching a keydown event with
+	   * its corresponding keyup event, in the case of a change of shift state while
+	   * the key is being held.
+	   */
+	  getPhysicalKey(e) {
+	    return e.code || this.toLowerCaseIfInsensitive(e.key);
+	  }
 	  rootKeyupListener(e) {
+	    const physicalKey = this.getPhysicalKey(e);
+	    for (const [listener, pending] of this.pendingReleases) {
+	      if (pending.code === physicalKey) {
+	        const pressTimestamp = this.keyDownTimestamps.get(physicalKey);
+	        const rt_key_duration = pressTimestamp === void 0 ? null : Math.round(performance.now() - pressTimestamp);
+	        this.pendingReleases.delete(listener);
+	        pending.callback_function({ key: pending.key, rt: pending.rt, rt_key_duration });
+	      }
+	    }
+	    this.keyDownTimestamps.delete(physicalKey);
 	    this.heldKeys.delete(this.toLowerCaseIfInsensitive(e.key));
 	  }
+	  /**
+	   * When the window loses focus (`blur`), the browser will not deliver the `keyup` events for keys
+	   * that are currently held, which would otherwise leave stale entries in `heldKeys` and
+	   * `keyDownTimestamps` (making a key look permanently held) and orphan any pending releases. Treat
+	   * the blur as a release of every held key: resolve each pending release with
+	   * `rt_key_duration: null`, since the true hold duration cannot be measured once the release is
+	   * never observed, then clear the tracked key state.
+	   */
+	  rootBlurListener() {
+	    for (const [listener, pending] of this.pendingReleases) {
+	      this.pendingReleases.delete(listener);
+	      pending.callback_function({ key: pending.key, rt: pending.rt, rt_key_duration: null });
+	    }
+	    this.heldKeys.clear();
+	    this.keyDownTimestamps.clear();
+	  }
 	  isResponseValid(validResponses, allowHeldKey, key) {
 	    if (!allowHeldKey && this.heldKeys.has(key)) {
 	      return false;
@@ -654,7 +695,8 @@ var jsPsychModule = (function (exports) {
 	    audio_context,
 	    audio_context_start_time,
 	    allow_held_key = false,
-	    minimum_valid_rt = this.minimumValidRt
+	    minimum_valid_rt = this.minimumValidRt,
+	    wait_for_key_release = false
 	  }) {
 	    if (rt_method !== "performance" && rt_method !== "audio") {
 	      console.log(
@@ -681,7 +723,16 @@ var jsPsychModule = (function (exports) {
 	        if (!persist) {
 	          this.cancelKeyboardResponse(listener);
 	        }
-	        callback_function({ key: e.key, rt });
+	        if (wait_for_key_release) {
+	          this.pendingReleases.set(listener, {
+	            code: this.getPhysicalKey(e),
+	            key: e.key,
+	            rt,
+	            callback_function
+	          });
+	        } else {
+	          callback_function({ key: e.key, rt });
+	        }
 	      }
 	    };
 	    this.listeners.add(listener);
@@ -689,9 +740,11 @@ var jsPsychModule = (function (exports) {
 	  }
 	  cancelKeyboardResponse(listener) {
 	    this.listeners.delete(listener);
+	    this.pendingReleases.delete(listener);
 	  }
 	  cancelAllKeyboardResponses() {
 	    this.listeners.clear();
+	    this.pendingReleases.clear();
 	  }
 	  compareKeys(key1, key2) {
 	    if (typeof key1 !== "string" && key1 !== null || typeof key2 !== "string" && key2 !== null) {
@@ -4143,4 +4196,4 @@ var jsPsychModule = (function (exports) {
 
 })({});
 var initJsPsych = jsPsychModule.initJsPsych;
-//# sourceMappingURL=https://unpkg.com/jspsych@8.2.3/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/jspsych@8.3.0/dist/index.browser.js.map