diff --git a/docs/demos/docs-demo-timeline.js b/docs/demos/docs-demo-timeline.js new file mode 100644 index 00000000..d621ca13 --- /dev/null +++ b/docs/demos/docs-demo-timeline.js @@ -0,0 +1,52 @@ +function generateDocsDemoTimeline(timeline, setup_timeline) { + let setup; + if (setup_timeline) { + setup = { + timeline: setup_timeline, + }; + } + + const start = { + type: jsPsychHtmlButtonResponse, + stimulus: "", + choices: ["Run demo"], + }; + + let run = 0; + + let trial = { + timeline: timeline, + data: { + run: () => { + return run; + }, + }, + }; + + const show_data = { + type: jsPsychHtmlButtonResponse, + stimulus: ` +

Trial data:

+ 
`,
+    on_load: function () {
+      const trial_data = jsPsych.data.get().filter({ run: run }).ignore("run").values();
+      const trial_json = JSON.stringify(trial_data, null, 2);
+      jsPsych.getDisplayElement().querySelector("pre").innerText = trial_json;
+    },
+    choices: ["Repeat demo"],
+  };
+
+  const trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function () {
+      run++;
+      return true;
+    },
+  };
+
+  if (setup_timeline) {
+    return [setup, start, trial_loop];
+  } else {
+    return [start, trial_loop];
+  }
+}
diff --git a/docs/demos/docs-demo.css b/docs/demos/docs-demo.css
new file mode 100644
index 00000000..742a9fe9
--- /dev/null
+++ b/docs/demos/docs-demo.css
@@ -0,0 +1 @@
+.jspsych-btn {margin-bottom: 10px;}
\ No newline at end of file
diff --git a/docs/demos/eye-tracking-with-webgazer.html b/docs/demos/eye-tracking-with-webgazer.html
index 5acbce96..ac61db76 100644
--- a/docs/demos/eye-tracking-with-webgazer.html
+++ b/docs/demos/eye-tracking-with-webgazer.html
@@ -15,11 +15,7 @@
       rel="stylesheet"
       href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
     />
