mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-13 09:08:13 +00:00
1351 lines
35 KiB
HTML
Executable File
1351 lines
35 KiB
HTML
Executable File
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
|
|
|
|
|
|
|
|
<meta name="lang:clipboard.copy" content="Copy to clipboard">
|
|
|
|
<meta name="lang:clipboard.copied" content="Copied to clipboard">
|
|
|
|
<meta name="lang:search.language" content="en">
|
|
|
|
<meta name="lang:search.result.none" content="No matching documents">
|
|
|
|
<meta name="lang:search.result.one" content="1 matching document">
|
|
|
|
<meta name="lang:search.result.other" content="# matching documents">
|
|
|
|
<meta name="lang:search.tokenizer" content="[\s\-]+">
|
|
|
|
<link rel="shortcut icon" href="../../img/jspsych-favicon.png">
|
|
<meta name="generator" content="mkdocs-0.17.5, mkdocs-material-2.2.6">
|
|
|
|
|
|
|
|
<title>Creating a New Plugin - 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">
|
|
Creating a New Plugin
|
|
</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--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-2" type="checkbox" id="nav-2">
|
|
|
|
<label class="md-nav__link" for="nav-2">
|
|
Tutorials
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-2">
|
|
Tutorials
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../tutorials/hello-world/" title="The Basics: Hello World" class="md-nav__link">
|
|
The Basics: Hello World
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../tutorials/rt-task/" title="Demo Experiment: Simple Reaction Time Task" class="md-nav__link">
|
|
Demo Experiment: Simple Reaction Time Task
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3">
|
|
|
|
<label class="md-nav__link" for="nav-3">
|
|
Overview
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-3">
|
|
Overview
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/timeline/" title="Creating an Experiment: The Timeline" class="md-nav__link">
|
|
Creating an Experiment: The Timeline
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/trial/" title="Advanced Options for Trials" class="md-nav__link">
|
|
Advanced Options for Trials
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/data/" title="Data Storage, Aggregation, and Manipulation" class="md-nav__link">
|
|
Data Storage, Aggregation, and Manipulation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/callbacks/" title="Event-related Callback Functions" class="md-nav__link">
|
|
Event-related Callback Functions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/record-browser-interactions/" title="Record Browser Interactions" class="md-nav__link">
|
|
Record Browser Interactions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/media-preloading/" title="Media Preloading" class="md-nav__link">
|
|
Media Preloading
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/fullscreen/" title="Fullscreen Experiments" class="md-nav__link">
|
|
Fullscreen Experiments
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/exclude-browser/" title="Exclude Participants Based on Browser Features" class="md-nav__link">
|
|
Exclude Participants Based on Browser Features
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/progress-bar/" title="Automatic Progress Bar" class="md-nav__link">
|
|
Automatic Progress Bar
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../overview/mturk/" title="Integrating with Mechanical Turk" class="md-nav__link">
|
|
Integrating with Mechanical Turk
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-4" type="checkbox" id="nav-4">
|
|
|
|
<label class="md-nav__link" for="nav-4">
|
|
Core Library API
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-4">
|
|
Core Library API
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-core/" title="jsPsych" class="md-nav__link">
|
|
jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-data/" title="jsPsych.data" class="md-nav__link">
|
|
jsPsych.data
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-randomization/" title="jsPsych.randomization" class="md-nav__link">
|
|
jsPsych.randomization
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-turk/" title="jsPsych.turk" class="md-nav__link">
|
|
jsPsych.turk
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../core_library/jspsych-pluginAPI/" title="jsPsych.pluginAPI" class="md-nav__link">
|
|
jsPsych.pluginAPI
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-5" type="checkbox" id="nav-5" checked>
|
|
|
|
<label class="md-nav__link" for="nav-5">
|
|
Plugins
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-5">
|
|
Plugins
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../overview/" title="Overview" class="md-nav__link">
|
|
Overview
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item 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">
|
|
Creating a New Plugin
|
|
</label>
|
|
|
|
<a href="./" title="Creating a New Plugin" class="md-nav__link md-nav__link--active">
|
|
Creating a New Plugin
|
|
</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="#whats-in-a-plugin-file" title="What's in a plugin file?" class="md-nav__link">
|
|
What's in a plugin file?
|
|
</a>
|
|
|
|
<nav class="md-nav">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#plugintrial" title="plugin.trial" class="md-nav__link">
|
|
plugin.trial
|
|
</a>
|
|
|
|
<nav class="md-nav">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#change-the-content-of-the-display" title="Change the content of the display" class="md-nav__link">
|
|
Change the content of the display
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#write-data" title="Write data" class="md-nav__link">
|
|
Write data
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#the-plugin-template" title="The plugin template" class="md-nav__link">
|
|
The plugin template
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-animation/" title="jspsych-animation" class="md-nav__link">
|
|
jspsych-animation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../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="../jspsych-audio-keyboard-response/" title="jspsych-audio-keyboard-response" class="md-nav__link">
|
|
jspsych-audio-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-audio-slider-response/" title="jspsych-audio-slider-response" class="md-nav__link">
|
|
jspsych-audio-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-call-function/" title="jspsych-call-function" class="md-nav__link">
|
|
jspsych-call-function
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-categorize-animation/" title="jspsych-categorize-animation" class="md-nav__link">
|
|
jspsych-categorize-animation
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-categorize-html/" title="jspsych-categorize-html" class="md-nav__link">
|
|
jspsych-categorize-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-categorize-image/" title="jspsych-categorize-image" class="md-nav__link">
|
|
jspsych-categorize-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-external-html/" title="jspsych-external-html" class="md-nav__link">
|
|
jspsych-external-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-free-sort/" title="jspsych-free-sort" class="md-nav__link">
|
|
jspsych-free-sort
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-fullscreen/" title="jspsych-fullscreen" class="md-nav__link">
|
|
jspsych-fullscreen
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-html-button-response/" title="jspsych-html-button-response" class="md-nav__link">
|
|
jspsych-html-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-html-keyboard-response/" title="jspsych-html-keyboard-response" class="md-nav__link">
|
|
jspsych-html-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-html-slider-response/" title="jspsych-html-slider-response" class="md-nav__link">
|
|
jspsych-html-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-iat-html/" title="jspsych-iat-html" class="md-nav__link">
|
|
jspsych-iat-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-iat-image/" title="jspsych-iat-image" class="md-nav__link">
|
|
jspsych-iat-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-image-button-response/" title="jspsych-image-button-response" class="md-nav__link">
|
|
jspsych-image-button-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-image-keyboard-response/" title="jspsych-image-keyboard-response" class="md-nav__link">
|
|
jspsych-image-keyboard-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-image-slider-response/" title="jspsych-image-slider-response" class="md-nav__link">
|
|
jspsych-image-slider-response
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-instructions/" title="jspsych-instructions" class="md-nav__link">
|
|
jspsych-instructions
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-rdk/" title="jspsych-rdk" class="md-nav__link">
|
|
jspsych-rdk
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-reconstruction/" title="jspsych-reconstruction" class="md-nav__link">
|
|
jspsych-reconstruction
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-resize/" title="jspsych-resize" class="md-nav__link">
|
|
jspsych-resize
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-same-different-html/" title="jspsych-same-different-html" class="md-nav__link">
|
|
jspsych-same-different-html
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-same-different-image/" title="jspsych-same-different-image" class="md-nav__link">
|
|
jspsych-same-different-image
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-serial-reaction-time/" title="jspsych-serial-reaction-time" class="md-nav__link">
|
|
jspsych-serial-reaction-time
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-serial-reaction-time-mouse/" title="jspsych-serial-reaction-time-mouse" class="md-nav__link">
|
|
jspsych-serial-reaction-time-mouse
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-survey-likert/" title="jspsych-survey-likert" class="md-nav__link">
|
|
jspsych-survey-likert
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-survey-multi-choice/" title="jspsych-survey-multi-choice" class="md-nav__link">
|
|
jspsych-survey-multi-choice
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-survey-multi-select/" title="jspsych-survey-multi-select" class="md-nav__link">
|
|
jspsych-survey-multi-select
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-survey-text/" title="jspsych-survey-text" class="md-nav__link">
|
|
jspsych-survey-text
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-video/" title="jspsych-video" class="md-nav__link">
|
|
jspsych-video
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-visual-search-circle/" title="jspsych-visual-search-circle" class="md-nav__link">
|
|
jspsych-visual-search-circle
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-vsl-animate-occlusion/" title="jspsych-vsl-animate-occlusion" class="md-nav__link">
|
|
jspsych-vsl-animate-occlusion
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../jspsych-vsl-grid-scene/" title="jspsych-vsl-grid-scene" class="md-nav__link">
|
|
jspsych-vsl-grid-scene
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--nested">
|
|
|
|
<input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6">
|
|
|
|
<label class="md-nav__link" for="nav-6">
|
|
About
|
|
</label>
|
|
<nav class="md-nav" data-md-component="collapsible" data-md-level="1">
|
|
<label class="md-nav__title" for="nav-6">
|
|
About
|
|
</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/about/" title="About jsPsych" class="md-nav__link">
|
|
About jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/support/" title="Getting Help" class="md-nav__link">
|
|
Getting Help
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/contributing/" title="Contributing to jsPsych" class="md-nav__link">
|
|
Contributing to jsPsych
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../../about/license/" title="License" class="md-nav__link">
|
|
License
|
|
</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
|
|
<nav class="md-nav md-nav--secondary">
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="toc">Table of contents</label>
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#whats-in-a-plugin-file" title="What's in a plugin file?" class="md-nav__link">
|
|
What's in a plugin file?
|
|
</a>
|
|
|
|
<nav class="md-nav">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#plugintrial" title="plugin.trial" class="md-nav__link">
|
|
plugin.trial
|
|
</a>
|
|
|
|
<nav class="md-nav">
|
|
<ul class="md-nav__list">
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#change-the-content-of-the-display" title="Change the content of the display" class="md-nav__link">
|
|
Change the content of the display
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#write-data" title="Write data" class="md-nav__link">
|
|
Write data
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#the-plugin-template" title="The plugin template" class="md-nav__link">
|
|
The plugin template
|
|
</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/plugins/creating-a-plugin.md" title="Edit this page" class="md-icon md-content__icon"></a>
|
|
|
|
|
|
<h1 id="creating-a-new-plugin">Creating a new plugin<a class="headerlink" href="#creating-a-new-plugin" title="Permanent link">¶</a></h1>
|
|
<p>Creating new plugins is the way to add new kinds of tasks to jsPsych. A task can be virtually any kind of activity. If it can be implemented in JavaScript, then it almost certainly can be turned into a plugin.</p>
|
|
<h2 id="whats-in-a-plugin-file">What's in a plugin file?<a class="headerlink" href="#whats-in-a-plugin-file" title="Permanent link">¶</a></h2>
|
|
<p>Plugin files follow a specific template. Adherence to the template is what allows jsPsych to run a plugin without knowing anything about what the plugin is doing. What makes plugins so flexible is that the template imposes very few requirements on the code. Here's what an empty plugin template looks like:</p>
|
|
<div class="codehilite"><pre><span></span>jsPsych.plugins['plugin-name'] = (function(){
|
|
|
|
var plugin = {};
|
|
|
|
plugin.info = {
|
|
name: 'plugin-name',
|
|
parameters: {
|
|
}
|
|
}
|
|
|
|
plugin.trial = function(display_element, trial){
|
|
jsPsych.finishTrial();
|
|
}
|
|
|
|
return plugin;
|
|
|
|
})();
|
|
</pre></div>
|
|
|
|
|
|
<p>This plugin will work! It defines a plugin called 'plugin-name', and it does absolutely nothing. However, it won't break the experiment, and jsPsych will understand that this is a valid plugin.</p>
|
|
<p>Let's examine it in more detail.</p>
|
|
<p>The overall structure of the plugin is defined using a module JavaScript design pattern. This pattern uses a technique called an anonymous closure. This is why the first line has <code>(function(){</code> and the last line is <code>})();</code>. The details aren't important, but if you want to learn more about it, <a href="http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html">this is a nice overview</a>. The reason this pattern is useful is because it allows for persistent state and private scope. In other words, the plugin is isolated and can't be altered by other plugins.</p>
|
|
<p>The module, created by the <code>(function(){</code> <code>})();</code> expressions, contains an object called <code>plugin</code> that has two properties, <code>info</code> and <code>trial</code>. The <code>plugin</code> object is returned at the end of the module, which is what assigns the defined properties of <code>plugin</code> to <code>jsPsych['plugin-name']</code>.</p>
|
|
<h3 id="plugintrial">plugin.trial<a class="headerlink" href="#plugintrial" title="Permanent link">¶</a></h3>
|
|
<p>The <code>trial</code> method is responsible for running a single trial. There are two parameters that are passed into the trial method. The first, <code>display_element</code>, is the DOM element where jsPsych content is being rendered. This parameter will be an <code>HTMLElement</code>. Generally, you don't need to worry about this parameter being in the correct format, and can assume that it is an <code>HMTLElement</code> and use methods of that class. The second, <code>trial</code>, is an object containing all of the parameters specified in the corresponding TimelineNode.</p>
|
|
<p>The only requirement for the <code>trial</code> method is that it calls <code>jsPsych.finishTrial()</code> when it is done. This is how jsPsych knows to advance to the next trial in the experiment (or end the experiment if it is the last trial). The plugin can do whatever it needs to do before that point.</p>
|
|
<p>Of course, there are other things that you will probably want the plugin to do besides just end. Here are some examples:</p>
|
|
<h4 id="change-the-content-of-the-display">Change the content of the display<a class="headerlink" href="#change-the-content-of-the-display" title="Permanent link">¶</a></h4>
|
|
<p>There are a few ways to change the content of the display. The <code>display_element</code> parameter of the trial method contains the DOM element for displaying content, so you can use various JavaScript methods for interaction with the display element. A common one is to change the <code>innerHTML</code>.</p>
|
|
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">html_content</span> <span class="o">=</span> <span class="s1">'<p>This is the first paragraph</p>'</span><span class="p">;</span>
|
|
<span class="nx">html_content</span> <span class="o">+=</span> <span class="s1">'<p>This is the second paragraph</p>'</span><span class="p">;</span>
|
|
|
|
<span class="nx">display_element</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">html_content</span><span class="p">;</span>
|
|
</pre></div>
|
|
|
|
|
|
<p>It is often appropriate to use <code>innerHTML</code> to clear the display at the end of a trial:</p>
|
|
<div class="codehilite"><pre><span></span><span class="c1">// clear the display</span>
|
|
<span class="nx">display_element</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
|
</pre></div>
|
|
|
|
|
|
<h4 id="write-data">Write data<a class="headerlink" href="#write-data" title="Permanent link">¶</a></h4>
|
|
<p>Plugins exist to collect data, so saving data is obviously a crucial thing to do. You can pass an object of data as the parameter to <code>jsPsych.finishTrial()</code>:</p>
|
|
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">correct</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="nx">rt</span><span class="o">:</span> <span class="mi">350</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">finishTrial</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span>
|
|
</pre></div>
|
|
|
|
|
|
<p>The data recorded will be that <code>correct</code> is <code>true</code> and that <code>rt</code> is <code>350</code>. Additional data for the trial will also be collected automatically by the jsPsych library.</p>
|
|
<h2 id="the-plugin-template">The plugin template<a class="headerlink" href="#the-plugin-template" title="Permanent link">¶</a></h2>
|
|
<p>An empty plugin template is included in the <code>plugins/template</code> folder.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<footer class="md-footer">
|
|
|
|
<div class="md-footer-nav">
|
|
<nav class="md-footer-nav__inner md-grid">
|
|
|
|
<a href="../overview/" title="Overview" 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>
|
|
Overview
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="../jspsych-animation/" title="jspsych-animation" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
|
|
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
|
<span class="md-flex__ellipsis">
|
|
<span class="md-footer-nav__direction">
|
|
Next
|
|
</span>
|
|
jspsych-animation
|
|
</span>
|
|
</div>
|
|
<div class="md-flex__cell md-flex__cell--shrink">
|
|
<i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
|
|
</div>
|
|
</a>
|
|
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="md-footer-meta md-typeset">
|
|
<div class="md-footer-meta__inner md-grid">
|
|
<div class="md-footer-copyright">
|
|
|
|
<div class="md-footer-copyright__highlight">
|
|
Copyright © 2012-2018 Josh de Leeuw
|
|
</div>
|
|
|
|
powered by
|
|
<a href="http://www.mkdocs.org">MkDocs</a>
|
|
and
|
|
<a href="https://squidfunk.github.io/mkdocs-material/">
|
|
Material for MkDocs</a>
|
|
</div>
|
|
|
|
|
|
<div class="md-footer-social">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<a href="https://github.com/jspsych" class="md-footer-social__link fa fa-github"></a>
|
|
|
|
<a href="https://twitter.com/joshdeleeuw" class="md-footer-social__link fa fa-twitter"></a>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="../../assets/javascripts/application.cae2244d.js"></script>
|
|
|
|
<script>app.initialize({version:"0.17.5",url:{base:"../.."}})</script>
|
|
|
|
|
|
|
|
|
|
<script>!function(e,a,t,n,o,c,i){e.GoogleAnalyticsObject=o,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(t),i=a.getElementsByTagName(t)[0],c.async=1,c.src="https://www.google-analytics.com/analytics.js",i.parentNode.insertBefore(c,i)}(window,document,"script",0,"ga"),ga("create","UA-50563838-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview");var links=document.getElementsByTagName("a");Array.prototype.map.call(links,function(e){e.host!=document.location.host&&e.addEventListener("click",function(){var a=e.getAttribute("data-md-action")||"follow";ga("send","event","outbound",a,e.href)})});var query=document.forms.search.query;query.addEventListener("blur",function(){if(this.value){var e=document.location.pathname;ga("send","pageview",e+"?q="+this.value)}})</script>
|
|
|
|
|
|
</body>
|
|
</html> |