jsPsych/core_library/jspsych-pluginAPI/index.html
2018-07-16 11:18:25 -05:00

2939 lines
90 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.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-0.17.5, mkdocs-material-2.2.6">
<title>jsPsych.pluginAPI - jsPsych</title>
<link rel="stylesheet" href="../../assets/stylesheets/application.6525f7f6.css">
<link rel="stylesheet" href="../../assets/stylesheets/application-palette.792431c1.css">
<script src="../../assets/javascripts/modernizr.1aa3b519.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono">
<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="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body 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">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="search">
<label class="md-overlay" data-md-component="overlay" for="drawer"></label>
<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">
<span class="md-header-nav__topic">
jsPsych
</span>
<span class="md-header-nav__topic">
jsPsych.pluginAPI
</span>
</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">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" required placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
<label class="md-icon md-search__icon" for="search"></label>
<button type="reset" class="md-icon md-search__icon" data-md-component="reset">&#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">
<span class="md-nav__button md-logo">
<img src="../../img/jspsych-logo-no-text-mono.svg" width="24" height="24">
</span>
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/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">
<a href="../jspsych-core/" title="jsPsych" class="md-nav__link">
jsPsych
</a>
</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 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.pluginAPI
</label>
<a href="./" title="jsPsych.pluginAPI" class="md-nav__link md-nav__link--active">
jsPsych.pluginAPI
</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="#jspsychpluginapiautopreload" title="jsPsych.pluginAPI.autoPreload" class="md-nav__link">
jsPsych.pluginAPI.autoPreload
</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>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapicancelallkeyboardresponses" title="jsPsych.pluginAPI.cancelAllKeyboardResponses" class="md-nav__link">
jsPsych.pluginAPI.cancelAllKeyboardResponses
</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="#examples_1" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapicancelkeyboardresponse" title="jsPsych.pluginAPI.cancelKeyboardResponse" class="md-nav__link">
jsPsych.pluginAPI.cancelKeyboardResponse
</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="#examples_2" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapiclearalltimeouts" title="jsPsych.pluginAPI.clearAllTimeouts" class="md-nav__link">
jsPsych.pluginAPI.clearAllTimeouts
</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>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapicomparekeys" title="jsPsych.pluginAPI.compareKeys" class="md-nav__link">
jsPsych.pluginAPI.compareKeys
</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="#examples_3" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapiconvertkeycharactertokeycode" title="jsPsych.pluginAPI.convertKeyCharacterToKeyCode" class="md-nav__link">
jsPsych.pluginAPI.convertKeyCharacterToKeyCode
</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="#examples_4" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapiconvertkeycodetokeycharacter" title="jsPsych.pluginAPI.convertKeyCodeToKeyCharacter" class="md-nav__link">
jsPsych.pluginAPI.convertKeyCodeToKeyCharacter
</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="#examples_5" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapigetaudiobuffer" title="jsPsych.pluginAPI.getAudioBuffer" class="md-nav__link">
jsPsych.pluginAPI.getAudioBuffer
</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="#examples_6" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapigetkeyboardresponse" title="jsPsych.pluginAPI.getKeyboardResponse" class="md-nav__link">
jsPsych.pluginAPI.getKeyboardResponse
</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="#examples_7" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#get-a-single-response-from-any-key" title="Get a single response from any key" class="md-nav__link">
Get a single response from any key
</a>
</li>
<li class="md-nav__item">
<a href="#get-a-responses-from-a-key-until-the-letter-q-is-pressed" title="Get a responses from a key until the letter Q is pressed" class="md-nav__link">
Get a responses from a key until the letter Q is pressed
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapipreloadaudiofiles" title="jsPsych.pluginAPI.preloadAudioFiles" class="md-nav__link">
jsPsych.pluginAPI.preloadAudioFiles
</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="#examples_8" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basic-use" title="Basic use" class="md-nav__link">
Basic use
</a>
</li>
<li class="md-nav__item">
<a href="#show-progress-of-loading" title="Show progress of loading" class="md-nav__link">
Show progress of loading
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapipreloadimages" title="jsPsych.pluginAPI.preloadImages" class="md-nav__link">
jsPsych.pluginAPI.preloadImages
</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="#examples_9" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basic-use_1" title="Basic use" class="md-nav__link">
Basic use
</a>
</li>
<li class="md-nav__item">
<a href="#show-progress-of-loading_1" title="Show progress of loading" class="md-nav__link">
Show progress of loading
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapiregisterpreload" title="jsPsych.pluginAPI.registerPreload" class="md-nav__link">
jsPsych.pluginAPI.registerPreload
</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" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapisettimeout" title="jsPsych.pluginAPI.setTimeout" class="md-nav__link">
jsPsych.pluginAPI.setTimeout
</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="#examples_10" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</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-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-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-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/" title="jspsych-video" class="md-nav__link">
jspsych-video
</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="#jspsychpluginapiautopreload" title="jsPsych.pluginAPI.autoPreload" class="md-nav__link">
jsPsych.pluginAPI.autoPreload
</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>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapicancelallkeyboardresponses" title="jsPsych.pluginAPI.cancelAllKeyboardResponses" class="md-nav__link">
jsPsych.pluginAPI.cancelAllKeyboardResponses
</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="#examples_1" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapicancelkeyboardresponse" title="jsPsych.pluginAPI.cancelKeyboardResponse" class="md-nav__link">
jsPsych.pluginAPI.cancelKeyboardResponse
</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="#examples_2" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapiclearalltimeouts" title="jsPsych.pluginAPI.clearAllTimeouts" class="md-nav__link">
jsPsych.pluginAPI.clearAllTimeouts
</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>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapicomparekeys" title="jsPsych.pluginAPI.compareKeys" class="md-nav__link">
jsPsych.pluginAPI.compareKeys
</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="#examples_3" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapiconvertkeycharactertokeycode" title="jsPsych.pluginAPI.convertKeyCharacterToKeyCode" class="md-nav__link">
jsPsych.pluginAPI.convertKeyCharacterToKeyCode
</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="#examples_4" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapiconvertkeycodetokeycharacter" title="jsPsych.pluginAPI.convertKeyCodeToKeyCharacter" class="md-nav__link">
jsPsych.pluginAPI.convertKeyCodeToKeyCharacter
</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="#examples_5" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapigetaudiobuffer" title="jsPsych.pluginAPI.getAudioBuffer" class="md-nav__link">
jsPsych.pluginAPI.getAudioBuffer
</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="#examples_6" title="Examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapigetkeyboardresponse" title="jsPsych.pluginAPI.getKeyboardResponse" class="md-nav__link">
jsPsych.pluginAPI.getKeyboardResponse
</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="#examples_7" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#get-a-single-response-from-any-key" title="Get a single response from any key" class="md-nav__link">
Get a single response from any key
</a>
</li>
<li class="md-nav__item">
<a href="#get-a-responses-from-a-key-until-the-letter-q-is-pressed" title="Get a responses from a key until the letter Q is pressed" class="md-nav__link">
Get a responses from a key until the letter Q is pressed
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapipreloadaudiofiles" title="jsPsych.pluginAPI.preloadAudioFiles" class="md-nav__link">
jsPsych.pluginAPI.preloadAudioFiles
</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="#examples_8" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basic-use" title="Basic use" class="md-nav__link">
Basic use
</a>
</li>
<li class="md-nav__item">
<a href="#show-progress-of-loading" title="Show progress of loading" class="md-nav__link">
Show progress of loading
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapipreloadimages" title="jsPsych.pluginAPI.preloadImages" class="md-nav__link">
jsPsych.pluginAPI.preloadImages
</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="#examples_9" title="Examples" class="md-nav__link">
Examples
</a>
<nav class="md-nav">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basic-use_1" title="Basic use" class="md-nav__link">
Basic use
</a>
</li>
<li class="md-nav__item">
<a href="#show-progress-of-loading_1" title="Show progress of loading" class="md-nav__link">
Show progress of loading
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapiregisterpreload" title="jsPsych.pluginAPI.registerPreload" class="md-nav__link">
jsPsych.pluginAPI.registerPreload
</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" title="Example" class="md-nav__link">
Example
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#jspsychpluginapisettimeout" title="jsPsych.pluginAPI.setTimeout" class="md-nav__link">
jsPsych.pluginAPI.setTimeout
</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="#examples_10" title="Examples" class="md-nav__link">
Examples
</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-pluginAPI.md" title="Edit this page" class="md-icon md-content__icon">&#xE3C9;</a>
<h1 id="jspsychpluginapi">jsPsych.pluginAPI<a class="headerlink" href="#jspsychpluginapi" title="Permanent link">&para;</a></h1>
<p>The pluginAPI module contains functions that are useful when developing new plugins.</p>
<hr />
<h2 id="jspsychpluginapiautopreload">jsPsych.pluginAPI.autoPreload<a class="headerlink" href="#jspsychpluginapiautopreload" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.autoPreload(timeline, 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>timeline</td>
<td>TimelineNode object</td>
<td>A TimelineNode object that contains an arbitrary set of trials.</td>
</tr>
<tr>
<td>callback</td>
<td>function</td>
<td>A function to execute when loading is complete</td>
</tr>
</tbody>
</table>
<h3 id="return-value">Return value<a class="headerlink" href="#return-value" title="Permanent link">&para;</a></h3>
<p>Returns nothing.</p>
<h3 id="description">Description<a class="headerlink" href="#description" title="Permanent link">&para;</a></h3>
<p>Attempts to preload all image files and audio files that will be used to run the trials on the timeline. Content will only preload from plugins that have used the <code>registerPreload</code> method to define the media types of their parameters.</p>
<p>The callback function executes once all of the files are preloaded.</p>
<p>This method is used internally by the core jsPsych code. It is not recommended that you call it manually.</p>
<h3 id="examples">Examples<a class="headerlink" href="#examples" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="c1">// you probably shouldn&#39;t use this method</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapicancelallkeyboardresponses">jsPsych.pluginAPI.cancelAllKeyboardResponses<a class="headerlink" href="#jspsychpluginapicancelallkeyboardresponses" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.cancelAllKeyboardResponses()
</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 nothing.</p>
<h3 id="description_1">Description<a class="headerlink" href="#description_1" title="Permanent link">&para;</a></h3>
<p>Cancels all currently active keyboard listeners created by <code>jsPsych.pluginAPI.getKeyboardResponse</code>.</p>
<h3 id="examples_1">Examples<a class="headerlink" href="#examples_1" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">cancelAllKeyboardResponses</span><span class="p">();</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapicancelkeyboardresponse">jsPsych.pluginAPI.cancelKeyboardResponse<a class="headerlink" href="#jspsychpluginapicancelkeyboardresponse" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.cancelKeyboardResponse(listener_id)
</pre></div>
<h3 id="parameters_2">Parameters<a class="headerlink" href="#parameters_2" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>listener_id</td>
<td>object</td>
<td>The listener_id object generated by the call to <code>jsPsych.pluginAPI.getKeyboardResponse</code>.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_2">Return value<a class="headerlink" href="#return-value_2" title="Permanent link">&para;</a></h3>
<p>Returns nothing.</p>
<h3 id="description_2">Description<a class="headerlink" href="#description_2" title="Permanent link">&para;</a></h3>
<p>Cancels a specific keyboard listener created by <code>jsPsych.pluginAPI.getKeyboardResponse</code>.</p>
<h3 id="examples_2">Examples<a class="headerlink" href="#examples_2" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="c1">// create a persistent keyboard listener</span>
<span class="kd">var</span> <span class="nx">listener_id</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">getKeyboardResponse</span><span class="p">(</span><span class="nx">after_response</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;p&#39;</span><span class="p">,</span><span class="s1">&#39;q&#39;</span><span class="p">],</span> <span class="s1">&#39;date&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="c1">// cancel keyboard listener</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">cancelKeyboardResponse</span><span class="p">(</span><span class="nx">listener_id</span><span class="p">);</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapiclearalltimeouts">jsPsych.pluginAPI.clearAllTimeouts<a class="headerlink" href="#jspsychpluginapiclearalltimeouts" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.clearAllTimeouts()
</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>Returns nothing.</p>
<h3 id="description_3">Description<a class="headerlink" href="#description_3" title="Permanent link">&para;</a></h3>
<p>Clears any pending timeouts that were set using jsPsych.pluginAPI.setTimeout()</p>
<hr />
<h2 id="jspsychpluginapicomparekeys">jsPsych.pluginAPI.compareKeys<a class="headerlink" href="#jspsychpluginapicomparekeys" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.compareKeys(key1, key2)
</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>key1</td>
<td>string or numeric</td>
<td>The representation of a key, either string or keycode</td>
</tr>
<tr>
<td>key2</td>
<td>string or numeric</td>
<td>The representation of a key, either string or keycode</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>Returns true if keycodes or strings refer to the same key, regardless of type.</p>
<h3 id="description_4">Description<a class="headerlink" href="#description_4" title="Permanent link">&para;</a></h3>
<p>Compares two keys to see if they are the same, ignoring differences in representational type.</p>
<h3 id="examples_3">Examples<a class="headerlink" href="#examples_3" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">compareKeys</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">,</span> <span class="mi">65</span><span class="p">);</span>
<span class="c1">// returns true</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">convertKeyCharacterToKeyCode</span><span class="p">(</span><span class="s1">&#39;space&#39;</span><span class="p">,</span> <span class="mi">31</span><span class="p">)</span>
<span class="c1">// returns false</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapiconvertkeycharactertokeycode">jsPsych.pluginAPI.convertKeyCharacterToKeyCode<a class="headerlink" href="#jspsychpluginapiconvertkeycharactertokeycode" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.convertKeyCharacterToKeyCode(character)
</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>character</td>
<td>string</td>
<td>The string representation of keyboard key.</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 the numeric keycode associated with the <code>character</code> parameter.</p>
<h3 id="description_5">Description<a class="headerlink" href="#description_5" title="Permanent link">&para;</a></h3>
<p>Converts between the string representation of a key and the numeric key code associated with that key.</p>
<h3 id="examples_4">Examples<a class="headerlink" href="#examples_4" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">keycode</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">convertKeyCharacterToKeyCode</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">)</span>
<span class="c1">// keycode is 65</span>
<span class="nx">keycode</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">convertKeyCharacterToKeyCode</span><span class="p">(</span><span class="s1">&#39;space&#39;</span><span class="p">)</span>
<span class="c1">// keycode is 32</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapiconvertkeycodetokeycharacter">jsPsych.pluginAPI.convertKeyCodeToKeyCharacter<a class="headerlink" href="#jspsychpluginapiconvertkeycodetokeycharacter" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.convertKeyCodeToKeyCharacter(character)
</pre></div>
<h3 id="parameters_6">Parameters<a class="headerlink" href="#parameters_6" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>code</td>
<td>numeric</td>
<td>The numeric representation of keyboard key.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_6">Return value<a class="headerlink" href="#return-value_6" title="Permanent link">&para;</a></h3>
<p>Returns the string representation of the key associated with the <code>code</code> parameter.</p>
<h3 id="description_6">Description<a class="headerlink" href="#description_6" title="Permanent link">&para;</a></h3>
<p>Converts between the numeric key code of a key and the string representation associated with that key.</p>
<h3 id="examples_5">Examples<a class="headerlink" href="#examples_5" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">keycode</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">convertKeyCharacterToKeyCode</span><span class="p">(</span><span class="mi">65</span><span class="p">)</span>
<span class="c1">// key is &#39;a&#39;</span>
<span class="nx">keycode</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">convertKeyCharacterToKeyCode</span><span class="p">(</span><span class="mi">32</span><span class="p">)</span>
<span class="c1">// keycode is &#39;space&#39;</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapigetaudiobuffer">jsPsych.pluginAPI.getAudioBuffer<a class="headerlink" href="#jspsychpluginapigetaudiobuffer" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.getAudioBuffer(filepath)
</pre></div>
<h3 id="parameters_7">Parameters<a class="headerlink" href="#parameters_7" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>filepath</td>
<td>string</td>
<td>The path to the audio file that was preloaded.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_7">Return value<a class="headerlink" href="#return-value_7" title="Permanent link">&para;</a></h3>
<p>Returns buffered audio file for playback. If the browser supports it the buffer will be playable with the WebAudio API. Otherwise, the returned buffer will be an HTML5 Audio object.</p>
<h3 id="description_7">Description<a class="headerlink" href="#description_7" title="Permanent link">&para;</a></h3>
<p>Gets an AudioBuffer that can be played with the WebAudio API or an Audio object that can be played with HTML5 Audio. The file must be preloaded with <code>preloadAudioFiles</code> or the automatic preload (<code>autoPreload</code>).</p>
<h3 id="examples_6">Examples<a class="headerlink" href="#examples_6" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="c1">// the code below is used to play audio in the audio-keyboard-response plugin</span>
<span class="kd">var</span> <span class="nx">source</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">createBufferSource</span><span class="p">();</span>
<span class="nx">source</span><span class="p">.</span><span class="nx">buffer</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">getAudioBuffer</span><span class="p">(</span><span class="nx">trial</span><span class="p">.</span><span class="nx">stimulus</span><span class="p">);</span>
<span class="nx">source</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">destination</span><span class="p">);</span>
<span class="nx">startTime</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">;</span>
<span class="nx">source</span><span class="p">.</span><span class="nx">start</span><span class="p">(</span><span class="nx">startTime</span><span class="p">);</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapigetkeyboardresponse">jsPsych.pluginAPI.getKeyboardResponse<a class="headerlink" href="#jspsychpluginapigetkeyboardresponse" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.getKeyboardResponse(parameters)
</pre></div>
<h3 id="parameters_8">Parameters<a class="headerlink" href="#parameters_8" title="Permanent link">&para;</a></h3>
<p>The method accepts an object of parameter values (see example below). The valid keys for this object are listed in the table below.</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>callback_function</td>
<td>function</td>
<td>The function to execute whenever a valid keyboard response is generated.</td>
</tr>
<tr>
<td>valid_responses</td>
<td>array</td>
<td>An array of key codes or character strings representing valid responses. Responses not on the list will be ignored. An empty array indicates that all responses are acceptable.</td>
</tr>
<tr>
<td>rt_method</td>
<td>string</td>
<td>Indicates which method of recording time to use. The <code>'date'</code> method uses calls to <code>(new Date()).getTime()</code> to record timing information. The <code>'performance'</code> method uses calls to <code>performance.now()</code>, which is a more modern JavaScript feature. The <code>'performance'</code> approach is <a href="http://caniuse.com/#search=performance">not supported by all the major browsers yet</a>, but adoption rates are increasing. The <code>audio</code> method is used in conjuction with an <code>audio_context</code> (set as an additional parameter). This uses the clock time of the <code>audio_context</code> when audio stimuli are being played.</td>
</tr>
<tr>
<td>audio_context</td>
<td>AudioContext object</td>
<td>The AudioContext of the audio file that is being played.</td>
</tr>
<tr>
<td>audio_context_start_time</td>
<td>numeric</td>
<td>The scheduled time of the sound file in the AudioContext. This will be used as the start time.</td>
</tr>
<tr>
<td>allow_held_key</td>
<td>boolean</td>
<td>If <code>true</code>, then responses will be registered from keys that are being held down. If <code>false</code>, then a held key can only register a response the first time that <code>getKeyboardResponse</code> is called for that key. For example, if a participant holds down the <code>A</code> key before the experiment starts, then the first time <code>getKeyboardResponse</code> is called, the <code>A</code> will register as a key press. However, any future calls to <code>getKeyboardResponse</code> will not register the <code>A</code> until the participant releases the key and presses it again.</td>
</tr>
<tr>
<td>persist</td>
<td>boolean</td>
<td>If false, then the keyboard listener will only trigger the first time a valid key is pressed. If true, then it will trigger every time a valid key is pressed until it is explicitly cancelled by <code>jsPsych.pluginAPI.cancelKeyboardResponse</code> or <code>jsPsych.pluginAPI.cancelAllKeyboardResponses</code>.</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>Return an object that uniquely identifies the keyboard listener. This object can be passed to <code>jsPsych.pluginAPI.cancelKeyboardResponse</code> to cancel the keyboard listener.</p>
<h3 id="description_8">Description<a class="headerlink" href="#description_8" title="Permanent link">&para;</a></h3>
<p>Gets a keyboard response from the subject, recording the response time from when the function is first called until a valid response is generated.</p>
<p>The keyboard event listener will be bound to the <code>display_element</code> declared in <code>jsPsych.init()</code> (or the <code>&lt;body&gt;</code> element if no <code>display_element</code> is specified). This allows jsPsych experiments to be embedded in websites with other content without disrupting the functionality of other UI elements.</p>
<p>A valid response triggers the <code>callback_function</code> specified in the parameters. A single argument is passed to the callback function. The argument contains an object with the properties <code>key</code> and <code>rt</code>. <code>key</code> contains the numeric key code of the response, and <code>rt</code> contains the response time.</p>
<h3 id="examples_7">Examples<a class="headerlink" href="#examples_7" title="Permanent link">&para;</a></h3>
<h4 id="get-a-single-response-from-any-key">Get a single response from any key<a class="headerlink" href="#get-a-single-response-from-any-key" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">after_response</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">info</span><span class="p">){</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;You pressed key &#39;</span><span class="o">+</span><span class="nx">info</span><span class="p">.</span><span class="nx">key</span><span class="o">+</span><span class="s1">&#39; after &#39;</span><span class="o">+</span><span class="nx">info</span><span class="p">.</span><span class="nx">rt</span><span class="o">+</span><span class="s1">&#39;ms&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">getKeyboardResponse</span><span class="p">({</span>
<span class="nx">callback_function</span><span class="o">:</span><span class="nx">after_response</span><span class="p">,</span>
<span class="nx">valid_responses</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">rt_method</span><span class="o">:</span> <span class="s1">&#39;date&#39;</span><span class="p">,</span>
<span class="nx">persist</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">});</span>
</pre></div>
<h4 id="get-a-responses-from-a-key-until-the-letter-q-is-pressed">Get a responses from a key until the letter Q is pressed<a class="headerlink" href="#get-a-responses-from-a-key-until-the-letter-q-is-pressed" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">after_response</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">info</span><span class="p">){</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;You pressed key &#39;</span><span class="o">+</span><span class="nx">info</span><span class="p">.</span><span class="nx">key</span><span class="o">+</span><span class="s1">&#39; after &#39;</span><span class="o">+</span><span class="nx">info</span><span class="p">.</span><span class="nx">rt</span><span class="o">+</span><span class="s1">&#39;ms&#39;</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">info</span><span class="p">.</span><span class="nx">key</span> <span class="o">==</span> <span class="mi">81</span><span class="p">){</span> <span class="c1">// the key code for &#39;Q&#39; is 81.</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">cancelKeyboardResponse</span><span class="p">(</span><span class="nx">listener</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">listener</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">getKeyboardResponse</span><span class="p">({</span>
<span class="nx">callback_function</span><span class="o">:</span><span class="nx">after_response</span><span class="p">,</span>
<span class="nx">valid_responses</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">rt_method</span><span class="o">:</span> <span class="s1">&#39;date&#39;</span><span class="p">,</span>
<span class="nx">persist</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">});</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapipreloadaudiofiles">jsPsych.pluginAPI.preloadAudioFiles<a class="headerlink" href="#jspsychpluginapipreloadaudiofiles" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.preloadAudioFiles(files, callback_complete, callback_load)
</pre></div>
<h3 id="parameters_9">Parameters<a class="headerlink" href="#parameters_9" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>files</td>
<td>array</td>
<td>An array of audio file paths to load. The array can be nested (e.g., if images are in multiple arrays to help sort by condition or task).</td>
</tr>
<tr>
<td>callback_complete</td>
<td>function</td>
<td>A function to execute when all the files have been loaded.</td>
</tr>
<tr>
<td>callback_load</td>
<td>function</td>
<td>A function to execute after each file has been loaded. A single parameter is passed to this function which contains the number of files that have been loaded so far.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_9">Return value<a class="headerlink" href="#return-value_9" title="Permanent link">&para;</a></h3>
<p>Returns nothing.</p>
<h3 id="description_9">Description<a class="headerlink" href="#description_9" title="Permanent link">&para;</a></h3>
<p>Use this function to preload audio files that are not part of a plugin with automatic preloading. Audio files in official plugins will automatically preload. See <a href="../../overview/media-preloading/">Media Preloading</a> for more information.</p>
<p>It is possible to run this function without specifying a callback function. However, in this case the code will continue executing while the files are loaded. Thus, it is possible that an audio file would be required for playing before it is done preloading. The <code>callback_complete</code> function will only execute after all the audio files are loaded, and can be used to control the flow of the experiment (e.g., by starting the experiment in the <code>callback_complete</code> function).</p>
<p>The <code>callback_load</code> function can be used to indicate progress. See example below.</p>
<h3 id="examples_8">Examples<a class="headerlink" href="#examples_8" title="Permanent link">&para;</a></h3>
<h4 id="basic-use">Basic use<a class="headerlink" href="#basic-use" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">sounds</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;file1.mp3&#39;</span><span class="p">,</span> <span class="s1">&#39;file2.mp3&#39;</span><span class="p">,</span> <span class="s1">&#39;file3.mp3&#39;</span><span class="p">];</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">preloadAudioFiles</span><span class="p">(</span><span class="nx">sounds</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="nx">startExperiment</span><span class="p">();</span> <span class="p">});</span>
<span class="kd">function</span> <span class="nx">startExperiment</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="nx">exp</span>
<span class="p">});</span>
<span class="p">}</span>
</pre></div>
<h4 id="show-progress-of-loading">Show progress of loading<a class="headerlink" href="#show-progress-of-loading" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">sounds</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;file1.mp3&#39;</span><span class="p">,</span> <span class="s1">&#39;file2.mp3&#39;</span><span class="p">,</span> <span class="s1">&#39;file3.mp3&#39;</span><span class="p">];</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">preloadAudioFiles</span><span class="p">(</span><span class="nx">sounds</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="nx">startExperiment</span><span class="p">();</span> <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nLoaded</span><span class="p">)</span> <span class="p">{</span> <span class="nx">updateLoadedCount</span><span class="p">(</span><span class="nx">nLoaded</span><span class="p">);</span> <span class="p">});</span>
<span class="kd">function</span> <span class="nx">updateLoadedCount</span><span class="p">(</span><span class="nx">nLoaded</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">percentcomplete</span> <span class="o">=</span> <span class="nx">nLoaded</span> <span class="o">/</span> <span class="nx">sounds</span><span class="p">.</span><span class="nx">length</span> <span class="o">*</span> <span class="mi">100</span><span class="p">;</span>
<span class="c1">// could put something fancier here, like a progress bar</span>
<span class="c1">// or updating text in the DOM.</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Loaded &#39;</span><span class="o">+</span><span class="nx">percentcomplete</span><span class="o">+</span><span class="s1">&#39;% of audio files&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">startExperiment</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="nx">exp</span>
<span class="p">});</span>
<span class="p">}</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapipreloadimages">jsPsych.pluginAPI.preloadImages<a class="headerlink" href="#jspsychpluginapipreloadimages" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.preloadImages(images, callback_complete, callback_load)
</pre></div>
<h3 id="parameters_10">Parameters<a class="headerlink" href="#parameters_10" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>images</td>
<td>array</td>
<td>An array of image paths to load. The array can be nested (e.g., if images are in multiple arrays to help sort by condition or task).</td>
</tr>
<tr>
<td>callback_complete</td>
<td>function</td>
<td>A function to execute when all the images have been loaded.</td>
</tr>
<tr>
<td>callback_load</td>
<td>function</td>
<td>A function to execute after each image has been loaded. A single parameter is passed to this function which contains the number of images that have been loaded so far.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_10">Return value<a class="headerlink" href="#return-value_10" title="Permanent link">&para;</a></h3>
<p>Returns nothing.</p>
<h3 id="description_10">Description<a class="headerlink" href="#description_10" title="Permanent link">&para;</a></h3>
<p>Use this function to preload image files that are not part of a plugin with automatic preloading. Image files in official plugins will automatically preload. See <a href="../../overview/media-preloading/">Media Preloading</a> for more information.</p>
<p>It is possible to run this function without specifying a callback function. However, in this case the code will continue executing while the images are loaded. Thus, it is possible that an image would be required for display before it is done preloading. The <code>callback_complete</code> function will only execute after all the images are loaded, and can be used to control the flow of the experiment (e.g., by starting the experiment in the <code>callback_complete</code> function).</p>
<p>The <code>callback_load</code> function can be used to indicate progress, if the number of images to be loaded is known ahead of time. See example below.</p>
<h3 id="examples_9">Examples<a class="headerlink" href="#examples_9" title="Permanent link">&para;</a></h3>
<h4 id="basic-use_1">Basic use<a class="headerlink" href="#basic-use_1" 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="s1">&#39;img/file1.png&#39;</span><span class="p">,</span> <span class="s1">&#39;img/file2.png&#39;</span><span class="p">,</span> <span class="s1">&#39;img/file3.png&#39;</span><span class="p">];</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">preloadImages</span><span class="p">(</span><span class="nx">images</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="nx">startExperiment</span><span class="p">();</span> <span class="p">});</span>
<span class="kd">function</span> <span class="nx">startExperiment</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="nx">exp</span>
<span class="p">});</span>
<span class="p">}</span>
</pre></div>
<h4 id="show-progress-of-loading_1">Show progress of loading<a class="headerlink" href="#show-progress-of-loading_1" 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="s1">&#39;img/file1.png&#39;</span><span class="p">,</span> <span class="s1">&#39;img/file2.png&#39;</span><span class="p">,</span> <span class="s1">&#39;img/file3.png&#39;</span><span class="p">];</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">preloadImages</span><span class="p">(</span><span class="nx">images</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="nx">startExperiment</span><span class="p">();</span> <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nLoaded</span><span class="p">)</span> <span class="p">{</span> <span class="nx">updateLoadedCount</span><span class="p">(</span><span class="nx">nLoaded</span><span class="p">);</span> <span class="p">});</span>
<span class="kd">function</span> <span class="nx">updateLoadedCount</span><span class="p">(</span><span class="nx">nLoaded</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">percentcomplete</span> <span class="o">=</span> <span class="nx">nLoaded</span> <span class="o">/</span> <span class="nx">images</span><span class="p">.</span><span class="nx">length</span> <span class="o">*</span> <span class="mi">100</span><span class="p">;</span>
<span class="c1">// could put something fancier here, like a progress bar</span>
<span class="c1">// or updating text in the DOM.</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Loaded &#39;</span><span class="o">+</span><span class="nx">percentcomplete</span><span class="o">+</span><span class="s1">&#39;% of images&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">startExperiment</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="nx">exp</span>
<span class="p">});</span>
<span class="p">}</span>
</pre></div>
<hr />
<h2 id="jspsychpluginapiregisterpreload">jsPsych.pluginAPI.registerPreload<a class="headerlink" href="#jspsychpluginapiregisterpreload" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.registerPreload(plugin_name, parameter, media_type, conditional_function)
</pre></div>
<h3 id="parameters_11">Parameters<a class="headerlink" href="#parameters_11" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>plugin_name</td>
<td>string</td>
<td>The name of the plugin. e.g., 'image-keyboard-response'.</td>
</tr>
<tr>
<td>parameter</td>
<td>string</td>
<td>The name of the parameter that is a media file. e.g., 'stimulus'</td>
</tr>
<tr>
<td>media_type</td>
<td>string</td>
<td>The type of media, either 'image' or 'audio'.</td>
</tr>
<tr>
<td>conditional_function</td>
<td>function</td>
<td>Only run the preload for a trial if this function returns true, or if this function does not exist.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_11">Return value<a class="headerlink" href="#return-value_11" title="Permanent link">&para;</a></h3>
<p>Nothing.</p>
<h3 id="description_11">Description<a class="headerlink" href="#description_11" title="Permanent link">&para;</a></h3>
<p>Use this method in a plugin file to mark a parameter as containing an element that should be preloaded. The method should be called in the plugin file such that it gets called when the file is loaded.</p>
<p>The <code>conditional_function</code> function is passed a single argument containing the trial object.</p>
<h3 id="example">Example<a class="headerlink" href="#example" title="Permanent link">&para;</a></h3>
<p>For an example, see the <a href="https://github.com/jodeleeuw/jsPsych/blob/master/plugins/jspsych-image-keyboard-response.js">image-keyboard-response</a> and <a href="https://github.com/jodeleeuw/jsPsych/blob/master/plugins/jspsych-audio-keyboard-response.js">audio-keyboard-response</a> plugins.</p>
<hr />
<h2 id="jspsychpluginapisettimeout">jsPsych.pluginAPI.setTimeout<a class="headerlink" href="#jspsychpluginapisettimeout" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span>jsPsych.pluginAPI.setTimeout(callback, delay)
</pre></div>
<h3 id="parameters_12">Parameters<a class="headerlink" href="#parameters_12" title="Permanent link">&para;</a></h3>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>callback</td>
<td>function</td>
<td>A function to execute after waiting for delay.</td>
</tr>
<tr>
<td>delay</td>
<td>integer</td>
<td>Time to wait in milliseconds.</td>
</tr>
</tbody>
</table>
<h3 id="return-value_12">Return value<a class="headerlink" href="#return-value_12" title="Permanent link">&para;</a></h3>
<p>Returns the ID of the setTimeout handle.</p>
<h3 id="description_12">Description<a class="headerlink" href="#description_12" title="Permanent link">&para;</a></h3>
<p>This is simply a call to the standard setTimeout function in JavaScript with the added benefit of registering the setTimeout call in a central list. This is useful for scenarios where some other event (the trial ending, aborting the experiment) should stop the execution of queued timeouts.</p>
<h3 id="examples_10">Examples<a class="headerlink" href="#examples_10" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="c1">// print the time</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">())</span>
<span class="c1">// print the time 1s later</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">pluginAPI</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</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="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">())</span>
<span class="p">},</span> <span class="mi">1000</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="../jspsych-turk/" title="jsPsych.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>
jsPsych.turk
</span>
</div>
</a>
<a href="../../plugins/overview/" title="Overview" 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>
Overview
</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-2018 Josh de Leeuw
</div>
powered by
<a href="http://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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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.cae2244d.js"></script>
<script>app.initialize({version:"0.17.5",url:{base:"../.."}})</script>
<script>!function(e,a,t,n,o,c,i){e.GoogleAnalyticsObject=o,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(t),i=a.getElementsByTagName(t)[0],c.async=1,c.src="https://www.google-analytics.com/analytics.js",i.parentNode.insertBefore(c,i)}(window,document,"script",0,"ga"),ga("create","UA-50563838-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview");var links=document.getElementsByTagName("a");Array.prototype.map.call(links,function(e){e.host!=document.location.host&&e.addEventListener("click",function(){var a=e.getAttribute("data-md-action")||"follow";ga("send","event","outbound",a,e.href)})});var query=document.forms.search.query;query.addEventListener("blur",function(){if(this.value){var e=document.location.pathname;ga("send","pageview",e+"?q="+this.value)}})</script>
</body>
</html>