-    
+    
   
   
   
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [animation_trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-audio-button-response-demo-1.html b/docs/demos/jspsych-audio-button-response-demo-1.html
index 65bfa036..12dd2e72 100644
--- a/docs/demos/jspsych-audio-button-response-demo-1.html
+++ b/docs/demos/jspsych-audio-button-response-demo-1.html
@@ -1,62 +1,38 @@
 
 
   
+    
     
     
     
     
-    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-audio-button-response-demo-2.html b/docs/demos/jspsych-audio-button-response-demo-2.html
index 1fea513f..26ced3b6 100644
--- a/docs/demos/jspsych-audio-button-response-demo-2.html
+++ b/docs/demos/jspsych-audio-button-response-demo-2.html
@@ -1,68 +1,44 @@
 
 
   
+    
     
     
     
     
-    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-audio-keyboard-response-demo-1.html b/docs/demos/jspsych-audio-keyboard-response-demo-1.html
index abb8c09c..1b15a34c 100644
--- a/docs/demos/jspsych-audio-keyboard-response-demo-1.html
+++ b/docs/demos/jspsych-audio-keyboard-response-demo-1.html
@@ -1,61 +1,37 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
+    const trial = {
+      type: jsPsychAudioKeyboardResponse,
+      stimulus: 'sound/tone.mp3',
+      choices: ['e', 'i'],
+      prompt: "
Is the pitch high or low? Press 'e' for low and 'i' for high.
",
+      response_ends_trial: true
+    };
 
+    const timeline = [trial];
+
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-audio-keyboard-response-demo-2.html b/docs/demos/jspsych-audio-keyboard-response-demo-2.html
index 20aa6645..42244a58 100644
--- a/docs/demos/jspsych-audio-keyboard-response-demo-2.html
+++ b/docs/demos/jspsych-audio-keyboard-response-demo-2.html
@@ -1,60 +1,37 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
 
+    const trial = {
+      type: jsPsychAudioKeyboardResponse,
+      stimulus: 'sound/tone.mp3',
+      choices: "NO_KEYS",
+      trial_ends_after_audio: true
+    };
+
+    const timeline = [trial];
+
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-audio-slider-response-demo-1.html b/docs/demos/jspsych-audio-slider-response-demo-1.html
index c5e72202..25ec0e80 100644
--- a/docs/demos/jspsych-audio-slider-response-demo-1.html
+++ b/docs/demos/jspsych-audio-slider-response-demo-1.html
@@ -1,60 +1,36 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-audio-slider-response-demo-2.html b/docs/demos/jspsych-audio-slider-response-demo-2.html
index 302563c7..ab81f27e 100644
--- a/docs/demos/jspsych-audio-slider-response-demo-2.html
+++ b/docs/demos/jspsych-audio-slider-response-demo-2.html
@@ -1,62 +1,38 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-browser-check-demo1.html b/docs/demos/jspsych-browser-check-demo1.html
index 1cce6deb..9129c9d1 100644
--- a/docs/demos/jspsych-browser-check-demo1.html
+++ b/docs/demos/jspsych-browser-check-demo1.html
@@ -1,49 +1,27 @@
 
 
-
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-browser-check-demo2.html b/docs/demos/jspsych-browser-check-demo2.html
index b41f004c..03e2b28c 100644
--- a/docs/demos/jspsych-browser-check-demo2.html
+++ b/docs/demos/jspsych-browser-check-demo2.html
@@ -1,53 +1,31 @@
 
 
-
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-browser-check-demo3.html b/docs/demos/jspsych-browser-check-demo3.html
index 675a4900..5dd4ff8d 100644
--- a/docs/demos/jspsych-browser-check-demo3.html
+++ b/docs/demos/jspsych-browser-check-demo3.html
@@ -1,51 +1,35 @@
 
 
-
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-browser-check-demo4.html b/docs/demos/jspsych-browser-check-demo4.html
index 2cc5c276..9e35abe3 100644
--- a/docs/demos/jspsych-browser-check-demo4.html
+++ b/docs/demos/jspsych-browser-check-demo4.html
@@ -1,59 +1,37 @@
 
 
-
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-call-function-demo1.html b/docs/demos/jspsych-call-function-demo1.html
index 279724f9..44084605 100644
--- a/docs/demos/jspsych-call-function-demo1.html
+++ b/docs/demos/jspsych-call-function-demo1.html
@@ -1,59 +1,33 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-call-function-demo2.html b/docs/demos/jspsych-call-function-demo2.html
index 89b586e2..25f7aa41 100644
--- a/docs/demos/jspsych-call-function-demo2.html
+++ b/docs/demos/jspsych-call-function-demo2.html
@@ -1,63 +1,38 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-call-function-demo3.html b/docs/demos/jspsych-call-function-demo3.html
index 6111bade..82d13db8 100644
--- a/docs/demos/jspsych-call-function-demo3.html
+++ b/docs/demos/jspsych-call-function-demo3.html
@@ -1,64 +1,39 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-canvas-button-response-demo1.html b/docs/demos/jspsych-canvas-button-response-demo1.html
index 7872b788..1e6fe976 100644
--- a/docs/demos/jspsych-canvas-button-response-demo1.html
+++ b/docs/demos/jspsych-canvas-button-response-demo1.html
@@ -1,85 +1,58 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
+    const circle_2 = {
+      type: jsPsychCanvasButtonResponse,
+      stimulus: function(c) {
+        filledCirc(c, 150, 'green');
+      },
+      canvas_size: [300, 300],
+      choices: ['Larger', 'Smaller'],
+      stimulus_duration: 1000,
+      prompt: '
Is this circle larger or smaller than the last one?
'+
+        '
Stimulus will be hidden after 1 second.
',
+      data: {color: 'green', radius: 150}
+    };
 
+    const timeline = [circle_1, circle_2];
+
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-canvas-button-response-demo2.html b/docs/demos/jspsych-canvas-button-response-demo2.html
index cc7e0bea..c9ca8f36 100644
--- a/docs/demos/jspsych-canvas-button-response-demo2.html
+++ b/docs/demos/jspsych-canvas-button-response-demo2.html
@@ -1,76 +1,51 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-canvas-button-response-demo3.html b/docs/demos/jspsych-canvas-button-response-demo3.html
index a698721e..3760355d 100644
--- a/docs/demos/jspsych-canvas-button-response-demo3.html
+++ b/docs/demos/jspsych-canvas-button-response-demo3.html
@@ -1,87 +1,61 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [circle_procedure];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-canvas-keyboard-response-demo1.html b/docs/demos/jspsych-canvas-keyboard-response-demo1.html
index e485648b..f9451137 100644
--- a/docs/demos/jspsych-canvas-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-canvas-keyboard-response-demo1.html
@@ -1,67 +1,40 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-canvas-keyboard-response-demo2.html b/docs/demos/jspsych-canvas-keyboard-response-demo2.html
index 49cfd119..8d111dc4 100644
--- a/docs/demos/jspsych-canvas-keyboard-response-demo2.html
+++ b/docs/demos/jspsych-canvas-keyboard-response-demo2.html
@@ -1,67 +1,41 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-canvas-slider-response-demo1.html b/docs/demos/jspsych-canvas-slider-response-demo1.html
index fc6035de..b1372bea 100644
--- a/docs/demos/jspsych-canvas-slider-response-demo1.html
+++ b/docs/demos/jspsych-canvas-slider-response-demo1.html
@@ -1,70 +1,45 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-canvas-slider-response-demo2.html b/docs/demos/jspsych-canvas-slider-response-demo2.html
index 077c67e5..baf4a7d2 100644
--- a/docs/demos/jspsych-canvas-slider-response-demo2.html
+++ b/docs/demos/jspsych-canvas-slider-response-demo2.html
@@ -1,76 +1,51 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-categorize-animation-demo1.html b/docs/demos/jspsych-categorize-animation-demo1.html
index 2d71023b..a6f7506f 100644
--- a/docs/demos/jspsych-categorize-animation-demo1.html
+++ b/docs/demos/jspsych-categorize-animation-demo1.html
@@ -1,70 +1,51 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-categorize-animation-demo2.html b/docs/demos/jspsych-categorize-animation-demo2.html
index d87ed5e3..7b13bf41 100644
--- a/docs/demos/jspsych-categorize-animation-demo2.html
+++ b/docs/demos/jspsych-categorize-animation-demo2.html
@@ -1,74 +1,56 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const trial = {
+      type: jsPsychCategorizeAnimation,
+      stimuli: images,
+      choices: ['p', 'q'],
+      prompt: `Press the P or Q key.`,
+      key_answer: 'q',
+      text_answer: 'Dax', // the label for the sequence is 'Dax'
+      correct_text: 'Correct! This was a %ANS%.',
+      incorrect_text: 'Incorrect. This was a %ANS%.'
+    };
 
+    const timeline = [trial];
+
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-categorize-html-demo1.html b/docs/demos/jspsych-categorize-html-demo1.html
index 241e7b28..d8fe729e 100644
--- a/docs/demos/jspsych-categorize-html-demo1.html
+++ b/docs/demos/jspsych-categorize-html-demo1.html
@@ -1,60 +1,35 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-categorize-image-demo1.html b/docs/demos/jspsych-categorize-image-demo1.html
index d554edf4..462f49c4 100644
--- a/docs/demos/jspsych-categorize-image-demo1.html
+++ b/docs/demos/jspsych-categorize-image-demo1.html
@@ -1,67 +1,41 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-cloze-demo1.html b/docs/demos/jspsych-cloze-demo1.html
index 6ea44b33..04576ce0 100644
--- a/docs/demos/jspsych-cloze-demo1.html
+++ b/docs/demos/jspsych-cloze-demo1.html
@@ -1,54 +1,29 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-cloze-demo2.html b/docs/demos/jspsych-cloze-demo2.html
index b18d674a..e8f88ad1 100644
--- a/docs/demos/jspsych-cloze-demo2.html
+++ b/docs/demos/jspsych-cloze-demo2.html
@@ -1,57 +1,32 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-extension-mouse-tracking-demo1.html b/docs/demos/jspsych-extension-mouse-tracking-demo1.html
index f424980c..f85a6d9b 100644
--- a/docs/demos/jspsych-extension-mouse-tracking-demo1.html
+++ b/docs/demos/jspsych-extension-mouse-tracking-demo1.html
@@ -1,99 +1,74 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-external-html-demo1.html b/docs/demos/jspsych-external-html-demo1.html
index 3ee74bc4..35e2442a 100644
--- a/docs/demos/jspsych-external-html-demo1.html
+++ b/docs/demos/jspsych-external-html-demo1.html
@@ -1,70 +1,45 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-free-sort-demo1.html b/docs/demos/jspsych-free-sort-demo1.html
index 2d4c3abc..cb05c7a9 100644
--- a/docs/demos/jspsych-free-sort-demo1.html
+++ b/docs/demos/jspsych-free-sort-demo1.html
@@ -1,73 +1,49 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-fullscreen-demo1.html b/docs/demos/jspsych-fullscreen-demo1.html
index 2b878fcd..47383d14 100644
--- a/docs/demos/jspsych-fullscreen-demo1.html
+++ b/docs/demos/jspsych-fullscreen-demo1.html
@@ -1,15 +1,16 @@
 
 
   
+    
     
     
-    
-    
+    
+    
     
-
-
-
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-html-keyboard-response-demo1.html b/docs/demos/jspsych-html-keyboard-response-demo1.html
index 5c7eecf8..29df35e6 100644
--- a/docs/demos/jspsych-html-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-html-keyboard-response-demo1.html
@@ -1,56 +1,31 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-html-keyboard-response-demo2.html b/docs/demos/jspsych-html-keyboard-response-demo2.html
index 6d731982..42f6f95b 100644
--- a/docs/demos/jspsych-html-keyboard-response-demo2.html
+++ b/docs/demos/jspsych-html-keyboard-response-demo2.html
@@ -1,56 +1,31 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-html-slider-response-demo1.html b/docs/demos/jspsych-html-slider-response-demo1.html
index f730be47..60455d02 100644
--- a/docs/demos/jspsych-html-slider-response-demo1.html
+++ b/docs/demos/jspsych-html-slider-response-demo1.html
@@ -1,66 +1,41 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-iat-html-demo1.html b/docs/demos/jspsych-iat-html-demo1.html
index a384f468..da6d5ffd 100644
--- a/docs/demos/jspsych-iat-html-demo1.html
+++ b/docs/demos/jspsych-iat-html-demo1.html
@@ -1,65 +1,40 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-iat-image-demo1.html b/docs/demos/jspsych-iat-image-demo1.html
index 0b763085..2d28d952 100644
--- a/docs/demos/jspsych-iat-image-demo1.html
+++ b/docs/demos/jspsych-iat-image-demo1.html
@@ -1,72 +1,46 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-image-button-response-demo1.html b/docs/demos/jspsych-image-button-response-demo1.html
index 1d6d9a57..6708a2e5 100644
--- a/docs/demos/jspsych-image-button-response-demo1.html
+++ b/docs/demos/jspsych-image-button-response-demo1.html
@@ -1,63 +1,37 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-image-keyboard-response-demo1.html b/docs/demos/jspsych-image-keyboard-response-demo1.html
index 9c3f2a8e..f83fc754 100644
--- a/docs/demos/jspsych-image-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-image-keyboard-response-demo1.html
@@ -1,63 +1,37 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-image-keyboard-response-demo2.html b/docs/demos/jspsych-image-keyboard-response-demo2.html
index 0eacb51c..d78644e1 100644
--- a/docs/demos/jspsych-image-keyboard-response-demo2.html
+++ b/docs/demos/jspsych-image-keyboard-response-demo2.html
@@ -1,63 +1,38 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-image-slider-response-demo1.html b/docs/demos/jspsych-image-slider-response-demo1.html
index 87ffdb67..bf0b673e 100644
--- a/docs/demos/jspsych-image-slider-response-demo1.html
+++ b/docs/demos/jspsych-image-slider-response-demo1.html
@@ -1,62 +1,37 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-instructions-demo-1.html b/docs/demos/jspsych-instructions-demo-1.html
index 28d683cd..f76086f3 100644
--- a/docs/demos/jspsych-instructions-demo-1.html
+++ b/docs/demos/jspsych-instructions-demo-1.html
@@ -1,32 +1,20 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-instructions-demo-2.html b/docs/demos/jspsych-instructions-demo-2.html
index 9f80e810..d3eced2c 100644
--- a/docs/demos/jspsych-instructions-demo-2.html
+++ b/docs/demos/jspsych-instructions-demo-2.html
@@ -1,66 +1,41 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-instructions-demo-3.html b/docs/demos/jspsych-instructions-demo-3.html
index 56d79adc..65302923 100644
--- a/docs/demos/jspsych-instructions-demo-3.html
+++ b/docs/demos/jspsych-instructions-demo-3.html
@@ -1,32 +1,20 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-maxdiff-demo1.html b/docs/demos/jspsych-maxdiff-demo1.html
index d6c0ce02..01ccad38 100644
--- a/docs/demos/jspsych-maxdiff-demo1.html
+++ b/docs/demos/jspsych-maxdiff-demo1.html
@@ -1,56 +1,31 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-preload-demo1.html b/docs/demos/jspsych-preload-demo1.html
index 70f44c4a..a5f095b0 100644
--- a/docs/demos/jspsych-preload-demo1.html
+++ b/docs/demos/jspsych-preload-demo1.html
@@ -1,76 +1,48 @@
 
 
   
+    
     
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-preload-demo2.html b/docs/demos/jspsych-preload-demo2.html
index 9d12ef28..0cbff4e6 100644
--- a/docs/demos/jspsych-preload-demo2.html
+++ b/docs/demos/jspsych-preload-demo2.html
@@ -1,67 +1,39 @@
 
 
   
+    
     
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-preload-demo3.html b/docs/demos/jspsych-preload-demo3.html
index eb9e3da1..36c7bd47 100644
--- a/docs/demos/jspsych-preload-demo3.html
+++ b/docs/demos/jspsych-preload-demo3.html
@@ -1,107 +1,79 @@
 
 
   
+    
     
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-preload-demo4.html b/docs/demos/jspsych-preload-demo4.html
index 27dd538e..e813aebd 100644
--- a/docs/demos/jspsych-preload-demo4.html
+++ b/docs/demos/jspsych-preload-demo4.html
@@ -1,59 +1,31 @@
 
 
   
+    
     
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-reconstruction-demo1.html b/docs/demos/jspsych-reconstruction-demo1.html
index c8707786..3ea20e53 100644
--- a/docs/demos/jspsych-reconstruction-demo1.html
+++ b/docs/demos/jspsych-reconstruction-demo1.html
@@ -1,75 +1,50 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const reconstruction = {
+      type: jsPsychReconstruction,
+      stim_function: sample_function,
+      starting_value: 0.5,
+    }
 
+    const timeline =  [match_item, reconstruction],
+     
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-resize-demo1.html b/docs/demos/jspsych-resize-demo1.html
index 6ee33a69..310c524e 100644
--- a/docs/demos/jspsych-resize-demo1.html
+++ b/docs/demos/jspsych-resize-demo1.html
@@ -1,57 +1,32 @@
 
 
-
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-same-different-html-demo1.html b/docs/demos/jspsych-same-different-html-demo1.html
index 0bf8f697..9f3943f2 100644
--- a/docs/demos/jspsych-same-different-html-demo1.html
+++ b/docs/demos/jspsych-same-different-html-demo1.html
@@ -1,66 +1,38 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-same-different-image-demo1.html b/docs/demos/jspsych-same-different-image-demo1.html
index 099845e8..a7f7e781 100644
--- a/docs/demos/jspsych-same-different-image-demo1.html
+++ b/docs/demos/jspsych-same-different-image-demo1.html
@@ -1,76 +1,48 @@
 
 
   
+    
     
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-serial-reaction-time-demo1.html b/docs/demos/jspsych-serial-reaction-time-demo1.html
index eff04868..d6b7e89d 100644
--- a/docs/demos/jspsych-serial-reaction-time-demo1.html
+++ b/docs/demos/jspsych-serial-reaction-time-demo1.html
@@ -1,91 +1,63 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-serial-reaction-time-demo2.html b/docs/demos/jspsych-serial-reaction-time-demo2.html
index acff93d4..e90cf5b2 100644
--- a/docs/demos/jspsych-serial-reaction-time-demo2.html
+++ b/docs/demos/jspsych-serial-reaction-time-demo2.html
@@ -1,101 +1,73 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html b/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html
index 1e23b0f1..e2d76120 100644
--- a/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html
+++ b/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html
@@ -1,77 +1,49 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html b/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html
index df4d8cd0..a59ec5b3 100644
--- a/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html
+++ b/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html
@@ -1,83 +1,55 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-sketchpad-demo1.html b/docs/demos/jspsych-sketchpad-demo1.html
index 9e71ea9b..dd2d1fbd 100644
--- a/docs/demos/jspsych-sketchpad-demo1.html
+++ b/docs/demos/jspsych-sketchpad-demo1.html
@@ -1,42 +1,19 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
     
     
     
-    
-    
+    
+    
   
   
   
     
     
     
     
-    
-    
+    
+    
   
   
   
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-html-form-demo2.html b/docs/demos/jspsych-survey-html-form-demo2.html
index 359e2ca8..a26bf2d0 100644
--- a/docs/demos/jspsych-survey-html-form-demo2.html
+++ b/docs/demos/jspsych-survey-html-form-demo2.html
@@ -1,59 +1,31 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-likert-demo1.html b/docs/demos/jspsych-survey-likert-demo1.html
index 04d8daf4..6dc47d3c 100644
--- a/docs/demos/jspsych-survey-likert-demo1.html
+++ b/docs/demos/jspsych-survey-likert-demo1.html
@@ -1,68 +1,40 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-likert-demo2.html b/docs/demos/jspsych-survey-likert-demo2.html
index 37c401f5..049f0536 100644
--- a/docs/demos/jspsych-survey-likert-demo2.html
+++ b/docs/demos/jspsych-survey-likert-demo2.html
@@ -1,70 +1,42 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-multi-choice-demo1.html b/docs/demos/jspsych-survey-multi-choice-demo1.html
index 9d3b1ce2..2bc484ef 100644
--- a/docs/demos/jspsych-survey-multi-choice-demo1.html
+++ b/docs/demos/jspsych-survey-multi-choice-demo1.html
@@ -1,70 +1,42 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-multi-choice-demo2.html b/docs/demos/jspsych-survey-multi-choice-demo2.html
index 94ec00e9..6b4f812d 100644
--- a/docs/demos/jspsych-survey-multi-choice-demo2.html
+++ b/docs/demos/jspsych-survey-multi-choice-demo2.html
@@ -1,72 +1,44 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-multi-select-demo1.html b/docs/demos/jspsych-survey-multi-select-demo1.html
index 0850e492..6da1eb2d 100644
--- a/docs/demos/jspsych-survey-multi-select-demo1.html
+++ b/docs/demos/jspsych-survey-multi-select-demo1.html
@@ -1,73 +1,45 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-text-demo1.html b/docs/demos/jspsych-survey-text-demo1.html
index 808ea688..2a34f9b1 100644
--- a/docs/demos/jspsych-survey-text-demo1.html
+++ b/docs/demos/jspsych-survey-text-demo1.html
@@ -1,59 +1,31 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-text-demo2.html b/docs/demos/jspsych-survey-text-demo2.html
index 73590256..bc5387e2 100644
--- a/docs/demos/jspsych-survey-text-demo2.html
+++ b/docs/demos/jspsych-survey-text-demo2.html
@@ -1,60 +1,32 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-text-demo3.html b/docs/demos/jspsych-survey-text-demo3.html
index adb1397f..9c7d9b28 100644
--- a/docs/demos/jspsych-survey-text-demo3.html
+++ b/docs/demos/jspsych-survey-text-demo3.html
@@ -1,60 +1,32 @@
 
 
   
+    
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-survey-text-demo4.html b/docs/demos/jspsych-survey-text-demo4.html
index f7da4ed8..589d8384 100644
--- a/docs/demos/jspsych-survey-text-demo4.html
+++ b/docs/demos/jspsych-survey-text-demo4.html
@@ -1,66 +1,38 @@
 
 
   
+    
     
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-video-button-response-demo1.html b/docs/demos/jspsych-video-button-response-demo1.html
index 4edf2a23..7b41d850 100644
--- a/docs/demos/jspsych-video-button-response-demo1.html
+++ b/docs/demos/jspsych-video-button-response-demo1.html
@@ -1,65 +1,40 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-video-keyboard-response-demo1.html b/docs/demos/jspsych-video-keyboard-response-demo1.html
index 28b52c25..4c90013f 100644
--- a/docs/demos/jspsych-video-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-video-keyboard-response-demo1.html
@@ -1,64 +1,39 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-video-slider-response-demo1.html b/docs/demos/jspsych-video-slider-response-demo1.html
index 91df1fe7..83380ea4 100644
--- a/docs/demos/jspsych-video-slider-response-demo1.html
+++ b/docs/demos/jspsych-video-slider-response-demo1.html
@@ -1,64 +1,37 @@
 
 
-
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const trial = {
+      type: jsPsychVideoSliderResponse,
+      stimulus: [
+        'video/fish.mp4'
+      ],
+      labels: ["Hated it", "Loved it"],
+      prompt: '
Please rate your enjoyment of the video clip.
'
+    };
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-virtual-chinrest-demo1.html b/docs/demos/jspsych-virtual-chinrest-demo1.html
index 82c1f79f..f65346e0 100644
--- a/docs/demos/jspsych-virtual-chinrest-demo1.html
+++ b/docs/demos/jspsych-virtual-chinrest-demo1.html
@@ -1,63 +1,38 @@
 
 
-
-  
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+    
+  
+  
+  
-
+  
 
diff --git a/docs/demos/jspsych-virtual-chinrest-demo2.html b/docs/demos/jspsych-virtual-chinrest-demo2.html
index f6be92f7..66be679e 100644
--- a/docs/demos/jspsych-virtual-chinrest-demo2.html
+++ b/docs/demos/jspsych-virtual-chinrest-demo2.html
@@ -1,73 +1,48 @@
 
 
-
-  
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const timeline = [trial, resized_stimulus];
 
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-virtual-chinrest-demo3.html b/docs/demos/jspsych-virtual-chinrest-demo3.html
index 764b6274..d4bfe5ac 100644
--- a/docs/demos/jspsych-virtual-chinrest-demo3.html
+++ b/docs/demos/jspsych-virtual-chinrest-demo3.html
@@ -1,73 +1,48 @@
 
 
-
-  
-  
-  
-  
-  
-  
-  
-
-
-
+    
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    const resized_stimulus = {
+      type: jsPsychHtmlButtonResponse,
+      stimulus: `
+        
If the measurements were done correctly, the square below should take up about 10 degrees of visual angle.

+        

+      `,
+      choices: ['Continue']
+    }
 
+    const timeline = [trial, resized_stimulus];
+
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
+    } else {
+      document.body.innerHTML = '
You must be online to view the plugin demo.
';
+    }
+  
 
