mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-13 00:58:12 +00:00
2535 lines
100 KiB
HTML
Executable File
2535 lines
100 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">
|
|
|
|
|
|
|
|
|
|
<link rel="canonical" href="https://www.jspsych.org/7.0/overview/timeline/">
|
|
|
|
<link rel="icon" href="../../img/jspsych-favicon.png">
|
|
<meta name="generator" content="mkdocs-1.2.3, mkdocs-material-7.3.3">
|
|
|
|
|
|
|
|
<title>Creating an Experiment: The Timeline - jsPsych</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../../assets/stylesheets/main.5143246d.min.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../../assets/stylesheets/palette.3f5d1f46.min.css">
|
|
|
|
|
|
|
|
<meta name="theme-color" content="#4cae4f">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
|
|
<style>:root{--md-text-font-family:"Roboto";--md-code-font-family:"Roboto Mono"}</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-50563838-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){var e;this.value&&(e=document.location.pathname,ga("send","pageview",e+"?q="+this.value))}),"undefined"!=typeof location$&&location$.subscribe(function(e){ga("send","pageview",e.pathname)})})</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body dir="ltr" data-md-color-scheme="" data-md-color-primary="green" data-md-color-accent="orange">
|
|
|
|
|
|
<script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
|
|
|
|
<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" for="__drawer"></label>
|
|
<div data-md-component="skip">
|
|
|
|
|
|
<a href="#creating-an-experiment-the-timeline" class="md-skip">
|
|
Skip to content
|
|
</a>
|
|
|
|
</div>
|
|
<div data-md-component="announce">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<header class="md-header" data-md-component="header">
|
|
<nav class="md-header__inner md-grid" aria-label="Header">
|
|
<a href="../.." title="jsPsych" class="md-header__button md-logo" aria-label="jsPsych" data-md-component="logo">
|
|
|
|
<img src="../../img/jspsych-logo-no-text-mono.svg" alt="logo">
|
|
|
|
</a>
|
|
<label class="md-header__button md-icon" for="__drawer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
|
|
</label>
|
|
<div class="md-header__title" data-md-component="header-title">
|
|
<div class="md-header__ellipsis">
|
|
<div class="md-header__topic">
|
|
<span class="md-ellipsis">
|
|
jsPsych
|
|
</span>
|
|
</div>
|
|
<div class="md-header__topic" data-md-component="header-topic">
|
|
<span class="md-ellipsis">
|
|
|
|
Creating an Experiment: The Timeline
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<label class="md-header__button md-icon" for="__search">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
|
|
</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" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
|
|
<label class="md-search__icon md-icon" for="__search">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
|
|
</label>
|
|
<nav class="md-search__options" aria-label="Search">
|
|
|
|
<button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
|
|
</button>
|
|
</nav>
|
|
|
|
</form>
|
|
<div class="md-search__output">
|
|
<div class="md-search__scrollwrap" data-md-scrollfix>
|
|
<div class="md-search-result" data-md-component="search-result">
|
|
<div class="md-search-result__meta">
|
|
Initializing search
|
|
</div>
|
|
<ol class="md-search-result__list"></ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md-header__source">
|
|
|
|
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-component="source">
|
|
<div class="md-source__icon md-icon">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
|
|
</div>
|
|
<div class="md-source__repository">
|
|
jspsych/jspsych
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
<div class="md-container" data-md-component="container">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<main class="md-main" data-md-component="main">
|
|
<div class="md-main__inner md-grid">
|
|
|
|
|
|
|
|
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
|
|
|
|
|
|
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
|
<label class="md-nav__title" for="__drawer">
|
|
<a href="../.." title="jsPsych" class="md-nav__button md-logo" aria-label="jsPsych" data-md-component="logo">
|
|
|
|
<img src="../../img/jspsych-logo-no-text-mono.svg" alt="logo">
|
|
|
|
</a>
|
|
jsPsych
|
|
</label>
|
|
|
|
<div class="md-nav__source">
|
|
|
|
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-component="source">
|
|
<div class="md-source__icon md-icon">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></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="../.." class="md-nav__link">
|
|
Introduction
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_2">
|
|
Tutorials
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" aria-label="Tutorials" data-md-level="1">
|
|
<label class="md-nav__title" for="__nav_2">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Tutorials
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../tutorials/hello-world/" class="md-nav__link">
|
|
The Basics: Hello World
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../tutorials/rt-task/" class="md-nav__link">
|
|
Demo Experiment: Simple Reaction Time Task
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../tutorials/video-tutorials/" class="md-nav__link">
|
|
Video Tutorials
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" checked>
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_3">
|
|
Overview
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" aria-label="Overview" data-md-level="1">
|
|
<label class="md-nav__title" for="__nav_3">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Overview
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active">
|
|
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link md-nav__link--active" for="__toc">
|
|
Creating an Experiment: The Timeline
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<a href="./" class="md-nav__link md-nav__link--active">
|
|
Creating an Experiment: The Timeline
|
|
</a>
|
|
|
|
|
|
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="__toc">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Table of contents
|
|
</label>
|
|
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#a-single-trial" class="md-nav__link">
|
|
A single trial
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#multiple-trials" class="md-nav__link">
|
|
Multiple trials
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#nested-timelines" class="md-nav__link">
|
|
Nested timelines
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#timeline-variables" class="md-nav__link">
|
|
Timeline variables
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Timeline variables">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#using-in-a-function" class="md-nav__link">
|
|
Using in a function
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#random-orders-of-trials" class="md-nav__link">
|
|
Random orders of trials
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#sampling-methods" class="md-nav__link">
|
|
Sampling methods
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Sampling methods">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#sampling-with-replacement" class="md-nav__link">
|
|
Sampling with replacement
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#sampling-with-replacement-unequal-probabilities" class="md-nav__link">
|
|
Sampling with replacement, unequal probabilities
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#sampling-without-replacement" class="md-nav__link">
|
|
Sampling without replacement
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#repeating-each-trial-a-fixed-number-of-times-in-a-random-order" class="md-nav__link">
|
|
Repeating each trial a fixed number of times in a random order
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#alternating-groups" class="md-nav__link">
|
|
Alternating groups
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#custom-sampling-function" class="md-nav__link">
|
|
Custom sampling function
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#repeating-a-set-of-trials" class="md-nav__link">
|
|
Repeating a set of trials
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#looping-timelines" class="md-nav__link">
|
|
Looping timelines
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#conditional-timelines" class="md-nav__link">
|
|
Conditional timelines
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#timeline-start-and-finish-functions" class="md-nav__link">
|
|
Timeline start and finish functions
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../plugins/" class="md-nav__link">
|
|
Plugins
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../extensions/" class="md-nav__link">
|
|
Extensions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../dynamic-parameters/" class="md-nav__link">
|
|
Dynamic Parameters
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../style/" class="md-nav__link">
|
|
Controlling Visual Appearance
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../data/" class="md-nav__link">
|
|
Data Storage, Aggregation, and Manipulation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../running-experiments/" class="md-nav__link">
|
|
Running Experiments
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../experiment-options/" class="md-nav__link">
|
|
Experiment Settings
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../events/" class="md-nav__link">
|
|
Events
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../record-browser-interactions/" class="md-nav__link">
|
|
Record Browser Interactions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../media-preloading/" class="md-nav__link">
|
|
Media Preloading
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../fullscreen/" class="md-nav__link">
|
|
Fullscreen Experiments
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../eye-tracking/" class="md-nav__link">
|
|
Eye Tracking
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../exclude-browser/" class="md-nav__link">
|
|
Exclude Participants Based on Browser Features
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../progress-bar/" class="md-nav__link">
|
|
Automatic Progress Bar
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../prolific/" class="md-nav__link">
|
|
Integrating with Prolific
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../mturk/" class="md-nav__link">
|
|
Integrating with Mechanical Turk
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../browser-device-support/" class="md-nav__link">
|
|
Browser and Device Support
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../timing-accuracy/" class="md-nav__link">
|
|
Timing Accuracy
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_4">
|
|
Reference
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" aria-label="Reference" data-md-level="1">
|
|
<label class="md-nav__title" for="__nav_4">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Reference
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych/" class="md-nav__link">
|
|
jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych-data/" class="md-nav__link">
|
|
jsPsych.data
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych-randomization/" class="md-nav__link">
|
|
jsPsych.randomization
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych-turk/" class="md-nav__link">
|
|
jsPsych.turk
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych-pluginAPI/" class="md-nav__link">
|
|
jsPsych.pluginAPI
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_5">
|
|
Plugins
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" aria-label="Plugins" data-md-level="1">
|
|
<label class="md-nav__title" for="__nav_5">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Plugins
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/list-of-plugins/" class="md-nav__link">
|
|
List of Plugins
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/animation/" class="md-nav__link">
|
|
animation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/audio-button-response/" class="md-nav__link">
|
|
audio-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/audio-keyboard-response/" class="md-nav__link">
|
|
audio-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/audio-slider-response/" class="md-nav__link">
|
|
audio-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/call-function/" class="md-nav__link">
|
|
call-function
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/canvas-button-response/" class="md-nav__link">
|
|
canvas-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/canvas-keyboard-response/" class="md-nav__link">
|
|
canvas-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/canvas-slider-response/" class="md-nav__link">
|
|
canvas-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/categorize-animation/" class="md-nav__link">
|
|
categorize-animation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/categorize-html/" class="md-nav__link">
|
|
categorize-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/categorize-image/" class="md-nav__link">
|
|
categorize-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/cloze/" class="md-nav__link">
|
|
cloze
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/external-html/" class="md-nav__link">
|
|
external-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/free-sort/" class="md-nav__link">
|
|
free-sort
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/fullscreen/" class="md-nav__link">
|
|
fullscreen
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/html-button-response/" class="md-nav__link">
|
|
html-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/html-keyboard-response/" class="md-nav__link">
|
|
html-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/html-slider-response/" class="md-nav__link">
|
|
html-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/iat-html/" class="md-nav__link">
|
|
iat-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/iat-image/" class="md-nav__link">
|
|
iat-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/image-button-response/" class="md-nav__link">
|
|
image-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/image-keyboard-response/" class="md-nav__link">
|
|
image-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/image-slider-response/" class="md-nav__link">
|
|
image-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/instructions/" class="md-nav__link">
|
|
instructions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/maxdiff/" class="md-nav__link">
|
|
maxdiff
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/preload/" class="md-nav__link">
|
|
preload
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/reconstruction/" class="md-nav__link">
|
|
reconstruction
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/resize/" class="md-nav__link">
|
|
resize
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/same-different-html/" class="md-nav__link">
|
|
same-different-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/same-different-image/" class="md-nav__link">
|
|
same-different-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/serial-reaction-time/" class="md-nav__link">
|
|
serial-reaction-time
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/serial-reaction-time-mouse/" class="md-nav__link">
|
|
serial-reaction-time-mouse
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-html-form/" class="md-nav__link">
|
|
survey-html-form
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-likert/" class="md-nav__link">
|
|
survey-likert
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-multi-choice/" class="md-nav__link">
|
|
survey-multi-choice
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-multi-select/" class="md-nav__link">
|
|
survey-multi-select
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-text/" class="md-nav__link">
|
|
survey-text
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/video-button-response/" class="md-nav__link">
|
|
video-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/video-keyboard-response/" class="md-nav__link">
|
|
video-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/video-slider-response/" class="md-nav__link">
|
|
video-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/virtual-chinrest/" class="md-nav__link">
|
|
virtual-chinrest
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/visual-search-circle/" class="md-nav__link">
|
|
visual-search-circle
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/webgazer-calibrate/" class="md-nav__link">
|
|
webgazer-calibrate
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/webgazer-init-camera/" class="md-nav__link">
|
|
webgazer-init-camera
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/webgazer-validate/" class="md-nav__link">
|
|
webgazer-validate
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_6">
|
|
Extensions
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" aria-label="Extensions" data-md-level="1">
|
|
<label class="md-nav__title" for="__nav_6">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Extensions
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../extensions/list-of-extensions/" class="md-nav__link">
|
|
List of Extensions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../extensions/webgazer/" class="md-nav__link">
|
|
webgazer
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_7">
|
|
Developers
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" aria-label="Developers" data-md-level="1">
|
|
<label class="md-nav__title" for="__nav_7">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Developers
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../developers/configuration/" class="md-nav__link">
|
|
Configuration
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../developers/contributing/" class="md-nav__link">
|
|
Contributing to jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../developers/plugin-development/" class="md-nav__link">
|
|
Plugin Development
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../developers/extension-development/" class="md-nav__link">
|
|
Extension Development
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_8" type="checkbox" id="__nav_8" >
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_8">
|
|
Support
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" aria-label="Support" data-md-level="1">
|
|
<label class="md-nav__title" for="__nav_8">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Support
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../support/support/" class="md-nav__link">
|
|
Getting Help
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../support/migration-v7/" class="md-nav__link">
|
|
Migrating from 6.x to 7.x
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_9" type="checkbox" id="__nav_9" >
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_9">
|
|
About
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" aria-label="About" data-md-level="1">
|
|
<label class="md-nav__title" for="__nav_9">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
About
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/about/" class="md-nav__link">
|
|
About jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/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="sidebar" data-md-type="toc" >
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
|
|
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="__toc">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Table of contents
|
|
</label>
|
|
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#a-single-trial" class="md-nav__link">
|
|
A single trial
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#multiple-trials" class="md-nav__link">
|
|
Multiple trials
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#nested-timelines" class="md-nav__link">
|
|
Nested timelines
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#timeline-variables" class="md-nav__link">
|
|
Timeline variables
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Timeline variables">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#using-in-a-function" class="md-nav__link">
|
|
Using in a function
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#random-orders-of-trials" class="md-nav__link">
|
|
Random orders of trials
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#sampling-methods" class="md-nav__link">
|
|
Sampling methods
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Sampling methods">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#sampling-with-replacement" class="md-nav__link">
|
|
Sampling with replacement
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#sampling-with-replacement-unequal-probabilities" class="md-nav__link">
|
|
Sampling with replacement, unequal probabilities
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#sampling-without-replacement" class="md-nav__link">
|
|
Sampling without replacement
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#repeating-each-trial-a-fixed-number-of-times-in-a-random-order" class="md-nav__link">
|
|
Repeating each trial a fixed number of times in a random order
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#alternating-groups" class="md-nav__link">
|
|
Alternating groups
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#custom-sampling-function" class="md-nav__link">
|
|
Custom sampling function
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#repeating-a-set-of-trials" class="md-nav__link">
|
|
Repeating a set of trials
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#looping-timelines" class="md-nav__link">
|
|
Looping timelines
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#conditional-timelines" class="md-nav__link">
|
|
Conditional timelines
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#timeline-start-and-finish-functions" class="md-nav__link">
|
|
Timeline start and finish functions
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md-content" data-md-component="content">
|
|
<article class="md-content__inner md-typeset">
|
|
|
|
|
|
<a href="https://github.com/jspsych/jsPsych/edit/master/docs/overview/timeline.md" title="Edit this page" class="md-content__button md-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
|
|
</a>
|
|
|
|
|
|
<h1 id="creating-an-experiment-the-timeline">Creating an Experiment: The Timeline<a class="headerlink" href="#creating-an-experiment-the-timeline" title="Permanent link">¶</a></h1>
|
|
<p>To create an experiment using jsPsych, you need to specify a timeline that describes the structure of the experiment. The timeline is an ordered set of trials. You must create the timeline before launching the experiment. Most of the code you will write for an experiment will be code to create the timeline. This page walks through the creation of timelines, including very basic examples and more advanced features.</p>
|
|
<h2 id="a-single-trial">A single trial<a class="headerlink" href="#a-single-trial" title="Permanent link">¶</a></h2>
|
|
<p>To create a trial, you need to create an object that describes the trial. The most important feature of this object is the <code>type</code> parameter. This tells jsPsych which plugin to use to run the trial. For example, if you want to use the <a href="../plugins/html-keyboard-response">html-keyboard-response plugin</a> to display a short message, the trial object would look like this:</p>
|
|
<div class="highlight"><pre><span></span><code><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="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'Welcome to the experiment.'</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>The parameters for this object (e.g., <code>stimulus</code>) will depend on the plugin that you choose. Each plugin defines the set of parameters that are needed to run a trial with that plugin. Visit the documentation for a plugin to learn about the parameters that you can use with that plugin.</p>
|
|
<p>To create a timeline with the single trial and run the experiment, just embed the trial object in an array. A timeline can simply be an array of trials.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">timeline</span> <span class="o">=</span> <span class="p">[</span><span class="nx">trial</span><span class="p">];</span>
|
|
|
|
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">(</span><span class="nx">timeline</span><span class="p">);</span>
|
|
</code></pre></div>
|
|
<p>To create and run a simple experiment like this complete the <a href="../../tutorials/hello-world/">hello world tutorial</a>.</p>
|
|
<h2 id="multiple-trials">Multiple trials<a class="headerlink" href="#multiple-trials" title="Permanent link">¶</a></h2>
|
|
<p>Scaling up to multiple trials is straightforward. Create an object for each trial, and add each object to the timeline array.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="c1">// with lots of trials, it might be easier to add the trials</span>
|
|
<span class="c1">// to the timeline array as they are defined.</span>
|
|
<span class="kd">var</span> <span class="nx">timeline</span> <span class="o">=</span> <span class="p">[];</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">trial_1</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'This is trial 1.'</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">timeline</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">trial_1</span><span class="p">);</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">trial_2</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'This is trial 2.'</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">timeline</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">trial_2</span><span class="p">);</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">trial_3</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'This is trial 3.'</span>
|
|
<span class="p">}</span>
|
|
<span class="nx">timeline</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">trial_3</span><span class="p">);</span>
|
|
</code></pre></div>
|
|
<h2 id="nested-timelines">Nested timelines<a class="headerlink" href="#nested-timelines" title="Permanent link">¶</a></h2>
|
|
<p>Each object on the timeline can also have it's own timeline. This is useful for many reasons. One is that it allows you to define common parameters across trials once and have them apply to all the trials on the nested timeline. The example below creates a series of trials using the <a href="../plugins/image-keyboard-response/">image-keyboard-response plugin</a>, where the only thing that changes from trial-to-trial is the image file being displayed on the screen.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">judgment_trials</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">prompt</span><span class="o">:</span> <span class="s1">'<p>Press a number 1-7 to indicate how unusual the image is.</p>'</span><span class="p">,</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">'1'</span><span class="p">,</span><span class="s1">'2'</span><span class="p">,</span><span class="s1">'3'</span><span class="p">,</span><span class="s1">'4'</span><span class="p">,</span><span class="s1">'5'</span><span class="p">,</span><span class="s1">'6'</span><span class="p">,</span><span class="s1">'7'</span><span class="p">],</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span><span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'image1.png'</span><span class="p">},</span>
|
|
<span class="p">{</span><span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'image2.png'</span><span class="p">},</span>
|
|
<span class="p">{</span><span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'image3.png'</span><span class="p">}</span>
|
|
<span class="p">]</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>In the above code, the <code>type</code>, <code>prompt</code>, and <code>choices</code> parameters are automatically applied to all of the objects in the <code>timeline</code> array. This creates three trials with the same <code>type</code>, <code>prompt</code>, and <code>choices</code> parameters, but different values for the <code>stimulus</code> parameter.</p>
|
|
<p>You can also override the values by declaring a new value in the <code>timeline</code> array. In the example below, the second trial will display a different prompt message.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">judgment_trials</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">prompt</span><span class="o">:</span> <span class="s1">'<p>Press a number 1-7 to indicate how unusual the image is.</p>'</span><span class="p">,</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">'1'</span><span class="p">,</span><span class="s1">'2'</span><span class="p">,</span><span class="s1">'3'</span><span class="p">,</span><span class="s1">'4'</span><span class="p">,</span><span class="s1">'5'</span><span class="p">,</span><span class="s1">'6'</span><span class="p">,</span><span class="s1">'7'</span><span class="p">],</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span><span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'image1.png'</span><span class="p">},</span>
|
|
<span class="p">{</span><span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'image2.png'</span><span class="p">,</span> <span class="nx">prompt</span><span class="o">:</span> <span class="s1">'<p>Press 1 for this trial.</p>'</span><span class="p">},</span>
|
|
<span class="p">{</span><span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'image3.png'</span><span class="p">}</span>
|
|
<span class="p">]</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>Timelines can be nested any number of times.</p>
|
|
<h2 id="timeline-variables">Timeline variables<a class="headerlink" href="#timeline-variables" title="Permanent link">¶</a></h2>
|
|
<p>A common pattern in behavioral experiments is to repeat the same procedure/task many times with slightly different parameters. A procedure might be a single trial, but it also might be a series of trials. For example, a task might involve a fixation cross appearing, followed by a blank screen, followed by an image for a short duration, followed by a prompt and a text box to report on some aspect of the image.</p>
|
|
<p>One shortcut to implement this pattern is with the nested timeline approach described in the previous section, but this only works if all the trials use the same plugin type. Timeline variables are a more general solution. With timeline variables you define the procedure once (as a timeline) and specify a set of parameters and their values for each iteration through the timeline.</p>
|
|
<p>What follows is an example of how to use timeline variables. The <a href="../../tutorials/rt-task/">simple reaction time tutorial</a> also explains how to use timeline variables.</p>
|
|
<p>Suppose we want to create an experiment where people see a set of faces. Perhaps this is a memory experiment and this is the phase of the experiment where the faces are being presented for the first time. In between each face, a fixation cross is displayed on the screen. Without timeline variables, we would need to add many trials to the timeline, alternating between trials showing the fixation cross and trials showing the face and name. This could be done efficiently using a loop or function to create the timeline, but timeline variables make it even easier - as well as adding extra features like sampling and randomization.</p>
|
|
<p>Here's a basic version of the task with timeline variables.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'+'</span><span class="p">,</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="s2">"NO_KEYS"</span><span class="p">,</span>
|
|
<span class="nx">trial_duration</span><span class="o">:</span> <span class="mf">500</span>
|
|
<span class="p">},</span>
|
|
<span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">'face'</span><span class="p">),</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="s2">"NO_KEYS"</span><span class="p">,</span>
|
|
<span class="nx">trial_duration</span><span class="o">:</span> <span class="mf">2500</span>
|
|
<span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span> <span class="p">}</span>
|
|
<span class="p">]</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>In the above version, there are four separate trials defined in the <code>timeline_variables</code> parameter. Each trial has a variable <code>face</code> and a variable <code>name</code>. The <code>timeline</code> defines a procedure of showing a fixation cross for 500ms followed by the face and name for 2500ms. This procedure will repeat four times, with the first trial showing <code>'person-1.jpg'</code>, the second <code>'person-2.jpg'</code>, and so on. The variables are referenced within the procedure by calling the <code>jsPsych.timelineVariable()</code> method and passing in the name of the variable.</p>
|
|
<p>What if we wanted to add an additional step to the task where the name is displayed prior to the face appearing? (Maybe this is one condition of an experiment investigating whether the order of name-face or face-name affects retention.) We can add another variable to our list that gives the name associated with each image. Then we can add another trial to our timeline to show the name.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'+'</span><span class="p">,</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="s2">"NO_KEYS"</span><span class="p">,</span>
|
|
<span class="nx">trial_duration</span><span class="o">:</span> <span class="mf">500</span>
|
|
<span class="p">},</span>
|
|
<span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">'name'</span><span class="p">),</span>
|
|
<span class="nx">trial_duration</span><span class="o">:</span> <span class="mf">1000</span><span class="p">,</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="s2">"NO_KEYS"</span>
|
|
<span class="p">},</span>
|
|
<span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">'face'</span><span class="p">),</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="s2">"NO_KEYS"</span><span class="p">,</span>
|
|
<span class="nx">trial_duration</span><span class="o">:</span> <span class="mf">1000</span>
|
|
<span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">]</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h3 id="using-in-a-function">Using in a function<a class="headerlink" href="#using-in-a-function" title="Permanent link">¶</a></h3>
|
|
<p>Continung the example from the previous section, what if we wanted to show the name with the face, combining the two variables together?
|
|
To do this, we can use a <a href="dynamic-parameters">dynamic parameter</a> (a function) to create an HTML-string that uses both variables in a single parameter.
|
|
The value of the <code>stimulus</code> parameter will be a function that returns an HTML string that contains both the image and the name. </p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'+'</span><span class="p">,</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="s2">"NO_KEYS"</span><span class="p">,</span>
|
|
<span class="nx">trial_duration</span><span class="o">:</span> <span class="mf">500</span>
|
|
<span class="p">},</span>
|
|
<span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">'name'</span><span class="p">),</span>
|
|
<span class="nx">trial_duration</span><span class="o">:</span> <span class="mf">1000</span><span class="p">,</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="s2">"NO_KEYS"</span>
|
|
<span class="p">},</span>
|
|
<span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
|
|
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="sb">`</span>
|
|
<span class="sb"> <img src="</span><span class="si">${</span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">'face'</span><span class="p">)</span><span class="si">}</span><span class="sb">"></span>
|
|
<span class="sb"> <p></span><span class="si">${</span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">'name'</span><span class="p">)</span><span class="si">}</span><span class="sb"></p>`</span><span class="p">;</span>
|
|
<span class="k">return</span> <span class="nx">html</span><span class="p">;</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">choices</span><span class="o">:</span> <span class="s2">"NO_KEYS"</span><span class="p">,</span>
|
|
<span class="nx">trial_duration</span><span class="o">:</span> <span class="mf">2500</span>
|
|
<span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">]</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h3 id="random-orders-of-trials">Random orders of trials<a class="headerlink" href="#random-orders-of-trials" title="Permanent link">¶</a></h3>
|
|
<p>If we want to randomize the order of the trials, we can set <code>randomize_order</code> to <code>true</code>.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">randomize_order</span><span class="o">:</span> <span class="kc">true</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h3 id="sampling-methods">Sampling methods<a class="headerlink" href="#sampling-methods" title="Permanent link">¶</a></h3>
|
|
<p>There are also sampling methods that can be used to select a set of trials from the timeline_variables.
|
|
Sampling is declared by creating a <code>sample</code> parameter.
|
|
The <code>sample</code> parameter is given an object of arguments.
|
|
The <code>type</code> parameter in this object controls the type of sampling that is done.
|
|
Valid values for <code>type</code> are </p>
|
|
<ul>
|
|
<li><code>"with-replacement"</code>: Sample <code>size</code> items from the timeline variables with the possibility of choosing the same item multiple time.</li>
|
|
<li><code>"without-replacement"</code>: Sample <code>size</code> itesm from timeline variables, with each item being selected a maximum of 1 time.</li>
|
|
<li><code>"fixed-repetitons"</code>: Repeat each item in the timeline variables <code>size</code> times, in a random order. Unlike using the <code>repetitons</code> parameter, this method allows for consecutive trials to use the same timeline variable set.</li>
|
|
<li><code>"alternate-groups"</code>: Sample in an alternating order based on a declared group membership. Groups are defined by the <code>groups</code> parameter. This parameter takes an array of arrays, where each inner array is a group and the items in the inner array are the indices of the timeline variables in the <code>timeline_variables</code> array that belong to that group.</li>
|
|
<li><code>"custom"</code>: Write a function that returns a custom order of the timeline variables.</li>
|
|
</ul>
|
|
<h4 id="sampling-with-replacement">Sampling with replacement<a class="headerlink" href="#sampling-with-replacement" title="Permanent link">¶</a></h4>
|
|
<p>This <code>sample</code> parameter will create 10 repetitions, sampling with replacement.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">sample</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="s1">'with-replacement'</span><span class="p">,</span>
|
|
<span class="nx">size</span><span class="o">:</span> <span class="mf">10</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h4 id="sampling-with-replacement-unequal-probabilities">Sampling with replacement, unequal probabilities<a class="headerlink" href="#sampling-with-replacement-unequal-probabilities" title="Permanent link">¶</a></h4>
|
|
<p>This <code>sample</code> parameter will make the "Alex" trial three times as likely to be sampled as the others.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">sample</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="s1">'with-replacement'</span><span class="p">,</span>
|
|
<span class="nx">size</span><span class="o">:</span> <span class="mf">10</span><span class="p">,</span>
|
|
<span class="nx">weights</span><span class="o">:</span> <span class="p">[</span><span class="mf">3</span><span class="p">,</span> <span class="mf">1</span><span class="p">,</span> <span class="mf">1</span><span class="p">,</span> <span class="mf">1</span><span class="p">]</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h4 id="sampling-without-replacement">Sampling without replacement<a class="headerlink" href="#sampling-without-replacement" title="Permanent link">¶</a></h4>
|
|
<p>This <code>sample</code> parameter will pick three of the four possible trials to run at random.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">sample</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="s1">'without-replacement'</span><span class="p">,</span>
|
|
<span class="nx">size</span><span class="o">:</span> <span class="mf">3</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h4 id="repeating-each-trial-a-fixed-number-of-times-in-a-random-order">Repeating each trial a fixed number of times in a random order<a class="headerlink" href="#repeating-each-trial-a-fixed-number-of-times-in-a-random-order" title="Permanent link">¶</a></h4>
|
|
<p>This <code>sample</code> parameter will create 3 repetitions of each trial, for a total of 12 trials, with a random order.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">sample</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="s1">'fixed-repetitions'</span><span class="p">,</span>
|
|
<span class="nx">size</span><span class="o">:</span> <span class="mf">3</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h4 id="alternating-groups">Alternating groups<a class="headerlink" href="#alternating-groups" title="Permanent link">¶</a></h4>
|
|
<p>This <code>sample</code> parameter puts the "Alex" and "Chad" trials in group 1 and the "Beth" and "Dave" trials in group 2.
|
|
The resulting sample of trials will follow the pattern <code>group 1</code> -> <code>group 2</code> -> <code>group 1</code> -> <code>group 2</code>.
|
|
Each trial will be selected only one time.
|
|
If you wanted <code>group 2</code> to sometimes be first, you could set <code>randomize_group_order: true</code>.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">sample</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="s1">'alternate-groups'</span><span class="p">,</span>
|
|
<span class="nx">groups</span><span class="o">:</span> <span class="p">[[</span><span class="mf">0</span><span class="p">,</span><span class="mf">2</span><span class="p">],[</span><span class="mf">1</span><span class="p">,</span><span class="mf">3</span><span class="p">]],</span>
|
|
<span class="nx">randomize_group_order</span><span class="o">:</span> <span class="kc">false</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h4 id="custom-sampling-function">Custom sampling function<a class="headerlink" href="#custom-sampling-function" title="Permanent link">¶</a></h4>
|
|
<p>Any sampling method can be implemented using the <code>custom</code> type sampler.
|
|
The order of trials will be determined by running the function supplied as <code>fn</code>.
|
|
The function has a single parameter, <code>t</code>, which is an array of integers from <code>0</code> to <code>n-1</code>, where <code>n</code> is the number of trials in the <code>timeline_variables</code> array.
|
|
The function must return an array that specifies the order of the trials, e.g., returning <code>[3,3,2,2,1,1,0,0]</code> would result in the order <code>Dave</code> -> <code>Dave</code> -> <code>Chad</code> -> <code>Chad</code> -> <code>Beth</code> -> <code>Beth</code> -> <code>Alex</code> -> <code>Alex</code>.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">sample</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="s1">'custom'</span><span class="p">,</span>
|
|
<span class="nx">fn</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">t</span><span class="p">){</span>
|
|
<span class="k">return</span> <span class="nx">t</span><span class="p">.</span><span class="nx">reverse</span><span class="p">();</span> <span class="c1">// show the trials in the reverse order</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h2 id="repeating-a-set-of-trials">Repeating a set of trials<a class="headerlink" href="#repeating-a-set-of-trials" title="Permanent link">¶</a></h2>
|
|
<p>To repeat a timeline multiple times, you can create an object (node) that contains a <code>timeline</code>, which is the timeline array to repeat, and <code>repetitions</code>, which is the number of times to repeat that timeline. </p>
|
|
<div class="highlight"><pre><span></span><code><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="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'This trial will be repeated twice.'</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">trial</span><span class="p">],</span>
|
|
<span class="nx">repetitions</span><span class="o">:</span> <span class="mf">2</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>The <code>repetitions</code> parameter can be used alongside other node parameters, such as timeline variables, loop functions, and/or conditional functions. If you are using <code>timeline_variables</code> and <code>randomize_order</code> is <code>true</code>, then the order of the timeline variables will re-randomize before every repetition.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">randomize_order</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">repetitions</span><span class="o">:</span> <span class="mf">3</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h2 id="looping-timelines">Looping timelines<a class="headerlink" href="#looping-timelines" title="Permanent link">¶</a></h2>
|
|
<p>Any timeline can be looped using the <code>loop_function</code> option.
|
|
The loop function must be a function that evaluates to <code>true</code> if the timeline should repeat, and <code>false</code> if the timeline should end. It receives a single parameter, named <code>data</code> by convention.
|
|
This parameter will be the <a href="../../reference/jspsych-data/#datacollection">DataCollection object</a> with all of the data from the trials executed in the last iteration of the timeline.
|
|
The loop function will be evaluated after the timeline is completed.</p>
|
|
<div class="highlight"><pre><span></span><code><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="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'This trial is in a loop. Press R to repeat this trial, or C to continue.'</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">loop_node</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">trial</span><span class="p">],</span>
|
|
<span class="nx">loop_function</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
|
|
<span class="k">if</span><span class="p">(</span><span class="nx">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="nx">data</span><span class="p">.</span><span class="nx">values</span><span class="p">()[</span><span class="mf">0</span><span class="p">].</span><span class="nx">response</span><span class="p">,</span> <span class="s1">'r'</span><span class="p">)){</span>
|
|
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h2 id="conditional-timelines">Conditional timelines<a class="headerlink" href="#conditional-timelines" title="Permanent link">¶</a></h2>
|
|
<p>A timeline can be skipped or not based on the evaluation of the <code>conditional_function</code> option.
|
|
If the conditional function evaluates to <code>true</code>, the timeline will execute normally.
|
|
If the conditional function evaluates to <code>false</code> then the timeline will be skipped.
|
|
The conditional function is evaluated whenever jsPsych is about to run the first trial on the timeline.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">jsPsych</span> <span class="o">=</span> <span class="nx">initJsPsych</span><span class="p">();</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">pre_if_trial</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'The next trial is in a conditional statement. Press S to skip it, or V to view it.'</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">if_trial</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'You chose to view the trial. Press any key to continue.'</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">if_node</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">if_trial</span><span class="p">],</span>
|
|
<span class="nx">conditional_function</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
|
|
<span class="c1">// get the data from the previous trial,</span>
|
|
<span class="c1">// and check which key was pressed</span>
|
|
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">get</span><span class="p">().</span><span class="nx">last</span><span class="p">(</span><span class="mf">1</span><span class="p">).</span><span class="nx">values</span><span class="p">()[</span><span class="mf">0</span><span class="p">];</span>
|
|
<span class="k">if</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">compareKeys</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">response</span><span class="p">,</span> <span class="s1">'s'</span><span class="p">)){</span>
|
|
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">after_if_trial</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'This is the trial after the conditional.'</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">([</span><span class="nx">pre_if_trial</span><span class="p">,</span> <span class="nx">if_node</span><span class="p">,</span> <span class="nx">after_if_trial</span><span class="p">]);</span>
|
|
</code></pre></div>
|
|
<h2 id="timeline-start-and-finish-functions">Timeline start and finish functions<a class="headerlink" href="#timeline-start-and-finish-functions" title="Permanent link">¶</a></h2>
|
|
<p>You can run a custom function at the start and end of a timeline node using the <code>on_timeline_start</code> and <code>on_timeline_finish</code> callback function parameters. These are functions that will run when the timeline starts and ends, respectively. </p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">trial_1</span><span class="p">,</span> <span class="nx">trial_2</span><span class="p">],</span>
|
|
<span class="nx">on_timeline_start</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'The trial procedure just started.'</span><span class="p">)</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">on_timeline_finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'The trial procedure just finished.'</span><span class="p">)</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>This works the same way with timeline variables. The <code>on_timeline_start</code> and <code>on_timeline_finish</code> functions will run when timeline variables trials start and end, respectively.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">face_name_procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
|
|
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-1.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Alex'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-2.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Beth'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-3.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Chad'</span> <span class="p">},</span>
|
|
<span class="p">{</span> <span class="nx">face</span><span class="o">:</span> <span class="s1">'person-4.jpg'</span><span class="p">,</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Dave'</span> <span class="p">}</span>
|
|
<span class="p">],</span>
|
|
<span class="nx">randomize_order</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">on_timeline_start</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'First trial is starting.'</span><span class="p">)</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">on_timeline_finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Last trial just finished.'</span><span class="p">)</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>When the <code>repetititons</code> option is used (and is greater than 1), these functions will run once per repetition of the timeline.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">repetition_count</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">procedure</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">trial_1</span><span class="p">,</span> <span class="nx">trial_2</span><span class="p">],</span>
|
|
<span class="nx">repetitions</span><span class="o">:</span> <span class="mf">3</span><span class="p">,</span>
|
|
<span class="nx">on_timeline_start</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">repetition_count</span><span class="o">++</span><span class="p">;</span>
|
|
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Repetition number '</span><span class="p">,</span><span class="nx">repetition_count</span><span class="p">,</span><span class="s1">' has just started.'</span><span class="p">);</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">on_timeline_finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Repetition number '</span><span class="p">,</span><span class="nx">repetition_count</span><span class="p">,</span><span class="s1">' has just finished.'</span><span class="p">)</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
<footer class="md-footer">
|
|
|
|
<nav class="md-footer__inner md-grid" aria-label="Footer">
|
|
|
|
|
|
<a href="../../tutorials/video-tutorials/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Video Tutorials" rel="prev">
|
|
<div class="md-footer__button md-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
|
|
</div>
|
|
<div class="md-footer__title">
|
|
<div class="md-ellipsis">
|
|
<span class="md-footer__direction">
|
|
Previous
|
|
</span>
|
|
Video Tutorials
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<a href="../plugins/" class="md-footer__link md-footer__link--next" aria-label="Next: Plugins" rel="next">
|
|
<div class="md-footer__title">
|
|
<div class="md-ellipsis">
|
|
<span class="md-footer__direction">
|
|
Next
|
|
</span>
|
|
Plugins
|
|
</div>
|
|
</div>
|
|
<div class="md-footer__button md-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
|
|
</div>
|
|
</a>
|
|
|
|
</nav>
|
|
|
|
<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-2021 Josh de Leeuw
|
|
</div>
|
|
|
|
|
|
Made with
|
|
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
|
|
Material for MkDocs
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="md-footer-social">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/jspsych" target="_blank" rel="noopener" title="github.com" class="md-footer-social__link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://twitter.com/joshdeleeuw" target="_blank" rel="noopener" title="twitter.com" class="md-footer-social__link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
<div class="md-dialog" data-md-component="dialog">
|
|
<div class="md-dialog__inner md-typeset"></div>
|
|
</div>
|
|
<script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "search": "../../assets/javascripts/workers/search.8397ff9e.min.js", "version": {"provider": "mike"}}</script>
|
|
|
|
|
|
<script src="../../assets/javascripts/bundle.f89c2efe.min.js"></script>
|
|
|
|
|
|
</body>
|
|
</html> |