jspsych 7.1.1 → 7.2.1

package/dist/modules/data/DataCollection.d.ts

@@ -36,6 +36,7 @@ export declare class DataCollection {
     addToLast(properties: any): this;
     filter(filters: any): DataCollection;
     filterCustom(fn: any): DataCollection;
+    filterColumns(columns: Array<string>): DataCollection;
     select(column: any): DataColumn;
     ignore(columns: any): DataCollection;
     uniqueNames(): any[];

package/dist/modules/plugins.d.ts

@@ -113,6 +113,13 @@ export declare const universalPluginParameters: {
         readonly pretty_name: "Custom CSS classes";
         readonly default: any;
     };
+    /**
+     * Options to control simulation mode for the trial.
+     */
+    readonly simulation_options: {
+        readonly type: ParameterType.COMPLEX;
+        readonly default: any;
+    };
 };
 export declare type UniversalPluginParameters = InferredParameters<typeof universalPluginParameters>;
 export interface PluginInfo {

package/dist/modules/randomization.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Uses the `seedrandom` package to replace Math.random() with a seedable PRNG.
+ *
+ * @param seed An optional seed. If none is given, a random seed will be generated.
+ * @returns The seed value.
+ */
+export declare function setSeed(seed?: string): string;
 export declare function repeat(array: any, repetitions: any, unpack?: boolean): any;
 export declare function shuffle(array: Array<any>): any[];
 export declare function shuffleNoRepeats(arr: Array<any>, equalityTest: (a: any, b: any) => boolean): any[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jspsych",
-  "version": "7.1.1",
+  "version": "7.2.1",
   "description": "Behavioral experiments in a browser",
   "type": "module",
   "main": "dist/index.cjs",
@@ -23,8 +23,10 @@
     "test": "jest",
     "test:watch": "npm test -- --watch",
     "tsc": "tsc",
-    "build": "rollup --config",
-    "build:watch": "npm run build -- --watch",
+    "build:js": "rollup --config",
+    "build:styles": "webpack-cli",
+    "build": "run-p build:js build:styles",
+    "build:watch": "run-p \"build:js -- --watch\" \"build:styles watch\"",
     "prepack": "cp ../../README.md ."
   },
   "repository": {
@@ -40,11 +42,22 @@
   "homepage": "https://www.jspsych.org",
   "dependencies": {
     "auto-bind": "^4.0.0",
-    "random-words": "^1.1.1"
+    "random-words": "^1.1.1",
+    "seedrandom": "^3.0.5"
   },
   "devDependencies": {
-    "@jspsych/config": "^1.1.0",
-    "@jspsych/test-utils": "^1.1.1",
-    "@types/dom-mediacapture-record": "^1.0.11"
+    "@fontsource/open-sans": "4.5.3",
+    "@jspsych/config": "^1.2.0",
+    "@types/dom-mediacapture-record": "^1.0.11",
+    "base64-inline-loader": "^2.0.1",
+    "css-loader": "^6.6.0",
+    "mini-css-extract-plugin": "^2.5.3",
+    "npm-run-all": "^4.1.5",
+    "sass": "^1.43.5",
+    "sass-loader": "^12.4.0",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-remove-empty-scripts": "^0.7.2",
+    "replace-in-file-webpack-plugin": "^1.0.6"
   }
 }

package/src/JsPsych.ts

@@ -302,7 +302,9 @@ export class JsPsych {
     this.internal.call_immediate = false;
 
     // wait for iti
-    if (
+    if (this.simulation_mode === "data-only") {
+      this.nextTrial();
+    } else if (
       typeof current_trial.post_trial_gap === null ||
       typeof current_trial.post_trial_gap === "undefined"
     ) {

package/src/index.scss

@@ -0,0 +1,209 @@
+/*
+ * CSS for jsPsych experiments.
+ *
+ * This stylesheet provides minimal styling to make jsPsych
+ * experiments look polished without any additional styles.
+ */
+
+@import "@fontsource/open-sans/400-italic.css";
+@import "@fontsource/open-sans/700-italic.css";
+@import "@fontsource/open-sans/400.css";
+@import "@fontsource/open-sans/700.css";
+
+/* Container holding jsPsych content */
+
+.jspsych-display-element {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.jspsych-display-element:focus {
+  outline: none;
+}
+
+.jspsych-content-wrapper {
+  display: flex;
+  margin: auto;
+  flex: 1 1 100%;
+  width: 100%;
+}
+
+.jspsych-content {
+  max-width: 95%; /* this is mainly an IE 10-11 fix */
+  text-align: center;
+  margin: auto; /* this is for overflowing content */
+}
+
+.jspsych-top {
+  align-items: flex-start;
+}
+
+.jspsych-middle {
+  align-items: center;
+}
+
+/* fonts and type */
+
+.jspsych-display-element {
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-size: 18px;
+  line-height: 1.6em;
+}
+
+/* Form elements like input fields and buttons */
+
+.jspsych-display-element input[type="text"] {
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-size: 14px;
+}
+
+/* borrowing Bootstrap style for btn elements, but combining styles a bit */
+.jspsych-btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin: 0px;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: "Open Sans", "Arial", sans-serif;
+  cursor: pointer;
+  line-height: 1.4;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+/* only apply the hover style on devices with a mouse/pointer that can hover - issue #977 */
+@media (hover: hover) {
+  .jspsych-btn:hover {
+    background-color: #ddd;
+    border-color: #aaa;
+  }
+}
+
+.jspsych-btn:active {
+  background-color: #ddd;
+  border-color: #000000;
+}
+
+.jspsych-btn:disabled {
+  background-color: #eee;
+  color: #aaa;
+  border-color: #ccc;
+  cursor: not-allowed;
+}
+
+/* custom style for input[type="range] (slider) to improve alignment between positions and labels */
+
+.jspsych-slider {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+  background: transparent;
+}
+.jspsych-slider:focus {
+  outline: none;
+}
+/* track */
+.jspsych-slider::-webkit-slider-runnable-track {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #eee;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 2px;
+  border: 1px solid #aaa;
+}
+.jspsych-slider::-moz-range-track {
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #eee;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 2px;
+  border: 1px solid #aaa;
+}
+.jspsych-slider::-ms-track {
+  appearance: none;
+  width: 99%;
+  height: 14px;
+  cursor: pointer;
+  background: #eee;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 2px;
+  border: 1px solid #aaa;
+}
+/* thumb */
+.jspsych-slider::-webkit-slider-thumb {
+  border: 1px solid #666;
+  height: 24px;
+  width: 15px;
+  border-radius: 5px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -9px;
+}
+.jspsych-slider::-moz-range-thumb {
+  border: 1px solid #666;
+  height: 24px;
+  width: 15px;
+  border-radius: 5px;
+  background: #ffffff;
+  cursor: pointer;
+}
+.jspsych-slider::-ms-thumb {
+  border: 1px solid #666;
+  height: 20px;
+  width: 15px;
+  border-radius: 5px;
+  background: #ffffff;
+  cursor: pointer;
+  margin-top: -2px;
+}
+
+/* jsPsych progress bar */
+
+#jspsych-progressbar-container {
+  color: #555;
+  border-bottom: 1px solid #dedede;
+  background-color: #f9f9f9;
+  margin-bottom: 1em;
+  text-align: center;
+  padding: 8px 0px;
+  width: 100%;
+  line-height: 1em;
+}
+#jspsych-progressbar-container span {
+  font-size: 14px;
+  padding-right: 14px;
+}
+#jspsych-progressbar-outer {
+  background-color: #eee;
+  width: 50%;
+  margin: auto;
+  height: 14px;
+  display: inline-block;
+  vertical-align: middle;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+#jspsych-progressbar-inner {
+  background-color: #aaa;
+  width: 0%;
+  height: 100%;
+}
+
+/* Control appearance of jsPsych.data.displayData() */
+#jspsych-data-display {
+  text-align: left;
+}

package/src/modules/data/DataCollection.ts

@@ -134,6 +134,14 @@ export class DataCollection {
     return new DataCollection(this.trials.filter(fn));
   }
 
+  filterColumns(columns: Array<string>) {
+    return new DataCollection(
+      this.trials.map((trial) =>
+        Object.fromEntries(columns.filter((key) => key in trial).map((key) => [key, trial[key]]))
+      )
+    );
+  }
+
   select(column) {
     const values = [];
     for (const trial of this.trials) {

package/src/modules/plugins.ts

@@ -133,6 +133,13 @@ export const universalPluginParameters = <const>{
     pretty_name: "Custom CSS classes",
     default: null,
   },
+  /**
+   * Options to control simulation mode for the trial.
+   */
+  simulation_options: {
+    type: ParameterType.COMPLEX,
+    default: null,
+  },
 };
 
 export type UniversalPluginParameters = InferredParameters<typeof universalPluginParameters>;

package/src/modules/randomization.ts

@@ -1,4 +1,16 @@
 import rw from "random-words";
+import seedrandom from "seedrandom/lib/alea";
+
+/**
+ * Uses the `seedrandom` package to replace Math.random() with a seedable PRNG.
+ *
+ * @param seed An optional seed. If none is given, a random seed will be generated.
+ * @returns The seed value.
+ */
+export function setSeed(seed: string = Math.random().toString()) {
+  Math.random = seedrandom(seed);
+  return seed;
+}
 
 export function repeat(array, repetitions, unpack = false) {
   const arr_isArray = Array.isArray(array);