mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-12 08:38:11 +00:00
Merge pull request #2154 from jspsych/modularization-new-docs
Documentation for 7.0
This commit is contained in:
bjoluc
GitHub
commit
aa580413e1
73
README.md
73
README.md
@ -1,63 +1,62 @@
|
||||
|
||||
|
||||
|
||||
jsPsych is a JavaScript library for creating behavioral experiments that run in a web browser. It provides a framework for defining experiments using a set of flexible plugins that create different kinds of events, and collect different kinds of data. By assembling these plugins together, it is possible to create a wide range of online experiments.
|
||||
jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser.
|
||||
|
||||
jsPsych experiments are created using the languages of the Web: HTML, CSS, and JavaScript. JavaScript is the programming language used by web browsers. It provides the most control and flexibility for creating web-based experiments, and allows for easy integration with other JavaScript libraries and server-side tools. Don't have JavaScript experience? Don't worry! jsPsych was designed to make creating online experiments as easy as possible for people without web development experience.
|
||||
Experiments in jsPsych are created using [plugins](https://www.jspsych.org/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/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, present a Random-Dot Kinematogram, or calibrate the WebGazer eye-tracking extension. See the documentation website for a [list of all plugins](https://www.jspsych.org/plugins/list-of-plugins/), and to see what each plugin can do.
|
||||
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/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/overview/plugins/#creating-a-new-plugin). This gives you the flexibility to do exactly what you want, while still taking advantage of jsPsych's general experiment-building framework.
|
||||
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/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
|
||||
---------------
|
||||
## Getting started
|
||||
|
||||
New to jsPsych? A good place to start is the basic [Hello World tutorial](https://www.jspsych.org/tutorials/hello-world/) on the jsPsych website. The [Reaction Time Task tutorial](https://www.jspsych.org/tutorials/rt-task/) is a great next step, since it covers many core topics and features.
|
||||
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/tutorials/hello-world/) on the jsPsych website.
|
||||
|
||||
There are also a number of [video tutorials](https://www.jspsych.org/tutorials/video-tutorials), including [Session 1 of the Moving Online Workshop](https://www.youtube.com/watch?v=BuhfsIFRFe8), which provides an overview of jsPsych suitable for brand new users.
|
||||
Once you've got a project set up, the [reaction time task tutorial](https://www.jspsych.org/tutorials/rt-task/) is a great next step, since it covers many core topics and features.
|
||||
|
||||
Examples
|
||||
----------
|
||||
There are also a number of [video tutorials](https://www.jspsych.org/tutorials/video-tutorials) available on the website.
|
||||
|
||||
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.
|
||||
## Examples
|
||||
|
||||
Documentation
|
||||
-------------
|
||||
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 is available at [jspsych.org](https://www.jspsych.org/).
|
||||
## Documentation
|
||||
|
||||
Need help?
|
||||
----------
|
||||
Documentation is available at [https://www.jspsych.org](https://www.jspsych.org/).
|
||||
|
||||
For questions about using the library, please use the GitHub [Discussions forum](https://github.com/jspsych/jsPsych/discussions).
|
||||
## Getting help
|
||||
|
||||
Contributing
|
||||
------------
|
||||
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.
|
||||
|
||||
Contributions to the code are welcome. Please use the [Issue tracker system](https://github.com/jspsych/jsPsych/issues) to report bugs or discuss suggestions for new features and improvements. If you would like to contribute code, [submit a Pull request](https://help.github.com/articles/using-pull-requests). See the [Contributing to jsPsych](https://www.jspsych.org/about/contributing/) documentation page for more information.
|
||||
## Contributing
|
||||
|
||||
Citation
|
||||
--------
|
||||
We :heart: contributions!
|
||||
See the [contributing to jsPsych](https://www.jspsych.org/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
|
||||
|
||||
Response times
|
||||
--------------
|
||||
## Contributors
|
||||
|
||||
Wondering if jsPsych can be used for research that depends on accurate response time measurement? For most purposes, the answer is yes. Response time measurements in jsPsych (and JavaScript in general) are comparable to those taken in standard lab software like Psychophysics Toolbox and E-Prime. Response times measured in JavaScript tend to be a little bit longer (10-40ms), but have similar variance. See the following references for extensive work on this topic.
|
||||
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)).
|
||||
|
||||
* [de Leeuw, J. R., & Motz, B. A. (2016). Psychophysics in a Web browser? Comparing response times collected with JavaScript and Psychophysics Toolbox in a visual search task. *Behavior Research Methods*, *48*(1), 1-12.](http://link.springer.com/article/10.3758%2Fs13428-015-0567-2)
|
||||
* [Hilbig, B. E. (2016). Reaction time effects in lab- versus web-based research: Experimental evidence. *Behavior Research Methods*, *48*(4), 1718-1724.](http://dx.doi.org/10.3758/s13428-015-0678-9)
|
||||
* [Pinet, S., Zielinski, C., Mathôt, S. et al. (2017). Measuring sequences of keystrokes with jsPsych: Reliability of response times and interkeystroke intervals. *Behavior Research Methods*, *49*(3), 1163-1176.](http://link.springer.com/article/10.3758/s13428-016-0776-3)
|
||||
* [Reimers, S., & Stewart, N. (2015). Presentation and response time accuracy in Adobe Flash and HTML5/JavaScript Web experiments. *Behavior Research Methods*, *47*(2), 309-327.](http://link.springer.com/article/10.3758%2Fs13428-014-0471-1)
|
||||
jsPsych was created by [Josh de Leeuw](http://www.twitter.com/joshdeleeuw).
|
||||
|
||||
|
||||
Credits
|
||||
-------
|
||||
|
||||
jsPsych was created by Josh de Leeuw ([@jodeleeuw](https://github.com/jodeleeuw)).
|
||||
|
||||
We're grateful for the many [contributors](https://github.com/jspsych/jsPsych/blob/master/contributors.md) to the library, and for the generous support from a [Mozilla Open Source Support (MOSS)](https://www.mozilla.org/en-US/moss/) award. Thank you!
|
||||
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.
|
||||
@ -33,7 +33,7 @@ Although we strive to make jsPsych as open and collaborative as possible, it’s
|
||||
Such leadership occasionally requires decisions that are in the best interest of the project but may not be understood by or beneficial to everyone. These decisions are important because they keep the project on track, and enable it to move forward faster than if we required complete consensus. Any major decisions taken by the project leader should be mindful of the challenges they may present for others. We expect the project leader to communicate major decisions/changes early on, and to provide their reasoning.
|
||||
|
||||
### Contributions
|
||||
We invite anyone to contribute to any aspect of the project. You can find more information about contributing here: https://www.jspsych.org/about/contributing/
|
||||
We invite anyone to contribute to any aspect of the project. You can find more information about contributing here: https://www.jspsych.org/developers/contributing.md/
|
||||
|
||||
Because changes to the jsPsych library can have a huge potential for impact on all users, any proposed changes to the library have to be considered very carefully. For this reason, it is always a good idea to check with the project leader about whether your proposed contribution would likely be merged into the jsPsych library. Keep in mind that, even if your work isn’t suitable for merging into the jsPsych library, you can still use it in your own projects and share it publicly with others, e.g. via a separate GitHub repository.
|
||||
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
# About jsPsych
|
||||
|
||||
jsPsych was created by [Josh de Leeuw](http://www.twitter.com/joshdeleeuw). There have been [many other contributors](https://github.com/jodeleeuw/jsPsych/blob/master/contributors.md) to the library; thanks to all of them!
|
||||
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 :fontawesome-brands-twitter:](http://www.twitter.com/joshdeleeuw).
|
||||
|
||||
### Citation
|
||||
|
||||
If you use jsPsych for academic work please cite the following paper.
|
||||
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.
|
||||
|
||||
### Response times
|
||||
|
||||
Wondering if jsPsych can be used for research that depends on accurate response time measurement? For most purposes, the answer is yes. Response time measurements in jsPsych (and JavaScript in general) are comparable to those taken in standard lab software like Psychophysics Toolbox and E-Prime. Response times measured in JavaScript tend to be a little bit longer (10-40ms), but have similar variance. See the following references for extensive work on this topic.
|
||||
|
||||
* [de Leeuw, J. R., & Motz, B. A. (2016). Psychophysics in a Web browser? Comparing response times collected with JavaScript and Psychophysics Toolbox in a visual search task. *Behavior Research Methods*, *48*(1), 1-12.](http://link.springer.com/article/10.3758%2Fs13428-015-0567-2)
|
||||
* [Hilbig, B. E. (2016). Reaction time effects in lab- versus web-based research: Experimental evidence. *Behavior Research Methods*, *48*(4), 1718-1724.](http://dx.doi.org/10.3758/s13428-015-0678-9)
|
||||
* [Pinet, S., Zielinski, C., Mathôt, S. et al. (in press). Measuring sequences of keystrokes with jsPsych: Reliability of response times and interkeystroke intervals. *Behavior Research Methods*.](http://link.springer.com/article/10.3758/s13428-016-0776-3)
|
||||
* [Reimers, S., & Stewart, N. (2015). Presentation and response time accuracy in Adobe Flash and HTML5/JavaScript Web experiments. *Behavior Research Methods*, *47*(2), 309-327.](http://link.springer.com/article/10.3758%2Fs13428-014-0471-1)
|
||||
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](https://doi.org/10.3758/s13428-014-0458-y).
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
# Contributing to jsPsych
|
||||
|
||||
Contributions to jsPsych are welcome! All of the code is managed through the GitHub repository.
|
||||
|
||||
## Steps for modifying the code
|
||||
|
||||
#### Discuss the proposed change
|
||||
|
||||
If you have a specific modification in mind -- for instance, a new feature or bug fix -- please open a [new issue via GitHub](https://github.com/jspsych/jsPsych/issues/new). Describe the proposed change and what functionality it adds to the library and/or what problem it solves. If you are interested in adding a new plugin to the library, it helps if you post an example of the plugin in use and describe the different use cases of the plugin (for more guidance, see the "Writing new plugins" section below).
|
||||
|
||||
If you are thinking about proposing a change but not at the point where you have a specific modification to the code base in mind, then it might be helpful to discuss the issue first on [GitHub Discussions](https://github.com/jspsych/jsPsych/discussions). Discussion posts can be useful for sharing code and getting feedback before requesting a change to the library.
|
||||
|
||||
#### Fork the library and modify the code
|
||||
|
||||
To make changes to the code, you should fork the jsPsych library via GitHub and make modifications on your fork. You may find it useful to make modifications on branches, so that you can keep your proposed changes separate from any other unrelated changes you might want to make on your fork.
|
||||
|
||||
#### Submit a pull request
|
||||
|
||||
Once your modification is complete, submit a pull request to merge your changes into the `master` branch of the main repository. Pull requests will be reviewed by the project team.
|
||||
|
||||
## Writing new plugins
|
||||
|
||||
New plugins are welcome additions to the library. Plugins can be distributed independently of the main library or added to the GitHub repository via a pull request, following the process described above. If you want to add your plugin to the main library then there are a few guidelines to follow.
|
||||
|
||||
#### Make the plugin as general as possible
|
||||
|
||||
Plugins are most useful when they are flexible. Avoid fixing the value of parameters that could be variables. This is especially important for any text that displays on the screen in order to facilitate use in multiple languages.
|
||||
|
||||
#### Use the jsPsych.pluginAPI module when appropriate
|
||||
|
||||
The [pluginAPI module](../core_library/jspsych-pluginAPI.md) contains functions relevant to plugin development. Avoid duplicating the functions defined within the library in your plugin, and instead use the pluginAPI whenever possible. If you have a suggestion for improving pluginAPI methods, then go ahead and submit a pull request to modify it directly.
|
||||
|
||||
#### Document your plugin
|
||||
|
||||
When submitting a pull request to add your plugin, make sure to include a documentation page in the same style as the other docs pages. Documentation files exist in the `docs` directory.
|
||||
|
||||
#### Include an example file
|
||||
|
||||
Write a short example HTML file to include in the `examples` directory. This should demonstrate the basic use cases of the plugin as clearly as possible.
|
||||
|
||||
#### Include a testing file
|
||||
|
||||
Automated code testing for jsPsych is implemented with [Jest](https://facebook.github.io/jest/). To run the tests, install Node and npm. Run `npm install` in the root jsPsych directory. Then run `npm test`. Plugins should have a testing file that validates the behavior of all the plugin parameters. See the `/tests/plugins` directory for examples.
|
||||
@ -1,25 +1,7 @@
|
||||
# License
|
||||
|
||||
jsPsych is licensed under the MIT license.
|
||||
jsPsych is [licensed](https://github.com/jspsych/jsPsych/blob/main/license.txt) under the MIT license.
|
||||
|
||||
>The MIT License (MIT)
|
||||
>
|
||||
>Copyright (c) 2019 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.
|
||||
```
|
||||
--8<-- "license.txt"
|
||||
```
|
||||
@ -1,7 +0,0 @@
|
||||
# Support
|
||||
|
||||
For questions about jsPsych the preferred method of support is via [GitHub Discussions](https://github.com/jspsych/jsPsych/discussions). Questions are most likely to be answered when they include a reproducible example of the problem. If you can make your code available online and link to the experiment, that will make the question easier to answer.
|
||||
|
||||
If you have identified a problem with jsPsych, such as a bug in the code or an error in the documentation, please [open a new issue](https://github.com/jspsych/jsPsych/issues/new) on the GitHub site. And if you have a suggestion for fixing the problem, feel free to propose a modification by following the steps in the [Contribuitng to jsPsych](contributing.md) page.
|
||||
|
||||
Inquiries for paid consultation to develop experiments using jsPsych or to create new custom jsPsych features can be sent to [josh.deleeuw@gmail.com](mailto:josh.deleeuw@gmail.com).
|
||||
@ -1,19 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-init-camera.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-calibrate.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-validate.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/js/webgazer/webgazer.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/extensions/jspsych-ext-webgazer.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.0.0"></script>
|
||||
<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="js/webgazer/webgazer.js"></script>
|
||||
<script src="https://unpkg.com/@jspsych/extension-webgazer@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -24,13 +24,19 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych({
|
||||
extensions: [
|
||||
{type: jsPsychExtensionWebgazer}
|
||||
]
|
||||
});
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: ['img/blue.png']
|
||||
}
|
||||
|
||||
var camera_instructions = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>In order to participate you must allow the experiment to use your camera.</p>
|
||||
<p>You will be prompted to do this on the next screen.</p>
|
||||
@ -41,11 +47,11 @@
|
||||
}
|
||||
|
||||
var init_camera = {
|
||||
type: 'webgazer-init-camera'
|
||||
type: jsPsychWebgazerInitCamera
|
||||
}
|
||||
|
||||
var calibration_instructions = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>Now you'll calibrate the eye tracking, so that the software can use the image of your eyes to predict where you are looking.</p>
|
||||
<p>You'll see a series of dots appear on the screen. Look at each dot and click on it.</p>
|
||||
@ -54,7 +60,7 @@
|
||||
}
|
||||
|
||||
var calibration = {
|
||||
type: 'webgazer-calibrate',
|
||||
type: jsPsychWebgazerCalibrate,
|
||||
calibration_points: [
|
||||
[25,25],[75,25],[50,50],[25,75],[75,75]
|
||||
],
|
||||
@ -63,7 +69,7 @@
|
||||
}
|
||||
|
||||
var validation_instructions = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>Now we'll measure the accuracy of the calibration.</p>
|
||||
<p>Look at each dot as it appears on the screen.</p>
|
||||
@ -74,7 +80,7 @@
|
||||
}
|
||||
|
||||
var validation = {
|
||||
type: 'webgazer-validate',
|
||||
type: jsPsychWebgazerValidate,
|
||||
validation_points: [
|
||||
[25,25],[75,25],[50,50],[25,75],[75,75]
|
||||
],
|
||||
@ -87,7 +93,7 @@
|
||||
}
|
||||
|
||||
var recalibrate_instructions = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>The accuracy of the calibration is a little lower than we'd like.</p>
|
||||
<p>Let's try calibrating one more time.</p>
|
||||
@ -111,7 +117,7 @@
|
||||
}
|
||||
|
||||
var calibration_done = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>Great, we're done with calibration!</p>
|
||||
`,
|
||||
@ -119,7 +125,7 @@
|
||||
}
|
||||
|
||||
var begin = {
|
||||
type: 'html-keyboard-response',
|
||||
type: jsPsychHtmKeyboardResponse,
|
||||
stimulus: `<p>The next screen will show an image to demonstrate adding the webgazer extension to a trial.</p>
|
||||
<p>Just look at the image while eye tracking data is collected. The trial will end automatically.</p>
|
||||
<p>Press any key to start.</p>
|
||||
@ -127,20 +133,20 @@
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'image-keyboard-response',
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'img/blue.png',
|
||||
choices: jsPsych.NO_KEYS,
|
||||
trial_duration: 2000,
|
||||
extensions: [
|
||||
{
|
||||
type: 'webgazer',
|
||||
type: jsPsychExtensionWebgazer,
|
||||
params: {targets: ['#jspsych-image-keyboard-response-stimulus']}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: 'html-keyboard-response',
|
||||
type: jsPsychHtmKeyboardResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -150,8 +156,7 @@
|
||||
choices: jsPsych.NO_KEYS
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [
|
||||
jsPsych.run([
|
||||
preload,
|
||||
camera_instructions,
|
||||
init_camera,
|
||||
@ -164,11 +169,7 @@
|
||||
begin,
|
||||
trial,
|
||||
show_data
|
||||
],
|
||||
extensions: [
|
||||
{type: 'webgazer'}
|
||||
]
|
||||
});
|
||||
]);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
BIN
docs/demos/img/con2.png
Normal file
BIN
docs/demos/img/con2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
4451
docs/demos/js/snap.svg-min.js
vendored
Normal file
4451
docs/demos/js/snap.svg-min.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
136
docs/demos/js/webgazer/ridgeWorker.mjs
Normal file
136
docs/demos/js/webgazer/ridgeWorker.mjs
Normal file
@ -0,0 +1,136 @@
|
||||
"use strict";
|
||||
|
||||
console.log("thread starting");
|
||||
|
||||
// Add src/util.mjs and src/mat.mjs to the same directory as your html file
|
||||
importScripts("./worker_scripts/util.js", "./worker_scripts/mat.js"); // [20200708] Figure out how to make all of this wrap up neatly
|
||||
var ridgeParameter = Math.pow(10, -5);
|
||||
var resizeWidth = 10;
|
||||
var resizeHeight = 6;
|
||||
var dataWindow = 700;
|
||||
var trailDataWindow = 10;
|
||||
var trainInterval = 500;
|
||||
|
||||
var screenXClicksArray = new self.webgazer.util.DataWindow(dataWindow);
|
||||
var screenYClicksArray = new self.webgazer.util.DataWindow(dataWindow);
|
||||
var eyeFeaturesClicks = new self.webgazer.util.DataWindow(dataWindow);
|
||||
var dataClicks = new self.webgazer.util.DataWindow(dataWindow);
|
||||
|
||||
var screenXTrailArray = new self.webgazer.util.DataWindow(trailDataWindow);
|
||||
var screenYTrailArray = new self.webgazer.util.DataWindow(trailDataWindow);
|
||||
var eyeFeaturesTrail = new self.webgazer.util.DataWindow(trailDataWindow);
|
||||
var dataTrail = new self.webgazer.util.DataWindow(trailDataWindow);
|
||||
|
||||
/**
|
||||
* Performs ridge regression, according to the Weka code.
|
||||
* @param {Array} y - corresponds to screen coordinates (either x or y) for each of n click events
|
||||
* @param {Array.<Array.<Number>>} X - corresponds to gray pixel features (120 pixels for both eyes) for each of n clicks
|
||||
* @param {Array} k - ridge parameter
|
||||
* @return{Array} regression coefficients
|
||||
*/
|
||||
function ridge(y, X, k) {
|
||||
var nc = X[0].length;
|
||||
var m_Coefficients = new Array(nc);
|
||||
var xt = self.webgazer.mat.transpose(X);
|
||||
var solution = new Array();
|
||||
var success = true;
|
||||
do {
|
||||
var ss = self.webgazer.mat.mult(xt, X);
|
||||
// Set ridge regression adjustment
|
||||
for (var i = 0; i < nc; i++) {
|
||||
ss[i][i] = ss[i][i] + k;
|
||||
}
|
||||
|
||||
// Carry out the regression
|
||||
var bb = self.webgazer.mat.mult(xt, y);
|
||||
for (var i = 0; i < nc; i++) {
|
||||
m_Coefficients[i] = bb[i][0];
|
||||
}
|
||||
try {
|
||||
var n = m_Coefficients.length !== 0 ? m_Coefficients.length / m_Coefficients.length : 0;
|
||||
if (m_Coefficients.length * n !== m_Coefficients.length) {
|
||||
console.log("Array length must be a multiple of m");
|
||||
}
|
||||
solution =
|
||||
ss.length === ss[0].length
|
||||
? self.webgazer.mat.LUDecomposition(ss, bb)
|
||||
: self.webgazer.mat.QRDecomposition(ss, bb);
|
||||
|
||||
for (var i = 0; i < nc; i++) {
|
||||
m_Coefficients[i] = solution[i][0];
|
||||
}
|
||||
success = true;
|
||||
} catch (ex) {
|
||||
k *= 10;
|
||||
console.log(ex);
|
||||
success = false;
|
||||
}
|
||||
} while (!success);
|
||||
return m_Coefficients;
|
||||
}
|
||||
|
||||
//TODO: still usefull ???
|
||||
/**
|
||||
*
|
||||
* @returns {Number}
|
||||
*/
|
||||
function getCurrentFixationIndex() {
|
||||
var index = 0;
|
||||
var recentX = this.screenXTrailArray.get(0);
|
||||
var recentY = this.screenYTrailArray.get(0);
|
||||
for (var i = this.screenXTrailArray.length - 1; i >= 0; i--) {
|
||||
var currX = this.screenXTrailArray.get(i);
|
||||
var currY = this.screenYTrailArray.get(i);
|
||||
var euclideanDistance = Math.sqrt(Math.pow(currX - recentX, 2) + Math.pow(currY - recentY, 2));
|
||||
if (euclideanDistance > 72) {
|
||||
return i + 1;
|
||||
}
|
||||
}
|
||||
return i;
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handler, it store screen position to allow training
|
||||
* @param {Event} event - the receive event
|
||||
*/
|
||||
self.onmessage = function (event) {
|
||||
var data = event.data;
|
||||
var screenPos = data["screenPos"];
|
||||
var eyes = data["eyes"];
|
||||
var type = data["type"];
|
||||
if (type === "click") {
|
||||
self.screenXClicksArray.push([screenPos[0]]);
|
||||
self.screenYClicksArray.push([screenPos[1]]);
|
||||
|
||||
self.eyeFeaturesClicks.push(eyes);
|
||||
} else if (type === "move") {
|
||||
self.screenXTrailArray.push([screenPos[0]]);
|
||||
self.screenYTrailArray.push([screenPos[1]]);
|
||||
|
||||
self.eyeFeaturesTrail.push(eyes);
|
||||
self.dataTrail.push({ eyes: eyes, screenPos: screenPos, type: type });
|
||||
}
|
||||
self.needsTraining = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Compute coefficient from training data
|
||||
*/
|
||||
function retrain() {
|
||||
if (self.screenXClicksArray.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (!self.needsTraining) {
|
||||
return;
|
||||
}
|
||||
var screenXArray = self.screenXClicksArray.data.concat(self.screenXTrailArray.data);
|
||||
var screenYArray = self.screenYClicksArray.data.concat(self.screenYTrailArray.data);
|
||||
var eyeFeatures = self.eyeFeaturesClicks.data.concat(self.eyeFeaturesTrail.data);
|
||||
|
||||
var coefficientsX = ridge(screenXArray, eyeFeatures, ridgeParameter);
|
||||
var coefficientsY = ridge(screenYArray, eyeFeatures, ridgeParameter);
|
||||
self.postMessage({ X: coefficientsX, Y: coefficientsY });
|
||||
self.needsTraining = false;
|
||||
}
|
||||
|
||||
setInterval(retrain, trainInterval);
|
||||
99912
docs/demos/js/webgazer/webgazer.js
Normal file
99912
docs/demos/js/webgazer/webgazer.js
Normal file
File diff suppressed because it is too large
Load Diff
299
docs/demos/js/webgazer/worker_scripts/mat.js
Normal file
299
docs/demos/js/webgazer/worker_scripts/mat.js
Normal file
@ -0,0 +1,299 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
self.webgazer = self.webgazer || {};
|
||||
self.webgazer.mat = self.webgazer.mat || {};
|
||||
|
||||
/**
|
||||
* Transposes an mxn array
|
||||
* @param {Array.<Array.<Number>>} matrix - of 'M x N' dimensionality
|
||||
* @return {Array.<Array.<Number>>} transposed matrix
|
||||
*/
|
||||
self.webgazer.mat.transpose = function (matrix) {
|
||||
var m = matrix.length;
|
||||
var n = matrix[0].length;
|
||||
var transposedMatrix = new Array(n);
|
||||
|
||||
for (var i = 0; i < m; i++) {
|
||||
for (var j = 0; j < n; j++) {
|
||||
if (i === 0) transposedMatrix[j] = new Array(m);
|
||||
transposedMatrix[j][i] = matrix[i][j];
|
||||
}
|
||||
}
|
||||
|
||||
return transposedMatrix;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get a sub-matrix of matrix
|
||||
* @param {Array.<Array.<Number>>} matrix - original matrix
|
||||
* @param {Array.<Number>} r - Array of row indices
|
||||
* @param {Number} j0 - Initial column index
|
||||
* @param {Number} j1 - Final column index
|
||||
* @returns {Array} The sub-matrix matrix(r(:),j0:j1)
|
||||
*/
|
||||
self.webgazer.mat.getMatrix = function (matrix, r, j0, j1) {
|
||||
var X = new Array(r.length),
|
||||
m = j1 - j0 + 1;
|
||||
|
||||
for (var i = 0; i < r.length; i++) {
|
||||
X[i] = new Array(m);
|
||||
for (var j = j0; j <= j1; j++) {
|
||||
X[i][j - j0] = matrix[r[i]][j];
|
||||
}
|
||||
}
|
||||
return X;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get a submatrix of matrix
|
||||
* @param {Array.<Array.<Number>>} matrix - original matrix
|
||||
* @param {Number} i0 - Initial row index
|
||||
* @param {Number} i1 - Final row index
|
||||
* @param {Number} j0 - Initial column index
|
||||
* @param {Number} j1 - Final column index
|
||||
* @return {Array} The sub-matrix matrix(i0:i1,j0:j1)
|
||||
*/
|
||||
self.webgazer.mat.getSubMatrix = function (matrix, i0, i1, j0, j1) {
|
||||
var size = j1 - j0 + 1,
|
||||
X = new Array(i1 - i0 + 1);
|
||||
|
||||
for (var i = i0; i <= i1; i++) {
|
||||
var subI = i - i0;
|
||||
|
||||
X[subI] = new Array(size);
|
||||
|
||||
for (var j = j0; j <= j1; j++) {
|
||||
X[subI][j - j0] = matrix[i][j];
|
||||
}
|
||||
}
|
||||
return X;
|
||||
};
|
||||
|
||||
/**
|
||||
* Linear algebraic matrix multiplication, matrix1 * matrix2
|
||||
* @param {Array.<Array.<Number>>} matrix1
|
||||
* @param {Array.<Array.<Number>>} matrix2
|
||||
* @return {Array.<Array.<Number>>} Matrix product, matrix1 * matrix2
|
||||
*/
|
||||
self.webgazer.mat.mult = function (matrix1, matrix2) {
|
||||
if (matrix2.length != matrix1[0].length) {
|
||||
console.log("Matrix inner dimensions must agree:");
|
||||
}
|
||||
|
||||
var X = new Array(matrix1.length),
|
||||
Bcolj = new Array(matrix1[0].length);
|
||||
|
||||
for (var j = 0; j < matrix2[0].length; j++) {
|
||||
for (var k = 0; k < matrix1[0].length; k++) {
|
||||
Bcolj[k] = matrix2[k][j];
|
||||
}
|
||||
for (var i = 0; i < matrix1.length; i++) {
|
||||
if (j === 0) X[i] = new Array(matrix2[0].length);
|
||||
|
||||
var Arowi = matrix1[i];
|
||||
var s = 0;
|
||||
for (var k = 0; k < matrix1[0].length; k++) {
|
||||
s += Arowi[k] * Bcolj[k];
|
||||
}
|
||||
X[i][j] = s;
|
||||
}
|
||||
}
|
||||
return X;
|
||||
};
|
||||
|
||||
/**
|
||||
* LUDecomposition to solve A*X = B, based on WEKA code
|
||||
* @param {Array.<Array.<Number>>} A - left matrix of equation to be solved
|
||||
* @param {Array.<Array.<Number>>} B - right matrix of equation to be solved
|
||||
* @return {Array.<Array.<Number>>} X so that L*U*X = B(piv,:)
|
||||
*/
|
||||
self.webgazer.mat.LUDecomposition = function (A, B) {
|
||||
var LU = new Array(A.length);
|
||||
|
||||
for (var i = 0; i < A.length; i++) {
|
||||
LU[i] = new Array(A[0].length);
|
||||
for (var j = 0; j < A[0].length; j++) {
|
||||
LU[i][j] = A[i][j];
|
||||
}
|
||||
}
|
||||
|
||||
var m = A.length;
|
||||
var n = A[0].length;
|
||||
var piv = new Array(m);
|
||||
for (var i = 0; i < m; i++) {
|
||||
piv[i] = i;
|
||||
}
|
||||
var pivsign = 1;
|
||||
var LUrowi = new Array();
|
||||
var LUcolj = new Array(m);
|
||||
// Outer loop.
|
||||
for (var j = 0; j < n; j++) {
|
||||
// Make a copy of the j-th column to localize references.
|
||||
for (var i = 0; i < m; i++) {
|
||||
LUcolj[i] = LU[i][j];
|
||||
}
|
||||
// Apply previous transformations.
|
||||
for (var i = 0; i < m; i++) {
|
||||
LUrowi = LU[i];
|
||||
// Most of the time is spent in the following dot product.
|
||||
var kmax = Math.min(i, j);
|
||||
var s = 0;
|
||||
for (var k = 0; k < kmax; k++) {
|
||||
s += LUrowi[k] * LUcolj[k];
|
||||
}
|
||||
LUrowi[j] = LUcolj[i] -= s;
|
||||
}
|
||||
// Find pivot and exchange if necessary.
|
||||
var p = j;
|
||||
for (var i = j + 1; i < m; i++) {
|
||||
if (Math.abs(LUcolj[i]) > Math.abs(LUcolj[p])) {
|
||||
p = i;
|
||||
}
|
||||
}
|
||||
if (p != j) {
|
||||
for (var k = 0; k < n; k++) {
|
||||
var t = LU[p][k];
|
||||
LU[p][k] = LU[j][k];
|
||||
LU[j][k] = t;
|
||||
}
|
||||
var k = piv[p];
|
||||
piv[p] = piv[j];
|
||||
piv[j] = k;
|
||||
pivsign = -pivsign;
|
||||
}
|
||||
// Compute multipliers.
|
||||
if ((j < m) & (LU[j][j] != 0)) {
|
||||
for (var i = j + 1; i < m; i++) {
|
||||
LU[i][j] /= LU[j][j];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (B.length != m) {
|
||||
console.log("Matrix row dimensions must agree.");
|
||||
}
|
||||
for (var j = 0; j < n; j++) {
|
||||
if (LU[j][j] === 0) {
|
||||
console.log("Matrix is singular.");
|
||||
}
|
||||
}
|
||||
var nx = B[0].length;
|
||||
var X = self.webgazer.mat.getMatrix(B, piv, 0, nx - 1);
|
||||
// Solve L*Y = B(piv,:)
|
||||
for (var k = 0; k < n; k++) {
|
||||
for (var i = k + 1; i < n; i++) {
|
||||
for (var j = 0; j < nx; j++) {
|
||||
X[i][j] -= X[k][j] * LU[i][k];
|
||||
}
|
||||
}
|
||||
}
|
||||
// Solve U*X = Y;
|
||||
for (var k = n - 1; k >= 0; k--) {
|
||||
for (var j = 0; j < nx; j++) {
|
||||
X[k][j] /= LU[k][k];
|
||||
}
|
||||
for (var i = 0; i < k; i++) {
|
||||
for (var j = 0; j < nx; j++) {
|
||||
X[i][j] -= X[k][j] * LU[i][k];
|
||||
}
|
||||
}
|
||||
}
|
||||
return X;
|
||||
};
|
||||
|
||||
/**
|
||||
* Least squares solution of A*X = B, based on WEKA code
|
||||
* @param {Array.<Array.<Number>>} A - left side matrix to be solved
|
||||
* @param {Array.<Array.<Number>>} B - a matrix with as many rows as A and any number of columns.
|
||||
* @return {Array.<Array.<Number>>} X - that minimizes the two norms of QR*X-B.
|
||||
*/
|
||||
self.webgazer.mat.QRDecomposition = function (A, B) {
|
||||
// Initialize.
|
||||
var QR = new Array(A.length);
|
||||
|
||||
for (var i = 0; i < A.length; i++) {
|
||||
QR[i] = new Array(A[0].length);
|
||||
for (var j = 0; j < A[0].length; j++) {
|
||||
QR[i][j] = A[i][j];
|
||||
}
|
||||
}
|
||||
var m = A.length;
|
||||
var n = A[0].length;
|
||||
var Rdiag = new Array(n);
|
||||
var nrm;
|
||||
|
||||
// Main loop.
|
||||
for (var k = 0; k < n; k++) {
|
||||
// Compute 2-norm of k-th column without under/overflow.
|
||||
nrm = 0;
|
||||
for (var i = k; i < m; i++) {
|
||||
nrm = Math.hypot(nrm, QR[i][k]);
|
||||
}
|
||||
if (nrm != 0) {
|
||||
// Form k-th Householder vector.
|
||||
if (QR[k][k] < 0) {
|
||||
nrm = -nrm;
|
||||
}
|
||||
for (var i = k; i < m; i++) {
|
||||
QR[i][k] /= nrm;
|
||||
}
|
||||
QR[k][k] += 1;
|
||||
|
||||
// Apply transformation to remaining columns.
|
||||
for (var j = k + 1; j < n; j++) {
|
||||
var s = 0;
|
||||
for (var i = k; i < m; i++) {
|
||||
s += QR[i][k] * QR[i][j];
|
||||
}
|
||||
s = -s / QR[k][k];
|
||||
for (var i = k; i < m; i++) {
|
||||
QR[i][j] += s * QR[i][k];
|
||||
}
|
||||
}
|
||||
}
|
||||
Rdiag[k] = -nrm;
|
||||
}
|
||||
if (B.length != m) {
|
||||
console.log("Matrix row dimensions must agree.");
|
||||
}
|
||||
for (var j = 0; j < n; j++) {
|
||||
if (Rdiag[j] === 0) console.log("Matrix is rank deficient");
|
||||
}
|
||||
// Copy right hand side
|
||||
var nx = B[0].length;
|
||||
var X = new Array(B.length);
|
||||
for (var i = 0; i < B.length; i++) {
|
||||
X[i] = new Array(B[0].length);
|
||||
}
|
||||
for (var i = 0; i < B.length; i++) {
|
||||
for (var j = 0; j < B[0].length; j++) {
|
||||
X[i][j] = B[i][j];
|
||||
}
|
||||
}
|
||||
// Compute Y = transpose(Q)*B
|
||||
for (var k = 0; k < n; k++) {
|
||||
for (var j = 0; j < nx; j++) {
|
||||
var s = 0.0;
|
||||
for (var i = k; i < m; i++) {
|
||||
s += QR[i][k] * X[i][j];
|
||||
}
|
||||
s = -s / QR[k][k];
|
||||
for (var i = k; i < m; i++) {
|
||||
X[i][j] += s * QR[i][k];
|
||||
}
|
||||
}
|
||||
}
|
||||
// Solve R*X = Y;
|
||||
for (var k = n - 1; k >= 0; k--) {
|
||||
for (var j = 0; j < nx; j++) {
|
||||
X[k][j] /= Rdiag[k];
|
||||
}
|
||||
for (var i = 0; i < k; i++) {
|
||||
for (var j = 0; j < nx; j++) {
|
||||
X[i][j] -= X[k][j] * QR[i][k];
|
||||
}
|
||||
}
|
||||
}
|
||||
return self.webgazer.mat.getSubMatrix(X, 0, n - 1, 0, nx - 1);
|
||||
};
|
||||
})();
|
||||
391
docs/demos/js/webgazer/worker_scripts/util.js
Normal file
391
docs/demos/js/webgazer/worker_scripts/util.js
Normal file
@ -0,0 +1,391 @@
|
||||
"use strict";
|
||||
(function () {
|
||||
self.webgazer = self.webgazer || {};
|
||||
self.webgazer.util = self.webgazer.util || {};
|
||||
self.webgazer.mat = self.webgazer.mat || {};
|
||||
|
||||
/**
|
||||
* Eye class, represents an eye patch detected in the video stream
|
||||
* @param {ImageData} patch - the image data corresponding to an eye
|
||||
* @param {Number} imagex - x-axis offset from the top-left corner of the video canvas
|
||||
* @param {Number} imagey - y-axis offset from the top-left corner of the video canvas
|
||||
* @param {Number} width - width of the eye patch
|
||||
* @param {Number} height - height of the eye patch
|
||||
*/
|
||||
self.webgazer.util.Eye = function (patch, imagex, imagey, width, height) {
|
||||
this.patch = patch;
|
||||
this.imagex = imagex;
|
||||
this.imagey = imagey;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
};
|
||||
|
||||
//Data Window class
|
||||
//operates like an array but 'wraps' data around to keep the array at a fixed windowSize
|
||||
/**
|
||||
* DataWindow class - Operates like an array, but 'wraps' data around to keep the array at a fixed windowSize
|
||||
* @param {Number} windowSize - defines the maximum size of the window
|
||||
* @param {Array} data - optional data to seed the DataWindow with
|
||||
**/
|
||||
self.webgazer.util.DataWindow = function (windowSize, data) {
|
||||
this.data = [];
|
||||
this.windowSize = windowSize;
|
||||
this.index = 0;
|
||||
this.length = 0;
|
||||
if (data) {
|
||||
this.data = data.slice(data.length - windowSize, data.length);
|
||||
this.length = this.data.length;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* [push description]
|
||||
* @param {*} entry - item to be inserted. It either grows the DataWindow or replaces the oldest item
|
||||
* @return {DataWindow} this
|
||||
*/
|
||||
self.webgazer.util.DataWindow.prototype.push = function (entry) {
|
||||
if (this.data.length < this.windowSize) {
|
||||
this.data.push(entry);
|
||||
this.length = this.data.length;
|
||||
return this;
|
||||
}
|
||||
|
||||
//replace oldest entry by wrapping around the DataWindow
|
||||
this.data[this.index] = entry;
|
||||
this.index = (this.index + 1) % this.windowSize;
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the element at the ind position by wrapping around the DataWindow
|
||||
* @param {Number} ind index of desired entry
|
||||
* @return {*}
|
||||
*/
|
||||
self.webgazer.util.DataWindow.prototype.get = function (ind) {
|
||||
return this.data[this.getTrueIndex(ind)];
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the true this.data array index given an index for a desired element
|
||||
* @param {Number} ind - index of desired entry
|
||||
* @return {Number} index of desired entry in this.data
|
||||
*/
|
||||
self.webgazer.util.DataWindow.prototype.getTrueIndex = function (ind) {
|
||||
if (this.data.length < this.windowSize) {
|
||||
return ind;
|
||||
} else {
|
||||
//wrap around ind so that we can traverse from oldest to newest
|
||||
return (ind + this.index) % this.windowSize;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Append all the contents of data
|
||||
* @param {Array} data - to be inserted
|
||||
*/
|
||||
self.webgazer.util.DataWindow.prototype.addAll = function (data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
this.push(data[i]);
|
||||
}
|
||||
};
|
||||
|
||||
//Helper functions
|
||||
/**
|
||||
* Grayscales an image patch. Can be used for the whole canvas, detected face, detected eye, etc.
|
||||
*
|
||||
* Code from tracking.js by Eduardo Lundgren, et al.
|
||||
* https://github.com/eduardolundgren/tracking.js/blob/master/src/tracking.js
|
||||
*
|
||||
* Software License Agreement (BSD License) Copyright (c) 2014, Eduardo A. Lundgren Melo. All rights reserved.
|
||||
* Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
||||
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
||||
* The name of Eduardo A. Lundgren Melo may not be used to endorse or promote products derived from this software without specific prior written permission of Eduardo A. Lundgren Melo.
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
|
||||
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
|
||||
* HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
* @param {Array} pixels - image data to be grayscaled
|
||||
* @param {Number} width - width of image data to be grayscaled
|
||||
* @param {Number} height - height of image data to be grayscaled
|
||||
* @return {Array} grayscaledImage
|
||||
*/
|
||||
self.webgazer.util.grayscale = function (pixels, width, height) {
|
||||
var gray = new Uint8ClampedArray(pixels.length >> 2);
|
||||
var p = 0;
|
||||
var w = 0;
|
||||
for (var i = 0; i < height; i++) {
|
||||
for (var j = 0; j < width; j++) {
|
||||
var value = pixels[w] * 0.299 + pixels[w + 1] * 0.587 + pixels[w + 2] * 0.114;
|
||||
gray[p++] = value;
|
||||
|
||||
w += 4;
|
||||
}
|
||||
}
|
||||
return gray;
|
||||
};
|
||||
|
||||
/**
|
||||
* Increase contrast of an image.
|
||||
*
|
||||
* Code from Martin Tschirsich, Copyright (c) 2012.
|
||||
* https://github.com/mtschirs/js-objectdetect/blob/gh-pages/js/objectdetect.js
|
||||
*
|
||||
* @param {Array} src - grayscale integer array
|
||||
* @param {Number} step - sampling rate, control performance
|
||||
* @param {Array} dst - array to hold the resulting image
|
||||
*/
|
||||
self.webgazer.util.equalizeHistogram = function (src, step, dst) {
|
||||
var srcLength = src.length;
|
||||
if (!dst) dst = src;
|
||||
if (!step) step = 5;
|
||||
|
||||
// Compute histogram and histogram sum:
|
||||
var hist = [
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0,
|
||||
];
|
||||
|
||||
for (var i = 0; i < srcLength; i += step) {
|
||||
++hist[src[i]];
|
||||
}
|
||||
|
||||
// Compute integral histogram:
|
||||
var norm = (255 * step) / srcLength,
|
||||
prev = 0;
|
||||
for (var i = 0; i < 256; ++i) {
|
||||
var h = hist[i];
|
||||
prev = h += prev;
|
||||
hist[i] = h * norm; // For non-integer src: ~~(h * norm + 0.5);
|
||||
}
|
||||
|
||||
// Equalize image:
|
||||
for (var i = 0; i < srcLength; ++i) {
|
||||
dst[i] = hist[src[i]];
|
||||
}
|
||||
return dst;
|
||||
};
|
||||
|
||||
self.webgazer.util.threshold = function (data, threshold) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
data[i] = data[i] > threshold ? 255 : 0;
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
self.webgazer.util.correlation = function (data1, data2) {
|
||||
const length = Math.min(data1.length, data2.length);
|
||||
let count = 0;
|
||||
for (let i = 0; i < length; i++) {
|
||||
if (data1[i] === data2[i]) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return count / Math.max(data1.length, data2.length);
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets an Eye object and resizes it to the desired resolution
|
||||
* @param {webgazer.util.Eye} eye - patch to be resized
|
||||
* @param {Number} resizeWidth - desired width
|
||||
* @param {Number} resizeHeight - desired height
|
||||
* @return {webgazer.util.Eye} resized eye patch
|
||||
*/
|
||||
self.webgazer.util.resizeEye = function (eye, resizeWidth, resizeHeight) {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = eye.width;
|
||||
canvas.height = eye.height;
|
||||
|
||||
canvas.getContext("2d").putImageData(eye.patch, 0, 0);
|
||||
|
||||
var tempCanvas = document.createElement("canvas");
|
||||
|
||||
tempCanvas.width = resizeWidth;
|
||||
tempCanvas.height = resizeHeight;
|
||||
|
||||
// save the canvas into temp canvas
|
||||
tempCanvas
|
||||
.getContext("2d")
|
||||
.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, resizeWidth, resizeHeight);
|
||||
|
||||
return tempCanvas.getContext("2d").getImageData(0, 0, resizeWidth, resizeHeight);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if the prediction is within the boundaries of the viewport and constrains it
|
||||
* @param {Array} prediction [x,y] - predicted gaze coordinates
|
||||
* @return {Array} constrained coordinates
|
||||
*/
|
||||
self.webgazer.util.bound = function (prediction) {
|
||||
if (prediction.x < 0) prediction.x = 0;
|
||||
if (prediction.y < 0) prediction.y = 0;
|
||||
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
if (prediction.x > w) {
|
||||
prediction.x = w;
|
||||
}
|
||||
|
||||
if (prediction.y > h) {
|
||||
prediction.y = h;
|
||||
}
|
||||
return prediction;
|
||||
};
|
||||
|
||||
/**
|
||||
* Write statistics in debug paragraph panel
|
||||
* @param {HTMLElement} para - The <p> tag where write data
|
||||
* @param {Object} stats - The stats data to output
|
||||
*/
|
||||
function debugBoxWrite(para, stats) {
|
||||
var str = "";
|
||||
for (var key in stats) {
|
||||
str += key + ": " + stats[key] + "\n";
|
||||
}
|
||||
para.innerText = str;
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructor of DebugBox object,
|
||||
* it insert an paragraph inside a div to the body, in view to display debug data
|
||||
* @param {Number} interval - The log interval
|
||||
* @constructor
|
||||
*/
|
||||
self.webgazer.util.DebugBox = function (interval) {
|
||||
this.para = document.createElement("p");
|
||||
this.div = document.createElement("div");
|
||||
this.div.appendChild(this.para);
|
||||
document.body.appendChild(this.div);
|
||||
|
||||
this.buttons = {};
|
||||
this.canvas = {};
|
||||
this.stats = {};
|
||||
var updateInterval = interval || 300;
|
||||
(function (localThis) {
|
||||
setInterval(function () {
|
||||
debugBoxWrite(localThis.para, localThis.stats);
|
||||
}, updateInterval);
|
||||
})(this);
|
||||
};
|
||||
|
||||
/**
|
||||
* Add stat data for log
|
||||
* @param {String} key - The data key
|
||||
* @param {*} value - The value
|
||||
*/
|
||||
self.webgazer.util.DebugBox.prototype.set = function (key, value) {
|
||||
this.stats[key] = value;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize stats in case where key does not exist, else
|
||||
* increment value for key
|
||||
* @param {String} key - The key to process
|
||||
* @param {Number} incBy - Value to increment for given key (default: 1)
|
||||
* @param {Number} init - Initial value in case where key does not exist (default: 0)
|
||||
*/
|
||||
self.webgazer.util.DebugBox.prototype.inc = function (key, incBy, init) {
|
||||
if (!this.stats[key]) {
|
||||
this.stats[key] = init || 0;
|
||||
}
|
||||
this.stats[key] += incBy || 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a button and register the given function to the button click event
|
||||
* @param {String} name - The button name to link
|
||||
* @param {Function} func - The onClick callback
|
||||
*/
|
||||
self.webgazer.util.DebugBox.prototype.addButton = function (name, func) {
|
||||
if (!this.buttons[name]) {
|
||||
this.buttons[name] = document.createElement("button");
|
||||
this.div.appendChild(this.buttons[name]);
|
||||
}
|
||||
var button = this.buttons[name];
|
||||
this.buttons[name] = button;
|
||||
button.addEventListener("click", func);
|
||||
button.innerText = name;
|
||||
};
|
||||
|
||||
/**
|
||||
* Search for a canvas elemenet with name, or create on if not exist.
|
||||
* Then send the canvas element as callback parameter.
|
||||
* @param {String} name - The canvas name to send/create
|
||||
* @param {Function} func - The callback function where send canvas
|
||||
*/
|
||||
self.webgazer.util.DebugBox.prototype.show = function (name, func) {
|
||||
if (!this.canvas[name]) {
|
||||
this.canvas[name] = document.createElement("canvas");
|
||||
this.div.appendChild(this.canvas[name]);
|
||||
}
|
||||
var canvas = this.canvas[name];
|
||||
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
|
||||
func(canvas);
|
||||
};
|
||||
|
||||
/**
|
||||
* Kalman Filter constructor
|
||||
* Kalman filters work by reducing the amount of noise in a models.
|
||||
* https://blog.cordiner.net/2011/05/03/object-tracking-using-a-kalman-filter-matlab/
|
||||
*
|
||||
* @param {Array.<Array.<Number>>} F - transition matrix
|
||||
* @param {Array.<Array.<Number>>} Q - process noise matrix
|
||||
* @param {Array.<Array.<Number>>} H - maps between measurement vector and noise matrix
|
||||
* @param {Array.<Array.<Number>>} R - defines measurement error of the device
|
||||
* @param {Array} P_initial - the initial state
|
||||
* @param {Array} X_initial - the initial state of the device
|
||||
*/
|
||||
self.webgazer.util.KalmanFilter = function (F, H, Q, R, P_initial, X_initial) {
|
||||
this.F = F; // State transition matrix
|
||||
this.Q = Q; // Process noise matrix
|
||||
this.H = H; // Transformation matrix
|
||||
this.R = R; // Measurement Noise
|
||||
this.P = P_initial; //Initial covariance matrix
|
||||
this.X = X_initial; //Initial guess of measurement
|
||||
};
|
||||
|
||||
/**
|
||||
* Get Kalman next filtered value and update the internal state
|
||||
* @param {Array} z - the new measurement
|
||||
* @return {Array}
|
||||
*/
|
||||
self.webgazer.util.KalmanFilter.prototype.update = function (z) {
|
||||
// Here, we define all the different matrix operations we will need
|
||||
var add = numeric.add,
|
||||
sub = numeric.sub,
|
||||
inv = numeric.inv,
|
||||
identity = numeric.identity;
|
||||
var mult = webgazer.mat.mult,
|
||||
transpose = webgazer.mat.transpose;
|
||||
//TODO cache variables like the transpose of H
|
||||
|
||||
// prediction: X = F * X | P = F * P * F' + Q
|
||||
var X_p = mult(this.F, this.X); //Update state vector
|
||||
var P_p = add(mult(mult(this.F, this.P), transpose(this.F)), this.Q); //Predicted covaraince
|
||||
|
||||
//Calculate the update values
|
||||
var y = sub(z, mult(this.H, X_p)); // This is the measurement error (between what we expect and the actual value)
|
||||
var S = add(mult(mult(this.H, P_p), transpose(this.H)), this.R); //This is the residual covariance (the error in the covariance)
|
||||
|
||||
// kalman multiplier: K = P * H' * (H * P * H' + R)^-1
|
||||
var K = mult(P_p, mult(transpose(this.H), inv(S))); //This is the Optimal Kalman Gain
|
||||
|
||||
//We need to change Y into it's column vector form
|
||||
for (var i = 0; i < y.length; i++) {
|
||||
y[i] = [y[i]];
|
||||
}
|
||||
|
||||
//Now we correct the internal values of the model
|
||||
// correction: X = X + K * (m - H * X) | P = (I - K * H) * P
|
||||
this.X = add(X_p, mult(K, y));
|
||||
this.P = mult(sub(identity(K.length), mult(K, this.H)), P_p);
|
||||
return transpose(mult(this.H, this.X))[0]; //Transforms the predicted state back into it's measurement form
|
||||
};
|
||||
})();
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-animation.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-animation@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
#jspsych-animation-image {height:80% !important; width: 80% !important;}
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
@ -14,24 +14,26 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var animation_trial = {
|
||||
type: 'animation',
|
||||
type: jsPsychAnimation,
|
||||
stimuli: [
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
],
|
||||
sequence_reps: 3,
|
||||
frame_time: 300,
|
||||
@ -39,7 +41,7 @@
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -57,9 +59,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, animation_data_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, animation_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,24 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var timeline = [];
|
||||
|
||||
timeline.push({
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
});
|
||||
|
||||
timeline.push({
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
@ -26,14 +28,14 @@
|
||||
});
|
||||
|
||||
var trial = {
|
||||
type: 'audio-button-response',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/tone.mp3',
|
||||
type: jsPsychAudioButtonResponse,
|
||||
stimulus: 'sound/tone.mp3',
|
||||
choices: ['Low', 'High'],
|
||||
prompt: "<p>Is the pitch high or low?</p>"
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -51,9 +53,7 @@
|
||||
});
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var timeline = [];
|
||||
|
||||
// sound source: https://www.videvo.net/sound-effect/lion-growl-angry-gene-pe931902/249942/
|
||||
@ -17,13 +19,13 @@
|
||||
var images = ['img/lion.png', 'img/elephant.png', 'img/monkey.png']
|
||||
|
||||
timeline.push({
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true,
|
||||
images: images
|
||||
});
|
||||
|
||||
timeline.push({
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
@ -31,7 +33,7 @@
|
||||
});
|
||||
|
||||
var trial = {
|
||||
type: 'audio-button-response',
|
||||
type: jsPsychAudioButtonResponse,
|
||||
stimulus: 'sound/roar.mp3',
|
||||
choices: images,
|
||||
prompt: "<p>Which animal made the sound?</p>",
|
||||
@ -39,7 +41,7 @@
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -57,9 +59,7 @@
|
||||
});
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-keyboard-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var pre_audio = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
@ -24,15 +26,15 @@
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'audio-keyboard-response',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/tone.mp3',
|
||||
type: jsPsychAudioKeyboardResponse,
|
||||
stimulus: 'sound/tone.mp3',
|
||||
choices: ['e', 'i'],
|
||||
prompt: "<p>Is the pitch high or low? Press 'e' for low and 'i' for high.</p>",
|
||||
response_ends_trial: true
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -50,9 +52,7 @@
|
||||
}
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, pre_audio, trial_data_loop]
|
||||
});
|
||||
jsPsych.run([preload, pre_audio, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-keyboard-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var pre_audio = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
@ -24,14 +26,14 @@
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'audio-keyboard-response',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/tone.mp3',
|
||||
type: jsPsychAudioKeyboardResponse,
|
||||
stimulus: 'sound/tone.mp3',
|
||||
choices: jsPsych.NO_KEYS,
|
||||
trial_ends_after_audio: true
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -49,9 +51,7 @@
|
||||
}
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, pre_audio, trial_data_loop]
|
||||
});
|
||||
jsPsych.run([preload, pre_audio, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-slider-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
};
|
||||
|
||||
var pre_audio = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
@ -24,14 +26,14 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'audio-slider-response',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/speech_joke.mp3',
|
||||
type: jsPsychAudioSliderResponse,
|
||||
stimulus: 'sound/speech_joke.mp3',
|
||||
labels: ['Not Funny', 'Funny'],
|
||||
prompt: '<p>How funny is the joke?</p>'
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -49,9 +51,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, pre_audio, trial_data_loop]
|
||||
});
|
||||
jsPsych.run([preload, pre_audio, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-slider-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
};
|
||||
|
||||
var pre_audio = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
@ -24,8 +26,8 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'audio-slider-response',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/speech_joke.mp3',
|
||||
type: jsPsychAudioSliderResponse,
|
||||
stimulus: 'sound/speech_joke.mp3',
|
||||
labels: ['Not Funny', 'Funny'],
|
||||
prompt: '<p>How funny is the joke?</p>',
|
||||
response_allowed_while_playing: false,
|
||||
@ -33,7 +35,7 @@
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -51,9 +53,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, pre_audio, trial_data_loop]
|
||||
});
|
||||
jsPsych.run([preload, pre_audio, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-call-function.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -34,7 +36,7 @@
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
type: jsPsychCallFunction,
|
||||
func: myfunc
|
||||
}
|
||||
|
||||
@ -47,9 +49,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-call-function.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -39,7 +41,7 @@
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
type: jsPsychCallFunction,
|
||||
func: function(){ myfunc(jsPsych.data.get()) }
|
||||
}
|
||||
|
||||
@ -51,9 +53,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-call-function.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -30,7 +32,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
type: jsPsychCallFunction,
|
||||
async: true,
|
||||
func: function(done){
|
||||
// generate a delay between 1500 and 3000 milliseconds to simulate
|
||||
@ -52,9 +54,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var all_trial_data = jsPsych.data.get().filter({trial_type: 'canvas-button-response'});
|
||||
var last_two_data = all_trial_data.last(2).values(); // One block consists of two canvas-button-response trials
|
||||
@ -42,7 +44,7 @@
|
||||
}
|
||||
|
||||
var circle_1 = {
|
||||
type: 'canvas-button-response',
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
filledCirc(c, 100, 'blue');
|
||||
},
|
||||
@ -53,7 +55,7 @@
|
||||
};
|
||||
|
||||
var circle_2 = {
|
||||
type: 'canvas-button-response',
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
filledCirc(c, 150, 'green');
|
||||
},
|
||||
@ -73,9 +75,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, canvas_data_loop]
|
||||
});
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -32,7 +34,7 @@
|
||||
// write the canvas stimulus drawing function without using a named function
|
||||
// the anonymous function must take the canvas as an argument
|
||||
var lines = {
|
||||
type: 'canvas-button-response',
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
var ctx = c.getContext("2d");
|
||||
// first line
|
||||
@ -64,9 +66,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, canvas_data_loop]
|
||||
});
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var all_trial_data = jsPsych.data.get().filter({trial_type: 'canvas-button-response'});
|
||||
var last_three_data = all_trial_data.last(3).values(); // One block consists of three canvas-button-response trials
|
||||
@ -43,7 +45,7 @@
|
||||
// In addition, this code demonstrates how to check whether participants' answers were correct or not.
|
||||
var circle_procedure = {
|
||||
timeline: [{
|
||||
type: 'canvas-button-response',
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color'));
|
||||
},
|
||||
@ -75,9 +77,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, canvas_data_loop]
|
||||
});
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-keyboard-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -38,7 +40,7 @@
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'canvas-keyboard-response',
|
||||
type: jsPsychCanvasKeyboardResponse,
|
||||
canvas_size: [300, 300],
|
||||
stimulus: drawRect,
|
||||
choices: ['e','i'],
|
||||
@ -55,9 +57,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, canvas_data_loop]
|
||||
});
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-keyboard-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -38,7 +40,7 @@
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'canvas-keyboard-response',
|
||||
type: jsPsychCanvasKeyboardResponse,
|
||||
canvas_size: [300, 300],
|
||||
stimulus: drawCirc,
|
||||
prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>',
|
||||
@ -55,9 +57,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, canvas_data_loop]
|
||||
});
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-slider-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -42,7 +44,7 @@
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'canvas-slider-response',
|
||||
type: jsPsychCanvasSliderResponse,
|
||||
stimulus: twoSquares,
|
||||
labels: ['0','10'],
|
||||
canvas_size: [150, 500],
|
||||
@ -58,9 +60,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, canvas_data_loop]
|
||||
});
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-slider-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -42,7 +44,7 @@
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'canvas-slider-response',
|
||||
type: jsPsychCanvasSliderResponse,
|
||||
stimulus: function(c) {
|
||||
colors = ['darkred', 'cyan'];
|
||||
twoSquares(c, colors);
|
||||
@ -64,9 +66,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, canvas_data_loop]
|
||||
});
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-animation.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
#jspsych-categorize-animation-stimulus {height:80% !important; width: 80% !important;}
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
@ -14,14 +14,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -32,17 +34,17 @@
|
||||
};
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var animation_trial = {
|
||||
type: 'categorize-animation',
|
||||
type: jsPsychCategorizeAnimation,
|
||||
stimuli: [
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
],
|
||||
prompt: `Press the P or Q key.`,
|
||||
choices: ['p', 'q'],
|
||||
@ -58,9 +60,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-animation.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
#jspsych-categorize-animation-stimulus {height:80% !important; width: 80% !important;}
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
@ -14,14 +14,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -32,19 +34,19 @@
|
||||
};
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var images = [
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
];
|
||||
|
||||
var animation_trial = {
|
||||
type: 'categorize-animation',
|
||||
type: jsPsychCategorizeAnimation,
|
||||
stimuli: images,
|
||||
choices: ['p', 'q'],
|
||||
prompt: `Press the P or Q key.`,
|
||||
@ -62,9 +64,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-html.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-html@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,7 +32,7 @@
|
||||
};
|
||||
|
||||
var categorization_trial = {
|
||||
type: 'categorize-html',
|
||||
type: jsPsychCategorizeHtml,
|
||||
stimulus: '<p>B</p>',
|
||||
key_answer: 'p',
|
||||
text_answer: 'letter',
|
||||
@ -49,9 +50,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-image.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-image@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +13,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,13 +33,13 @@
|
||||
};
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var categorization_trial = {
|
||||
type: 'categorize-image',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/blue.png',
|
||||
type: jsPsychCategorizeImage,
|
||||
stimulus: 'img/blue.png',
|
||||
key_answer: 'b',
|
||||
text_answer: 'Blue',
|
||||
choices: ['r', 'g', 'b'],
|
||||
@ -55,9 +57,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-cloze.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,7 +32,7 @@
|
||||
};
|
||||
|
||||
var cloze_trial = {
|
||||
type: 'cloze',
|
||||
type: jsPsychCloze,
|
||||
text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.'
|
||||
};
|
||||
|
||||
@ -43,9 +44,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-cloze.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,7 +32,7 @@
|
||||
};
|
||||
|
||||
var cloze_trial = {
|
||||
type: 'cloze',
|
||||
type: jsPsychCloze,
|
||||
text: 'A rectangle has % 4 % corners and a triangle has % 3 %.',
|
||||
check_answers: true,
|
||||
button_text: 'Next',
|
||||
@ -46,9 +47,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-external-html.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-external-html@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -45,7 +46,7 @@
|
||||
|
||||
// declare the block.
|
||||
var trial = {
|
||||
type:'external-html',
|
||||
type: jsPsychExternalHtml,
|
||||
url: "external_page.html",
|
||||
cont_btn: "start",
|
||||
check_fn: check_consent
|
||||
@ -59,9 +60,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-free-sort.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-free-sort@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +13,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,19 +33,19 @@
|
||||
};
|
||||
|
||||
var sorting_stimuli = [
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg',
|
||||
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
]
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: sorting_stimuli
|
||||
}
|
||||
|
||||
var sort_trial = {
|
||||
type: 'free-sort',
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: sorting_stimuli,
|
||||
stim_width: 80,
|
||||
stim_height: 60,
|
||||
@ -61,9 +63,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-fullscreen.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-fullscreen@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
html, body { background-color: white;}
|
||||
@ -18,14 +17,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -36,24 +38,24 @@
|
||||
};
|
||||
|
||||
var enter_fullscreen = {
|
||||
type: 'fullscreen',
|
||||
type: jsPsychFullscreen,
|
||||
fullscreen_mode: true
|
||||
}
|
||||
|
||||
var trial_in_fullscreen = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: 'This trial will be in fullscreen mode.',
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var exit_fullscreen = {
|
||||
type: 'fullscreen',
|
||||
type: jsPsychFullscreen,
|
||||
fullscreen_mode: false,
|
||||
delay_after: 0
|
||||
}
|
||||
|
||||
var trial_after_fullscreen = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: 'This trial will NOT be in fullscreen mode.',
|
||||
choices: ['Continue']
|
||||
}
|
||||
@ -66,9 +68,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -12,14 +11,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -30,7 +31,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p>Running</p>',
|
||||
choices: ['Healthy', 'Unhealthy'],
|
||||
prompt: "<p>Is this activity healthy or unhealthy?</p>"
|
||||
@ -44,9 +45,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,7 +32,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'html-keyboard-response',
|
||||
type: jsPsychHtmKeyboardResponse,
|
||||
stimulus: '<p>Running</p>',
|
||||
choices: ['e', 'i'],
|
||||
prompt: "<p>Is this activity healthy or unhealthy?</p><p>Press 'e' for healthy and 'i' for unhealthy.</p>"
|
||||
@ -45,9 +46,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,7 +32,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'html-keyboard-response',
|
||||
type: jsPsychHtmKeyboardResponse,
|
||||
stimulus: '<p style="font-size: 48px;">+</p>',
|
||||
choices: jsPsych.NO_KEYS,
|
||||
trial_duration: 1000,
|
||||
@ -45,9 +46,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-slider-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,7 +32,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'html-slider-response',
|
||||
type: jsPsychHtmSliderResponse,
|
||||
stimulus: '<p>Running</p>',
|
||||
require_movement: true,
|
||||
labels: ['healthy', 'unhealthy'],
|
||||
@ -46,9 +47,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-iat-html.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-iat-html@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,7 +32,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'iat-html',
|
||||
type: jsPsychIatHtml,
|
||||
stimulus: 'Golf',
|
||||
stim_key_association: 'left',
|
||||
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
|
||||
@ -54,9 +55,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-iat-image.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-iat-image@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,19 +13,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreloadeload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -37,8 +39,8 @@
|
||||
|
||||
|
||||
var trial = {
|
||||
type: 'iat-image',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/blue.png',
|
||||
type: jsPsychIatImage,
|
||||
stimulus: 'img/blue.png',
|
||||
stim_key_association: 'left',
|
||||
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
|
||||
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
|
||||
@ -60,9 +62,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,19 +13,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -37,8 +39,8 @@
|
||||
|
||||
|
||||
var trial = {
|
||||
type: 'image-button-response',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['Happy', 'Sad'],
|
||||
prompt: "<p>Is this person happy or sad?</p>"
|
||||
};
|
||||
@ -51,9 +53,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,19 +13,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -37,8 +39,8 @@
|
||||
|
||||
|
||||
var trial = {
|
||||
type: 'image-keyboard-response',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['e', 'i'],
|
||||
prompt: "<p>Is this person happy or sad? Press 'e' for happy and 'i' for sad.</p>",
|
||||
};
|
||||
@ -51,9 +53,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,19 +13,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -36,8 +38,8 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'image-keyboard-response',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: jsPsych.NO_KEYS,
|
||||
prompt: "<p>Study this face for 5 seconds.</p>",
|
||||
trial_duration: 5000
|
||||
@ -51,9 +53,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-slider-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-slider-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,19 +13,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -36,8 +38,8 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'image-slider-response',
|
||||
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||
type: jsPsychImageSliderResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
labels: ['happy', 'sad'],
|
||||
prompt: "<p>How happy/sad is this person?</p>",
|
||||
};
|
||||
@ -50,9 +52,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Required for each demo -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
<!-- UPDATE depending on current demo -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var demo_trial = {
|
||||
type: 'instructions',
|
||||
type: jsPsychInstructions,
|
||||
pages: [
|
||||
'Welcome to the experiment. Click next to begin.',
|
||||
'This is the second page of instructions.',
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -55,9 +55,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, demo_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, demo_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,44 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Required for each demo -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
<!-- UPDATE depending on current demo -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var demo_trial = {
|
||||
type: 'instructions',
|
||||
type: jsPsychInstructions,
|
||||
pages: [
|
||||
'Welcome to the experiment. Click next to begin.',
|
||||
'You will be looking at images of arrows: ' +
|
||||
'<br>' +
|
||||
'<img src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/con2.png"></img>'
|
||||
'<img src="img/con2.png"></img>'
|
||||
],
|
||||
show_clickable_nav: true
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -56,9 +56,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, demo_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, demo_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Required for each demo -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
<!-- UPDATE depending on current demo -->
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var demo_trial = {
|
||||
type: 'instructions',
|
||||
type: jsPsychInstructions,
|
||||
pages: [
|
||||
'Welcome to the experiment. Click next to begin.',
|
||||
'This is the second page of instructions.',
|
||||
@ -39,7 +39,7 @@
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -57,9 +57,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, start, demo_loop]
|
||||
});
|
||||
jsPsych.run([preload_trial, start, demo_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-maxdiff.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-maxdiff@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,7 +32,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'maxdiff',
|
||||
type: jsPsychMaxdiff,
|
||||
alternatives: ['apple', 'orange', 'pear', 'banana'],
|
||||
labels: ['Most Preferred', 'Least Preferred'],
|
||||
preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>'
|
||||
@ -45,9 +46,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -18,14 +18,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -36,24 +38,24 @@
|
||||
};
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var trial_1 = {
|
||||
type: 'image-button-response',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_2 = {
|
||||
type: 'image-button-response',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_2.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_3 = {
|
||||
type: 'image-button-response',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_3.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
@ -66,9 +68,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -18,14 +18,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -36,12 +38,12 @@
|
||||
};
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: ['img/sad_face_1.jpg']
|
||||
}
|
||||
|
||||
var trial_1 = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>Study this face</p>
|
||||
<img src="img/sad_face_1.jpg"></img>
|
||||
@ -57,9 +59,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -18,14 +18,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(2).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -35,22 +37,20 @@
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
|
||||
|
||||
var trial_1 = {
|
||||
type: 'image-button-response',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_2 = {
|
||||
type: 'image-button-response',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_2.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_3 = {
|
||||
type: 'image-button-response',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_3.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
@ -60,19 +60,19 @@
|
||||
}
|
||||
|
||||
var trial_4 = {
|
||||
type: 'image-button-response',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/sad_face_1.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_5 = {
|
||||
type: 'image-button-response',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/sad_face_2.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_6 = {
|
||||
type: 'image-button-response',
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/sad_face_3.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
@ -82,12 +82,12 @@
|
||||
}
|
||||
|
||||
var preload_block_1 = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
trials: [block_1]
|
||||
}
|
||||
|
||||
var preload_block_2 = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
trials: [block_2]
|
||||
}
|
||||
|
||||
@ -99,9 +99,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -18,14 +18,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -36,7 +38,7 @@
|
||||
};
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: ['img/bad_file_path.png'],
|
||||
show_detailed_errors: true
|
||||
}
|
||||
@ -49,9 +51,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-reconstruction.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-reconstruction@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -14,14 +13,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -41,7 +42,7 @@
|
||||
}
|
||||
|
||||
var match_item = {
|
||||
type: 'html-keyboard-response',
|
||||
type: jsPsychHtmKeyboardResponse,
|
||||
stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
|
||||
'<div style="display: block; position: absolute; top: '+(150 - 210/2)+'px; left:'+(150 - 210/2)+'px; background-color: #000000; '+
|
||||
'width: 210px; height: 210px;"></div></div>',
|
||||
@ -51,7 +52,7 @@
|
||||
}
|
||||
|
||||
var reconstruction = {
|
||||
type: 'reconstruction',
|
||||
type: jsPsychReconstruction,
|
||||
stim_function: sample_function,
|
||||
starting_value: 0.5,
|
||||
}
|
||||
@ -64,9 +65,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-resize.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-resize@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,14 +12,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -31,7 +32,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'resize',
|
||||
type: jsPsychResize,
|
||||
item_width: 3 + 3/8,
|
||||
item_height: 2 + 1/8,
|
||||
prompt: "<p>Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen.</p>",
|
||||
@ -46,9 +47,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-same-different-html.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-same-different-html@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -17,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -35,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'same-different-html',
|
||||
type: jsPsychSameDifferentHtml,
|
||||
stimuli: [
|
||||
'<p style="font-size:30px;">Climbing</p>',
|
||||
'<p style="font-size:30px;">Walking</p>'
|
||||
@ -56,9 +58,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-same-different-image.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-same-different-image@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -17,8 +17,11 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/sad_face_3.jpg'
|
||||
@ -26,13 +29,13 @@
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -43,7 +46,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'same-different-image',
|
||||
type: jsPsychSameDifferentImage,
|
||||
stimuli: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/sad_face_3.jpg'
|
||||
@ -65,9 +68,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -17,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().last(4).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -35,7 +37,7 @@
|
||||
};
|
||||
|
||||
var instructions = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p>Use the S, F, H, and K keys to respond.</p>',
|
||||
choices: ['Continue']
|
||||
}
|
||||
@ -49,25 +51,25 @@
|
||||
]
|
||||
|
||||
var trial_1 = {
|
||||
type: 'serial-reaction-time',
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,0]
|
||||
}
|
||||
var trial_2 = {
|
||||
type: 'serial-reaction-time',
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,1]
|
||||
}
|
||||
var trial_3 = {
|
||||
type: 'serial-reaction-time',
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,2]
|
||||
}
|
||||
var trial_4 = {
|
||||
type: 'serial-reaction-time',
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,3]
|
||||
@ -81,9 +83,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -17,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().last(4).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -35,7 +37,7 @@
|
||||
};
|
||||
|
||||
var instructions = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p>Use the R, I, V, and M keys to respond.</p>',
|
||||
choices: ['Continue']
|
||||
}
|
||||
@ -51,7 +53,7 @@
|
||||
]
|
||||
|
||||
var trial_1 = {
|
||||
type: 'serial-reaction-time',
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,0],
|
||||
@ -59,7 +61,7 @@
|
||||
feedback_duration: 500
|
||||
}
|
||||
var trial_2 = {
|
||||
type: 'serial-reaction-time',
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,1],
|
||||
@ -67,7 +69,7 @@
|
||||
feedback_duration: 500
|
||||
}
|
||||
var trial_3 = {
|
||||
type: 'serial-reaction-time',
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [1,1],
|
||||
@ -75,7 +77,7 @@
|
||||
feedback_duration: 500
|
||||
}
|
||||
var trial_4 = {
|
||||
type: 'serial-reaction-time',
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [1,0],
|
||||
@ -91,9 +93,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time-mouse.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -17,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().last(4).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -39,22 +41,22 @@
|
||||
]
|
||||
|
||||
var trial_1 = {
|
||||
type: 'serial-reaction-time-mouse',
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,0]
|
||||
}
|
||||
var trial_2 = {
|
||||
type: 'serial-reaction-time-mouse',
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,1]
|
||||
}
|
||||
var trial_3 = {
|
||||
type: 'serial-reaction-time-mouse',
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,2]
|
||||
}
|
||||
var trial_4 = {
|
||||
type: 'serial-reaction-time-mouse',
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,3]
|
||||
}
|
||||
@ -67,9 +69,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time-mouse.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -17,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().last(4).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -41,25 +43,25 @@
|
||||
]
|
||||
|
||||
var trial_1 = {
|
||||
type: 'serial-reaction-time-mouse',
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,0],
|
||||
target_color: '#006738'
|
||||
}
|
||||
var trial_2 = {
|
||||
type: 'serial-reaction-time-mouse',
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,2],
|
||||
target_color: '#F78F1E'
|
||||
}
|
||||
var trial_3 = {
|
||||
type: 'serial-reaction-time-mouse',
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [2,2],
|
||||
target_color: '#13B24B'
|
||||
}
|
||||
var trial_4 = {
|
||||
type: 'serial-reaction-time-mouse',
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [2,0],
|
||||
target_color: '#E74921'
|
||||
@ -73,9 +75,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-html-form.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-html-form@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -16,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -34,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-html-form',
|
||||
type: jsPsychSurveyHtmlForm,
|
||||
preamble: '<p>How are you feeling <b>right now?</b></p>',
|
||||
html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
|
||||
};
|
||||
@ -47,9 +50,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-html-form.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-html-form@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -16,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -34,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-html-form',
|
||||
type: jsPsychSurveyHtmlForm,
|
||||
preamble: '<p>What is your favorite bird?</p>',
|
||||
html: '<p>My favorite bird is <input type="text" id="test-resp-box" name="response" size="10" /></p>',
|
||||
autofocus: 'test-resp-box'
|
||||
@ -48,9 +51,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-likert.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -16,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -34,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-likert',
|
||||
type: jsPsychSurveyLIkert,
|
||||
questions: [
|
||||
{
|
||||
prompt: "I like vegetables.",
|
||||
@ -57,9 +60,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-likert.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -16,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -42,7 +45,7 @@
|
||||
];
|
||||
|
||||
var trial = {
|
||||
type: 'survey-likert',
|
||||
type: jsPsychSurveyLIkert,
|
||||
questions: [
|
||||
{prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
|
||||
{prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},
|
||||
@ -59,9 +62,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-multi-choice.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -16,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -34,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-multi-choice',
|
||||
type: jsPsychSurveyMultiChoice,
|
||||
questions: [
|
||||
{
|
||||
prompt: "Which of the following do you like the most?",
|
||||
@ -59,9 +62,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-multi-choice.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -16,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -34,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-multi-choice',
|
||||
type: jsPsychSurveyMultiChoice,
|
||||
questions: [
|
||||
{
|
||||
prompt: "Which of the following do you like the most?",
|
||||
@ -61,9 +64,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-multi-select.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-select@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -16,14 +16,17 @@
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -34,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-multi-select',
|
||||
type: jsPsychSurveyMultiSelect,
|
||||
questions: [
|
||||
{
|
||||
prompt: "Which of these colors do you like?",
|
||||
@ -62,9 +65,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -17,14 +17,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -35,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-text',
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{prompt: 'How old are you?'}
|
||||
]
|
||||
@ -49,9 +51,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -17,14 +17,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -35,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-text',
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{prompt: 'What is your date of birth?', placeholder: 'mm/dd/yyyy', required: true},
|
||||
{prompt: 'What country do you currently live in?'}
|
||||
@ -50,9 +52,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -17,14 +17,16 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -35,7 +37,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-text',
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{prompt: 'What did you eat for breakfast?', name: 'Breakfast'},
|
||||
{prompt: 'What did you eat for lunch?', name: 'Lunch'}
|
||||
@ -50,9 +52,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -18,19 +18,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: ['img/navarro_burst_03.jpg']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -41,7 +43,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'survey-text',
|
||||
type: jsPsychSurveyText,
|
||||
preamble: `<img src="img/navarro_burst_03.jpg" style="width:400px;"></img>`,
|
||||
questions: [
|
||||
{prompt: 'Describe your reaction to the image above', rows: 5}
|
||||
@ -56,9 +58,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-video-button-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-video-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,19 +13,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
video: 'video/fish.mp4'
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -36,7 +38,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'video-button-response',
|
||||
type: jsPsychVideoButtonResponse,
|
||||
stimulus: [
|
||||
'video/fish.mp4'
|
||||
],
|
||||
@ -53,9 +55,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-video-keyboard-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-video-keyboard-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,19 +13,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
video: 'video/fish.mp4'
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -36,7 +38,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'video-keyboard-response',
|
||||
type: jsPsychVideoKeyboardResponse,
|
||||
stimulus: [
|
||||
'video/fish.mp4'
|
||||
],
|
||||
@ -52,9 +54,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-video-slider-response.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-video-slider-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -13,19 +13,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
video: 'video/fish.mp4'
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -36,7 +38,7 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'video-slider-response',
|
||||
type: jsPsychVideoSliderResponse,
|
||||
stimulus: [
|
||||
'video/fish.mp4'
|
||||
],
|
||||
@ -52,9 +54,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-virtual-chinrest.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-virtual-chinrest@1.0.0"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -14,14 +14,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/card.png']
|
||||
};
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -32,9 +39,10 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'virtual-chinrest',
|
||||
type: jsPsychVirtualChinrest,
|
||||
blindspot_reps: 3,
|
||||
resize_units: "none"
|
||||
resize_units: "none",
|
||||
item_path: "img/card.png"
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
@ -45,9 +53,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-virtual-chinrest.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-virtual-chinrest@1.0.0"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -14,19 +14,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: ['img/card.png']
|
||||
}
|
||||
};
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'virtual-chinrest'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -37,14 +39,15 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'virtual-chinrest',
|
||||
type: jsPsychVirtualChinrest,
|
||||
blindspot_reps: 3,
|
||||
resize_units: "cm",
|
||||
pixels_per_unit: 50
|
||||
pixels_per_unit: 50,
|
||||
item_path: "img/card.png"
|
||||
};
|
||||
|
||||
var resized_stimulus = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>If the measurements were done correctly, the square below should be 10 cm x 10 cm.</p>
|
||||
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||
@ -60,9 +63,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-virtual-chinrest.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-virtual-chinrest@1.0.0"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
@ -14,19 +14,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: ['img/card.png']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'virtual-chinrest'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -37,14 +39,15 @@
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'virtual-chinrest',
|
||||
type: jsPsychVirtualChinrest,
|
||||
blindspot_reps: 3,
|
||||
resize_units: "deg",
|
||||
pixels_per_unit: 50
|
||||
pixels_per_unit: 50,
|
||||
item_path: "img/card.png"
|
||||
};
|
||||
|
||||
var resized_stimulus = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>If the measurements were done correctly, the square below should take up about 10 degrees of visual angle.</p>
|
||||
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||
@ -60,9 +63,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-visual-search-circle.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-visual-search-circle@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -18,19 +18,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: ['img/backwardN.gif', 'img/normalN.gif', 'img/fixation.gif']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -41,14 +43,14 @@
|
||||
};
|
||||
|
||||
var instructions = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `<p>Press J if there is a backwards N.</p>
|
||||
<p>Press F if all the Ns are in the normal orientation.</p>`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'visual-search-circle',
|
||||
type: jsPsychVisualSearchCircle,
|
||||
target: 'img/backwardN.gif',
|
||||
foil: 'img/normalN.gif',
|
||||
fixation_image: 'img/fixation.gif',
|
||||
@ -64,9 +66,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-visual-search-circle.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-visual-search-circle@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
@ -18,19 +18,21 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
type: jsPsychPreload,
|
||||
images: ['img/elephant.png', 'img/lion.png', 'img/monkey.png']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
@ -41,15 +43,16 @@
|
||||
};
|
||||
|
||||
var instructions = {
|
||||
type: 'html-button-response',
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `<p>Press E if there is an elephant in the group.</p>
|
||||
<p>Press N if there is no elephant in the group.</p>`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'visual-search-circle',
|
||||
stimuli: ['img/elephant.png', 'img/lion.png', 'img/monkey.png'],
|
||||
type: jsPsychVisualSearchCircle,
|
||||
target: 'img/elephant.png',
|
||||
foil: ['img/lion.png', 'img/monkey.png'],
|
||||
fixation_image: 'img/fixation.gif',
|
||||
target_present_key: 'e',
|
||||
target_absent_key: 'n',
|
||||
@ -64,9 +67,7 @@
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-vsl-animate-occlusion.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/adobe-webplatform/Snap.svg@0.5.1/dist/snap.svg-min.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
images: ['img/1.gif', 'img/2.gif', 'img/3.gif', 'img/4.gif']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: 'vsl-animate-occlusion',
|
||||
stimuli: [
|
||||
"img/1.gif",
|
||||
"img/2.gif",
|
||||
"img/3.gif",
|
||||
"img/4.gif"
|
||||
]
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@ -1,70 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-vsl-grid-scene.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
images: ['img/1.gif', 'img/2.gif', 'img/3.gif', 'img/4.gif', 'img/5.gif']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var scene = [
|
||||
["img/1.gif", "img/2.gif", 0],
|
||||
[ 0, "img/3.gif", 0],
|
||||
["img/5.gif", "img/4.gif", 0]
|
||||
]
|
||||
|
||||
var trial = {
|
||||
type: 'vsl-grid-scene',
|
||||
stimuli: scene,
|
||||
trial_duration: 1500
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [preload, start, trial_loop]
|
||||
});
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
98
docs/developers/configuration.md
Normal file
98
docs/developers/configuration.md
Normal file
@ -0,0 +1,98 @@
|
||||
# Configuring the jsPsych development environment
|
||||
|
||||
## Setup
|
||||
|
||||
JsPsych is written using [TypeScript](https://www.typescriptlang.org/), 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](https://nodejs.org/en/), 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
|
||||
|
||||
The jsPsych development setup requires Node.js >= v14 to be installed on your machine.
|
||||
We recommend that you [install version 16](https://nodejs.org/en/) 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
|
||||
|
||||
Clone either the jsPsych repository or the jspsych-contrib repository by running
|
||||
|
||||
```sh
|
||||
git clone https://github.com/jspsych/jsPsych.git && cd jsPsych
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```sh
|
||||
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
|
||||
|
||||
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](https://www.npmjs.com/) where they can be downloaded by NPM or any CDN (such as [unpkg](https://unpkg.com/)).
|
||||
|
||||
## Build chain and build artifacts
|
||||
|
||||
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](https://webpack.js.org/).
|
||||
|
||||
* **`index.cjs`**
|
||||
Like `index.js`, but using the old CommonJS standard to support backwards-compatible tools like the [Jest](https://jestjs.io/) 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 `<script>` tag.
|
||||
For plugins or extensions, the default export of a module (i.e. whatever statement comes after `export default` in the `index.ts` file) is assigned to a global variable.
|
||||
The name of this global variable is specified in the package's `rollup.config.mjs` file, as a parameter to the `makeRollupConfig()` function.
|
||||
Hence, for instance, including the `index.browser.js` file from the `plugin-html-keyboard-response` package would assign the `HtmlKeyboardResponsePlugin` class to the global `jsPsychHtmlKeyboardResponse` variable.
|
||||
Because the code in `index.browser.js` looks very similar to the `index.ts` code but is fully supported by modern web browsers, all examples in the `examples` directory reference the `index.browser.js` files so users can also modify the source code directly without running the build chain.
|
||||
|
||||
* **`index.browser.min.js`**
|
||||
There are different versions of the JavaScript language specification and not all web browsers and browser versions support all JavaScript features.
|
||||
That's why the jsPsych build chain uses [Babel](https://babeljs.io/) to translate the source files into code that a majority of web browsers can understand.
|
||||
The result of this operation is `index.browser.min.js`.
|
||||
It behaves just like `index.browser.js`, but adds support for older browsers by substituting new JavaScript features using older ones.
|
||||
Because this is the recommended build artifact for production usage (and is automatically served by unpkg), the code in `index.browser.min.js` is also processed by [Terser](https://terser.org/) to reduce its size and speed up experiment loading times.
|
||||
|
||||
* **`*.js.map`**
|
||||
When debugging code in a browser (especially `index.browser.min.js`, which is not easily readable due to Terser and Babel), it is important to be able to read the original source code in the debugger.
|
||||
For every build artifact, there is a `.map` file which contains a mapping of the generated code to the original source code.
|
||||
Browsers automatically read these `.map` files and display the original code in their debuggers instead of the generated one.
|
||||
|
||||
* **`*.d.ts`**
|
||||
The `.d.ts` files contain the TypeScript type definitions that would otherwise be lost during compilation to plain JavaScript.
|
||||
They are read by Typescript and editors when a package is imported into another TypeScript project.
|
||||
|
||||
|
||||
## Testing
|
||||
|
||||
Automated code testing for jsPsych is implemented with [Jest](https://jestjs.io/).
|
||||
|
||||
To run the tests, install Node and npm. Run `npm install` in the root jsPsych directory. Then run `npm test`. You can also run `npm test` in the directory of the package that you would like to test. For example, if you are developing tests for the `html-keyboard-response` plugin you can run `npm test` in `/packages/plugin-html-keyboard-response`.
|
||||
|
||||
Tests for the core jsPsych library are located in `/packages/jspsych/tests`.
|
||||
|
||||
Tests for plugins and extensions are located in the `/src` folder of the corresponding package. Test files for plugins and extensions are named `index.spec.ts`.
|
||||
|
||||
There are helper functions for testing in `/packages/jspsych/tests/utils.ts`. We recommend looking at other test files to observe conventions for testing.
|
||||
44
docs/developers/contributing.md
Normal file
44
docs/developers/contributing.md
Normal file
@ -0,0 +1,44 @@
|
||||
# Contributing to jsPsych
|
||||
|
||||
We welcome contributions of all kinds, including changes to the core codebase, the development of new plugins and extensions, and improvements to the documentation.
|
||||
|
||||
The project is managed entirely through the [GitHub repository](https://github.com/jspsych/jsPsych). There you can:
|
||||
|
||||
* Use [discussions](https://github.com/jspsych/jsPsych/discussions) to propose ideas for development and seek feedback on contributions, such as a new plugin.
|
||||
* Use [issues](https://github.com/jspsych/jsPsych/issues) to identify anything with an actionable next step. For example, a page in the documentation that needs to be fixed, a bug in the code, or a specific feature that has a clear scope.
|
||||
* Submit a [pull request](https://github.com/jspsych/jsPsych/pulls) with modifications to the codebase. Pull requests will be reviewed by one or more members of the core team.
|
||||
|
||||
## Guidelines for contibuting
|
||||
|
||||
### Contributing to the codebase
|
||||
|
||||
We welcome contributions of any scope. Before we can merge changes into the main codebase, we generally require a few things. Note that you are welcome to contribute code without these things in place, but it will help us get to your contribution faster if you take care of whatever components you are comfortable doing.
|
||||
|
||||
* **The code must be tested through our automated testing system.** We use [Jest](https://jestjs.io/) as the testing framework. If you are fixing a bug, consider adding a test case that shows the bug has been resolved. If you are contributing new features, like a new plugin, a test suite for the plugin is very helpful. See [testing jsPsych](configuration.md#testing) for more information about configuring the test tools and writing tests.
|
||||
|
||||
* **Relevant documentation must be updated.** Any pages in `/docs` that are affected by the contribution should be updated, and if new pages are needed they should be created. For example, if you are contributing a plugin then adding documentation for the plugin and updating the [list of available plugins](https://github.com/jspsych/jsPsych/blob/main/docs/plugins/list-of-plugins.md) as well as the [mkdocs configuration file](https://github.com/jspsych/jsPsych/blob/main/mkdocs.yml) is very helpful!
|
||||
|
||||
* **An example file should be included if applicable.** If you are contributing a new feature, new plugin, or new extension, or contributing a modification that changes the behavior of the library in some important way, consider adding an example file to the `/examples` folder in the repository.
|
||||
|
||||
* **A changeset must be included in the pull request**. We use [changesets](https://github.com/atlassian/changesets/blob/main/docs/adding-a-changeset.md) to generate new releases and their corresponding release notes. [This is a good overview of changesets](https://github.com/atlassian/changesets/blob/main/docs/adding-a-changeset.md) that explains how to add one to your pull request. Feel free to ask for help with this!
|
||||
|
||||
* **Update the contributors.md file**. If you are a first time contributor to jsPsych please add your name to our [contributors file](https://github.com/jspsych/jsPsych/blob/main/contributors.md). And thanks!
|
||||
|
||||
|
||||
### Contributing to the documentation
|
||||
|
||||
We are very appreciative of both small and large contributions to the documentation, from fixing a typo to adding a whole new tutorial. All of the documentation that appears on this site is contained in the [`/docs` folder](https://github.com/jspsych/jsPsych/tree/main/docs) of the repository. The documentation is built using [MkDocs](https://www.mkdocs.org/) and themed using [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/). You can edit any of the markdown files and submit a pull request to modify documentation.
|
||||
|
||||
If you'd like to test your changes to the documentation locally you'll need to install [MkDocs](https://www.mkdocs.org/user-guide/installation/) and [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/getting-started/#installation). Then you can run the command `mike serve` in the root folder of the repository to launch a local webserver and view the documentation.
|
||||
|
||||
## Contributing to `jspsych` vs. `jspsych-contrib`
|
||||
|
||||
If you are developing a new plugin or extension there are two different repositories that you can contribute to: [`jspsych`](https://github.com/jspsych/jsPsych) or [`jspsych-contrib`](https://github.com/jspsych/jspsych-contrib).
|
||||
|
||||
The main `jspsych` repository is open to new plugins and extensions that are likely to be widely used. We require that contributions to main repository are well documented and tested before they are merged. Contributions to the main repository must use TypeScript. We limit contributions to this repository because once a plugin or extension is in the main codebase we are generally committed to providing updates as we develop new versions of jsPsych. Each new plugin and extension potentially increases the amount of development work that we will need to do in the future, so we are somewhat selective about what we will merge. If you have an idea that you'd like to discuss please [open a discussion thread](https://github.com/jspsych/jsPsych/discussions/new) and we'd love to chat about it!
|
||||
|
||||
The `jspsych-contrib` repository is open to any contributions that are complete and working code. There are some minimal guidelines in place about basic documentation that should be provided. Contributors can choose whether to develop their plugin or extension using our [TypeScript template](https://github.com/jspsych/jspsych-contrib/tree/main/packages/plugin-template-ts) or using our [JavaScript template](https://github.com/jspsych/jspsych-contrib/tree/main/packages/plugin-template). Contributions to `jspsych-contrib` are not evaluated for general usefulness in the same way that contributions to the main repository are. We also periodically consider whether to move contributions into the main repository from `jspsych-contrib` based on their popularity and completeness (documentation and testing).
|
||||
|
||||
|
||||
|
||||
|
||||
167
docs/developers/extension-development.md
Normal file
167
docs/developers/extension-development.md
Normal file
@ -0,0 +1,167 @@
|
||||
# Extension development
|
||||
|
||||
## Requirements for an extension
|
||||
|
||||
As of version 7.0, extensions are [JavaScript Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes). An extension must implement:
|
||||
|
||||
* [A `constructor()`](#constructor) that accepts an instance of jsPsych.
|
||||
* [An `initialize()` function](#initialize) to handle the initialize event of the extension.
|
||||
* [An `on_start()` function](#on_start) to handle the on_start event of the extension.
|
||||
* [An `on_load()` function](#on_load) to handle the on_load event of the extension.
|
||||
* [An `on_finish()` function](#on_finish) to handle the on_finish event of the extension and store data that the extension collects.
|
||||
* [A static `info`](#static-info) property containing a unique name for the extension.
|
||||
|
||||
### Templates
|
||||
|
||||
Plugins can be written in either plain JavaScript or in TypeScript. Template files for both [JavaScript](https://github.com/jspsych/jspsych-contrib/blob/main/packages/extension-template/index.js) and [TypeScript](https://github.com/jspsych/jspsych-contrib/blob/main/packages/extension-template-ts/src/index.ts) are available in the [jspsych-contrib repository](https://github.com/jspsych/jspsych-contrib/).
|
||||
|
||||
## Extension components
|
||||
|
||||
### constructor()
|
||||
|
||||
The extension's `constructor()` will be passed a reference to the instance of the `JsPsych` class that is running the experiment. The constructor should store this reference so that the plugin can access functionality from the core library and its modules.
|
||||
|
||||
```js
|
||||
class MyAwesomeExtension {
|
||||
constructor(jsPsych){
|
||||
this.jsPsych = jsPsych;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### initialize()
|
||||
|
||||
The `initialize()` function is called when an instance of jsPsych is first initialized, either through `initJsPsych()` or `new JsPsych()`. This is where setup code for the extension should be run. This event will happen once per experiment, unlike the other events which occur with each trial. The `params` object can include whatever parameters are necessary to configure the extension. The `params` object is passed from the call to `initJsPsych()` to `initialize()` method. `initialize()` must return a `Promise` that resolves when the extension is finished initializing.
|
||||
|
||||
```js
|
||||
//... experiment code ...//
|
||||
let jsPsych = initJsPsych({
|
||||
extensions: [
|
||||
{type: myAwesomeExtension, params: {demo: 'value'}}
|
||||
]
|
||||
});
|
||||
|
||||
//... extension code ...//
|
||||
class MyAwesomeExtension {
|
||||
|
||||
initialize(params){
|
||||
return new Promise((resolve, reject)=>{
|
||||
console.log(params.demo); // will output 'value'
|
||||
|
||||
resolve(); // finish initialzing
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### on_start()
|
||||
|
||||
`on_start()` is called at the start of the plugin execution, prior to calling `plugin.trial`. This is where trial-specific initialization can happen, such as creating empty containers to hold data or resetting internal state. The `params` object is passed from the declaration of the extension in the trial object. You can use `params` to customize the behavior of the extension for each trial.
|
||||
|
||||
```js
|
||||
//... experiment code ...//
|
||||
let trial = {
|
||||
type: htmlKeyboardResponse,
|
||||
stimulus: "You're awesome!",
|
||||
extensions: [
|
||||
{type: myAwesomeExtension, params: {demo: 'value'}}
|
||||
]
|
||||
});
|
||||
|
||||
//... extension code ...//
|
||||
class MyAwesomeExtension {
|
||||
|
||||
initialize(params){ ... }
|
||||
|
||||
on_start(params){
|
||||
console.log(params.demo); // outputs 'value' before the trial begins.
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### on_load()
|
||||
|
||||
`on_load()` is called after the `on_load` event for the plugin has completed, which is typically when the plugin has finished executing initial DOM-modifying code and has set up various event listeners. This is where the extension can begin actively interacting with the DOM and recording data. The `params` object is passed from the declaration of the extension in the trial object. You can use `params` to customize the behavior of the extension for each trial.
|
||||
|
||||
```js
|
||||
//... experiment code ...//
|
||||
let trial = {
|
||||
type: htmlKeyboardResponse,
|
||||
stimulus: "You're awesome!",
|
||||
extensions: [
|
||||
{type: myAwesomeExtension, params: {demo: 'value'}}
|
||||
]
|
||||
});
|
||||
|
||||
//... extension code ...//
|
||||
class MyAwesomeExtension {
|
||||
|
||||
initialize(params){ ... }
|
||||
|
||||
on_start(params){ ... }
|
||||
|
||||
on_load(params){
|
||||
// replaces the contents of the display with 'value';
|
||||
this.jsPsych.getDisplayElement().innerHTML = params.demo;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### on_finish()
|
||||
|
||||
`on_finish()` is called after the plugin invokes `jsPsych.finishTrial()`. This can be used for any teardown at the end of the trial. This method should return an object of data to append to the plugin's data. Note that this event fires *before* the `on_finish` event for the plugin, so data added by the extension is accessible in any trial `on_finish` event handlers. The `params` object is passed from the declaration of the extension in the trial object. You can use `params` to customize the behavior of the extension for each trial.
|
||||
|
||||
```js
|
||||
//... experiment code ...//
|
||||
let trial = {
|
||||
type: htmlKeyboardResponse,
|
||||
stimulus: "You're awesome!",
|
||||
extensions: [
|
||||
{type: myAwesomeExtension, params: {demo: 'value'}}
|
||||
],
|
||||
on_finish: (data) => {
|
||||
console.log(data.awesome); // will output 'value'.
|
||||
}
|
||||
});
|
||||
|
||||
//... extension code ...//
|
||||
class MyAwesomeExtension {
|
||||
|
||||
initialize(params){ ... }
|
||||
|
||||
on_start(params){ ... }
|
||||
|
||||
on_load(params){ ... }
|
||||
|
||||
on_finish(params){
|
||||
return {
|
||||
awesome: params.value
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### static .info
|
||||
|
||||
The `info` property for the class must contain an object with a `name` property that has a unique name for the extension.
|
||||
|
||||
```js
|
||||
class MyAwesomeExtension {
|
||||
|
||||
}
|
||||
|
||||
MyAwesomeExtension.info = {
|
||||
name: 'awesome'
|
||||
}
|
||||
```
|
||||
|
||||
### Optional methods
|
||||
|
||||
The extension can also include any additional methods that are necessary for interacting with it. See the [webgazer extension](../extensions/webgazer.md) for an example.
|
||||
|
||||
## Advice for writing extensions
|
||||
|
||||
If you are developing an extension with the aim of including it in the main jsPsych repository we encourage you to follow the [contribution guidelines](contributing.md#contributing-to-the-codebase).
|
||||
|
||||
In general, extensions should be able to work with any plugin. They should make very few assumptions about what the DOM will contain beyond the container elements generated by jsPsych. If you are making an extension targeted at one or a small number of specific plugins, consider modifying the plugin code instead.
|
||||
225
docs/developers/plugin-development.md
Normal file
225
docs/developers/plugin-development.md
Normal file
@ -0,0 +1,225 @@
|
||||
# Plugin development
|
||||
|
||||
## Requirements for a plugin
|
||||
|
||||
As of version 7.0, plugins are [JavaScript Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes). A plugin must implement:
|
||||
|
||||
* [A `constructor()`](#constructor) that accepts an instance of jsPsych.
|
||||
* [A `trial()` method](#trial) that accepts an `HTMLElement` as its first argument and an `object` of trial parameters as its second argument. There is an optional third argument to [handle the `on_load` event](#asynchronous-loading) in certain cirumstances. The `trial()` method should invoke `jsPsych.finishTrial()` to [end the trial and save data](#save-data) at the appropriate moment.
|
||||
* [A static `info` property](#static-info) on the class that contains an object describing the plugin's parameters.
|
||||
|
||||
### Templates
|
||||
|
||||
Plugins can be written in either plain JavaScript or in TypeScript. Template files for both [JavaScript](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-template/index.js) and [TypeScript](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-template-ts/src/index.ts) are available in the [jspsych-contrib repository](https://github.com/jspsych/jspsych-contrib/).
|
||||
|
||||
## Plugin components
|
||||
|
||||
### constructor()
|
||||
|
||||
The plugin's `constructor()` will be passed a reference to the instance of the `JsPsych` class that is running the experiment. The constructor should store this reference so that the plugin can access functionality from the core library and its modules.
|
||||
|
||||
```js
|
||||
constructor(jsPsych){
|
||||
this.jsPsych = jsPsych;
|
||||
}
|
||||
```
|
||||
|
||||
### trial()
|
||||
|
||||
The plugin's `trial()` method is responsible for running a single trial. When the jsPsych timeline reaches a trial using the plugin it will invoke the `trial()` method for the plugin.
|
||||
|
||||
There are three parameters that are passed into the trial method.
|
||||
|
||||
* `display_element` is the DOM element where jsPsych content is being rendered. This parameter will be an `HTMLElement`, and you can use it to modify the portion of the document that jsPsych controls.
|
||||
* `trial` is an object containing all of the parameters specified in the corresponding [TimelineNode](../overview/timeline).
|
||||
* `on_load` is an optional parameter that contains a callback function to invoke when `trial()` has completed its initial loading. See [handling the on_load event](#asynchronous-loading).
|
||||
|
||||
The only requirement for the `trial` method is that it calls `jsPsych.finishTrial()` when it is done. This is how jsPsych knows to advance to the next trial in the experiment (or end the experiment if it is the last trial). The plugin can do whatever it needs to do before that point.
|
||||
|
||||
### static info
|
||||
|
||||
The plugin's `info` property is an object with a `name` and `parameters` property.
|
||||
|
||||
```js
|
||||
const info = {
|
||||
name: 'my-awesome-plugin',
|
||||
parameters: { }
|
||||
}
|
||||
```
|
||||
|
||||
The `parameters` property is an object containing all of the parameters for the plugin. Each parameter has a `type` and `default` property.
|
||||
|
||||
```js
|
||||
const info = {
|
||||
name: 'my-awesome-plugin',
|
||||
parameters: {
|
||||
image: {
|
||||
type: jspsych.ParameterType.IMAGE,
|
||||
default: undefined
|
||||
},
|
||||
image_duration: {
|
||||
type: jspsych.ParameterType.INT,
|
||||
default: 500
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If the `default` value is `undefined` then a user must specify a value for this parameter when creating a trial using the plugin on the timeline. If they do not, then an error will be generated and shown in the console. If a `default` value is specified in `info` then that value will be used by the plugin unless the user overrides it by specifying that property.
|
||||
|
||||
jsPsych allows most [plugin parameters to be dynamic](../overview/dynamic-parameters.md), which means that the parameter value can be a function that will be evaluated right before the trial starts. However, if you want your plugin to have a parameter that is a function that _shouldn't_ be evaluated before the trial starts, then you should make sure that the parameter type is `'FUNCTION'`. This tells jsPsych not to evaluate the function as it normally does for dynamic parameters. See the `canvas-*` plugins for examples.
|
||||
|
||||
The `info` object should be a `static` member of the class, as shown below.
|
||||
|
||||
```js
|
||||
const info = {
|
||||
name: 'my-awesome-plugin',
|
||||
parameters: {
|
||||
image: {
|
||||
type: jspsych.ParameterType.IMAGE,
|
||||
default: undefined
|
||||
},
|
||||
image_duration: {
|
||||
type: jspsych.ParameterType.INT,
|
||||
default: 500
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class MyAwesomePlugin {
|
||||
constructor(...)
|
||||
|
||||
trial(...)
|
||||
}
|
||||
|
||||
MyAwesomePlugin.info = info;
|
||||
```
|
||||
|
||||
## Plugin functionality
|
||||
|
||||
Inside the `.trial()` method you can do pretty much anything that you want, including modifying the DOM, setting up event listeners, and making asynchronous requests. In this section we'll highlight a few common things that you might want to do as examples.
|
||||
|
||||
### Changing the content of the display
|
||||
|
||||
There are a few ways to change the content of the display. The `display_element` parameter of the trial method contains the `HTMLElement` for displaying jsPsych content, so you can use various JavaScript methods for interaction with the display element. A common one is to change the `innerHTML`. Here's an example of using `innerHTML` to display an image specified in the `trial` parameters.
|
||||
|
||||
```javascript
|
||||
trial(display_element, trial){
|
||||
let html_content = `<img src="${trial.image}"></img>`;
|
||||
|
||||
display_element.innerHTML = html_content;
|
||||
}
|
||||
```
|
||||
|
||||
jsPsych doesn't clear the display before or after each trial, so it is usually appropriate to use `innerHTML` to clear the display at the end of a trial.
|
||||
|
||||
```javascript
|
||||
display_element.innerHTML = '';
|
||||
```
|
||||
|
||||
### Waiting for specified durations
|
||||
|
||||
If you need to delay code execution for a fixed amount of time, we recommend using jsPsych's wrapper of the `setTimeout()` function, `jsPsych.pluginAPI.setTimeout()`. In `7.0` the only advantage of using this method is that it registers the timeout handler so that it can be easily cleared at the end of the trial using `jsPsych.pluginAPI.clearAllTimeouts()`. In future versions we may replace the implementation of `jsPsych.pluginAPI.setTimeout()` with improved timing functionality based on `requestAnimationFrame`.
|
||||
|
||||
```js
|
||||
trial(display_element, trial){
|
||||
// show image
|
||||
display_element.innerHTML = `<img src="${trial.image}"></img>`;
|
||||
|
||||
// hide image after trial.image_duration milliseconds
|
||||
this.jsPsych.pluginAPI.setTimeout(()=>{
|
||||
display_element.innerHTML = '';
|
||||
}, trial.image_duration);
|
||||
}
|
||||
```
|
||||
|
||||
### Responding to keyboard events
|
||||
|
||||
While the plugin framework allows you to set up any events that you would like to, including normal handling of `keyup` or `keydown` events, the `jsPsych.pluginAPI` module contains the [`getKeyboardResponse` function](../reference/jspsych-pluginAPI.md#jspsychpluginapigetkeyboardresponse), which implements some additional helpful functionality for key responses in an experiment.
|
||||
|
||||
Here's a basic example. See the [`getKeyboardResponse` docs](../reference/jspsych-pluginAPI.md#jspsychpluginapigetkeyboardresponse) for additional examples.
|
||||
|
||||
```js
|
||||
trial(display_element, trial){
|
||||
// show image
|
||||
display_element.innerHTML = `<img src="${trial.image}"></img>`;
|
||||
|
||||
const after_key_response = (info) => {
|
||||
// hide the image
|
||||
display_element.innerHTML = '';
|
||||
|
||||
// record the response time as data
|
||||
let data = {
|
||||
rt: info.rt
|
||||
}
|
||||
|
||||
// end the trial
|
||||
this.jsPsych.finishTrial(data);
|
||||
}
|
||||
|
||||
// set up a keyboard event to respond only to the spacebar
|
||||
this.jsPsych.pluginAPI.getKeyboardResponse({
|
||||
callback_function: after_key_response,
|
||||
valid_responses: [' '],
|
||||
persist: false
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Asynchronous loading
|
||||
|
||||
One of the [trial events](../overview/events) is `on_load`, which is normally triggered automatically when the `.trial()` method returns. In most cases, this return happens after the plugin has done its initial setup of the DOM (e.g., rendering an image, setting up event listeners and timers, etc.). However, in some cases a plugin may implement an asynchronous operation that needs to complete before the initial loading of the plugin is considered done. An example of this is the `audio-keyboard-response` plugin, in which the check to see if the audio file is loaded is asynchronous and the `.trial()` method returns before the audio file has been initialized and the display updated.
|
||||
|
||||
If you would like to manually trigger the `on_load` event for a plugin, the `.trial()` method accepts an optional third parameter that is a callback function to invoke when loading is complete.
|
||||
|
||||
In order to tell jsPsych to *not* invoke the regular callback when the `.trial()` method returns, you need to explicitly return a `Promise`. As of version `7.0` this Promise only serves as a flag to tell jsPsych that the `on_load` event should not be triggered. In future versions we may make the `Promise` functional so that the `trial` operation can be an `async` function.
|
||||
|
||||
Here's a sketch of how the `on_load` event can be utilized in a plugin. Note that this example is only a sketch and leaves out all the stuff that happens between loading and finishing the trial. See the source for the `audio-keyboard-response` plugin for a complete exampe.
|
||||
|
||||
```js
|
||||
trial(display_element, trial, on_load){
|
||||
let trial_complete;
|
||||
|
||||
do_something_asynchronous().then(()=>{
|
||||
on_load();
|
||||
});
|
||||
|
||||
const end_trial = () => {
|
||||
this.jsPsych.finishTrial({...})
|
||||
trial_complete(); // not strictly necessary, but doesn't hurt.
|
||||
}
|
||||
|
||||
return new Promise((resolve)=>{
|
||||
trial_complete = resolve;
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### Save data
|
||||
|
||||
To write data to [jsPsych's data collection](../reference/jspsych-data.md#datacollection) pass an object of data as the parameter to `jsPsych.finishTrial()`.
|
||||
|
||||
```javascript
|
||||
constructor(jsPsych){
|
||||
this.jsPsych = jsPsych;
|
||||
}
|
||||
|
||||
trial(display_element, trial){
|
||||
let data = {
|
||||
correct: true,
|
||||
rt: 350
|
||||
}
|
||||
|
||||
this.jsPsych.finishTrial(data);
|
||||
}
|
||||
```
|
||||
|
||||
The data recorded will be that `correct` is `true` and that `rt` is `350`. [Additional data for the trial](../overview/plugins.md#data-collected-by-all-plugins) will also be collected automatically.
|
||||
|
||||
## Advice for writing plugins
|
||||
|
||||
If you are developing a plugin with the aim of including it in the main jsPsych repository we encourage you to follow the [contribution guidelines](contributing.md#contributing-to-the-codebase).
|
||||
|
||||
We also recommend that you make your plugin *as general as possible*. Consider using parameters to give the user of the plugin as many options for customization as possible. For example, if you have any text that displays in the plugin including things like button labels, implement the text as a parameter. This allows users running experiments in other languages to replace text values as needed.
|
||||
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
# Extensions
|
||||
|
||||
Extensions are jsPsych modules that can interface with any plugin to extend the functionality of the plugin. A canonical example of an extension is eye tracking. An eye tracking extension allows a plugin to gather gaze data and add it to the plugin's data object.
|
||||
|
||||
## Using an Extension
|
||||
|
||||
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 `jsPsych.init()`.
|
||||
|
||||
```html
|
||||
<head>
|
||||
<script src="jspsych/jspsych.js"></script>
|
||||
<script src="jspsych/extensions/some-extension.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
```js
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
extensions: [
|
||||
{type: 'some-extension', params: {...} }
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
To enable an extension during a trial, add the extension to the `extensions` list for the trial. Some extensions may also support or require an object of parameters to configure the extension:
|
||||
|
||||
```js
|
||||
var trial = {
|
||||
extensions: [
|
||||
{type: 'some-extension', params: {...} }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## List of Extensions
|
||||
|
||||
Extension | Description
|
||||
------ | -----------
|
||||
[jspsych‑ext‑webgazer.js](../extensions/jspsych-ext-webgazer.md) | Enables eye tracking using the [WebGazer](https://webgazer.cs.brown.edu/) library.
|
||||
|
||||
## Writing an Extension
|
||||
|
||||
To create a new extension you must create an object that supports a few event callbacks. A barebones extension file looks like this:
|
||||
|
||||
```js
|
||||
jsPsych.extensions['new-extension'] = (function () {
|
||||
|
||||
var extension = {};
|
||||
|
||||
extension.initialize = function(params){
|
||||
// params are passed from the extensions parameter in jsPsych.init
|
||||
}
|
||||
|
||||
extension.on_start = function(params){
|
||||
// params are passed from the extensions parameter in the trial object
|
||||
}
|
||||
|
||||
extension.on_load = function(params){
|
||||
// params are passed from the extensions parameter in the trial object
|
||||
}
|
||||
|
||||
extension.on_finish = function(params){
|
||||
// params are passed from the extensions parameter in the trial object
|
||||
return {
|
||||
// any data that the extension returns here will be added to the trial data
|
||||
}
|
||||
}
|
||||
|
||||
return extension;
|
||||
});
|
||||
```
|
||||
|
||||
The four events that an extension must support are shown in the sample code.
|
||||
|
||||
`extension.initialize` is called with `jsPsych.init()`. This is where setup code for the extension can happen. This event will happen once per experiment, unlike the other events which occur with each trial. The `params` object can include whatever parameters are necessary to configure the extension. The `params` object is passed from the call to `jsPsych.init()` to the `extension.initialize` method. `extension.initialize` must return a `Promise` that resolves when the extension is finished initializing.
|
||||
|
||||
`extension.on_start` is called at the start of the plugin execution, prior to calling `plugin.trial`. This is where trial-specific initialization can happen, such as creating empty containers to hold data or resetting internal state. The `params` object is passed from the declaration of the extension in the trial object. You can use `params` to customize the behavior of the extension for each trial.
|
||||
|
||||
`extension.on_load` is called after `plugin.trial` has executed, which is typically when the plugin has finished executing initial DOM-modifying code and has set up various event listeners. This is where the extension can begin actively interacting with the DOM and recording data. The `params` object is passed from the declaration of the extension in the trial object. You can use `params` to customize the behavior of the extension for each trial.
|
||||
|
||||
`extension.on_finish` is called after the plugin completes. This can be used for any teardown at the end of the trial. This method should return an object of data to append to the plugin's data. Note that this event fires *before* the `on_finish` event for the plugin, so data added by the extension is accessible in any trial `on_finish` event handlers. The `params` object is passed from the declaration of the extension in the trial object. You can use `params` to customize the behavior of the extension for each trial.
|
||||
|
||||
The extension can also include any additional methods that are necessary for interacting with it. See the [webgazer extension](../extensions/jspsych-ext-webgazer.md) for an example.
|
||||
12
docs/extensions/list-of-extensions.md
Normal file
12
docs/extensions/list-of-extensions.md
Normal file
@ -0,0 +1,12 @@
|
||||
# List of Plugins
|
||||
|
||||
These are the extensions that are included in the jsPsych release.
|
||||
|
||||
Additional extensions may be available in the [community contributions repository](https://github.com/jspsych/jspsych-contrib).
|
||||
|
||||
For an overview of what extensions are and how they work, see our [extensions overview](../overview/extensions.md).
|
||||
|
||||
|
||||
Extension | Description
|
||||
------ | -----------
|
||||
[jspsych‑ext‑webgazer](../extensions/webgazer.md) | Enables eye tracking using the [WebGazer](https://webgazer.cs.brown.edu/) library.
|
||||
@ -1,4 +1,4 @@
|
||||
# jspsych-ext-webgazer
|
||||
# webgazer
|
||||
|
||||
This extension supports eye tracking through the [WebGazer](https://webgazer.cs.brown.edu/) library. For a narrative description of how to use this extension see the [eye tracking overview](../overview/eye-tracking.md).
|
||||
|
||||
@ -6,12 +6,12 @@ This extension supports eye tracking through the [WebGazer](https://webgazer.cs.
|
||||
|
||||
### Initialization Parameters
|
||||
|
||||
Initialization parameters can be set when calling `jsPsych.init()`
|
||||
Initialization parameters can be set when calling `initJsPsych()`
|
||||
|
||||
```js
|
||||
jsPsych.init({
|
||||
initJsPsych({
|
||||
extensions: [
|
||||
{type: 'webgazer', params: {...}}
|
||||
{type: jsPsychExtensionWebgazer, params: {...}}
|
||||
]
|
||||
})
|
||||
```
|
||||
@ -29,9 +29,9 @@ Trial parameters can be set when adding the extension to a trial object.
|
||||
|
||||
```js
|
||||
var trial = {
|
||||
type: '...',
|
||||
type: jsPsych...,
|
||||
extensions: [
|
||||
{type: 'webgazer', params: {...}}
|
||||
{type: jsPsychExtensionWebgazer, params: {...}}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -2,8 +2,12 @@
|
||||
|
||||
|
||||
|
||||
jsPsych is a JavaScript library for running behavioral experiments in a web browser. The library provides a flexible framework for building a wide range of laboratory-like experiments that can be run online.
|
||||
jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser.
|
||||
|
||||
To use jsPsych, you provide a description of the experiment in the form of [a timeline](overview/timeline.md). jsPsych handles things like determining which trial to run next, storing data, and randomization. jsPsych uses *plugins* to define what to do at each point on the timeline. Plugins are ready-made templates for simple experimental tasks like displaying instructions or displaying a stimulus and collecting a keyboard response. Plugins are very flexible to support a wide variety of experiments. It is easy to create your own plugin if you have experience with JavaScript programming.
|
||||
Experiments in jsPsych are created using [plugins](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.
|
||||
You can use the plugins that are [included with jsPsych](plugins/list-of-plugins), use plugins that are developed by community members in the [contrib repository](https://github.com/jspsych/jspsych-contrib), or [create your own plugins](developers/plugin-development/).
|
||||
By assembling different plugins together into [a timeline](overview/timeline), it is possible to create a wide range of experiments.
|
||||
|
||||
[The page on timelines](overview/timeline.md) is a good place to start learning about jsPsych. From there, you might want to complete the [Hello World! tutorial](tutorials/hello-world.md) and the [reaction time experiment tutorial](tutorials/rt-task.md).
|
||||
[The page on timelines](overview/timeline.md) is a good place to start learning about jsPsych.
|
||||
From there, you might want to complete the [hello world tutorial](tutorials/hello-world.md) to learn how to set up a jsPsych experiment and the [reaction time experiment tutorial](tutorials/rt-task.md) to learn the core features of the framework.
|
||||
|
||||
@ -35,7 +35,7 @@ Data can be added to a particular trial by setting the `data` parameter for the
|
||||
|
||||
```js
|
||||
var trial = {
|
||||
type: 'image-keyboard-response',
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'imgA.jpg',
|
||||
data: { image_type: 'A' }
|
||||
}
|
||||
@ -45,7 +45,7 @@ Data declared in this way is also saved in the trials on any nested timelines:
|
||||
|
||||
```js
|
||||
var block = {
|
||||
type: 'image-keyboard-response',
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
data: { image_type: 'A' },
|
||||
timeline: [
|
||||
{stimulus: 'imgA1.jpg'},
|
||||
@ -58,7 +58,7 @@ The data object for a trial can also be updated in the `on_finish` event handler
|
||||
|
||||
```js
|
||||
var trial = {
|
||||
type: 'image-keyboard-response',
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'imgA.jpg',
|
||||
on_finish: function(data){
|
||||
if(jsPsych.pluginAPI.compareKeys(data.response, 'j')){
|
||||
@ -72,7 +72,7 @@ var trial = {
|
||||
|
||||
## Aggregating and manipulating jsPsych data
|
||||
|
||||
When accessing the data with `jsPsych.data.get()` the returned object is a special data collection object that exposes a number of methods for aggregating and manipulating the data. The full list of methods is detailed in the [data module documentation](../core_library/jspsych-data.md).
|
||||
When accessing the data with `jsPsych.data.get()` the returned object is a special data collection object that exposes a number of methods for aggregating and manipulating the data. The full list of methods is detailed in the [data module documentation](../reference/jspsych-data.md).
|
||||
|
||||
Here are some examples of data collection manipulation.
|
||||
|
||||
@ -170,8 +170,7 @@ function saveData(name, data){
|
||||
}
|
||||
|
||||
// call the saveData function after the experiment is over
|
||||
jsPsych.init({
|
||||
// code to define the experiment structure would go here...
|
||||
initJsPsych({
|
||||
on_finish: function(){ saveData(jsPsych.data.get().csv()); }
|
||||
});
|
||||
```
|
||||
@ -277,7 +276,7 @@ It's important that the `XMLHttpRequest` is able to complete before the experime
|
||||
|
||||
```javascript
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
type: jsPsychCallFunction,
|
||||
async: true,
|
||||
func: function(done){
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
@ -13,7 +13,7 @@ Here is a sketch of how this functionality could be used to display feedback to
|
||||
var timeline = [];
|
||||
|
||||
var trial = {
|
||||
type: 'html-keyboard-response',
|
||||
type: jsPsychHtmlKeyboardResponse,
|
||||
stimulus: '<<<<<',
|
||||
choices: ['f','j'],
|
||||
data: {
|
||||
@ -31,7 +31,7 @@ var trial = {
|
||||
}
|
||||
|
||||
var feedback = {
|
||||
type: 'html-keyboard-response',
|
||||
type: jsPsychHtmlKeyboardResponse,
|
||||
stimulus: function(){
|
||||
// The feedback stimulus is a dynamic parameter because we can't know in advance whether
|
||||
// the stimulus should be 'correct' or 'incorrect'.
|
||||
@ -61,7 +61,7 @@ var random_duration = function() {
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: 'html-keyboard-response'
|
||||
type: jsPsychHtmlKeyboardResponse
|
||||
stimulus: '+',
|
||||
post_trial_gap: random_duration // if you use a named function for a dynamic parameter, then just use the function name (without parentheses after it)
|
||||
}
|
||||
@ -75,7 +75,7 @@ The trial's `data` parameter can be also function, which is useful for when you
|
||||
var current_difficulty; // value changes during the experiment
|
||||
|
||||
var trial = {
|
||||
type: 'survey-text',
|
||||
type: jsPsychSurveyText,
|
||||
questions: [{prompt: "Please enter your response."}]
|
||||
data: function() {
|
||||
return {difficulty: current_difficulty};
|
||||
@ -87,7 +87,7 @@ It's also possible to use a function for any of the _individual properties_ in t
|
||||
|
||||
```js
|
||||
var trial = {
|
||||
type: 'survey-text',
|
||||
type: jsPsychSurveyText,
|
||||
questions: [{prompt: "Please enter your response."}]
|
||||
data: {
|
||||
difficulty: function() {
|
||||
@ -107,7 +107,7 @@ Dyanmic parameters work the same way with nested parameters, which are parameter
|
||||
var subject_id; // value is set during the experiment
|
||||
|
||||
var trial = {
|
||||
type: 'survey-text',
|
||||
type: jsPsychSurveyText,
|
||||
questions: function(){
|
||||
var questions_array = [
|
||||
{prompt: "Hi "+subject_id+"! What's your favorite city?", required: true, name: 'fav_city'},
|
||||
@ -122,7 +122,7 @@ You can also use a function for any of the _individual parameters_ inside of a n
|
||||
|
||||
```js
|
||||
var trial = {
|
||||
type: 'survey-text',
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{
|
||||
prompt: function() {
|
||||
|
||||
@ -6,11 +6,10 @@ jsPsych offers the ability to call arbitrary functions in response to certain ev
|
||||
|
||||
## on_close
|
||||
|
||||
The `on_close` callback can be declared in the `jsPsych.init` method. The callback triggers when the user leaves the page, but before any content on the page is removed from the browser's memory. This can be used, for example, to save data as the user is leaving the page.
|
||||
The `on_close` callback can be declared in the `initJsPsych` method. The callback triggers when the user leaves the page, but before any content on the page is removed from the browser's memory. This can be used, for example, to save data as the user is leaving the page.
|
||||
|
||||
```javascript
|
||||
jsPsych.init({
|
||||
timeline: exp,
|
||||
initJsPsych({
|
||||
on_close: function(){
|
||||
var data = jsPsych.data.get().json();
|
||||
save_data_to_server(data);
|
||||
@ -22,11 +21,10 @@ jsPsych.init({
|
||||
|
||||
## on_data_update
|
||||
|
||||
The `on_data_update` callback can be declared in the `jsPsych.init` method. The callback triggers at the end of a data update cycle. This happens after every trial, after the on_finish (trial) and on_trial_finish events execute, allowing you to modify the data in those callbacks, and then use this callback to store the data. The function will be passed a single argument, which contains the data that was written.
|
||||
The `on_data_update` callback can be declared in the `initJsPsych` method. The callback triggers at the end of a data update cycle. This happens after every trial, after the on_finish (trial) and on_trial_finish events execute, allowing you to modify the data in those callbacks, and then use this callback to store the data. The function will be passed a single argument, which contains the data that was written.
|
||||
|
||||
```javascript
|
||||
jsPsych.init({
|
||||
timeline: exp,
|
||||
initJsPsych({
|
||||
on_data_update: function(data) {
|
||||
console.log('Just added new data. The contents of the data are: '+JSON.stringify(data));
|
||||
}
|
||||
@ -41,7 +39,7 @@ The `on_finish` callback can be added to any trial. The callback will trigger wh
|
||||
|
||||
```javascript
|
||||
var trial = {
|
||||
type: 'image-keyboard-response',
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'imgA.png',
|
||||
on_finish: function(data) {
|
||||
if(jsPsych.pluginAPI.compareKeys(data.response, 'j')){
|
||||
@ -57,11 +55,10 @@ var trial = {
|
||||
|
||||
## on_finish (experiment)
|
||||
|
||||
The `on_finish` callback can be declared in the `jsPsych.init` method. The callback will trigger once all trials in the experiment have been run. The method will be passed a single argument, containing all of the data generated in the experiment.
|
||||
The `on_finish` callback can be declared in the `initJsPsych` method. The callback will trigger once all trials in the experiment have been run. The method will be passed a single argument, containing all of the data generated in the experiment.
|
||||
|
||||
```javascript
|
||||
jsPsych.init({
|
||||
timeline: exp,
|
||||
initJsPsych({
|
||||
on_finish: function(data) {
|
||||
console.log('The experiment is over! Here is all the data: '+JSON.stringify(data));
|
||||
}
|
||||
@ -76,7 +73,7 @@ The `on_load` callback can be added to any trial. The callback will trigger once
|
||||
|
||||
```javascript
|
||||
var trial = {
|
||||
type: 'image-keyboard-response',
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'imgA.png',
|
||||
on_load: function() {
|
||||
console.log('The trial just finished loading.');
|
||||
@ -92,7 +89,7 @@ The `on_start` callback can be added to any trial. The callback will trigger rig
|
||||
|
||||
```javascript
|
||||
var trial = {
|
||||
type: 'image-keyboard-response',
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'imgA.png',
|
||||
on_start: function(trial) {
|
||||
console.log('The trial is about to start.');
|
||||
@ -149,11 +146,10 @@ var procedure = {
|
||||
|
||||
## on_trial_finish
|
||||
|
||||
The `on_trial_finish` callback can be declared in the `jsPsych.init` method. The callback will trigger at the end of every trial in the experiment. If you want a callback to trigger only for the end of certain trials, use the [`on_finish`](#onfinishtrial) callback on the trial object. The callback function will be passed a single argument, containing the data object from the trial.
|
||||
The `on_trial_finish` callback can be declared in the `initJsPsych` method. The callback will trigger at the end of every trial in the experiment. If you want a callback to trigger only for the end of certain trials, use the [`on_finish`](#onfinishtrial) callback on the trial object. The callback function will be passed a single argument, containing the data object from the trial.
|
||||
|
||||
```javascript
|
||||
jsPsych.init({
|
||||
timeline: exp,
|
||||
initJsPsych({
|
||||
on_trial_finish: function(data) {
|
||||
console.log('A trial just ended.');
|
||||
console.log(JSON.stringify(data));
|
||||
@ -165,13 +161,12 @@ jsPsych.init({
|
||||
|
||||
## on_trial_start
|
||||
|
||||
The `on_trial_start` callback can be declared in the `jsPsych.init` method. The callback will trigger at the start of every trial in the experiment. The function receives a single argument: a modifiable copy of the trial object that will be used to run the next trial. Changes can be made to this object to alter the parameters of the upcoming trial.
|
||||
The `on_trial_start` callback can be declared in the `initJsPsych` method. The callback will trigger at the start of every trial in the experiment. The function receives a single argument: a modifiable copy of the trial object that will be used to run the next trial. Changes can be made to this object to alter the parameters of the upcoming trial.
|
||||
|
||||
```javascript
|
||||
var current_score = 0; // a variable that is updated throughout the experiment to keep track of the current score.
|
||||
|
||||
jsPsych.init({
|
||||
timeline: exp,
|
||||
initJsPsych({
|
||||
on_trial_start: function(trial) {
|
||||
trial.data.score_at_start_of_trial = current_score;
|
||||
console.log('A trial just started.');
|
||||
@ -1,6 +1,6 @@
|
||||
# Exclude Participants Based on Browser Features
|
||||
|
||||
Online subjects will use many different kinds of browsers. Depending on the experiment, it may be important to specify a minimum feature set of the browser. jsPsych makes this straightforward. Simply specify certain exclusion criteria in the `jsPsych.init` method call. If a subject's browser doesn't meet the criteria the experiment will not start and the subject will see a message explaining the problem. For size restrictions the subject will see a message that displays the current size of their browser window and the minimum size needed to start the experiment, giving the subject an opportunity to enlarge the browser window to continue.
|
||||
Online subjects will use many different kinds of browsers. Depending on the experiment, it may be important to specify a minimum feature set of the browser. jsPsych makes this straightforward. Simply specify certain exclusion criteria in the `initJsPsych` method call. If a subject's browser doesn't meet the criteria the experiment will not start and the subject will see a message explaining the problem. For size restrictions the subject will see a message that displays the current size of their browser window and the minimum size needed to start the experiment, giving the subject an opportunity to enlarge the browser window to continue.
|
||||
|
||||
Current exclusion options:
|
||||
* Minimum browser width & height
|
||||
@ -11,8 +11,7 @@ Current exclusion options:
|
||||
#### Exclude browsers that are not at least 800x600 pixels
|
||||
|
||||
```javascript
|
||||
jsPsych.init({
|
||||
timeline: exp,
|
||||
initJsPsych({
|
||||
exclusions: {
|
||||
min_width: 800,
|
||||
min_height: 600
|
||||
@ -23,8 +22,7 @@ jsPsych.init({
|
||||
#### Exclude browsers that do not have access to the WebAudio API
|
||||
|
||||
```javascript
|
||||
jsPsych.init({
|
||||
timeline: exp,
|
||||
initJsPsych({
|
||||
exclusions: {
|
||||
audio: true
|
||||
}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
# Experiment-wide settings
|
||||
|
||||
There are several options that can be set when calling `jsPsych.init()` to launch the experiment.
|
||||
There are several options that can be set when calling `initJsPsych()` to initialize the jsPsych experiment.
|
||||
|
||||
Options are specified in the object passed to `jsPsych.init`. For example, to specify a default inter-trial interval, a minimum valid response time duration, and a maximum width for all of the experiment's page content, the object would contain:
|
||||
Options are specified in the object passed to `initJsPsych`. For example, to specify a default inter-trial interval, a minimum valid response time duration, and a maximum width for all of the experiment's page content, the object would contain:
|
||||
|
||||
```js
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
initJsPsych({
|
||||
default_iti: 250,
|
||||
minimum_valid_rt: 100,
|
||||
experiment_width: 800
|
||||
@ -22,13 +21,11 @@ By default, jsPsych will render the experiment in the `<body>` element of a page
|
||||
<div id="jspsych-target"></div>
|
||||
</body>
|
||||
<script>
|
||||
|
||||
// ... //
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
initJsPsych({
|
||||
display_element: 'jspsych-target'
|
||||
})
|
||||
});
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -36,7 +33,7 @@ This option is useful if the experiment needs to be rendered on a page with othe
|
||||
|
||||
## Experiment events
|
||||
|
||||
Several experiment-wide events can trigger functions. This is documented in more detail on the [event-related callback functions page](callbacks.md). The events that trigger functions are:
|
||||
Several experiment-wide events can trigger functions. This is documented in more detail on the [event-related callback functions page](events.md). The events that trigger functions are:
|
||||
|
||||
* `on_finish`: Called at the end of the experiment.
|
||||
* `on_trial_start`: Called at the beginning of every trial.
|
||||
@ -51,28 +48,26 @@ Exclusion criteria can be specified based on features of the user's web browser,
|
||||
|
||||
## Display a progress bar
|
||||
|
||||
An automatic or manually updated progress bar can be displayed at the top of the screen. By default, the text next to the progress bar is "Completion Progress", but this text can be changed with the `message_progress_bar` parameter in `jsPsych.init`. See the [progress bar page](progress-bar.md) for more details.
|
||||
An automatic or manually updated progress bar can be displayed at the top of the screen. By default, the text next to the progress bar is "Completion Progress", but this text can be changed with the `message_progress_bar` parameter in `initJsPsych`. See the [progress bar page](progress-bar.md) for more details.
|
||||
|
||||
## Choose the method for playing audio files
|
||||
|
||||
Specifying the `use_webaudio` parameter in `jsPsych.init()` allows you to choose whether to use the WebAudio API or HTML5 audio for playing audio files during your experiment. By default, jsPsych uses the WebAudio API to play audio files. Among other features, the WebAudio API allows for more precise measurement of response times relative to the onset of the audio.
|
||||
Specifying the `use_webaudio` parameter in `initJsPsych()` allows you to choose whether to use the WebAudio API or HTML5 audio for playing audio files during your experiment. By default, jsPsych uses the WebAudio API to play audio files. Among other features, the WebAudio API allows for more precise measurement of response times relative to the onset of the audio.
|
||||
|
||||
However, loading files through the WebAudio API causes errors when running an experiment offline (i.e., by double-clicking on the HTML file, rather than hosting it on a web server). This is due to the [cross-origin security policy](https://security.stackexchange.com/a/190321) implemented by web browsers. For this reason, jsPsych switches to a 'safe mode' when it detects that the webpage is running offline, and automatically uses HTML5 audio to prevent errors, even when `use_webaudio` has been explicitly set to `true`. For more information, see the section [Cross-origin requests (CORS) and safe mode](running-experiments.md#cross-origin-requests-cors-and-safe-mode) on the Running Experiments page.
|
||||
|
||||
```js
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
initJsPsych({
|
||||
use_webaudio: false
|
||||
});
|
||||
```
|
||||
|
||||
## Set the default intertrial interval
|
||||
|
||||
By default the next trial in a timeline will begin immediately after the conclusion of the previous trial. An experiment-wide delay can be specified using the `default_iti` parameter to `jsPsych.init()`.
|
||||
By default the next trial in a timeline will begin immediately after the conclusion of the previous trial. An experiment-wide delay can be specified using the `default_iti` parameter to `initJsPsych()`.
|
||||
|
||||
```js
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
initJsPsych({
|
||||
default_iti: 500
|
||||
});
|
||||
```
|
||||
@ -86,8 +81,7 @@ The experiment will, by default, take up 100% of the display element. Usually th
|
||||
Specifying the `experiment_width` parameter will set a maximum width for the display. The parameter is specified in pixels.
|
||||
|
||||
```js
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
initJsPsych({
|
||||
experiment_width: 750
|
||||
});
|
||||
```
|
||||
@ -98,8 +92,7 @@ By default, jsPsych will treat any keyboard response time as valid. However, it'
|
||||
|
||||
```js
|
||||
// ignore any keyboard responses that are less than 100 ms
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
initJsPsych({
|
||||
minimum_valid_rt: 100
|
||||
});
|
||||
```
|
||||
@ -108,14 +101,13 @@ jsPsych.init({
|
||||
|
||||
JavaScript keyboard events make a distinction between uppercase and lowercase key responses (e.g. 'a' and 'A'). Often the researcher just cares about which physical key was pressed, and not whether the key press would result in an uppercase letter (for instance, if CapsLock is on or if the Shift key is held down). For this reason, jsPsych converts all key choice parameters and key responses as lowercase by default. This makes it easier to specify key choices (e.g. `choices: ['a']`, instead of `choices: ['a','A']`), and it makes it easier to check and score a participant's response.
|
||||
|
||||
There may be situations when you want key choices and responses to be case-sensitive. You can change this by setting the `case_sensitive_responses` parameter to `true` in `jsPsych.init`.
|
||||
There may be situations when you want key choices and responses to be case-sensitive. You can change this by setting the `case_sensitive_responses` parameter to `true` in `initJsPsych`.
|
||||
|
||||
```js
|
||||
// use case-sensitive key choices and responses,
|
||||
// i.e. uppercase and lower case letters ('a' and 'A') will be treated as different key choices,
|
||||
// and will be recorded this way in the data
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
initJsPsych({
|
||||
case_sensitive_responses: true
|
||||
});
|
||||
```
|
||||
@ -126,24 +118,22 @@ Note that this setting only applies to key choices and responses that use jsPsyc
|
||||
|
||||
By default, jsPsych switches to a 'safe mode' when it detects that the webpage is running offline (via the `file://` protocol) in order to prevent certain errors. Specifically, in safe mode, HTML5 audio is used to play audio files (even when `use_webaudio` has been explicitly set to `true`) and video preloading is disabled (both automatic and manual preloading). For more information, see the [Cross-origin requests (CORS) and safe mode](running-experiments.md#cross-origin-requests-cors-and-safe-mode) section on the Running Experiments page.
|
||||
|
||||
It's possible to override this safe mode feature by setting the `override_safe_mode` parameter to `true` in `jsPsych.init`. This is something you might do if you've disabled certain security settings in your browser for testing purposes. This parameter has no effect when your experiment is running online (on a server), because it will be using the `http://` or `https://` protocol, which does not trigger safe mode.
|
||||
It's possible to override this safe mode feature by setting the `override_safe_mode` parameter to `true` in `initJsPsych`. This is something you might do if you've disabled certain security settings in your browser for testing purposes. This parameter has no effect when your experiment is running online (on a server), because it will be using the `http://` or `https://` protocol, which does not trigger safe mode.
|
||||
|
||||
```js
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
initJsPsych({
|
||||
override_safe_mode: true
|
||||
});
|
||||
```
|
||||
|
||||
## Add extensions
|
||||
|
||||
Extensions are jsPsych modules that can run throughout the experiment and interface with any plugin to extend the functionality of the plugin. One example of an extension is eye tracking, which allows you to gather gaze data during any trial and add it to that trial's data object. If you want to use extensions in your experiment, you must specify this when you initialize the experiment with `jsPsych.init`. The `extensions` parameter in `jsPsych.init` is an array of objects, where each object specifies the extension that you'd like to use in the experiment. Below is an example of adding the webgazer extension.
|
||||
[Extensions](extensions/) are jsPsych modules that can run throughout the experiment and interface with any plugin to extend the functionality of the plugin. One example of an extension is eye tracking, which allows you to gather gaze data during any trial and add it to that trial's data object. If you want to use extensions in your experiment, you must specify this when you initialize the experiment with `initJsPsych`. The `extensions` parameter in `initJsPsych` is an array of objects, where each object specifies the extension that you'd like to use in the experiment. Below is an example of adding the webgazer extension.
|
||||
|
||||
```js
|
||||
jsPsych.init({
|
||||
timeline: [...],
|
||||
initJsPsych({
|
||||
extensions: [
|
||||
{type: 'webgazer'}
|
||||
{type: jsPsychExtensionWebgazer}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
42
docs/overview/extensions.md
Normal file
42
docs/overview/extensions.md
Normal file
@ -0,0 +1,42 @@
|
||||
# Extensions
|
||||
|
||||
Extensions are jsPsych modules that can interface with any plugin to extend the functionality of the plugin. A canonical example of an extension is eye tracking. An eye tracking extension allows a plugin to gather gaze data and add it to the plugin's data object.
|
||||
|
||||
## Using an Extension
|
||||
|
||||
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()`.
|
||||
|
||||
```html
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/extension-example@1.0.0"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
```js
|
||||
initJsPsych({
|
||||
extensions: [
|
||||
{type: jsPsychExtensionExample, params: {...} }
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
To enable an extension during a trial, add the extension to the `extensions` list for the trial. Some extensions may also support or require an object of parameters to configure the extension:
|
||||
|
||||
```js
|
||||
var trial = {
|
||||
extensions: [
|
||||
{type: jsPsychExtensionExample, params: {...} }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## List of Extensions
|
||||
|
||||
Extension | Description
|
||||
------ | -----------
|
||||
[jspsych‑ext‑webgazer.js](../extensions/webgazer.md) | Enables eye tracking using the [WebGazer](https://webgazer.cs.brown.edu/) library.
|
||||
|
||||
## Writing an Extension
|
||||
|
||||
See our [developer's guide for extensions](../developers/extension-development.md) for information about how to create a new extension.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user