diff --git a/docs/demos/jspsych-visual-search-circle-demo1.html b/docs/demos/jspsych-visual-search-circle-demo1.html
index 29ed2d59..ea3c0a81 100644
--- a/docs/demos/jspsych-visual-search-circle-demo1.html
+++ b/docs/demos/jspsych-visual-search-circle-demo1.html
@@ -1,74 +1,46 @@
 
 
   
+    
     
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/demos/jspsych-visual-search-circle-demo2.html b/docs/demos/jspsych-visual-search-circle-demo2.html
index 3900a95e..2256120c 100644
--- a/docs/demos/jspsych-visual-search-circle-demo2.html
+++ b/docs/demos/jspsych-visual-search-circle-demo2.html
@@ -1,74 +1,46 @@
 
 
   
+    
     
     
     
     
-    
-    
+    
+    
   
   
   
 
diff --git a/docs/plugins/html-slider-response.md b/docs/plugins/html-slider-response.md
index c8243a8f..d4500c5d 100644
--- a/docs/plugins/html-slider-response.md
+++ b/docs/plugins/html-slider-response.md
@@ -53,7 +53,7 @@ slider_start | numeric | The starting value of the slider.
                 
                 `,
             require_movement: true,
-            labels: ['100% chance that team A wins', '50% chance that team A wins', '0% chance that team A wins']
+            labels: ['100% chance', '50% chance', '0% chance']
         };
         ```
 
diff --git a/examples/jspsych-extension-mouse-tracking.html b/examples/jspsych-extension-mouse-tracking.html
index 5a0c7244..c5e60174 100644
--- a/examples/jspsych-extension-mouse-tracking.html
+++ b/examples/jspsych-extension-mouse-tracking.html
@@ -18,11 +18,7 @@
     ]
   });
 
-  var start = {
-    type: jsPsychHtmlButtonResponse,
-    stimulus: '',
-    choices: ['Run demo']
-  };
+  
 
   var show_data = {
     type: jsPsychHtmlButtonResponse,