Enter the code you were given:
33 | 34 | 35 | 36 | 49 | ``` 50 | 51 | --- 52 | 53 | ## jsPsych.turk.turkInfo 54 | 55 | ``` 56 | jsPsych.turk.turkInfo() 57 | ``` 58 | 59 | ### Parameters 60 | 61 | None. 62 | 63 | ### Return value 64 | 65 | Returns an object with six properties: 66 | 67 | * `.assignmentId` contains the assignment ID string of the HIT. 68 | * `.hitId` contains the HIT ID. 69 | * `.workerId` contains the worker ID of the worker completing the HIT. 70 | * `.turkSubmitTo` contains the URL for submitting the HIT. This parameter is used in the `jsPsych.turk.submitToTurk` method, and is probably not useful outside of that context. 71 | * `.previewMode` is a boolean value indicating whether or not the worker has accepted the HIT yet. If the page is viewed inside Mechancial Turk and the worker has not clicked 'Accept HIT' then this will be true. If the page is viewed outside Mechanical Turk or the worker has acccepted the HIT, then it will be false. 72 | * `.outsideTurk` is a boolean value indicating if the page is being viewed within Mechanical Turk, or if it is being viewed from another source (e.g. someone directly going to the page URL instead of going through mturk). 73 | 74 | ### Description 75 | 76 | This method returns basic information about the current Mechanical Turk session, including the worker ID, assignment ID, and HIT ID. 77 | 78 | ### Example 79 | 80 | ```javascript 81 | 82 | var turkInfo = jsPsych.turk.turkInfo(); 83 | 84 | alert('Worker ID is: ' + turkInfo.workerId); 85 | 86 | alert('Assignment ID is: ' + turkInfo.assignmentId); 87 | 88 | alert('HIT ID is: ' + turkInfo.hitId); 89 | 90 | // true if the page is viewed within Mechanical Turk, 91 | // but worker has not accepted the HIT yet. 92 | // false if the page is viewed outside Mechanical Turk, 93 | // OR the worker has accepted the HIT. 94 | alert('Preview mode? ' + turkInfo.previewMode); 95 | 96 | // true if the page is viewed outside mechanical turk, 97 | // false otherwise. 98 | alert('Outside turk? ' + turkInfo.outsideTurk); 99 | ``` 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/core_library/overview.md: -------------------------------------------------------------------------------- 1 | # The jsPsych core library 2 | 3 | Every jsPsych experiment utilizes the core library (contained in the `jspsych.js` file). The core library is the glue that holds all of the various plugins together. There are also several modules that are contained in the core library for tasks that are common to many different experiments. These modules are available whenever the `jspsych.js` file is loaded. 4 | 5 | ## Core library API 6 | 7 | ### [Core](jspsych-core.md) 8 | 9 | * [jsPsych.currentChunkID](jspsych-core.md#jspsychcurrentchunkID) 10 | * [jsPsych.currentTrial](jspsych-core.md#jspsychcurrenttrial) 11 | * [jsPsych.finishTrial](jspsych-core.md#jspsychfinishtrial) 12 | * [jsPsych.getDisplayElement](jspsych-core.md#jspsychgetdisplayelement) 13 | * [jsPsych.init](jspsych-core.md#jspsychinit) 14 | * [jsPsych.initSettings](jspsych-core.md#jspsychinitSettings) 15 | * [jsPsych.preloadImages](jspsych-core.md#jspsychpreloadimages) 16 | * [jsPsych.progress](jspsych-core.md#jspsychprogress) 17 | * [jsPsych.startTime](jspsych-core.md#jspsychstarttime) 18 | * [jsPsych.totalTime](jspsych-core.md#jspsychtotaltime) 19 | 20 | ### [Data module](jspsych-data.md) 21 | 22 | * [jsPsych.data.dataAsCSV](jspsych-data.md#jspsychdatadataascsv) 23 | * [jsPsych.data.displayData](jspsych-data.md#jspsychdatadisplaydata) 24 | * [jsPsych.data.getData](jspsych-data.md#jspsychdatagetdata) 25 | * [jsPsych.data.getLastChunkData](jspsych-data.md#jspsychdatagetlastchunkdata) 26 | * [jsPsych.data.getLastTrialData](jspsych-data.md#jspsychdatagetlasttrialdata) 27 | * [jsPsych.data.getTrialsOfType](jspsych-data.md#jspsychdatagettrialsoftype) 28 | * [jsPsych.data.getTrialsFromChunk](jspsych-data.md#jspsychdatagettrialsfromchunk) 29 | * [jsPsych.data.localSave](jspsych-data.md#jspsychdatalocalsave) 30 | * [jsPsych.data.write](jspsych-data.md#jspsychdatawrite) 31 | 32 | ### [Turk module](jspsych-turk.md) 33 | 34 | * [jsPsych.turk.submitToTurk](jspsych-turk.md#jspsychturksubmittoturk) 35 | * [jsPsych.turk.turkInfo](jspsych-turk.md#jspsychturkturkinfo) 36 | 37 | ### [Randomization module](jspsych-randomization.md) 38 | 39 | * [jsPsych.randomization.factorial](jspsych-randomization.md#jspsychrandomizationfactorial) 40 | * [jsPsych.randomization.repeat](jspsych-randomization.md#jspsychrandomizationrepeat) 41 | 42 | ### [PluginAPI module](jspsych-pluginAPI.md) 43 | 44 | * [jsPsych.pluginAPI.cancelAllKeyboardResponses](jspsych-pluginAPI.md#jspsychpluginapicancelallkeyboardresponses) 45 | * [jsPsych.pluginAPI.cancelKeyboardResponse](jspsych-pluginAPI.md#jspsychpluginapicancelkeyboardresponse) 46 | * [jsPsych.pluginAPI.enforceArray](jspsych-pluginAPI.md#jspsychpluginapienforcearray) 47 | * [jsPsych.pluginAPI.getKeyboardResponse](jspsych-pluginAPI.md#jspsychpluginapigetkeyboardresponse) 48 | * [jsPsych.pluginAPI.normalizeTrialVariables](jspsych-pluginAPI.md#jspsychpluginapinormalizetrialvariables) 49 | 50 | 51 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/css/extra.css: -------------------------------------------------------------------------------- 1 | h1#jspsych { text-align: center; font-size: 72px; } 2 | 3 | td, th { 4 | padding: 0.5em; 5 | } -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/features/callbacks.md: -------------------------------------------------------------------------------- 1 | # Event-related callback functions 2 | 3 | jsPsych offers the ability to call arbitrary functions in response to certain events occuring, like the end of a trial or when new data is saved. This page summarizes the different opportunities for callback functions and how to specify them. 4 | 5 | --- 6 | 7 | ## on_data_update 8 | 9 | The `on_data_update` callback can be declared in the `jsPsych.init` method. The callback triggers whenever data is generated by a plugin (specifically, whenever the `jsPsych.data.write` method is called). The function will be passed a single argument, which contains the data that was written. 10 | 11 | #### Sample use 12 | ```javascript 13 | jsPsych.init({ 14 | experiment_structure: exp, 15 | on_data_update: function(data) { 16 | console.log('Just added new data. The contents of the data are: '+JSON.stringify(data)); 17 | } 18 | }); 19 | ``` 20 | --- 21 | 22 | ## on_finish (trial) 23 | 24 | The `on_finish` callback can be added to any trial in the declaration of the trial block. The callback will trigger whenever a trial in that block ends. No parameters will be passed into the callback function. 25 | 26 | #### Sample use 27 | ```javascript 28 | var block = { 29 | type: 'single-stim', 30 | stimuli: ['imgA.png', 'imgB.png'], 31 | on_finish: function() { 32 | console.log('The trial just ended.'); 33 | } 34 | }; 35 | ``` 36 | --- 37 | 38 | ## on_finish (experiment) 39 | 40 | The `on_finish` callback can be declared in the `jsPsych.init` method. The callback will trigger once all trials in the experiment have been run. The method will be passed a single argument, containing all of the data generated in the experiment. 41 | 42 | #### Sample use 43 | ```javascript 44 | jsPsych.init({ 45 | experiment_structure: exp, 46 | on_finish: function(data) { 47 | console.log('The experiment is over! Here is all the data: '+JSON.stringify(data)); 48 | } 49 | }); 50 | ``` 51 | 52 | --- 53 | 54 | ## on_trial_finish 55 | 56 | The `on_trial_finish` callback can be declared in the `jsPsych.init` method. The callback will trigger at the end of every trial in the experiment. If you want a callback to trigger only for the end of certain trials, use the [`on_finish`](#onfinishtrial) callback. There are no parameters passed to the callback function. 57 | 58 | #### Sample use 59 | ```javascript 60 | jsPsych.init({ 61 | experiment_structure: exp, 62 | on_trial_finish: function() { 63 | console.log('A trial just ended.'); 64 | } 65 | }); 66 | ``` 67 | --- 68 | 69 | ## on_trial_start 70 | 71 | The `on_trial_start` callback can be declared in the `jsPsych.init` method. The callback will trigger at the start of every trial in the experiment. There are no parameters passed to the callback function. 72 | 73 | #### Sample use 74 | ```javascript 75 | jsPsych.init({ 76 | experiment_structure: exp, 77 | on_trial_start: function() { 78 | console.log('A trial just started.'); 79 | } 80 | }); 81 | ``` 82 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/features/chunks-blocks-trials.md: -------------------------------------------------------------------------------- 1 | # Creating an Experiment: Chunks, Blocks, & Trials 2 | 3 | To create an experiment in jsPsych, you'll need to define the experiment structure. jsPsych experiments consist of three different structures: chunks, blocks, & trials. This page goes into detail about each kind of structure, and the features related to each. 4 | 5 | ## The timeline analogy 6 | 7 | A useful analogy for understanding chunks, blocks, & trials is a timeline. We can think of an experiment as being drawn on a timeline. The simplest version of the timeline would mark the occurrence of each **trial** in the experiment: 8 | 9 | Sometimes, we might repeat the same kind of trial over and over again, just changing what stimulus is shown or with some other minor modification. jsPsych can group these trials together into a **block**, making it faster to define the structure of the experiment. With blocks, a timeline might look something like this: 10 | 11 | But, what if we wanted to group trials together that weren't the same kind (i.e. didn't use the same plugin) but shared some other relationship? This is what a **chunk** does. Chunks are simply groups of blocks, but conceptually they are treated as if they are a whole separate timeline in jsPsych. This allows for more complex experiment designs, such as loops and conditional *if* statemens. With chunks, timelines can get very complicated if needed: 12 | 13 | ## Defining an experiment 14 | 15 | The `jsPsych.init` method requires that an experiment definition is passed in as the value of the `experiment_structure` parameter. 16 | 17 | ```javascript 18 | jsPsych.init({ 19 | experiment_structure: exp 20 | }) 21 | ``` 22 | 23 | The `exp` variable above needs to be an array, with each element of the array being either a chunk or a block. 24 | 25 | To create a block, define a JavaScript object with a `type` property set to the particular plugin that the block uses. For example, to create a block using the `jspsych-single-stim` plugin, the corresponding object would look something like: 26 | 27 | ```javascript 28 | var single_stim_block = { 29 | type: 'single-stim', 30 | stimulus: ['img/happy_face.png', 'img/sad_face.png'] 31 | } 32 | 33 | jsPsych.init({ 34 | experiment_structure: [single_stim_block] 35 | }) 36 | ``` 37 | 38 | The above block contains two trials. The first trial will show the image file `img/happy_face.png` and the second will show `img/sad_face.png`. Different plugins have different methods for specifying multiple trials within a block. Check the documentation of the plugin that you are using for more details about how that plugin works. 39 | 40 | To show instructions before the faces appear, define another block and add it to the `experiment_structure` array: 41 | 42 | ```javascript 43 | var instructions_block = { 44 | type: 'text', 45 | text: 'Press H if the face is happy. Press S if the face is sad.' 46 | } 47 | 48 | var single_stim_block = { 49 | type: 'single-stim', 50 | stimulus: ['img/happy_face.png', 'img/sad_face.png'] 51 | } 52 | 53 | jsPsych.init({ 54 | experiment_structure: [instructions_block, single_stim_block] 55 | }) 56 | ``` 57 | 58 | Let's imagine that we want subjects to keep viewing the faces until they get the correct response for each one. We can use a chunk to loop over the trials. To create a chunk, create an object with a `chunk_type` property set to a [valid chunk type]() and a `timeline` property containing an array of chunks and blocks within the chunk. Some chunk types will require other properties to be set as well: 59 | 60 | ```javascript 61 | var instructions_block = { 62 | type: 'text', 63 | text: 'Press H if the face is happy. Press S if the face is sad.' 64 | } 65 | 66 | var single_stim_block = { 67 | type: 'single-stim', 68 | stimulus: ['img/happy_face.png', 'img/sad_face.png'] 69 | } 70 | 71 | var looping_chunk = { 72 | chunk_type: 'while', 73 | timeline: [single_stim_block], 74 | continue_function: function(data){ 75 | // code here to check if they got both answers correct. 76 | // this is a bit too complicated for a simple tutorial 77 | // about chunks and blocks, so imagine that the variable 78 | // correct is true is they got both answers right, and 79 | // false otherwise. 80 | 81 | if(correct) { return false; } 82 | else { return true; } 83 | } 84 | } 85 | 86 | jsPsych.init({ 87 | experiment_structure: [instructions_block, looping_chunk] 88 | }) 89 | ``` 90 | 91 | ## Getting formal about definitions 92 | 93 | What **exactly** are chunks, blocks, and trials? 94 | 95 | A **trial** defines the parameters that will be used for a single execution of a plugin's `plugin.trial` method. Since all experiments are defined in terms of plugins, this is the atomic unit of a jsPsych experiment. 96 | 97 | A **block** is a collection of trials in which each trial uses the same plugin. Since it is very common in behavioral research to have multiple trials of the same type in a row with different stimuli, jsPsych experiments are defined at the block level by default. When creating the `experiment_structure` array for the `jsPsych.init` method, each element of the array can be either a block or a chunk. 98 | 99 | A **chunk** is a collection of chunks or blocks that will be run in order. There are a few different kinds of chunks, which can be used to create experiments that loop or experiments that change which parts execute based on what the subject has done so far. 100 | 101 | All three types are defined as JavaScript objects within the jsPsych code. 102 | 103 | ## Chunk types 104 | 105 | There are different types of chunks; each defines a different way of executing the chunk's timeline. To specify the chunk type, set the `chunk_type` property of the chunk definition object. 106 | 107 | ```javascript 108 | var chunk = { 109 | chunk_type: 'linear', 110 | timeline: [block1, block2] 111 | } 112 | ``` 113 | 114 | ### Linear 115 | 116 | A linear chunk executes the timeline once and then is complete. 117 | 118 | If the `experiment_structure` property in `jsPsych.init` contains blocks, they will be converted to linear chunks internally. 119 | 120 | ### While 121 | 122 | A while chunk can be used for looping. It executes the timeline and then calls the `continue_function` to see if it should execute the timeline again. If the `continue_function` returns `true`, then the chunk executes again. If the function returns `false`, the chunk is complete. 123 | 124 | The `continue_function` will be passed the data generated by the most recent execution of the chunk as the first parameter. The data will be an array; each item in the array will be the data for a single trial. 125 | 126 | ```javascript 127 | var while_chunk = { 128 | chunk_type: 'while', 129 | timeline: [block1, block2], 130 | continue_function: function(data){ 131 | // check to see if the average RT was under 1s 132 | var sum_rt = 0; 133 | for(var i=0; i < data.length; i++){ 134 | sum_rt += data.rt; 135 | } 136 | var average_rt = sum_rt / data.length; 137 | if(average_rt < 1000){ 138 | // end the loop 139 | return false; 140 | } else { 141 | // keep going until they are faster! 142 | return true; 143 | } 144 | } 145 | } 146 | ``` 147 | 148 | ### If 149 | 150 | An if chunk will only execute if some condition is met. 151 | 152 | 153 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/features/functions-as-parameters.md: -------------------------------------------------------------------------------- 1 | # Using Functions as Parameters for Plugins 2 | 3 | Most plugins allow parameters to be functions. In a typical declaration of a jsPsych block, trial parameters have to be known at the start of the experiment. This makes it impossible to alter the content of the trial based on the outcome of previous trials. When functions are used as parameters for a block of trials, the function is evaluated at the start of each trial, and the return value of the function is used as the parameter. This enables dynamic updating of the parameter based on data that a subject has generated. 4 | 5 | Here is a sketch of how this functionality could be used to display a score to subjects that depends on their overall accuracy on the task. 6 | 7 | ```javascript 8 | 9 | // this variable contains a score based on accuracy. 10 | // you can update the score variable in a number of ways. 11 | // one option would be to use the on_trial_finish callback 12 | // function of the core library to adjust the score every 13 | // time a trial of the appropriate kind occurs. 14 | var score = 0; 15 | 16 | var xab_block = { 17 | type: 'xab', 18 | stimuli: xab_stimuli, 19 | prompt: function() { 20 | return "Your current score is "+score+"
"; 21 | } 22 | } 23 | ``` -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/features/image-preloading.md: -------------------------------------------------------------------------------- 1 | # Image Preloading 2 | 3 | If an experiment uses images as stimuli, it is important to preload the image files before running the experiment. Preloading images means that the subject's browser will download all of the image files and store them in memory on the subject's computer. This is important because loading an image file is much faster if it is already in memory on the subject's computer. Without preloading, there will be noticeable delays in the display of images, which will affect any timing measurements (such as how long the image is displayed, or a subject's response time since first viewing an image). 4 | 5 | jsPsych has an image preloading function in the core library. For full documentation, see the [API reference page](../core_library/jspsych-core.md#jspsychpreloadimages). The function will load all of the images listed in an array, and then call a function when the loading is complete. 6 | 7 | ```javascript 8 | // an array of paths to images that need to be loaded 9 | var images = ['img/file1.png', 'img/file2.png', 'img/file3.png']; 10 | 11 | jsPsych.preloadImages(images, function(){ startExperiment(); }); 12 | 13 | function startExperiment(){ 14 | jsPsych.init({ 15 | experiment_structure: exp 16 | }); 17 | } 18 | ``` -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/features/mturk.md: -------------------------------------------------------------------------------- 1 | # Integrating with Mechanical Turk 2 | 3 | A common use of jsPsych is to build an online experiment and find subjects using [Mechanical Turk](http://www.mturk.com/). Once an experiment is available through a web server and data is being [saved on the server](), connecting the experiment with Mechanical Turk takes only a few additional steps. jsPsych has some built-in functionality to assist with this process. 4 | 5 | ## The jsPsych.turk module 6 | 7 | The [jsPsych.turk](../core_library/jspsych-turk.md) module contains functions that are relevant for experiments running on Mechanical Turk. 8 | 9 | ## Creating an advertisement page 10 | 11 | When potential subjects view your experiment on Mechanical Turk, they will be able to see a single webpage before deciding whether or not to accept the HIT (start the experiment). This first page is often used as an advertisement for the experiment, similar to posting a flier in a department hallway. The important thing to remember about this page is that potential subjects will be able to interact with it even if they haven't accepted the HIT. Therefore, it can be useful to change the content of the page depending on whether the HIT has been accepted or not. This is relatively easy to do using jsPsych and jQuery: 12 | 13 | ```html 14 |Enter the code you were given:
61 | 62 | 63 | 64 | 71 | ``` 72 | 73 | When workers click the button, the contents of the `code` text field will be sent to Mechanical Turk, and you'll be able to view the subjects and the codes that they entered in the Mechanical Turk GUI. You can then approve or reject work using the Mechanical Turk website. 74 | 75 | ## Limitations 76 | 77 | jsPsych is not designed to communicate with the Mechanical Turk API in a comprehensive manner. If you are looking for software to help you post and manage HITs, then you may want to look at [PsiTurk](http://www.psiturk.org). jsPsych and PsiTurk complement each other nicely, and there is [an example of combining the two platforms](https://psiturk.org/ee/W4v3TPAsiD6FUVY8PDyajH) on PsiTurk's experiment exchange. 78 | 79 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/features/progress-bar.md: -------------------------------------------------------------------------------- 1 | # Automatic Progress Bar 2 | 3 | jsPsych can show a progress bar at the top of the experiment page indicating the subject's overall completion progress. The progress bar is rendered outside the jsPsych display element, and it requires the `jspsych.css` file to be loaded on the page. As of version 4.0, the progress bar looks like this: 4 | 5 |  6 | 7 | To show the progress bar, set the `show_progress_bar` option in `jsPsych.init` to `true`: 8 | 9 | ```javascript 10 | jsPsych.init({ 11 | experiment_structure: exp, 12 | show_progress_bar: true 13 | }); 14 | ``` 15 | 16 | The progress bar updates after every *top-level chunk* finishes executing. This avoids distracting updates in the middle of trials that are composed of multiple plugins, or confusing updates due to looping or conditional structures that may or may not execute depending on the actions of the subject. This also allows some flexibility for the programmer; by grouping the experiment into chunks in a deliberate manner, the timing of progress bar updates can be controlled. -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/features/randomization-repetition.md: -------------------------------------------------------------------------------- 1 | # Randomization & Repetition 2 | 3 | Experiments often involve presenting a set of trials in a random order. It also might be necessary to present a set of trials multiple times. jsPsych makes both of these tasks very easy to do. 4 | 5 | ## Randomizing the order of trials within a block 6 | 7 | To randomize the order of trials within a block, add the `randomize_order` property to the block definition with a value of `true`. This option works for all plugins. 8 | 9 | ```javascript 10 | var block = { 11 | type: 'single-stim', 12 | stimuli: ['img/happy_face.png', 'img/sad_face.png'], 13 | randomize_order: true 14 | } 15 | ``` 16 | In the above example, there would be two trials, one with a happy face and one with a sad face, and the order of presentation would be random. 17 | 18 | You can only specify the `randomize_order` option for blocks. It doesn't work for chunks. 19 | 20 | The randomization operation is performed immediately before the first trial in the block executes. This means that the order of trials is impossible to know until right before the first trial begins. It also means that the order will be re-randomized if the block is started multiple times (e.g. if the block appeas in a while chunk). 21 | 22 | ## Repeating a block of trials 23 | 24 | To repeat a block multiple times, add the `repetitions` property to the block with the value being the number of repetitions. This option works for all plugins. 25 | 26 | ```javascript 27 | var block = { 28 | type: 'single-stim', 29 | stimuli: ['img/happy_face.png', 'img/sad_face.png'], 30 | randomize_order: true, 31 | repetitions: 5 32 | } 33 | ``` 34 | 35 | In the above example, there are two trials in the block. Both trials will occur (in a random order), and then the block will repeat 4 more times. The randomized order only applies to each individual repetition, so each set of two trials will contain one happy face and one sad face. 36 | 37 | ## Generating random orders of parameter values 38 | 39 | The [jsPsych.randomization](../core_library/jspsych-randomization.md) module in the core library contains functions that assist with generating random orders of trial parameters. 40 | 41 | 42 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/features/summary.md: -------------------------------------------------------------------------------- 1 | # jsPsych 2 | 3 | ## Overview 4 | 5 | jsPsych is a JavaScript library for creating and running behavioral experiments in a web browser. The library provides a flexible framework for building a wide range of laboratory-like experiments that can be run online. 6 | 7 | jsPsych prvoides the *structure* for an experiment. It handles things like determining which trial to run next, storing data, and randomizing factors/order of presentation. It also provides a set of *plugins*, which are ready-made templates for simple experimental tasks like displaying instructions or displaying a stimulus and collecting a keyboard response. A full experiment created with jsPsych will be a collection of different plugins that define the different tasks that a subject will complete. 8 | 9 | To build an experiment with jsPsych, you'll specify the structure of the experiment using JavaScript code. You'll also need to provide the *content* that defines your experiment, such as the actual text that subjects see when they are shown instructions and the images that they will view. You can also specify a wide-range of parameters to control things like stimulus duration, which keyboard keys subjects are allowed to press, and so on. 10 | 11 | This page gives a broad overview of how jsPsych works. More detail is available on most of the topics on this page by using the navigation above, or by following the links within the documentation. 12 | 13 | ## Loading jsPsych 14 | 15 | To use jsPsych, you'll need to load a few JavaScript files in an HTML document. At a minimum, you'll be loading three files: the jQuery library, the main jsPsych.js library, and at least one jsPsych plugin. A bare-bones jsPsych-ready document (with the single-stim plugin loaded) will look something like the following: 16 | 17 | ```html 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ``` 29 | 30 | ## Creating an experiment 31 | 32 | To use jsPsych, you'll need to create a description of your experiment in JavaScript. This description is an array; each element of the array is a **block** or a **chunk**. Chunks and blocks are special objects in jsPsych. They define sets of trials that should be grouped together (learn more about [chunks and blocks]()). 33 | 34 | ```javascript 35 | // defining an empty array to contain the experiment description 36 | var experiment = []; 37 | ``` 38 | 39 | Blocks are created by defining a JavaScript object with a `type` property that corresponds to a particular [plugin](). The other properties of the block object will depend on which plugin is used. Each plugin has different options. 40 | 41 | The code below will create a block that contains two trials. The first trial will display the image file `img/happy_face.jpg` and the second trial will display the image file `img/sad_face.jpg`. 42 | 43 | ```javascript 44 | // create a block using the 'single-stim' plugin 45 | var block = { 46 | type: 'single-stim', 47 | stimuli: ['img/happy_face.jpg','img/sad_face.jpg'] 48 | }; 49 | ``` 50 | 51 | To add the block to the experiment description, we need to change the `experiment` array. There are several ways to do this in JavaScript, but we'll use the `.push()` function for generalizability. 52 | 53 | ```javascript 54 | // add the block to the experiment description 55 | experiment.push(block); 56 | ``` 57 | 58 | Once you have the experiment description defined, you can tell jsPsych to run the experiment by calling `jsPsych.init()` and passing your description as the value for the `experiment_structure` parameter: 59 | 60 | ```javascript 61 | jsPsych.init({ 62 | experiment_structure: experiment 63 | }) 64 | ``` 65 | 66 | For a more in-depth tutorial about creating an experiment, take a look at the [tutorials](). 67 | 68 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/img/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tuuleh/jsPsychBackendStart/1ae703b541767aeaf1d616ce70d36929bb06ecd3/jsPsych/docs/markdown_docs/img/blue.png -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/img/folder-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tuuleh/jsPsychBackendStart/1ae703b541767aeaf1d616ce70d36929bb06ecd3/jsPsych/docs/markdown_docs/img/folder-setup.png -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/img/folder-with-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tuuleh/jsPsychBackendStart/1ae703b541767aeaf1d616ce70d36929bb06ecd3/jsPsych/docs/markdown_docs/img/folder-with-html.png -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/img/githubreleases.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tuuleh/jsPsychBackendStart/1ae703b541767aeaf1d616ce70d36929bb06ecd3/jsPsych/docs/markdown_docs/img/githubreleases.jpg -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/img/orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tuuleh/jsPsychBackendStart/1ae703b541767aeaf1d616ce70d36929bb06ecd3/jsPsych/docs/markdown_docs/img/orange.png -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/img/palmer_stim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tuuleh/jsPsychBackendStart/1ae703b541767aeaf1d616ce70d36929bb06ecd3/jsPsych/docs/markdown_docs/img/palmer_stim.png -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/img/progress_bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tuuleh/jsPsychBackendStart/1ae703b541767aeaf1d616ce70d36929bb06ecd3/jsPsych/docs/markdown_docs/img/progress_bar.png -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/img/visual_search_example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tuuleh/jsPsychBackendStart/1ae703b541767aeaf1d616ce70d36929bb06ecd3/jsPsych/docs/markdown_docs/img/visual_search_example.jpg -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/index.md: -------------------------------------------------------------------------------- 1 | # jsPsych 2 | 3 | jsPsych is a JavaScript library for creating and running behavioral experiments in a web browser. The library provides a flexible framework for building a wide range of laboratory-like experiments that can be run online. 4 | 5 | jsPsych prvoides the *structure* for an experiment. It handles things like determining which trial to run next, storing data, and randomizing factors/order of presentation. It also provides a set of *plugins*, which are ready-made templates for simple experimental tasks like displaying instructions or displaying a stimulus and collecting a keyboard response. A full experiment created with jsPsych will be a collection of different plugins that define the different tasks that a subject will complete. 6 | 7 | To build an experiment with jsPsych, you'll specify the structure of the experiment using JavaScript code. You'll also need to provide the *content* that defines your experiment, such as the actual text that subjects see when they are shown instructions and the images that they will view. You can also specify a wide-range of parameters to control things like stimulus duration, which keyboard keys subjects are allowed to press, and so on. 8 | 9 | This page gives a broad overview of how jsPsych works. More detail is available on most of the topics on this page by using the navigation above, or by following the links within the documentation. 10 | 11 | ## Download jsPsych 12 | 13 | Download jsPsych v4.0.1 (zip) 14 | 15 | jsPsych is hosted at [GitHub](http://github.com/jodeleeuw/jsPsych). You can find all other jsPsych releases there. 16 | 17 | ## Loading jsPsych 18 | 19 | To use jsPsych, you'll need to load a few JavaScript files in an HTML document. At a minimum, you'll be loading three files: the jQuery library, the main jsPsych.js library, and at least one jsPsych plugin. A bare-bones jsPsych-ready document (with the single-stim plugin loaded) will look something like the following: 20 | 21 | ```html 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | ## Creating an experiment 35 | 36 | To use jsPsych, you'll need to create a description of your experiment in JavaScript. This description is an array; each element of the array is a **block** or a **chunk**. Chunks and blocks are special objects in jsPsych. They define sets of trials that should be grouped together (learn more about [chunks and blocks](features/chunks-blocks-trials.md)). 37 | 38 | ```javascript 39 | // defining an empty array to contain the experiment description 40 | var experiment = []; 41 | ``` 42 | 43 | Blocks are created by defining a JavaScript object with a `type` property that corresponds to a particular [plugin](plugins/overview.md). The other properties of the block object will depend on which plugin is used. Each plugin has different options. 44 | 45 | The code below will create a block that contains two trials. The first trial will display the image file `img/happy_face.jpg` and the second trial will display the image file `img/sad_face.jpg`. 46 | 47 | ```javascript 48 | // create a block using the 'single-stim' plugin 49 | var block = { 50 | type: 'single-stim', 51 | stimuli: ['img/happy_face.jpg','img/sad_face.jpg'] 52 | }; 53 | ``` 54 | 55 | To add the block to the experiment description, we need to change the `experiment` array. There are several ways to do this in JavaScript, but we'll use the `.push()` function for generalizability. 56 | 57 | ```javascript 58 | // add the block to the experiment description 59 | experiment.push(block); 60 | ``` 61 | 62 | Once you have the experiment description defined, you can tell jsPsych to run the experiment by calling `jsPsych.init()` and passing your description as the value for the `experiment_structure` parameter: 63 | 64 | ```javascript 65 | jsPsych.init({ 66 | experiment_structure: experiment 67 | }) 68 | ``` 69 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/js/analytics.js: -------------------------------------------------------------------------------- 1 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 2 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 3 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 4 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 5 | 6 | ga('create', 'UA-50563838-1', 'jspsych.org'); 7 | ga('send', 'pageview'); -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/js/extra.js: -------------------------------------------------------------------------------- 1 | $('table').addClass('table-striped'); -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/creating-a-plugin.md: -------------------------------------------------------------------------------- 1 | # Creating a new plugin -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-animation.md: -------------------------------------------------------------------------------- 1 | # jspsych-animation 2 | 3 | This plugin displays a sequence of images at a fixed frame rate. The sequence can be looped a specified number of times. The subject is free to respond at any point during the animation, and the time of the response is recorded. 4 | 5 | ## Parameters 6 | 7 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 8 | 9 | Parameter | Type | Default Value | Description 10 | ----------|------|---------------|------------ 11 | stimuli | array | *undefined* | Each element of the array is an array containing strings. The strings are paths to image files. Each array of strings specifies a single sequence, and each sequence will be its own trial. The length of this array determines the total number of trials. 12 | frame_time | numeric | 250 | How long to display each image (in milliseconds). 13 | frame_isi | numeric | 0 | If greater than 0, then a gap will be shown between each image in the sequence. This parameter specifies the length of the gap. 14 | sequence_reps | numeric | 1 | How many times to show the entire sequence. There will be no gap (other than the gap specified by `frame_isi`) between repetitions. 15 | choices | array | [ ] | This array contains the keys that the subject is allowed to press in order to respond to the stimulus. Keys can be specified as their [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) or as characters (e.g. `'a'`, `'q'`). The default value of an empty array means that all keys will be accepted as valid responses. 16 | prompt | string | "" | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g. which key to press). 17 | 18 | 19 | ## Data Generated 20 | 21 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 22 | 23 | Name | Type | Value 24 | -----|------|------ 25 | animation_sequence | JSON string | An array, encoded in JSON string format. Each element of the array is an object that represents a stimulus in the animation sequence. Each object has a `stimulus` property, which is the image that was displayed, and a `time` property, which is the time in ms, measured from when the sequence began, that the stimulus was displayed. 26 | responses | JSON string | An array, encoded in JSON format. Each element of the array is an object representing a response given by the subject. Each object has a `stimulus` property, indicating which image was displayed when the key was pressed, an `rt` property, indicating the time of the key press relative to the start of the animation, and a `key_press` property, indicating which key was pressed. 27 | 28 | ## Examples 29 | 30 | These examples show how to define a block using the animation plugin to achieve various goals. 31 | 32 | #### Displaying a single sequence multiple times 33 | 34 | ```javascript 35 | // declare variable to hold animation sequence 36 | var animation_sequence = ["img/face_1.jpg", "img/face_2.jpg", "img/face_3.jpg", "img/face_4.jpg", "img/face_3.jpg", "img/face_2.jpg"]; 37 | 38 | // create animation block for jspsych 39 | var animation_block = { 40 | type: 'animation', 41 | stimuli: [animation_sequence], 42 | sequence_reps: 3 43 | }; 44 | ``` 45 | 46 | #### Specifying two trials with different sequences 47 | 48 | ```javascript 49 | // declare variables to hold animation sequences 50 | var animation_sequence_1 = ["img/face_1.jpg", "img/face_2.jpg", "img/face_3.jpg", "img/face_4.jpg", "img/face_3.jpg", "img/face_2.jpg"]; 51 | var animation_sequence_2 = ["img/face_3.jpg", "img/face_2.jpg", "img/face_4.jpg", "img/face_1.jpg"]; 52 | 53 | // create animation block for jspsych 54 | var animation_block = { 55 | type: 'animation', 56 | stimuli: [animation_sequence_1, animation_sequence_2], 57 | sequence_reps: 3 58 | }; 59 | ``` -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-call-function.md: -------------------------------------------------------------------------------- 1 | # jspsych-call-function 2 | 3 | This plugin executes a specified function. This allows the experimenter to run arbitrary code at any point during the experiment. 4 | 5 | The function cannot take any arguments. If arguments are needed, then an anonymous function should be used to wrap the function call (see examples below). 6 | 7 | ## Parameters 8 | 9 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 10 | 11 | Parameter | Type | Default Value | Description 12 | ----------|------|---------------|------------ 13 | func | function | *undefined* | The function to call. 14 | 15 | 16 | ## Data Generated 17 | 18 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 19 | 20 | Name | Type | Value 21 | -----|------|------ 22 | value | any | The return value of the called function. 23 | 24 | ## Examples 25 | 26 | These examples show how to define a block using the single-stim plugin to achieve various goals. 27 | 28 | #### Calling a simple function 29 | 30 | ```javascript 31 | 32 | var myfunc = function() { 33 | return 'you called?'; 34 | } 35 | 36 | var block = { 37 | type: 'call-function', 38 | func: myfunc 39 | } 40 | ``` 41 | 42 | #### Using an anonymous function to pass variables 43 | 44 | ```javascript 45 | 46 | var myfunc = function(data){ 47 | // data contains all the experiment data so far, 48 | // so this function could implement code to write 49 | // the data to a database. 50 | } 51 | 52 | var block = { 53 | type: 'call-function', 54 | func: function(){ myfunc(jsPsych.data.getData())} 55 | } 56 | ``` 57 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-categorize-animation.md: -------------------------------------------------------------------------------- 1 | # jspsych-categorize-animation 2 | 3 | The categorize animation plugin shows a sequence of images at a specified frame rate. The subject responds by pressing a key. Feedback indicating the correctness of the response is given. 4 | 5 | ## Parameters 6 | 7 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 8 | 9 | Parameter | Type | Default Value | Description 10 | ----------|------|---------------|------------ 11 | stimuli | array | *undefined* | Each element of the array is an array containing strings. The strings are paths to image files. Each array of strings specifies a single sequence, and each sequence will be its own trial. The length of this array determines the total number of trials. 12 | key_answer | array | *undefined* | Each element of the array is a [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) indicating the correct response for the corresponding trial. The length of this array should match the `stimuli` array. 13 | choices | array | *undefined* | This array contains the keys that the subject is allowed to press in order to respond to the stimulus. Keys can be specified as their [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) or as characters (e.g. `'a'`, `'q'`). 14 | text_answer | array | "" | Array of strings representing a label that is associated with each correct answer. Used in conjunction with the `correct_text` and `incorrect_text` parameters. 15 | correct_text | string | "Correct." | String to show when the correct answer is given. Can contain HTML formatting. The special string `%ANS%` can be used within the string. If present, the plugin will put the `text_answer` for the trial in place of the %ANS% string (see example below). 16 | incorrect_text | string | "Wrong." | String to show when the wrong answer is given. Can contain HTML formatting. The special string `%ANS%` can be used within the string. If present, the plugin will put the `text_answer` for the trial in place of the %ANS% string (see example below). 17 | frame_time | numeric | 250 | How long to display each image (in milliseconds). 18 | sequence_reps | numeric | 1 | How many times to show the entire sequence. 19 | allow_response_before_complete | boolean | false | If true, the subject can respond before the animation sequence finishes. 20 | prompt | string | "" | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g. which key to press). 21 | timing_feedback_duration | numeric | 2000 | How long to show the feedback (milliseconds). 22 | 23 | 24 | ## Data Generated 25 | 26 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 27 | 28 | Name | Type | Value 29 | -----|------|------ 30 | stimulus | string | The first image in the animation sequence for this trial 31 | key_press | numeric | Indicates which key the subject pressed. The value is the [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) corresponding to the subject's response. 32 | rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response. 33 | correct | boolean | `true` if the subject got the correct answer, `false` otherwise. 34 | 35 | ## Examples 36 | 37 | These examples show how to define a block using the categorize-animation plugin to achieve various goals. 38 | 39 | #### Basic example 40 | 41 | ```javascript 42 | // declare variables to hold animation sequences 43 | var animation_sequence_1 = ["img/face_1.jpg", "img/face_2.jpg", "img/face_3.jpg", "img/face_4.jpg", "img/face_3.jpg", "img/face_2.jpg"]; 44 | var animation_sequence_2 = ["img/face_3.jpg", "img/face_2.jpg", "img/face_4.jpg", "img/face_1.jpg"]; 45 | 46 | // create animation block for jspsych 47 | var animation_block = { 48 | type: 'categorize-animation', 49 | stimuli: [animation_sequence_1, animation_sequence_2], 50 | choices: [80, 81], // 80 = 'p', 81 = 'q' 51 | key_answer: [81, 81], // correct answer is 'q' for both trials 52 | }; 53 | ``` 54 | 55 | #### Giving feedback with `%ANS%` string 56 | 57 | ```javascript 58 | 59 | // declare variables to hold animation sequences 60 | var animation_sequence_1 = ["img/face_1.jpg", "img/face_2.jpg", "img/face_3.jpg", "img/face_4.jpg", "img/face_3.jpg", "img/face_2.jpg"]; 61 | var animation_sequence_2 = ["img/face_3.jpg", "img/face_2.jpg", "img/face_4.jpg", "img/face_1.jpg"]; 62 | 63 | // create animation block for jspsych 64 | var animation_block = { 65 | type: 'categorize-animation', 66 | stimuli: [animation_sequence_1, animation_sequence_2], 67 | choices: [80, 81], // 80 = 'p', 81 = 'q' 68 | key_answer: [81, 81], // correct answer is 'q' for both trials, 69 | text_answer: ['Dax', 'Dax'], // the label for the sequence is 'Dax' 70 | correct_text: 'Correct! This was a %ANS%.', 71 | incorrect_text: 'Incorrect. This was a %ANS%.' 72 | }; 73 | ``` -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-categorize.md: -------------------------------------------------------------------------------- 1 | # jspsych-categorize 2 | 3 | The categorize plugin shows an image or HTML object on the screen. The subject responds by pressing a key. Feedback indicating the correctness of the response is given. 4 | 5 | ## Parameters 6 | 7 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 8 | 9 | Parameter | Type | Default Value | Description 10 | ----------|------|---------------|------------ 11 | stimuli | array | *undefined* | Each element of the array is a stimulus. A stimulus can be either a path to an image file or a string containing valid HTML markup. Each stimulus will be presented in its own trial, and thus the length of this array determines the total number of trials. 12 | is_html | boolean | false | If the elements of the `stimuli` array are strings containing HTML content, then this parameter must be set to true. 13 | key_answer | array | *undefined* | Each element of the array is a [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) indicating the correct response for the corresponding trial. The length of this array should match the `stimuli` array. 14 | choices | array | *undefined* | This array contains the keys that the subject is allowed to press in order to respond to the stimulus. Keys can be specified as their [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) or as characters (e.g. `'a'`, `'q'`). 15 | text_answer | array | "" | Array of strings representing a label that is associated with each correct answer. Used in conjunction with the `correct_text` and `incorrect_text` parameters. 16 | correct_text | string | "Correct." | String to show when the correct answer is given. Can contain HTML formatting. The special string `%ANS%` can be used within the string. If present, the plugin will put the `text_answer` for the trial in place of the %ANS% string (see example below). 17 | incorrect_text | string | "Wrong." | String to show when the wrong answer is given. Can contain HTML formatting. The special string `%ANS%` can be used within the string. If present, the plugin will put the `text_answer` for the trial in place of the %ANS% string (see example below). 18 | prompt | string | "" | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g. which key to press). 19 | force_correct_button_press | boolean | false | If set to true, then the subject must press the correct response key after feedback is given in order to advance to the next trial. 20 | timing_stim | numeric | -1 | How long to show the stimulus for (milliseconds). If -1, then the stimulus is shown until a response is given. 21 | timing_feedback_duration | numeric | 2000 | How long to show the feedback for (milliseconds). 22 | 23 | ## Data Generated 24 | 25 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 26 | 27 | Name | Type | Value 28 | -----|------|------ 29 | stimulus | string | Either the path to the image file or the string containing the HTML formatted content that the subject saw on this trial. 30 | key_press | numeric | Indicates which key the subject pressed. The value is the [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) corresponding to the subject's response. 31 | rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response. 32 | correct | boolean | `true` if the subject got the correct answer, `false` otherwise. 33 | 34 | ## Examples 35 | 36 | These examples show how to define a block using the categorize plugin to achieve various goals. 37 | 38 | #### Categorizing HTML content 39 | 40 | ```javascript 41 | // number of trials 42 | var n_trials = 6; 43 | 44 | // this is an example of using HTML objects as stimuli. 45 | // you could also use images. 46 | var numbers = ["1", "2", "3", "4", "5"]; 47 | var letters = ["I", "Z", "B", "A", "S"]; 48 | 49 | var stimuli = []; 50 | var answers = []; 51 | var text_answers = []; 52 | 53 | // randomly choose stimuli 54 | for (var i = 0; i < n_trials; i++) { 55 | if (Math.floor(Math.random() * 2) === 0) { 56 | // pick a number 57 | stimuli.push("" + numbers[Math.floor(Math.random() * numbers.length)] + "
" + letters[Math.floor(Math.random() * letters.length)] + "
Correct, this is a %ANS%.
", 77 | incorrect_text: "Incorrect, this is a %ANS%.
", 78 | is_html: true, 79 | prompt: "Press P for letter. Press Q for number.
" 80 | }; 81 | ``` 82 | 83 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-free-sort.md: -------------------------------------------------------------------------------- 1 | # jspsych-free-sort plugin 2 | 3 | The free-sort plugin displays a collection of images on the screen that the subject can interact with by clicking and dragging. All of the moves that the subject performs are recorded. 4 | 5 | ## Parameters 6 | 7 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 8 | 9 | Parameter | Type | Default Value | Description 10 | ----------|------|---------------|------------ 11 | stimuli | array | *undefined* | Each element of this array is also an array. The innermost arrays contain a set of image paths (strings) to show as a group. Each innermost array represents a single trial. The length of the outer array determines the number of trials in the block. 12 | stim_height | numeric | 100 | The height of the images in pixels. 13 | stim_width | numeric | 100 | The width of the images in pixels. 14 | sort_area_height | numeric | 800 | The height of the container that subjects can move the stimuli in. Stimuli will be constrained to this area. 15 | sort_area_width | numeric | 800 | The width of the container that subjects can move the stimuli in. Stimuli will be constrained to this area. 16 | prompt | string | "" | This string can contain HTML markup. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g. which key to press). 17 | prompt_location | string | "above" | Indicates whether to show the prompt `"above"` or `"below"` the sorting area. 18 | 19 | 20 | ## Data Generated 21 | 22 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 23 | 24 | Name | Type | Value 25 | -----|------|------ 26 | init_locations | JSON string | A JSON-encoded object representing the initial locations of all the stimuli in the sorting area. The object is an array with one element per stimulus. Each element in the array has a "src", "x", and "y" value. "src" is the image path, and "x" and "y" are the object location. 27 | moves | JSON string | A JSON-encoded object representing all of the moves the participant made when sorting. The object is an array with each element representing a move. Each element in the array has a "src", "x", and "y" value. "src" is the image path, and "x" and "y" are the object location after the move. 28 | final_locations | JSON string | A JSON-encoded object representing the final locations of all the stimuli in the sorting area. The object is an array with one element per stimulus. Each element in the array has a "src", "x", and "y" value. "src" is the image path, and "x" and "y" are the object location. 29 | rt | numeric | The response time in milliseconds for the subject to finish all sorting. 30 | 31 | ## Examples 32 | 33 | #### Basic example 34 | 35 | ```javascript 36 | // declare an array to hold the stimuli 37 | var sorting_stimuli = []; 38 | for (var i = 1; i <= 12; i++) { 39 | sorting_stimuli.push("img/cell_img_" + i + ".jpg"); 40 | } 41 | 42 | // create free-sort block for jspsych 43 | var sort_block = { 44 | type: 'free-sort', 45 | stimuli: [sorting_stimuli], 46 | prompt: "Click and drag the images below to sort them so that similar items are close together.
" 47 | }; 48 | ``` -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-html.md: -------------------------------------------------------------------------------- 1 | # jspsych-html plugin 2 | 3 | The HTML plugin displays an external HTML document (often a consent form). Either a keyboard response or a button press can be used to continue to the next trial. It allows the experimenter to check if conditions are met (such as indicating informed consent) before continuing. 4 | 5 | ## Parameters 6 | 7 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 8 | 9 | Parameter | Type | Default Value | Description 10 | ----------|------|---------------|------------ 11 | pages | array | *undefined* | Array of objects representing the individual pages to be shown. See table below for details about the parameters of the objects. 12 | cont_key | numeric | null | This setting is used for all pages that don't override the default value. See table below. 13 | cont_btn | string | null | This setting is used for all pages that don't override the default value. See table below. 14 | force_refresh | boolean | false | If `true`, then the plugin will avoid using the cached version of the HTML page to load if one exists. 15 | 16 | The `pages` array defines each individual trial in the block. Each object in the `pages` array can have the following parameters: 17 | 18 | Parameter | Type | Default Value | Description 19 | ----------|------|---------------|------------ 20 | url | string | *undefined* | The URL of the page to display. 21 | cont_key | numeric | null | The key code a key to advance to the next trial. If left as null, then the subject will not be able to advance trials using the keyboard. 22 | cont_btn | string | null | The ID of a clickable element on the page. When the element is clicked, the trial will advance. 23 | check_fn | function | function(){} | This function is called with the jsPsych `display_element` as the only argument when the subject attempts to advance the trial. The trial will only advance if the function return `true`. This can be used to verify that the subject has adequetly filled out a form before continuing, for example. 24 | 25 | 26 | ## Data Generated 27 | 28 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 29 | 30 | Name | Type | Value 31 | -----|------|------ 32 | url | string | The URL of the page. 33 | rt | numeric | The response time in milliseconds for the subject to finish the trial. 34 | 35 | ## Examples 36 | 37 | #### Loading a consent form 38 | 39 | ##### This content would be in a file called 'external_page.html' 40 | ```html 41 |43 | This is a demo experiment, with this minimal consent form being loaded 44 | as an external html document. To continue, click the checkbox below 45 | and hit "Start Experiment". 46 |
47 |48 | 49 | I agree to take part in this study. 50 |
51 | 52 |Create the image you just saw. Click two circles to add or remove a line between them. Click submit when you are done.
' 88 | }; 89 | ``` 90 | 91 | ## References 92 | 93 | Goldstone, R. L., Rogosky, B. J., Pevtzow, R., & Blair, M. (2005). Perceptual and semantic reorganization during category learning. _In H. Cohen & C. Lefebvre (Eds.) Handbook of Categorization in Cognitive Science_. (pp. 651-678). Amsterdam: Elsevier. 94 | 95 | Palmer, S. (1977). Hierarchical Structure in Perceptual Representation. _Cognitive Psychology, 9_, 441. -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-same-different.md: -------------------------------------------------------------------------------- 1 | # jspsych-same-different plugin 2 | 3 | The same-different plugin displays two stimuli sequentially. Stimuli can be images or HTML objects. The subject responds using the keyboard, and indicates whether the stimuli were the same or different. Same does not necessarily mean identical; a category judgment could be made, for example. 4 | 5 | ## Parameters 6 | 7 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 8 | 9 | Parameter | Type | Default Value | Description 10 | ----------|------|---------------|------------ 11 | stimuli | array | *undefined* | Each element of the array is a pair of stimuli. Each pair is represented as an array with two entries, one for each stimulus. A stimulus can be either a path to an image file or a string containing valid HTML markup. Stimuli will be shown in the order that they are defined in the array. Each pair will be presented in its own trial, and thus the length of this array determines the total number of trials. 12 | is_html | boolean | false | If the elements of the `stimuli` array are strings containing HTML content, then this parameter must be set to true. 13 | answer | array | *undefined* | Array of strings, where each string is either `'same'` or `'different'`. This array should be the same length as `stimuli` and the answers should correspond to the pairs in the `stimuli` array. 14 | same_key | numeric or string | 'Q' | The key that subjects should press to indicate that the two stimuli are the same. 15 | different_key | numeric or string | 'P' | The key that subjects should press to indicate that the two stimuli are different. 16 | timing_first_stim | numeric | 1000 | How long to show the first stimulus for in milliseconds. 17 | timing_gap | numeric | 500 | How long to show a blank screen in between the two stimuli. 18 | timing_second_stim | numeric | 1000 | How long to show the second stimulus for in milliseconds. If the value of this parameter is `-1` then the stimulus will be shown until the subject responds. 19 | prompt | string | "" | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g. which key to press). 20 | 21 | 22 | ## Data Generated 23 | 24 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 25 | 26 | Name | Type | Value 27 | -----|------|------ 28 | stimulus | string | Either the path to the image file or the string containing the HTML formatted content that the subject saw first on this trial. 29 | stimulus_2 | string | Either the path to the image file or the string containing the HTML formatted content that the subject saw second on this trial. 30 | key_press | numeric | Indicates which key the subject pressed. The value is the [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) corresponding to the subject's response. 31 | rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the second stimulus first appears on the screen until the subject's response. 32 | correct | boolean | `true` if the subject's response matched the `answer` for this trial. 33 | 34 | ## Examples 35 | 36 | 37 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-similarity.md: -------------------------------------------------------------------------------- 1 | # jspsych-similarity plugin 2 | 3 | The similarity plugin displays two stimuli sequentially. The stimuli can be images or HTML objects. The subject uses a draggable slider that is shown on screen to give a response. The anchor labels for the slider can be specified. 4 | 5 | ## Dependency 6 | 7 | This plugin requires the jQuery UI javascript library and accompanying CSS theme. To use this library, you must include both. Google hosts versions of both, which you can use in your project by including the following two lines in the `` section of the HTML document: 8 | 9 | ```html 10 | 11 | 12 | ``` 13 | 14 | This example uses the 'black-tie' theme, but any theme should work. 15 | 16 | ## Parameters 17 | 18 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 19 | 20 | Parameter | Type | Default Value | Description 21 | ----------|------|---------------|------------ 22 | stimuli | array | *undefined* | Each element of the array is a pair of stimuli. Each pair is represented as an array with two entries, one for each stimulus. A stimulus can be either a path to an image file or a string containing valid HTML markup. Stimuli will be shown in the order that they are defined in the array. Each pair will be presented in its own trial, and thus the length of this array determines the total number of trials. 23 | is_html | boolean | false | If the elements of the `stimuli` array are strings containing HTML content, then this parameter must be set to true. 24 | labels | array | `['Not at all similar', 'Identical']` | Array of strings to label the slider. Labels will be evenly spaced based on how many are in the array, with the outermost elements always anchored to the ends of the slider. 25 | intervals | numeric | 100 | How many different choices are available on the slider. For example, 5 will limit the options to 5 different places on the slider. Default value is 100, to simulate a smooth slider. 26 | show_ticks | boolean | false | If true, then the slider will have tick marks indicating where the response options lie on the slider. 27 | show_response | string | `"SECOND_STIMULUS"` | Determines when the response slider will appear in the trial. `"FIRST_STIMULUS"` will show the response slider as soon as the first stimulus is shown. `"SECOND_STIMULUS"` will show the response slider as soon as the second stimulus is shown. `"POST_STIMULUS"` will show the response slider after the second stimulus disappears. Response time measure will start when the response slider appears. 28 | timing_first_stim | numeric | 1000 | How long to show the first stimulus for in milliseconds. 29 | timing_second_stim | numeric | -1 | How long to show the second stimulus for in milliseconds. -1 will show the stimulus until a response is made by the subject. 30 | timing_image_gap | numeric | 1000 | How long to show a blank screen in between the two stimuli. 31 | prompt | string | "" | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take. 32 | 33 | 34 | ## Data Generated 35 | 36 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 37 | 38 | Name | Type | Value 39 | -----|------|------ 40 | stimulus | string | Either the path to the image file or the string containing the HTML formatted content that the subject saw first on this trial. 41 | stimulus_2 | string | Either the path to the image file or the string containing the HTML formatted content that the subject saw second on this trial. 42 | sim_score | numeric | The position of the slider when the subject submitted their response. Larger numbers are to the right on the slider. The range will depend on the value of the `intervals` parameter. 43 | rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the response slider first appears on the screen until the subject's response. 44 | 45 | ## Example 46 | 47 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-single-stim.md: -------------------------------------------------------------------------------- 1 | # jspsych-single-stim plugin 2 | 3 | This plugin displays an image or HTML-formatted content and allows the subject to respond by pressing a key on the keyboard. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time. 4 | 5 | Because this plugin can display any HTML content, it is quite versatile. It can be used for any situation in which the response generated by the subject is a single keystroke. 6 | 7 | ## Parameters 8 | 9 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 10 | 11 | Parameter | Type | Default Value | Description 12 | ----------|------|---------------|------------ 13 | stimuli | array | *undefined* | Each element of the array is a stimulus. A stimulus can be either a path to an image file or a string containing valid HTML markup. Each stimulus will be presented in its own trial, and thus the length of this array determines the total number of trials. 14 | is_html | boolean | false | If the elements of the `stimuli` array are strings containing HTML content, then this parameter must be set to true. 15 | choices | array | [ ] | This array contains the keys that the subject is allowed to press in order to respond to the stimulus. Keys can be specified as their [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) or as characters (e.g. `'a'`, `'q'`). The default value of an empty array means that all keys will be accepted as valid responses. 16 | prompt | string | "" | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g. which key to press). 17 | timing_stim | numeric | -1 | How long to show the stimulus for in milliseconds. If the value is -1, then the stimulus will be shown until the subject makes a response. 18 | timing_response | numeric | -1 | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the the subject's response will be recorded as -1 for the trial and the trial will end. If the value of this parameter is -1, then the trial will wait for a response indefinitely. 19 | continue_after_response | boolean | true | If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the `timing_response` parameter). If false, then the trial will continue until the value for `timing_response` is reached. You can use this parameter to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete. 20 | 21 | ## Data Generated 22 | 23 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 24 | 25 | Name | Type | Value 26 | -----|------|------ 27 | stimulus | string | Either the path to the image file or the string containing the HTML formatted content that the subject saw on this trial. 28 | key_press | numeric | Indicates which key the subject pressed. The value is the [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) corresponding to the subject's response. 29 | rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response. 30 | 31 | ## Examples 32 | 33 | These examples show how to define a block using the single-stim plugin to achieve various goals. 34 | 35 | #### Displaying images until subject gives a response 36 | 37 | ```javascript 38 | var block = { 39 | type: 'single-stim', 40 | stimuli: ['img/happy_face.png', 'img/sad_face.png'] 41 | } 42 | ``` 43 | 44 | #### Restricting which keys the subject can use to respond 45 | 46 | ```javascript 47 | var block = { 48 | type: 'single-stim', 49 | stimuli: ['img/happy_face.png', 'img/sad_face.png'], 50 | choices: ['h','s'] 51 | } 52 | ``` 53 | 54 | #### Displaying HTML content for a fixed length of time 55 | 56 | ```javascript 57 | var block = { 58 | type: 'single-stim', 59 | stimuli: ['Radio
', 'Towel
', 'Match
'], 60 | is_html: true, 61 | timing_response: 1500, 62 | continue_after_response: false 63 | } 64 | ``` 65 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-survey-likert.md: -------------------------------------------------------------------------------- 1 | # jspsych-survey-likert plugin 2 | 3 | The survey-likert plugin displays a set of questions with Likert scale responses. The subject uses a draggable slider to respond to the questions. 4 | 5 | ## Dependency 6 | 7 | This plugin requires the jQuery UI javascript library and accompanying CSS theme. To use this library, you must include both. Google hosts versions of both, which you can use in your project by including the following two lines in the `` section of the HTML document: 8 | 9 | ```html 10 | 11 | 12 | ``` 13 | 14 | This example uses the 'black-tie' theme, but any theme should work. 15 | 16 | ## Parameters 17 | 18 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 19 | 20 | Parameter | Type | Default Value | Description 21 | ----------|------|---------------|------------ 22 | questions | array | *undefined* | Each array element is an array of strings. The strings are the prompts/questions that will be associated with a slider. All questions within an array will get presented on the same page (trial). The length of the questions array determines the number of trials. 23 | labels | array | *undefined* | Each array element is an array of arrays. The innermost arrays contain a set of labels to display for an individual question. The middle level of arrays groups together the sets of labels that appear in a single trial. This level should correspond to the `questions` array. 24 | intervals | array | *undefined* | Each array element is an array of integers. The integers define how many different levels of a response there are (i.e. how many choices exist for each question). The length of the inner arrays should correspond the the length of the inner arrays for the `questions` array. The number of intervals does not have to match the number of labels. 25 | show_ticks | boolean | true | If true, then tick marks will be displayed on the sliders to indicate where the acceptable responses lie on the slider. 26 | 27 | ## Data Generated 28 | 29 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 30 | 31 | Name | Type | Value 32 | -----|------|------ 33 | Q0, Q1, ... , Q*n* | numeric | The response to each question will be recorded in its own variable, with the first question in the trial being recorded in `Q0`, the second in `Q1`, and so on. The responses are recorded as integers, representing the position of the slider on the scale. 34 | rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the questions first appear on the screen until the subject's response. 35 | 36 | ## Examples 37 | 38 | #### Basic example with multiple questions on a page. 39 | 40 | ```javascript 41 | // defining groups of questions that will go together. 42 | var page_1_questions = ["I like vegetables.", "I hate eggs."]; 43 | var page_2_questions = ["I like fruit."]; 44 | 45 | // definiting two different response scales that can be used. 46 | var scale_1 = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]; 47 | var scale_2 = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neural", "Somewhat Agree", "Agree", "Strongly Agree"]; 48 | 49 | var likert_block = { 50 | type: 'survey-likert', 51 | questions: [page_1_questions, page_2_questions], 52 | labels: [[scale_1, scale_2], [scale_1]], // need one scale for every question on a page 53 | intervals: [[5,7], [9]] // note the the intervals and labels don't necessarily need to match. 54 | }; 55 | ``` 56 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-survey-text.md: -------------------------------------------------------------------------------- 1 | # jspsych-survey-text plugin 2 | 3 | The survey-text plugin displays a set of questions with free response text fields. The subject types in answers. 4 | 5 | ## Parameters 6 | 7 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 8 | 9 | Parameter | Type | Default Value | Description 10 | ----------|------|---------------|------------ 11 | questions | array | *undefined* | Each array is an array of strings. The strings are the prompts for the subject to respond to. Each string gets its own response field. Each set of strings (inner arrays) will be presented on the same page (trial). The length of the outer array sets the number of trials in the block. 12 | 13 | ## Data Generated 14 | 15 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 16 | 17 | Name | Type | Value 18 | -----|------|------ 19 | Q0, Q1, ... , Q_n_ | string | Each question in the trial gets its own response in the data object. The first question will be `Q0`, the second `Q1`, and so on. Each response is a string containing whatever the subject typed into the associated text box. 20 | rt | numeric | The response time in milliseconds for the subject to make a response. 21 | 22 | ## Examples 23 | 24 | ### Basic example 25 | 26 | ```javascript 27 | // defining groups of questions that will go together. 28 | var page_1_questions = ["How old are you?", "Where were you born?"]; 29 | var page_2_questions = ["What is your favorite food?"]; 30 | 31 | var survey_block = { 32 | type: 'survey-text', 33 | questions: [page_1_questions, page_2_questions], 34 | }; 35 | ``` 36 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-text.md: -------------------------------------------------------------------------------- 1 | # jspsych-text plugin 2 | 3 | This plugin is for showing instructions and other basic HTML content to the subject. 4 | 5 | ## Parameters 6 | 7 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 8 | 9 | Parameter | Type | Default Value | Description 10 | ----------|------|---------------|------------ 11 | text | array | *undefined* | Each element of the array is the content for a single trial. Content for a trial is a string containing HTML formatted text (no HTML code is necessary, but it is allowed). The length of this array determines the total number of trials. 12 | cont_key | array or `'mouse'` | [ ] | This array contains the keys that the subject is allowed to press in order to advance to the next trial. Keys can be specified as their [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) or as characters (e.g. `'a'`, `'q'`). The default value of an empty array means that all keys will be accepted as valid responses. If the value of `'mouse'` is used, then clicking the mouse will advance to the next trial. 13 | 14 | 15 | ## Data Generated 16 | 17 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 18 | 19 | Name | Type | Value 20 | -----|------|------ 21 | key_press | numeric | Indicates which key the subject pressed. The value is the [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) corresponding to the subject's response. 22 | rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response. 23 | 24 | ## Example 25 | 26 | #### Showing a welcome message 27 | 28 | ```javascript 29 | var block = { 30 | type: 'text', 31 | text: 'Welcome to the experiment. Press any key to begin.' 32 | } 33 | ``` 34 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-visual-search-circle.md: -------------------------------------------------------------------------------- 1 | # jspsych-visual-search-circle plugin 2 | 3 | This plugin presents a customizable visual-search task modelled after [Wang, Cavanagh, & Green (1994)](http://dx.doi.org/10.3758/BF03206946). The subject indicates whether or not a target is present among a set of distractors. The stimuli are displayed in a circle, evenly-spaced, equidistant from a fixation point. Here is an example using normal and backward Ns: 4 | 5 |  6 | 7 | ## Parameters 8 | 9 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 10 | 11 | Parameter | Type | Default Value | Description 12 | ----------|------|---------------|------------ 13 | target_present | array | *undefined* | Array of boolean values indicating if the target will appear in the search array. The length of the array determines the number of trials. 14 | set_size | numeric | *undefined* | Array of integers. Each element represents the number of items in the search array for the corresponding trial. 15 | target | string | *undefined* | Path to image file that is the search target. 16 | foil | string | *undefined* | Path to image file that is the foil/distractor. 17 | fixation_image | string | *undefined* | Path to image file that is a fixation target. 18 | target_size | array | `[50, 50]` | Two element array indicating the height and width of the search array element images. 19 | fixation_size | array | `[16, 16]` | Two element array indicating the height and width of the fixation image. 20 | circle_diameter | numeric | 250 | The diameter of the search array circle in pixels. 21 | target_present_key | numeric | 74 | The key to press if the target is present in the search array. 22 | target_absent_key | numeric | 70 | The key to press if the the target is not present in the search array. 23 | timing_max_search | numeric | -1 | The maximum amount of time the subject is allowed to search before the trial will continue. A value of -1 will allow the subject to search indefinitely. 24 | timing_fixation | numeric | 1000 | How long to show the fixation image for before the search array (in milliseconds). 25 | 26 | ## Data Generated 27 | 28 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 29 | 30 | Name | Type | Value 31 | -----|------|------ 32 | correct | boolean | True if the subject gave the correct response. 33 | key_press | numeric | Indicates which key the subject pressed. The value is the [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) corresponding to the subject's response. 34 | rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response. 35 | set_size | numeric | The number of items in the search array 36 | target_present | boolean | True if the target is present in the search array 37 | locations | JSON string | JSON-encoded array where each element of the array is the pixel value of the center of an image in the search array. If the target is present, then the first element will represent the location of the target. 38 | 39 | ## Example 40 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-vsl-animate-occlusion.md: -------------------------------------------------------------------------------- 1 | # jspsych-vsl-animate-occlusion plugin 2 | 3 | The VSL (visual statistical learning) animate occlusion plugin displays an animated sequence of shapes that disappear behind an occluding rectangle while they change from one shape to another. This plugin can be used to replicate the experiments described in: 4 | 5 | Fiser, J., & Aslin, R. N. (2002). Statistical learning of higher-order temporal structure from visual shape sequences. *Journal of Experimental Psychology: Learning, Memory, and Cognition, 28*(3), 458. 6 | 7 | ## Dependency 8 | 9 | This plugin requires the Raphael-js library, available at [http://www.raphaeljs.com](http://www.raphaeljs.com). You must include the library in the `` section of your experiment page. 10 | 11 | ## Parameters 12 | 13 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 14 | 15 | Parameter | Type | Default Value | Description 16 | ----------|------|---------------|------------ 17 | stimuli | array | *undefined* | Each element of the array is a stimulus. A stimulus is a path to an image file. The order of stimuli in the array determines the order of the animation sequence. 18 | canvas_size | array | `[400, 400]` | Array specifying the width and height of the area that the animation will display in. Stimuli will move to the edges of this area, so increasing the width without increasing the `timing_cycle` parameter will speed up the images. 19 | image_size | array | `[100, 100]` | Array specifying the width and height of the images to show. The occluding rectangle will have a width equal to the width of image_size. 20 | initial_direction | string | "left" | Which direction the stimulus should move first (subsequent directions will alternate). Choices are "left" or "right". 21 | occlude_center | boolean | true | If true, display a rectangle in the center of the screen that is just wide enough to occlude the image completely as it passes behind. 22 | choices | array | [ ] | This array contains the keys that the subject is allowed to press in order to respond to the stimulus. Keys can be specified as their [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) or as characters (e.g. `'a'`, `'q'`). The default value of an empty array means that all keys will be accepted as valid responses. 23 | timing_cycle | numeric | 1000 | How long it takes for a stimulus in the sequence to make a complete cycle (move to the edge and back to the center) in milliseconds. 24 | timing_pre_movement | numeric | 500 | How long to wait before the stimuli starts moving from behind the center rectangle. 25 | 26 | ## Data Generated 27 | 28 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 29 | 30 | Name | Type | Value 31 | -----|------|------ 32 | stimulus | JSON string | A JSON encoded array where each element of the array is a stimulus from the sequence, in the order that they were shown. 33 | responses | JSON string | A JSON encoded array containing all response information. The encoded object is an array containing one element for each valid response. Each response item has three properties: `key` the key code of the response key, `stimulus` the index of the stimulus that was displayed when the response was made, and `rt` the response time measured since the start of the sequence. 34 | 35 | ## Examples 36 | 37 | #### Displaying a simple sequence. 38 | 39 | ```javascript 40 | var images = ["img/1.gif","img/2.gif","img/3.gif","img/4.gif","img/5.gif","img/6.gif","img/7.gif","img/8.gif","img/9.gif","img/10.gif"]; 41 | 42 | 43 | // create vsl block for jspsych 44 | var vsl_block = { 45 | type: 'vsl-animate-occlusion', 46 | stimuli: images 47 | }; 48 | ``` 49 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-vsl-grid-scene.md: -------------------------------------------------------------------------------- 1 | # jspsych-vsl-grid-scene plugin 2 | 3 | The VSL (visual statistical learning) grid scene plugin displays images arranged in a grid. This plugin can be used to replicate the experiments described in: 4 | 5 | Fiser, J., & Aslin, R. N. (2001). Unsupervised statistical learning of higher-order spatial structures from visual scenes. *Psychological Science, 12*(6), 499-504. 6 | 7 | 8 | ## Parameters 9 | 10 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 11 | 12 | Parameter | Type | Default Value | Description 13 | ----------|------|---------------|------------ 14 | stimuli | array | *undefined* | Array of stimuli. Each stimulus is an array that defines a grid. Grids should be declared as two dimensional arrays in `[row][col]` order, with paths to image files in the locations where images are displayed, and 0 in blank spaces. See example below. 15 | image_size | array | `[100, 100]` | Array specifying the width and height of the images to show. Grid cells will also be this size, with 10% padding. 16 | timing_duration | numeric | 2000 | How long to show the stimulus for in milliseconds. 17 | 18 | ## Data Generated 19 | 20 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 21 | 22 | Name | Type | Value 23 | -----|------|------ 24 | stimulus | JSON string | JSON encoded array of the stimulus shown on the trial. 25 | 26 | ### Stimulus Creation Method 27 | 28 | The plugin also includes a public method for generating the grid scene stimuli that the plugin uses. You can use this method to create HTML strings that produce the stimuli, and then incorporate the stimuli in other plugins. To use this method, include the plugin script on the page and then call the method like this: 29 | 30 | ```javascript 31 | 32 | var pattern = [ 33 | ["img/1.gif", "img/2.gif", 0], 34 | [ 0, "img/3.gif", 0], 35 | ["img/5.gif", "img/4.gif", 0] 36 | ]; 37 | 38 | var image_size = 100; // pixels 39 | 40 | var grid_stimulus = jsPsych['vsl-grid-scene'].generate_stimulus(pattern, image_size); 41 | 42 | // grid_stimulus will now contain a string (NOT an HTML DOM object) that you can 43 | // pass into other plugins that accept HTML stimuli as input, such as jspsych-categorize. 44 | 45 | ``` 46 | 47 | ## Example 48 | 49 | #### Basic example 50 | 51 | ```javascript 52 | var scenes = [ 53 | [ 54 | ["img/1.gif", "img/2.gif", 0], 55 | [ 0, "img/3.gif", 0], 56 | ["img/5.gif", "img/4.gif", 0] 57 | ], 58 | [ 59 | [ 0, 0, "img/6.gif"], 60 | [ "img/10.gif", "img/7.gif", 0], 61 | [ 0,"img/8.gif", "img/9.gif" ] 62 | ] 63 | ]; 64 | 65 | // create vsl block for jspsych 66 | var vsl_block = { 67 | type: 'vsl-grid-scene', 68 | stimuli: scenes 69 | }; 70 | 71 | ``` 72 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/jspsych-xab.md: -------------------------------------------------------------------------------- 1 | # jspsych-xab plugin 2 | 3 | The XAB plugin displays either an image or HTML object stimulus (X). After a short gap, the plugin displays two additional stimuli (A and B). The subject selects which of the two stimuli matches X using the keyboard. 4 | 5 | ## Parameters 6 | 7 | This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable. 8 | 9 | Parameter | Type | Default Value | Description 10 | ----------|------|---------------|------------ 11 | stimuli | array | *undefined* | Array of arrays. Each interior array represents the stimuli for a single trial. Each interior array can be two or three elements. If it is two elements, then the plugin will show the first element as X and as the target during the A/B portion (the second element will be the foil). If it is three elements, then the first is X the second is the target (A) and the third is the foil (B). This is useful if X and A are not identical, but A is still the correct choice (e.g. a categorization experiment where the goal is to pick the item that is in the same category). Stimuli can be paths to images, or html strings. 12 | is_html | boolean | false | If the elements of the `stimuli` array are strings containing HTML content, then this parameter must be set to true. 13 | left_key | numeric or string | 'Q' | Which key the subject should press to indicate that the target is on the left side. 14 | right_key | numeric or string | 'P' | Which key the subject should press to indicate that the target is on the right side. 15 | prompt | string | "" | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g. which key to press). 16 | timing_x | numeric | 1000 | How long to show the X stimulus for in milliseconds. 17 | timing_xab_gap | numeric | 1000 | How long to show a blank screen in between X and AB in milliseconds. 18 | timing_ab | numeric | -1 | How long to show A and B in milliseconds. If the value of this parameter is -1, then the stimuli will remain on the screen until a response is given. 19 | 20 | ## Data Generated 21 | 22 | In addition to the [default data collected by all plugins](), this plugin collects the following data for each trial. 23 | 24 | Name | Type | Value 25 | -----|------|------ 26 | stimulus_x | string | Either the path to the image file or the string containing the HTML formatted content that was the X stimulus on this trial. 27 | stimulus_a | string | Either the path to the image file or the string containing the HTML formatted content that was the A stimulus on this trial. 28 | stimulus_b | string | Either the path to the image file or the string containing the HTML formatted content that was the B stimulus on this trial. 29 | key_press | numeric | Indicates which key the subject pressed. The value is the [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) corresponding to the subject's response. 30 | rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the A and B stimuli first appear on the screen until the subject's response. 31 | correct | boolean | True if the subject picks the correct answer. 32 | 33 | ## Examples 34 | 35 | #### Doing an exact match task 36 | 37 | ```javascript 38 | var block = { 39 | type: 'xab', 40 | stimuli: [['img/happy_face.png', 'img/sad_face.png']], 41 | prompt: "Press Q if the face you just saw is on the left. Press P if the face you just saw is on the right." 42 | } 43 | ``` 44 | 45 | #### Matching based on a feature 46 | 47 | ```javascript 48 | var block = { 49 | type: 'xab', 50 | stimuli: [['img/happy_joe_face.png', 'img/sad_joe_face.png', 'img/sad_fred_face.png']], 51 | prompt: "Press Q if the person you just saw is on the left. Press P if the person you just saw is on the right." 52 | } 53 | ``` -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/plugins/overview.md: -------------------------------------------------------------------------------- 1 | # Plugins 2 | 3 | In jsPsych, plugins define the kinds of tasks that subjects perform in experiments. Some plugins define very general tasks, like displaying instructions or displaying a visual stimulus and getting a keyboard response. Other plugins are more specific, displaying particular kinds of interactive stimuli, or running a specific kind of perceptual discrimination task. Creating an experiment with jsPsych involves figuring out which plugins are needed for the kinds of tasks you want to have your subjects perform. 4 | 5 | Plugins provide a structure for a particular task. For example, the `jspsych-single-stim` plugin defines a simple structure for showing a visual stimulus and collecting a keyboard response. To use the plugin, you need to specify the content, such as what the stimulus is, what keys the subject is allowed to press, and how long the stimulus should be on the screen. Many of these content options have reasonable default values; even though the `jspsych-single-stim` plugin has many different options, you only *need* to specify the stimulus in order to use it. Each plugin has its own documentation page, which describes what the plugin does and what options are available. 6 | 7 | ## Using a plugin 8 | 9 | To use a plugin, you'll need to load the plugin's JavaScript file on your experiment page: 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | Once a plugin is loaded, you can define a block that uses that plugin. The following JavaScript code defines a trial using the `jspsych-single-stim` plugin to display an image file ('images/happy_face.jpg'). This trial uses the default values for valid keys, length of display, and so on. You could override these values by adding them to the object. 16 | 17 | ```javascript 18 | var single_stim_block = { 19 | type: 'single-stim', 20 | stimuli: 'images/happy_face.jpg' 21 | } 22 | ``` 23 | 24 | Here's an exampe of overriding the default value for `timing_post_trial`: 25 | 26 | ```javascript 27 | var single_stim_block = { 28 | type: 'single-stim', 29 | stimuli: 'images/happy_face.jpg', 30 | timing_post_trial: 2000 31 | } 32 | ``` 33 | 34 | ## List of available plugins 35 | 36 | This table is a description of all plugins that are currently bundled with jsPsych. Click on the name of a plugin to view its documentation page. 37 | 38 | Plugin | Description 39 | ------ | ----------- 40 | [jspsych‑animation](plugins/jspsych-animation) | Shows a sequence of images at a specified frame rate. Records key presses (including timing information) made by the subject while they are viewing the animation. 41 | [jspsych‑call‑function](plugins/jspsych-call-function) | Executes an arbitrary function call. Doesn't display anything to the subject, and the subject is usually unaware that this plugin has even executed. It's useful for performing tasks at specified times in the experiment, such as saving data. 42 | [jspsych‑categorize](plugins/jspsych-categorize) | The subject responds to a stimulus using the keyboard and can be given feedback about the correctness of their response. 43 | [jspsych‑categorize‑animation](plugins/jspsych-categorize-animation) | A mash-up of the animation and categorize plugin. The subject responds to an animation and can be given feedback about their response. 44 | [jspsych‑free‑sort](plugins/jspsych-free-sort) | Displays a set of images on the screen in random locations. Subjects can click and drag the images to move them around the screen. Records all the moves made by the subject, so the sequence of moves can be recovered from the data. 45 | [jspsych‑html](plugins/jspsych-html) | Displays an external HTML page (such as a consent form) and lets the subject respond by clicking a button or pressing a key. Plugin can validate their response, which is useful for making sure that a subject has granted consent before starting the experiment. 46 | [jspsych‑multi‑stim‑multi‑response](plugins/jspsych-multi-stim-multi-response) | A more generalized version of the single-stim plugin. Can display multiple stimuli in a single trial, and collect multiple responses in a single trial. 47 | [jspsych‑palmer](plugins/jspsych-palmer) | Shows grid-like stimuli inspired by Stephen Palmer's work. The stimuli are editable: subjects can add and subtract parts interactively. Also contains a method for generating the HTML code to render the stimuli, allowing them to be used in other plugins. 48 | [jspsych‑same‑different](plugins/jspsych-same-different) | A same-different judgment task. A stimulus is shown, followed by a brief gap, and then another stimulus is shown. The subject indicates whether the stimuli are the same or different. 49 | [jspsych‑similarity](plugins/jspsych-similarity) | Two stimuli are shown sequentially, and the subject indicates how similar they are by dragging a slider object. 50 | [jspsych‑single‑stim](plugins/jspsych-single-stim) | A basic plugin for displaying a stimulus and getting a keyboard response. 51 | [jspsych‑survey‑likert](plugins/jspsych-survey-likert) | Displays likert-style questions. The subject responds by dragging a slider. 52 | [jspsych‑survey‑text](plugins/jspsych-survey-text) | Shows a prompt with a text box. The subject writes a response and then submits by clicking a button. 53 | [jspsych‑text](plugins/jspsych-text) | Shows HTML-formatted text on the screen. 54 | [jspsych‑visual‑search‑circle](plugins/jspsych-visual-search-circle) | A customizable visual-search task modelled after [Wang, Cavanagh, & Green (1994)](http://dx.doi.org/10.3758/BF03206946). The subject indicates whether or not a target is present among a set of distractors. The stimuli are displayed in a circle, evenly-spaced, equidistant from a fixation point. 55 | [jspsych‑vsl‑animate‑occlusion](plugins/jspsych-vsl-animate-occlusion) | A visual statistical learning paradigm based on [Fiser & Aslin (2002)](http://dx.doi.org/10.1037//0278-7393.28.3.458). A sequence of stimuli are shown in an oscillatory motion. An occluding rectangle is in the center of the display, and the stimuli change when they are behind the rectangle. 56 | [jspsych‑vsl‑grid‑scene](plugins/jspsych-vsl-grid-scene) | A visual statistical learning paradigm based on [Fiser & Aslin (2001)](http://dx.doi.org/10.1111/1467-9280.00392). A scene made up of individual stimuli arranged in a grid is shown. This plugin can also generate the HTML code to render the stimuli for use in other plugins. 57 | [jspsych‑xab](plugins/jspsych-xab) | A two-alternative forced choice task. A target (X) is shown, followed by a brief gap, and then two choices (A & B) are displayed. The subject must pick whichever one matches X (matches is defined however the experimenter wishes; it could be a literal match, or it could be a match on some particular property). 58 | -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/support.md: -------------------------------------------------------------------------------- 1 | # Support 2 | 3 | For questions about jsPsych, the preferred method of support is the [jsPsych google group](https://groups.google.com/forum/#!forum/jspsych). While I'm happy to answer e-mails about the library, I prefer to do it in a public forum so that an archive of questions and answers is created. Messages posted to the group go straight to my inbox, so it's just as fast as emailing me. 4 | 5 | If you have identified a problem with the library itself, such as a bug in the code or an error in the documentation, please [open a new issue](https://github.com/jodeleeuw/jsPsych/issues) on the GitHub site. Please don't use the issue tracker for questions about how to use the library. -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/tutorials/flanker-task.md: -------------------------------------------------------------------------------- 1 | # Tutorial coming soon. -------------------------------------------------------------------------------- /jsPsych/docs/markdown_docs/tutorials/hello-world.md: -------------------------------------------------------------------------------- 1 | # jsPsych "Hello World" experiment 2 | 3 | In the long tradition of `hello world` examples, this tutorial creates an experiment that outputs the phrase "Hello World" to the browser. Though useless as an actual experiment, the process is helpful for learning the basics of using the jsPsych library. This tutorial will assume that you know very little about how to set up a web page. 4 | 5 | ## Step 1: Download the jsPsych library 6 | 7 | Start by downloading the jsPsych library. The most recent version can always be found on the [GitHub releases page](https://github.com/jodeleeuw/jsPsych/releases). Download either the ZIP or TAR archive of the latest release. 8 | 9 |  10 | 11 | ## Step 2: Create a folder to store your experiment files 12 | 13 | Create a folder on your computer to put the experiment files in. Once you've created the folder, open the downloaded archive from step 1, and move the extracted folder (called `jsPsych-4.0.1` if using v4.0.1 of jsPsych) into the experiment folder. Here's what it looks like on a mac: 14 | 15 |  16 | 17 | ## Step 3: Create a new HTML file 18 | 19 | To edit jsPsych code, you'll need a programming-friendly text editor. Some free options are: 20 | 21 | * [Notepad++](http://notepad-plus-plus.org/) (Windows) 22 | * [TextMate](http://macromates.com/) (Mac OSX) 23 | * [Atom](https://atom.io) (Windows & Mac OSX) 24 | 25 | Once you've got a text editor that you like, create a new file in the experiment folder called `experiment.html` 26 | 27 |  28 | 29 | ## Step 4: Add the bare-minimum HTML code 30 | 31 | There's some basic code that (nearly) all HTML documents have in common. Here's a typical bare-bones HTML document 32 | 33 | ```html 34 | 35 | 36 | 37 |