HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-12 16:48:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
824060f80c
jsPsych/6.3/plugins/jspsych-preload/index.html

1866 lines
57 KiB
HTML
Executable File
Raw Blame History

<!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="icon" href="../../img/jspsych-favicon.png">
<meta name="generator" content="mkdocs-1.2.2, mkdocs-material-7.2.4">
<title>jspsych-preload - jsPsych</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.f7f47774.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.3f5d1f46.min.css">
<meta name="theme-color" content="#4cae4f">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
<style>:root{--md-text-font-family:"Roboto";--md-code-font-family:"Roboto Mono"}</style>
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-50563838-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){var e;this.value&&(e=document.location.pathname,ga("send","pageview",e+"?q="+this.value))}),"undefined"!=typeof location$&&location$.subscribe(function(e){ga("send","pageview",e.pathname)})})</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
</head>
<body dir="ltr" data-md-color-scheme="" data-md-color-primary="green" data-md-color-accent="orange">
<script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#jspsych-preload" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="jsPsych" class="md-header__button md-logo" aria-label="jsPsych" data-md-component="logo">
<img src="../../img/jspsych-logo-no-text-mono.svg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
jsPsych
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
jspsych-preload
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
jspsych/jspsych
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="jsPsych" class="md-nav__button md-logo" aria-label="jsPsych" data-md-component="logo">
<img src="../../img/jspsych-logo-no-text-mono.svg" alt="logo">
</a>
jsPsych
</label>
<div class="md-nav__source">
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
jspsych/jspsych
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
Introduction
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2">
Tutorials
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Tutorials" data-md-level="1">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Tutorials
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../tutorials/hello-world/" class="md-nav__link">
The Basics: Hello World
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorials/rt-task/" class="md-nav__link">
Demo Experiment: Simple Reaction Time Task
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorials/video-tutorials/" class="md-nav__link">
Video Tutorials
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3">
Overview
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Overview" data-md-level="1">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Overview
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../overview/timeline/" class="md-nav__link">
Creating an Experiment: The Timeline
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/plugins/" class="md-nav__link">
Plugins
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/dynamic-parameters/" class="md-nav__link">
Dynamic Parameters
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/style/" class="md-nav__link">
Controlling Visual Appearance
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/data/" class="md-nav__link">
Data Storage, Aggregation, and Manipulation
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/running-experiments/" class="md-nav__link">
Running Experiments
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/experiment-options/" class="md-nav__link">
Experiment Settings
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/callbacks/" class="md-nav__link">
Event-related Callback Functions
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/record-browser-interactions/" class="md-nav__link">
Record Browser Interactions
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/media-preloading/" class="md-nav__link">
Media Preloading
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/fullscreen/" class="md-nav__link">
Fullscreen Experiments
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/eye-tracking/" class="md-nav__link">
Eye Tracking
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/exclude-browser/" class="md-nav__link">
Exclude Participants Based on Browser Features
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/progress-bar/" class="md-nav__link">
Automatic Progress Bar
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/prolific/" class="md-nav__link">
Integrating with Prolific
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/mturk/" class="md-nav__link">
Integrating with Mechanical Turk
</a>
</li>
<li class="md-nav__item">
<a href="../../overview/browser-device-support/" class="md-nav__link">
Browser and Device Support
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4">
Reference
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Reference" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../core_library/jspsych-core/" class="md-nav__link">
jsPsych
</a>
</li>
<li class="md-nav__item">
<a href="../../core_library/jspsych-data/" class="md-nav__link">
jsPsych.data
</a>
</li>
<li class="md-nav__item">
<a href="../../core_library/jspsych-randomization/" class="md-nav__link">
jsPsych.randomization
</a>
</li>
<li class="md-nav__item">
<a href="../../core_library/jspsych-turk/" class="md-nav__link">
jsPsych.turk
</a>
</li>
<li class="md-nav__item">
<a href="../../core_library/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-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" checked>
<label class="md-nav__link" for="__nav_5">
Plugins
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Plugins" data-md-level="1">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Plugins
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../list-of-plugins/" class="md-nav__link">
List of Plugins
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-animation/" class="md-nav__link">
jspsych-animation
</a>
</li>
<li class="md-nav__item">
<a href="../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/" class="md-nav__link">
jspsych-audio-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-audio-slider-response/" class="md-nav__link">
jspsych-audio-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-call-function/" class="md-nav__link">
jspsych-call-function
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-canvas-button-response/" class="md-nav__link">
jspsych-canvas-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-canvas-keyboard-response/" class="md-nav__link">
jspsych-canvas-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-canvas-slider-response/" class="md-nav__link">
jspsych-canvas-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-categorize-animation/" class="md-nav__link">
jspsych-categorize-animation
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-categorize-html/" class="md-nav__link">
jspsych-categorize-html
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-categorize-image/" class="md-nav__link">
jspsych-categorize-image
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-cloze/" class="md-nav__link">
jspsych-cloze
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-external-html/" class="md-nav__link">
jspsych-external-html
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-free-sort/" class="md-nav__link">
jspsych-free-sort
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-fullscreen/" class="md-nav__link">
jspsych-fullscreen
</a>
</li>
<li class="md-nav__item">
<a href="../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/" class="md-nav__link">
jspsych-html-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-html-slider-response/" class="md-nav__link">
jspsych-html-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-iat-html/" class="md-nav__link">
jspsych-iat-html
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-iat-image/" class="md-nav__link">
jspsych-iat-image
</a>
</li>
<li class="md-nav__item">
<a href="../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/" class="md-nav__link">
jspsych-image-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-image-slider-response/" class="md-nav__link">
jspsych-image-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-instructions/" class="md-nav__link">
jspsych-instructions
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-maxdiff/" class="md-nav__link">
jspsych-maxdiff
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
jspsych-preload
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
jspsych-preload
</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="#parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#data-generated" class="md-nav__link">
Data Generated
</a>
</li>
<li class="md-nav__item">
<a href="#examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../jspsych-rdk/" class="md-nav__link">
jspsych-rdk
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-reconstruction/" class="md-nav__link">
jspsych-reconstruction
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-resize/" class="md-nav__link">
jspsych-resize
</a>
</li>
<li class="md-nav__item">
<a href="../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/" class="md-nav__link">
jspsych-same-different-image
</a>
</li>
<li class="md-nav__item">
<a href="../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/" class="md-nav__link">
jspsych-serial-reaction-time-mouse
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-survey-html-form/" class="md-nav__link">
jspsych-survey-html-form
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-survey-likert/" class="md-nav__link">
jspsych-survey-likert
</a>
</li>
<li class="md-nav__item">
<a href="../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/" class="md-nav__link">
jspsych-survey-multi-select
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-survey-text/" class="md-nav__link">
jspsych-survey-text
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-video-button-response/" class="md-nav__link">
jspsych-video-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-video-keyboard-response/" class="md-nav__link">
jspsych-video-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-video-slider-response/" class="md-nav__link">
jspsych-video-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-virtual-chinrest/" class="md-nav__link">
jspsych-virtual-chinrest
</a>
</li>
<li class="md-nav__item">
<a href="../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/" class="md-nav__link">
jspsych-vsl-animate-occlusion
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-vsl-grid-scene/" class="md-nav__link">
jspsych-vsl-grid-scene
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-webgazer-calibrate/" class="md-nav__link">
jspsych-webgazer-calibrate
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-webgazer-init-camera/" class="md-nav__link">
jspsych-webgazer-init-camera
</a>
</li>
<li class="md-nav__item">
<a href="../jspsych-webgazer-validate/" class="md-nav__link">
jspsych-webgazer-validate
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6">
Extensions
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Extensions" data-md-level="1">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Extensions
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../extensions/extensions/" class="md-nav__link">
Extensions
</a>
</li>
<li class="md-nav__item">
<a href="../../extensions/jspsych-ext-webgazer/" class="md-nav__link">
jspsych-ext-webgazer.js
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7">
About
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="About" data-md-level="1">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
About
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../about/about/" class="md-nav__link">
About jsPsych
</a>
</li>
<li class="md-nav__item">
<a href="../../about/support/" class="md-nav__link">
Getting Help
</a>
</li>
<li class="md-nav__item">
<a href="../../about/contributing/" class="md-nav__link">
Contributing to jsPsych
</a>
</li>
<li class="md-nav__item">
<a href="../../about/license/" class="md-nav__link">
License
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#parameters" class="md-nav__link">
Parameters
</a>
</li>
<li class="md-nav__item">
<a href="#data-generated" class="md-nav__link">
Data Generated
</a>
</li>
<li class="md-nav__item">
<a href="#examples" class="md-nav__link">
Examples
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/jspsych/jsPsych/edit/master/docs/plugins/jspsych-preload.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
</a>
<h1 id="jspsych-preload">jspsych-preload<a class="headerlink" href="#jspsych-preload" title="Permanent link">&para;</a></h1>
<p>This plugin loads images, audio, and video files. It is used for loading files into the browser's memory before they are needed in the experiment, in order to improve stimulus and response timing, and avoid disruption to the experiment flow. We recommend using this plugin anytime you are loading media files, and especially when your experiment requires large and/or many media files. See the <a href="../overview/media-preloading/">Media Preloading page</a> for more information.</p>
<p>The preload trial will end as soon as all files have loaded successfully. The trial will end or stop with an error message when one of these two scenarios occurs (whichever comes first): (a) all files have not finished loading when the <code>max_load_time</code> duration is reached, or (b) all file requests have responded with either a load or fail event, and one or more files has failed to load. The <code>continue_after_error</code> parameter determines whether the trial will stop with an error message or end (allowing the experiment to continue) when preloading is not successful.</p>
<h2 id="parameters">Parameters<a class="headerlink" href="#parameters" title="Permanent link">&para;</a></h2>
<p>In addition to the <a href="../overview/plugins#parameters-available-in-all-plugins">parameters available in all plugins</a>, this plugin accepts the following parameters. While there are no specific parameters that are required, the plugin expects to be given a set of files to load through one or more of the following parameters: <code>auto_preload</code> or <code>trials</code> (for automatic loading), and/or <code>images</code>, <code>audio</code>, <code>video</code> (for manual loading). To automatically load files based on a timeline of trials, either set the <code>auto_preload</code> parameter is <code>true</code> (to load files based on the main timeline passed to <code>jsPsych.init</code>) or use the <code>trials</code> parameter to load files based on a specific subset of trials. To manually load a set of files, use the <code>images</code>, <code>audio</code>, and <code>video</code> parameters. You can combine automatic and manual loading methods in a single preload trial.</p>
<p>All other parameters can be left unspecified if the default value is acceptable.</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Default Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>auto_preload</td>
<td>boolean</td>
<td>false</td>
<td>If <code>true</code>, the plugin will preload any files that can be automatically preloaded based on the main experiment timeline that is passed to <code>jsPsych.init</code>. If <code>false</code>, any file(s) to be preloaded should be specified by passing a timeline array to the <code>trials</code> parameter and/or an array of file paths to the <code>images</code>, <code>audio</code>, and/or <code>video</code> parameters. Setting this parameter to <code>false</code> is useful when you plan to preload your files in smaller batches throughout the experiment.</td>
</tr>
<tr>
<td>trials</td>
<td>timeline array</td>
<td>[]</td>
<td>An array containing one or more jsPsych trial or timeline objects. This parameter is useful when you want to automatically preload stimuli files from a specific subset of the experiment. See <a href="../overview/timeline">Creating an Experiment: The Timeline</a> for information on constructing timelines.</td>
</tr>
<tr>
<td>images</td>
<td>array</td>
<td>[]</td>
<td>Array containing file paths for one or more image files to preload. This option is typically used for image files that can't be automatically preloaded from the timeline.</td>
</tr>
<tr>
<td>audio</td>
<td>array</td>
<td>[]</td>
<td>Array containing file paths for one or more audio files to preload. This option is typically used for audio files that can't be automatically preloaded from the timeline.</td>
</tr>
<tr>
<td>video</td>
<td>array</td>
<td>[]</td>
<td>Array containing file paths for one or more video files to preload. This option is typically used for video files that can't be automatically preloaded from the timeline.</td>
</tr>
<tr>
<td>message</td>
<td>HTML string</td>
<td>null</td>
<td>HTML-formatted message to show above the progress bar while the files are loading. If <code>null</code>, then no message is shown.</td>
</tr>
<tr>
<td>show_progress_bar</td>
<td>boolean</td>
<td>true</td>
<td>If <code>true</code>, a progress bar will be shown while the files are loading. If <code>false</code>, no progress bar is shown.</td>
</tr>
<tr>
<td>continue_after_error</td>
<td>boolean</td>
<td>false</td>
<td>If <code>false</code>, then the experiment will stop during this trial if either (a) one or more of the files fails to load, and/or (b) all files do not finish loading before the <code>max_load_time</code> duration is reached. The trial will display the <code>error_message</code>, as well as the detailed error messages if <code>show_detailed_errors</code> is <code>true</code>. If <code>true</code>, the experiment will continue even if loading fails or times out, and information about loading success/failure will be stored in the trial data (see "Data Generated" below).</td>
</tr>
<tr>
<td>error_message</td>
<td>HTML string</td>
<td>'The experiment failed to load.'</td>
<td>HTML-formatted message to be shown on the page after loading fails or times out. Only applies when <code>continue_after_error</code> is <code>false</code>.</td>
</tr>
<tr>
<td>show_detailed_errors</td>
<td>boolean</td>
<td>false</td>
<td>If <code>true</code>, and if <code>continue_after_error</code> is <code>false</code>, then a list of detailed errors will be shown below the <code>error_message</code>. This list will contain the file paths for any files that produced a loading failure, as well as a message indicating that loading timed out, if that was the case. This setting is intended to help the researcher with testing/debugging. If <code>false</code>, and if <code>continue_after_error</code> is <code>false</code>, then only the <code>error_message</code> will be shown if loading fails or times out.</td>
</tr>
<tr>
<td>max_load_time</td>
<td>numeric</td>
<td>null</td>
<td>Duration to wait, in milliseconds, for all files to load before loading times out. If one or more files has not finished loading within this time limit, then the trial will stop with an error (if <code>continue_after_error</code> is <code>false</code>), or the trial will end with information about the loading time-out in the trial data (see "Data Generated" below). If <code>null</code>, the trial will wait indefinitely for all files to either load or produce an error.</td>
</tr>
<tr>
<td>on_error</td>
<td>function</td>
<td>null</td>
<td>Function to be called immediately after a file loading request has returned an error. The function receives a single argument, which is the file path that produced the error. This callback is cancelled as soon as the trial ends. See example below.</td>
</tr>
<tr>
<td>on_success</td>
<td>function</td>
<td>null</td>
<td>Function to be called immediately after a file has successfully loaded. The function receives a single argument, which is the file path that finished loading. This callback is cancelled as soon as the trial ends. See example below.</td>
</tr>
</tbody>
</table>
<h2 id="data-generated">Data Generated<a class="headerlink" href="#data-generated" title="Permanent link">&para;</a></h2>
<p>In addition to the <a href="../overview/plugins/#data-collected-by-all-plugins">default data collected by all plugins</a>, this plugin collects the following data for each trial.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>success</td>
<td>boolean</td>
<td>If <code>true</code>, then all files loaded successfully within the <code>max_load_time</code>. If <code>false</code>, then one or more file requests returned a failure and/or the file loading did not complete within the <code>max_load_time</code> duration.</td>
</tr>
<tr>
<td>timeout</td>
<td>boolean</td>
<td>If <code>true</code>, then the files did not finish loading within the <code>max_load_time</code> duration. If <code>false</code>, then the file loading did not timeout. Note that when the preload trial does not timeout (<code>timeout: false</code>), it is still possible for loading to fail (<code>success: false</code>). This happens if one or more files fails to load and all file requests trigger either a success or failure event before the <code>max_load_time</code> duration.</td>
</tr>
<tr>
<td>failed_images</td>
<td>array</td>
<td>One or more image file paths that produced a loading failure before the trial ended.</td>
</tr>
<tr>
<td>failed_audio</td>
<td>array</td>
<td>One or more audio file paths that produced a loading failure before the trial ended.</td>
</tr>
<tr>
<td>failed_video</td>
<td>array</td>
<td>One or more video file paths that produced a loading failure before the trial ended.</td>
</tr>
</tbody>
</table>
<h2 id="examples">Examples<a class="headerlink" href="#examples" title="Permanent link">&para;</a></h2>
<details class="example" open="open"><summary>Automatically preloading based on other trials</summary><div class="tabbed-set" data-tabs="1:2"><input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" /><label for="__tabbed_1_1">Code</label><div class="tabbed-content">
<p><div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">preload</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;preload&#39;</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">trial_1</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/happy_face_1.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">trial_2</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/happy_face_2.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">trial_3</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/happy_face_3.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
The <code>stimulus</code> parameter from the <code>image-button-response</code> trials will be automatically preloaded.</p>
</div>
<input id="__tabbed_1_2" name="__tabbed_1" type="radio" /><label for="__tabbed_1_2">Demo</label><div class="tabbed-content">
<p><div style="text-align:center;">
<iframe src="/demos/jspsych-preload-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div></p>
</div>
</div>
<p><a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-preload-demo1.html">Open demo in new tab</a></p>
</details>
<details class="example" open="open"><summary>Manually preloading an image</summary><div class="tabbed-set" data-tabs="2:2"><input checked="checked" id="__tabbed_2_1" name="__tabbed_2" type="radio" /><label for="__tabbed_2_1">Code</label><div class="tabbed-content">
<p><div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">preload</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;preload&#39;</span><span class="p">,</span>
<span class="nx">images</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;img/sad_face_1.jpg&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">trial_1</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;html-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="sb">`</span>
<span class="sb"> &lt;p&gt;Study this face&lt;/p&gt;</span>
<span class="sb"> &lt;img src=&quot;img/sad_face_1.jpg&quot;&gt;&lt;/img&gt;</span>
<span class="sb"> `</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
Because the image is embedded inside HTML from the <code>html-button-response</code> plugin, it will not be automatically preloaded. Instead we can preload manually.</p>
</div>
<input id="__tabbed_2_2" name="__tabbed_2" type="radio" /><label for="__tabbed_2_2">Demo</label><div class="tabbed-content">
<p><div style="text-align:center;">
<iframe src="/demos/jspsych-preload-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div></p>
</div>
</div>
<p><a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-preload-demo2.html">Open demo in new tab</a></p>
</details>
<details class="example" open="open"><summary>Loading files in batches</summary><div class="tabbed-set" data-tabs="3:2"><input checked="checked" id="__tabbed_3_1" name="__tabbed_3" type="radio" /><label for="__tabbed_3_1">Code</label><div class="tabbed-content">
<p><div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">trial_1</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/happy_face_1.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">trial_2</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/happy_face_2.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">trial_3</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/happy_face_3.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">block_1</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">trial_1</span><span class="p">,</span> <span class="nx">trial_2</span><span class="p">,</span> <span class="nx">trial_3</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">trial_4</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/sad_face_1.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">trial_5</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/sad_face_2.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">trial_6</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;image-button-response&#39;</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/sad_face_3.jpg&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Next&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">block_2</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">trial_4</span><span class="p">,</span> <span class="nx">trial_5</span><span class="p">,</span> <span class="nx">trial_6</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">preload_block_1</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;preload&#39;</span><span class="p">,</span>
<span class="nx">trials</span><span class="o">:</span> <span class="p">[</span><span class="nx">block_1</span><span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">preload_block_2</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;preload&#39;</span><span class="p">,</span>
<span class="nx">trials</span><span class="o">:</span> <span class="p">[</span><span class="nx">block_2</span><span class="p">]</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">preload_block_1</span><span class="p">,</span> <span class="nx">block_1</span><span class="p">,</span> <span class="nx">preload_block_2</span><span class="p">,</span> <span class="nx">block_2</span><span class="p">]</span>
<span class="p">})</span>
</code></pre></div>
You can put trials using the <code>preload</code> plugin throughout your experiment to distribute when files are loaded. In the example above, there are two blocks of trials and the images for each are preloaded just before the corresponding block.</p>
</div>
<input id="__tabbed_3_2" name="__tabbed_3" type="radio" /><label for="__tabbed_3_2">Demo</label><div class="tabbed-content">
<p><div style="text-align:center;">
<iframe src="/demos/jspsych-preload-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div></p>
</div>
</div>
<p><a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-preload-demo3.html">Open demo in new tab</a></p>
</details>
<details class="example" open="open"><summary>Showing a detailed error message for debugging loading issues</summary><div class="tabbed-set" data-tabs="4:2"><input checked="checked" id="__tabbed_4_1" name="__tabbed_4" type="radio" /><label for="__tabbed_4_1">Code</label><div class="tabbed-content">
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">preload</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;preload&#39;</span><span class="p">,</span>
<span class="nx">images</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;img/bad_file_path.png&#39;</span><span class="p">],</span>
<span class="nx">show_detailed_errors</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
</code></pre></div>
</div>
<input id="__tabbed_4_2" name="__tabbed_4" type="radio" /><label for="__tabbed_4_2">Demo</label><div class="tabbed-content">
<p><div style="text-align:center;">
<iframe src="/demos/jspsych-preload-demo4.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div></p>
</div>
</div>
<p><a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-preload-demo4.html">Open demo in new tab</a></p>
</details>
<p>For more examples, see the <code>jspsych-preload.html</code> file in the <code>/examples</code> folder of the release and the <a href="../overview/media-preloading">Media Preloading</a> documentation page.</p>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer">
<a href="../jspsych-maxdiff/" class="md-footer__link md-footer__link--prev" aria-label="Previous: jspsych-maxdiff" rel="prev">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Previous
</span>
jspsych-maxdiff
</div>
</div>
</a>
<a href="../jspsych-rdk/" class="md-footer__link md-footer__link--next" aria-label="Next: jspsych-rdk" rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Next
</span>
jspsych-rdk
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
<div class="md-footer-copyright__highlight">
Copyright &copy; 2012-2021 Josh de Leeuw
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-footer-social">
<a href="https://github.com/jspsych" target="_blank" rel="noopener" title="github.com" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
<a href="https://twitter.com/joshdeleeuw" target="_blank" rel="noopener" title="twitter.com" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "search": "../../assets/javascripts/workers/search.709b4209.min.js", "version": {"provider": "mike"}}</script>
<script src="../../assets/javascripts/bundle.febc23d1.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink