From b43266593dc2633308c88c78d43f059f62bba6e9 Mon Sep 17 00:00:00 2001
From: Josh de Leeuw <josh.deleeuw@gmail.com>
Date: Sat, 1 Mar 2014 16:58:26 -0500
Subject: [PATCH] adding example of vsl-animate-occlusion

---
 examples/jspsych-vsl-animate-occlusion.html | 59 +++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 examples/jspsych-vsl-animate-occlusion.html
diff --git a/examples/jspsych-vsl-animate-occlusion.html b/examples/jspsych-vsl-animate-occlusion.html
new file mode 100644
index 00000000..84204a69
--- /dev/null
+++ b/examples/jspsych-vsl-animate-occlusion.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+
+    <head>
+        <title>jspsych-vsl-animate-occlusion plugin example</title>
+        <!-- jQuery -->
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+        <!-- jsPsych -->
+        <script src="scripts/jspsych.js"></script>
+        <script src="scripts/plugins/jspsych-vsl-grid-scene.js"></script>
+        <!-- style -->
+        <style>
+            #jspsych_target {
+                margin: 50px auto 50px auto;
+                width: 600px;
+                font-size:18px;
+                text-align: center;
+            }
+            pre {
+                text-align: left;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="jspsych_target"></div>
+    </body>
+    <script type="text/javascript">
+        var images = ["img/1.gif","img/2.gif","img/3.gif","img/4.gif","img/5.gif",
+                      "img/6.gif","img/7.gif","img/8.gif","img/9.gif","img/10.gif"];
+
+
+        // create vsl block for jspsych
+        var vsl_block = {
+            type: 'vsl-animate-occlusion',
+            stimuli: images
+        };
+
+        // preload images
+        // call start() when loading is complete
+        jsPsych.preloadImages(images, start);
+
+        // function to launch jspsych experiment
+        // putting this in a function so that it only gets called once all the
+        // images are loaded using preloadImages
+        function start() {
+            jsPsych.init({
+                display_element: $('#jspsych_target'),
+                experiment_structure: [vsl_block],
+                on_finish: function(data) {
+                    $('#jspsych_target').append($("<pre>", {
+                        html: JSON.stringify(data, undefined, 2)
+                    }));
+                }
+            });
+        }
+    </script>
+
+</html>
\ No newline at end of file
