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
initJsPsych({
extensions: [
{type: 'webgazer', params: {...}}
{type: jsPsychExtensionWebgazer, params: {...}}
]
})
```
@ -29,9 +29,9 @@ Trial parameters can be set when adding the extension to a trial object.
```js
var trial = {
type: '...',
type: jsPsych...,
extensions: [
{type: 'webgazer', params: {...}}
{type: jsPsychExtensionWebgazer, params: {...}}
]
}
```

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

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 trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<',
choices: ['f','j'],
data: {
@ -31,7 +31,7 @@ var trial = {
}
var feedback = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: function(){
// The feedback stimulus is a dynamic parameter because we can't know in advance whether
// the stimulus should be 'correct' or 'incorrect'.
@ -61,7 +61,7 @@ var random_duration = function() {
}
var trial = {
type: 'html-keyboard-response'
type: jsPsychHtmlKeyboardResponse
stimulus: '+',
post_trial_gap: random_duration // if you use a named function for a dynamic parameter, then just use the function name (without parentheses after it)
}
@ -75,7 +75,7 @@ The trial's `data` parameter can be also function, which is useful for when you
var current_difficulty; // value changes during the experiment
var trial = {
type: 'survey-text',
type: jsPsychSurveyText,
questions: [{prompt: "Please enter your response."}]
data: function() {
return {difficulty: current_difficulty};
@ -87,7 +87,7 @@ It's also possible to use a function for any of the _individual properties_ in t
```js
var trial = {
type: 'survey-text',
type: jsPsychSurveyText,
questions: [{prompt: "Please enter your response."}]
data: {
difficulty: function() {
@ -107,7 +107,7 @@ Dyanmic parameters work the same way with nested parameters, which are parameter
var subject_id; // value is set during the experiment
var trial = {
type: 'survey-text',
type: jsPsychSurveyText,
questions: function(){
var questions_array = [
{prompt: "Hi "+subject_id+"! What's your favorite city?", required: true, name: 'fav_city'},
@ -122,7 +122,7 @@ You can also use a function for any of the _individual parameters_ inside of a n
```js
var trial = {
type: 'survey-text',
type: jsPsychSurveyText,
questions: [
{
prompt: function() {

6
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
var trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.png',
on_finish: function(data) {
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
var trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.png',
on_load: function() {
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
var trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.png',
on_start: function(trial) {
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
initJsPsych({
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
<head>
<script src="jspsych/jspsych.js"></script>
<script src="jspsych/extensions/some-extension.js"></script>
<script src="jspsych/extensions/example.js"></script>
</head>
```
```js
initJsPsych({
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
var trial = {
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
initJsPsych({
extensions: [
{type: 'webgazer'}
{type: jsPsychExtensionWebgazer}
]
})
```
@ -49,7 +49,7 @@ To help the participant position their face correctly for eye tracking you can u
```js
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
var calibration_trial = {
type: 'webgazer-calibrate',
type: jsPsychWebgazerCalibrate,
calibration_points: [[25,50], [50,50], [75,50], [50,25], [50,75]],
calibration_mode: 'click'
}
@ -76,7 +76,7 @@ To measure the accuracy and precision of the calibration, you can use the [jspsy
```js
var validation_trial = {
type: 'webgazer-validate',
type: jsPsychWebgazerValidate,
validation_points: [[-200,200], [200,200],[-200,-200],[200,-200]],
validation_point_coordinates: 'center-offset-pixels',
roi_radius: 100
@ -102,11 +102,11 @@ To enable eye tracking for a trial in your experiment, you can simply add the We
```js
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<img id="scene" src="my-scene.png"></img>',
extensions: [
{
type: 'webgazer',
type: jsPsychExtensionWebgazer,
params: {
targets: ['#scene']
}
@ -185,17 +185,17 @@ If you have tips based on your own experience please consider sharing them on ou
var jsPsych = initJsPsych({
extensions: [
{type: 'webgazer'}
{type: jsPsychExtensionWebgazer}
]
});
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png']
}
var camera_instructions = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: `
<p>In order to participate you must allow the experiment to use your camera.</p>
<p>You will be prompted to do this on the next screen.</p>
@ -206,11 +206,11 @@ If you have tips based on your own experience please consider sharing them on ou
}
var init_camera = {
type: 'webgazer-init-camera'
type: jsPsychWebgazerInitCamera
}
var calibration_instructions = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: `
<p>Now you'll calibrate the eye tracking, so that the software can use the image of your eyes to predict where you are looking.</p>
<p>You'll see a series of dots appear on the screen. Look at each dot and click on it.</p>
@ -219,7 +219,7 @@ If you have tips based on your own experience please consider sharing them on ou
}
var calibration = {
type: 'webgazer-calibrate',
type: jsPsychWebgazerCalibrate,
calibration_points: [
[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 = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: `
<p>Now we'll measure the accuracy of the calibration.</p>
<p>Look at each dot as it appears on the screen.</p>
@ -239,7 +239,7 @@ If you have tips based on your own experience please consider sharing them on ou
}
var validation = {
type: 'webgazer-validate',
type: jsPsychWebgazerValidate,
validation_points: [
[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 = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: `
<p>The accuracy of the calibration is a little lower than we'd like.</p>
<p>Let's try calibrating one more time.</p>
@ -276,7 +276,7 @@ If you have tips based on your own experience please consider sharing them on ou
}
var calibration_done = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: `
<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 = {
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>
<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>
@ -292,20 +292,20 @@ If you have tips based on your own experience please consider sharing them on ou
}
var trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/blue.png',
choices: jsPsych.NO_KEYS,
trial_duration: 2000,
extensions: [
{
type: 'webgazer',
type: jsPsychExtensionWebgazer,
params: {targets: ['#jspsych-image-keyboard-response-stimulus']}
}
]
}
var show_data = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: function() {
var trial_data = jsPsych.data.getLastTrialData().values();
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 = [];
timeline.push({
type: 'fullscreen',
type: jsPsychFullscreen,
fullscreen_mode: true
});
timeline.push({
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'This trial will be in fullscreen mode.'
});
// exit fullscreen mode
timeline.push({
type: 'fullscreen',
type: jsPsychFullscreen,
fullscreen_mode: false
});
timeline.push({
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
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
// stimuli to preload based the main experiment timeline (used in jsPsych.run)
var preload = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true
}
// this image file can be automatically preloaded
var image_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/file1.png'
}
// the sound file can be automatically preloaded
var sound_trial = {
type: 'audio-keyboard-response',
type: jsPsychAudioKeyboardResponse,
stimulus: 'audio/hello.mp3'
}
// the video file can be automatically preloaded (as long as the experiment
// is running on a server)
var video_trial = {
type: 'video',
type: jsPsychVideoKeyboardResponse,
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
// an HTML string
var image_trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<img src="img/file1.png"></img>',
}
// this audio file cannot be automatically preloaded because it is returned
// from a function
var sound_trial = {
type: 'audio-keyboard-response',
type: jsPsychAudioKeyboardResponse,
stimulus: function() { return 'audio/sound1.mp3' }
}
@ -63,7 +63,7 @@ var sound_trial = {
var video_trials = {
timeline: [
{
type: 'video',
type: jsPsychVideoKeyboardResponse,
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
// and video parameters
var preload = {
type: 'preload',
type: jsPsychPreload,
images: images,
audio: audio,
video: video
@ -99,13 +99,13 @@ It's possible to combine automatic and manual preloading. For instance, you may
```javascript
// this file can be preloaded automatically
var image_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/file1.png'
}
// this file can be preloaded automatically
var sound_trial = {
type: 'audio-keyboard-response',
type: jsPsychAudioKeyboardResponse,
stimulus: 'audio/hello.mp3'
}
@ -113,7 +113,7 @@ var sound_trial = {
var video_trials = {
timeline: [
{
type: 'video',
type: jsPsychVideoKeyboardResponse,
stimulus: jsPsych.timelineVariable('video')
}
],
@ -126,7 +126,7 @@ var video_trials = {
var video = ['video/1.mp4', 'video/2.mp4'];
var preload = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true, // automatically preload the image and audio files
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 = {
timeline: [
{
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/file1.png'
},
{
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/file2.png'
}
]
@ -159,23 +159,23 @@ var block_1 = {
var block_2 = {
timeline: [
{
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/file3.png'
},
{
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/file4.png'
}
]
}
var preload_1 = {
type: 'preload',
type: jsPsychPreload,
trials: block_1 // automatically preload just the images from block_1 trials
}
var preload_2 = {
type: 'preload',
type: jsPsychPreload,
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
var preload_1 = {
type: 'preload',
type: jsPsychPreload,
images: images_block_1
}
// preload trial for preloading the block 2 stimuli
var preload_2 = {
type: 'preload',
type: jsPsychPreload,
images: images_block_2
}
@ -234,7 +234,7 @@ By default, the `preload` plugin will display a progress bar while files are bei
```javascript
var preload_trial = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true
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
var preload_trial = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true
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
var preload_trial = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true
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
var preload_trial = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true,
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
var preload_trial = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true,
// show details of any file loading errors and/or loading time out
show_detailed_errors: true
@ -293,7 +293,7 @@ If `continue_after_error` is `true`, then the experiment _will not stop_ if one
```javascript
var preload_trial = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true,
message: 'Please wait while the experiment loads...',
// 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 = {
type: 'call-function',
type: jsPsychCallFunction,
async: true,
func: function(done){
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
var fail_message = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'The experiment failed to load. Please contact the researcher.',
choices: jsPsych.NO_KEYS,
trial_duration: null
@ -345,7 +345,7 @@ var file_load_count = 0;
var file_error_count = 0;
var preload_trial = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true,
on_error: function(file) {
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>
```
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.
```javascript
var image_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'images/happy_face.jpg'
}
```
@ -30,7 +36,7 @@ You can override any default parameter values by adding them into your trial obj
```javascript
var image_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'images/happy_face.jpg',
trial_duration: 3000,
post_trial_gap: 2000
@ -63,7 +69,7 @@ A trial for the Flanker Task written with jsPsych might look like this:
```javascript
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<',
choices: ['f','j'],
data: {
@ -83,7 +89,7 @@ The ITI can also be controlled at the trial level through the `post_trial_gap` p
```javascript
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'There will be a 1.5 second blank screen after this trial.',
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,
// so the trial will display an incongruent Flanker stimulus with a right-facing central arrow
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<',
choices: ['f','j'],
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'
// depending on the response that was made
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<',
choices: ['f','j'],
data: {
@ -148,7 +154,7 @@ The `on_load` callback function will trigger once the trial has completed loadin
```javascript
var trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'imgA.png',
on_load: function() {
// 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>
<script>
var fixation_trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
choices: jsPsych.NO_KEYS,
stimulus: '+',
css_classes: ['fixation']
};
var flanker_trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
choices: ["ArrowLeft", "ArrowRight"],
stimulus: '>>>>>',
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
var trial = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: '<p style="color: orange; font-size: 48px; font-weight: bold;">BLUE</p>',
choices: function() {
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
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Almost done...',
on_finish: function(){
jsPsych.setProgressBar(0.85); // set progress bar to 85% full.
@ -54,7 +54,7 @@ var jsPsych = initJsPsych({
var n_trials = 5;
var start = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Press any key to start!',
on_start: function() {
// set progress bar to 0 at the start of experiment
@ -63,7 +63,7 @@ var start = {
};
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is a trial!',
on_finish: function() {
// at the end of each trial, update the progress bar
@ -79,7 +79,7 @@ var trials = {
};
var done = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
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
var final_trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
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>`,
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
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
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
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: function() {
var stim = '<p style="font-size:30px;font-weight:bold;">'+jsPsych.timelineVariable('text')+'</p>';
return stim;
@ -147,7 +147,7 @@ You can use a static `css_classes` parameter value if you always want to apply t
</head>
<script>
var fixation = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '+',
choices: jsPsych.NO_KEYS,
trial_duration: 500,
@ -187,7 +187,7 @@ In the example below, the CSS selector `.left-align #stimulus` selects the eleme
<script>
var trial_procedure = {
timeline: [{
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<p id="stimulus">This is the stimulus.</p>',
prompt: '<p>This text will not be affected by the CSS classes '+
'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>
var trial_procedure = {
timeline: [{
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<p id="stimulus">This is the stimulus.</p>',
prompt: '<p>This text will not be affected by the CSS classes '+
'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
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'hello world!'
}
```
@ -35,19 +35,19 @@ Scaling up to multiple trials is straightforward. Just create an object for each
var timeline = [];
var trial_1 = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is trial 1.'
}
timeline.push(trial_1);
var trial_2 = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is trial 2.'
}
timeline.push(trial_2);
var trial_3 = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is 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
var judgment_trials = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
prompt: '<p>Press a number 1-7 to indicate how unusual the image is.</p>',
choices: ['1','2','3','4','5','6','7'],
timeline: [
@ -76,7 +76,7 @@ You can also override the values by declaring a new value in the `timeline` arra
```javascript
var judgment_trials = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
prompt: '<p>Press a number 1-7 to indicate how unusual the image is.</p>',
choices: ['1','2','3','4','5','6','7'],
timeline: [
@ -103,13 +103,13 @@ Here's a basic version of the task with timeline variables.
var face_name_procedure = {
timeline: [
{
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '+',
choices: jsPsych.NO_KEYS,
trial_duration: 500
},
{
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('face'),
choices: jsPsych.NO_KEYS,
trial_duration: 2500
@ -136,19 +136,19 @@ This time, instead of using `jsPsych.timelineVariable()` as the stimulus paramet
var face_name_procedure = {
timeline: [
{
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '+',
choices: jsPsych.NO_KEYS,
trial_duration: 500
},
{
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable('name'),
trial_duration: 1000,
choices: jsPsych.NO_KEYS
},
{
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: function(){
var html="<img src='"+jsPsych.timelineVariable('face')+"'>";
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
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
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
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.'
}
@ -367,12 +367,12 @@ A timeline can be skipped based on the evaluation of a function using the `condi
var jsPsych = initJsPsych();
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.'
}
var if_trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'You chose to view the trial. Press any key to continue.'
}
@ -391,7 +391,7 @@ var if_node = {
}
var after_if_trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
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_trial = {
type: 'animation',
type: jsPsychAnimation,
stimuli: animation_sequence,
sequence_reps: 3,
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"
```javascript
var trial = {
type: 'audio-button-response',
type: jsPsychAudioButtonResponse,
stimulus: 'sound/tone.mp3',
choices: ['Low', 'High'],
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"
```javascript
var trial = {
type: 'audio-button-response',
type: jsPsychAudioButtonResponse,
stimulus: 'sound/roar.mp3',
choices: ['lion.png', 'elephant.png', 'monkey.png'],
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"
```javascript
var trial = {
type: 'audio-keyboard-response',
type: jsPsychAudioKeyboardResponse,
stimulus: 'sound/tone.mp3',
choices: ['e', 'i'],
prompt: "<p>Is the pitch high or low? Press 'e' for low and 'i' for high.</p>",
@ -58,7 +58,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code"
```javascript
var trial = {
type: 'audio-keyboard-response',
type: jsPsychAudioKeyboardResponse,
stimulus: 'sound/tone.mp3',
choices: jsPsych.NO_KEYS,
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"
```javascript
var trial = {
type: 'audio-slider-response',
type: jsPsychAudioSliderResponse,
stimulus: 'sound/speech_joke.mp3',
labels: ['Not Funny', 'Funny'],
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"
```javascript
var trial = {
type: 'audio-slider-response',
type: jsPsychAudioSliderResponse,
stimulus: 'sound/speech_joke.mp3',
labels: ['Not Funny', 'Funny'],
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 = {
type: 'call-function',
type: jsPsychCallFunction,
func: myfunc
}
```
@ -56,7 +56,7 @@ value | any | The return value of the called function.
}
var trial = {
type: 'call-function',
type: jsPsychCallFunction,
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.
```javascript
var trial = {
type: 'call-function',
type: jsPsychCallFunction,
async: true,
func: function(done){
// can perform async operations here like
@ -99,7 +99,7 @@ value | any | The return value of the called function.
=== "Code"
```javascript
var trial = {
type: 'call-function',
type: jsPsychCallFunction,
async: true,
func: function(done){
// 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 = {
type: 'canvas-button-response',
type: jsPsychCanvasButtonResponse,
stimulus: function(c) {
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 = {
type: 'canvas-button-response',
type: jsPsychCanvasButtonResponse,
stimulus: function(c) {
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"
```javascript
var lines = {
type: 'canvas-button-response',
type: jsPsychCanvasButtonResponse,
stimulus: function(c) {
var ctx = c.getContext("2d");
// 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 = {
timeline: [
{
type: 'canvas-button-response',
type: jsPsychCanvasButtonResponse,
stimulus: function(c) {
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 = {
type: 'canvas-keyboard-response',
type: jsPsychCanvasKeyboardResponse,
canvas_size: [300, 300],
stimulus: drawRect,
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 = {
type: 'canvas-keyboard-response',
type: jsPsychCanvasKeyboardResponse,
canvas_size: [300, 300],
stimulus: drawCirc,
prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>',

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 = {
type: 'canvas-slider-response',
type: jsPsychCanvasSliderResponse,
stimulus: twoSquares,
labels: ['0','10'],
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 = {
type: 'canvas-slider-response',
type: jsPsychCanvasSliderResponse,
stimulus: function(c) {
colors = ['darkred', 'cyan'];
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"
```javascript
var animation_trial = {
type: 'categorize-animation',
type: jsPsychCategorizeAnimation,
stimuli: [
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg',
@ -68,7 +68,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
];
var animation_trial = {
type: 'categorize-animation',
type: jsPsychCategorizeAnimation,
stimuli: images,
choices: ['p', 'q'],
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"
```javascript
var categorization_trial = {
type: 'categorize-html',
type: jsPsychCategorizeHtml,
stimulus: '<p>B</p>',
key_answer: 'p',
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"
```javascript
var categorization_trial = {
type: 'categorize-image',
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/blue.png',
type: jsPsychCategorizeImage,
stimulus: 'img/blue.png',
key_answer: 'b',
text_answer: 'Blue',
choices: ['r', 'g', 'b'],

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"
```javascript
var cloze_trial = {
type: 'cloze',
type: jsPsychCloze,
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"
```javascript
var cloze_trial = {
type: 'cloze',
type: jsPsychCloze,
text: 'A rectangle has % 4 % corners and a triangle has % 3 %.',
check_answers: true,
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.
var trial = {
type:'external-html',
type: jsPsychExternalHtml,
url: "external_page.html",
cont_btn: "start",
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"
```javascript
var sort_trial = {
type: 'free-sort',
type: jsPsychFreeSort,
stimuli: sorting_stimuli,
stim_width: 80,
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"
```javascript
var enter_fullscreen = {
type: 'fullscreen',
type: jsPsychFullscreen,
fullscreen_mode: true
}
var trial_in_fullscreen = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: 'This trial will be in fullscreen mode.',
choices: ['Continue']
}
var exit_fullscreen = {
type: 'fullscreen',
type: jsPsychFullscreen,
fullscreen_mode: false,
delay_after: 0
}
var trial_after_fullscreen = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: 'This trial will NOT be in fullscreen mode.',
choices: ['Continue']
}

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"
=== "Code"
```javascript
var trial = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: '<p>Running</p>',
choices: ['Healthy', 'Unhealthy'],
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"
```javascript
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<p>Running</p>',
choices: ['e', 'i'],
prompt: "<p>Is this activity healthy or unhealthy?</p><p>Press 'e' for healthy and 'i' for unhealthy.</p>"
@ -49,7 +49,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
=== "Code"
```javascript
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<p style="font-size: 48px;">+</p>',
choices: jsPsych.NO_KEYS,
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"
=== "Code"
```javascript
var trial = {
type: 'html-slider-response',
type: jsPsychHtmlSliderResponse,
stimulus: '<p>Running</p>',
require_movement: true,
labels: ['healthy', 'unhealthy'],
prompt: "<p>How healthy/unhealthy is this activity?</p>"
};
```
=== "Demo"
<div style="text-align:center;">
<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"
```javascript
var trial = {
type: 'iat-html',
type: jsPsychIatHtml,
stimulus: 'Golf',
stim_key_association: 'left',
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',

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"
```javascript
var trial_block = {
type: 'iat-image',
type: jsPsychIatImage,
stimulus: 'img/blue.png',
stim_key_association: 'left',
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"
=== "Code"
```javascript
var trial = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_1.png',
choices: ['Happy', 'Sad'],
prompt: "<p>Is this person happy or sad?</p>"
};
```
=== "Demo"
<div style="text-align:center;">
<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"
=== "Code"
```javascript
var trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/happy_face_1.png',
choices: ['e', 'i'],
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"
=== "Code"
```javascript
var trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/happy_face_1.png',
choices: jsPsych.NO_KEYS,
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"
=== "Code"
```javascript
var trial = {
type: 'image-slider-response',
type: jsPsychImageSliderResponse,
stimulus: 'img/happy_face_1.png',
labels: ['happy', 'sad'],
prompt: "<p>How happy/sad is this person?</p>",
};
```
=== "Demo"
<div style="text-align:center;">
<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"
=== "Code"
```javascript
var trial = {
type: 'instructions',
type: jsPsychInstructions,
pages: [
'Welcome to the experiment. Click next to begin.',
'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"
=== "Code"
```javascript
var trial = {
type: 'instructions',
type: jsPsychInstructions,
pages: [
'Welcome to the experiment. Click next to begin.',
'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"
=== "Code"
```javascript
var trial = {
type: 'instructions',
type: jsPsychInstructions,
pages: [
'Welcome to the experiment. Click next to begin.',
'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"
=== "Code"
```javascript
var maxdiff_page = {
type: 'maxdiff',
type: jsPsychMaxdiff,
alternatives: ['apple', 'orange', 'pear', 'banana'],
labels: ['Most Preferred', 'Least Preferred'],
preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>'

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"
=== "Code"
```javascript
var preload = {
type: 'preload',
type: jsPsychPreload,
auto_preload: true
}
var trial_1 = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_1.jpg',
choices: ['Next']
}
var trial_2 = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_2.jpg',
choices: ['Next']
}
var trial_3 = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_3.jpg',
choices: ['Next']
}
@ -78,14 +79,15 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
???+ example "Manually preloading an image"
=== "Code"
```javascript
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/sad_face_1.jpg']
}
var trial_1 = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: `
<p>Study this face</p>
<img src="img/sad_face_1.jpg"></img>
@ -104,23 +106,24 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
???+ example "Loading files in batches"
=== "Code"
```javascript
var jsPsych = initJsPsych();
var trial_1 = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_1.jpg',
choices: ['Next']
}
var trial_2 = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_2.jpg',
choices: ['Next']
}
var trial_3 = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/happy_face_3.jpg',
choices: ['Next']
}
@ -130,19 +133,19 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
}
var trial_4 = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/sad_face_1.jpg',
choices: ['Next']
}
var trial_5 = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/sad_face_2.jpg',
choices: ['Next']
}
var trial_6 = {
type: 'image-button-response',
type: jsPsychImageButtonResponse,
stimulus: 'img/sad_face_3.jpg',
choices: ['Next']
}
@ -152,12 +155,12 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da
}
var preload_block_1 = {
type: 'preload',
type: jsPsychPreload,
trials: [block_1]
}
var preload_block_2 = {
type: 'preload',
type: jsPsychPreload,
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"
=== "Code"
```javascript
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/bad_file_path.png'],
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"
=== "Code"
```javascript
var trial = {
type: "rdk",
type: jsPsychRdk,
coherent_direction: 0,
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"
=== "Code"
```javascript
var trial = {
type: "rdk",
type: jsPsychRdk,
post_trial_gap: 0,
number_of_dots: 200,
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"
=== "Code"
```javascript
var trial = {
type: "rdk",
type: jsPsychRdk,
number_of_apertures: 3, //This needs to be set if more than one aperture
trial_duration: 10000,
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"
=== "Code"
```javascript
var sample_function = function(param){
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 = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
'<div style="display: block; position: absolute; top: '+(150 - 210/2)+'px; left:'+(150 - 210/2)+'px; background-color: #000000; '+
'width: 210px; height: 210px;"></div></div>',
@ -52,11 +53,12 @@ rt | numeric | The length of time, in milliseconds, that the trial lasted.
}
var reconstruction = {
type: 'reconstruction',
type: jsPsychReconstruction,
stim_function: sample_function,
starting_value: 0.5,
}
```
=== "Demo"
<div style="text-align:center;">
<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."
=== "Code"
```javascript
var inputs = {
type: 'resize',
type: jsPsychResize,
item_width: 3 + 3/8,
item_height: 2 + 1/8,
prompt: "<p>Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen.</p>",

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"
=== "Code"
```javascript
var trial = {
type: 'same-different-html',
type: jsPsychSameDifferentHtml,
stimuli: [
'<p style="font-size:30px;">Climbing</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"
=== "Code"
```javascript
var trial = {
type: 'same-different-image',
type: jsPsychSameDifferentImage,
stimuli: [
'img/happy_face_1.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"
=== "Code"
```javascript
var grid = [
[1,1,1,1]
]
var trial_1 = {
type: 'serial-reaction-time-mouse',
type: jsPsychSerialReactionTimeMouse,
grid: grid,
target: [0,0]
}
var trial_2 = {
type: 'serial-reaction-time-mouse',
type: jsPsychSerialReactionTimeMouse,
grid: grid,
target: [0,1]
}
var trial_3 = {
type: 'serial-reaction-time-mouse',
type: jsPsychSerialReactionTimeMouse,
grid: grid,
target: [0,2]
}
var trial_4 = {
type: 'serial-reaction-time-mouse',
type: jsPsychSerialReactionTimeMouse,
grid: grid,
target: [0,3]
}
@ -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"
=== "Code"
```javascript
var grid = [
[1,0,1],
@ -79,25 +81,25 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
]
var trial_1 = {
type: 'serial-reaction-time-mouse',
type: jsPsychSerialReactionTimeMouse,
grid: grid,
target: [0,0],
target_color: '#006738'
}
var trial_2 = {
type: 'serial-reaction-time-mouse',
type: jsPsychSerialReactionTimeMouse,
grid: grid,
target: [0,2],
target_color: '#F78F1E'
}
var trial_3 = {
type: 'serial-reaction-time-mouse',
type: jsPsychSerialReactionTimeMouse,
grid: grid,
target: [2,2],
target_color: '#13B24B'
}
var trial_4 = {
type: 'serial-reaction-time-mouse',
type: jsPsychSerialReactionTimeMouse,
grid: grid,
target: [2,0],
target_color: '#E74921'

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"
=== "Code"
```javascript
var instructions = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: '<p>Use the S, F, H, and K keys to respond.</p>',
choices: ['Continue']
}
@ -53,25 +54,25 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
]
var trial_1 = {
type: 'serial-reaction-time',
type: jsPsychSerialReactionTime,
grid: grid,
choices: response_map,
target: [0,0]
}
var trial_2 = {
type: 'serial-reaction-time',
type: jsPsychSerialReactionTime,
grid: grid,
choices: response_map,
target: [0,1]
}
var trial_3 = {
type: 'serial-reaction-time',
type: jsPsychSerialReactionTime,
grid: grid,
choices: response_map,
target: [0,2]
}
var trial_4 = {
type: 'serial-reaction-time',
type: jsPsychSerialReactionTime,
grid: grid,
choices: response_map,
target: [0,3]
@ -87,9 +88,10 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
???+ example "2x2 grid with feedback"
=== "Code"
```javascript
var instructions = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: '<p>Use the R, I, V, and M keys to respond.</p>',
choices: ['Continue']
}
@ -105,7 +107,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
]
var trial_1 = {
type: 'serial-reaction-time',
type: jsPsychSerialReactionTime,
grid: grid,
choices: response_map,
target: [0,0],
@ -113,7 +115,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
feedback_duration: 500
}
var trial_2 = {
type: 'serial-reaction-time',
type: jsPsychSerialReactionTime,
grid: grid,
choices: response_map,
target: [0,1],
@ -121,7 +123,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
feedback_duration: 500
}
var trial_3 = {
type: 'serial-reaction-time',
type: jsPsychSerialReactionTime,
grid: grid,
choices: response_map,
target: [1,1],
@ -129,7 +131,7 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
feedback_duration: 500
}
var trial_4 = {
type: 'serial-reaction-time',
type: jsPsychSerialReactionTime,
grid: grid,
choices: response_map,
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"
=== "Code"
```javascript
var trial = {
type: 'survey-html-form',
type: jsPsychSurveyHtmlForm,
preamble: '<p>How are you feeling <b>right now?</b></p>',
html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
};
@ -47,7 +48,7 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
=== "Code"
```javascript
var trial = {
type: 'survey-html-form',
type: jsPsychSurveyHtmlForm,
preamble: '<p>What is your favorite bird?</p>',
html: '<p>My favorite bird is <input type="text" id="test-resp-box" name="response" size="10" /></p>',
autofocus: 'test-resp-box'

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"
=== "Code"
```javascript
var trial = {
type: 'survey-likert',
type: jsPsychSurveyLikert,
questions: [
{
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"
=== "Code"
```javascript
var likert_scale = [
"Strongly Disagree",
@ -66,7 +68,7 @@ question_order | array | An array with the order of questions. For example `[2,0
];
var trial = {
type: 'survey-likert',
type: jsPsychSurveyLikert,
questions: [
{prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
{prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},

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"
=== "Code"
```javascript
var trial = {
type: 'survey-multi-choice',
type: jsPsychSurveyMultiChoice,
questions: [
{
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"
=== "Code"
```javascript
var trial = {
type: 'survey-multi-choice',
type: jsPsychSurveyMultiChoice,
questions: [
{
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"
=== "Code"
```javascript
var trial = {
type: 'survey-multi-select',
type: jsPsychSurveyMultiSelect,
questions: [
{
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"
=== "Code"
```javascript
var trial = {
type: 'survey-text',
type: jsPsychSurveyText,
questions: [
{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"
=== "Code"
```javascript
var trial = {
type: 'survey-text',
type: jsPsychSurveyText,
questions: [
{prompt: 'What is your date of birth?', placeholder: 'mm/dd/yyyy', required: true},
{prompt: 'What country do you currently live in?'}
@ -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"
=== "Code"
```javascript
var trial = {
type: 'survey-text',
type: jsPsychSurveyText,
questions: [
{prompt: 'What did you eat for breakfast?', name: 'Breakfast'},
{prompt: 'What did you eat for lunch?', name: 'Lunch'}
@ -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"
=== "Code"
```javascript
var trial = {
type: 'survey-text',
type: jsPsychSurveyText,
preamble: `<img src="img/navarro_burst_03.jpg" style="width:400px;"></img>`,
questions: [
{prompt: 'Describe your reaction to the image above', rows: 5}

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"
=== "Code"
```javascript
var trial = {
type: 'video-button-response',
type: jsPsychVideoButtonResponse,
stimulus: [
'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"
=== "Code"
```javascript
var trial = {
type: 'video-keyboard-response',
type: jsPsychVideoKeyboardResponse,
stimulus: [
'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"
=== "Code"
```javascript
var trial = {
type: 'video-slider-response',
type: jsPsychVideoSliderResponse,
stimulus: [
'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"
=== "Code"
```javascript
var trial = {
type: 'virtual-chinrest',
type: jsPsychVirtualChinrest,
blindspot_reps: 3,
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"
=== "Code"
```javascript
var trial = {
type: 'virtual-chinrest',
type: jsPsychVirtualChinrest,
blindspot_reps: 3,
resize_units: "cm",
pixels_per_unit: 50
};
var resized_stimulus = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: `
<p>If the measurements were done correctly, the square below should be 10 cm x 10 cm.</p>
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
@ -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"
=== "Code"
```javascript
var trial = {
type: 'virtual-chinrest',
type: jsPsychVirtualChinrest,
blindspot_reps: 3,
resize_units: "deg",
pixels_per_unit: 50
};
var resized_stimulus = {
type: 'html-button-response',
type: jsPsychHtmlButtonResponse,
stimulus: `
<p>If the measurements were done correctly, the square below should take up about 10 degrees of visual angle.</p>
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>

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

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

@ -147,7 +147,7 @@ var after_response = function(info) {
```javascript
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<<<<<',
choices: ['f','j'],
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
var audio_trial = {
type: 'audio-keyboard-response'
type: jsPsychAudioKeyboardResponse
stimulus: 'file.mp3'
}
var image_trial = {
type: 'image-keyboard-response'
type: jsPsychImageKeyboardResponse
stimulus: 'file.png'
}
var video_trial = {
type: 'video-keyboard-response'
type: jsPsychVideoKeyboardResponse
stimulus: 'file.mp4'
}

20
docs/reference/jspsych.md
View File

@ -91,7 +91,7 @@ Adds the timeline to the end of the experiment.
```javascript
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'This is a new trial.'
}
@ -146,7 +146,7 @@ for (var i = 0; i < images.length; i++) {
}
var block = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
choices: ['y', 'n'],
prompt: '<p>Press "y" to Continue. Press "n" to end this node of the experiment.</p>',
on_finish: function(data) {
@ -158,7 +158,7 @@ var block = {
}
var after_block = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<p>The next node</p>'
}
@ -192,7 +192,7 @@ Ends the experiment, skipping all remaining trials. If the `on_finish` event han
```javascript
var trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'image1.jpg',
choices: ['y', 'n']
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
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Just a demo',
on_finish: function(data){
// 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
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Press p to take a 30 second break. Otherwise, press c to continue immediately.',
choices: ['p','c'],
on_finish: function(data){
@ -575,7 +575,7 @@ Resumes the experiment after a call to `jsPsych.pauseExperiment()`. If the post
```javascript
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: 'Press p to take a 30 second break. Otherwise, press c to continue immediately.',
choices: ['p','c'],
on_finish: function(data){
@ -675,7 +675,7 @@ Either a function that returns the value of the timeline variable, or the value
```javascript
var trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('image')
}
@ -694,7 +694,7 @@ var procedure = {
```javascript
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: function(){
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
var trial = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: function(){
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 = [];
```
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
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
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 */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
@ -108,7 +108,7 @@ The trial definition looks like this:
```javascript
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -163,14 +163,14 @@ timeline.push(instructions);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
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
var blue_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/blue.png',
choices: ['f', 'j']
};
var orange_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/orange.png',
choices: ['f', 'j']
}
@ -255,14 +255,14 @@ timeline.push(blue_trial, orange_trial);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -283,13 +283,13 @@ timeline.push(blue_trial, orange_trial);
/* test trials */
var blue_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/blue.png',
choices: ['f', 'j']
};
var orange_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/orange.png',
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
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png']
}
```
@ -362,21 +362,21 @@ timeline.push(preload);
/* preload images */
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png']
}
timeline.push(preload);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -397,13 +397,13 @@ timeline.push(preload);
/* test trials */
var blue_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/blue.png',
choices: ['f', 'j']
};
var orange_trial = {
type: 'image-keyboard-response',
type: jsPsychImageKeyboardResponse,
stimulus: 'img/orange.png',
choices: ['f', 'j']
}
@ -436,18 +436,18 @@ Instead of just showing the blue and orange circles, let's also set up the exper
```javascript
var fixation = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
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
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j']
}
@ -494,21 +494,21 @@ What happens when the experiment reaches the test procedure? jsPsych will run th
/* preload images */
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png']
}
timeline.push(preload);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
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 = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
trial_duration: 1000,
}
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j']
}
@ -607,21 +607,21 @@ var test_procedure = {
/* preload images */
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png']
}
timeline.push(preload);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -647,14 +647,14 @@ var test_procedure = {
];
var fixation = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
trial_duration: 1000,
}
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j']
}
@ -683,7 +683,7 @@ To do that here, we'll use one of the built-in randomization methods in [jsPsych
```javascript
var fixation = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
trial_duration: function(){
@ -718,21 +718,21 @@ In the code above, we replaced the `trial_duration: 1000` parameter in `fixation
/* preload images */
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png']
}
timeline.push(preload);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
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 = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
trial_duration: function(){
@ -767,7 +767,7 @@ In the code above, we replaced the `trial_duration: 1000` parameter in `fixation
}
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j']
}
@ -830,21 +830,21 @@ var jsPsych = initJsPsych({
/* preload images */
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png']
}
timeline.push(preload);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -870,7 +870,7 @@ var jsPsych = initJsPsych({
];
var fixation = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
trial_duration: function(){
@ -879,7 +879,7 @@ var jsPsych = initJsPsych({
}
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j']
}
@ -908,7 +908,7 @@ When might you use this feature? In this experiment, it would be nice to tag eac
```javascript
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'],
data: {
@ -932,7 +932,7 @@ Now we can use `timelineVariable()` in the `data` parameter of the `test` trial.
```javascript
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'],
data: {
@ -946,7 +946,7 @@ Another kind of tagging that would be useful is to mark each fixation trial as s
```js
var fixation = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
trial_duration: function(){
@ -986,21 +986,21 @@ var fixation = {
/* preload images */
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png']
}
timeline.push(preload);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
of the screen.</p><p>If the circle is <strong>blue</strong>,
@ -1026,7 +1026,7 @@ var fixation = {
];
var fixation = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
trial_duration: function(){
@ -1038,7 +1038,7 @@ var fixation = {
}
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'],
data: {
@ -1075,7 +1075,7 @@ For this example, we'll calculate whether the subject responded correctly, and a
```javascript
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'],
data: {
@ -1118,21 +1118,21 @@ The `data.response` value is a string representation of the key the subject pres
/* preload images */
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png']
}
timeline.push(preload);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
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 = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
trial_duration: function(){
@ -1170,7 +1170,7 @@ The `data.response` value is a string representation of the key the subject pres
}
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'],
data: {
@ -1209,7 +1209,7 @@ Here's what the code looks like, and a description follows below.
```js
var debrief_block = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: function() {
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 */
var preload = {
type: 'preload',
type: jsPsychPreload,
images: ['img/blue.png', 'img/orange.png']
}
timeline.push(preload);
/* define welcome message trial */
var welcome = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: `
<p>In this experiment, a circle will appear in the center
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 = {
type: 'html-keyboard-response',
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: jsPsych.NO_KEYS,
trial_duration: function(){
@ -1317,7 +1317,7 @@ This code is available in the `/examples` folder in the jsPsych release download
}
var test = {
type: "image-keyboard-response",
type: jsPsychImageKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'],
data: {
@ -1340,7 +1340,7 @@ This code is available in the `/examples` folder in the jsPsych release download
/* define debrief */
var debrief_block = {
type: "html-keyboard-response",
type: jsPsychHtmlKeyboardResponse,
stimulus: function() {
var trials = jsPsych.data.get().filter({task: 'response'});