Issue nivlab#32 (nivlab#33)

* issue-nivlab#32 (1)
- initial reorganization of jspsych libraries

* issue-nivlab#32 (2)
- initial design mock-up

* issue-nivlab#32 (3)
- full working draft

* issue-nivlab#32 (4)
- integrate into experiment.html

* issue-nivlab#32 (5)
- fix typo

lib/jspsych-7.2.1/README.md

@@ -0,0 +1,62 @@
+![jspsych logo](http://www.jspsych.org/7.0/img/jspsych-logo.jpg)
+
+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). 
+Each plugin defines different kinds of events, like showing an image on the screen, and collects different kinds of data, like recording which key was pressed at which time. 
+By assembling different plugins together into [a timeline](https://www.jspsych.org/latest/overview/timeline), it is possible to create a wide range of online experiments. 
+
+## What can I do with jsPsych?
+
+jsPsych comes with a number of plugins that you can use create tasks and collect data. 
+Some plugins do general things, like present a stimulus (text, image, audio, video) and record a key press or button response along with a response time. 
+Other plugins do more specific things, like show a set of instructions pages, run a drag-and-drop image sorting task, or calibrate the WebGazer eye-tracking extension. 
+See the [list of all plugins](https://www.jspsych.org/latest/plugins/list-of-plugins/) to see what each plugin can do.
+
+Often people can create their experiment by combining these plugins together. 
+But if that's not possible for your experiment, you can also modify a plugin file or [create your own plugin](https://www.jspsych.org/latest/developers/plugin-development). 
+This gives you the flexibility to do exactly what you want, while still taking advantage of jsPsych's general experiment-building framework. 
+The plugin template is *extremely* flexible. If a task is possible to do in a web browser, you can almost certainly implement it as a plugin.
+
+## Getting started
+
+jsPsych can be loaded into a project in a variety of ways, including via CDNs and through NPM. 
+You can learn more about setting up a project by following the [hello world tutorial](https://www.jspsych.org/latest/tutorials/hello-world/) on the jsPsych website. 
+
+Once you've got a project set up, the [reaction time task tutorial](https://www.jspsych.org/latest/tutorials/rt-task/) is a great next step, since it covers many core topics and features. 
+
+There are also a number of [video tutorials](https://www.jspsych.org/latest/tutorials/video-tutorials) available on the website.
+
+## Examples
+
+Several example experiments and plugin demonstrations are available in the `/examples` folder. 
+After you've downloaded the [latest release](https://github.com/jspsych/jsPsych/releases), double-click on an example HTML file to run it in your web browser, and open it with a programming-friendly text editor to see how it works.
+
+## Documentation
+
+Documentation is available at [https://www.jspsych.org](https://www.jspsych.org/).
+
+## Getting help
+
+For questions about using the library, please use the GitHub [discussions forum](https://github.com/jspsych/jsPsych/discussions). 
+You can also browse through the history of Q&A on the forum to find related questions.
+
+## Contributing
+
+We :heart: contributions! 
+See the [contributing to jsPsych](https://www.jspsych.org/latest/developers/contributing/) documentation page for more information about how you can help.
+
+## Citation
+
+If you use this library in academic work, please cite the [paper that describes jsPsych](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y):
+
+de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:10.3758/s13428-014-0458-y
+
+## Contributors
+
+jsPsych is open source project with [numerous contributors](https://github.com/jspsych/jsPsych/graphs/contributors). 
+The project is currently managed by the core team of Josh de Leeuw ([@jodeleeuw](https://github.com/jodeleeuw)), Becky Gilbert ([@becky-gilbert](https://github.com/becky-gilbert)), and Björn Luchterhandt ([@bjoluc](https://github.com/bjoluc)).
+
+jsPsych was created by [Josh de Leeuw](http://www.twitter.com/joshdeleeuw).
+
+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-2021.

lib/jspsych-7.2.1/extensions/extension-mouse-tracking.js

@@ -0,0 +1,112 @@
+var jsPsychExtensionMouseTracking = (function () {
+    'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    class MouseTrackingExtension {
+        constructor(jsPsych) {
+            this.jsPsych = jsPsych;
+            this.initialize = ({ minimum_sample_time = 0 }) => __awaiter(this, void 0, void 0, function* () {
+                this.domObserver = new MutationObserver(this.mutationObserverCallback);
+                this.minimumSampleTime = minimum_sample_time;
+            });
+            this.on_start = (params) => {
+                params = params || {};
+                this.currentTrialData = [];
+                this.currentTrialTargets = new Map();
+                this.currentTrialSelectors = params.targets || [];
+                this.lastSampleTime = null;
+                this.eventsToTrack = params.events || ["mousemove"];
+                this.domObserver.observe(this.jsPsych.getDisplayElement(), { childList: true });
+            };
+            this.on_load = () => {
+                // set current trial start time
+                this.currentTrialStartTime = performance.now();
+                // start data collection
+                if (this.eventsToTrack.includes("mousemove")) {
+                    window.addEventListener("mousemove", this.mouseMoveEventHandler);
+                }
+                if (this.eventsToTrack.includes("mousedown")) {
+                    window.addEventListener("mousedown", this.mouseDownEventHandler);
+                }
+                if (this.eventsToTrack.includes("mouseup")) {
+                    window.addEventListener("mouseup", this.mouseUpEventHandler);
+                }
+            };
+            this.on_finish = () => {
+                this.domObserver.disconnect();
+                if (this.eventsToTrack.includes("mousemove")) {
+                    window.removeEventListener("mousemove", this.mouseMoveEventHandler);
+                }
+                if (this.eventsToTrack.includes("mousedown")) {
+                    window.removeEventListener("mousedown", this.mouseDownEventHandler);
+                }
+                if (this.eventsToTrack.includes("mouseup")) {
+                    window.removeEventListener("mouseup", this.mouseUpEventHandler);
+                }
+                return {
+                    mouse_tracking_data: this.currentTrialData,
+                    mouse_tracking_targets: Object.fromEntries(this.currentTrialTargets.entries()),
+                };
+            };
+            this.mouseMoveEventHandler = ({ clientX: x, clientY: y }) => {
+                const event_time = performance.now();
+                const t = Math.round(event_time - this.currentTrialStartTime);
+                if (this.lastSampleTime === null ||
+                    event_time - this.lastSampleTime >= this.minimumSampleTime) {
+                    this.lastSampleTime = event_time;
+                    this.currentTrialData.push({ x, y, t, event: "mousemove" });
+                }
+            };
+            this.mouseUpEventHandler = ({ clientX: x, clientY: y }) => {
+                const event_time = performance.now();
+                const t = Math.round(event_time - this.currentTrialStartTime);
+                this.currentTrialData.push({ x, y, t, event: "mouseup" });
+            };
+            this.mouseDownEventHandler = ({ clientX: x, clientY: y }) => {
+                const event_time = performance.now();
+                const t = Math.round(event_time - this.currentTrialStartTime);
+                this.currentTrialData.push({ x, y, t, event: "mousedown" });
+            };
+            this.mutationObserverCallback = (mutationsList, observer) => {
+                for (const selector of this.currentTrialSelectors) {
+                    if (!this.currentTrialTargets.has(selector)) {
+                        const target = this.jsPsych.getDisplayElement().querySelector(selector);
+                        if (target) {
+                            this.currentTrialTargets.set(selector, target.getBoundingClientRect());
+                        }
+                    }
+                }
+            };
+        }
+    }
+    MouseTrackingExtension.info = {
+        name: "mouse-tracking",
+    };
+
+    return MouseTrackingExtension;
+
+})();