mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-11 16:18:11 +00:00
1376 lines
44 KiB
HTML
Executable File
1376 lines
44 KiB
HTML
Executable File
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
|
|
|
|
|
|
|
|
<meta name="lang:clipboard.copy" content="Copy to clipboard">
|
|
|
|
<meta name="lang:clipboard.copied" content="Copied to clipboard">
|
|
|
|
<meta name="lang:search.language" content="en">
|
|
|
|
<meta name="lang:search.result.none" content="No matching documents">
|
|
|
|
<meta name="lang:search.result.one" content="1 matching document">
|
|
|
|
<meta name="lang:search.result.other" content="# matching documents">
|
|
|
|
<meta name="lang:search.tokenizer" content="[\s\-]+">
|
|
|
|
<link rel="shortcut icon" href="../../assets/images/favicon.png">
|
|
<meta name="generator" content="mkdocs-0.17.2, mkdocs-material-2.2.6">
|
|
|
|
|
|
|
|
<title>The Basics: Hello World - jsPsych</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../../assets/stylesheets/application.6525f7f6.css">
|
|
|
|
<link rel="stylesheet" href="../../assets/stylesheets/application-palette.792431c1.css">
|
|
|
|
|
|
|
|
<script src="../../assets/javascripts/modernizr.1aa3b519.js"></script>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono">
|
|
<style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body data-md-color-primary="green" data-md-color-accent="orange">
|
|
|
|
|
|
<svg class="md-svg">
|
|
<defs>
|
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448" id="github"><path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>
|
|
|
|
</defs>
|
|
</svg>
|
|
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="drawer">
|
|
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="search">
|
|
<label class="md-overlay" data-md-component="overlay" for="drawer"></label>
|
|
|
|
<header class="md-header" data-md-component="header">
|
|
<nav class="md-header-nav md-grid">
|
|
<div class="md-flex">
|
|
<div class="md-flex__cell md-flex__cell--shrink">
|
|
<a href="../.." title="jsPsych" class="md-header-nav__button md-logo">
|
|
|
|
<img src="../../img/jspsych-logo-no-text-mono.svg" width="24" height="24">
|
|
|
|
</a>
|
|
</div>
|
|
<div class="md-flex__cell md-flex__cell--shrink">
|
|
<label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label>
|
|
</div>
|
|
<div class="md-flex__cell md-flex__cell--stretch">
|
|
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
|
|
|
|
|
|
<span class="md-header-nav__topic">
|
|
jsPsych
|
|
</span>
|
|
<span class="md-header-nav__topic">
|
|
The Basics: Hello World
|
|
</span>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="md-flex__cell md-flex__cell--shrink">
|
|
|
|
|
|
<label class="md-icon md-icon--search md-header-nav__button" for="search"></label>
|
|
|
|
<div class="md-search" data-md-component="search" role="dialog">
|
|
<label class="md-search__overlay" for="search"></label>
|
|
<div class="md-search__inner">
|
|
<form class="md-search__form" name="search">
|
|
<input type="text" class="md-search__input" name="query" required placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
|
|
<label class="md-icon md-search__icon" for="search"></label>
|
|
<button type="reset" class="md-icon md-search__icon" data-md-component="reset"></button>
|
|
</form>
|
|
<div class="md-search__output">
|
|
<div class="md-search__scrollwrap" data-md-scrollfix>
|
|
<div class="md-search-result" data-md-component="result">
|
|
<div class="md-search-result__meta">
|
|
Type to start searching
|
|
</div>
|
|
<ol class="md-search-result__list"></ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="md-flex__cell md-flex__cell--shrink">
|
|
<div class="md-header-nav__source">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-source="github">
|
|
|
|
<div class="md-source__icon">
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<use xlink:href="#github" width="24" height="24"></use>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="md-source__repository">
|
|
jspsych/jspsych
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="md-container">
|
|
|
|
|
|
|
|
|
|
<main class="md-main">
|
|
<div class="md-main__inner md-grid" data-md-component="container">
|
|
|
|
|
|
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
<nav class="md-nav md-nav--primary" data-md-level="0">
|
|
<label class="md-nav__title md-nav__title--site" for="drawer">
|
|
<span class="md-nav__button md-logo">
|
|
|
|
<img src="../../img/jspsych-logo-no-text-mono.svg" width="24" height="24">
|
|
|
|
</span>
|
|
jsPsych
|
|
</label>
|
|
|
|
<div class="md-nav__source">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-source="github">
|
|
|
|
<div class="md-source__icon">
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<use xlink:href="#github" width="24" height="24"></use>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="md-source__repository">
|
|
jspsych/jspsych
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../.." title="Introduction" class="md-nav__link">
|
|
Introduction
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-2" type="checkbox" id="nav-2" checked>
|
|
|
|
<label class="md-nav__link" for="nav-2">
|
|
Tutorials
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-2">
|
|
Tutorials
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="toc">
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link md-nav__link--active" for="toc">
|
|
The Basics: Hello World
|
|
</label>
|
|
|
|
<a href="./" title="The Basics: Hello World" class="md-nav__link md-nav__link--active">
|
|
The Basics: Hello World
|
|
</a>
|
|
|
|
|
|
<nav class="md-nav md-nav--secondary">
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="toc">Table of contents</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-download-the-jspsych-library" title="Step 1: Download the jsPsych library" class="md-nav__link">
|
|
Step 1: Download the jsPsych library
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-2-create-a-folder-to-store-your-experiment-files" title="Step 2: Create a folder to store your experiment files" class="md-nav__link">
|
|
Step 2: Create a folder to store your experiment files
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-3-create-a-new-html-file" title="Step 3: Create a new HTML file" class="md-nav__link">
|
|
Step 3: Create a new HTML file
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-4-add-the-bare-minimum-html-code" title="Step 4: Add the bare-minimum HTML code" class="md-nav__link">
|
|
Step 4: Add the bare-minimum HTML code
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-5-import-the-jspsych-library" title="Step 5: Import the jsPsych library" class="md-nav__link">
|
|
Step 5: Import the jsPsych library
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-6-use-the-jspsych-html-keyboard-response-plugin-to-print-a-message" title="Step 6: Use the jspsych-html-keyboard-response plugin to print a message" class="md-nav__link">
|
|
Step 6: Use the jspsych-html-keyboard-response plugin to print a message
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../rt-task/" title="Demo Experiment: Simple Reaction Time Task" class="md-nav__link">
|
|
Demo Experiment: Simple Reaction Time Task
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3">
|
|
|
|
<label class="md-nav__link" for="nav-3">
|
|
Overview
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-3">
|
|
Overview
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/timeline/" title="Creating an Experiment: The Timeline" class="md-nav__link">
|
|
Creating an Experiment: The Timeline
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/trial/" title="Advanced Options for Trials" class="md-nav__link">
|
|
Advanced Options for Trials
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/data/" title="Data Storage, Aggregation, and Manipulation" class="md-nav__link">
|
|
Data Storage, Aggregation, and Manipulation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/callbacks/" title="Event-related Callback Functions" class="md-nav__link">
|
|
Event-related Callback Functions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/record-browser-interactions/" title="Record Browser Interactions" class="md-nav__link">
|
|
Record Browser Interactions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/media-preloading/" title="Media Preloading" class="md-nav__link">
|
|
Media Preloading
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/fullscreen/" title="Fullscreen Experiments" class="md-nav__link">
|
|
Fullscreen Experiments
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/exclude-browser/" title="Exclude Participants Based on Browser Features" class="md-nav__link">
|
|
Exclude Participants Based on Browser Features
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/progress-bar/" title="Automatic Progress Bar" class="md-nav__link">
|
|
Automatic Progress Bar
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../features/mturk/" title="Integrating with Mechanical Turk" class="md-nav__link">
|
|
Integrating with Mechanical Turk
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-4" type="checkbox" id="nav-4">
|
|
|
|
<label class="md-nav__link" for="nav-4">
|
|
Core Library API
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-4">
|
|
Core Library API
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-core/" title="jsPsych" class="md-nav__link">
|
|
jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-data/" title="jsPsych.data" class="md-nav__link">
|
|
jsPsych.data
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-randomization/" title="jsPsych.randomization" class="md-nav__link">
|
|
jsPsych.randomization
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-turk/" title="jsPsych.turk" class="md-nav__link">
|
|
jsPsych.turk
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-pluginAPI/" title="jsPsych.pluginAPI" class="md-nav__link">
|
|
jsPsych.pluginAPI
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-5" type="checkbox" id="nav-5">
|
|
|
|
<label class="md-nav__link" for="nav-5">
|
|
Plugins
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-5">
|
|
Plugins
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/overview/" title="Overview" class="md-nav__link">
|
|
Overview
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/creating-a-plugin/" title="Creating a New Plugin" class="md-nav__link">
|
|
Creating a New Plugin
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-animation/" title="jspsych-animation" class="md-nav__link">
|
|
jspsych-animation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-audio-button-response/" title="jspsych-audio-button-response" class="md-nav__link">
|
|
jspsych-audio-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-audio-keyboard-response/" title="jspsych-audio-keyboard-response" class="md-nav__link">
|
|
jspsych-audio-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-audio-slider-response/" title="jspsych-audio-slider-response" class="md-nav__link">
|
|
jspsych-audio-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-call-function/" title="jspsych-call-function" class="md-nav__link">
|
|
jspsych-call-function
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-categorize-animation/" title="jspsych-categorize-animation" class="md-nav__link">
|
|
jspsych-categorize-animation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-categorize-html/" title="jspsych-categorize-html" class="md-nav__link">
|
|
jspsych-categorize-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-categorize-image/" title="jspsych-categorize-image" class="md-nav__link">
|
|
jspsych-categorize-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-external-html/" title="jspsych-external-html" class="md-nav__link">
|
|
jspsych-external-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-free-sort/" title="jspsych-free-sort" class="md-nav__link">
|
|
jspsych-free-sort
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-fullscreen/" title="jspsych-fullscreen" class="md-nav__link">
|
|
jspsych-fullscreen
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-html-button-response/" title="jspsych-html-button-response" class="md-nav__link">
|
|
jspsych-html-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-html-keyboard-response/" title="jspsych-html-keyboard-response" class="md-nav__link">
|
|
jspsych-html-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-html-slider-response/" title="jspsych-html-slider-response" class="md-nav__link">
|
|
jspsych-html-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-iat-html/" title="jspsych-iat-html" class="md-nav__link">
|
|
jspsych-iat-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-iat-image/" title="jspsych-iat-image" class="md-nav__link">
|
|
jspsych-iat-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-image-button-response/" title="jspsych-image-button-response" class="md-nav__link">
|
|
jspsych-image-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-image-keyboard-response/" title="jspsych-image-keyboard-response" class="md-nav__link">
|
|
jspsych-image-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-image-slider-response/" title="jspsych-image-slider-response" class="md-nav__link">
|
|
jspsych-image-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-instructions/" title="jspsych-instructions" class="md-nav__link">
|
|
jspsych-instructions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-reconstruction/" title="jspsych-reconstruction" class="md-nav__link">
|
|
jspsych-reconstruction
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-resize/" title="jspsych-resize" class="md-nav__link">
|
|
jspsych-resize
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-same-different-html/" title="jspsych-same-different-html" class="md-nav__link">
|
|
jspsych-same-different-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-same-different-image/" title="jspsych-same-different-image" class="md-nav__link">
|
|
jspsych-same-different-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-serial-reaction-time/" title="jspsych-serial-reaction-time" class="md-nav__link">
|
|
jspsych-serial-reaction-time
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-serial-reaction-time-mouse/" title="jspsych-serial-reaction-time-mouse" class="md-nav__link">
|
|
jspsych-serial-reaction-time-mouse
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-survey-likert/" title="jspsych-survey-likert" class="md-nav__link">
|
|
jspsych-survey-likert
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-survey-multi-choice/" title="jspsych-survey-multi-choice" class="md-nav__link">
|
|
jspsych-survey-multi-choice
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-survey-multi-select/" title="jspsych-survey-multi-select" class="md-nav__link">
|
|
jspsych-survey-multi-select
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-survey-text/" title="jspsych-survey-text" class="md-nav__link">
|
|
jspsych-survey-text
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-video/" title="jspsych-video" class="md-nav__link">
|
|
jspsych-video
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-visual-search-circle/" title="jspsych-visual-search-circle" class="md-nav__link">
|
|
jspsych-visual-search-circle
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-vsl-animate-occlusion/" title="jspsych-vsl-animate-occlusion" class="md-nav__link">
|
|
jspsych-vsl-animate-occlusion
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../plugins/jspsych-vsl-grid-scene/" title="jspsych-vsl-grid-scene" class="md-nav__link">
|
|
jspsych-vsl-grid-scene
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6">
|
|
|
|
<label class="md-nav__link" for="nav-6">
|
|
About
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-6">
|
|
About
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/about/" title="About jsPsych" class="md-nav__link">
|
|
About jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/support/" title="Getting Help" class="md-nav__link">
|
|
Getting Help
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/contributing/" title="Contributing to jsPsych" class="md-nav__link">
|
|
Contributing to jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/license/" title="License" class="md-nav__link">
|
|
License
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
|
|
<nav class="md-nav md-nav--secondary">
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="toc">Table of contents</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-1-download-the-jspsych-library" title="Step 1: Download the jsPsych library" class="md-nav__link">
|
|
Step 1: Download the jsPsych library
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-2-create-a-folder-to-store-your-experiment-files" title="Step 2: Create a folder to store your experiment files" class="md-nav__link">
|
|
Step 2: Create a folder to store your experiment files
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-3-create-a-new-html-file" title="Step 3: Create a new HTML file" class="md-nav__link">
|
|
Step 3: Create a new HTML file
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-4-add-the-bare-minimum-html-code" title="Step 4: Add the bare-minimum HTML code" class="md-nav__link">
|
|
Step 4: Add the bare-minimum HTML code
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-5-import-the-jspsych-library" title="Step 5: Import the jsPsych library" class="md-nav__link">
|
|
Step 5: Import the jsPsych library
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#step-6-use-the-jspsych-html-keyboard-response-plugin-to-print-a-message" title="Step 6: Use the jspsych-html-keyboard-response plugin to print a message" class="md-nav__link">
|
|
Step 6: Use the jspsych-html-keyboard-response plugin to print a message
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md-content">
|
|
<article class="md-content__inner md-typeset">
|
|
|
|
|
|
<a href="https://github.com/jspsych/jsPsych/edit/master/docs/tutorials/hello-world.md" title="Edit this page" class="md-icon md-content__icon"></a>
|
|
|
|
|
|
<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. This tutorial will assume that you know very little about how to set up a web page.</p>
|
|
<h2 id="step-1-download-the-jspsych-library">Step 1: Download the jsPsych library<a class="headerlink" href="#step-1-download-the-jspsych-library" title="Permanent link">¶</a></h2>
|
|
<p>Start by downloading the jsPsych library. The most recent version can always be found on the <a href="https://github.com/jodeleeuw/jsPsych/releases">GitHub releases page</a>.</p>
|
|
<p><em>Note: the image below shows version 4.2, but the process is the same for the most recent version.</em></p>
|
|
<p><img alt="releasespage" src="../../img/githubreleases.jpg" /></p>
|
|
<h2 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></h2>
|
|
<p>Create a folder on your computer to put the experiment files in. Once you've created the folder, open the downloaded archive from step 1, and move the extracted folder (called <code>jspsych-6.0</code> if using v6.0 of jsPsych) into the experiment folder. Here's what it looks like on a Windows machine:</p>
|
|
<p><img alt="folder setup" src="../../img/folder-setup.png" /></p>
|
|
<h2 id="step-3-create-a-new-html-file">Step 3: Create a new HTML file<a class="headerlink" href="#step-3-create-a-new-html-file" title="Permanent link">¶</a></h2>
|
|
<p>To edit jsPsych code you'll need a programming-friendly text editor. Some free options are:</p>
|
|
<ul>
|
|
<li><a href="https://atom.io">Atom</a> (Windows, OSX, Linux)</li>
|
|
<li><a href="http://notepad-plus-plus.org/">Notepad++</a> (Windows)</li>
|
|
<li><a href="http://macromates.com/">TextMate</a> (OSX)</li>
|
|
</ul>
|
|
<p>Once you've got a text editor that you like, create a new file in the experiment folder called <code>experiment.html</code></p>
|
|
<p><img alt="folder setup" src="../../img/folder-with-html.png" /></p>
|
|
<h2 id="step-4-add-the-bare-minimum-html-code">Step 4: Add the bare-minimum HTML code<a class="headerlink" href="#step-4-add-the-bare-minimum-html-code" title="Permanent link">¶</a></h2>
|
|
<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="codehilite"><pre><span></span><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>
|
|
</pre></div>
|
|
|
|
|
|
<p>Add the above code to the experiment.html file and save it. If you then open the file in a web browser, you should see a blank page and the title of the page will be 'My experiment'.</p>
|
|
<h2 id="step-5-import-the-jspsych-library">Step 5: Import the jsPsych library<a class="headerlink" href="#step-5-import-the-jspsych-library" title="Permanent link">¶</a></h2>
|
|
<p>To use jsPsych, add a <code><script></code> tag to import the library.</p>
|
|
<div class="codehilite"><pre><span></span><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-6.0/jspsych.js"</span><span class="p">></</span><span class="nt">script</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>
|
|
</pre></div>
|
|
|
|
|
|
<p>You may also want to import the jsPsych stylesheet, which applies a basic set of visual styles to the experiment to make it visually pleasing. This requires adding a <code><link></code> tag to the <code><head></code> section of the document.</p>
|
|
<div class="codehilite"><pre><span></span><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-6.0/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-6.0/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="nt">link</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>
|
|
</pre></div>
|
|
|
|
|
|
<h2 id="step-6-use-the-jspsych-html-keyboard-response-plugin-to-print-a-message">Step 6: Use the jspsych-html-keyboard-response plugin to print a message<a class="headerlink" href="#step-6-use-the-jspsych-html-keyboard-response-plugin-to-print-a-message" title="Permanent link">¶</a></h2>
|
|
<p>For the demo, we want to show some text on the screen. This is exactly what the <a href="../../plugins/jspsych-html-keyboard-response/">jspsych-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="codehilite"><pre><span></span><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-6.0/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-6.0/plugins/jspsych-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-6.0/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="nt">link</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>
|
|
</pre></div>
|
|
|
|
|
|
<p>Once the plugin is loaded, we can create an experiment using the plugin. To declare a trial that uses the html-keyboard-response plugin, we create a JavaScript object with the property <code>type</code> equal to <code>'html-keyboard-response'</code>. Then we can specify the other parameters of the plugin in the same object.</p>
|
|
<p>To add JavaScript code directly to the webpage we need to add a set of <code><script></code> tags after the <code><body></code> tags.</p>
|
|
<div class="codehilite"><pre><span></span><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-6.0/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-6.0/plugins/jspsych-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-6.0/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="nt">link</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="kd">var</span> <span class="nx">hello_trial</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="s1">'html-keyboard-response'</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'Hello world!'</span>
|
|
<span class="p">}</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>
|
|
</pre></div>
|
|
|
|
|
|
<p>Now that we have the trial defined we just need to tell jsPsych to run an experiment consisting of this trial. This requires using the <code>jsPsych.init</code> function and specifying the <code>timeline</code> parameter.</p>
|
|
<div class="codehilite"><pre><span></span><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-6.0/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-6.0/plugins/jspsych-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-6.0/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="nt">link</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="kd">var</span> <span class="nx">hello_trial</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">type</span><span class="o">:</span> <span class="s1">'html-keyboard-response'</span><span class="p">,</span>
|
|
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">'Hello world!'</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">init</span><span class="p">({</span>
|
|
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">hello_trial</span><span class="p">]</span>
|
|
<span class="p">})</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>
|
|
</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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<footer class="md-footer">
|
|
|
|
<div class="md-footer-nav">
|
|
<nav class="md-footer-nav__inner md-grid">
|
|
|
|
<a href="../.." title="Introduction" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
|
<div class="md-flex__cell md-flex__cell--shrink">
|
|
<i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
|
|
</div>
|
|
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
|
<span class="md-flex__ellipsis">
|
|
<span class="md-footer-nav__direction">
|
|
Previous
|
|
</span>
|
|
Introduction
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="../rt-task/" title="Demo Experiment: Simple Reaction Time Task" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
|
|
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
|
<span class="md-flex__ellipsis">
|
|
<span class="md-footer-nav__direction">
|
|
Next
|
|
</span>
|
|
Demo Experiment: Simple Reaction Time Task
|
|
</span>
|
|
</div>
|
|
<div class="md-flex__cell md-flex__cell--shrink">
|
|
<i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
|
|
</div>
|
|
</a>
|
|
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="md-footer-meta md-typeset">
|
|
<div class="md-footer-meta__inner md-grid">
|
|
<div class="md-footer-copyright">
|
|
|
|
powered by
|
|
<a href="http://www.mkdocs.org">MkDocs</a>
|
|
and
|
|
<a href="https://squidfunk.github.io/mkdocs-material/">
|
|
Material for MkDocs</a>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="../../assets/javascripts/application.cae2244d.js"></script>
|
|
|
|
<script>app.initialize({version:"0.17.2",url:{base:"../.."}})</script>
|
|
|
|
|
|
|
|
|
|
<script>!function(e,a,t,n,o,c,i){e.GoogleAnalyticsObject=o,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(t),i=a.getElementsByTagName(t)[0],c.async=1,c.src="https://www.google-analytics.com/analytics.js",i.parentNode.insertBefore(c,i)}(window,document,"script",0,"ga"),ga("create","UA-50563838-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview");var links=document.getElementsByTagName("a");Array.prototype.map.call(links,function(e){e.host!=document.location.host&&e.addEventListener("click",function(){var a=e.getAttribute("data-md-action")||"follow";ga("send","event","outbound",a,e.href)})});var query=document.forms.search.query;query.addEventListener("blur",function(){if(this.value){var e=document.location.pathname;ga("send","pageview",e+"?q="+this.value)}})</script>
|
|
|
|
|
|
</body>
|
|
</html> |