mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-13 00:58:12 +00:00
1490 lines
38 KiB
HTML
Executable File
1490 lines
38 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-audio-button-response - 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="#jspsych-audio-button-response" 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">
|
|
|
|
<span class="md-header-nav__topic">
|
|
jsPsych
|
|
</span>
|
|
<span class="md-header-nav__topic">
|
|
|
|
jspsych-audio-button-response
|
|
|
|
</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" 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">
|
|

|
|
</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--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-4" type="checkbox" id="nav-4">
|
|
|
|
<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="../../core_library/jspsych-core/" title="jsPsych" class="md-nav__link">
|
|
jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-data/" title="jsPsych.data" class="md-nav__link">
|
|
jsPsych.data
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-randomization/" title="jsPsych.randomization" class="md-nav__link">
|
|
jsPsych.randomization
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-turk/" title="jsPsych.turk" class="md-nav__link">
|
|
jsPsych.turk
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-pluginAPI/" title="jsPsych.pluginAPI" class="md-nav__link">
|
|
jsPsych.pluginAPI
|
|
</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-5" type="checkbox" id="nav-5" checked>
|
|
|
|
<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="../overview/" title="Overview" class="md-nav__link">
|
|
Overview
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../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="../jspsych-animation/" title="jspsych-animation" class="md-nav__link">
|
|
jspsych-animation
|
|
</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-audio-button-response
|
|
</label>
|
|
|
|
<a href="./" title="jspsych-audio-button-response" class="md-nav__link md-nav__link--active">
|
|
jspsych-audio-button-response
|
|
</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="#parameters" title="Parameters" class="md-nav__link">
|
|
Parameters
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#data-generated" title="Data Generated" class="md-nav__link">
|
|
Data Generated
|
|
</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="#displaying-question-until-subject-gives-a-response" title="Displaying question until subject gives a response" class="md-nav__link">
|
|
Displaying question until subject gives a response
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#using-custom-button-html-to-use-images-as-buttons" title="Using custom button HTML to use images as buttons" class="md-nav__link">
|
|
Using custom button HTML to use images as buttons
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../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="../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="../jspsych-call-function/" title="jspsych-call-function" class="md-nav__link">
|
|
jspsych-call-function
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-categorize-animation/" title="jspsych-categorize-animation" class="md-nav__link">
|
|
jspsych-categorize-animation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-categorize-html/" title="jspsych-categorize-html" class="md-nav__link">
|
|
jspsych-categorize-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-categorize-image/" title="jspsych-categorize-image" class="md-nav__link">
|
|
jspsych-categorize-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-cloze/" title="jspsych-cloze" class="md-nav__link">
|
|
jspsych-cloze
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-external-html/" title="jspsych-external-html" class="md-nav__link">
|
|
jspsych-external-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-free-sort/" title="jspsych-free-sort" class="md-nav__link">
|
|
jspsych-free-sort
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-fullscreen/" title="jspsych-fullscreen" class="md-nav__link">
|
|
jspsych-fullscreen
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../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="../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="../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="../jspsych-iat-html/" title="jspsych-iat-html" class="md-nav__link">
|
|
jspsych-iat-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-iat-image/" title="jspsych-iat-image" class="md-nav__link">
|
|
jspsych-iat-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../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="../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="../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="../jspsych-instructions/" title="jspsych-instructions" class="md-nav__link">
|
|
jspsych-instructions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-rdk/" title="jspsych-rdk" class="md-nav__link">
|
|
jspsych-rdk
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-reconstruction/" title="jspsych-reconstruction" class="md-nav__link">
|
|
jspsych-reconstruction
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-resize/" title="jspsych-resize" class="md-nav__link">
|
|
jspsych-resize
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../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="../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="../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="../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="../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="../jspsych-survey-likert/" title="jspsych-survey-likert" class="md-nav__link">
|
|
jspsych-survey-likert
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../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="../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="../jspsych-survey-text/" title="jspsych-survey-text" class="md-nav__link">
|
|
jspsych-survey-text
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../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="../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="../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="../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="../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="../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="#parameters" title="Parameters" class="md-nav__link">
|
|
Parameters
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#data-generated" title="Data Generated" class="md-nav__link">
|
|
Data Generated
|
|
</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="#displaying-question-until-subject-gives-a-response" title="Displaying question until subject gives a response" class="md-nav__link">
|
|
Displaying question until subject gives a response
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#using-custom-button-html-to-use-images-as-buttons" title="Using custom button HTML to use images as buttons" class="md-nav__link">
|
|
Using custom button HTML to use images as buttons
|
|
</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/plugins/jspsych-audio-button-response.md" title="Edit this page" class="md-icon md-content__icon"></a>
|
|
|
|
|
|
<h1 id="jspsych-audio-button-response">jspsych-audio-button-response<a class="headerlink" href="#jspsych-audio-button-response" title="Permanent link">¶</a></h1>
|
|
<p>This plugin plays audio files and records responses generated with a button click.</p>
|
|
<p>If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is played with HTML5 audio. </p>
|
|
<p>Audio files are automatically preloaded by jsPsych. However, if you are using timeline variables or another dynamic method to specify the audio stimulus you will need to <a href="/overview/media-preloading/#manual-preloading">manually preload</a> the audio.</p>
|
|
<p>The trial can end when the subject responds, when the audio file has finished playing, or if the subject has failed to respond within a fixed length of time.</p>
|
|
<h2 id="parameters">Parameters<a class="headerlink" href="#parameters" title="Permanent link">¶</a></h2>
|
|
<p>Parameters with a default value of <em>undefined</em> must be specified. Other parameters can be left unspecified if the default value is acceptable.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Parameter</th>
|
|
<th>Type</th>
|
|
<th>Default Value</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>stimulus</td>
|
|
<td>audio file</td>
|
|
<td>undefined</td>
|
|
<td>Path to audio file to be played.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>choices</td>
|
|
<td>array of strings</td>
|
|
<td>[]</td>
|
|
<td>Labels for the buttons. Each different string in the array will generate a different button.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>button_html</td>
|
|
<td>HTML string</td>
|
|
<td><code>'<button class="jspsych-btn">%choice%</button>'</code></td>
|
|
<td>A template of HTML for generating the button elements. You can override this to create customized buttons of various kinds. The string <code>%choice%</code> will be changed to the corresponding element of the <code>choices</code> array. You may also specify an array of strings, if you need different HTML to render for each button. If you do specify an array, the <code>choices</code> array and this array must have the same length. The HTML from position 0 in the <code>button_html</code> array will be used to create the button for element 0 in the <code>choices</code> array, and so on.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>prompt</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press).</td>
|
|
</tr>
|
|
<tr>
|
|
<td>trial_duration</td>
|
|
<td>numeric</td>
|
|
<td>null</td>
|
|
<td>How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial will wait for a response indefinitely.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>margin_vertical</td>
|
|
<td>string</td>
|
|
<td>'0px'</td>
|
|
<td>Vertical margin of the button(s).</td>
|
|
</tr>
|
|
<tr>
|
|
<td>margin_horizontal</td>
|
|
<td>string</td>
|
|
<td>'8px'</td>
|
|
<td>Horizontal margin of the button(s).</td>
|
|
</tr>
|
|
<tr>
|
|
<td>response_ends_trial</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the <code>trial_duration</code> parameter). If false, then the trial will continue until the value for <code>timing_response</code> is reached. You can use this parameter to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>trial_ends_after_audio</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>If true, then the trial will end as soon as the audio file finishes playing.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2 id="data-generated">Data Generated<a class="headerlink" href="#data-generated" title="Permanent link">¶</a></h2>
|
|
<p>In addition to the <a href="overview#datacollectedbyplugins">default data collected by all plugins</a>, this plugin collects the following data for each trial.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>rt</td>
|
|
<td>numeric</td>
|
|
<td>The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>button_pressed</td>
|
|
<td>numeric</td>
|
|
<td>Indicates which button the subject pressed. The first button in the <code>choices</code> array is 0, the second is 1, and so on.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2 id="examples">Examples<a class="headerlink" href="#examples" title="Permanent link">¶</a></h2>
|
|
<h4 id="displaying-question-until-subject-gives-a-response">Displaying question until subject gives a response<a class="headerlink" href="#displaying-question-until-subject-gives-a-response" title="Permanent link">¶</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">'audio-button-response'</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'sound/tone.mp3'</span><span class="p">,</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Low'</span><span class="p">,</span> <span class="s1">'High'</span><span class="p">],</span>
|
|
<span class="nx">prompt</span><span class="o">:</span> <span class="s2">"<p>Is the pitch high or low?</p>"</span>
|
|
<span class="p">};</span>
|
|
</pre></div>
|
|
|
|
|
|
<h4 id="using-custom-button-html-to-use-images-as-buttons">Using custom button HTML to use images as buttons<a class="headerlink" href="#using-custom-button-html-to-use-images-as-buttons" title="Permanent link">¶</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">'audio-button-response'</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'sound/roar.mp3'</span><span class="p">,</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">'lion.png'</span><span class="p">,</span> <span class="s1">'elephant.png'</span><span class="p">,</span> <span class="s1">'monkey.png'</span><span class="p">],</span>
|
|
<span class="nx">prompt</span><span class="o">:</span> <span class="s2">"<p>Which animal made the sound?</p>"</span><span class="p">,</span>
|
|
<span class="nx">button_html</span><span class="o">:</span> <span class="s1">'<img src="%choice%" />'</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-animation/" title="jspsych-animation" 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-animation
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="../jspsych-audio-keyboard-response/" title="jspsych-audio-keyboard-response" 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-audio-keyboard-response
|
|
</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 © 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> |