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
41fe05ed0e
jsPsych/6.3/plugins/jspsych-vsl-animate-occlusion/index.html

1711 lines
42 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-vsl-animate-occlusion - 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-vsl-animate-occlusion-plugin" 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-vsl-animate-occlusion
</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">
<a href="../jspsych-preload/" class="md-nav__link">
jspsych-preload
</a>
</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 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-vsl-animate-occlusion
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
jspsych-vsl-animate-occlusion
</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="#dependency" class="md-nav__link">
Dependency
</a>
</li>
<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-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="#dependency" class="md-nav__link">
Dependency
</a>
</li>
<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-vsl-animate-occlusion.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-vsl-animate-occlusion-plugin">jspsych-vsl-animate-occlusion plugin<a class="headerlink" href="#jspsych-vsl-animate-occlusion-plugin" title="Permanent link">&para;</a></h1>
<p>The VSL (visual statistical learning) animate occlusion plugin displays an animated sequence of shapes that disappear behind an occluding rectangle while they change from one shape to another. This plugin can be used to replicate the experiments described in:</p>
<p>Fiser, J., &amp; Aslin, R. N. (2002). Statistical learning of higher-order temporal structure from visual shape sequences. <em>Journal of Experimental Psychology: Learning, Memory, and Cognition, 28</em>(3), 458.</p>
<h2 id="dependency">Dependency<a class="headerlink" href="#dependency" title="Permanent link">&para;</a></h2>
<p>This plugin requires the Snap.svg library, available at <a href="http://www.snapsvg.io">http://www.snapsvg.io</a>. You must include the library in the <code>&lt;head&gt;</code> section of your experiment page.</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. Parameters with a default value of <em>undefined</em> must be specified. 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>stimuli</td>
<td>array</td>
<td><em>undefined</em></td>
<td>Each element of the array is a stimulus. A stimulus is a path to an image file. The order of stimuli in the array determines the order of the animation sequence.</td>
</tr>
<tr>
<td>canvas_size</td>
<td>array</td>
<td><code>[400, 400]</code></td>
<td>Array specifying the width and height of the area that the animation will display in. Stimuli will move to the edges of this area, so increasing the width without increasing the <code>timing_cycle</code> parameter will speed up the images.</td>
</tr>
<tr>
<td>image_size</td>
<td>array</td>
<td><code>[100, 100]</code></td>
<td>Array specifying the width and height of the images to show. The occluding rectangle will have a width equal to the width of image_size.</td>
</tr>
<tr>
<td>initial_direction</td>
<td>string</td>
<td>"left"</td>
<td>Which direction the stimulus should move first (subsequent directions will alternate). Choices are "left" or "right".</td>
</tr>
<tr>
<td>occlude_center</td>
<td>boolean</td>
<td>true</td>
<td>If true, display a rectangle in the center of the screen that is just wide enough to occlude the image completely as it passes behind.</td>
</tr>
<tr>
<td>choices</td>
<td>array of strings</td>
<td><code>jsPsych.ALL_KEYS</code></td>
<td>This array contains the key(s) that the subject is allowed to press in order to respond to the stimulus. Keys should be specified as characters (e.g., <code>'a'</code>, <code>'q'</code>, <code>' '</code>, <code>'Enter'</code>, <code>'ArrowDown'</code>) - see <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">this page</a> and <a href="https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/">this page (event.key column)</a> for more examples. Any key presses that are not listed in the array will be ignored. The default value of <code>jsPsych.ALL_KEYS</code> means that all keys will be accepted as valid responses. Specifying <code>jsPsych.NO_KEYS</code> will mean that no responses are allowed.</td>
</tr>
<tr>
<td>cycle_duration</td>
<td>numeric</td>
<td>1000</td>
<td>How long it takes for a stimulus in the sequence to make a complete cycle (move to the edge and back to the center) in milliseconds.</td>
</tr>
<tr>
<td>pre_movement_duration</td>
<td>numeric</td>
<td>500</td>
<td>How long to wait before the stimuli starts moving from behind the center rectangle.</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>stimulus</td>
<td>array</td>
<td>Array where each element is a stimulus from the sequence, in the order that they were shown. This will be encoded as a JSON string when data is saved using the <code>.json()</code> or <code>.csv()</code> functions.</td>
</tr>
<tr>
<td>response</td>
<td>array</td>
<td>Array containing all response information. Each element in the array is an object representing each valid response. Each response item has three properties: <code>key</code> the key that was pressed, <code>stimulus</code> the index of the stimulus that was displayed when the response was made, and <code>rt</code> the response time measured since the start of the sequence. This will be encoded as a JSON string when data is saved using the <code>.json()</code> or <code>.csv()</code> functions.</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>Displaying a short sequence with default options</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">
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;vsl-animate-occlusion&#39;</span><span class="p">,</span>
<span class="nx">stimuli</span><span class="o">:</span> <span class="p">[</span>
<span class="s2">&quot;img/1.gif&quot;</span><span class="p">,</span>
<span class="s2">&quot;img/2.gif&quot;</span><span class="p">,</span>
<span class="s2">&quot;img/3.gif&quot;</span><span class="p">,</span>
<span class="s2">&quot;img/4.gif&quot;</span>
<span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
</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-vsl-animate-occlusion-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div></p>
</div>
</div>
<p><a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-vsl-animate-occlusion-demo1.html">Open demo in new tab</a></p>
</details>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer">
<a href="../jspsych-visual-search-circle/" class="md-footer__link md-footer__link--prev" aria-label="Previous: jspsych-visual-search-circle" 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-visual-search-circle
</div>
</div>
</a>
<a href="../jspsych-vsl-grid-scene/" class="md-footer__link md-footer__link--next" aria-label="Next: jspsych-vsl-grid-scene" rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Next
</span>
jspsych-vsl-grid-scene
</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