Skip to content

Commit

Permalink
add md extension to internal page links (#3275)
Browse files Browse the repository at this point in the history
  • Loading branch information
becky-gilbert committed Apr 30, 2024
1 parent a877a8f commit c765924
Show file tree
Hide file tree
Showing 11 changed files with 25 additions and 25 deletions.
4 changes: 2 additions & 2 deletions docs/developers/plugin-development.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ The plugin's `trial()` method is responsible for running a single trial. When th
There are three parameters that are passed into the trial method.

* `display_element` is the DOM element where jsPsych content is being rendered. This parameter will be an `HTMLElement`, and you can use it to modify the portion of the document that jsPsych controls.
* `trial` is an object containing all of the parameters specified in the corresponding [TimelineNode](../overview/timeline).
* `trial` is an object containing all of the parameters specified in the corresponding [TimelineNode](../overview/timeline.md).
* `on_load` is an optional parameter that contains a callback function to invoke when `trial()` has completed its initial loading. See [handling the on_load event](#asynchronous-loading).

The only requirement for the `trial` method is that it calls `jsPsych.finishTrial()` when it is done. This is how jsPsych knows to advance to the next trial in the experiment (or end the experiment if it is the last trial). The plugin can do whatever it needs to do before that point.
Expand Down Expand Up @@ -168,7 +168,7 @@ trial(display_element, trial){
### Asynchronous loading
One of the [trial events](../overview/events) is `on_load`, which is normally triggered automatically when the `.trial()` method returns. In most cases, this return happens after the plugin has done its initial setup of the DOM (e.g., rendering an image, setting up event listeners and timers, etc.). However, in some cases a plugin may implement an asynchronous operation that needs to complete before the initial loading of the plugin is considered done. An example of this is the `audio-keyboard-response` plugin, in which the check to see if the audio file is loaded is asynchronous and the `.trial()` method returns before the audio file has been initialized and the display updated.
One of the [trial events](../overview/events.md) is `on_load`, which is normally triggered automatically when the `.trial()` method returns. In most cases, this return happens after the plugin has done its initial setup of the DOM (e.g., rendering an image, setting up event listeners and timers, etc.). However, in some cases a plugin may implement an asynchronous operation that needs to complete before the initial loading of the plugin is considered done. An example of this is the `audio-keyboard-response` plugin, in which the check to see if the audio file is loaded is asynchronous and the `.trial()` method returns before the audio file has been initialized and the display updated.
If you would like to manually trigger the `on_load` event for a plugin, the `.trial()` method accepts an optional third parameter that is a callback function to invoke when loading is complete.
Expand Down
6 changes: 3 additions & 3 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@

jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser.

Experiments in jsPsych are created using [plugins](overview/plugins).
Experiments in jsPsych are created using [plugins](overview/plugins.md).
Each plugin defines different kinds of events, like showing an image on the screen, and collects different kinds of data, like recording which key was pressed at which time.
You can use the plugins that are [included with jsPsych](plugins/list-of-plugins), use plugins that are developed by community members in the [contrib repository](https://github.com/jspsych/jspsych-contrib), or [create your own plugins](developers/plugin-development/).
By assembling different plugins together into [a timeline](overview/timeline), it is possible to create a wide range of experiments.
You can use the plugins that are [included with jsPsych](plugins/list-of-plugins.md), use plugins that are developed by community members in the [contrib repository](https://github.com/jspsych/jspsych-contrib), or [create your own plugins](developers/plugin-development.md).
By assembling different plugins together into [a timeline](overview/timeline.md), it is possible to create a wide range of experiments.

[The page on timelines](overview/timeline.md) is a good place to start learning about jsPsych.
From there, you might want to complete the [hello world tutorial](tutorials/hello-world.md) to learn how to set up a jsPsych experiment and the [reaction time experiment tutorial](tutorials/rt-task.md) to learn the core features of the framework.
2 changes: 1 addition & 1 deletion docs/overview/experiment-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ initJsPsych({

## Add extensions

[Extensions](extensions/) are jsPsych modules that can run throughout the experiment and interface with any plugin to extend the functionality of the plugin. One example of an extension is eye tracking, which allows you to gather gaze data during any trial and add it to that trial's data object. If you want to use extensions in your experiment, you must specify this when you initialize the experiment with `initJsPsych`. The `extensions` parameter in `initJsPsych` is an array of objects, where each object specifies the extension that you'd like to use in the experiment. Below is an example of adding the webgazer extension.
[Extensions](extensions.md) are jsPsych modules that can run throughout the experiment and interface with any plugin to extend the functionality of the plugin. One example of an extension is eye tracking, which allows you to gather gaze data during any trial and add it to that trial's data object. If you want to use extensions in your experiment, you must specify this when you initialize the experiment with `initJsPsych`. The `extensions` parameter in `initJsPsych` is an array of objects, where each object specifies the extension that you'd like to use in the experiment. Below is an example of adding the webgazer extension.

```js
initJsPsych({
Expand Down
6 changes: 3 additions & 3 deletions docs/overview/plugins.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# Plugins

In jsPsych, plugins define the kinds of trials or events that should occur during the experiment.
Some plugins define very general events, like [displaying a set of instructions pages](../plugins/instructions/), [displaying an image and recording a keyboard response](../plugins/image-keyboard-response/), or [playing a sound file and recording a button response](../plugins/audio-button-response/).
Other plugins are more specific, like those that display particular kinds of stimuli (e.g., a [circular visual search array](../plugins/visual-search-circle/)), or run a specific version of particular kind of task (e.g., the [Implicit Association Test](../plugins/iat-image/)).
Some plugins define very general events, like [displaying a set of instructions pages](../plugins/instructions.md), [displaying an image and recording a keyboard response](../plugins/image-keyboard-response.md), or [playing a sound file and recording a button response](../plugins/audio-button-response.md).
Other plugins are more specific, like those that display particular kinds of stimuli (e.g., a [circular visual search array](../plugins/visual-search-circle.md)), or run a specific version of particular kind of task (e.g., the [Implicit Association Test](../plugins/iat-image.md)).
Part of creating an experiment with jsPsych involves figuring out which plugins are needed to create the tasks you want your participants to perform.

Plugins provide a structure for a particular trial or task, but often allow for significant customization and flexibility. For example, the [image-keyboard-response plugin](../plugins/image-keyboard-response/) defines a simple structure for showing an image and collecting a keyboard response. You can specify the what the stimulus is, what keys the participant is allowed to press, how long the stimulus should be on the screen, how long the participant has to respond, and so on. Many of these options have reasonable default values; even though the image plugin has many different parameters, you only *need* to specify the image stimulus in order to use it. Each plugin has its own documentation page, which describes what the plugin does, what options are available, and what kind of data it collects.
Plugins provide a structure for a particular trial or task, but often allow for significant customization and flexibility. For example, the [image-keyboard-response plugin](../plugins/image-keyboard-response.md) defines a simple structure for showing an image and collecting a keyboard response. You can specify the what the stimulus is, what keys the participant is allowed to press, how long the stimulus should be on the screen, how long the participant has to respond, and so on. Many of these options have reasonable default values; even though the image plugin has many different parameters, you only *need* to specify the image stimulus in order to use it. Each plugin has its own documentation page, which describes what the plugin does, what options are available, and what kind of data it collects.

## Using a plugin

Expand Down
4 changes: 2 additions & 2 deletions docs/overview/style.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ var trial = {
}
```

You can also use a [dynamic parameter](dynamic-parameters) to combine inline CSS and trial-specific variables. This allows you to easily apply the same inline CSS to multiple trials. Here's an example using a dynamic stimulus parameter and [timeline variables](timeline.md#timeline-variables):
You can also use a [dynamic parameter](dynamic-parameters.md) to combine inline CSS and trial-specific variables. This allows you to easily apply the same inline CSS to multiple trials. Here's an example using a dynamic stimulus parameter and [timeline variables](timeline.md#timeline-variables):

```javascript
var trial = {
Expand Down Expand Up @@ -157,7 +157,7 @@ var fixation = {
</script>
```

You may want the `css_classes` parameter to vary across trials. If so, you can turn it into a [dynamic parameter](dynamic-parameters) or use [timeline variables](timeline.md#timeline-variables) (see examples below).
You may want the `css_classes` parameter to vary across trials. If so, you can turn it into a [dynamic parameter](dynamic-parameters.md) or use [timeline variables](timeline.md#timeline-variables) (see examples below).

One thing to note about the `css_classes` parameter is that it only adds the class(es) to the jspsych-content &lt;div> element, which is the "parent" element that contains all of the experiment content. Often you'll want your CSS rules to be applied to other elements _inside_ of this jspsych-content div. Sometimes your CSS rules will be "inherited" by all of the other jsPsych content inside of this parent &lt;div>. For instance, in the `fixation` example above, the CSS rules that change the font size, weight and color are applied to the parent &lt;div> and automatically passed on to the stimulus text through inheritance.

Expand Down
4 changes: 2 additions & 2 deletions docs/overview/timeline.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ To create an experiment using jsPsych, you need to specify a timeline that descr

## A single trial

To create a trial, you need to create an object that describes the trial. The most important feature of this object is the `type` parameter. This tells jsPsych which plugin to use to run the trial. For example, if you want to use the [html-keyboard-response plugin](../plugins/html-keyboard-response) to display a short message, the trial object would look like this:
To create a trial, you need to create an object that describes the trial. The most important feature of this object is the `type` parameter. This tells jsPsych which plugin to use to run the trial. For example, if you want to use the [html-keyboard-response plugin](../plugins/html-keyboard-response.md) to display a short message, the trial object would look like this:

```javascript
var trial = {
Expand Down Expand Up @@ -55,7 +55,7 @@ timeline.push(trial_3);

## Nested timelines

Each object on the timeline can also have its own timeline. This is useful for many reasons. One is that it allows you to define common parameters across trials once and have them apply to all the trials on the nested timeline. The example below creates a series of trials using the [image-keyboard-response plugin](../plugins/image-keyboard-response/), where the only thing that changes from trial-to-trial is the image file being displayed on the screen.
Each object on the timeline can also have its own timeline. This is useful for many reasons. One is that it allows you to define common parameters across trials once and have them apply to all the trials on the nested timeline. The example below creates a series of trials using the [image-keyboard-response plugin](../plugins/image-keyboard-response.md), where the only thing that changes from trial-to-trial is the image file being displayed on the screen.

```javascript
var judgment_trials = {
Expand Down
4 changes: 2 additions & 2 deletions docs/plugins/list-of-plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ Plugin | Description
[browser&#8209;check](browser-check.md) | Measures various features of the participant's browser and runs an inclusion check to see if the browser meets a custom set of criteria for running the study.
[call&#8209;function](call-function.md) | Executes an arbitrary function call. Doesn't display anything to the participant, and the participant 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.
[canvas&#8209;button&#8209;response](canvas-button-response.md) | Draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp), and record a button click response. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
[canvas&#8209;keyboard&#8209;response](canvas-keyboard-response) | Draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp), and record a key press response. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
[canvas&#8209;keyboard&#8209;response](canvas-keyboard-response.md) | Draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp), and record a key press response. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
[canvas&#8209;slider&#8209;response](canvas-slider-response.md) | Draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp), and ask the participant to respond by moving a slider to indicate a value. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
[categorize&#8209;animation](categorize-animation.md) | The participant responds to an animation and can be given feedback about their response.
[categorize&#8209;html](categorize-html.md) | The participant responds to an HTML-formatted stimulus using the keyboard and can be given feedback about the correctness of their response.
[categorize&#8209;image](categorize-image.md) | The participant responds to an image using the keyboard and can be given feedback about the correctness of their response.
[cloze](cloze) | Plugin for displaying a cloze test and checking participants answers against a correct solution.
[cloze](cloze.md) | Plugin for displaying a cloze test and checking participants answers against a correct solution.
[external&#8209;html](external-html.md) | Displays an external HTML page (such as a consent form) and lets the participant respond by clicking a button or pressing a key. Plugin can validate their response, which is useful for making sure that a participant has granted consent before starting the experiment.
[free&#8209;sort](free-sort.md) | Displays a set of images on the screen in random locations. Participants can click and drag the images to move them around the screen. Records all the moves made by the participant, so the sequence of moves can be recovered from the data.
[fullscreen](fullscreen.md) | Toggles the experiment in and out of fullscreen mode.
Expand Down

0 comments on commit c765924

Please sign in to comment.