HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

update all trial/extension type params in md files

Browse Source
This commit is contained in:
Becky Gilbert 2021-09-22 23:14:11 -07:00
parent 3df5f94040
commit ad460e4bc9
62 changed files with 356 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/extensions/jspsych-ext-webgazer.md
View File

@ -11,7 +11,7 @@ Initialization parameters can be set when calling `initJsPsych()`
```js ```js
initJsPsych({ initJsPsych({
extensions: [ 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 ```js
var trial = { var trial = {
type: '...', type: jsPsych...,
extensions: [ extensions: [
{type: 'webgazer', params: {...}} {type: jsPsychExtensionWebgazer, params: {...}}
] ]
} }
``` ```

8
docs/overview/data.md
View File

@ -35,7 +35,7 @@ Data can be added to a particular trial by setting the `data` parameter for the
```js ```js
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.jpg', stimulus: 'imgA.jpg',
data: { image_type: 'A' } data: { image_type: 'A' }
} }
@ -45,7 +45,7 @@ Data declared in this way is also saved in the trials on any nested timelines:
```js ```js
var block = { var block = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
data: { image_type: 'A' }, data: { image_type: 'A' },
timeline: [ timeline: [
{stimulus: 'imgA1.jpg'}, {stimulus: 'imgA1.jpg'},
@ -58,7 +58,7 @@ The data object for a trial can also be updated in the `on_finish` event handler
```js ```js
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.jpg', stimulus: 'imgA.jpg',
on_finish: function(data){ on_finish: function(data){
if(jsPsych.pluginAPI.compareKeys(data.response, 'j')){ if(jsPsych.pluginAPI.compareKeys(data.response, 'j')){
@ -276,7 +276,7 @@ It's important that the `XMLHttpRequest` is able to complete before the experime
```javascript ```javascript
var trial = { var trial = {
type: 'call-function', type: jsPsychCallFunction,
async: true, async: true,
func: function(done){ func: function(done){
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();

14
docs/overview/dynamic-parameters.md
View File

@ -13,7 +13,7 @@ Here is a sketch of how this functionality could be used to display feedback to
var timeline = []; var timeline = [];
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<', stimulus: '<<<<<',
choices: ['f','j'], choices: ['f','j'],
data: { data: {
@ -31,7 +31,7 @@ var trial = {
} }
var feedback = { var feedback = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: function(){ stimulus: function(){
// The feedback stimulus is a dynamic parameter because we can't know in advance whether // The feedback stimulus is a dynamic parameter because we can't know in advance whether
// the stimulus should be 'correct' or 'incorrect'. // the stimulus should be 'correct' or 'incorrect'.
@ -61,7 +61,7 @@ var random_duration = function() {
} }
var trial = { var trial = {
type: 'html-keyboard-response' type: jsPsychHtmlKeyboardResponse
stimulus: '+', 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) 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 current_difficulty; // value changes during the experiment
var trial = { var trial = {
type: 'survey-text', type: jsPsychSurveyText,
questions: [{prompt: "Please enter your response."}] questions: [{prompt: "Please enter your response."}]
data: function() { data: function() {
return {difficulty: current_difficulty}; 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 ```js
var trial = { var trial = {
type: 'survey-text', type: jsPsychSurveyText,
questions: [{prompt: "Please enter your response."}] questions: [{prompt: "Please enter your response."}]
data: { data: {
difficulty: function() { 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 subject_id; // value is set during the experiment
var trial = { var trial = {
type: 'survey-text', type: jsPsychSurveyText,
questions: function(){ questions: function(){
var questions_array = [ var questions_array = [
{prompt: "Hi "+subject_id+"! What's your favorite city?", required: true, name: 'fav_city'}, {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 ```js
var trial = { var trial = {
type: 'survey-text', type: jsPsychSurveyText,
questions: [ questions: [
{ {
prompt: function() { prompt: function() {

6
docs/overview/events.md
View File

@ -39,7 +39,7 @@ The `on_finish` callback can be added to any trial. The callback will trigger wh
```javascript ```javascript
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.png', stimulus: 'imgA.png',
on_finish: function(data) { on_finish: function(data) {
if(jsPsych.pluginAPI.compareKeys(data.response, 'j')){ if(jsPsych.pluginAPI.compareKeys(data.response, 'j')){
@ -73,7 +73,7 @@ The `on_load` callback can be added to any trial. The callback will trigger once
```javascript ```javascript
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.png', stimulus: 'imgA.png',
on_load: function() { on_load: function() {
console.log('The trial just finished loading.'); console.log('The trial just finished loading.');
@ -89,7 +89,7 @@ The `on_start` callback can be added to any trial. The callback will trigger rig
```javascript ```javascript
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.png', stimulus: 'imgA.png',
on_start: function(trial) { on_start: function(trial) {
console.log('The trial is about to start.'); console.log('The trial is about to start.');

2
docs/overview/experiment-options.md
View File

@ -135,7 +135,7 @@ Extensions are jsPsych modules that can run throughout the experiment and interf
```js ```js
initJsPsych({ initJsPsych({
extensions: [ extensions: [
{type: 'webgazer'} {type: jsPsychExtensionWebgazer}
] ]
}); });
``` ```

6
docs/overview/extensions.md
View File

@ -9,14 +9,14 @@ To use an extension in an experiment, you'll load the extension file via a `<scr
```html ```html
<head> <head>
<script src="jspsych/jspsych.js"></script> <script src="jspsych/jspsych.js"></script>
<script src="jspsych/extensions/some-extension.js"></script> <script src="jspsych/extensions/example.js"></script>
</head> </head>
``` ```
```js ```js
initJsPsych({ initJsPsych({
extensions: [ extensions: [
{type: 'some-extension', params: {...} } {type: jsPsychExtensionExample, params: {...} }
] ]
}) })
``` ```
@ -26,7 +26,7 @@ To enable an extension during a trial, add the extension to the `extensions` lis
```js ```js
var trial = { var trial = {
extensions: [ extensions: [
{type: 'some-extension', params: {...} } {type: jsPsychExtensionExample, params: {...} }
] ]
} }
``` ```

40
docs/overview/eye-tracking.md
View File

@ -37,7 +37,7 @@ To use the WebGazer extension in an experiment, include it in the list of extens
```js ```js
initJsPsych({ initJsPsych({
extensions: [ extensions: [
{type: 'webgazer'} {type: jsPsychExtensionWebgazer}
] ]
}) })
``` ```
@ -49,7 +49,7 @@ To help the participant position their face correctly for eye tracking you can u
```js ```js
var init_camera_trial = { var init_camera_trial = {
type: 'webgazer-init-camera' type: jsPsychWebgazerInitCamera
} }
``` ```
@ -62,7 +62,7 @@ Note that instructions are not included in the calibration plugin, so you'll lik
```js ```js
var calibration_trial = { var calibration_trial = {
type: 'webgazer-calibrate', type: jsPsychWebgazerCalibrate,
calibration_points: [[25,50], [50,50], [75,50], [50,25], [50,75]], calibration_points: [[25,50], [50,50], [75,50], [50,25], [50,75]],
calibration_mode: 'click' calibration_mode: 'click'
} }
@ -76,7 +76,7 @@ To measure the accuracy and precision of the calibration, you can use the [jspsy
```js ```js
var validation_trial = { var validation_trial = {
type: 'webgazer-validate', type: jsPsychWebgazerValidate,
validation_points: [[-200,200], [200,200],[-200,-200],[200,-200]], validation_points: [[-200,200], [200,200],[-200,-200],[200,-200]],
validation_point_coordinates: 'center-offset-pixels', validation_point_coordinates: 'center-offset-pixels',
roi_radius: 100 roi_radius: 100
@ -102,11 +102,11 @@ To enable eye tracking for a trial in your experiment, you can simply add the We
```js ```js
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<img id="scene" src="my-scene.png"></img>', stimulus: '<img id="scene" src="my-scene.png"></img>',
extensions: [ extensions: [
{ {
type: 'webgazer', type: jsPsychExtensionWebgazer,
params: { params: {
targets: ['#scene'] targets: ['#scene']
} }
@ -185,17 +185,17 @@ If you have tips based on your own experience please consider sharing them on ou
var jsPsych = initJsPsych({ var jsPsych = initJsPsych({
extensions: [ extensions: [
{type: 'webgazer'} {type: jsPsychExtensionWebgazer}
] ]
}); });
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png'] images: ['img/blue.png']
} }
var camera_instructions = { var camera_instructions = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: ` stimulus: `
<p>In order to participate you must allow the experiment to use your camera.</p> <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> <p>You will be prompted to do this on the next screen.</p>
@ -206,11 +206,11 @@ If you have tips based on your own experience please consider sharing them on ou
} }
var init_camera = { var init_camera = {
type: 'webgazer-init-camera' type: jsPsychWebgazerInitCamera
} }
var calibration_instructions = { var calibration_instructions = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: ` 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>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> <p>You'll see a series of dots appear on the screen. Look at each dot and click on it.</p>
@ -219,7 +219,7 @@ If you have tips based on your own experience please consider sharing them on ou
} }
var calibration = { var calibration = {
type: 'webgazer-calibrate', type: jsPsychWebgazerCalibrate,
calibration_points: [ calibration_points: [
[25,25],[75,25],[50,50],[25,75],[75,75] [25,25],[75,25],[50,50],[25,75],[75,75]
], ],
@ -228,7 +228,7 @@ If you have tips based on your own experience please consider sharing them on ou
} }
var validation_instructions = { var validation_instructions = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: ` stimulus: `
<p>Now we'll measure the accuracy of the calibration.</p> <p>Now we'll measure the accuracy of the calibration.</p>
<p>Look at each dot as it appears on the screen.</p> <p>Look at each dot as it appears on the screen.</p>
@ -239,7 +239,7 @@ If you have tips based on your own experience please consider sharing them on ou
} }
var validation = { var validation = {
type: 'webgazer-validate', type: jsPsychWebgazerValidate,
validation_points: [ validation_points: [
[25,25],[75,25],[50,50],[25,75],[75,75] [25,25],[75,25],[50,50],[25,75],[75,75]
], ],
@ -252,7 +252,7 @@ If you have tips based on your own experience please consider sharing them on ou
} }
var recalibrate_instructions = { var recalibrate_instructions = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: ` stimulus: `
<p>The accuracy of the calibration is a little lower than we'd like.</p> <p>The accuracy of the calibration is a little lower than we'd like.</p>
<p>Let's try calibrating one more time.</p> <p>Let's try calibrating one more time.</p>
@ -276,7 +276,7 @@ If you have tips based on your own experience please consider sharing them on ou
} }
var calibration_done = { var calibration_done = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: ` stimulus: `
<p>Great, we're done with calibration!</p> <p>Great, we're done with calibration!</p>
`, `,
@ -284,7 +284,7 @@ If you have tips based on your own experience please consider sharing them on ou
} }
var begin = { var begin = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: `<p>The next screen will show an image to demonstrate adding the webgazer extension to a trial.</p> 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>Just look at the image while eye tracking data is collected. The trial will end automatically.</p>
<p>Press any key to start.</p> <p>Press any key to start.</p>
@ -292,20 +292,20 @@ If you have tips based on your own experience please consider sharing them on ou
} }
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/blue.png', stimulus: 'img/blue.png',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: 2000, trial_duration: 2000,
extensions: [ extensions: [
{ {
type: 'webgazer', type: jsPsychExtensionWebgazer,
params: {targets: ['#jspsych-image-keyboard-response-stimulus']} params: {targets: ['#jspsych-image-keyboard-response-stimulus']}
} }
] ]
} }
var show_data = { var show_data = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: function() { stimulus: function() {
var trial_data = jsPsych.data.getLastTrialData().values(); var trial_data = jsPsych.data.getLastTrialData().values();
var trial_json = JSON.stringify(trial_data, null, 2); var trial_json = JSON.stringify(trial_data, null, 2);

8
docs/overview/fullscreen.md
View File

@ -8,23 +8,23 @@ var jsPsych = initJsPsych();
var timeline = []; var timeline = [];
timeline.push({ timeline.push({
type: 'fullscreen', type: jsPsychFullscreen,
fullscreen_mode: true fullscreen_mode: true
}); });
timeline.push({ timeline.push({
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This trial will be in fullscreen mode.' stimulus: 'This trial will be in fullscreen mode.'
}); });
// exit fullscreen mode // exit fullscreen mode
timeline.push({ timeline.push({
type: 'fullscreen', type: jsPsychFullscreen,
fullscreen_mode: false fullscreen_mode: false
}); });
timeline.push({ timeline.push({
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This trial will NOT be in fullscreen mode.' stimulus: 'This trial will NOT be in fullscreen mode.'
}); });

58
docs/overview/media-preloading.md
View File

@ -13,26 +13,26 @@ jsPsych can automatically preload audio, video, and image files that are used as
// the "auto_preload: true" setting tells the plugin to automatically find // the "auto_preload: true" setting tells the plugin to automatically find
// stimuli to preload based the main experiment timeline (used in jsPsych.run) // stimuli to preload based the main experiment timeline (used in jsPsych.run)
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
auto_preload: true auto_preload: true
} }
// this image file can be automatically preloaded // this image file can be automatically preloaded
var image_trial = { var image_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/file1.png' stimulus: 'img/file1.png'
} }
// the sound file can be automatically preloaded // the sound file can be automatically preloaded
var sound_trial = { var sound_trial = {
type: 'audio-keyboard-response', type: jsPsychAudioKeyboardResponse,
stimulus: 'audio/hello.mp3' stimulus: 'audio/hello.mp3'
} }
// the video file can be automatically preloaded (as long as the experiment // the video file can be automatically preloaded (as long as the experiment
// is running on a server) // is running on a server)
var video_trial = { var video_trial = {
type: 'video', type: jsPsychVideoKeyboardResponse,
stimulus: ['video/sample_video.mp4'] stimulus: ['video/sample_video.mp4']
} }
@ -47,14 +47,14 @@ If you are using media files in your experiment but they are not being passed di
// this image file cannot be automatically preloaded because it is embedded in // this image file cannot be automatically preloaded because it is embedded in
// an HTML string // an HTML string
var image_trial = { var image_trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<img src="img/file1.png"></img>', stimulus: '<img src="img/file1.png"></img>',
} }
// this audio file cannot be automatically preloaded because it is returned // this audio file cannot be automatically preloaded because it is returned
// from a function // from a function
var sound_trial = { var sound_trial = {
type: 'audio-keyboard-response', type: jsPsychAudioKeyboardResponse,
stimulus: function() { return 'audio/sound1.mp3' } stimulus: function() { return 'audio/sound1.mp3' }
} }
@ -63,7 +63,7 @@ var sound_trial = {
var video_trials = { var video_trials = {
timeline: [ timeline: [
{ {
type: 'video', type: jsPsychVideoKeyboardResponse,
stimulus: jsPsych.timelineVariable('video') stimulus: jsPsych.timelineVariable('video')
} }
], ],
@ -82,7 +82,7 @@ var video = ['video/1.mp4', 'video/2.mp4'];
// these array can be passed into the preload plugin using the images, audio // these array can be passed into the preload plugin using the images, audio
// and video parameters // and video parameters
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: images, images: images,
audio: audio, audio: audio,
video: video video: video
@ -99,13 +99,13 @@ It's possible to combine automatic and manual preloading. For instance, you may
```javascript ```javascript
// this file can be preloaded automatically // this file can be preloaded automatically
var image_trial = { var image_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/file1.png' stimulus: 'img/file1.png'
} }
// this file can be preloaded automatically // this file can be preloaded automatically
var sound_trial = { var sound_trial = {
type: 'audio-keyboard-response', type: jsPsychAudioKeyboardResponse,
stimulus: 'audio/hello.mp3' stimulus: 'audio/hello.mp3'
} }
@ -113,7 +113,7 @@ var sound_trial = {
var video_trials = { var video_trials = {
timeline: [ timeline: [
{ {
type: 'video', type: jsPsychVideoKeyboardResponse,
stimulus: jsPsych.timelineVariable('video') stimulus: jsPsych.timelineVariable('video')
} }
], ],
@ -126,7 +126,7 @@ var video_trials = {
var video = ['video/1.mp4', 'video/2.mp4']; var video = ['video/1.mp4', 'video/2.mp4'];
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
auto_preload: true, // automatically preload the image and audio files auto_preload: true, // automatically preload the image and audio files
video: video // manually preload the videos used with timeline variables video: video // manually preload the videos used with timeline variables
} }
@ -146,11 +146,11 @@ Here is an example with trials where the stimuli files can be preloaded automati
var block_1 = { var block_1 = {
timeline: [ timeline: [
{ {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/file1.png' stimulus: 'img/file1.png'
}, },
{ {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/file2.png' stimulus: 'img/file2.png'
} }
] ]
@ -159,23 +159,23 @@ var block_1 = {
var block_2 = { var block_2 = {
timeline: [ timeline: [
{ {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/file3.png' stimulus: 'img/file3.png'
}, },
{ {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/file4.png' stimulus: 'img/file4.png'
} }
] ]
} }
var preload_1 = { var preload_1 = {
type: 'preload', type: jsPsychPreload,
trials: block_1 // automatically preload just the images from block_1 trials trials: block_1 // automatically preload just the images from block_1 trials
} }
var preload_2 = { var preload_2 = {
type: 'preload', type: jsPsychPreload,
trials: block_2 // automatically preload just the images from block_2 trials trials: block_2 // automatically preload just the images from block_2 trials
} }
@ -211,13 +211,13 @@ var images_block_2 = ['file3.png', 'file4.png'];
// preload trial for preloading the block 1 stimuli // preload trial for preloading the block 1 stimuli
var preload_1 = { var preload_1 = {
type: 'preload', type: jsPsychPreload,
images: images_block_1 images: images_block_1
} }
// preload trial for preloading the block 2 stimuli // preload trial for preloading the block 2 stimuli
var preload_2 = { var preload_2 = {
type: 'preload', type: jsPsychPreload,
images: images_block_2 images: images_block_2
} }
@ -234,7 +234,7 @@ By default, the `preload` plugin will display a progress bar while files are bei
```javascript ```javascript
var preload_trial = { var preload_trial = {
type: 'preload', type: jsPsychPreload,
auto_preload: true auto_preload: true
show_progress_bar: false // hide progress bar show_progress_bar: false // hide progress bar
} }
@ -246,7 +246,7 @@ It's usually a good idea to set a time limit for file loading, to ensure that pa
```javascript ```javascript
var preload_trial = { var preload_trial = {
type: 'preload', type: jsPsychPreload,
auto_preload: true auto_preload: true
max_load_time: 60000 // 1 minute max_load_time: 60000 // 1 minute
} }
@ -258,7 +258,7 @@ It's possible to specify custom messages to be shown on the page while the media
```javascript ```javascript
var preload_trial = { var preload_trial = {
type: 'preload', type: jsPsychPreload,
auto_preload: true auto_preload: true
message: 'Please wait while the experiment loads. This may take a few minutes.', message: 'Please wait while the experiment loads. This may take a few minutes.',
} }
@ -268,7 +268,7 @@ A preloading error will occur when either (a) one or more files produces a loadi
```javascript ```javascript
var preload_trial = { var preload_trial = {
type: 'preload', type: jsPsychPreload,
auto_preload: true, auto_preload: true,
error_message: 'The experiment failed to load. Please contact the researcher.' error_message: 'The experiment failed to load. Please contact the researcher.'
} }
@ -280,7 +280,7 @@ Detailed error messages can be useful when testing and debugging your experiment
```javascript ```javascript
var preload_trial = { var preload_trial = {
type: 'preload', type: jsPsychPreload,
auto_preload: true, auto_preload: true,
// show details of any file loading errors and/or loading time out // show details of any file loading errors and/or loading time out
show_detailed_errors: true show_detailed_errors: true
@ -293,7 +293,7 @@ If `continue_after_error` is `true`, then the experiment _will not stop_ if one
```javascript ```javascript
var preload_trial = { var preload_trial = {
type: 'preload', type: jsPsychPreload,
auto_preload: true, auto_preload: true,
message: 'Please wait while the experiment loads...', message: 'Please wait while the experiment loads...',
// don't stop the experiment if there are file loading errors or if loading times out // don't stop the experiment if there are file loading errors or if loading times out
@ -301,7 +301,7 @@ var preload_trial = {
} }
var save_data = { var save_data = {
type: 'call-function', type: jsPsychCallFunction,
async: true, async: true,
func: function(done){ func: function(done){
var data = jsPsych.data.get().json(); var data = jsPsych.data.get().json();
@ -311,7 +311,7 @@ var save_data = {
// the experiment will stop here, since there are no valid key choices or trial duration // the experiment will stop here, since there are no valid key choices or trial duration
var fail_message = { var fail_message = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'The experiment failed to load. Please contact the researcher.', stimulus: 'The experiment failed to load. Please contact the researcher.',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: null trial_duration: null
@ -345,7 +345,7 @@ var file_load_count = 0;
var file_error_count = 0; var file_error_count = 0;
var preload_trial = { var preload_trial = {
type: 'preload', type: jsPsychPreload,
auto_preload: true, auto_preload: true,
on_error: function(file) { on_error: function(file) {
file_error_count++; file_error_count++;

28
docs/overview/plugins.md
View File

@ -15,13 +15,19 @@ To use a plugin, you'll need to load the plugin's JavaScript file in your experi
</head> </head>
``` ```
Once a plugin is loaded, you can use JavaScript to define a trial that uses that plugin. All jsPsych trials have a `type`, which tells jsPsych what plugin to use to run the trial. The trial's `type` is the plugin name, which usually the same as the plugin file name, but with the "jspsych-" prefix removed. Once a plugin is loaded, you can use JavaScript to define a trial that uses that plugin. All jsPsych trials need a `type` parameter, which tells jsPsych what plugin to use to run the trial. The trial's `type` is similar to the plugin name, but it always starts with "jsPsych" and is written in _camel case_ rather than with dashes between the words. The trial's `type` parameter should NOT be a string (i.e. no quotes around the `type` value). Here are some examples of plugin names and types:
| Plugin name | Type |
| ---------------------------- | ---------------------------- |
| image-keyboard-response | jsPsychImageKeyboardResponse |
| fullscreen | jsPsychFullscreen |
| webgazer-init-camera | jsPsychWebgazerInitCamera |
The following JavaScript code defines a trial using the `image-keyboard-response` plugin to display an image file. This trial uses the default values for valid keys, stimulus duration, trial duration, and other parameters. The following JavaScript code defines a trial using the `image-keyboard-response` plugin to display an image file. This trial uses the default values for valid keys, stimulus duration, trial duration, and other parameters.
```javascript ```javascript
var image_trial = { var image_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'images/happy_face.jpg' stimulus: 'images/happy_face.jpg'
} }
``` ```
@ -30,7 +36,7 @@ You can override any default parameter values by adding them into your trial obj
```javascript ```javascript
var image_trial = { var image_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'images/happy_face.jpg', stimulus: 'images/happy_face.jpg',
trial_duration: 3000, trial_duration: 3000,
post_trial_gap: 2000 post_trial_gap: 2000
@ -63,7 +69,7 @@ A trial for the Flanker Task written with jsPsych might look like this:
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<', stimulus: '<<<<<',
choices: ['f','j'], choices: ['f','j'],
data: { data: {
@ -83,7 +89,7 @@ The ITI can also be controlled at the trial level through the `post_trial_gap` p
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'There will be a 1.5 second blank screen after this trial.', stimulus: 'There will be a 1.5 second blank screen after this trial.',
post_trial_gap: 1500 post_trial_gap: 1500
} }
@ -97,7 +103,7 @@ Immediately before a trial runs, there is an opportunity to run an arbitrary fun
// when this trial runs, the on_start function will change the trial's stimulus and data parameters, // when this trial runs, the on_start function will change the trial's stimulus and data parameters,
// so the trial will display an incongruent Flanker stimulus with a right-facing central arrow // so the trial will display an incongruent Flanker stimulus with a right-facing central arrow
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<', stimulus: '<<<<<',
choices: ['f','j'], choices: ['f','j'],
data: { data: {
@ -124,7 +130,7 @@ The `on_finish` function can be useful to calculate new data properties that wer
// which is either 'true' or 'false' // which is either 'true' or 'false'
// depending on the response that was made // depending on the response that was made
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<', stimulus: '<<<<<',
choices: ['f','j'], choices: ['f','j'],
data: { data: {
@ -148,7 +154,7 @@ The `on_load` callback function will trigger once the trial has completed loadin
```javascript ```javascript
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.png', stimulus: 'imgA.png',
on_load: function() { on_load: function() {
// this will change the src attribute of the image after 500ms // this will change the src attribute of the image after 500ms
@ -177,13 +183,13 @@ The `css_classes` parameter allows you to add an array of CSS class names to the
</style> </style>
<script> <script>
var fixation_trial = { var fixation_trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
stimulus: '+', stimulus: '+',
css_classes: ['fixation'] css_classes: ['fixation']
}; };
var flanker_trial = { var flanker_trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
choices: ["ArrowLeft", "ArrowRight"], choices: ["ArrowLeft", "ArrowRight"],
stimulus: '>>>>>', stimulus: '>>>>>',
prompt: '<span id="prompt">Press the left or right arrow key.</span>', prompt: '<span id="prompt">Press the left or right arrow key.</span>',
@ -198,7 +204,7 @@ The `save_trial_parameters` parameter allows you to tell jsPsych what parameters
```javascript ```javascript
var trial = { var trial = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: '<p style="color: orange; font-size: 48px; font-weight: bold;">BLUE</p>', stimulus: '<p style="color: orange; font-size: 48px; font-weight: bold;">BLUE</p>',
choices: function() { choices: function() {
return jsPsych.randomization.shuffle(['Yes','No']); return jsPsych.randomization.shuffle(['Yes','No']);

8
docs/overview/progress-bar.md
View File

@ -20,7 +20,7 @@ The progress bar can also be manually controlled using the function `jsPsych.set
```js ```js
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'Almost done...', stimulus: 'Almost done...',
on_finish: function(){ on_finish: function(){
jsPsych.setProgressBar(0.85); // set progress bar to 85% full. jsPsych.setProgressBar(0.85); // set progress bar to 85% full.
@ -54,7 +54,7 @@ var jsPsych = initJsPsych({
var n_trials = 5; var n_trials = 5;
var start = { var start = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'Press any key to start!', stimulus: 'Press any key to start!',
on_start: function() { on_start: function() {
// set progress bar to 0 at the start of experiment // set progress bar to 0 at the start of experiment
@ -63,7 +63,7 @@ var start = {
}; };
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is a trial!', stimulus: 'This is a trial!',
on_finish: function() { on_finish: function() {
// at the end of each trial, update the progress bar // at the end of each trial, update the progress bar
@ -79,7 +79,7 @@ var trials = {
}; };
var done = { var done = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'Done!' stimulus: 'Done!'
}; };

2
docs/overview/prolific.md
View File

@ -53,7 +53,7 @@ Here's an example trial that could be used. Note that `choices` is set to `jsPsy
```js ```js
var final_trial = { var final_trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: `<p>You've finished the last task. Thanks for participating!</p> stimulus: `<p>You've finished the last task. Thanks for participating!</p>
<p><a href="https://app.prolific.co/submissions/complete?cc=XXXXXXX">Click here to return to Prolific and complete the study</a>.</p>`, <p><a href="https://app.prolific.co/submissions/complete?cc=XXXXXXX">Click here to return to Prolific and complete the study</a>.</p>`,
choices: jsPsych.NO_KEYS choices: jsPsych.NO_KEYS

10
docs/overview/style.md
View File

@ -12,7 +12,7 @@ In the example below, the stimulus font size is set to 30px and the text color i
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<p style="font-size:30px;color:red;">hello world!</p>' stimulus: '<p style="font-size:30px;color:red;">hello world!</p>'
} }
``` ```
@ -21,7 +21,7 @@ You can also use a [dynamic parameter](/overview/dynamic-parameters) to combine
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: function() { stimulus: function() {
var stim = '<p style="font-size:30px;font-weight:bold;">'+jsPsych.timelineVariable('text')+'</p>'; var stim = '<p style="font-size:30px;font-weight:bold;">'+jsPsych.timelineVariable('text')+'</p>';
return stim; return stim;
@ -147,7 +147,7 @@ You can use a static `css_classes` parameter value if you always want to apply t
</head> </head>
<script> <script>
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '+', stimulus: '+',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: 500, trial_duration: 500,
@ -187,7 +187,7 @@ In the example below, the CSS selector `.left-align #stimulus` selects the eleme
<script> <script>
var trial_procedure = { var trial_procedure = {
timeline: [{ timeline: [{
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<p id="stimulus">This is the stimulus.</p>', stimulus: '<p id="stimulus">This is the stimulus.</p>',
prompt: '<p>This text will not be affected by the CSS classes '+ prompt: '<p>This text will not be affected by the CSS classes '+
'because it does not have the "stimulus" ID.</p>', 'because it does not have the "stimulus" ID.</p>',
@ -219,7 +219,7 @@ It's also possible to pass multiple class names to the `css_classes` parameter.
<script> <script>
var trial_procedure = { var trial_procedure = {
timeline: [{ timeline: [{
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<p id="stimulus">This is the stimulus.</p>', stimulus: '<p id="stimulus">This is the stimulus.</p>',
prompt: '<p>This text will not be affected by the CSS classes '+ prompt: '<p>This text will not be affected by the CSS classes '+
'because it does not have the "stimulus" ID.</p>', 'because it does not have the "stimulus" ID.</p>',

32
docs/overview/timeline.md
View File

@ -8,7 +8,7 @@ To create a trial, you need to create an object that describes the trial. The mo
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'hello world!' stimulus: 'hello world!'
} }
``` ```
@ -35,19 +35,19 @@ Scaling up to multiple trials is straightforward. Just create an object for each
var timeline = []; var timeline = [];
var trial_1 = { var trial_1 = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is trial 1.' stimulus: 'This is trial 1.'
} }
timeline.push(trial_1); timeline.push(trial_1);
var trial_2 = { var trial_2 = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is trial 2.' stimulus: 'This is trial 2.'
} }
timeline.push(trial_2); timeline.push(trial_2);
var trial_3 = { var trial_3 = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is trial 3.' stimulus: 'This is trial 3.'
} }
timeline.push(trial_3); timeline.push(trial_3);
@ -59,7 +59,7 @@ Each object on the timeline can also have it's own timeline. This is useful for
```javascript ```javascript
var judgment_trials = { var judgment_trials = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
prompt: '<p>Press a number 1-7 to indicate how unusual the image is.</p>', prompt: '<p>Press a number 1-7 to indicate how unusual the image is.</p>',
choices: ['1','2','3','4','5','6','7'], choices: ['1','2','3','4','5','6','7'],
timeline: [ timeline: [
@ -76,7 +76,7 @@ You can also override the values by declaring a new value in the `timeline` arra
```javascript ```javascript
var judgment_trials = { var judgment_trials = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
prompt: '<p>Press a number 1-7 to indicate how unusual the image is.</p>', prompt: '<p>Press a number 1-7 to indicate how unusual the image is.</p>',
choices: ['1','2','3','4','5','6','7'], choices: ['1','2','3','4','5','6','7'],
timeline: [ timeline: [
@ -103,13 +103,13 @@ Here's a basic version of the task with timeline variables.
var face_name_procedure = { var face_name_procedure = {
timeline: [ timeline: [
{ {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '+', stimulus: '+',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: 500 trial_duration: 500
}, },
{ {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('face'), stimulus: jsPsych.timelineVariable('face'),
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: 2500 trial_duration: 2500
@ -136,19 +136,19 @@ This time, instead of using `jsPsych.timelineVariable()` as the stimulus paramet
var face_name_procedure = { var face_name_procedure = {
timeline: [ timeline: [
{ {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '+', stimulus: '+',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: 500 trial_duration: 500
}, },
{ {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable('name'), stimulus: jsPsych.timelineVariable('name'),
trial_duration: 1000, trial_duration: 1000,
choices: jsPsych.NO_KEYS choices: jsPsych.NO_KEYS
}, },
{ {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: function(){ stimulus: function(){
var html="<img src='"+jsPsych.timelineVariable('face')+"'>"; var html="<img src='"+jsPsych.timelineVariable('face')+"'>";
html += "<p>"+jsPsych.timelineVariable('name')+"</p>"; html += "<p>"+jsPsych.timelineVariable('name')+"</p>";
@ -311,7 +311,7 @@ To repeat a timeline multiple times, you can create an object (node) that contai
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This trial will be repeated twice.' stimulus: 'This trial will be repeated twice.'
} }
@ -343,7 +343,7 @@ Any timeline can be looped using the `loop_function` option. The loop function s
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This trial is in a loop. Press R to repeat this trial, or C to continue.' stimulus: 'This trial is in a loop. Press R to repeat this trial, or C to continue.'
} }
@ -367,12 +367,12 @@ A timeline can be skipped based on the evaluation of a function using the `condi
var jsPsych = initJsPsych(); var jsPsych = initJsPsych();
var pre_if_trial = { var pre_if_trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'The next trial is in a conditional statement. Press S to skip it, or V to view it.' stimulus: 'The next trial is in a conditional statement. Press S to skip it, or V to view it.'
} }
var if_trial = { var if_trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'You chose to view the trial. Press any key to continue.' stimulus: 'You chose to view the trial. Press any key to continue.'
} }
@ -391,7 +391,7 @@ var if_node = {
} }
var after_if_trial = { var after_if_trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is the trial after the conditional.' stimulus: 'This is the trial after the conditional.'
} }

2
docs/plugins/jspsych-animation.md
View File

@ -33,7 +33,7 @@ response | array | An array, where each element is an object representing a resp
var animation_sequence = ["img/happy_face_1.jpg", "img/happy_face_2.jpg", "img/happy_face_3.jpg", "img/happy_face_4.jpg"]; var animation_sequence = ["img/happy_face_1.jpg", "img/happy_face_2.jpg", "img/happy_face_3.jpg", "img/happy_face_4.jpg"];
var animation_trial = { var animation_trial = {
type: 'animation', type: jsPsychAnimation,
stimuli: animation_sequence, stimuli: animation_sequence,
sequence_reps: 3, sequence_reps: 3,
frame_time: 300, frame_time: 300,

4
docs/plugins/jspsych-audio-button-response.md
View File

@ -40,7 +40,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'audio-button-response', type: jsPsychAudioButtonResponse,
stimulus: 'sound/tone.mp3', stimulus: 'sound/tone.mp3',
choices: ['Low', 'High'], choices: ['Low', 'High'],
prompt: "<p>Is the pitch high or low?</p>" prompt: "<p>Is the pitch high or low?</p>"
@ -58,7 +58,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'audio-button-response', type: jsPsychAudioButtonResponse,
stimulus: 'sound/roar.mp3', stimulus: 'sound/roar.mp3',
choices: ['lion.png', 'elephant.png', 'monkey.png'], choices: ['lion.png', 'elephant.png', 'monkey.png'],
prompt: "<p>Which animal made the sound?</p>", prompt: "<p>Which animal made the sound?</p>",

4
docs/plugins/jspsych-audio-keyboard-response.md
View File

@ -38,7 +38,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'audio-keyboard-response', type: jsPsychAudioKeyboardResponse,
stimulus: 'sound/tone.mp3', stimulus: 'sound/tone.mp3',
choices: ['e', 'i'], choices: ['e', 'i'],
prompt: "<p>Is the pitch high or low? Press 'e' for low and 'i' for high.</p>", prompt: "<p>Is the pitch high or low? Press 'e' for low and 'i' for high.</p>",
@ -58,7 +58,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'audio-keyboard-response', type: jsPsychAudioKeyboardResponse,
stimulus: 'sound/tone.mp3', stimulus: 'sound/tone.mp3',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_ends_after_audio: true trial_ends_after_audio: true

4
docs/plugins/jspsych-audio-slider-response.md
View File

@ -45,7 +45,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'audio-slider-response', type: jsPsychAudioSliderResponse,
stimulus: 'sound/speech_joke.mp3', stimulus: 'sound/speech_joke.mp3',
labels: ['Not Funny', 'Funny'], labels: ['Not Funny', 'Funny'],
prompt: '<p>How funny is the joke?</p>' prompt: '<p>How funny is the joke?</p>'
@ -63,7 +63,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'audio-slider-response', type: jsPsychAudioSliderResponse,
stimulus: 'sound/speech_joke.mp3', stimulus: 'sound/speech_joke.mp3',
labels: ['Not Funny', 'Funny'], labels: ['Not Funny', 'Funny'],
prompt: '<p>How funny is the joke?</p>', prompt: '<p>How funny is the joke?</p>',

8
docs/plugins/jspsych-call-function.md
View File

@ -32,7 +32,7 @@ value | any | The return value of the called function.
} }
var trial = { var trial = {
type: 'call-function', type: jsPsychCallFunction,
func: myfunc func: myfunc
} }
``` ```
@ -56,7 +56,7 @@ value | any | The return value of the called function.
} }
var trial = { var trial = {
type: 'call-function', type: jsPsychCallFunction,
func: function(){ myfunc(jsPsych.data.get()) } func: function(){ myfunc(jsPsych.data.get()) }
} }
``` ```
@ -73,7 +73,7 @@ value | any | The return value of the called function.
There's no demo for this code, because it requires a server to communicate with. There's no demo for this code, because it requires a server to communicate with.
```javascript ```javascript
var trial = { var trial = {
type: 'call-function', type: jsPsychCallFunction,
async: true, async: true,
func: function(done){ func: function(done){
// can perform async operations here like // can perform async operations here like
@ -99,7 +99,7 @@ value | any | The return value of the called function.
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'call-function', type: jsPsychCallFunction,
async: true, async: true,
func: function(done){ func: function(done){
// generate a delay between 1500 and 3000 milliseconds to simulate // generate a delay between 1500 and 3000 milliseconds to simulate

8
docs/plugins/jspsych-canvas-button-response.md
View File

@ -44,7 +44,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
} }
var circle_1 = { var circle_1 = {
type: 'canvas-button-response', type: jsPsychCanvasButtonResponse,
stimulus: function(c) { stimulus: function(c) {
filledCirc(c, 100, 'blue'); filledCirc(c, 100, 'blue');
}, },
@ -55,7 +55,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
}; };
var circle_2 = { var circle_2 = {
type: 'canvas-button-response', type: jsPsychCanvasButtonResponse,
stimulus: function(c) { stimulus: function(c) {
filledCirc(c, 150, 'green'); filledCirc(c, 150, 'green');
}, },
@ -79,7 +79,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
=== "Code" === "Code"
```javascript ```javascript
var lines = { var lines = {
type: 'canvas-button-response', type: jsPsychCanvasButtonResponse,
stimulus: function(c) { stimulus: function(c) {
var ctx = c.getContext("2d"); var ctx = c.getContext("2d");
// first line // first line
@ -126,7 +126,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
var circle_procedure = { var circle_procedure = {
timeline: [ timeline: [
{ {
type: 'canvas-button-response', type: jsPsychCanvasButtonResponse,
stimulus: function(c) { stimulus: function(c) {
filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color')); filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color'));
}, },

4
docs/plugins/jspsych-canvas-keyboard-response.md
View File

@ -40,7 +40,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
} }
var trial = { var trial = {
type: 'canvas-keyboard-response', type: jsPsychCanvasKeyboardResponse,
canvas_size: [300, 300], canvas_size: [300, 300],
stimulus: drawRect, stimulus: drawRect,
choices: ['e','i'], choices: ['e','i'],
@ -66,7 +66,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
} }
var trial = { var trial = {
type: 'canvas-keyboard-response', type: jsPsychCanvasKeyboardResponse,
canvas_size: [300, 300], canvas_size: [300, 300],
stimulus: drawCirc, stimulus: drawCirc,
prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>', prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>',

4
docs/plugins/jspsych-canvas-slider-response.md
View File

@ -50,7 +50,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
} }
var trial = { var trial = {
type: 'canvas-slider-response', type: jsPsychCanvasSliderResponse,
stimulus: twoSquares, stimulus: twoSquares,
labels: ['0','10'], labels: ['0','10'],
canvas_size: [150, 500], canvas_size: [150, 500],
@ -81,7 +81,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
} }
var trial = { var trial = {
type: 'canvas-slider-response', type: jsPsychCanvasSliderResponse,
stimulus: function(c) { stimulus: function(c) {
colors = ['darkred', 'cyan']; colors = ['darkred', 'cyan'];
twoSquares(c, colors); twoSquares(c, colors);

4
docs/plugins/jspsych-categorize-animation.md
View File

@ -38,7 +38,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var animation_trial = { var animation_trial = {
type: 'categorize-animation', type: jsPsychCategorizeAnimation,
stimuli: [ 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_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_2.jpg',
@ -68,7 +68,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
]; ];
var animation_trial = { var animation_trial = {
type: 'categorize-animation', type: jsPsychCategorizeAnimation,
stimuli: images, stimuli: images,
choices: ['p', 'q'], choices: ['p', 'q'],
prompt: `Press the P or Q key.`, prompt: `Press the P or Q key.`,

2
docs/plugins/jspsych-categorize-html.md
View File

@ -40,7 +40,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var categorization_trial = { var categorization_trial = {
type: 'categorize-html', type: jsPsychCategorizeHtml,
stimulus: '<p>B</p>', stimulus: '<p>B</p>',
key_answer: 'p', key_answer: 'p',
text_answer: 'letter', text_answer: 'letter',

4
docs/plugins/jspsych-categorize-image.md
View File

@ -41,8 +41,8 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var categorization_trial = { var categorization_trial = {
type: 'categorize-image', type: jsPsychCategorizeImage,
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/blue.png', stimulus: 'img/blue.png',
key_answer: 'b', key_answer: 'b',
text_answer: 'Blue', text_answer: 'Blue',
choices: ['r', 'g', 'b'], choices: ['r', 'g', 'b'],

4
docs/plugins/jspsych-cloze.md
View File

@ -27,7 +27,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var cloze_trial = { var cloze_trial = {
type: 'cloze', type: jsPsychCloze,
text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.' text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.'
}; };
``` ```
@ -43,7 +43,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var cloze_trial = { var cloze_trial = {
type: 'cloze', type: jsPsychCloze,
text: 'A rectangle has % 4 % corners and a triangle has % 3 %.', text: 'A rectangle has % 4 % corners and a triangle has % 3 %.',
check_answers: true, check_answers: true,
button_text: 'Next', button_text: 'Next',

2
docs/plugins/jspsych-external-html.md
View File

@ -62,7 +62,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
// declare the block. // declare the block.
var trial = { var trial = {
type:'external-html', type: jsPsychExternalHtml,
url: "external_page.html", url: "external_page.html",
cont_btn: "start", cont_btn: "start",
check_fn: check_consent check_fn: check_consent

2
docs/plugins/jspsych-free-sort.md
View File

@ -44,7 +44,7 @@ rt | numeric | The response time in milliseconds for the participant to finish a
=== "Code" === "Code"
```javascript ```javascript
var sort_trial = { var sort_trial = {
type: 'free-sort', type: jsPsychFreeSort,
stimuli: sorting_stimuli, stimuli: sorting_stimuli,
stim_width: 80, stim_width: 80,
stim_height: 60, stim_height: 60,

8
docs/plugins/jspsych-fullscreen.md
View File

@ -31,24 +31,24 @@ success | boolean | true if the browser supports fullscreen mode (i.e., is not S
=== "Code" === "Code"
```javascript ```javascript
var enter_fullscreen = { var enter_fullscreen = {
type: 'fullscreen', type: jsPsychFullscreen,
fullscreen_mode: true fullscreen_mode: true
} }
var trial_in_fullscreen = { var trial_in_fullscreen = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: 'This trial will be in fullscreen mode.', stimulus: 'This trial will be in fullscreen mode.',
choices: ['Continue'] choices: ['Continue']
} }
var exit_fullscreen = { var exit_fullscreen = {
type: 'fullscreen', type: jsPsychFullscreen,
fullscreen_mode: false, fullscreen_mode: false,
delay_after: 0 delay_after: 0
} }
var trial_after_fullscreen = { var trial_after_fullscreen = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: 'This trial will NOT be in fullscreen mode.', stimulus: 'This trial will NOT be in fullscreen mode.',
choices: ['Continue'] choices: ['Continue']
} }

3
docs/plugins/jspsych-html-button-response.md
View File

@ -32,9 +32,10 @@ stimulus | string | The HTML content that was displayed on the screen.
???+ example "Displaying question until subject gives a response" ???+ example "Displaying question until subject gives a response"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: '<p>Running</p>', stimulus: '<p>Running</p>',
choices: ['Healthy', 'Unhealthy'], choices: ['Healthy', 'Unhealthy'],
prompt: "<p>Is this activity healthy or unhealthy?</p>" prompt: "<p>Is this activity healthy or unhealthy?</p>"

4
docs/plugins/jspsych-html-keyboard-response.md
View File

@ -32,7 +32,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<p>Running</p>', stimulus: '<p>Running</p>',
choices: ['e', 'i'], choices: ['e', 'i'],
prompt: "<p>Is this activity healthy or unhealthy?</p><p>Press 'e' for healthy and 'i' for unhealthy.</p>" prompt: "<p>Is this activity healthy or unhealthy?</p><p>Press 'e' for healthy and 'i' for unhealthy.</p>"
@ -49,7 +49,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<p style="font-size: 48px;">+</p>', stimulus: '<p style="font-size: 48px;">+</p>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: 1000, trial_duration: 1000,

4
docs/plugins/jspsych-html-slider-response.md
View File

@ -37,15 +37,17 @@ slider_start | numeric | The starting value of the slider.
???+ example "Displaying question until subject move the slider" ???+ example "Displaying question until subject move the slider"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'html-slider-response', type: jsPsychHtmlSliderResponse,
stimulus: '<p>Running</p>', stimulus: '<p>Running</p>',
require_movement: true, require_movement: true,
labels: ['healthy', 'unhealthy'], labels: ['healthy', 'unhealthy'],
prompt: "<p>How healthy/unhealthy is this activity?</p>" prompt: "<p>How healthy/unhealthy is this activity?</p>"
}; };
``` ```
=== "Demo" === "Demo"
<div style="text-align:center;"> <div style="text-align:center;">
<iframe src="../plugins/demos/jspsych-html-slider-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe> <iframe src="../plugins/demos/jspsych-html-slider-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>

2
docs/plugins/jspsych-iat-html.md
View File

@ -39,7 +39,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'iat-html', type: jsPsychIatHtml,
stimulus: 'Golf', stimulus: 'Golf',
stim_key_association: 'left', stim_key_association: 'left',
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>', html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',

2
docs/plugins/jspsych-iat-image.md
View File

@ -39,7 +39,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code" === "Code"
```javascript ```javascript
var trial_block = { var trial_block = {
type: 'iat-image', type: jsPsychIatImage,
stimulus: 'img/blue.png', stimulus: 'img/blue.png',
stim_key_association: 'left', stim_key_association: 'left',
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>', html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',

4
docs/plugins/jspsych-image-button-response.md
View File

@ -38,14 +38,16 @@ stimulus | string | The path of the image that was displayed.
???+ example "Displaying question until subject gives a response" ???+ example "Displaying question until subject gives a response"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_1.png', stimulus: 'img/happy_face_1.png',
choices: ['Happy', 'Sad'], choices: ['Happy', 'Sad'],
prompt: "<p>Is this person happy or sad?</p>" prompt: "<p>Is this person happy or sad?</p>"
}; };
``` ```
=== "Demo" === "Demo"
<div style="text-align:center;"> <div style="text-align:center;">
<iframe src="/demos/jspsych-image-button-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe> <iframe src="/demos/jspsych-image-button-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>

6
docs/plugins/jspsych-image-keyboard-response.md
View File

@ -35,9 +35,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Displaying trial until subject gives a response" ???+ example "Displaying trial until subject gives a response"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/happy_face_1.png', stimulus: 'img/happy_face_1.png',
choices: ['e', 'i'], choices: ['e', 'i'],
prompt: "<p>Is this person happy or sad? Press 'e' for happy and 'i' for sad.</p>", prompt: "<p>Is this person happy or sad? Press 'e' for happy and 'i' for sad.</p>",
@ -52,9 +53,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Displaying image for a fixed duration; no response allowed" ???+ example "Displaying image for a fixed duration; no response allowed"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/happy_face_1.png', stimulus: 'img/happy_face_1.png',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
prompt: "<p>Study this face for 5 seconds.</p>", prompt: "<p>Study this face for 5 seconds.</p>",

4
docs/plugins/jspsych-image-slider-response.md
View File

@ -43,14 +43,16 @@ slider_start | numeric | The starting value of the slider.
???+ example "Displaying trial until subject gives a response" ???+ example "Displaying trial until subject gives a response"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'image-slider-response', type: jsPsychImageSliderResponse,
stimulus: 'img/happy_face_1.png', stimulus: 'img/happy_face_1.png',
labels: ['happy', 'sad'], labels: ['happy', 'sad'],
prompt: "<p>How happy/sad is this person?</p>", prompt: "<p>How happy/sad is this person?</p>",
}; };
``` ```
=== "Demo" === "Demo"
<div style="text-align:center;"> <div style="text-align:center;">
<iframe src="/demos/jspsych-image-slider-response-demo1.html" width="90%;" height="850px;" frameBorder="0"></iframe> <iframe src="/demos/jspsych-image-slider-response-demo1.html" width="90%;" height="850px;" frameBorder="0"></iframe>

9
docs/plugins/jspsych-instructions.md
View File

@ -34,9 +34,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Showing simple text instructions" ???+ example "Showing simple text instructions"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'instructions', type: jsPsychInstructions,
pages: [ pages: [
'Welcome to the experiment. Click next to begin.', 'Welcome to the experiment. Click next to begin.',
'This is the second page of instructions.', 'This is the second page of instructions.',
@ -57,9 +58,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Including Images" ???+ example "Including Images"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'instructions', type: jsPsychInstructions,
pages: [ pages: [
'Welcome to the experiment. Click next to begin.', 'Welcome to the experiment. Click next to begin.',
'You will be looking at images of arrows: ' + 'You will be looking at images of arrows: ' +
@ -81,9 +83,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Changing Button Text" ???+ example "Changing Button Text"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'instructions', type: jsPsychInstructions,
pages: [ pages: [
'Welcome to the experiment. Click next to begin.', 'Welcome to the experiment. Click next to begin.',
'This is the second page of instructions.', 'This is the second page of instructions.',

3
docs/plugins/jspsych-maxdiff.md
View File

@ -31,9 +31,10 @@ response | object | An object with two keys, `left` and `right`, containing the
???+ example "Basic example" ???+ example "Basic example"
=== "Code" === "Code"
```javascript ```javascript
var maxdiff_page = { var maxdiff_page = {
type: 'maxdiff', type: jsPsychMaxdiff,
alternatives: ['apple', 'orange', 'pear', 'banana'], alternatives: ['apple', 'orange', 'pear', 'banana'],
labels: ['Most Preferred', 'Least Preferred'], labels: ['Most Preferred', 'Least Preferred'],
preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>' preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>'

34
docs/plugins/jspsych-preload.md
View File

@ -43,26 +43,27 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
???+ example "Automatically preloading based on other trials" ???+ example "Automatically preloading based on other trials"
=== "Code" === "Code"
```javascript ```javascript
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
auto_preload: true auto_preload: true
} }
var trial_1 = { var trial_1 = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_1.jpg', stimulus: 'img/happy_face_1.jpg',
choices: ['Next'] choices: ['Next']
} }
var trial_2 = { var trial_2 = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_2.jpg', stimulus: 'img/happy_face_2.jpg',
choices: ['Next'] choices: ['Next']
} }
var trial_3 = { var trial_3 = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_3.jpg', stimulus: 'img/happy_face_3.jpg',
choices: ['Next'] choices: ['Next']
} }
@ -78,14 +79,15 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
???+ example "Manually preloading an image" ???+ example "Manually preloading an image"
=== "Code" === "Code"
```javascript ```javascript
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/sad_face_1.jpg'] images: ['img/sad_face_1.jpg']
} }
var trial_1 = { var trial_1 = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: ` stimulus: `
<p>Study this face</p> <p>Study this face</p>
<img src="img/sad_face_1.jpg"></img> <img src="img/sad_face_1.jpg"></img>
@ -104,23 +106,24 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
???+ example "Loading files in batches" ???+ example "Loading files in batches"
=== "Code" === "Code"
```javascript ```javascript
var jsPsych = initJsPsych(); var jsPsych = initJsPsych();
var trial_1 = { var trial_1 = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_1.jpg', stimulus: 'img/happy_face_1.jpg',
choices: ['Next'] choices: ['Next']
} }
var trial_2 = { var trial_2 = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_2.jpg', stimulus: 'img/happy_face_2.jpg',
choices: ['Next'] choices: ['Next']
} }
var trial_3 = { var trial_3 = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_3.jpg', stimulus: 'img/happy_face_3.jpg',
choices: ['Next'] choices: ['Next']
} }
@ -130,19 +133,19 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
} }
var trial_4 = { var trial_4 = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/sad_face_1.jpg', stimulus: 'img/sad_face_1.jpg',
choices: ['Next'] choices: ['Next']
} }
var trial_5 = { var trial_5 = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/sad_face_2.jpg', stimulus: 'img/sad_face_2.jpg',
choices: ['Next'] choices: ['Next']
} }
var trial_6 = { var trial_6 = {
type: 'image-button-response', type: jsPsychImageButtonResponse,
stimulus: 'img/sad_face_3.jpg', stimulus: 'img/sad_face_3.jpg',
choices: ['Next'] choices: ['Next']
} }
@ -152,12 +155,12 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
} }
var preload_block_1 = { var preload_block_1 = {
type: 'preload', type: jsPsychPreload,
trials: [block_1] trials: [block_1]
} }
var preload_block_2 = { var preload_block_2 = {
type: 'preload', type: jsPsychPreload,
trials: [block_2] trials: [block_2]
} }
@ -174,9 +177,10 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
???+ example "Showing a detailed error message for debugging loading issues" ???+ example "Showing a detailed error message for debugging loading issues"
=== "Code" === "Code"
```javascript ```javascript
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/bad_file_path.png'], images: ['img/bad_file_path.png'],
show_detailed_errors: true show_detailed_errors: true
} }

9
docs/plugins/jspsych-rdk.md
View File

@ -78,9 +78,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Setting the correct_choice parameter by linking it to the coherent_direction parameter" ???+ example "Setting the correct_choice parameter by linking it to the coherent_direction parameter"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: "rdk", type: jsPsychRdk,
coherent_direction: 0, coherent_direction: 0,
correct_choice: "p" correct_choice: "p"
}; };
@ -92,9 +93,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Displaying a trial with 2 choices and 1 correct choice" ???+ example "Displaying a trial with 2 choices and 1 correct choice"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: "rdk", type: jsPsychRdk,
post_trial_gap: 0, post_trial_gap: 0,
number_of_dots: 200, number_of_dots: 200,
RDK_type: 3, RDK_type: 3,
@ -111,9 +113,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Displaying a trial with multiple apertures" ???+ example "Displaying a trial with multiple apertures"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: "rdk", type: jsPsychRdk,
number_of_apertures: 3, //This needs to be set if more than one aperture number_of_apertures: 3, //This needs to be set if more than one aperture
trial_duration: 10000, trial_duration: 10000,
correct_choice: "a", correct_choice: "a",

6
docs/plugins/jspsych-reconstruction.md
View File

@ -31,6 +31,7 @@ rt | numeric | The length of time, in milliseconds, that the trial lasted.
???+ example "Make a block larger and smaller" ???+ example "Make a block larger and smaller"
=== "Code" === "Code"
```javascript ```javascript
var sample_function = function(param){ var sample_function = function(param){
var size = 50 + Math.floor(param*250); var size = 50 + Math.floor(param*250);
@ -42,7 +43,7 @@ rt | numeric | The length of time, in milliseconds, that the trial lasted.
} }
var match_item = { var match_item = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+ 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; '+ '<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>', 'width: 210px; height: 210px;"></div></div>',
@ -52,11 +53,12 @@ rt | numeric | The length of time, in milliseconds, that the trial lasted.
} }
var reconstruction = { var reconstruction = {
type: 'reconstruction', type: jsPsychReconstruction,
stim_function: sample_function, stim_function: sample_function,
starting_value: 0.5, starting_value: 0.5,
} }
``` ```
=== "Demo" === "Demo"
<div style="text-align:center;"> <div style="text-align:center;">
<iframe src="/demos/jspsych-reconstruction-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe> <iframe src="/demos/jspsych-reconstruction-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>

3
docs/plugins/jspsych-resize.md
View File

@ -28,9 +28,10 @@ scale_factor | numeric | Scaling factor that will be applied to the div containi
???+ example "Measuring a credit card and resizing the display to have 150 pixels equal an inch." ???+ example "Measuring a credit card and resizing the display to have 150 pixels equal an inch."
=== "Code" === "Code"
```javascript ```javascript
var inputs = { var inputs = {
type: 'resize', type: jsPsychResize,
item_width: 3 + 3/8, item_width: 3 + 3/8,
item_height: 2 + 1/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>", 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>",

3
docs/plugins/jspsych-same-different-html.md
View File

@ -41,9 +41,10 @@ Additionally, if `first_stim_duration` is null, then the following data is also
???+ example "Two text choices" ???+ example "Two text choices"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'same-different-html', type: jsPsychSameDifferentHtml,
stimuli: [ stimuli: [
'<p style="font-size:30px;">Climbing</p>', '<p style="font-size:30px;">Climbing</p>',
'<p style="font-size:30px;">Walking</p>' '<p style="font-size:30px;">Walking</p>'

3
docs/plugins/jspsych-same-different-image.md
View File

@ -41,9 +41,10 @@ Additionally, if `first_stim_duration` is null, then the following data is also
???+ example "Identifying emotional expressions" ???+ example "Identifying emotional expressions"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'same-different-image', type: jsPsychSameDifferentImage,
stimuli: [ stimuli: [
'img/happy_face_1.jpg', 'img/happy_face_1.jpg',
'img/sad_face_3.jpg' 'img/sad_face_3.jpg'

18
docs/plugins/jspsych-serial-reaction-time-mouse.md
View File

@ -35,28 +35,29 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "A classic version of the SRT" ???+ example "A classic version of the SRT"
=== "Code" === "Code"
```javascript ```javascript
var grid = [ var grid = [
[1,1,1,1] [1,1,1,1]
] ]
var trial_1 = { var trial_1 = {
type: 'serial-reaction-time-mouse', type: jsPsychSerialReactionTimeMouse,
grid: grid, grid: grid,
target: [0,0] target: [0,0]
} }
var trial_2 = { var trial_2 = {
type: 'serial-reaction-time-mouse', type: jsPsychSerialReactionTimeMouse,
grid: grid, grid: grid,
target: [0,1] target: [0,1]
} }
var trial_3 = { var trial_3 = {
type: 'serial-reaction-time-mouse', type: jsPsychSerialReactionTimeMouse,
grid: grid, grid: grid,
target: [0,2] target: [0,2]
} }
var trial_4 = { var trial_4 = {
type: 'serial-reaction-time-mouse', type: jsPsychSerialReactionTimeMouse,
grid: grid, grid: grid,
target: [0,3] target: [0,3]
} }
@ -71,6 +72,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "A 2x2 grid with extra space and different colors" ???+ example "A 2x2 grid with extra space and different colors"
=== "Code" === "Code"
```javascript ```javascript
var grid = [ var grid = [
[1,0,1], [1,0,1],
@ -79,25 +81,25 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
] ]
var trial_1 = { var trial_1 = {
type: 'serial-reaction-time-mouse', type: jsPsychSerialReactionTimeMouse,
grid: grid, grid: grid,
target: [0,0], target: [0,0],
target_color: '#006738' target_color: '#006738'
} }
var trial_2 = { var trial_2 = {
type: 'serial-reaction-time-mouse', type: jsPsychSerialReactionTimeMouse,
grid: grid, grid: grid,
target: [0,2], target: [0,2],
target_color: '#F78F1E' target_color: '#F78F1E'
} }
var trial_3 = { var trial_3 = {
type: 'serial-reaction-time-mouse', type: jsPsychSerialReactionTimeMouse,
grid: grid, grid: grid,
target: [2,2], target: [2,2],
target_color: '#13B24B' target_color: '#13B24B'
} }
var trial_4 = { var trial_4 = {
type: 'serial-reaction-time-mouse', type: jsPsychSerialReactionTimeMouse,
grid: grid, grid: grid,
target: [2,0], target: [2,0],
target_color: '#E74921' target_color: '#E74921'

22
docs/plugins/jspsych-serial-reaction-time.md
View File

@ -37,9 +37,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "A classic SRT" ???+ example "A classic SRT"
=== "Code" === "Code"
```javascript ```javascript
var instructions = { var instructions = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: '<p>Use the S, F, H, and K keys to respond.</p>', stimulus: '<p>Use the S, F, H, and K keys to respond.</p>',
choices: ['Continue'] choices: ['Continue']
} }
@ -53,25 +54,25 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
] ]
var trial_1 = { var trial_1 = {
type: 'serial-reaction-time', type: jsPsychSerialReactionTime,
grid: grid, grid: grid,
choices: response_map, choices: response_map,
target: [0,0] target: [0,0]
} }
var trial_2 = { var trial_2 = {
type: 'serial-reaction-time', type: jsPsychSerialReactionTime,
grid: grid, grid: grid,
choices: response_map, choices: response_map,
target: [0,1] target: [0,1]
} }
var trial_3 = { var trial_3 = {
type: 'serial-reaction-time', type: jsPsychSerialReactionTime,
grid: grid, grid: grid,
choices: response_map, choices: response_map,
target: [0,2] target: [0,2]
} }
var trial_4 = { var trial_4 = {
type: 'serial-reaction-time', type: jsPsychSerialReactionTime,
grid: grid, grid: grid,
choices: response_map, choices: response_map,
target: [0,3] target: [0,3]
@ -87,9 +88,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "2x2 grid with feedback" ???+ example "2x2 grid with feedback"
=== "Code" === "Code"
```javascript ```javascript
var instructions = { var instructions = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: '<p>Use the R, I, V, and M keys to respond.</p>', stimulus: '<p>Use the R, I, V, and M keys to respond.</p>',
choices: ['Continue'] choices: ['Continue']
} }
@ -105,7 +107,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
] ]
var trial_1 = { var trial_1 = {
type: 'serial-reaction-time', type: jsPsychSerialReactionTime,
grid: grid, grid: grid,
choices: response_map, choices: response_map,
target: [0,0], target: [0,0],
@ -113,7 +115,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
feedback_duration: 500 feedback_duration: 500
} }
var trial_2 = { var trial_2 = {
type: 'serial-reaction-time', type: jsPsychSerialReactionTime,
grid: grid, grid: grid,
choices: response_map, choices: response_map,
target: [0,1], target: [0,1],
@ -121,7 +123,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
feedback_duration: 500 feedback_duration: 500
} }
var trial_3 = { var trial_3 = {
type: 'serial-reaction-time', type: jsPsychSerialReactionTime,
grid: grid, grid: grid,
choices: response_map, choices: response_map,
target: [1,1], target: [1,1],
@ -129,7 +131,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
feedback_duration: 500 feedback_duration: 500
} }
var trial_4 = { var trial_4 = {
type: 'serial-reaction-time', type: jsPsychSerialReactionTime,
grid: grid, grid: grid,
choices: response_map, choices: response_map,
target: [1,0], target: [1,0],

5
docs/plugins/jspsych-survey-html-form.md
View File

@ -28,9 +28,10 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
???+ example "Fill in the blanks" ???+ example "Fill in the blanks"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-html-form', type: jsPsychSurveyHtmlForm,
preamble: '<p>How are you feeling <b>right now?</b></p>', 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>' html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
}; };
@ -47,7 +48,7 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-html-form', type: jsPsychSurveyHtmlForm,
preamble: '<p>What is your favorite bird?</p>', 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>', html: '<p>My favorite bird is <input type="text" id="test-resp-box" name="response" size="10" /></p>',
autofocus: 'test-resp-box' autofocus: 'test-resp-box'

6
docs/plugins/jspsych-survey-likert.md
View File

@ -29,9 +29,10 @@ question_order | array | An array with the order of questions. For example `[2,0
???+ example "Single Question" ???+ example "Single Question"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-likert', type: jsPsychSurveyLikert,
questions: [ questions: [
{ {
prompt: "I like vegetables.", prompt: "I like vegetables.",
@ -56,6 +57,7 @@ question_order | array | An array with the order of questions. For example `[2,0
???+ example "Multiple questions in a random order" ???+ example "Multiple questions in a random order"
=== "Code" === "Code"
```javascript ```javascript
var likert_scale = [ var likert_scale = [
"Strongly Disagree", "Strongly Disagree",
@ -66,7 +68,7 @@ question_order | array | An array with the order of questions. For example `[2,0
]; ];
var trial = { var trial = {
type: 'survey-likert', type: jsPsychSurveyLikert,
questions: [ questions: [
{prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale}, {prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
{prompt: "I like fruit.", name: 'Fruit', labels: likert_scale}, {prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},

6
docs/plugins/jspsych-survey-multi-choice.md
View File

@ -28,9 +28,10 @@ question_order | array | An array with the order of questions. For example `[2,0
???+ example "Vertical Question Alignment" ???+ example "Vertical Question Alignment"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-multi-choice', type: jsPsychSurveyMultiChoice,
questions: [ questions: [
{ {
prompt: "Which of the following do you like the most?", prompt: "Which of the following do you like the most?",
@ -57,9 +58,10 @@ question_order | array | An array with the order of questions. For example `[2,0
???+ example "Horizontal Question Alignment" ???+ example "Horizontal Question Alignment"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-multi-choice', type: jsPsychSurveyMultiChoice,
questions: [ questions: [
{ {
prompt: "Which of the following do you like the most?", prompt: "Which of the following do you like the most?",

3
docs/plugins/jspsych-survey-multi-select.md
View File

@ -29,9 +29,10 @@ question_order | array | An array with the order of questions. For example `[2,0
???+ example "Multiple Questions on a Page" ???+ example "Multiple Questions on a Page"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-multi-select', type: jsPsychSurveyMultiSelect,
questions: [ questions: [
{ {
prompt: "Which of these colors do you like?", prompt: "Which of these colors do you like?",

12
docs/plugins/jspsych-survey-text.md
View File

@ -28,9 +28,10 @@ question_order | array | An array with the order of questions. For example `[2,0
???+ example "Single question and response" ???+ example "Single question and response"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-text', type: jsPsychSurveyText,
questions: [ questions: [
{prompt: 'How old are you?'} {prompt: 'How old are you?'}
] ]
@ -46,9 +47,10 @@ question_order | array | An array with the order of questions. For example `[2,0
???+ example "Multiple questions, with an optional placeholder and a required question" ???+ example "Multiple questions, with an optional placeholder and a required question"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-text', type: jsPsychSurveyText,
questions: [ questions: [
{prompt: 'What is your date of birth?', placeholder: 'mm/dd/yyyy', required: true}, {prompt: 'What is your date of birth?', placeholder: 'mm/dd/yyyy', required: true},
{prompt: 'What country do you currently live in?'} {prompt: 'What country do you currently live in?'}
@ -65,9 +67,10 @@ question_order | array | An array with the order of questions. For example `[2,0
???+ example "Naming questions to improve readability of the stored data" ???+ example "Naming questions to improve readability of the stored data"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-text', type: jsPsychSurveyText,
questions: [ questions: [
{prompt: 'What did you eat for breakfast?', name: 'Breakfast'}, {prompt: 'What did you eat for breakfast?', name: 'Breakfast'},
{prompt: 'What did you eat for lunch?', name: 'Lunch'} {prompt: 'What did you eat for lunch?', name: 'Lunch'}
@ -85,9 +88,10 @@ question_order | array | An array with the order of questions. For example `[2,0
???+ example "Using the preamble and a longer textbox response" ???+ example "Using the preamble and a longer textbox response"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'survey-text', type: jsPsychSurveyText,
preamble: `<img src="img/navarro_burst_03.jpg" style="width:400px;"></img>`, preamble: `<img src="img/navarro_burst_03.jpg" style="width:400px;"></img>`,
questions: [ questions: [
{prompt: 'Describe your reaction to the image above', rows: 5} {prompt: 'Describe your reaction to the image above', rows: 5}

3
docs/plugins/jspsych-video-button-response.md
View File

@ -43,9 +43,10 @@ stimulus | array | The `stimulus` array. This will be encoded as a JSON string w
???+ example "Responses disabled until the video is complete" ???+ example "Responses disabled until the video is complete"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'video-button-response', type: jsPsychVideoButtonResponse,
stimulus: [ stimulus: [
'video/fish.mp4' 'video/fish.mp4'
], ],

3
docs/plugins/jspsych-video-keyboard-response.md
View File

@ -39,9 +39,10 @@ stimulus | array | The `stimulus` array. This will be encoded as a JSON string w
???+ example "Show a video and advance to next trial automatically" ???+ example "Show a video and advance to next trial automatically"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'video-keyboard-response', type: jsPsychVideoKeyboardResponse,
stimulus: [ stimulus: [
'video/fish.mp4' 'video/fish.mp4'
], ],

3
docs/plugins/jspsych-video-slider-response.md
View File

@ -49,9 +49,10 @@ start | numeric | The start time of the video clip.
???+ example "Rate enjoyment of a video clip" ???+ example "Rate enjoyment of a video clip"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'video-slider-response', type: jsPsychVideoSliderResponse,
stimulus: [ stimulus: [
'video/fish.mp4' 'video/fish.mp4'
], ],

13
docs/plugins/jspsych-virtual-chinrest.md
View File

@ -65,9 +65,10 @@ _Note: The deg data are **only** returned if viewing distance is estimated with
???+ example "Measure distance to screen and pixel ratio; no resizing" ???+ example "Measure distance to screen and pixel ratio; no resizing"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'virtual-chinrest', type: jsPsychVirtualChinrest,
blindspot_reps: 3, blindspot_reps: 3,
resize_units: "none" resize_units: "none"
}; };
@ -79,16 +80,17 @@ _Note: The deg data are **only** returned if viewing distance is estimated with
???+ example "Resizing based on centimeters per pixel" ???+ example "Resizing based on centimeters per pixel"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'virtual-chinrest', type: jsPsychVirtualChinrest,
blindspot_reps: 3, blindspot_reps: 3,
resize_units: "cm", resize_units: "cm",
pixels_per_unit: 50 pixels_per_unit: 50
}; };
var resized_stimulus = { var resized_stimulus = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: ` stimulus: `
<p>If the measurements were done correctly, the square below should be 10 cm x 10 cm.</p> <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> <div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
@ -103,16 +105,17 @@ _Note: The deg data are **only** returned if viewing distance is estimated with
???+ example "Resizing based on degrees of visual angle per pixel" ???+ example "Resizing based on degrees of visual angle per pixel"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'virtual-chinrest', type: jsPsychVirtualChinrest,
blindspot_reps: 3, blindspot_reps: 3,
resize_units: "deg", resize_units: "deg",
pixels_per_unit: 50 pixels_per_unit: 50
}; };
var resized_stimulus = { var resized_stimulus = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: ` stimulus: `
<p>If the measurements were done correctly, the square below should take up about 10 degrees of visual angle.</p> <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> <div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>

10
docs/plugins/jspsych-visual-search-circle.md
View File

@ -40,16 +40,17 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Identical distractors" ???+ example "Identical distractors"
=== "Code" === "Code"
```javascript ```javascript
var instructions = { var instructions = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: `<p>Press J if there is a backwards N.</p> stimulus: `<p>Press J if there is a backwards N.</p>
<p>Press F if all the Ns are in the normal orientation.</p>`, <p>Press F if all the Ns are in the normal orientation.</p>`,
choices: ['Continue'] choices: ['Continue']
} }
var trial = { var trial = {
type: 'visual-search-circle', type: jsPsychVisualSearchCircle,
target: 'img/backwardN.gif', target: 'img/backwardN.gif',
foil: 'img/normalN.gif', foil: 'img/normalN.gif',
fixation_image: 'img/fixation.gif', fixation_image: 'img/fixation.gif',
@ -67,16 +68,17 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Variety of different distractors" ???+ example "Variety of different distractors"
=== "Code" === "Code"
```javascript ```javascript
var instructions = { var instructions = {
type: 'html-button-response', type: jsPsychHtmlButtonResponse,
stimulus: `<p>Press E if there is an elephant in the group.</p> 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>`, <p>Press N if there is no elephant in the group.</p>`,
choices: ['Continue'] choices: ['Continue']
} }
var trial = { var trial = {
type: 'visual-search-circle', type: jsPsychVisualSearchCircle,
target: 'img/elephant.png', target: 'img/elephant.png',
foil: ['img/lion.png', 'img/monkey.png'], foil: ['img/lion.png', 'img/monkey.png'],
fixation_image: 'img/fixation.gif', fixation_image: 'img/fixation.gif',

3
docs/plugins/jspsych-vsl-animate-occlusion.md
View File

@ -36,9 +36,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "Displaying a short sequence with default options" ???+ example "Displaying a short sequence with default options"
=== "Code" === "Code"
```javascript ```javascript
var trial = { var trial = {
type: 'vsl-animate-occlusion', type: jsPsychVslAnimateOcclusion,
stimuli: [ stimuli: [
"img/1.gif", "img/1.gif",
"img/2.gif", "img/2.gif",

3
docs/plugins/jspsych-vsl-grid-scene.md
View File

@ -47,6 +47,7 @@ var grid_stimulus = jsPsych.plugins['vsl-grid-scene'].generate_stimulus(pattern,
???+ example "Displaying a scene" ???+ example "Displaying a scene"
=== "Code" === "Code"
```javascript ```javascript
var scene = [ var scene = [
["img/1.gif", "img/2.gif", 0], ["img/1.gif", "img/2.gif", 0],
@ -55,7 +56,7 @@ var grid_stimulus = jsPsych.plugins['vsl-grid-scene'].generate_stimulus(pattern,
] ]
var trial = { var trial = {
type: 'vsl-grid-scene', type: jsPsychVslGridScene,
stimuli: scene, stimuli: scene,
trial_duration: 1500 trial_duration: 1500
}; };

8
docs/reference/jspsych-pluginAPI.md
View File

@ -147,7 +147,7 @@ var after_response = function(info) {
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<', stimulus: '<<<<<',
choices: ['f','j'], choices: ['f','j'],
prompt: 'Press f for left. Press j for right.', prompt: 'Press f for left. Press j for right.',
@ -248,17 +248,17 @@ This function will only return files from plugins that have used the `registerPr
```javascript ```javascript
var audio_trial = { var audio_trial = {
type: 'audio-keyboard-response' type: jsPsychAudioKeyboardResponse
stimulus: 'file.mp3' stimulus: 'file.mp3'
} }
var image_trial = { var image_trial = {
type: 'image-keyboard-response' type: jsPsychImageKeyboardResponse
stimulus: 'file.png' stimulus: 'file.png'
} }
var video_trial = { var video_trial = {
type: 'video-keyboard-response' type: jsPsychVideoKeyboardResponse
stimulus: 'file.mp4' stimulus: 'file.mp4'
} }

20
docs/reference/jspsych.md
View File

@ -91,7 +91,7 @@ Adds the timeline to the end of the experiment.
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is a new trial.' stimulus: 'This is a new trial.'
} }
@ -146,7 +146,7 @@ for (var i = 0; i < images.length; i++) {
} }
var block = { var block = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
choices: ['y', 'n'], choices: ['y', 'n'],
prompt: '<p>Press "y" to Continue. Press "n" to end this node of the experiment.</p>', prompt: '<p>Press "y" to Continue. Press "n" to end this node of the experiment.</p>',
on_finish: function(data) { on_finish: function(data) {
@ -158,7 +158,7 @@ var block = {
} }
var after_block = { var after_block = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<p>The next node</p>' stimulus: '<p>The next node</p>'
} }
@ -192,7 +192,7 @@ Ends the experiment, skipping all remaining trials. If the `on_finish` event han
```javascript ```javascript
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'image1.jpg', stimulus: 'image1.jpg',
choices: ['y', 'n'] choices: ['y', 'n']
prompt: '<p>Press "y" to Continue. Press "n" to end the experiment</p>', prompt: '<p>Press "y" to Continue. Press "n" to end the experiment</p>',
@ -264,7 +264,7 @@ data, such as in the example below.
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'Just a demo', stimulus: 'Just a demo',
on_finish: function(data){ on_finish: function(data){
// merge all timeline variables available at this trial into the data for this trial // merge all timeline variables available at this trial into the data for this trial
@ -539,7 +539,7 @@ Pauses the experiment. The experiment will finish the current trial, but will no
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'Press p to take a 30 second break. Otherwise, press c to continue immediately.', stimulus: 'Press p to take a 30 second break. Otherwise, press c to continue immediately.',
choices: ['p','c'], choices: ['p','c'],
on_finish: function(data){ on_finish: function(data){
@ -575,7 +575,7 @@ Resumes the experiment after a call to `jsPsych.pauseExperiment()`. If the post
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: 'Press p to take a 30 second break. Otherwise, press c to continue immediately.', stimulus: 'Press p to take a 30 second break. Otherwise, press c to continue immediately.',
choices: ['p','c'], choices: ['p','c'],
on_finish: function(data){ on_finish: function(data){
@ -675,7 +675,7 @@ Either a function that returns the value of the timeline variable, or the value
```javascript ```javascript
var trial = { var trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('image') stimulus: jsPsych.timelineVariable('image')
} }
@ -694,7 +694,7 @@ var procedure = {
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: function(){ stimulus: function(){
return "<img style='width:100px; height:100px;' src='"+jsPsych.timelineVariable('image')+"'></img>"; return "<img style='width:100px; height:100px;' src='"+jsPsych.timelineVariable('image')+"'></img>";
} }
@ -715,7 +715,7 @@ Prior to jsPsych v6.3.0, the `call_immediate` parameter must be set to `true` wh
```javascript ```javascript
var trial = { var trial = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: function(){ stimulus: function(){
return "<img style='width:100px; height:100px;' src='"+jsPsych.timelineVariable('image', true)+"'></img>"; return "<img style='width:100px; height:100px;' src='"+jsPsych.timelineVariable('image', true)+"'></img>";
} }

128
docs/tutorials/rt-task.md
View File

@ -43,13 +43,13 @@ All jsPsych experiments are defined by a timeline. The timeline is an array that
var timeline = []; var timeline = [];
``` ```
Let's greet the subject with a simple welcome message using the [jspsych-html-keyboard-response](/plugins/jspsych-html-keyboard-response.md) plugin. Let's greet the subject with a simple welcome message using the [html-keyboard-response](/plugins/jspsych-html-keyboard-response.md) plugin.
First, we create a trial that uses the `jspsych-html-keyboard-response` plugin and contains a simple string to show the subject. First, we create a trial that uses the `html-keyboard-response` plugin and contains a simple string to show the subject.
```javascript ```javascript
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
``` ```
@ -88,7 +88,7 @@ After each step in the tutorial you can view the complete code up to that point
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
@ -108,7 +108,7 @@ The trial definition looks like this:
```javascript ```javascript
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -163,14 +163,14 @@ timeline.push(instructions);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -214,13 +214,13 @@ For now, we will just show each image once. The path to the image file should be
```javascript ```javascript
var blue_trial = { var blue_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/blue.png', stimulus: 'img/blue.png',
choices: ['f', 'j'] choices: ['f', 'j']
}; };
var orange_trial = { var orange_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/orange.png', stimulus: 'img/orange.png',
choices: ['f', 'j'] choices: ['f', 'j']
} }
@ -255,14 +255,14 @@ timeline.push(blue_trial, orange_trial);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -283,13 +283,13 @@ timeline.push(blue_trial, orange_trial);
/* test trials */ /* test trials */
var blue_trial = { var blue_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/blue.png', stimulus: 'img/blue.png',
choices: ['f', 'j'] choices: ['f', 'j']
}; };
var orange_trial = { var orange_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/orange.png', stimulus: 'img/orange.png',
choices: ['f', 'j'] choices: ['f', 'j']
} }
@ -327,7 +327,7 @@ We'll put this trial at the very start of the experiment, so add this code befor
```js ```js
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png'] images: ['img/blue.png', 'img/orange.png']
} }
``` ```
@ -362,21 +362,21 @@ timeline.push(preload);
/* preload images */ /* preload images */
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png'] images: ['img/blue.png', 'img/orange.png']
} }
timeline.push(preload); timeline.push(preload);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -397,13 +397,13 @@ timeline.push(preload);
/* test trials */ /* test trials */
var blue_trial = { var blue_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/blue.png', stimulus: 'img/blue.png',
choices: ['f', 'j'] choices: ['f', 'j']
}; };
var orange_trial = { var orange_trial = {
type: 'image-keyboard-response', type: jsPsychImageKeyboardResponse,
stimulus: 'img/orange.png', stimulus: 'img/orange.png',
choices: ['f', 'j'] choices: ['f', 'j']
} }
@ -436,18 +436,18 @@ Instead of just showing the blue and orange circles, let's also set up the exper
```javascript ```javascript
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: 1000, trial_duration: 1000,
} }
``` ```
To show the circles, we'll set up another trial with the html-keyboard-response plugin, but we'll use the function `jsPsych.timelineVariable()` to indicate that we want jsPsych to substitute the value of the parameter in from the timeline variables. To show the circles, we'll set up another trial with the image-keyboard-response plugin, but we'll use the function `jsPsych.timelineVariable()` to indicate that we want jsPsych to substitute the value of the parameter in from the timeline variables.
```javascript ```javascript
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'] choices: ['f', 'j']
} }
@ -494,21 +494,21 @@ What happens when the experiment reaches the test procedure? jsPsych will run th
/* preload images */ /* preload images */
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png'] images: ['img/blue.png', 'img/orange.png']
} }
timeline.push(preload); timeline.push(preload);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -534,14 +534,14 @@ What happens when the experiment reaches the test procedure? jsPsych will run th
]; ];
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: 1000, trial_duration: 1000,
} }
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'] choices: ['f', 'j']
} }
@ -607,21 +607,21 @@ var test_procedure = {
/* preload images */ /* preload images */
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png'] images: ['img/blue.png', 'img/orange.png']
} }
timeline.push(preload); timeline.push(preload);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -647,14 +647,14 @@ var test_procedure = {
]; ];
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: 1000, trial_duration: 1000,
} }
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'] choices: ['f', 'j']
} }
@ -683,7 +683,7 @@ To do that here, we'll use one of the built-in randomization methods in [jsPsych
```javascript ```javascript
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: function(){ trial_duration: function(){
@ -718,21 +718,21 @@ In the code above, we replaced the `trial_duration: 1000` parameter in `fixation
/* preload images */ /* preload images */
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png'] images: ['img/blue.png', 'img/orange.png']
} }
timeline.push(preload); timeline.push(preload);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -758,7 +758,7 @@ In the code above, we replaced the `trial_duration: 1000` parameter in `fixation
]; ];
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: function(){ trial_duration: function(){
@ -767,7 +767,7 @@ In the code above, we replaced the `trial_duration: 1000` parameter in `fixation
} }
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'] choices: ['f', 'j']
} }
@ -830,21 +830,21 @@ var jsPsych = initJsPsych({
/* preload images */ /* preload images */
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png'] images: ['img/blue.png', 'img/orange.png']
} }
timeline.push(preload); timeline.push(preload);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -870,7 +870,7 @@ var jsPsych = initJsPsych({
]; ];
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: function(){ trial_duration: function(){
@ -879,7 +879,7 @@ var jsPsych = initJsPsych({
} }
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'] choices: ['f', 'j']
} }
@ -908,7 +908,7 @@ When might you use this feature? In this experiment, it would be nice to tag eac
```javascript ```javascript
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'], choices: ['f', 'j'],
data: { data: {
@ -932,7 +932,7 @@ Now we can use `timelineVariable()` in the `data` parameter of the `test` trial.
```javascript ```javascript
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'], choices: ['f', 'j'],
data: { data: {
@ -946,7 +946,7 @@ Another kind of tagging that would be useful is to mark each fixation trial as s
```js ```js
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: function(){ trial_duration: function(){
@ -986,21 +986,21 @@ var fixation = {
/* preload images */ /* preload images */
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png'] images: ['img/blue.png', 'img/orange.png']
} }
timeline.push(preload); timeline.push(preload);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -1026,7 +1026,7 @@ var fixation = {
]; ];
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: function(){ trial_duration: function(){
@ -1038,7 +1038,7 @@ var fixation = {
} }
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'], choices: ['f', 'j'],
data: { data: {
@ -1075,7 +1075,7 @@ For this example, we'll calculate whether the subject responded correctly, and a
```javascript ```javascript
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'], choices: ['f', 'j'],
data: { data: {
@ -1118,21 +1118,21 @@ The `data.response` value is a string representation of the key the subject pres
/* preload images */ /* preload images */
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png'] images: ['img/blue.png', 'img/orange.png']
} }
timeline.push(preload); timeline.push(preload);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -1158,7 +1158,7 @@ The `data.response` value is a string representation of the key the subject pres
]; ];
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: function(){ trial_duration: function(){
@ -1170,7 +1170,7 @@ The `data.response` value is a string representation of the key the subject pres
} }
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'], choices: ['f', 'j'],
data: { data: {
@ -1209,7 +1209,7 @@ Here's what the code looks like, and a description follows below.
```js ```js
var debrief_block = { var debrief_block = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: function() { stimulus: function() {
var trials = jsPsych.data.get().filter({task: 'response'}); var trials = jsPsych.data.get().filter({task: 'response'});
@ -1265,21 +1265,21 @@ This code is available in the `/examples` folder in the jsPsych release download
/* preload images */ /* preload images */
var preload = { var preload = {
type: 'preload', type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png'] images: ['img/blue.png', 'img/orange.png']
} }
timeline.push(preload); timeline.push(preload);
/* define welcome message trial */ /* define welcome message trial */
var welcome = { var welcome = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome); timeline.push(welcome);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: ` stimulus: `
<p>In this experiment, a circle will appear in the center <p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>, of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -1305,7 +1305,7 @@ This code is available in the `/examples` folder in the jsPsych release download
]; ];
var fixation = { var fixation = {
type: 'html-keyboard-response', type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
trial_duration: function(){ trial_duration: function(){
@ -1317,7 +1317,7 @@ This code is available in the `/examples` folder in the jsPsych release download
} }
var test = { var test = {
type: "image-keyboard-response", type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'], choices: ['f', 'j'],
data: { data: {
@ -1340,7 +1340,7 @@ This code is available in the `/examples` folder in the jsPsych release download
/* define debrief */ /* define debrief */
var debrief_block = { var debrief_block = {
type: "html-keyboard-response", type: jsPsychHtmlKeyboardResponse,
stimulus: function() { stimulus: function() {
var trials = jsPsych.data.get().filter({task: 'response'}); var trials = jsPsych.data.get().filter({task: 'response'});