jsPsych/core_library/jspsych-core/index.html
2019-07-16 09:51:44 -05:00

3537 lines
104 KiB
HTML
Executable File

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="lang:clipboard.copy" content="Copy to clipboard">
<meta name="lang:clipboard.copied" content="Copied to clipboard">
<meta name="lang:search.language" content="en">
<meta name="lang:search.pipeline.stopwords" content="True">
<meta name="lang:search.pipeline.trimmer" content="True">
<meta name="lang:search.result.none" content="No matching documents">
<meta name="lang:search.result.one" content="1 matching document">
<meta name="lang:search.result.other" content="# matching documents">
<meta name="lang:search.tokenizer" content="[\s\-]+">
<link rel="shortcut icon" href="../../img/jspsych-favicon.png">
<meta name="generator" content="mkdocs-1.0.4, mkdocs-material-4.4.0">
<title>jsPsych - jsPsych</title>
<link rel="stylesheet" href="../../assets/stylesheets/application.0284f74d.css">
<link rel="stylesheet" href="../../assets/stylesheets/application-palette.01803549.css">
<meta name="theme-color" content="#4caf50">
<script src="../../assets/javascripts/modernizr.74668098.js"></script>
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono&display=fallback">
<style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
<link rel="stylesheet" href="../../assets/fonts/material-icons.css">
<script>
window.ga = window.ga || function() {
(ga.q = ga.q || []).push(arguments)
}
ga.l = +new Date
/* Setup integration and send page view */
ga("create", "UA-50563838-1", "auto")
ga("set", "anonymizeIp", true)
ga("send", "pageview")
/* Register handler to log search on blur */
document.addEventListener("DOMContentLoaded", () => {
if (document.forms.search) {
var query = document.forms.search.query
query.addEventListener("blur", function() {
if (this.value) {
var path = document.location.pathname;
ga("send", "pageview", path + "?q=" + this.value)
}
})
}
})
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
</head>
<body dir="ltr" data-md-color-primary="green" data-md-color-accent="orange">
<svg class="md-svg">
<defs>
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448" id="__github"><path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>
</defs>
</svg>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
<a href="#the-jspsych-core-library" tabindex="1" class="md-skip">
Skip to content
</a>
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid">
<div class="md-flex">
<div class="md-flex__cell md-flex__cell--shrink">
<a href="../.." title="jsPsych" class="md-header-nav__button md-logo">
<img src="../../img/jspsych-logo-no-text-mono.svg" width="24" height="24">
</a>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
</div>
<div class="md-flex__cell md-flex__cell--stretch">
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
jsPsych
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
<label class="md-icon md-search__icon" for="__search"></label>
<button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
&#xE5CD;
</button>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="result">
<div class="md-search-result__meta">
Type to start searching
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<div class="md-header-nav__source">
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-source="github">
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#__github" width="24" height="24"></use>
</svg>
</div>
<div class="md-source__repository">
jspsych/jspsych
</div>
</a>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container">
<main class="md-main">
<div class="md-main__inner md-grid" data-md-component="container">
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" data-md-level="0">
<label class="md-nav__title md-nav__title--site" for="__drawer">
<a href="../.." title="jsPsych" class="md-nav__button md-logo">
<img src="../../img/jspsych-logo-no-text-mono.svg" width="48" height="48">
</a>
jsPsych
</label>
<div class="md-nav__source">
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-source="github">
<div class="md-source__icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#__github" width="24" height="24"></use>
</svg>
</div>
<div class="md-source__repository">
jspsych/jspsych
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." title="Introduction" class="md-nav__link">
Introduction
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-2" type="checkbox" id="nav-2">
<label class="md-nav__link" for="nav-2">
Tutorials
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-2">
Tutorials
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../tutorials/hello-world/" title="The Basics: Hello World" class="md-nav__link">
The Basics: Hello World
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorials/rt-task/" title="Demo Experiment: Simple Reaction Time Task" class="md-nav__link">
Demo Experiment: Simple Reaction Time Task
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3">
<label class="md-nav__link" for="nav-3">
Overview
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-3">
Overview
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../overview/timeline/" title="Creating an Experiment: The Timeline" class="md-nav__link">
Creating an Experiment: The Timeline
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/trial/" title="Advanced Options for Trials" class="md-nav__link">
Advanced Options for Trials
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/data/" title="Data Storage, Aggregation, and Manipulation" class="md-nav__link">
Data Storage, Aggregation, and Manipulation
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/experiment-options/" title="Experiment Settings" class="md-nav__link">
Experiment Settings
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/callbacks/" title="Event-related Callback Functions" class="md-nav__link">
Event-related Callback Functions
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/record-browser-interactions/" title="Record Browser Interactions" class="md-nav__link">
Record Browser Interactions
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/media-preloading/" title="Media Preloading" class="md-nav__link">
Media Preloading
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/fullscreen/" title="Fullscreen Experiments" class="md-nav__link">
Fullscreen Experiments
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/exclude-browser/" title="Exclude Participants Based on Browser Features" class="md-nav__link">
Exclude Participants Based on Browser Features
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/progress-bar/" title="Automatic Progress Bar" class="md-nav__link">
Automatic Progress Bar
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/mturk/" title="Integrating with Mechanical Turk" class="md-nav__link">
Integrating with Mechanical Turk
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-4" type="checkbox" id="nav-4" checked>
<label class="md-nav__link" for="nav-4">
Core Library API
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-4">
Core Library API
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
jsPsych
</label>
<a href="./" title="jsPsych" class="md-nav__link md-nav__link--active">
jsPsych
</a>
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#jspsychaddnodetoendoftimeline" title="jsPsych.addNodeToEndOfTimeline" class="md-nav__link">
jsPsych.addNodeToEndOfTimeline
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#examples" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#without-callback" title="Without callback" class="md-nav__link">
Without callback
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#with-callback" title="With callback" class="md-nav__link">
With callback
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychcurrenttimelinenodeid" title="jsPsych.currentTimelineNodeID" class="md-nav__link">
jsPsych.currentTimelineNodeID
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_1" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_1" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_1" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychcurrenttrial" title="jsPsych.currentTrial" class="md-nav__link">
jsPsych.currentTrial
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_2" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_2" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_2" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_1" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychendcurrenttimeline" title="jsPsych.endCurrentTimeline" class="md-nav__link">
jsPsych.endCurrentTimeline
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_3" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_3" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_3" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_2" title="Example" class="md-nav__link">
Example
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#loop-indefinitely-until-a-particular-key-is-pressed" title="Loop indefinitely until a particular key is pressed" class="md-nav__link">
Loop indefinitely until a particular key is pressed
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychendexperiment" title="jsPsych.endExperiment" class="md-nav__link">
jsPsych.endExperiment
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_4" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_4" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_4" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_3" title="Example" class="md-nav__link">
Example
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#end-the-experiment-if-a-particular-response-is-given" title="End the experiment if a particular response is given" class="md-nav__link">
End the experiment if a particular response is given
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychfinishtrial" title="jsPsych.finishTrial" class="md-nav__link">
jsPsych.finishTrial
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_5" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_5" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_5" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_4" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychgetdisplayelement" title="jsPsych.getDisplayElement" class="md-nav__link">
jsPsych.getDisplayElement
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_6" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_6" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_6" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_5" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychgetprogressbarcompleted" title="jsPsych.getProgressBarCompleted" class="md-nav__link">
jsPsych.getProgressBarCompleted
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_7" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_7" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_7" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_6" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychinit" title="jsPsych.init" class="md-nav__link">
jsPsych.init
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_8" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_8" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_8" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_7" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychinitsettings" title="jsPsych.initSettings" class="md-nav__link">
jsPsych.initSettings
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_9" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_9" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_9" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_8" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpauseexperiment" title="jsPsych.pauseExperiment" class="md-nav__link">
jsPsych.pauseExperiment
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_10" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_10" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_10" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_9" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychprogress" title="jsPsych.progress" class="md-nav__link">
jsPsych.progress
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_11" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_11" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_11" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_10" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychresumeexperiment" title="jsPsych.resumeExperiment" class="md-nav__link">
jsPsych.resumeExperiment
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_12" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_12" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_12" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_11" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychsetprogressbar" title="jsPsych.setProgressBar" class="md-nav__link">
jsPsych.setProgressBar
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_13" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_13" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_13" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_12" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychstarttime" title="jsPsych.startTime" class="md-nav__link">
jsPsych.startTime
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_14" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_14" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_14" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_13" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychtimelinevariable" title="jsPsych.timelineVariable" class="md-nav__link">
jsPsych.timelineVariable
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_15" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_15" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_15" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#examples_1" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#standard-use-as-a-parameter-for-a-trial" title="Standard use as a parameter for a trial" class="md-nav__link">
Standard use as a parameter for a trial
</a>
</li>
<li class="md-nav__item">
<a href="#invoking-immediately-in-a-function" title="Invoking immediately in a function" class="md-nav__link">
Invoking immediately in a function
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychtotaltime" title="jsPsych.totalTime" class="md-nav__link">
jsPsych.totalTime
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_16" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_16" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_16" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_14" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../jspsych-data/" title="jsPsych.data" class="md-nav__link">
jsPsych.data
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-randomization/" title="jsPsych.randomization" class="md-nav__link">
jsPsych.randomization
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-turk/" title="jsPsych.turk" class="md-nav__link">
jsPsych.turk
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-pluginAPI/" title="jsPsych.pluginAPI" class="md-nav__link">
jsPsych.pluginAPI
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-5" type="checkbox" id="nav-5">
<label class="md-nav__link" for="nav-5">
Plugins
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-5">
Plugins
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../plugins/overview/" title="Overview" class="md-nav__link">
Overview
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/creating-a-plugin/" title="Creating a New Plugin" class="md-nav__link">
Creating a New Plugin
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-animation/" title="jspsych-animation" class="md-nav__link">
jspsych-animation
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-audio-button-response/" title="jspsych-audio-button-response" class="md-nav__link">
jspsych-audio-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-audio-keyboard-response/" title="jspsych-audio-keyboard-response" class="md-nav__link">
jspsych-audio-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-audio-slider-response/" title="jspsych-audio-slider-response" class="md-nav__link">
jspsych-audio-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-call-function/" title="jspsych-call-function" class="md-nav__link">
jspsych-call-function
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-categorize-animation/" title="jspsych-categorize-animation" class="md-nav__link">
jspsych-categorize-animation
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-categorize-html/" title="jspsych-categorize-html" class="md-nav__link">
jspsych-categorize-html
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-categorize-image/" title="jspsych-categorize-image" class="md-nav__link">
jspsych-categorize-image
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-cloze/" title="jspsych-cloze" class="md-nav__link">
jspsych-cloze
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-external-html/" title="jspsych-external-html" class="md-nav__link">
jspsych-external-html
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-free-sort/" title="jspsych-free-sort" class="md-nav__link">
jspsych-free-sort
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-fullscreen/" title="jspsych-fullscreen" class="md-nav__link">
jspsych-fullscreen
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-html-button-response/" title="jspsych-html-button-response" class="md-nav__link">
jspsych-html-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-html-keyboard-response/" title="jspsych-html-keyboard-response" class="md-nav__link">
jspsych-html-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-html-slider-response/" title="jspsych-html-slider-response" class="md-nav__link">
jspsych-html-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-iat-html/" title="jspsych-iat-html" class="md-nav__link">
jspsych-iat-html
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-iat-image/" title="jspsych-iat-image" class="md-nav__link">
jspsych-iat-image
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-image-button-response/" title="jspsych-image-button-response" class="md-nav__link">
jspsych-image-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-image-keyboard-response/" title="jspsych-image-keyboard-response" class="md-nav__link">
jspsych-image-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-image-slider-response/" title="jspsych-image-slider-response" class="md-nav__link">
jspsych-image-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-instructions/" title="jspsych-instructions" class="md-nav__link">
jspsych-instructions
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-rdk/" title="jspsych-rdk" class="md-nav__link">
jspsych-rdk
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-reconstruction/" title="jspsych-reconstruction" class="md-nav__link">
jspsych-reconstruction
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-resize/" title="jspsych-resize" class="md-nav__link">
jspsych-resize
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-same-different-html/" title="jspsych-same-different-html" class="md-nav__link">
jspsych-same-different-html
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-same-different-image/" title="jspsych-same-different-image" class="md-nav__link">
jspsych-same-different-image
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-serial-reaction-time/" title="jspsych-serial-reaction-time" class="md-nav__link">
jspsych-serial-reaction-time
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-serial-reaction-time-mouse/" title="jspsych-serial-reaction-time-mouse" class="md-nav__link">
jspsych-serial-reaction-time-mouse
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-survey-html-form/" title="jspsych-survey-html-form" class="md-nav__link">
jspsych-survey-html-form
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-survey-likert/" title="jspsych-survey-likert" class="md-nav__link">
jspsych-survey-likert
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-survey-multi-choice/" title="jspsych-survey-multi-choice" class="md-nav__link">
jspsych-survey-multi-choice
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-survey-multi-select/" title="jspsych-survey-multi-select" class="md-nav__link">
jspsych-survey-multi-select
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-survey-text/" title="jspsych-survey-text" class="md-nav__link">
jspsych-survey-text
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-video-button-response/" title="jspsych-video-button-response" class="md-nav__link">
jspsych-video-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-video-keyboard-response/" title="jspsych-video-keyboard-response" class="md-nav__link">
jspsych-video-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-video-slider-response/" title="jspsych-video-slider-response" class="md-nav__link">
jspsych-video-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-visual-search-circle/" title="jspsych-visual-search-circle" class="md-nav__link">
jspsych-visual-search-circle
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-vsl-animate-occlusion/" title="jspsych-vsl-animate-occlusion" class="md-nav__link">
jspsych-vsl-animate-occlusion
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/jspsych-vsl-grid-scene/" title="jspsych-vsl-grid-scene" class="md-nav__link">
jspsych-vsl-grid-scene
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6">
<label class="md-nav__link" for="nav-6">
About
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
<label class="md-nav__title" for="nav-6">
About
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../about/about/" title="About jsPsych" class="md-nav__link">
About jsPsych
</a>
</li>
<li class="md-nav__item">
<a href="../../about/support/" title="Getting Help" class="md-nav__link">
Getting Help
</a>
</li>
<li class="md-nav__item">
<a href="../../about/contributing/" title="Contributing to jsPsych" class="md-nav__link">
Contributing to jsPsych
</a>
</li>
<li class="md-nav__item">
<a href="../../about/license/" title="License" class="md-nav__link">
License
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary">
<label class="md-nav__title" for="__toc">Table of contents</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#jspsychaddnodetoendoftimeline" title="jsPsych.addNodeToEndOfTimeline" class="md-nav__link">
jsPsych.addNodeToEndOfTimeline
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#examples" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#without-callback" title="Without callback" class="md-nav__link">
Without callback
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#with-callback" title="With callback" class="md-nav__link">
With callback
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychcurrenttimelinenodeid" title="jsPsych.currentTimelineNodeID" class="md-nav__link">
jsPsych.currentTimelineNodeID
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_1" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_1" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_1" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychcurrenttrial" title="jsPsych.currentTrial" class="md-nav__link">
jsPsych.currentTrial
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_2" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_2" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_2" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_1" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychendcurrenttimeline" title="jsPsych.endCurrentTimeline" class="md-nav__link">
jsPsych.endCurrentTimeline
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_3" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_3" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_3" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_2" title="Example" class="md-nav__link">
Example
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#loop-indefinitely-until-a-particular-key-is-pressed" title="Loop indefinitely until a particular key is pressed" class="md-nav__link">
Loop indefinitely until a particular key is pressed
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychendexperiment" title="jsPsych.endExperiment" class="md-nav__link">
jsPsych.endExperiment
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_4" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_4" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_4" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_3" title="Example" class="md-nav__link">
Example
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#end-the-experiment-if-a-particular-response-is-given" title="End the experiment if a particular response is given" class="md-nav__link">
End the experiment if a particular response is given
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychfinishtrial" title="jsPsych.finishTrial" class="md-nav__link">
jsPsych.finishTrial
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_5" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_5" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_5" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_4" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychgetdisplayelement" title="jsPsych.getDisplayElement" class="md-nav__link">
jsPsych.getDisplayElement
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_6" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_6" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_6" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_5" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychgetprogressbarcompleted" title="jsPsych.getProgressBarCompleted" class="md-nav__link">
jsPsych.getProgressBarCompleted
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_7" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_7" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_7" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_6" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychinit" title="jsPsych.init" class="md-nav__link">
jsPsych.init
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_8" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_8" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_8" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_7" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychinitsettings" title="jsPsych.initSettings" class="md-nav__link">
jsPsych.initSettings
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_9" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_9" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_9" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_8" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpauseexperiment" title="jsPsych.pauseExperiment" class="md-nav__link">
jsPsych.pauseExperiment
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_10" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_10" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_10" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_9" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychprogress" title="jsPsych.progress" class="md-nav__link">
jsPsych.progress
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_11" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_11" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_11" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_10" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychresumeexperiment" title="jsPsych.resumeExperiment" class="md-nav__link">
jsPsych.resumeExperiment
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_12" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_12" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_12" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_11" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychsetprogressbar" title="jsPsych.setProgressBar" class="md-nav__link">
jsPsych.setProgressBar
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_13" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_13" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_13" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_12" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychstarttime" title="jsPsych.startTime" class="md-nav__link">
jsPsych.startTime
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_14" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_14" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_14" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_13" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychtimelinevariable" title="jsPsych.timelineVariable" class="md-nav__link">
jsPsych.timelineVariable
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_15" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_15" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_15" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#examples_1" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#standard-use-as-a-parameter-for-a-trial" title="Standard use as a parameter for a trial" class="md-nav__link">
Standard use as a parameter for a trial
</a>
</li>
<li class="md-nav__item">
<a href="#invoking-immediately-in-a-function" title="Invoking immediately in a function" class="md-nav__link">
Invoking immediately in a function
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychtotaltime" title="jsPsych.totalTime" class="md-nav__link">
jsPsych.totalTime
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parameters_16" title="Parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#return-value_16" title="Return value" class="md-nav__link">
Return value
</a>
</li>
<li class="md-nav__item">
<a href="#description_16" title="Description" class="md-nav__link">
Description
</a>
</li>
<li class="md-nav__item">
<a href="#example_14" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/jspsych/jsPsych/edit/master/docs/core_library/jspsych-core.md" title="Edit this page" class="md-icon md-content__icon">&#xE3C9;</a>
<h1 id="the-jspsych-core-library">The jsPsych core library<a class="headerlink" href="#the-jspsych-core-library" title="Permanent link">&para;</a></h1>
<hr />
<h2 id="jspsychaddnodetoendoftimeline">jsPsych.addNodeToEndOfTimeline<a class="headerlink" href="#jspsychaddnodetoendoftimeline" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.addNodeToEndOfTimeline(node_parameters, callback)
</pre></div>
<h3 id="parameters">Parameters<a class="headerlink" href="#parameters" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>node_parameters</td>
<td>object</td>
<td>An object defining a timeline. It must have, at a minimum, a <code>timeline</code> parameter with a valid timeline array as the value for that parameter.</td>
</tr>
<tr>
<td>callback</td>
<td>function</td>
<td>An optional callback function. If adding the node to the timeline requires any preloading of media assets, this callback will be triggered after preloading is compelte.</td>
</tr>
</tbody>
</table>
<h3 id="return-value">Return value<a class="headerlink" href="#return-value" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="description">Description<a class="headerlink" href="#description" title="Permanent link">&para;</a></h3>
<p>Adds the timeline to the end of the experiment.</p>
<h3 id="examples">Examples<a class="headerlink" href="#examples" title="Permanent link">&para;</a></h3>
<h4 id="without-callback">Without callback<a class="headerlink" href="#without-callback" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;html-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;This is a new trial.&#39;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">new_timeline</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">trial</span><span class="p">]</span>
<span class="p">}</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">addNodeToEndOfTimeline</span><span class="p">(</span><span class="nx">new_timeline</span><span class="p">)</span>
</pre></div>
<h3 id="with-callback">With callback<a class="headerlink" href="#with-callback" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">first</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;html-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;first trial; new trial added when on_finish is called&#39;</span><span class="p">,</span>
<span class="nx">on_finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pauseExperiment</span><span class="p">();</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">addNodeToEndOfTimeline</span><span class="p">({</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/happy_face_4.jpg&#39;</span>
<span class="p">}]</span>
<span class="p">},</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">resumeExperiment</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
<hr />
<h2 id="jspsychcurrenttimelinenodeid">jsPsych.currentTimelineNodeID<a class="headerlink" href="#jspsychcurrenttimelinenodeid" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.currentTimelineNodeID()
</pre></div>
<h3 id="parameters_1">Parameters<a class="headerlink" href="#parameters_1" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_1">Return value<a class="headerlink" href="#return-value_1" title="Permanent link">&para;</a></h3>
<p>Returns the ID of the TimelineNode that is currently active.</p>
<h3 id="description_1">Description<a class="headerlink" href="#description_1" title="Permanent link">&para;</a></h3>
<p>Gets the ID of the active TimelineNode. The ID is a string that follows a specific format:</p>
<ul>
<li><code>"0.0"</code> is the ID of the first top-level TimelineNode</li>
<li><code>"1.0"</code> is the ID of the second top-level TimelineNode</li>
<li><code>"2.0"</code> is the ID of the third top-level TimelineNode, and so on...</li>
</ul>
<p>If a TimelineNode iterates multiple times (using the loop function, for example), then the iterations are indicated in the second number:</p>
<ul>
<li><code>"0.0"</code> is the ID of the first top-level TimelineNode during the first iteration</li>
<li><code>"0.1"</code> is the ID of the first top-level TimelineNode during the second iteration</li>
<li><code>"0.2"</code> is the ID of the first top-level TimelineNode during the third iteration, and so on...</li>
</ul>
<p>If TimelineNodes are nested in other TimelineNodes, then the hierarchical structure is shown with <code>"."</code>:</p>
<ul>
<li><code>"0.0-1.0"</code> is the ID of the second TimelineNode on the timeline of the first top-level TimelineNode.</li>
<li><code>"0.0-2.0"</code> is the ID of the third TimelineNode on the timeline of the first top-level TimelineNode, and so on...</li>
</ul>
<p>The rules about iterations apply throughout the hierarchical ID:</p>
<ul>
<li><code>"0.2-1.3"</code> is the ID of the second TimelineNode, executing for the fourth time, on the timeline of the first top-level TimelineNode, executing for the third time.</li>
</ul>
<h3 id="example">Example<a class="headerlink" href="#example" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">id</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">currentTimelineNodeID</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;The current TimelineNode ID is &#39;</span><span class="o">+</span><span class="nx">id</span><span class="p">);</span>
</pre></div>
<hr />
<h2 id="jspsychcurrenttrial">jsPsych.currentTrial<a class="headerlink" href="#jspsychcurrenttrial" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.currentTrial()
</pre></div>
<h3 id="parameters_2">Parameters<a class="headerlink" href="#parameters_2" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_2">Return value<a class="headerlink" href="#return-value_2" title="Permanent link">&para;</a></h3>
<p>Returns the object describing the current trial. The object will contain all of the parameters associated with the current trial.</p>
<h3 id="description_2">Description<a class="headerlink" href="#description_2" title="Permanent link">&para;</a></h3>
<p>Get a description of the current trial</p>
<h3 id="example_1">Example<a class="headerlink" href="#example_1" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">trial</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">currentTrial</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;The current trial is using the &#39;</span><span class="o">+</span><span class="nx">trial</span><span class="p">.</span><span class="nx">type</span><span class="o">+</span><span class="s1">&#39; plugin&#39;</span><span class="p">);</span>
</pre></div>
<hr />
<h2 id="jspsychendcurrenttimeline">jsPsych.endCurrentTimeline<a class="headerlink" href="#jspsychendcurrenttimeline" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.endCurrentTimeline
</pre></div>
<h3 id="parameters_3">Parameters<a class="headerlink" href="#parameters_3" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_3">Return value<a class="headerlink" href="#return-value_3" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="description_3">Description<a class="headerlink" href="#description_3" title="Permanent link">&para;</a></h3>
<p>Ends the current timeline. If timelines are nested, then only the timeline that contains the current trial is ended.</p>
<h3 id="example_2">Example<a class="headerlink" href="#example_2" title="Permanent link">&para;</a></h3>
<h4 id="loop-indefinitely-until-a-particular-key-is-pressed">Loop indefinitely until a particular key is pressed<a class="headerlink" href="#loop-indefinitely-until-a-particular-key-is-pressed" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">images</span> <span class="o">=</span> <span class="p">[</span>
<span class="s2">&quot;img/1.gif&quot;</span><span class="p">,</span> <span class="s2">&quot;img/2.gif&quot;</span><span class="p">,</span> <span class="s2">&quot;img/3.gif&quot;</span><span class="p">,</span> <span class="s2">&quot;img/4.gif&quot;</span><span class="p">,</span>
<span class="s2">&quot;img/5.gif&quot;</span><span class="p">,</span> <span class="s2">&quot;img/6.gif&quot;</span><span class="p">,</span> <span class="s2">&quot;img/7.gif&quot;</span><span class="p">,</span> <span class="s2">&quot;img/8.gif&quot;</span><span class="p">,</span>
<span class="s2">&quot;img/9.gif&quot;</span><span class="p">,</span> <span class="s2">&quot;img/10.gif&quot;</span>
<span class="p">];</span>
<span class="kd">var</span> <span class="nx">trials</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">images</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">trials</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="nx">images</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">block</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="mi">89</span><span class="p">,</span> <span class="mi">78</span><span class="p">],</span> <span class="c1">// Y or N</span>
<span class="nx">prompt</span><span class="o">:</span> <span class="s1">&#39;&lt;p&gt;Press Y to Continue. Press N to end this node of the experiment.&lt;/p&gt;&#39;</span><span class="p">,</span>
<span class="nx">on_finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">key_press</span> <span class="o">==</span> <span class="mi">78</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">endCurrentTimeline</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="nx">trials</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">after_block</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;html-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;&lt;p&gt;The next node&lt;/p&gt;&#39;</span><span class="p">,</span>
<span class="nx">is_html</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">init</span><span class="p">({</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">block</span><span class="p">,</span> <span class="nx">after_block</span><span class="p">],</span>
<span class="nx">on_finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">displayData</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
<hr />
<h2 id="jspsychendexperiment">jsPsych.endExperiment<a class="headerlink" href="#jspsychendexperiment" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.endExperiment(end_message)
</pre></div>
<h3 id="parameters_4">Parameters<a class="headerlink" href="#parameters_4" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>end_message</td>
<td>string</td>
<td>A message to display on the screen after the experiment is over.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_4">Return value<a class="headerlink" href="#return-value_4" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="description_4">Description<a class="headerlink" href="#description_4" title="Permanent link">&para;</a></h3>
<p>Ends the experiment, skipping all remaining trials.</p>
<h3 id="example_3">Example<a class="headerlink" href="#example_3" title="Permanent link">&para;</a></h3>
<h4 id="end-the-experiment-if-a-particular-response-is-given">End the experiment if a particular response is given<a class="headerlink" href="#end-the-experiment-if-a-particular-response-is-given" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;image1.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="mi">89</span><span class="p">,</span><span class="mi">78</span><span class="p">],</span> <span class="c1">// Y or N</span>
<span class="nx">prompt</span><span class="o">:</span> <span class="s1">&#39;&lt;p&gt;Press Y to Continue. Press N to end the experiment&lt;/p&gt;&#39;</span><span class="p">,</span>
<span class="nx">on_finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">key_press</span> <span class="o">==</span> <span class="mi">78</span><span class="p">){</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">endExperiment</span><span class="p">(</span><span class="s1">&#39;The experiment was ended by pressing N.&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
<hr />
<h2 id="jspsychfinishtrial">jsPsych.finishTrial<a class="headerlink" href="#jspsychfinishtrial" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.finishTrial(data)
</pre></div>
<h3 id="parameters_5">Parameters<a class="headerlink" href="#parameters_5" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>object</td>
<td>The data to store for the trial.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_5">Return value<a class="headerlink" href="#return-value_5" title="Permanent link">&para;</a></h3>
<p>Returns nothing.</p>
<h3 id="description_5">Description<a class="headerlink" href="#description_5" title="Permanent link">&para;</a></h3>
<p>This method tells jsPsych that the current trial is over. It is used in all of the plugins to end the current trial. When the trial ends a few things happen:</p>
<ul>
<li>The data is stored using <code>jsPsych.data.write()</code></li>
<li>The on_finish callback function is executed for the trial</li>
<li>The on_trial_finish callback function is executed</li>
<li>The progress bar is updated if it is being displayed</li>
<li>The experiment ends if the trial is the last one (and the on_finish callback function is executed).</li>
<li>The next trial, if one exists, is started.</li>
</ul>
<h3 id="example_4">Example<a class="headerlink" href="#example_4" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="c1">// this code would be in a plugin</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">finishTrial</span><span class="p">({</span><span class="nx">correct_response</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
</pre></div>
<hr />
<h2 id="jspsychgetdisplayelement">jsPsych.getDisplayElement<a class="headerlink" href="#jspsychgetdisplayelement" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.getDisplayElement()
</pre></div>
<h3 id="parameters_6">Parameters<a class="headerlink" href="#parameters_6" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_6">Return value<a class="headerlink" href="#return-value_6" title="Permanent link">&para;</a></h3>
<p>Returns the HTML DOM element used for displaying the experiment.</p>
<h3 id="description_6">Description<a class="headerlink" href="#description_6" title="Permanent link">&para;</a></h3>
<p>Get the DOM element that displays the experiment.</p>
<h3 id="example_5">Example<a class="headerlink" href="#example_5" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">getDisplayElement</span><span class="p">();</span>
<span class="c1">// hide the jsPsych display</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="s1">&#39;hidden&#39;</span><span class="p">;</span>
</pre></div>
<hr />
<h2 id="jspsychgetprogressbarcompleted">jsPsych.getProgressBarCompleted<a class="headerlink" href="#jspsychgetprogressbarcompleted" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.getProgressBarCompleted()
</pre></div>
<h3 id="parameters_7">Parameters<a class="headerlink" href="#parameters_7" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_7">Return value<a class="headerlink" href="#return-value_7" title="Permanent link">&para;</a></h3>
<p>Returns a value between 0 and 1 representing how full the progress bar currently is.</p>
<h3 id="description_7">Description<a class="headerlink" href="#description_7" title="Permanent link">&para;</a></h3>
<p>Used to get the current value of the progress bar. Works for automated and manual control.</p>
<h3 id="example_6">Example<a class="headerlink" href="#example_6" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">progress_bar_amount</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">getProgressBarCompleted</span><span class="p">();</span>
</pre></div>
<hr />
<h2 id="jspsychinit">jsPsych.init<a class="headerlink" href="#jspsychinit" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.init(settings)
</pre></div>
<h3 id="parameters_8">Parameters<a class="headerlink" href="#parameters_8" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>settings</td>
<td>object</td>
<td>The settings object for initializing jsPsych. See table below.</td>
</tr>
</tbody>
</table>
<p>The settings object can contain several parameters. The only <em>required</em> parameter is <code>timeline</code>.</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>timeline</td>
<td>array</td>
<td>An array containing the objects that describe the experiment timeline. See <a href="../../overview/timeline/">Creating an Experiment: The Timeline</a>.</td>
</tr>
<tr>
<td>display_element</td>
<td>string</td>
<td>The ID of an HTML element to display the experiment in. If left blank, jsPsych will use the <code>&lt;body&gt;</code> element to display content. All keyboard event listeners are bound to this element. In order for a keyboard event to be detected, this element must have focus (be the last thing that the subject clicked on).</td>
</tr>
<tr>
<td>on_finish</td>
<td>function</td>
<td>Function to execute when the experiment ends.</td>
</tr>
<tr>
<td>on_trial_start</td>
<td>function</td>
<td>Function to execute when a new trial begins.</td>
</tr>
<tr>
<td>on_trial_finish</td>
<td>function</td>
<td>Function to execute when a trial ends.</td>
</tr>
<tr>
<td>on_data_update</td>
<td>function</td>
<td>Function to execute every time data is stored using the <code>jsPsych.data.write</code> method. All plugins use this method to save data (via a call to <code>jsPsych.finishTrial</code>, so this function runs every time a plugin stores new data.</td>
</tr>
<tr>
<td>on_interaction_data_update</td>
<td>function</td>
<td>Function to execute every time a new interaction event occurs. Interaction events include clicking on a different window (blur), returning to the experiment window (focus), entering full screen mode (fullscreenenter), and exiting full screen mode (fullscreenexit).</td>
</tr>
<tr>
<td>on_close</td>
<td>function</td>
<td>Function to execute when the user leaves the page. Can be used, for example, to save data before the page is closed.</td>
</tr>
<tr>
<td>exclusions</td>
<td>object</td>
<td>Specifies restrictions on the browser the subject can use to complete the experiment. See list of options below.</td>
</tr>
<tr>
<td>show_progress_bar</td>
<td>boolean</td>
<td>If true, then <a href="../../overview/progress-bar/">a progress bar</a> is shown at the top of the page.</td>
</tr>
<tr>
<td>message_progress_bar</td>
<td>string</td>
<td>Message to display next to the progress bar. The default is 'Completion Progress'.</td>
</tr>
<tr>
<td>auto_update_progress_bar</td>
<td>boolean</td>
<td>If true, then the progress bar at the top of the page will automatically update as every top-level timeline or trial is completed.</td>
</tr>
<tr>
<td>show_preload_progress_bar</td>
<td>boolean</td>
<td>If true, then a progress bar is displayed while media files are automatically preloaded.</td>
</tr>
<tr>
<td>preload_audio</td>
<td>array</td>
<td>An array of audio files to preload before starting the experiment.</td>
</tr>
<tr>
<td>preload_images</td>
<td>array</td>
<td>An array of image files to preload before starting the experiment.</td>
</tr>
<tr>
<td>preload_video</td>
<td>array</td>
<td>An array of video files to preload before starting the experiment.</td>
</tr>
<tr>
<td>max_load_time</td>
<td>numeric</td>
<td>The maximum number of milliseconds to wait for content to preload. If the wait time is exceeded an error message is displayed and the experiment stops. The default value is 60 seconds.</td>
</tr>
<tr>
<td>max_preload_attempts</td>
<td>numeric</td>
<td>The maximum number of attempts to preload each file in case of an error. The default value is 10. There is a small delay of 200ms between each attempt.</td>
</tr>
<tr>
<td>use_webaudio</td>
<td>boolean</td>
<td>If false, then jsPsych will not attempt to use the WebAudio API for audio playback. Instead, HTML5 Audio objects will be used. The WebAudio API offers more precise control over the timing of audio events, and should be used when possible. The default value is true.</td>
</tr>
<tr>
<td>default_iti</td>
<td>numeric</td>
<td>The default inter-trial interval in ms. The default value if none is specified is 0ms.</td>
</tr>
<tr>
<td>experiment_width</td>
<td>numeric</td>
<td>The desired width of the jsPsych container in pixels. If left undefined, the width will be 100% of the display element. Usually this is the <code>&lt;body&gt;</code> element, and the width will be 100% of the screen size.</td>
</tr>
</tbody>
</table>
<p>Possible values for the exclusions parameter above.</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>min_width</td>
<td>numeric</td>
<td>The minimum width of the browser window. If the width is below this value, a message will be displayed to the subject asking them to maximize their browser window. The experiment will sit on this page until the browser window is large enough.</td>
</tr>
<tr>
<td>min_height</td>
<td>numeric</td>
<td>Same as above, but with height.</td>
</tr>
<tr>
<td>audio</td>
<td>boolean</td>
<td>Set to true to require support for the WebAudio API (used by plugins that play audio files).</td>
</tr>
</tbody>
</table>
<h3 id="return-value_8">Return value<a class="headerlink" href="#return-value_8" title="Permanent link">&para;</a></h3>
<p>Returns nothing.</p>
<h3 id="description_8">Description<a class="headerlink" href="#description_8" title="Permanent link">&para;</a></h3>
<p>This method configures and starts the experiment.</p>
<h3 id="example_7">Example<a class="headerlink" href="#example_7" title="Permanent link">&para;</a></h3>
<p>See any of the plugin examples in the <a href="https://github.com/jodeleeuw/jsPsych/tree/master/examples">examples folder</a> in the GitHub repository.</p>
<hr />
<h2 id="jspsychinitsettings">jsPsych.initSettings<a class="headerlink" href="#jspsychinitsettings" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.initSettings()
</pre></div>
<h3 id="parameters_9">Parameters<a class="headerlink" href="#parameters_9" title="Permanent link">&para;</a></h3>
<p>None</p>
<h3 id="return-value_9">Return value<a class="headerlink" href="#return-value_9" title="Permanent link">&para;</a></h3>
<p>Returns the settings object used to initialize the experiment.</p>
<h3 id="description_9">Description<a class="headerlink" href="#description_9" title="Permanent link">&para;</a></h3>
<p>Gets the object containing the settings for the current experiment.</p>
<h3 id="example_8">Example<a class="headerlink" href="#example_8" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">settings</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">initSettings</span><span class="p">();</span>
<span class="c1">// check the experiment structure</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">settings</span><span class="p">.</span><span class="nx">timeline</span><span class="p">));</span>
</pre></div>
<hr />
<h2 id="jspsychpauseexperiment">jsPsych.pauseExperiment<a class="headerlink" href="#jspsychpauseexperiment" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pauseExperiment()
</pre></div>
<h3 id="parameters_10">Parameters<a class="headerlink" href="#parameters_10" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_10">Return value<a class="headerlink" href="#return-value_10" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="description_10">Description<a class="headerlink" href="#description_10" title="Permanent link">&para;</a></h3>
<p>Pauses the experiment. The experiment will finish the current trial, but will not execute any additional trials until <code>jsPsych.resumeExperiment()</code> is called.</p>
<h3 id="example_9">Example<a class="headerlink" href="#example_9" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;html-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;Press p to take a 30 second break. Otherwise, press c to continue immediately.&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;p&#39;</span><span class="p">,</span><span class="s1">&#39;c&#39;</span><span class="p">],</span>
<span class="nx">on_finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">key_press</span> <span class="o">==</span> <span class="mi">80</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// 80 = p</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pauseExperiment</span><span class="p">();</span>
<span class="nx">setTimeout</span><span class="p">(</span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">resumeExperiment</span><span class="p">,</span> <span class="mi">30000</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
<hr />
<h2 id="jspsychprogress">jsPsych.progress<a class="headerlink" href="#jspsychprogress" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.progress()
</pre></div>
<h3 id="parameters_11">Parameters<a class="headerlink" href="#parameters_11" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_11">Return value<a class="headerlink" href="#return-value_11" title="Permanent link">&para;</a></h3>
<p>Returns an object with the following properties:</p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>total_trials</td>
<td>numeric</td>
<td>Indicates the number of trials in the experiment. Note that this does not count possible loops or skipped trials due to conditional statements.</td>
</tr>
<tr>
<td>current_trial_global</td>
<td>numeric</td>
<td>Returns the trial index of the current trial in a global scope. Every trial will increase this count by 1.</td>
</tr>
<tr>
<td>percent_complete</td>
<td>numeric</td>
<td>Estimates the percent of the experiment that is complete. Works as expected for experiments without conditional or looping timelines. For complex timelines, the percent is an approximation.</td>
</tr>
</tbody>
</table>
<h3 id="description_11">Description<a class="headerlink" href="#description_11" title="Permanent link">&para;</a></h3>
<p>This method returns information about the length of the experiment and the subject's current location in the experiment timeline.</p>
<h3 id="example_10">Example<a class="headerlink" href="#example_10" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">progress</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">progress</span><span class="p">();</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;You have completed approximately &#39;</span><span class="o">+</span><span class="nx">progress</span><span class="p">.</span><span class="nx">percent_complete</span><span class="o">+</span><span class="s1">&#39;% of the experiment&#39;</span><span class="p">);</span>
</pre></div>
<hr />
<h2 id="jspsychresumeexperiment">jsPsych.resumeExperiment<a class="headerlink" href="#jspsychresumeexperiment" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.resumeExperiment()
</pre></div>
<h3 id="parameters_12">Parameters<a class="headerlink" href="#parameters_12" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_12">Return value<a class="headerlink" href="#return-value_12" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="description_12">Description<a class="headerlink" href="#description_12" title="Permanent link">&para;</a></h3>
<p>Resumes the experiment after a call to <code>jsPsych.pauseExperiment()</code>. If the post trial delay (<code>post_trial_gap</code>) has not yet been reached, then the experiment will not continue until the delay is finished. For example, if <code>post_trial_gap</code> was 10,000ms and <code>jsPsych.resumeExperiment()</code> was called 6,000ms after the previous trial finished, then the experiment would not continue for another 4,000ms.</p>
<h3 id="example_11">Example<a class="headerlink" href="#example_11" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;html-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;Press p to take a 30 second break. Otherwise, press c to continue immediately.&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;p&#39;</span><span class="p">,</span><span class="s1">&#39;c&#39;</span><span class="p">],</span>
<span class="nx">on_finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">key_press</span> <span class="o">==</span> <span class="mi">80</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// 80 = p</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pauseExperiment</span><span class="p">();</span>
<span class="nx">setTimeout</span><span class="p">(</span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">resumeExperiment</span><span class="p">,</span> <span class="mi">30000</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
<hr />
<h2 id="jspsychsetprogressbar">jsPsych.setProgressBar<a class="headerlink" href="#jspsychsetprogressbar" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.setProgressBar(value)
</pre></div>
<h3 id="parameters_13">Parameters<a class="headerlink" href="#parameters_13" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>numeric</td>
<td>Proprotion (between 0 and 1) to fill the progress bar.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_13">Return value<a class="headerlink" href="#return-value_13" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="description_13">Description<a class="headerlink" href="#description_13" title="Permanent link">&para;</a></h3>
<p>Set the progress bar to a custom amount. Proportion must be between 0 and 1. Values larger than 1 are treated as 1.</p>
<h3 id="example_12">Example<a class="headerlink" href="#example_12" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">setProgressBar</span><span class="p">(</span><span class="mf">0.85</span><span class="p">);</span>
</pre></div>
<hr />
<h2 id="jspsychstarttime">jsPsych.startTime<a class="headerlink" href="#jspsychstarttime" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.startTime()
</pre></div>
<h3 id="parameters_14">Parameters<a class="headerlink" href="#parameters_14" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_14">Return value<a class="headerlink" href="#return-value_14" title="Permanent link">&para;</a></h3>
<p>Returns a <code>Date</code> object indicating when the experiment began.</p>
<h3 id="description_14">Description<a class="headerlink" href="#description_14" title="Permanent link">&para;</a></h3>
<p>Get the time that the experiment began.</p>
<h3 id="example_13">Example<a class="headerlink" href="#example_13" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">start_time</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">startTime</span><span class="p">();</span>
</pre></div>
<hr />
<h2 id="jspsychtimelinevariable">jsPsych.timelineVariable<a class="headerlink" href="#jspsychtimelinevariable" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.timelineVariable(variable, call_immediate)
</pre></div>
<h3 id="parameters_15">Parameters<a class="headerlink" href="#parameters_15" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>variable</td>
<td>string</td>
<td>Name of the timeline variable</td>
</tr>
<tr>
<td>call_immediate</td>
<td>bool</td>
<td>Typically this parameter is <code>false</code>, or simply ommitted. When <code>false</code>, the return value is a function that returns the timeline variable. This makes <code>jsPsych.timelineVariable</code> suitable for dynamic parameters by default. If <code>true</code> the function returns the value of the timeline variable immediately.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_15">Return value<a class="headerlink" href="#return-value_15" title="Permanent link">&para;</a></h3>
<p>Depends on the value of <code>call_immediate</code> parameter. See description above.</p>
<h3 id="description_15">Description<a class="headerlink" href="#description_15" title="Permanent link">&para;</a></h3>
<p><a href="/overview/timeline/#timeline-variables">Timeline variables</a> are a powerful technique for generating experiments with repetitive procedures but different parameter values. This function fetches the current value of a particular timeline variable. It must be used in conjunction with a timeline that has timeline variables. See the <a href="/overview/timeline/#timeline-variables">timeline variable section</a> for details.</p>
<h3 id="examples_1">Examples<a class="headerlink" href="#examples_1" title="Permanent link">&para;</a></h3>
<h4 id="standard-use-as-a-parameter-for-a-trial">Standard use as a parameter for a trial<a class="headerlink" href="#standard-use-as-a-parameter-for-a-trial" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">&#39;image&#39;</span><span class="p">)</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">procedure</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">trial</span><span class="p">],</span>
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span><span class="nx">image</span><span class="o">:</span> <span class="s1">&#39;face1.png&#39;</span><span class="p">},</span>
<span class="p">{</span><span class="nx">image</span><span class="o">:</span> <span class="s1">&#39;face2.png&#39;</span><span class="p">},</span>
<span class="p">{</span><span class="nx">image</span><span class="o">:</span> <span class="s1">&#39;face3.png&#39;</span><span class="p">},</span>
<span class="p">{</span><span class="nx">image</span><span class="o">:</span> <span class="s1">&#39;face4.png&#39;</span><span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span>
</pre></div>
<h4 id="invoking-immediately-in-a-function">Invoking immediately in a function<a class="headerlink" href="#invoking-immediately-in-a-function" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;html-keyboard-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="k">return</span> <span class="s2">&quot;&lt;img style=&#39;width:100px; height:100px;&#39; src=&#39;&quot;</span><span class="o">+</span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">&#39;image&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;&#39;&gt;&lt;/img&gt;&quot;</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">procedure</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">trial</span><span class="p">],</span>
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span><span class="nx">image</span><span class="o">:</span> <span class="s1">&#39;face1.png&#39;</span><span class="p">},</span>
<span class="p">{</span><span class="nx">image</span><span class="o">:</span> <span class="s1">&#39;face2.png&#39;</span><span class="p">},</span>
<span class="p">{</span><span class="nx">image</span><span class="o">:</span> <span class="s1">&#39;face3.png&#39;</span><span class="p">},</span>
<span class="p">{</span><span class="nx">image</span><span class="o">:</span> <span class="s1">&#39;face4.png&#39;</span><span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span>
</pre></div>
<hr />
<h2 id="jspsychtotaltime">jsPsych.totalTime<a class="headerlink" href="#jspsychtotaltime" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.totalTime()
</pre></div>
<h3 id="parameters_16">Parameters<a class="headerlink" href="#parameters_16" title="Permanent link">&para;</a></h3>
<p>None.</p>
<h3 id="return-value_16">Return value<a class="headerlink" href="#return-value_16" title="Permanent link">&para;</a></h3>
<p>Returns a numeric value indicating the number of milliseconds since <code>jsPsych.init</code> was called.</p>
<h3 id="description_16">Description<a class="headerlink" href="#description_16" title="Permanent link">&para;</a></h3>
<p>Gets the total time the subject has been in the experiment.</p>
<h3 id="example_14">Example<a class="headerlink" href="#example_14" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">time</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">totalTime</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">time</span><span class="p">);</span>
</pre></div>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid">
<a href="../../overview/mturk/" title="Integrating with Mechanical Turk" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
</div>
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
Integrating with Mechanical Turk
</span>
</div>
</a>
<a href="../jspsych-data/" title="jsPsych.data" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
<span class="md-flex__ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
jsPsych.data
</span>
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
</div>
</a>
</nav>
</div>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
<div class="md-footer-copyright__highlight">
Copyright &copy; 2012-2019 Josh de Leeuw
</div>
powered by
<a href="https://www.mkdocs.org">MkDocs</a>
and
<a href="https://squidfunk.github.io/mkdocs-material/">
Material for MkDocs</a>
</div>
<div class="md-footer-social">
<link rel="stylesheet" href="../../assets/fonts/font-awesome.css">
<a href="https://github.com/jspsych" class="md-footer-social__link fa fa-github"></a>
<a href="https://twitter.com/joshdeleeuw" class="md-footer-social__link fa fa-twitter"></a>
</div>
</div>
</div>
</footer>
</div>
<script src="../../assets/javascripts/application.245445c6.js"></script>
<script>app.initialize({version:"1.0.4",url:{base:"../.."}})</script>
</body>
</html>