mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
3664 lines
109 KiB
HTML
3664 lines
109 KiB
HTML
|
|
<!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/v8/tutorials/hello-world/">
|
|
|
|
|
|
<link rel="prev" href="../..">
|
|
|
|
|
|
<link rel="next" href="../rt-task/">
|
|
|
|
|
|
<link rel="icon" href="../../img/jspsych-favicon.png">
|
|
<meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.26">
|
|
|
|
|
|
|
|
<title>The Basics: Hello World - jsPsych</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../../assets/stylesheets/main.6543a935.min.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
|
|
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
|
|
|
|
|
|
|
|
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","UA-50563838-1"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","UA-50563838-1",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=UA-50563838-1",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>
|
|
|
|
<script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="green" data-md-color-accent="orange">
|
|
|
|
|
|
<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="#jspsych-hello-world-experiment" class="md-skip">
|
|
Skip to content
|
|
</a>
|
|
|
|
</div>
|
|
<div data-md-component="announce">
|
|
|
|
</div>
|
|
|
|
<div data-md-color-scheme="default" data-md-component="outdated" hidden>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<header class="md-header md-header--shadow" 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">
|
|
|
|
The Basics: Hello World
|
|
|
|
</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" title="Clear" 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" tabindex="0" 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" role="presentation"></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"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><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"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><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">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Introduction
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Tutorials
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
|
|
<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 md-nav__item--active">
|
|
|
|
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link md-nav__link--active" for="__toc">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
The Basics: Hello World
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<a href="./" class="md-nav__link md-nav__link--active">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
The Basics: Hello World
|
|
</span>
|
|
|
|
|
|
</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="#choose-your-own-setup-adventure" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Choose your own (setup) adventure
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#option-1-using-cdn-hosted-scripts" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Option 1: Using CDN-hosted scripts
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Option 1: Using CDN-hosted scripts">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-create-an-html-file" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 1: Create an HTML file
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-2-load-the-jspsych-library" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 2: Load the jsPsych library
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-3-create-a-script-element-and-initialize-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 3: Create a script element and initialize jsPsych
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-4-use-a-plugin-to-print-a-message" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 4: Use a plugin to print a message
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-5-run-the-experiment" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 5: Run the experiment
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#option-2-download-and-host-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Option 2: Download and host jsPsych
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Option 2: Download and host jsPsych">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-download-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 1: Download jsPsych
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-2-create-a-folder-to-store-your-experiment-files" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 2: Create a folder to store your experiment files
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-3-create-an-html-file" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 3: Create an HTML file
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-4-load-the-jspsych-library" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 4: Load the jsPsych library
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-5-create-a-script-element-and-initialize-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 5: Create a script element and initialize jsPsych
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-6-use-a-plugin-to-print-a-message" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 6: Use a plugin to print a message
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-7-run-the-experiment" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 7: Run the experiment
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#option-3-using-npm" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Option 3: Using NPM
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Option 3: Using NPM">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-install-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 1: Install jspsych
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-2-import-the-initjspsych-function-and-create-a-new-jspsych-instance" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 2: Import the initJsPsych function and create a new JsPsych instance
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-3-static-markup-and-css" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 3: Static markup and CSS
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-4-install-and-import-a-plugin" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 4: Install and import a plugin
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-5-create-a-trial" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 5: Create a trial
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-6-run" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 6: Run
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../rt-task/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Demo Experiment: Simple Reaction Time Task
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../community-tutorials/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Community Tutorials
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Overview
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
|
|
<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">
|
|
<a href="../../overview/timeline/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Creating an Experiment: The Timeline
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/plugins/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Plugins
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/extensions/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Extensions
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/dynamic-parameters/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Dynamic Parameters
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/style/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Controlling Visual Appearance
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/data/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Data Storage, Aggregation, and Manipulation
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/simulation/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Simulation Modes
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/running-experiments/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Running Experiments
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/experiment-options/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Experiment Settings
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/events/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Events
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/record-browser-interactions/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Record Browser Interactions
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/media-preloading/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Media Preloading
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/fullscreen/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Fullscreen Experiments
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/eye-tracking/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Eye Tracking
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/building-surveys/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Building Surveys
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/exclude-browser/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Exclude Participants Based on Browser Features
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/progress-bar/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Automatic Progress Bar
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/prolific/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Integrating with Prolific
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/mturk/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Integrating with Mechanical Turk
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/browser-device-support/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Browser and Device Support
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/timing-accuracy/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Timing Accuracy
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Reference
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
|
|
<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">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
jsPsych
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych-data/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
jsPsych.data
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych-randomization/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
jsPsych.randomization
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych-turk/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
jsPsych.turk
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych-utils/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
jsPsych.utils
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../reference/jspsych-pluginAPI/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
jsPsych.pluginAPI
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Plugins
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
|
|
<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">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
List of Plugins
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/animation/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
animation
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/audio-button-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
audio-button-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/audio-keyboard-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
audio-keyboard-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/audio-slider-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
audio-slider-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/browser-check/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
browser-check
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/call-function/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
call-function
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/canvas-button-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
canvas-button-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/canvas-keyboard-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
canvas-keyboard-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/canvas-slider-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
canvas-slider-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/categorize-animation/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
categorize-animation
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/categorize-html/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
categorize-html
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/categorize-image/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
categorize-image
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/cloze/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
cloze
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/external-html/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
external-html
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/free-sort/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
free-sort
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/fullscreen/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
fullscreen
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/html-audio-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
html-audio-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/html-button-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
html-button-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/html-keyboard-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
html-keyboard-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/html-slider-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
html-slider-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/html-video-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
html-video-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/iat-html/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
iat-html
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/iat-image/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
iat-image
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/image-button-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
image-button-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/image-keyboard-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
image-keyboard-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/image-slider-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
image-slider-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/initialize-camera/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
initialize-camera
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/initialize-microphone/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
initialize-microphone
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/instructions/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
instructions
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/maxdiff/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
maxdiff
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/mirror-camera/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
mirror-camera
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/preload/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
preload
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/reconstruction/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
reconstruction
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/resize/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
resize
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/same-different-html/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
same-different-html
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/same-different-image/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
same-different-image
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/serial-reaction-time/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
serial-reaction-time
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/serial-reaction-time-mouse/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
serial-reaction-time-mouse
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/sketchpad/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
sketchpad
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
survey
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-html-form/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
survey-html-form
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-likert/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
survey-likert
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-multi-choice/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
survey-multi-choice
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-multi-select/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
survey-multi-select
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/survey-text/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
survey-text
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/video-button-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
video-button-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/video-keyboard-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
video-keyboard-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/video-slider-response/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
video-slider-response
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/virtual-chinrest/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
virtual-chinrest
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/visual-search-circle/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
visual-search-circle
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/webgazer-calibrate/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
webgazer-calibrate
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/webgazer-init-camera/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
webgazer-init-camera
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/webgazer-validate/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
webgazer-validate
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Extensions
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
|
|
<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">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
List of Extensions
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../extensions/mouse-tracking/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
mouse-tracking
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../extensions/record-video/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
record-video
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../extensions/webgazer/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
webgazer
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Developers
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
|
|
<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">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Configuration
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../developers/documentation/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Building the Documentation
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../developers/contributing/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Contributing to jsPsych
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../developers/plugin-development/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Plugin Development
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../developers/extension-development/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Extension Development
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="0">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Support
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false">
|
|
<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">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Getting Help
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../support/migration-v7/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Migrating from 6.x to 7.x
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../support/migration-v8/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Migrating from 7.x to 8.x
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="0">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
About
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="false">
|
|
<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">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
About jsPsych
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/license/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
License
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
|
|
|
|
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_10" >
|
|
|
|
|
|
<label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="0">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Newsletter
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false">
|
|
<label class="md-nav__title" for="__nav_10">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Newsletter
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../newsletter/subscribe/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Subscribe
|
|
</span>
|
|
|
|
|
|
</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="#choose-your-own-setup-adventure" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Choose your own (setup) adventure
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#option-1-using-cdn-hosted-scripts" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Option 1: Using CDN-hosted scripts
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Option 1: Using CDN-hosted scripts">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-create-an-html-file" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 1: Create an HTML file
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-2-load-the-jspsych-library" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 2: Load the jsPsych library
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-3-create-a-script-element-and-initialize-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 3: Create a script element and initialize jsPsych
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-4-use-a-plugin-to-print-a-message" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 4: Use a plugin to print a message
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-5-run-the-experiment" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 5: Run the experiment
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#option-2-download-and-host-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Option 2: Download and host jsPsych
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Option 2: Download and host jsPsych">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-download-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 1: Download jsPsych
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-2-create-a-folder-to-store-your-experiment-files" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 2: Create a folder to store your experiment files
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-3-create-an-html-file" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 3: Create an HTML file
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-4-load-the-jspsych-library" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 4: Load the jsPsych library
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-5-create-a-script-element-and-initialize-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 5: Create a script element and initialize jsPsych
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-6-use-a-plugin-to-print-a-message" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 6: Use a plugin to print a message
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-7-run-the-experiment" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 7: Run the experiment
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#option-3-using-npm" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Option 3: Using NPM
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="md-nav" aria-label="Option 3: Using NPM">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-install-jspsych" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 1: Install jspsych
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-2-import-the-initjspsych-function-and-create-a-new-jspsych-instance" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 2: Import the initJsPsych function and create a new JsPsych instance
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-3-static-markup-and-css" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 3: Static markup and CSS
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-4-install-and-import-a-plugin" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 4: Install and import a plugin
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-5-create-a-trial" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 5: Create a trial
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-6-run" class="md-nav__link">
|
|
<span class="md-ellipsis">
|
|
Step 6: Run
|
|
</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="md-content" data-md-component="content">
|
|
<article class="md-content__inner md-typeset">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h1 id="jspsych-hello-world-experiment">jsPsych "Hello world" experiment<a class="headerlink" href="#jspsych-hello-world-experiment" title="Permanent link">¶</a></h1>
|
|
<p>In the long tradition of <strong>"Hello world!"</strong> examples, this tutorial creates an experiment that outputs the phrase "Hello world!" to the browser. Though useless as an actual experiment, the process is helpful for learning the basics of using the jsPsych library.</p>
|
|
<h2 id="choose-your-own-setup-adventure">Choose your own (setup) adventure<a class="headerlink" href="#choose-your-own-setup-adventure" title="Permanent link">¶</a></h2>
|
|
<p>Starting with the release of version 7.0 of jsPsych there are three different ways that you can add jsPsych to your project.
|
|
Which approach you choose will depend on what your goals are.</p>
|
|
<ul>
|
|
<li>
|
|
<p><a href="#option-1-using-cdn-hosted-scripts"><strong>I want the simplest possible setup</strong></a>. This approach involves using scripts that are hosted on a CDN. You do not need to download or install anything to start using jsPsych. The limitation is that you cannot customize the library. For most experiments, this approach will be sufficient.</p>
|
|
</li>
|
|
<li>
|
|
<p><a href="#option-2-download-and-host-jspsych"><strong>I want to be able to do some customization, but have a simple setup.</strong></a>. This approach involves downloading a bundle of scripts that make up jsPsych. <em>If you used jsPsych prior to version 7.0, this will feel like the most familiar approach</em>. Having your own copy of the scripts means that you can make modifications to the library such as tweaking plugin behavior.</p>
|
|
</li>
|
|
<li>
|
|
<p><a href="#option-3-using-npm"><strong>I want to use modern JavaScript tooling, like <code>npm</code> and <code>import</code> statements.</strong></a> You can install jsPsych, plugins for jsPsych, and extensions for jsPsych from NPM. This approach allows you to integrate jsPsych into your favorite JavaScript frameworks and get the benefits of TypeScript, bundlers, and more.</p>
|
|
</li>
|
|
</ul>
|
|
<h2 id="option-1-using-cdn-hosted-scripts">Option 1: Using CDN-hosted scripts<a class="headerlink" href="#option-1-using-cdn-hosted-scripts" title="Permanent link">¶</a></h2>
|
|
<h3 id="step-1-create-an-html-file">Step 1: Create an HTML file<a class="headerlink" href="#step-1-create-an-html-file" title="Permanent link">¶</a></h3>
|
|
<div class="admonition tip">
|
|
<p class="admonition-title">Tip</p>
|
|
<p>To edit jsPsych code you'll need a programming-friendly text editor. A great free option is <a href="https://code.visualstudio.com/">Visual Studio Code</a> (Windows, OSX, Linux).</p>
|
|
</div>
|
|
<p>Create a new file called <code>experiment.html</code>.</p>
|
|
<p>There's some basic code that (nearly) all HTML documents have in common. Here's a typical bare-bones HTML document.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>Add the above code to the <code>experiment.html</code> file and save it. If you open the file in a web browser, you should see a blank page and the title of the page will be 'My experiment'.</p>
|
|
<h3 id="step-2-load-the-jspsych-library">Step 2: Load the jsPsych library<a class="headerlink" href="#step-2-load-the-jspsych-library" title="Permanent link">¶</a></h3>
|
|
<p>To use jsPsych, add a <code><script></code> tag to load the library. We'll load the library from a <a href="https://unpkg.com/">CDN</a>, which means that the library is hosted on another server and can be loaded without having your own copy.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="hll"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
</span> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>Note that the URL for the jsPsych library includes the version number, which ensures that the behavior of your experiment won't change with any future updates to jsPsych.</p>
|
|
<p>You may also want to import the jsPsych stylesheet, which applies a basic set of visual styles to the experiment. This requires adding a <code><link></code> tag to the <code><head></code> section of the document.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="hll"> <span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1/css/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
</span> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<h3 id="step-3-create-a-script-element-and-initialize-jspsych">Step 3: Create a script element and initialize jsPsych<a class="headerlink" href="#step-3-create-a-script-element-and-initialize-jspsych" title="Permanent link">¶</a></h3>
|
|
<p>To add JavaScript code directly to the webpage we need to add a pair of <code><script></code> tags after the <code><body></code> tags.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1/css/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="hll"> <span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
</span><span class="hll"><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
</span><span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>To initialize jsPsych we use the <code>initJsPsych()</code> function and assign the output to a new variable.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1/css/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="hll"><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
</span><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<h3 id="step-4-use-a-plugin-to-print-a-message">Step 4: Use a plugin to print a message<a class="headerlink" href="#step-4-use-a-plugin-to-print-a-message" title="Permanent link">¶</a></h3>
|
|
<p>For this demo we want to show some text on the screen. This is exactly what the <a href="../../plugins/html-keyboard-response/">html-keyboard-response plugin</a> is designed to do. To use the plugin, we need to load it with a <code><script></code> tag.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="hll"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
</span> <span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1/css/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
<span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>Once the plugin is loaded we can create a trial using the plugin. To declare a trial that uses the <code>html-keyboard-response</code> plugin, we create an object with the property <code>type</code> equal to <code>jsPsychHtmlKeyboardResponse</code>. We can specify the other parameters of the plugin in the same object. Here we use the <code>stimulus</code> parameter to include a message. You can see the full set of parameters for each plugin on its <a href="../../plugins/html-keyboard-response/">documentation page</a>.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1/css/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
|
|
<span class="hll"><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">hello_trial</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
|
|
</span><span class="hll"><span class="w"> </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
</span><span class="hll"><span class="w"> </span><span class="nx">stimulus</span><span class="o">:</span><span class="w"> </span><span class="s1">'Hello world!'</span>
|
|
</span><span class="hll"><span class="w"> </span><span class="p">}</span>
|
|
</span><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<h3 id="step-5-run-the-experiment">Step 5: Run the experiment<a class="headerlink" href="#step-5-run-the-experiment" title="Permanent link">¶</a></h3>
|
|
<p>Now that we have the trial defined we need to tell jsPsych to run an experiment consisting of this trial. This requires using the <code>jsPsych.run</code> function and passing in a <a href="../../overview/timeline/">timeline</a>. For a simple experiment like this one, the timeline is just an array containing the list of trials to run.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://unpkg.com/jspsych@8.2.1/css/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
|
|
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">hello_trial</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
|
|
<span class="w"> </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="w"> </span><span class="nx">stimulus</span><span class="o">:</span><span class="w"> </span><span class="s1">'Hello world!'</span>
|
|
<span class="w"> </span><span class="p">}</span>
|
|
|
|
<span class="hll"><span class="w"> </span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">([</span><span class="nx">hello_trial</span><span class="p">]);</span>
|
|
</span><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>Once you've saved the file, open it in a browser. You should see "Hello world!" printed on the screen, and if you press a key on the keyboard, the text should disappear (ending the trial).</p>
|
|
<h2 id="option-2-download-and-host-jspsych">Option 2: Download and host jsPsych<a class="headerlink" href="#option-2-download-and-host-jspsych" title="Permanent link">¶</a></h2>
|
|
<h3 id="step-1-download-jspsych">Step 1: Download jsPsych<a class="headerlink" href="#step-1-download-jspsych" title="Permanent link">¶</a></h3>
|
|
<p>Start by downloading the latest release of jsPsych. Here's a <a href="https://www.github.com/jspsych/jspsych/releases/latest/download/jspsych.zip">direct link (jspsych.zip)</a>. The most recent version can always be found at the top of the <a href="https://github.com/jspsych/jsPsych/releases">GitHub releases page</a>.
|
|
Note that even the releases that are for a particular plugin or extension will contain the full set of files needed to run jsPsych locally in the <code>dist archive (zip)</code> release asset.
|
|
You should download the zip file for whatever the most recently released package is.
|
|
This will ensure that you have the most recent version of all the packages associated with jsPsych.</p>
|
|
<h3 id="step-2-create-a-folder-to-store-your-experiment-files">Step 2: Create a folder to store your experiment files<a class="headerlink" href="#step-2-create-a-folder-to-store-your-experiment-files" title="Permanent link">¶</a></h3>
|
|
<p>Create a folder on your computer to put the experiment files in. We'll call this "MyExperiment" for the tutorial. Add a subfolder called <code>jspsych</code>. Once you've created the folder, open the downloaded archive from step 1 and copy the contents of the <code>dist</code> folder into the <code>jspsych</code> folder. It should look like this:</p>
|
|
<div class="highlight"><pre><span></span><code>📂 MyExperiment
|
|
-- 📂 jspsych
|
|
---- 📄 jspsych.js
|
|
---- 📄 plugin-animation.js
|
|
---- 📄 plugin-audio-keyboard-response.js
|
|
---- ...
|
|
</code></pre></div>
|
|
<h3 id="step-3-create-an-html-file">Step 3: Create an HTML file<a class="headerlink" href="#step-3-create-an-html-file" title="Permanent link">¶</a></h3>
|
|
<div class="admonition tip">
|
|
<p class="admonition-title">Tip</p>
|
|
<p>To edit jsPsych code you'll need a programming-friendly text editor. A great free option is <a href="https://code.visualstudio.com/">Visual Studio Code</a> (Windows, OSX, Linux).</p>
|
|
</div>
|
|
<p>Create a new file called <code>experiment.html</code> in the <code>MyExperiment</code> folder. The directory structure should look like this:</p>
|
|
<div class="highlight"><pre><span></span><code>📂 MyExperiment
|
|
-- 📄 experiment.html
|
|
-- 📂 jspsych
|
|
</code></pre></div>
|
|
<p>There's some basic code that (nearly) all HTML documents have in common. Here's a typical bare-bones HTML document.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>Add the above code to the <code>experiment.html</code> file and save it. If you open the file in a web browser, you should see a blank page and the title of the page will be 'My experiment'.</p>
|
|
<h3 id="step-4-load-the-jspsych-library">Step 4: Load the jsPsych library<a class="headerlink" href="#step-4-load-the-jspsych-library" title="Permanent link">¶</a></h3>
|
|
<p>To use jsPsych, add a <code><script></code> tag to load the library. Set the <code>src</code> attribute to the path to the <code>jspsych.js</code> file.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="hll"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/jspsych.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
</span> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>You may also want to import the jsPsych stylesheet, which applies a basic set of visual styles to the experiment. This requires adding a <code><link></code> tag to the <code><head></code> section of the document.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/jspsych.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="hll"> <span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"jspsych/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
</span> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<h3 id="step-5-create-a-script-element-and-initialize-jspsych">Step 5: Create a script element and initialize jsPsych<a class="headerlink" href="#step-5-create-a-script-element-and-initialize-jspsych" title="Permanent link">¶</a></h3>
|
|
<p>To add JavaScript code directly to the webpage we need to add a pair of <code><script></code> tags after the <code><body></code> tags.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/jspsych.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"jspsych/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="hll"> <span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
</span><span class="hll"><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
</span><span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>To initialize jsPsych we use the <code>initJsPsych()</code> function and assign the output to a new variable.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/jspsych.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"jspsych/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="hll"><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
</span><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<h3 id="step-6-use-a-plugin-to-print-a-message">Step 6: Use a plugin to print a message<a class="headerlink" href="#step-6-use-a-plugin-to-print-a-message" title="Permanent link">¶</a></h3>
|
|
<p>For this demo we want to show some text on the screen. This is exactly what the <a href="../../plugins/html-keyboard-response/">html-keyboard-response plugin</a> is designed to do. To use the plugin, we need to load it with a <code><script></code> tag.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/jspsych.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="hll"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/plugin-html-keyboard-response.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
</span> <span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"jspsych/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
<span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>Once the plugin is loaded we can create a trial using the plugin. To declare a trial that uses the <code>html-keyboard-response</code> plugin, we create an object with the property <code>type</code> equal to <code>jsPsychHtmlKeyboardResponse</code>. We can specify the other parameters of the plugin in the same object. Here we use the <code>stimulus</code> parameter to include a message. You can see the full set of parameters for each plugin on its <a href="../../plugins/html-keyboard-response/">documentation page</a>.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/jspsych.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/plugin-html-keyboard-response.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"jspsych/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
|
|
<span class="hll"><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">hello_trial</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
|
|
</span><span class="hll"><span class="w"> </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
</span><span class="hll"><span class="w"> </span><span class="nx">stimulus</span><span class="o">:</span><span class="w"> </span><span class="s1">'Hello world!'</span>
|
|
</span><span class="hll"><span class="w"> </span><span class="p">}</span>
|
|
</span><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<h3 id="step-7-run-the-experiment">Step 7: Run the experiment<a class="headerlink" href="#step-7-run-the-experiment" title="Permanent link">¶</a></h3>
|
|
<p>Now that we have the trial defined we need to tell jsPsych to run an experiment consisting of this trial. This requires using the <code>jsPsych.run</code> function and passing in a <a href="../../overview/timeline/">timeline</a>. For a simple experiment like this one, the timeline is just an array containing the list of trials to run.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>My experiment<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/jspsych.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"jspsych/plugin-html-keyboard-response.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"jspsych/jspsych.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
|
|
<span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">hello_trial</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
|
|
<span class="w"> </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="w"> </span><span class="nx">stimulus</span><span class="o">:</span><span class="w"> </span><span class="s1">'Hello world!'</span>
|
|
<span class="w"> </span><span class="p">}</span>
|
|
|
|
<span class="hll"><span class="w"> </span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">([</span><span class="nx">hello_trial</span><span class="p">]);</span>
|
|
</span><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>Once you've saved the file, open it in a browser. You should see "Hello world!" printed on the screen, and if you press a key on the keyboard, the text should disappear (ending the trial).</p>
|
|
<h2 id="option-3-using-npm">Option 3: Using NPM<a class="headerlink" href="#option-3-using-npm" title="Permanent link">¶</a></h2>
|
|
<p>If you are electing to use <code>npm</code> to install jsPsych we will assume that you already are familiar with Node.js and generally know what you are doing with web development.
|
|
We will also assume that you are using a <a href="https://webpack.js.org/">webpack</a> or a similar bundler.</p>
|
|
<div class="admonition info">
|
|
<p class="admonition-title">Info</p>
|
|
<p>You may want to check out the <a href="https://github.com/bjoluc/jspsych-builder">jsPsych Builder</a> CLI utility.
|
|
jsPsych Builder allows you to automate the experiment setup, spin up a development server, and transpile and bundle scripts and styles using webpack.
|
|
Using jsPsych Builder will automate some of the steps in this tutorial, so if you prefer that option, you may want to switch to the getting started instructions on the jsPsych Builder GitHub page.</p>
|
|
</div>
|
|
<h3 id="step-1-install-jspsych">Step 1: Install jspsych<a class="headerlink" href="#step-1-install-jspsych" title="Permanent link">¶</a></h3>
|
|
<p>Run <code>npm install jspsych</code>.</p>
|
|
<p>This installs the core jsPsych package.
|
|
Plugins and extensions are installed separately.</p>
|
|
<h3 id="step-2-import-the-initjspsych-function-and-create-a-new-jspsych-instance">Step 2: Import the <code>initJsPsych</code> function and create a new <code>JsPsych</code> instance<a class="headerlink" href="#step-2-import-the-initjspsych-function-and-create-a-new-jspsych-instance" title="Permanent link">¶</a></h3>
|
|
<p>We create a new instance of the <code>JsPsych</code> class by calling <code>initJsPsych</code>.
|
|
The instance can optionally be configured via <a href="../../reference/jspsych/#initjspsych">a variety of options</a>, passed as an object to <code>initJsPsych</code>.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="nx">initJsPsych</span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'jspsych'</span><span class="p">;</span>
|
|
|
|
<span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
</code></pre></div>
|
|
<h3 id="step-3-static-markup-and-css">Step 3: Static markup and CSS<a class="headerlink" href="#step-3-static-markup-and-css" title="Permanent link">¶</a></h3>
|
|
<p>jsPsych requires nothing but a body element in your HTML document.
|
|
For the jsPsych stylesheet, depending on your bundler setup, you can either directly <code>import 'jspsych/css/jspsych.css'</code> into your JavaScript file or add a link tag (like <code><link href="path/to/jspsych.css" rel="stylesheet" type="text/css" /></code>) to your HTML document's head.</p>
|
|
<h3 id="step-4-install-and-import-a-plugin">Step 4: Install and import a plugin<a class="headerlink" href="#step-4-install-and-import-a-plugin" title="Permanent link">¶</a></h3>
|
|
<p>Install the <code>html-keyboard-response</code> plugin with:</p>
|
|
<p><code>npm install @jspsych/plugin-html-keyboard-response</code></p>
|
|
<p>Then import the <code>htmlKeyboardResponse</code> plugin class.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="nx">initJsPsych</span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'jspsych'</span><span class="p">;</span>
|
|
<span class="k">import</span><span class="w"> </span><span class="nx">htmlKeyboardResponse</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'@jspsych/plugin-html-keyboard-response'</span><span class="p">;</span>
|
|
|
|
<span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
</code></pre></div>
|
|
<h3 id="step-5-create-a-trial">Step 5: Create a trial<a class="headerlink" href="#step-5-create-a-trial" title="Permanent link">¶</a></h3>
|
|
<p>Once the plugin is imported we can create a trial using the plugin.
|
|
To declare a trial that uses the <code>html-keyboard-response</code> plugin, we create an object with the property <code>type</code> equal to <code>htmlKeyboardResponse</code>.
|
|
We can specify the other parameters of the plugin in the same object.
|
|
Here we use the <code>stimulus</code> parameter to include a message.
|
|
You can see the full set of parameters for each plugin on its <a href="../../plugins/html-keyboard-response/">documentation page</a>.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="nx">initJsPsych</span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'jspsych'</span><span class="p">;</span>
|
|
<span class="k">import</span><span class="w"> </span><span class="nx">htmlKeyboardResponse</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'@jspsych/plugin-html-keyboard-response'</span><span class="p">;</span>
|
|
|
|
<span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
|
|
<span class="kd">const</span><span class="w"> </span><span class="nx">trial</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
|
|
<span class="w"> </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="nx">htmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="w"> </span><span class="nx">stimulus</span><span class="o">:</span><span class="w"> </span><span class="s1">'Hello world!'</span><span class="p">,</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h3 id="step-6-run">Step 6: Run<a class="headerlink" href="#step-6-run" title="Permanent link">¶</a></h3>
|
|
<p>Now that we have the trial defined we need to tell jsPsych to run an experiment consisting of this trial. This requires using the <code>jsPsych.run</code> function and passing in a <a href="../../overview/timeline/">timeline</a>. For a simple experiment like this one, the timeline is just an array containing the list of trials to run.</p>
|
|
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="nx">initJsPsych</span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'jspsych'</span><span class="p">;</span>
|
|
<span class="k">import</span><span class="w"> </span><span class="nx">htmlKeyboardResponse</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'@jspsych/plugin-html-keyboard-response'</span><span class="p">;</span>
|
|
|
|
<span class="kd">const</span><span class="w"> </span><span class="nx">jsPsych</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">initJsPsych</span><span class="p">();</span>
|
|
|
|
<span class="kd">const</span><span class="w"> </span><span class="nx">trial</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
|
|
<span class="w"> </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="nx">htmlKeyboardResponse</span><span class="p">,</span>
|
|
<span class="w"> </span><span class="nx">stimulus</span><span class="o">:</span><span class="w"> </span><span class="s1">'Hello world!'</span><span class="p">,</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">trial</span><span class="p">]);</span>
|
|
</code></pre></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
</div>
|
|
|
|
|
|
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<footer class="md-footer">
|
|
|
|
<div class="md-footer-meta md-typeset">
|
|
<div class="md-footer-meta__inner md-grid">
|
|
<div class="md-copyright">
|
|
|
|
<div class="md-copyright__highlight">
|
|
Copyright © 2012-2022 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-social">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/jspsych" target="_blank" rel="noopener" title="github.com" class="md-social__link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><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-social__link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><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": [], "search": "../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
|
|
|
|
|
|
<script src="../../assets/javascripts/bundle.ad660dcc.min.js"></script>
|
|
|
|
|
|
</body>
|
|
</html> |