To use an extension in an experiment, you'll load the extension file via a <script> tag (just like adding a plugin) and then initialize the extension in the parameters of initJsPsych().
<head>
- <script src="https://unpkg.com/jspsych@7.1.1"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2"></script>
<script src="https://unpkg.com/@jspsych/extension-example@1.0.0"></script>
</head>
The official version of WebGazer is currently not supported by jsPsych. Our fork of the library contains some minor improvements aimed at the kind of experiments that jsPsych is typically used for, e.g., situations in which the timing of display screens needs to be accurate.
You must include the webgazer.js file in your experiment via a <script> tag.
However, the webgazer.js file is not part of any of the jsPsych NPM packages and is therefore not available via the unpkg.com CDN.
-Instead, it can be found on the jsdelivr.net CDN at: "https://cdn.jsdelivr.net/gh/jspsych/jspsych@jspsych@7.1.1/examples/js/webgazer/webgazer.js".
<head>
- <script src="https://unpkg.com/jspsych@7.1.1"></script>
- <script src="https://cdn.jsdelivr.net/gh/jspsych/jspsych@7.1.1/examples/js/webgazer/webgazer.js"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2"></script>
+ <script src="https://cdn.jsdelivr.net/gh/jspsych/jspsych@7.1.2/examples/js/webgazer/webgazer.js"></script>
</head>
The webgazer extension adds functionality to jsPsych for interacting with webgazer. Load it like you would a plugin file.
<head>
- <script src="https://unpkg.com/jspsych@7.1.1"></script>
- <script src="https://cdn.jsdelivr.net/gh/jspsych/jspsych@7.1.1/examples/js/webgazer/webgazer.js"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2"></script>
+ <script src="https://cdn.jsdelivr.net/gh/jspsych/jspsych@7.1.2/examples/js/webgazer/webgazer.js"></script>
<script src="https://unpkg.com/@jspsych/extension-webgazer@1.0.0"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <script src="https://unpkg.com/jspsych@7.1.1"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.0"></script>
@@ -1885,11 +1885,11 @@ Instead, it can be found on the jsdelivr.net CDN at: "https://cdn.jsdelivr.net/g
<script src="https://unpkg.com/@jspsych/plugin-webgazer-init-camera@1.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-webgazer-calibrate@1.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-webgazer-validate@1.0.0"></script>
- <script src="https://cdn.jsdelivr.net/gh/jspsych/jspsych@7.1.1/examples/js/webgazer/webgazer.js"></script>
+ <script src="https://cdn.jsdelivr.net/gh/jspsych/jspsych@7.1.2/examples/js/webgazer/webgazer.js"></script>
<script src="https://unpkg.com/@jspsych/extension-webgazer@1.0.0"></script>
<link
rel="stylesheet"
- href="https://unpkg.com/jspsych@7.1.1/css/jspsych.css"
+ href="https://unpkg.com/jspsych@7.1.2/css/jspsych.css"
/>
<style>
.jspsych-btn {
diff --git a/7.1/overview/plugins/index.html b/7.1/overview/plugins/index.html
index a571d500..8378b38e 100755
--- a/7.1/overview/plugins/index.html
+++ b/7.1/overview/plugins/index.html
@@ -1795,7 +1795,7 @@ Part of creating an experiment with jsPsych involves figuring out which plugins
Using a plugin¶
To use a plugin, you'll need to load the plugin's JavaScript file in your experiment's HTML page. All jsPsych experiments also need to load the "jsPsych.js" file.
<head>
- <script src="https://unpkg.com/jspsych@7.1.1" type="text/javascript"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2" type="text/javascript"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.0" type="text/javascript"></script>
</head>
diff --git a/7.1/overview/style/index.html b/7.1/overview/style/index.html
index 80b38362..e51236ba 100755
--- a/7.1/overview/style/index.html
+++ b/7.1/overview/style/index.html
@@ -1775,9 +1775,9 @@
You can add CSS rules to your HTML page by putting them inside of <style> tags. These rules will be applied to your whole experiment. This method can be useful for making general changes to the way that your experiment looks.
In the example below, the default font size is set to 25px throughout the experiment. This will overrule the default font size of 18px that is set in the jspsych.css file.
<head>
- <script src="https://unpkg.com/jspsych@7.1.1"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.0"></script>
- <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.1/css/jspsych.css">
+ <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.2/css/jspsych.css">
<style>
.jspsych-display-element {
font-size: 25px;
@@ -1789,9 +1789,9 @@
CSS rules can also be applied to your experiment with a link to an external CSS file. This is the same method that is usually used to apply the style from jspsych.css to an experiment. These rules will be applied to your whole experiment. You may find it useful to use a custom stylesheet when you want to re-use the same CSS rules across multiple experiments (HTML files).
This example shows how to add a custom CSS file in addition to the styles provided in jspsych.css. In this example, the custom CSS file is called "my_experiment_style.css" and it is located in the same directory as your HTML file.
<head>
- <script src="https://unpkg.com/jspsych@7.1.1"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.0"></script>
- <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.1/css/jspsych.css">
+ <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.2/css/jspsych.css">
<link rel="stylesheet" href="my_experiment_style.css">
</head>
@@ -1815,9 +1815,9 @@
CSS rules can also be applied in a trial-specific way using the css_classes parameter. This parameter will apply one or more class to the <div> element that holds all of the jsPsych page content during that specific trial. This way you can treat CSS styles just like any other trial parameter.
You can use a static css_classes parameter value if you always want to apply the same CSS rules to the trial. In the 'fixation' example below, separating the style rules from the stimulus string makes the code a little bit 'cleaner', and this makes it easier to re-use the same style rules in other parts of the experiment.
<head>
- <script src="https://unpkg.com/jspsych@7.1.1"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.0"></script>
- <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.1/css/jspsych.css">
+ <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.2/css/jspsych.css">
<style>
.fixation {font-size: 90px; font-weight: bold; color: gray;}
</style>
@@ -1851,9 +1851,9 @@
In the example below, the CSS selector .left-align #stimulus selects the element with the ID "stimulus" that is inside of an element with the class "left-align".
<head>
- <script src="https://unpkg.com/jspsych@7.1.1"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.0"></script>
- <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.1/css/jspsych.css">
+ <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.2/css/jspsych.css">
<style>
.left-align #stimulus {text-align: left; width: 600px;}
.right-align #stimulus {text-align: right; width: 600px;}
@@ -1878,9 +1878,9 @@
It's also possible to pass multiple class names to the css_classes parameter. This can be useful for creating conditions that involve crossing different style-related factors. This example shows you to combine two text alignment and two text color factors to produce four different stimulus conditions:
<head>
- <script src="https://unpkg.com/jspsych@7.1.1"></script>
+ <script src="https://unpkg.com/jspsych@7.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.0"></script>
- <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.1/css/jspsych.css">
+ <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.2/css/jspsych.css">
<style>
.left-align #stimulus {text-align: left; width: 600px;}
.right-align #stimulus {text-align: right; width: 600px;}
diff --git a/7.1/search/search_index.json b/7.1/search/search_index.json
index 2848161b..02015af2 100755
--- a/7.1/search/search_index.json
+++ b/7.1/search/search_index.json
@@ -1 +1 @@
-{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"\u00b6 jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser. Experiments in jsPsych are created using 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. You can use the plugins that are included with jsPsych , use plugins that are developed by community members in the contrib repository , or create your own plugins . By assembling different plugins together into a timeline , it is possible to create a wide range of experiments. The page on timelines is a good place to start learning about jsPsych. From there, you might want to complete the hello world tutorial to learn how to set up a jsPsych experiment and the reaction time experiment tutorial to learn the core features of the framework.","title":"Introduction"},{"location":"#_1","text":"jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser. Experiments in jsPsych are created using 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. You can use the plugins that are included with jsPsych , use plugins that are developed by community members in the contrib repository , or create your own plugins . By assembling different plugins together into a timeline , it is possible to create a wide range of experiments. The page on timelines is a good place to start learning about jsPsych. From there, you might want to complete the hello world tutorial to learn how to set up a jsPsych experiment and the reaction time experiment tutorial to learn the core features of the framework.","title":""},{"location":"about/about/","text":"About jsPsych \u00b6 jsPsych is open source project with numerous contributors . The project is currently managed by the core team of Josh de Leeuw ( @jodeleeuw ), Becky Gilbert ( @becky-gilbert ), and Bj\u00f6rn Luchterhandt ( @bjoluc ). jsPsych was created by Josh de Leeuw . Citation \u00b6 If you use jsPsych please cite the following paper. 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 .","title":"About jsPsych"},{"location":"about/about/#about-jspsych","text":"jsPsych is open source project with numerous contributors . The project is currently managed by the core team of Josh de Leeuw ( @jodeleeuw ), Becky Gilbert ( @becky-gilbert ), and Bj\u00f6rn Luchterhandt ( @bjoluc ). jsPsych was created by Josh de Leeuw .","title":"About jsPsych"},{"location":"about/about/#citation","text":"If you use jsPsych please cite the following paper. 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 .","title":"Citation"},{"location":"about/license/","text":"License \u00b6 jsPsych is licensed under the MIT license. The MIT License (MIT) Copyright (c) 2014-2021 Joshua R. de Leeuw Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","title":"License"},{"location":"about/license/#license","text":"jsPsych is licensed under the MIT license. The MIT License (MIT) Copyright (c) 2014-2021 Joshua R. de Leeuw Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","title":"License"},{"location":"developers/configuration/","text":"Configuring the jsPsych development environment \u00b6 Setup \u00b6 JsPsych is written using TypeScript , a superset of JavaScript that adds static typing, but compiles to plain JavaScript. The TypeScript compiler itself is written in JavaScript and can be run by Node.js , a runtime to execute JavaScript code without a web browser. Node.js comes with a package manager called NPM (Node Package Manager) that can install JavaScript libraries to run on your machine, such as TypeScript and other build tools for jsPsych. In order to work on code in the jsPsych or the jspsych-contrib repository, it is recommended that you follow the steps below to set up your development environment. Install Node.js \u00b6 The jsPsych development setup requires Node.js >= v14 to be installed on your machine. We recommend that you install version 16 since it includes version 7 of NPM (required for the workspaces feature that the jsPsych repositories use). If you are bound to Node.js v14, make sure to install NPM v7 manually (via npm install -g npm@7 ). Clone the repository and install the dependencies \u00b6 Clone either the jsPsych repository or the jspsych-contrib repository by running git clone https://github.com/jspsych/jsPsych.git && cd jsPsych or git clone https://github.com/jspsych/jspsych-contrib.git && cd jspsych-contrib in a terminal. Then run npm install . This will create a node_modules directory and install all the dependencies into it that are required to build and test jsPsych. Attention It is important that npm install is only run in the root directory of the repository (due to the NPM workspaces feature). If you accidentally ran npm install anywhere else, remove the node_modules directory and the package-lock.json file that were created at that location and run npm install in the root directory again. Info If you are running npm install in the core jsPsych repository, this will also execute the build chain for all packages in the jsPsych repository. This step may take a few minutes. If you would like to use that time efficiently, consider reading the following two sections to know what's happening. Repository structure \u00b6 A Node.js package is a directory that contains a package.json file describing it. Most importantly, a package.json file lists other packages that the package depends on. The jsPsych and jspsych-contrib repositories use NPM workspaces . That means, running npm install in the repository root will install the dependencies for all packages in the packages directory. The core jsPsych library and every jsPsych plugin or extension is laid out as an individual package. These packages are published to the NPM registry where they can be downloaded by NPM or any CDN (such as unpkg ). Build chain and build artifacts \u00b6 JsPsych comes with a build chain (specified in the @jspsych/config package) that can be executed by running npm run build in a package's directory. The build chain will read the package (starting at its src/index.ts file) and create the following build artifacts in the package's dist directory: index.js This file contains everything from index.ts , but as plain JavaScript and bundled in a single file (i.e. without import ing files from the same package). It is used by bundlers like webpack . index.cjs Like index.js , but using the old CommonJS standard to support backwards-compatible tools like the Jest testing framework. index.browser.js This file, like index.js , contains the entire package as plain JavaScript, but this time wrapped in a function so that it can be included directly by browsers using the