Merge pull request #2106 from jspsych/docs-demos

Add live demos to the documentation
2025-05-10 11:10:54 +00:00 · 2021-08-31 10:22:14 -04:00 · 2021-08-31 10:22:14 -04:00 · 213fffc516
commit 213fffc516
parent fc91efdd88 5e6c5d2352
161 changed files with 7381 additions and 1098 deletions
--- a/docs/demos/external_page.html
+++ b/docs/demos/external_page.html
@ -0,0 +1,12 @@
+<div id="consent">
+  <p>
+    This is a demo experiment, with this minimal consent form being loaded
+    as an external html document. To continue, click the checkbox below
+    and hit "Start Experiment".
+  </p>
+  <p>
+    <input type="checkbox" id="consent_checkbox" />
+    I agree to take part in this study.
+  </p>
+  <button type="button" id="start">Start Experiment</button>
+</div>
--- a/docs/demos/eye-tracking-with-webgazer.html
+++ b/docs/demos/eye-tracking-with-webgazer.html
@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-init-camera.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-calibrate.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-validate.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/js/webgazer/webgazer.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/extensions/jspsych-ext-webgazer.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var preload = {
+        type: 'preload',
+        images: ['img/blue.png']
+      }
+
+      var camera_instructions = {
+        type: 'html-button-response',
+        stimulus: `
+          <p>In order to participate you must allow the experiment to use your camera.</p>
+          <p>You will be prompted to do this on the next screen.</p>
+          <p>If you do not wish to allow use of your camera, you cannot participate in this experiment.<p>
+          <p>It may take up to 30 seconds for the camera to initialize after you give permission.</p>
+        `,
+        choices: ['Got it'],
+      }
+
+      var init_camera = {
+        type: 'webgazer-init-camera'
+      }
+
+      var calibration_instructions = {
+        type: 'html-button-response',
+        stimulus: `
+          <p>Now you'll calibrate the eye tracking, so that the software can use the image of your eyes to predict where you are looking.</p>
+          <p>You'll see a series of dots appear on the screen. Look at each dot and click on it.</p>
+        `,
+        choices: ['Got it'],
+      }
+
+      var calibration = {
+        type: 'webgazer-calibrate',
+        calibration_points: [
+          [25,25],[75,25],[50,50],[25,75],[75,75]
+        ],
+        repetitions_per_point: 2,
+        randomize_calibration_order: true
+      }
+
+      var validation_instructions = {
+        type: 'html-button-response',
+        stimulus: `
+          <p>Now we'll measure the accuracy of the calibration.</p>
+          <p>Look at each dot as it appears on the screen.</p>
+          <p style="font-weight: bold;">You do not need to click on the dots this time.</p>
+        `,
+        choices: ['Got it'],
+        post_trial_gap: 1000
+      }
+
+      var validation = {
+        type: 'webgazer-validate',
+        validation_points: [
+          [25,25],[75,25],[50,50],[25,75],[75,75]
+        ],
+        roi_radius: 200,
+        time_to_saccade: 1000,
+        validation_duration: 2000,
+        data: {
+          task: 'validate'
+        }
+      }
+
+      var recalibrate_instructions = {
+        type: 'html-button-response',
+        stimulus: `
+          <p>The accuracy of the calibration is a little lower than we'd like.</p>
+          <p>Let's try calibrating one more time.</p>
+          <p>On the next screen, look at the dots and click on them.<p>
+        `,
+        choices: ['OK'],
+      }
+
+      var recalibrate = {
+        timeline: [recalibrate_instructions, calibration, validation_instructions, validation],
+        conditional_function: function(){
+          var validation_data = jsPsych.data.get().filter({task: 'validate'}).values()[0];
+          return validation_data.percent_in_roi.some(function(x){
+            var minimum_percent_acceptable = 50;
+            return x < minimum_percent_acceptable;
+          });
+        },
+        data: {
+          phase: 'recalibration'
+        }
+      }
+
+      var calibration_done = {
+        type: 'html-button-response',
+        stimulus: `
+          <p>Great, we're done with calibration!</p>
+        `,
+        choices: ['OK']
+      }
+
+      var begin = {
+        type: 'html-keyboard-response',
+        stimulus: `<p>The next screen will show an image to demonstrate adding the webgazer extension to a trial.</p>
+          <p>Just look at the image while eye tracking data is collected. The trial will end automatically.</p>
+          <p>Press any key to start.</p>
+        `
+      }
+
+      var trial = {
+        type: 'image-keyboard-response',
+        stimulus: 'img/blue.png',
+        choices: jsPsych.NO_KEYS,
+        trial_duration: 2000,
+        extensions: [
+          {
+            type: 'webgazer', 
+            params: {targets: ['#jspsych-image-keyboard-response-stimulus']}
+          }
+        ]
+      }
+
+      var show_data = {
+        type: 'html-keyboard-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: jsPsych.NO_KEYS
+      };
+      
+      jsPsych.init({
+        timeline: [
+          preload, 
+          camera_instructions, 
+          init_camera, 
+          calibration_instructions, 
+          calibration, 
+          validation_instructions, 
+          validation, 
+          recalibrate,
+          calibration_done,
+          begin, 
+          trial, 
+          show_data
+        ],
+        extensions: [
+          {type: 'webgazer'}
+        ]
+      });
+      
+  </script>
+</html>
--- a/docs/demos/img/1.gif
+++ b/docs/demos/img/1.gif
--- a/docs/demos/img/10.gif
+++ b/docs/demos/img/10.gif
--- a/docs/demos/img/11.gif
+++ b/docs/demos/img/11.gif
--- a/docs/demos/img/12.gif
+++ b/docs/demos/img/12.gif
--- a/docs/demos/img/2.gif
+++ b/docs/demos/img/2.gif
--- a/docs/demos/img/3.gif
+++ b/docs/demos/img/3.gif
--- a/docs/demos/img/4.gif
+++ b/docs/demos/img/4.gif
--- a/docs/demos/img/5.gif
+++ b/docs/demos/img/5.gif
--- a/docs/demos/img/6.gif
+++ b/docs/demos/img/6.gif
--- a/docs/demos/img/7.gif
+++ b/docs/demos/img/7.gif
--- a/docs/demos/img/8.gif
+++ b/docs/demos/img/8.gif
--- a/docs/demos/img/9.gif
+++ b/docs/demos/img/9.gif
--- a/docs/demos/img/backwardN.gif
+++ b/docs/demos/img/backwardN.gif
--- a/docs/demos/img/blue.png
+++ b/docs/demos/img/blue.png
--- a/docs/demos/img/card.png
+++ b/docs/demos/img/card.png
--- a/docs/demos/img/elephant.png
+++ b/docs/demos/img/elephant.png
--- a/docs/demos/img/fixation.gif
+++ b/docs/demos/img/fixation.gif
--- a/docs/demos/img/happy_face_1.jpg
+++ b/docs/demos/img/happy_face_1.jpg
--- a/docs/demos/img/happy_face_2.jpg
+++ b/docs/demos/img/happy_face_2.jpg
--- a/docs/demos/img/happy_face_3.jpg
+++ b/docs/demos/img/happy_face_3.jpg
--- a/docs/demos/img/happy_face_4.jpg
+++ b/docs/demos/img/happy_face_4.jpg
--- a/docs/demos/img/lion.png
+++ b/docs/demos/img/lion.png
--- a/docs/demos/img/monkey.png
+++ b/docs/demos/img/monkey.png
--- a/docs/demos/img/navarro_burst_03.jpg
+++ b/docs/demos/img/navarro_burst_03.jpg
--- a/docs/demos/img/normalN.gif
+++ b/docs/demos/img/normalN.gif
--- a/docs/demos/img/orange.png
+++ b/docs/demos/img/orange.png
--- a/docs/demos/img/sad_face_1.jpg
+++ b/docs/demos/img/sad_face_1.jpg
--- a/docs/demos/img/sad_face_2.jpg
+++ b/docs/demos/img/sad_face_2.jpg
--- a/docs/demos/img/sad_face_3.jpg
+++ b/docs/demos/img/sad_face_3.jpg
--- a/docs/demos/img/sad_face_4.jpg
+++ b/docs/demos/img/sad_face_4.jpg
--- a/docs/demos/jspsych-animation-demo.html
+++ b/docs/demos/jspsych-animation-demo.html
@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-animation.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    #jspsych-animation-image {height:80% !important; width: 80% !important;}
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var animation_trial = {
+    type: 'animation',
+    stimuli: [
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg', 
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg', 
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg', 
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
+    ],
+    sequence_reps: 3,
+    frame_time: 300,
+    prompt: '<p style="margin-top:0px;">Watch the faces.</p>'
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var animation_data_loop = {
+    timeline: [animation_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, animation_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-audio-button-response-demo-1.html
+++ b/docs/demos/jspsych-audio-button-response-demo-1.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  </head>
+  <body></body>
+  <script>
+
+  var timeline = [];
+
+  timeline.push({
+    type: 'preload',
+    auto_preload: true
+  });
+
+  timeline.push({
+    type: 'html-button-response',
+    stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
+    'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
+    'you want the first trial to include audio.</p></div>',
+    choices: ['Run demo']
+  });
+
+  var trial = {
+    type: 'audio-button-response',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/tone.mp3',
+    choices: ['Low', 'High'],
+    prompt: "<p>Is the pitch high or low?</p>"
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  timeline.push({
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  });
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: timeline
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+  </script>
+</html>
--- a/docs/demos/jspsych-audio-button-response-demo-2.html
+++ b/docs/demos/jspsych-audio-button-response-demo-2.html
@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  </head>
+  <body></body>
+  <script>
+
+  var timeline = [];
+
+  // sound source: https://www.videvo.net/sound-effect/lion-growl-angry-gene-pe931902/249942/
+  // images source: http://clipart-library.com/cartoon-animal-clipart.html
+  var images = ['img/lion.png', 'img/elephant.png', 'img/monkey.png']
+
+  timeline.push({
+    type: 'preload',
+    auto_preload: true,
+    images: images
+  });
+
+  timeline.push({
+    type: 'html-button-response',
+    stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
+    'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
+    'you want the first trial to include audio.</p></div>',
+    choices: ['Run demo']
+  });
+
+  var trial = {
+			type: 'audio-button-response',
+			stimulus: 'sound/roar.mp3',
+			choices: images,
+			prompt: "<p>Which animal made the sound?</p>",
+			button_html: '<img src="%choice%" />'
+		};
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  timeline.push({
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  });
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: timeline
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+  </script>
+</html>
--- a/docs/demos/jspsych-audio-keyboard-response-demo-1.html
+++ b/docs/demos/jspsych-audio-keyboard-response-demo-1.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-keyboard-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+</head>
+<body></body>
+<script>
+
+  var preload = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var pre_audio = {
+    type: 'html-button-response',
+    stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
+    'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
+    'you want the first trial to include audio.</p></div>',
+    choices: ['Run demo']
+  }
+
+  var trial = {
+    type: 'audio-keyboard-response',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/tone.mp3',
+    choices: ['e', 'i'],
+    prompt: "<p>Is the pitch high or low? Press 'e' for low and 'i' for high.</p>",
+    response_ends_trial: true
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  }
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload, pre_audio, trial_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+</script>
+
+</html>
--- a/docs/demos/jspsych-audio-keyboard-response-demo-2.html
+++ b/docs/demos/jspsych-audio-keyboard-response-demo-2.html
@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-keyboard-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+</head>
+<body></body>
+<script>
+
+  var preload = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var pre_audio = {
+    type: 'html-button-response',
+    stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
+    'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
+    'you want the first trial to include audio.</p></div>',
+    choices: ['Run demo']
+  }
+
+  var trial = {
+    type: 'audio-keyboard-response',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/tone.mp3',
+		choices: jsPsych.NO_KEYS,
+		trial_ends_after_audio: true
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  }
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload, pre_audio, trial_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+</script>
+
+</html>
--- a/docs/demos/jspsych-audio-slider-response-demo-1.html
+++ b/docs/demos/jspsych-audio-slider-response-demo-1.html
@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-slider-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+</head>
+<body></body>
+<script>
+
+  var preload = {
+    type: 'preload',
+    auto_preload: true
+  };
+
+  var pre_audio = {
+    type: 'html-button-response',
+    stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
+    'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
+    'you want the first trial to include audio.</p></div>',
+    choices: ['Run demo']
+  };
+
+  var trial = {
+    type: 'audio-slider-response',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/speech_joke.mp3',
+    labels: ['Not Funny', 'Funny'],
+    prompt: '<p>How funny is the joke?</p>'
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+  
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload, pre_audio, trial_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+</script>
+
+</html>
--- a/docs/demos/jspsych-audio-slider-response-demo-2.html
+++ b/docs/demos/jspsych-audio-slider-response-demo-2.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-slider-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+</head>
+<body></body>
+<script>
+
+  var preload = {
+    type: 'preload',
+    auto_preload: true
+  };
+
+  var pre_audio = {
+    type: 'html-button-response',
+    stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
+    'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
+    'you want the first trial to include audio.</p></div>',
+    choices: ['Run demo']
+  };
+
+  var trial = {
+    type: 'audio-slider-response',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/speech_joke.mp3',
+    labels: ['Not Funny', 'Funny'],
+    prompt: '<p>How funny is the joke?</p>',
+    response_allowed_while_playing: false,
+		require_movement: true
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+  
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload, pre_audio, trial_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+</script>
+
+</html>
--- a/docs/demos/jspsych-call-function-demo1.html
+++ b/docs/demos/jspsych-call-function-demo1.html
@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-call-function.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var myfunc = function() {
+    return 'you called?';
+  }
+
+  var trial = {
+    type: 'call-function',
+    func: myfunc
+  }
+
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-call-function-demo2.html
+++ b/docs/demos/jspsych-call-function-demo2.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-call-function.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  //   Using an anonymous function to pass variables
+
+  var myfunc = function(data){
+    // data contains all the experiment data so far,
+    // so this function could implement code to write
+    // the data to a database.
+    console.log(data.values())
+  }
+
+  var trial = {
+    type: 'call-function',
+    func: function(){ myfunc(jsPsych.data.get()) }
+  }
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-call-function-demo3.html
+++ b/docs/demos/jspsych-call-function-demo3.html
@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-call-function.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial = {
+    type: 'call-function',
+    async: true,
+    func: function(done){
+      // generate a delay between 1500 and 3000 milliseconds to simulate  
+      // waiting for an event to finish after an unknown duration,
+      // then finish the trial
+      var rand_delay = (Math.floor(Math.random() * (3000 - 1500 + 1) + 1500));
+      jsPsych.pluginAPI.setTimeout(function() {
+        // end the trial and save the delay duration to the data
+        done(rand_delay.toString()+"ms");
+      }, rand_delay)
+		}
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-canvas-button-response-demo1.html
+++ b/docs/demos/jspsych-canvas-button-response-demo1.html
@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var all_trial_data = jsPsych.data.get().filter({trial_type: 'canvas-button-response'});
+      var last_two_data = all_trial_data.last(2).values(); // One block consists of two canvas-button-response trials
+      var trial_json = JSON.stringify(last_two_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+
+  // stimulus function that takes the canvas and additional parameters (radius, color)
+  // this can be called inside of an anonymous stimulus function, which takes the canvas (c) as its only argument
+  function filledCirc(canvas, radius, color) {
+    var ctx = canvas.getContext("2d");
+    ctx.beginPath();
+    ctx.arc(150, 150, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = color;
+    ctx.fill();
+  }
+
+  var circle_1 = {
+    type: 'canvas-button-response',
+    stimulus: function(c) {
+      filledCirc(c, 100, 'blue');
+    },
+    canvas_size: [300, 300],
+    choices: ['Red', 'Green', 'Blue'],
+    prompt: '<p>What color is the circle?</p>',
+    data: {color: 'blue', radius: 100}
+  };
+
+  var circle_2 = {
+    type: 'canvas-button-response',
+    stimulus: function(c) {
+      filledCirc(c, 150, 'green');
+    },
+    canvas_size: [300, 300],
+    choices: ['Larger', 'Smaller'],
+    stimulus_duration: 1000,
+    prompt: '<p>Is this circle larger or smaller than the last one?</p>'+
+      '<p>Stimulus will be hidden after 1 second.</p>',
+    data: {color: 'green', radius: 150}
+  };
+
+  var canvas_data_loop = {
+    timeline: [circle_1, circle_2, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, canvas_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-canvas-button-response-demo2.html
+++ b/docs/demos/jspsych-canvas-button-response-demo2.html
@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  // write the canvas stimulus drawing function without using a named function
+  // the anonymous function must take the canvas as an argument
+  var lines = {
+    type: 'canvas-button-response',
+    stimulus: function(c) {
+      var ctx = c.getContext("2d");
+      // first line
+      ctx.beginPath();
+      ctx.moveTo(200, 10);
+      ctx.lineTo(200, 250);
+      ctx.lineWidth = 10;
+      ctx.strokeStyle = 'MediumBlue';
+      ctx.stroke();
+      // second line
+      ctx.beginPath();
+      ctx.moveTo(20, 100);
+      ctx.lineTo(100, 250);
+      ctx.lineWidth = 10;
+      ctx.strokeStyle = 'MediumPurple';
+      ctx.stroke();
+    },
+    canvas_size: [300, 300],
+    choices: ['Blue line', 'Purple line'],
+    prompt: '<p>Which line is longer?</p>',
+    data: {line1_color: 'blue', line1_length: 290, line2_color: "purple", line2_length: 170}
+  };
+
+  var canvas_data_loop = {
+    timeline: [lines, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, canvas_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-canvas-button-response-demo3.html
+++ b/docs/demos/jspsych-canvas-button-response-demo3.html
@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var all_trial_data = jsPsych.data.get().filter({trial_type: 'canvas-button-response'});
+      var last_three_data = all_trial_data.last(3).values(); // One block consists of three canvas-button-response trials
+      var trial_json = JSON.stringify(last_three_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  function filledCirc(canvas, radius, color) {
+    var ctx = canvas.getContext("2d");
+    ctx.beginPath();
+    ctx.arc(150, 150, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = color;
+    ctx.fill();
+  }
+
+  // To use the canvas stimulus function with timeline variables,
+  // the jsPsych.timelineVariable() function can be used inside your stimulus function.
+  // In addition, this code demonstrates how to check whether participants' answers were correct or not.
+  var circle_procedure = {
+    timeline: [{
+      type: 'canvas-button-response',
+      stimulus: function(c) {
+          filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color'));
+      },
+      canvas_size: [300, 300],
+      choices: ['Red', 'Green', 'Blue'],
+      prompt: '<p>What color is the circle?</p>',
+      data: {
+        radius: jsPsych.timelineVariable('radius'), 
+        color: jsPsych.timelineVariable('color'),
+        correct_response: jsPsych.timelineVariable('correct_response')
+      },
+      on_finish: function(data){
+        data.correct = (data.response == data.correct_response);
+      }
+    }],
+    timeline_variables: [
+      {radius: 80, color: 'red', correct_response: 0},
+      {radius: 100, color: 'green', correct_response: 1},
+      {radius: 50, color: 'blue', correct_response: 2}
+    ],
+    randomize_order: true
+  };
+
+  var canvas_data_loop = {
+    timeline: [circle_procedure, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, canvas_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-canvas-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-canvas-keyboard-response-demo1.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-keyboard-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+
+  function drawRect(c){
+    var ctx = c.getContext('2d');
+    ctx.beginPath();
+    ctx.rect(30, 30, 200, 50);
+    ctx.stroke();
+  }
+
+  var trial = {
+    type: 'canvas-keyboard-response',
+    canvas_size: [300, 300],
+    stimulus: drawRect,
+    choices: ['e','i'],
+    prompt: '<p>Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.</p>',
+    data: {shape: 'rectangle'}
+  }
+
+
+  var canvas_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, canvas_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-canvas-keyboard-response-demo2.html
+++ b/docs/demos/jspsych-canvas-keyboard-response-demo2.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-keyboard-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+
+  function drawCirc(c){
+    var ctx = c.getContext('2d');
+    ctx.beginPath();
+    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
+    ctx.stroke();
+  }
+
+  var trial = {
+    type: 'canvas-keyboard-response',
+    canvas_size: [300, 300],
+    stimulus: drawCirc,
+    prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>',
+    choices: jsPsych.NO_KEYS,
+    trial_duration: 3000,
+    data: {shape: 'circle', radius: 50}
+  }
+
+  var canvas_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, canvas_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-canvas-slider-response-demo1.html
+++ b/docs/demos/jspsych-canvas-slider-response-demo1.html
@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-slider-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  // Draw two squares
+
+  var colors = ['#FF3333', '#FF6A33'];
+
+  function twoSquares(c) {    
+    var ctx = c.getContext('2d');
+    ctx.fillStyle = colors[0];
+    ctx.fillRect(200, 70, 40, 40);
+    ctx.fillStyle = colors[1];
+    ctx.fillRect(260, 70, 40, 40);
+  }
+
+  var trial = {
+    type: 'canvas-slider-response',
+    stimulus: twoSquares,
+    labels: ['0','10'],
+    canvas_size: [150, 500],
+    prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)</p>',
+    data: {color1: colors[0], color2: colors[1]}
+  }
+
+  var canvas_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, canvas_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-canvas-slider-response-demo2.html
+++ b/docs/demos/jspsych-canvas-slider-response-demo2.html
@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-slider-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+      .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  // Draw two squares with additional parameters
+
+  var colors;
+
+  function twoSquares(c, colors) {
+    var ctx = c.getContext('2d');
+    ctx.fillStyle = colors[0];
+    ctx.fillRect(200, 70, 40, 40);
+    ctx.fillStyle = colors[1];
+    ctx.fillRect(260, 70, 40, 40);
+  }
+
+  var trial = {
+    type: 'canvas-slider-response',
+    stimulus: function(c) {
+        colors = ['darkred', 'cyan'];
+        twoSquares(c, colors);
+    },
+    labels: ['Exactly<br>the same','Totally<br>different'],
+    canvas_size: [200, 500],
+    prompt: '<p>How different would you say the colors of these two squares are?</p>',
+    on_finish: function(data) {
+        data.color1 = colors[0];
+        data.color2 = colors[1];
+    }
+  };
+  
+  var canvas_data_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, canvas_data_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-categorize-animation-demo1.html
+++ b/docs/demos/jspsych-categorize-animation-demo1.html
@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-animation.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    #jspsych-categorize-animation-stimulus {height:80% !important; width: 80% !important;}
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var animation_trial = {
+    type: 'categorize-animation',
+    stimuli: [
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg', 
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg', 
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg', 
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
+    ],
+    prompt: `Press the P or Q key.`,
+    choices: ['p', 'q'],
+    key_answer: 'q', 
+  };
+
+
+  var trial_loop = {
+    timeline: [animation_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-categorize-animation-demo2.html
+++ b/docs/demos/jspsych-categorize-animation-demo2.html
@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-animation.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    #jspsych-categorize-animation-stimulus {height:80% !important; width: 80% !important;}
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var images = [
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg', 
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg', 
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg', 
+      'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
+  ];
+
+  var animation_trial = {
+    type: 'categorize-animation',
+    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%.'
+  };
+
+  var trial_loop = {
+    timeline: [animation_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-categorize-html-demo1.html
+++ b/docs/demos/jspsych-categorize-html-demo1.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-html.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var categorization_trial = {
+    type: 'categorize-html',
+    stimulus: '<p>B</p>',
+    key_answer: 'p',
+    text_answer: 'letter',
+    choices: ['p', 'q'],
+    correct_text: "<p class='prompt'>Correct, this is a %ANS%.</p>",
+    incorrect_text: "<p class='prompt'>Incorrect, this is a %ANS%.</p>",
+    prompt: "<p>Press p for letter. Press q for number.</p>"
+  };
+
+  var trial_loop = {
+    timeline: [categorization_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-categorize-image-demo1.html
+++ b/docs/demos/jspsych-categorize-image-demo1.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-image.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var categorization_trial = {
+    type: 'categorize-image',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/blue.png',
+    key_answer: 'b',
+    text_answer: 'Blue',
+    choices: ['r', 'g', 'b'],
+    correct_text: "<p class='prompt'>Correct! The color is %ANS%.</p>",
+    incorrect_text: "<p class='prompt'>Incorrect. The color is %ANS%.</p>",
+    prompt: "<p>Is the color of this circle (R)ed, (G)reen, or (B)lue?</p>"
+  };
+
+
+  var trial_loop = {
+    timeline: [categorization_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-cloze-demo1.html
+++ b/docs/demos/jspsych-cloze-demo1.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-cloze.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var cloze_trial = {
+    type: 'cloze',
+    text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.'
+  };
+
+  var trial_loop = {
+    timeline: [cloze_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-cloze-demo2.html
+++ b/docs/demos/jspsych-cloze-demo2.html
@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-cloze.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var cloze_trial = {
+    type: 'cloze',
+    text: 'A rectangle has % 4 % corners and a triangle has % 3 %.',
+    check_answers: true,
+    button_text: 'Next',
+    mistake_fn: function(){alert("Wrong answer. Please check again.")}
+  };
+
+  var trial_loop = {
+    timeline: [cloze_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-external-html-demo1.html
+++ b/docs/demos/jspsych-external-html-demo1.html
@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-external-html.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  // sample function that might be used to check if a subject has given
+  // consent to participate.
+  var check_consent = function(elem) {
+    if (document.getElementById('consent_checkbox').checked) {
+      return true;
+    }
+    else {
+      alert("If you wish to participate, you must check the box next to the statement 'I agree to participate in this study.'");
+      return false;
+    }
+    return false;
+  };
+
+  // declare the block.
+  var trial = {
+    type:'external-html',
+    url: "external_page.html",
+    cont_btn: "start",
+    check_fn: check_consent
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-free-sort-demo1.html
+++ b/docs/demos/jspsych-free-sort-demo1.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-free-sort.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var sorting_stimuli = [
+    'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg', 
+    'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg', 
+    'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg', 
+    'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
+  ]
+
+  var preload_trial = {
+    type: 'preload',
+    images: sorting_stimuli
+  }
+
+  var sort_trial = {
+    type: 'free-sort',
+    stimuli: sorting_stimuli,
+    stim_width: 80,
+    stim_height: 60,
+    sort_area_width: 500,
+    sort_area_height: 500,
+    stim_starts_inside: true,
+    prompt: "<p>Click and drag the images below to sort them so that similar items are close together.</p>"
+  };
+
+  var trial_loop = {
+    timeline: [sort_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-fullscreen-demo1.html
+++ b/docs/demos/jspsych-fullscreen-demo1.html
@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-fullscreen.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      html, body { background-color: white;}
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var enter_fullscreen = {
+        type: 'fullscreen',
+        fullscreen_mode: true
+      }
+
+      var trial_in_fullscreen = {
+        type: 'html-button-response',
+        stimulus: 'This trial will be in fullscreen mode.',
+        choices: ['Continue']
+      }
+
+      var exit_fullscreen = {
+        type: 'fullscreen',
+        fullscreen_mode: false,
+        delay_after: 0
+      }
+
+      var trial_after_fullscreen = {
+        type: 'html-button-response',
+        stimulus: 'This trial will NOT be in fullscreen mode.',
+        choices: ['Continue']
+      }
+
+      var trial_loop = {
+        timeline: [enter_fullscreen, trial_in_fullscreen, exit_fullscreen, trial_after_fullscreen, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-html-button-response-demo1.html
+++ b/docs/demos/jspsych-html-button-response-demo1.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial = {
+    type: 'html-button-response',
+    stimulus: '<p>Running</p>',
+    choices: ['Healthy', 'Unhealthy'],
+    prompt: "<p>Is this activity healthy or unhealthy?</p>"
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-html-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-html-keyboard-response-demo1.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial = {
+    type: 'html-keyboard-response',
+    stimulus: '<p>Running</p>',
+    choices: ['e', 'i'],
+    prompt: "<p>Is this activity healthy or unhealthy?</p><p>Press 'e' for healthy and 'i' for unhealthy.</p>"
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-html-keyboard-response-demo2.html
+++ b/docs/demos/jspsych-html-keyboard-response-demo2.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial = {
+    type: 'html-keyboard-response',
+    stimulus: '<p style="font-size: 48px;">+</p>',
+    choices: jsPsych.NO_KEYS,
+    trial_duration: 1000,
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-html-slider-response-demo1.html
+++ b/docs/demos/jspsych-html-slider-response-demo1.html
@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-slider-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+  
+  var trial = {
+    type: 'html-slider-response',
+    stimulus: '<p>Running</p>',
+    require_movement: true,
+    labels: ['healthy', 'unhealthy'],
+    prompt: "<p>How healthy/unhealthy is this activity?</p>"
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-iat-html-demo1.html
+++ b/docs/demos/jspsych-iat-html-demo1.html
@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-iat-html.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+  
+  var trial = {
+    type: 'iat-html',
+    stimulus: 'Golf',
+    stim_key_association: 'left',
+    html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
+    bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
+    force_correct_key_press: true,
+    display_feedback: true,
+    trial_duration: 3000, //Only if display_feedback is false
+    left_category_key: 'e',
+    right_category_key: 'i',
+    left_category_label: ['OLD'],
+    right_category_label: ['YOUNG'],
+    response_ends_trial: true
+  }
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-iat-image-demo1.html
+++ b/docs/demos/jspsych-iat-image-demo1.html
@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-iat-image.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  
+  var trial = {
+    type: 'iat-image',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/blue.png',
+    stim_key_association: 'left',
+    html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
+    bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
+    force_correct_key_press: true,
+    display_feedback: true,
+    trial_duration: 3000, //Only if display_feedback is false
+    left_category_key: 'e',
+    right_category_key: 'i',
+    left_category_label: ['OLD'],
+    right_category_label: ['YOUNG'],
+    response_ends_trial: true
+  }
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-image-button-response-demo1.html
+++ b/docs/demos/jspsych-image-button-response-demo1.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  
+  var trial = {
+    type: 'image-button-response',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
+    choices: ['Happy', 'Sad'],
+    prompt: "<p>Is this person happy or sad?</p>"
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-image-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-image-keyboard-response-demo1.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+
+  var trial = {
+    type: 'image-keyboard-response',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
+    choices: ['e', 'i'],
+    prompt: "<p>Is this person happy or sad? Press 'e' for happy and 'i' for sad.</p>",
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-image-keyboard-response-demo2.html
+++ b/docs/demos/jspsych-image-keyboard-response-demo2.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial = {
+    type: 'image-keyboard-response',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
+    choices: jsPsych.NO_KEYS,
+    prompt: "<p>Study this face for 5 seconds.</p>",
+    trial_duration: 5000
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-image-slider-response-demo1.html
+++ b/docs/demos/jspsych-image-slider-response-demo1.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-slider-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial = {
+    type: 'image-slider-response',
+    stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
+    labels: ['happy', 'sad'],
+    prompt: "<p>How happy/sad is this person?</p>",
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-instructions-demo-1.html
+++ b/docs/demos/jspsych-instructions-demo-1.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- Required for each demo -->
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+  <!-- UPDATE depending on current demo -->
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
+</head>
+<body></body>
+<script>
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var demo_trial = {
+      type: 'instructions',
+      pages: [
+        'Welcome to the experiment. Click next to begin.',
+        'This is the second page of instructions.',
+        'This is the final page.'
+      ],
+      show_clickable_nav: true
+    }
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var demo_loop = {
+    timeline: [demo_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, demo_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-instructions-demo-2.html
+++ b/docs/demos/jspsych-instructions-demo-2.html
@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- Required for each demo -->
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+  <!-- UPDATE depending on current demo -->
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
+</head>
+<body></body>
+<script>
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var demo_trial = {
+      type: 'instructions',
+      pages: [
+        'Welcome to the experiment. Click next to begin.',
+        'You will be looking at images of arrows: ' +
+        '<br>' + 
+        '<img src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/con2.png"></img>'
+      ],
+      show_clickable_nav: true
+    };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var demo_loop = {
+    timeline: [demo_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, demo_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-instructions-demo-3.html
+++ b/docs/demos/jspsych-instructions-demo-3.html
@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- Required for each demo -->
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+  <!-- UPDATE depending on current demo -->
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
+</head>
+<body></body>
+<script>
+
+  var preload_trial = {
+    type: 'preload',
+    auto_preload: true
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var demo_trial = {
+      type: 'instructions',
+      pages: [
+        'Welcome to the experiment. Click next to begin.',
+        'This is the second page of instructions.',
+        'This is the final page.'
+      ],
+      button_label_next: "Continue",
+      button_label_previous: "Return to the dark side",
+      show_clickable_nav: true
+    }
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
+      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
+    },
+    choices: ['Repeat demo']
+  };
+
+  var demo_loop = {
+    timeline: [demo_trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload_trial, start, demo_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-maxdiff-demo1.html
+++ b/docs/demos/jspsych-maxdiff-demo1.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-maxdiff.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+  
+  var trial = {
+    type: 'maxdiff',
+    alternatives: ['apple', 'orange', 'pear', 'banana'],
+    labels: ['Most Preferred', 'Least Preferred'],
+    preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>'
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-preload-demo1.html
+++ b/docs/demos/jspsych-preload-demo1.html
@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(1).values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var preload = {
+        type: 'preload',
+        auto_preload: true
+      }
+
+      var trial_1 = {
+        type: 'image-button-response',
+        stimulus: 'img/happy_face_1.jpg',
+        choices: ['Next']
+      }
+
+      var trial_2 = {
+        type: 'image-button-response',
+        stimulus: 'img/happy_face_2.jpg',
+        choices: ['Next']
+      }
+
+      var trial_3 = {
+        type: 'image-button-response',
+        stimulus: 'img/happy_face_3.jpg',
+        choices: ['Next']
+      }
+      
+      var trial_loop = {
+        timeline: [preload, trial_1, trial_2, trial_3, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-preload-demo2.html
+++ b/docs/demos/jspsych-preload-demo2.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(1).values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var preload = {
+        type: 'preload',
+        images: ['img/sad_face_1.jpg']
+      }
+
+      var trial_1 = {
+        type: 'html-button-response',
+        stimulus: `
+          <p>Study this face</p>
+          <img src="img/sad_face_1.jpg"></img>
+        `,
+        choices: ['Next']
+      }
+      
+      var trial_loop = {
+        timeline: [preload, trial_1, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-preload-demo3.html
+++ b/docs/demos/jspsych-preload-demo3.html
@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(2).values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      
+
+      var trial_1 = {
+        type: 'image-button-response',
+        stimulus: 'img/happy_face_1.jpg',
+        choices: ['Next']
+      }
+
+      var trial_2 = {
+        type: 'image-button-response',
+        stimulus: 'img/happy_face_2.jpg',
+        choices: ['Next']
+      }
+
+      var trial_3 = {
+        type: 'image-button-response',
+        stimulus: 'img/happy_face_3.jpg',
+        choices: ['Next']
+      }
+
+      var block_1 = {
+        timeline: [trial_1, trial_2, trial_3]
+      }
+
+      var trial_4 = {
+        type: 'image-button-response',
+        stimulus: 'img/sad_face_1.jpg',
+        choices: ['Next']
+      }
+
+      var trial_5 = {
+        type: 'image-button-response',
+        stimulus: 'img/sad_face_2.jpg',
+        choices: ['Next']
+      }
+
+      var trial_6 = {
+        type: 'image-button-response',
+        stimulus: 'img/sad_face_3.jpg',
+        choices: ['Next']
+      }
+
+      var block_2 = {
+        timeline: [trial_4, trial_5, trial_6]
+      }
+
+      var preload_block_1 = {
+        type: 'preload',
+        trials: [block_1]
+      }
+
+      var preload_block_2 = {
+        type: 'preload',
+        trials: [block_2]
+      }
+      
+      var trial_loop = {
+        timeline: [preload_block_1, block_1, preload_block_2, block_2, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-preload-demo4.html
+++ b/docs/demos/jspsych-preload-demo4.html
@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(1).values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var preload = {
+        type: 'preload',
+        images: ['img/bad_file_path.png'],
+        show_detailed_errors: true
+      }
+      
+      var trial_loop = {
+        timeline: [preload, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-rdk-demo1.html
+++ b/docs/demos/jspsych-rdk-demo1.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+  
+  var trial = {
+    type: "rdk", 
+    coherent_direction: 0,
+    correct_choice: "p"
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-rdk-demo2.html
+++ b/docs/demos/jspsych-rdk-demo2.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+  
+  var trial = {
+    type: "rdk", 
+    post_trial_gap: 0,
+    number_of_dots: 200,
+    RDK_type: 3,
+    choices: ["a", "l"],
+    correct_choice: "a",
+    coherent_direction: 180,
+    trial_duration: 1000
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-rdk-demo3.html
+++ b/docs/demos/jspsych-rdk-demo3.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+  
+  var trial = {
+    type: "rdk", 
+    number_of_apertures: 3, //This needs to be set if more than one aperture
+    trial_duration: 10000,
+    correct_choice: "a",
+    RDK_type: 3, //Applied to all apertures if only one value
+    aperture_width: 200, //Applied to all apertures if only one value
+    number_of_dots: [50, 200, 100], //Different parameter for each aperture. Array length must equal number_of_apertures
+    aperture_center_x: [(window.innerWidth/2)-300,window.innerWidth/2,(window.innerWidth/2)+300] //Separate the apertures on the screen (window.innerWidth/2 is the middle of the screen)
+  };
+  
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-reconstruction-demo1.html
+++ b/docs/demos/jspsych-reconstruction-demo1.html
@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-reconstruction.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+  
+  var sample_function = function(param){
+    var size = 50 + Math.floor(param*250);
+    var html = '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
+      '<div style="display: block; position: absolute; top: '+(150 - size/2)+'px; left:'+(150 - size/2)+'px; background-color: #000000; '+
+      'width: '+size+'px; height: '+size+'px;"></div></div><p>Press "h" to make the square larger. Press "g" to make the square smaller.</p>'+
+      '<p>When the square is the same size as the previous one, click Continue.</p>';
+    return html;
+  }
+
+  var match_item = {
+    type: 'html-keyboard-response',
+    stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
+      '<div style="display: block; position: absolute; top: '+(150 - 210/2)+'px; left:'+(150 - 210/2)+'px; background-color: #000000; '+
+      'width: 210px; height: 210px;"></div></div>',
+    choices: ['c'],
+    post_trial_gap: 1250,
+    prompt: '<p>Study the size of this square carefully. On the next screen you will have to recreate it. When you are ready, press "c".</p>'
+  }
+
+  var reconstruction = {
+    type: 'reconstruction',
+    stim_function: sample_function,
+    starting_value: 0.5,
+  }
+
+  var trial_loop = {
+    timeline: [match_item, reconstruction, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-resize-demo1.html
+++ b/docs/demos/jspsych-resize-demo1.html
@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-resize.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+  
+  var trial = {
+    type: 'resize',
+    item_width: 3 + 3/8,
+    item_height: 2 + 1/8,
+    prompt: "<p>Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen.</p>",
+    pixels_per_unit: 150
+  };
+  
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-same-different-html-demo1.html
+++ b/docs/demos/jspsych-same-different-html-demo1.html
@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-same-different-html.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'same-different-html',
+        stimuli: [
+          '<p style="font-size:30px;">Climbing</p>', 
+          '<p style="font-size:30px;">Walking</p>'
+        ],
+        prompt: `<p>Press 's' if the activities require the same amount of physical exertion.</p>
+          <p>Press 'd' if the activities require different amount of physical exertion.</p>`,
+        same_key: 's',
+        different_key: 'd',
+        first_stim_duration: 800,
+        answer: 'different'
+      }
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-same-different-image-demo1.html
+++ b/docs/demos/jspsych-same-different-image-demo1.html
@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-same-different-image.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var preload = {
+        type: 'preload',
+        images: [
+          'img/happy_face_1.jpg', 
+          'img/sad_face_3.jpg'
+        ]
+      }
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'same-different-image',
+        stimuli: [
+          'img/happy_face_1.jpg', 
+          'img/sad_face_3.jpg'
+        ],
+        prompt: `<p>Press s if the faces had the same emotional expression.</p>
+          <p>Press d if the faces had different emotional expressions.</p>`,
+        same_key: 's',
+        different_key: 'd',
+        first_stim_duration: 800,
+        second_stim_duration: 800,
+        answer: 'different'
+      }
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [preload, start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-serial-reaction-time-demo1.html
+++ b/docs/demos/jspsych-serial-reaction-time-demo1.html
@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.get().last(4).values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var instructions = {
+        type: 'html-button-response',
+        stimulus: '<p>Use the S, F, H, and K keys to respond.</p>',
+        choices: ['Continue']
+      }
+
+      var grid = [
+        [1,1,1,1]
+      ]
+
+      var response_map = [
+        ['s','f','h','k']
+      ]
+
+      var trial_1 = {
+        type: 'serial-reaction-time',
+        grid: grid,
+        choices: response_map,
+        target: [0,0]
+      }
+      var trial_2 = {
+        type: 'serial-reaction-time',
+        grid: grid,
+        choices: response_map,
+        target: [0,1]
+      }
+      var trial_3 = {
+        type: 'serial-reaction-time',
+        grid: grid,
+        choices: response_map,
+        target: [0,2]
+      }
+      var trial_4 = {
+        type: 'serial-reaction-time',
+        grid: grid,
+        choices: response_map,
+        target: [0,3]
+      }
+
+      var trial_loop = {
+        timeline: [instructions, trial_1, trial_2, trial_3, trial_4, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-serial-reaction-time-demo2.html
+++ b/docs/demos/jspsych-serial-reaction-time-demo2.html
@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.get().last(4).values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var instructions = {
+        type: 'html-button-response',
+        stimulus: '<p>Use the R, I, V, and M keys to respond.</p>',
+        choices: ['Continue']
+      }
+
+      var grid = [
+        [1,1],
+        [1,1]
+      ]
+
+      var response_map = [
+        ['r','i'],
+        ['v','m']
+      ]
+
+      var trial_1 = {
+        type: 'serial-reaction-time',
+        grid: grid,
+        choices: response_map,
+        target: [0,0],
+        show_response_feedback: true,
+        feedback_duration: 500
+      }
+      var trial_2 = {
+        type: 'serial-reaction-time',
+        grid: grid,
+        choices: response_map,
+        target: [0,1],
+        show_response_feedback: true,
+        feedback_duration: 500
+      }
+      var trial_3 = {
+        type: 'serial-reaction-time',
+        grid: grid,
+        choices: response_map,
+        target: [1,1],
+        show_response_feedback: true,
+        feedback_duration: 500
+      }
+      var trial_4 = {
+        type: 'serial-reaction-time',
+        grid: grid,
+        choices: response_map,
+        target: [1,0],
+        show_response_feedback: true,
+        feedback_duration: 500
+      }
+
+      var trial_loop = {
+        timeline: [instructions, trial_1, trial_2, trial_3, trial_4, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html
+++ b/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time-mouse.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.get().last(4).values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var grid = [
+        [1,1,1,1]
+      ]
+
+      var trial_1 = {
+        type: 'serial-reaction-time-mouse',
+        grid: grid,
+        target: [0,0]
+      }
+      var trial_2 = {
+        type: 'serial-reaction-time-mouse',
+        grid: grid,
+        target: [0,1]
+      }
+      var trial_3 = {
+        type: 'serial-reaction-time-mouse',
+        grid: grid,
+        target: [0,2]
+      }
+      var trial_4 = {
+        type: 'serial-reaction-time-mouse',
+        grid: grid,
+        target: [0,3]
+      }
+
+      var trial_loop = {
+        timeline: [trial_1, trial_2, trial_3, trial_4, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html
+++ b/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html
@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time-mouse.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.get().last(4).values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var grid = [
+        [1,0,1],
+        [0,0,0],
+        [1,0,1]
+      ]
+
+      var trial_1 = {
+        type: 'serial-reaction-time-mouse',
+        grid: grid,
+        target: [0,0],
+        target_color: '#006738'
+      }
+      var trial_2 = {
+        type: 'serial-reaction-time-mouse',
+        grid: grid,
+        target: [0,2],
+        target_color: '#F78F1E'
+      }
+      var trial_3 = {
+        type: 'serial-reaction-time-mouse',
+        grid: grid,
+        target: [2,2],
+        target_color: '#13B24B'
+      }
+      var trial_4 = {
+        type: 'serial-reaction-time-mouse',
+        grid: grid,
+        target: [2,0],
+        target_color: '#E74921'
+      }
+
+      var trial_loop = {
+        timeline: [trial_1, trial_2, trial_3, trial_4, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-html-form-demo1.html
+++ b/docs/demos/jspsych-survey-html-form-demo1.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-html-form.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-html-form',
+        preamble: '<p>How are you feeling <b>right now?</b></p>',
+        html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
+      };
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-html-form-demo2.html
+++ b/docs/demos/jspsych-survey-html-form-demo2.html
@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-html-form.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-html-form',
+        preamble: '<p>What is your favorite bird?</p>',
+        html: '<p>My favorite bird is <input type="text" id="test-resp-box" name="response" size="10" /></p>',
+        autofocus: 'test-resp-box'
+      };
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-likert-demo1.html
+++ b/docs/demos/jspsych-survey-likert-demo1.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-likert.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-likert',
+        questions: [
+          {
+            prompt: "I like vegetables.", 
+            labels: [
+              "Strongly Disagree", 
+              "Disagree", 
+              "Neutral", 
+              "Agree", 
+              "Strongly Agree"
+            ]
+          }
+        ]
+      };
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-likert-demo2.html
+++ b/docs/demos/jspsych-survey-likert-demo2.html
@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-likert.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var likert_scale = [
+        "Strongly Disagree", 
+        "Disagree", 
+        "Neutral", 
+        "Agree", 
+        "Strongly Agree"
+      ];
+
+      var trial = {
+        type: 'survey-likert',
+        questions: [
+          {prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
+          {prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},
+          {prompt: "I like meat.", name: 'Meat', labels: likert_scale},
+        ],
+        randomize_question_order: true
+      };
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-multi-choice-demo1.html
+++ b/docs/demos/jspsych-survey-multi-choice-demo1.html
@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-multi-choice.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-multi-choice',
+        questions: [
+          {
+            prompt: "Which of the following do you like the most?", 
+            name: 'VegetablesLike', 
+            options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'], 
+            required: true
+          }, 
+          {
+            prompt: "Which of the following do you like the least?", 
+            name: 'FruitDislike', 
+            options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'], 
+            required: false
+          }
+        ],
+      };
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-multi-choice-demo2.html
+++ b/docs/demos/jspsych-survey-multi-choice-demo2.html
@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-multi-choice.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-multi-choice',
+        questions: [
+          {
+            prompt: "Which of the following do you like the most?", 
+            name: 'VegetablesLike', 
+            options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'], 
+            required: true,
+            horizontal: true
+          }, 
+          {
+            prompt: "Which of the following do you like the least?", 
+            name: 'FruitDislike', 
+            options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'], 
+            required: false,
+            horizontal: true
+          }
+        ],
+      };
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-multi-select-demo1.html
+++ b/docs/demos/jspsych-survey-multi-select-demo1.html
@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-multi-select.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+          type: 'survey-multi-select',
+          questions: [
+            {
+              prompt: "Which of these colors do you like?", 
+              options: ["Red", "Yellow", "Green", "Blue", "Black"], 
+              horizontal: true,
+              required: true,
+              name: 'Colors'
+            }, 
+            {
+              prompt: "Which of these foods do you like?", 
+              options: ["Apples", "Bananas", "Carrots", "Donuts", "Eggplant"], 
+              horizontal: true,
+              required: true,
+              name: 'Foods'
+            }
+          ], 
+          randomize_question_order: true
+        };
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-text-demo1.html
+++ b/docs/demos/jspsych-survey-text-demo1.html
@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-text',
+        questions: [
+          {prompt: 'How old are you?'}
+        ]
+      }
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-text-demo2.html
+++ b/docs/demos/jspsych-survey-text-demo2.html
@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-text',
+        questions: [
+          {prompt: 'What is your date of birth?', placeholder: 'mm/dd/yyyy', required: true},
+          {prompt: 'What country do you currently live in?'}
+        ]
+      }
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-text-demo3.html
+++ b/docs/demos/jspsych-survey-text-demo3.html
@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-text',
+        questions: [
+          {prompt: 'What did you eat for breakfast?', name: 'Breakfast'},
+          {prompt: 'What did you eat for lunch?', name: 'Lunch'}
+        ]
+      }
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-survey-text-demo4.html
+++ b/docs/demos/jspsych-survey-text-demo4.html
@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+
+      var preload = {
+        type: 'preload',
+        images: ['img/navarro_burst_03.jpg']
+      }
+
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-text',
+        preamble: `<img src="img/navarro_burst_03.jpg" style="width:400px;"></img>`,
+        questions: [
+          {prompt: 'Describe your reaction to the image above', rows: 5}
+        ]
+      }
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [preload, start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
--- a/docs/demos/jspsych-video-button-response-demo1.html
+++ b/docs/demos/jspsych-video-button-response-demo1.html
@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-video-button-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var preload = {
+    type: 'preload',
+    video: 'video/fish.mp4'
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial = {
+    type: 'video-button-response',
+    stimulus: [
+      'video/fish.mp4'
+    ],
+    choices: ['0-5', '6-10','11-15','16-20','21-25','25+'],
+    prompt: "<p>How many different fish are shown in the video?</p>",
+    response_allowed_while_playing: false
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/docs/demos/jspsych-video-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-video-keyboard-response-demo1.html
@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-video-keyboard-response.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
+  <style>
+    .jspsych-btn {margin-bottom: 10px;}
+  </style>
+</head>
+<body></body>
+<script>
+
+  var preload = {
+    type: 'preload',
+    video: 'video/fish.mp4'
+  }
+
+  var start = {
+    type: 'html-button-response',
+    stimulus: '',
+    choices: ['Run demo']
+  };
+
+  var show_data = {
+    type: 'html-button-response',
+    stimulus: function() {
+      var trial_data = jsPsych.data.getLastTrialData().values();
+      var trial_json = JSON.stringify(trial_data, null, 2);
+      return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+        <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+    },
+    choices: ['Repeat demo']
+  };
+
+  var trial = {
+    type: 'video-keyboard-response',
+    stimulus: [
+      'video/fish.mp4'
+    ],
+    choices: jsPsych.NO_KEYS,
+    trial_ends_after_video: true
+  };
+
+  var trial_loop = {
+    timeline: [trial, show_data],
+    loop_function: function() {
+      return true;
+    }
+  };
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.init({
+      timeline: [preload, start, trial_loop]
+    });
+  } else {
+    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+  }
+
+</script>
+
+</html>
--- a/Show More
+++ b/Show More