mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
finish replacing jsPsych.init with initJsPsych/jsPsych.run in .md files
This commit is contained in:
Becky Gilbert
parent
3d8e385863
commit
2defc04652
@ -7,11 +7,11 @@ If an experiment uses image, audio, or video files as stimuli, it is a good idea
|
||||
|
||||
## Automatic Preloading
|
||||
|
||||
jsPsych can automatically preload audio, video, and image files that are used as parameters for the standard set of plugins, based on the timeline that is passed to `jsPsych.init`. You must initiate this preloading using a `preload` trial. You should add this `preload` trial into your timeline when you want the preloading to occur, and set the `auto_preload` parameter to `true`.
|
||||
jsPsych can automatically preload audio, video, and image files that are used as parameters for the standard set of plugins, based on the timeline that is passed to `jsPsych.run`. You must initiate this preloading using a `preload` trial. You should add this `preload` trial into your timeline when you want the preloading to occur, and set the `auto_preload` parameter to `true`.
|
||||
|
||||
```javascript
|
||||
// the "auto_preload: true" setting tells the plugin to automatically find
|
||||
// stimuli to preload based the main experiment timeline (used in jsPsych.init)
|
||||
// stimuli to preload based the main experiment timeline (used in jsPsych.run)
|
||||
var preload = {
|
||||
type: 'preload',
|
||||
auto_preload: true
|
||||
@ -36,9 +36,7 @@ var video_trial = {
|
||||
stimulus: ['video/sample_video.mp4']
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [preload, image_trial, sound_trial, video_trial]
|
||||
});
|
||||
jsPsych.run([preload, image_trial, sound_trial, video_trial]);
|
||||
```
|
||||
|
||||
## Manual preloading
|
||||
@ -90,9 +88,7 @@ var preload = {
|
||||
video: video
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [preload, image_trial, sound_trial, video_trials],
|
||||
});
|
||||
jsPsych.run([preload, image_trial, sound_trial, video_trials]);
|
||||
|
||||
```
|
||||
|
||||
@ -135,9 +131,7 @@ var preload = {
|
||||
video: video // manually preload the videos used with timeline variables
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [preload, image_trial, sound_trial, video_trials],
|
||||
});
|
||||
jsPsych.run([preload, image_trial, sound_trial, video_trials]);
|
||||
|
||||
```
|
||||
|
||||
@ -185,10 +179,10 @@ var preload_2 = {
|
||||
trials: block_2 // automatically preload just the images from block_2 trials
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
jsPsych.run(
|
||||
// add each preload trial onto the timeline before the appropriate trial block
|
||||
timeline: [preload_1, block_1, preload_2, block_2],
|
||||
});
|
||||
[preload_1, block_1, preload_2, block_2]
|
||||
);
|
||||
```
|
||||
|
||||
Below is an example with trials where the stimuli files cannot be preloaded automatically, because the stimuli files are passed to the trials via `jsPsych.timelineVariable`. In this case, we create separate arrays for each batch of files, and then pass those arrays to the each preload trial.
|
||||
@ -227,10 +221,10 @@ var preload_2 = {
|
||||
images: images_block_2
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
jsPsych.run(
|
||||
// add each preload trial to the timeline before the appropriate trial block
|
||||
timeline: [preload_1, block_1, preload_2, block_2],
|
||||
});
|
||||
[preload_1, block_1, preload_2, block_2]
|
||||
);
|
||||
|
||||
```
|
||||
|
||||
@ -340,9 +334,7 @@ var if_loading_fails = {
|
||||
|
||||
// ... rest of experiment
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [preload_trial, if_loading_fails, ... ]
|
||||
})
|
||||
jsPsych.run([preload_trial, if_loading_fails, ... ])
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -240,7 +240,7 @@ An object with properties for each media type: `images`, `audio`, and `video`. E
|
||||
|
||||
### Description
|
||||
|
||||
This method is used to automatically generate lists of unique image, audio, and video files from a timeline. It is used by the `preload` plugin to generate a list of to-be-preloaded files based on the trials passed to the `trials` parameter and/or the experiment timeline passed to `jsPsych.init` (when `auto_preload` is true). It can be used in custom plugins and experiment code to generate a list of audio/image/video files, based on a timeline.
|
||||
This method is used to automatically generate lists of unique image, audio, and video files from a timeline. It is used by the `preload` plugin to generate a list of to-be-preloaded files based on the trials passed to the `trials` parameter and/or the experiment timeline passed to `jsPsych.run` (when `auto_preload` is true). It can be used in custom plugins and experiment code to generate a list of audio/image/video files, based on a timeline.
|
||||
|
||||
This function will only return files from plugins that have used the `registerPreload` method to define the media types of their parameters, and only when the trial's parameter value is not a function. When a file path is returned to the trial parameter from a function (including by `jsPsych.timelineVariable` function), or when the file path is embedded in an HTML string, that file will not be detected by the `getAutoPreloadList` method. In these cases, the file should be preloaded manually. See [Media Preloading](../overview/media-preloading.md) for more information.
|
||||
|
||||
@ -384,9 +384,7 @@ jsPsych.pluginAPI.preloadAudio(sounds,
|
||||
);
|
||||
|
||||
function startExperiment(){
|
||||
jsPsych.init({
|
||||
timeline: exp
|
||||
});
|
||||
jsPsych.run(exp);
|
||||
}
|
||||
```
|
||||
|
||||
@ -408,9 +406,7 @@ function updateLoadedCount(file){
|
||||
}
|
||||
|
||||
function startExperiment(){
|
||||
jsPsych.init({
|
||||
timeline: exp
|
||||
});
|
||||
jsPsych.run(exp);
|
||||
}
|
||||
```
|
||||
|
||||
@ -457,9 +453,7 @@ jsPsych.pluginAPI.preloadImages(images,
|
||||
);
|
||||
|
||||
function startExperiment(){
|
||||
jsPsych.init({
|
||||
timeline: exp
|
||||
});
|
||||
jsPsych.run(exp);
|
||||
}
|
||||
```
|
||||
|
||||
@ -481,9 +475,7 @@ function updateLoadedCount(file){
|
||||
}
|
||||
|
||||
function startExperiment(){
|
||||
jsPsych.init({
|
||||
timeline: exp
|
||||
});
|
||||
jsPsych.run(exp);
|
||||
}
|
||||
```
|
||||
|
||||
@ -530,9 +522,7 @@ jsPsych.pluginAPI.preloadVideo(videos,
|
||||
);
|
||||
|
||||
function startExperiment(){
|
||||
jsPsych.init({
|
||||
timeline: exp
|
||||
});
|
||||
jsPsych.run(exp);
|
||||
}
|
||||
```
|
||||
|
||||
@ -554,9 +544,7 @@ function updateLoadedCount(file){
|
||||
}
|
||||
|
||||
function startExperiment(){
|
||||
jsPsych.init({
|
||||
timeline: exp
|
||||
});
|
||||
jsPsych.run(exp);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,71 @@
|
||||
# jsPsych
|
||||
|
||||
---
|
||||
## initJsPsych
|
||||
|
||||
```javascript
|
||||
var jsPsych = initJsPsych(settings);
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| --------- | ------ | ---------------------------------------- |
|
||||
| settings | object | The settings object for initializing jsPsych. See table below. |
|
||||
|
||||
The settings object can contain several parameters. None of the parameters are required.
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| -------------------------- | -------- | ---------------------------------------- |
|
||||
| display_element | string | The ID of an HTML element to display the experiment in. If left blank, jsPsych will use the `<body>` element to display content. All keyboard event listeners are bound to this element. In order for a keyboard event to be detected, this element must have focus (be the last thing that the subject clicked on). |
|
||||
| on_finish | function | Function to execute when the experiment ends. |
|
||||
| on_trial_start | function | Function to execute when a new trial begins. |
|
||||
| on_trial_finish | function | Function to execute when a trial ends. |
|
||||
| on_data_update | function | Function to execute every time data is stored using the `jsPsych.data.write` method. All plugins use this method to save data (via a call to `jsPsych.finishTrial`, so this function runs every time a plugin stores new data. |
|
||||
| on_interaction_data_update | function | Function to execute every time a new interaction event occurs. Interaction events include clicking on a different window (blur), returning to the experiment window (focus), entering full screen mode (fullscreenenter), and exiting full screen mode (fullscreenexit). |
|
||||
| on_close | function | Function to execute when the user leaves the page. Can be used, for example, to save data before the page is closed. |
|
||||
| exclusions | object | Specifies restrictions on the browser the subject can use to complete the experiment. See list of options below. |
|
||||
| show_progress_bar | boolean | If `true`, then [a progress bar](../overview/progress-bar.md) is shown at the top of the page. Default is `false`. |
|
||||
| message_progress_bar | string | Message to display next to the progress bar. The default is 'Completion Progress'. |
|
||||
| auto_update_progress_bar | boolean | If true, then the progress bar at the top of the page will automatically update as every top-level timeline or trial is completed. |
|
||||
| use_webaudio | boolean | If false, then jsPsych will not attempt to use the WebAudio API for audio playback. Instead, HTML5 Audio objects will be used. The WebAudio API offers more precise control over the timing of audio events, and should be used when possible. The default value is `true`. |
|
||||
| default_iti | numeric | The default inter-trial interval in ms. The default value if none is specified is 0ms. |
|
||||
| experiment_width | numeric | The desired width of the jsPsych container in pixels. If left undefined, the width will be 100% of the display element. Usually this is the `<body>` element, and the width will be 100% of the screen size. |
|
||||
| minimum_valid_rt | numeric | The minimum valid response time for key presses during the experiment. Any key press response time that is less than this value will be treated as invalid and ignored. Note that this parameter only applies to _keyboard responses_, and not to other response types such as buttons and sliders. The default value is 0. |
|
||||
| override_safe_mode | boolean | Running a jsPsych experiment directly in a web browser (e.g., by double clicking on a local HTML file) will load the page using the `file://` protocol. Some features of jsPsych don't work with this protocol. By default, when jsPsych detects that it's running on a page loaded via the `file://` protocol, it runs in _safe mode_, which automatically disables features that don't work in this context. Specifically, the use of Web Audio is disabled (audio will be played using HTML5 audio instead, even if `use_webaudio` is `true`) and video preloading is disabled. The `override_safe_mode` parameter defaults to `false`, but you can set it to `true` to force these features to operate under the `file://` protocol. In order for this to work, you will need to disable web security (CORS) features in your browser - this is safe to do if you know what you are doing. Note that this parameter has no effect when you are running the experiment on a web server, because the page will be loaded via the `http://` or `https://` protocol. |
|
||||
| case_sensitive_responses | boolean | If `true`, then jsPsych will make a distinction between uppercase and lowercase keys when evaluating keyboard responses, e.g. "A" (uppercase) will not be recognized as a valid response if the trial only accepts "a" (lowercase). If false, then jsPsych will not make a distinction between uppercase and lowercase keyboard responses, e.g. both "a" and "A" responses will be valid when the trial's key choice parameter is "a". Setting this parameter to false is useful if you want key responses to be treated the same way when CapsLock is turned on or the Shift key is held down. The default value is `false`. |
|
||||
extensions | array | Array containing information about one or more jsPsych extensions that are used during the experiment. Each extension should be specified as an object with `type` (required), which is the name of the extension, and `params` (optional), which is an object containing any parameter-value pairs to be passed to the extension's `initialize` function. Default value is an empty array. |
|
||||
|
||||
Possible values for the exclusions parameter above.
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ---------- | ------- | ---------------------------------------- |
|
||||
| min_width | numeric | The minimum width of the browser window. If the width is below this value, a message will be displayed to the subject asking them to maximize their browser window. The experiment will sit on this page until the browser window is large enough. |
|
||||
| min_height | numeric | Same as above, but with height. |
|
||||
| audio | boolean | Set to true to require support for the WebAudio API (used by plugins that play audio files). |
|
||||
|
||||
### Return value
|
||||
|
||||
Returns a jsPsych instance, which all jsPsych methods on this page are called on. Therefore it is not possible to call any of the jsPsych methods listed on this page until this `initJsPsych` function is called and a jsPsych instance is created.
|
||||
|
||||
### Description
|
||||
|
||||
This function initializes jsPsych with the specified experiment settings.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
var jsPsych = initJsPsych({
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
},
|
||||
show_progress_bar: true,
|
||||
default_iti: 500
|
||||
});
|
||||
```
|
||||
|
||||
For more examples, see the HTML files in the [examples folder](https://github.com/jspsych/jsPsych/tree/main/examples).
|
||||
|
||||
---
|
||||
## jsPsych.addNodeToEndOfTimeline
|
||||
|
||||
@ -60,6 +126,12 @@ Ends the current timeline. If timelines are nested, then only the timeline that
|
||||
#### End timeline if a particular key is pressed
|
||||
|
||||
```javascript
|
||||
var jsPsych = initJsPsych({
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
|
||||
var images = [
|
||||
"img/1.gif", "img/2.gif", "img/3.gif", "img/4.gif",
|
||||
"img/5.gif", "img/6.gif", "img/7.gif", "img/8.gif",
|
||||
@ -90,12 +162,7 @@ var after_block = {
|
||||
stimulus: '<p>The next node</p>'
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [block, after_block],
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
jsPsych.run([block, after_block]);
|
||||
```
|
||||
|
||||
---
|
||||
@ -436,7 +503,7 @@ None.
|
||||
|
||||
### Return value
|
||||
|
||||
Returns a numeric value indicating the number of milliseconds since `jsPsych.init` was called.
|
||||
Returns a numeric value indicating the number of milliseconds since `jsPsych.run` was called.
|
||||
|
||||
### Description
|
||||
|
||||
@ -449,67 +516,7 @@ var time = jsPsych.getTotalTime();
|
||||
console.log(time);
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
## jsPsych.init
|
||||
|
||||
```javascript
|
||||
jsPsych.init(settings)
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| --------- | ------ | ---------------------------------------- |
|
||||
| settings | object | The settings object for initializing jsPsych. See table below. |
|
||||
|
||||
The settings object can contain several parameters. The only *required* parameter is `timeline`.
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| -------------------------- | -------- | ---------------------------------------- |
|
||||
| timeline | array | An array containing the objects that describe the experiment timeline. See [Creating an Experiment: The Timeline](../overview/timeline.md). |
|
||||
| display_element | string | The ID of an HTML element to display the experiment in. If left blank, jsPsych will use the `<body>` element to display content. All keyboard event listeners are bound to this element. In order for a keyboard event to be detected, this element must have focus (be the last thing that the subject clicked on). |
|
||||
| on_finish | function | Function to execute when the experiment ends. |
|
||||
| on_trial_start | function | Function to execute when a new trial begins. |
|
||||
| on_trial_finish | function | Function to execute when a trial ends. |
|
||||
| on_data_update | function | Function to execute every time data is stored using the `jsPsych.data.write` method. All plugins use this method to save data (via a call to `jsPsych.finishTrial`, so this function runs every time a plugin stores new data. |
|
||||
| on_interaction_data_update | function | Function to execute every time a new interaction event occurs. Interaction events include clicking on a different window (blur), returning to the experiment window (focus), entering full screen mode (fullscreenenter), and exiting full screen mode (fullscreenexit). |
|
||||
| on_close | function | Function to execute when the user leaves the page. Can be used, for example, to save data before the page is closed. |
|
||||
| exclusions | object | Specifies restrictions on the browser the subject can use to complete the experiment. See list of options below. |
|
||||
| show_progress_bar | boolean | If true, then [a progress bar](../overview/progress-bar.md) is shown at the top of the page. |
|
||||
| message_progress_bar | string | Message to display next to the progress bar. The default is 'Completion Progress'. |
|
||||
| auto_update_progress_bar | boolean | If true, then the progress bar at the top of the page will automatically update as every top-level timeline or trial is completed. |
|
||||
| use_webaudio | boolean | If false, then jsPsych will not attempt to use the WebAudio API for audio playback. Instead, HTML5 Audio objects will be used. The WebAudio API offers more precise control over the timing of audio events, and should be used when possible. The default value is true. |
|
||||
| default_iti | numeric | The default inter-trial interval in ms. The default value if none is specified is 0ms. |
|
||||
| experiment_width | numeric | The desired width of the jsPsych container in pixels. If left undefined, the width will be 100% of the display element. Usually this is the `<body>` element, and the width will be 100% of the screen size. |
|
||||
| minimum_valid_rt | numeric | The minimum valid response time for key presses during the experiment. Any key press response time that is less than this value will be treated as invalid and ignored. Note that this parameter only applies to _keyboard responses_, and not to other response types such as buttons and sliders. The default value is 0. |
|
||||
| override_safe_mode | boolean | Running a jsPsych experiment directly in a web browser (e.g., by double clicking on a local HTML file) will load the page using the `file://` protocol. Some features of jsPsych don't work with this protocol. By default, when jsPsych detects that it's running on a page loaded via the `file://` protocol, it runs in _safe mode_, which automatically disables features that don't work in this context. Specifically, the use of Web Audio is disabled (audio will be played using HTML5 audio instead, even if `use_webaudio` is `true`) and video preloading is disabled. The `override_safe_mode` parameter defaults to `false`, but you can set it to `true` to force these features to operate under the `file://` protocol. In order for this to work, you will need to disable web security (CORS) features in your browser - this is safe to do if you know what you are doing. Note that this parameter has no effect when you are running the experiment on a web server, because the page will be loaded via the `http://` or `https://` protocol. |
|
||||
| case_sensitive_responses | boolean | If true, then jsPsych will make a distinction between uppercase and lowercase keys when evaluating keyboard responses, e.g. "A" (uppercase) will not be recognized as a valid response if the trial only accepts "a" (lowercase). If false, then jsPsych will not make a distinction between uppercase and lowercase keyboard responses, e.g. both "a" and "A" responses will be valid when the trial's key choice parameter is "a". Setting this parameter to false is useful if you want key responses to be treated the same way when CapsLock is turned on or the Shift key is held down. The default value is false. |
|
||||
extensions | array | Array containing information about one or more jsPsych extensions that are used during the experiment. Each extension should be specified as an object with `type` (required), which is the name of the extension, and `params` (optional), which is an object containing any parameter-value pairs to be passed to the extension's `initialize` function. Default value is an empty array. |
|
||||
|
||||
Possible values for the exclusions parameter above.
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| ---------- | ------- | ---------------------------------------- |
|
||||
| min_width | numeric | The minimum width of the browser window. If the width is below this value, a message will be displayed to the subject asking them to maximize their browser window. The experiment will sit on this page until the browser window is large enough. |
|
||||
| min_height | numeric | Same as above, but with height. |
|
||||
| audio | boolean | Set to true to require support for the WebAudio API (used by plugins that play audio files). |
|
||||
|
||||
### Return value
|
||||
|
||||
Returns nothing.
|
||||
|
||||
### Description
|
||||
|
||||
This method configures and starts the experiment.
|
||||
|
||||
### Example
|
||||
|
||||
See any of the plugin examples in the [examples folder](https://github.com/jodeleeuw/jsPsych/tree/master/examples) in the GitHub repository.
|
||||
|
||||
|
||||
---
|
||||
|
||||
## jsPsych.pauseExperiment
|
||||
|
||||
```javascript
|
||||
@ -582,6 +589,36 @@ var trial = {
|
||||
|
||||
---
|
||||
|
||||
## jsPsych.run
|
||||
|
||||
```javascript
|
||||
jsPsych.run(timeline)
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
| --------- | ------- | ---------------------------------------- |
|
||||
| timeline | array | An array containing the objects that describe the experiment timeline. See [Creating an Experiment: The Timeline](../overview/timeline.md). |
|
||||
|
||||
### Return value
|
||||
|
||||
None.
|
||||
|
||||
### Description
|
||||
|
||||
Start the jsPsych experiment with the specified timeline.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
var timeline = [trial1, trial2, trial3];
|
||||
|
||||
jsPsych.run(timeline);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## jsPsych.setProgressBar
|
||||
|
||||
```javascript
|
||||
|
||||
@ -31,7 +31,13 @@ This will be our starting point for building the rest of the experiment.
|
||||
|
||||
## Part 2: Display welcome message
|
||||
|
||||
All jsPsych experiments are defined by a timeline. The timeline is an array that contains the set of trials we want to run in the experiment. We can start by defining the timeline array.
|
||||
First we have to initialize jsPsych. We can do this using the [`initJsPsych()` function](/reference/jspsych.md#initjspsych), and saving the result to a variable called `jsPsych`.
|
||||
|
||||
```javascript
|
||||
var jsPsych = initJsPsych();
|
||||
```
|
||||
|
||||
All jsPsych experiments are defined by a timeline. The timeline is an array that contains the set of trials we want to run in the experiment. We can start by defining an empty timeline array.
|
||||
|
||||
```javascript
|
||||
var timeline = [];
|
||||
@ -54,12 +60,10 @@ Next, we push the welcome trial to the timeline, which adds it to the end of the
|
||||
timeline.push(welcome);
|
||||
```
|
||||
|
||||
Finally, we tell jsPsych to run the experiment by calling the [jsPsych.init() function](/reference/jspsych.md#jspsychinit) and passing in the array that defines the experiment timeline.
|
||||
Finally, we tell jsPsych to run the experiment by calling the [jsPsych.run() function](/reference/jspsych.md#jspsychrun) and passing in the array that defines the experiment timeline.
|
||||
|
||||
```javascript
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
```
|
||||
After each step in the tutorial you can view the complete code up to that point by clicking on the expandable box below.
|
||||
|
||||
@ -75,6 +79,9 @@ After each step in the tutorial you can view the complete code up to that point
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
@ -87,9 +94,8 @@ After each step in the tutorial you can view the complete code up to that point
|
||||
timeline.push(welcome);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
@ -136,6 +142,7 @@ timeline.push(instructions);
|
||||
```
|
||||
|
||||
??? example "The complete code so far"
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
@ -148,6 +155,9 @@ timeline.push(instructions);
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -180,9 +190,8 @@ timeline.push(instructions);
|
||||
timeline.push(instructions);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
@ -238,6 +247,9 @@ timeline.push(blue_trial, orange_trial);
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -285,11 +297,10 @@ timeline.push(blue_trial, orange_trial);
|
||||
timeline.push(blue_trial, orange_trial);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Part 5: Preloading media
|
||||
@ -343,6 +354,9 @@ timeline.push(preload);
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -397,11 +411,10 @@ timeline.push(preload);
|
||||
timeline.push(blue_trial, orange_trial);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Part 6: Timeline variables
|
||||
@ -473,6 +486,9 @@ What happens when the experiment reaches the test procedure? jsPsych will run th
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -538,11 +554,10 @@ What happens when the experiment reaches the test procedure? jsPsych will run th
|
||||
timeline.push(test_procedure);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -584,6 +599,9 @@ var test_procedure = {
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -651,11 +669,10 @@ var test_procedure = {
|
||||
timeline.push(test_procedure);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Part 8: Using functions to generate parameters
|
||||
@ -693,6 +710,9 @@ In the code above, we replaced the `trial_duration: 1000` parameter in `fixation
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -762,22 +782,20 @@ In the code above, we replaced the `trial_duration: 1000` parameter in `fixation
|
||||
timeline.push(test_procedure);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Part 10: Displaying the data
|
||||
|
||||
We have created a complete, if simple, experiment at this point, so let's take a look at the data being generated. jsPsych has a built-in [function called `jsPsych.data.displayData()`](/reference/jspsych-data.md#jspsychdatadisplaydata) that is useful for debugging your experiment. It will remove all of the information on the screen and replace it with the raw data collected so far. This isn't terribly useful when you are actually running an experiment, but it's nice for checking the data during development.
|
||||
|
||||
We need the `displayData` function to execute when the experiment ends. One way to do this is to use the [`on_finish` callback function](/overview/callbacks.md#on_finish-experiment). This function will automatically execute once all the trials in the experiment are finished. We can specify a function to call in the `init` method.
|
||||
We need the `displayData` function to execute when the experiment ends. One way to do this is to use the [`on_finish` callback function](/overview/callbacks.md#on_finish-experiment). This function will automatically execute once all the trials in the experiment are finished. We can specify this function in the experiment settings when we initialize jsPsych with the `initJsPsych` method.
|
||||
|
||||
```javascript
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
var jsPsych = initJsPsych({
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
@ -800,6 +818,13 @@ jsPsych.init({
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych({
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -869,14 +894,10 @@ jsPsych.init({
|
||||
timeline.push(test_procedure);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Part 11: Tagging trials with additional data
|
||||
@ -953,6 +974,13 @@ var fixation = {
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych({
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -1029,12 +1057,8 @@ var fixation = {
|
||||
timeline.push(test_procedure);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
@ -1082,6 +1106,13 @@ The `data.response` value is a string representation of the key the subject pres
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych({
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -1161,14 +1192,10 @@ The `data.response` value is a string representation of the key the subject pres
|
||||
timeline.push(test_procedure);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -1226,6 +1253,13 @@ This code is available in the `/examples` folder in the jsPsych release download
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
/* initialize jsPsych */
|
||||
var jsPsych = initJsPsych({
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
|
||||
/* create timeline */
|
||||
var timeline = [];
|
||||
|
||||
@ -1323,12 +1357,8 @@ This code is available in the `/examples` folder in the jsPsych release download
|
||||
timeline.push(debrief_block);
|
||||
|
||||
/* start the experiment */
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user