Merge branch 'main' of https://github.com/jspsych/jsPsych into plugin-visual-search-add-fixed-offset

2025-05-10 11:10:54 +00:00 · 2024-11-04 19:32:52 -05:00 · 2024-11-04 19:32:52 -05:00 · 7b0c99f72a
commit 7b0c99f72a
parent 8759217f0e 06f6be0961
545 changed files with 23037 additions and 25405 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -9,43 +9,34 @@ jobs:
    runs-on: ubuntu-latest
    strategy:
      matrix:
-        node: [14, 16]
+        node: [18, 20]

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4

      - name: Setup Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node }}
          cache: npm

-      - name: Install npm@v7
-        run: npm install -g npm@7
-
      - name: Install dependencies
        run: npm ci

      # Running this after `npm ci` because `npm ci` removes `node_modules`:
      - name: Download Turborepo cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules/.cache/turbo
          key: ${{ runner.os }}-node-${{ matrix.node }}-turbo-${{ hashFiles('node_modules/.cache/turbo') }}
          restore-keys: |
            ${{ runner.os }}-node-${{ matrix.node }}-turbo-

+      - name: Check types
+        run: npm run tsc
+
      - name: Build packages
        run: npm run build

-      # TODO setup linting
-      # - name: Lint
-      #   run: npm run lint
-
      - name: Run tests
-        run: npm run test -- --ci --coverage --maxWorkers=2
-        env:
-          NODE_OPTIONS: "--max-old-space-size=4096" # Increase heap size for jest
-      # TODO setup codecov or coveralls
-      # - name: Upload coverage to Codecov
-      #   uses: codecov/codecov-action@v1
+        run: npm run test -- --ci --coverage --maxWorkers=2 --reporters=default --reporters=github-actions
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@ -0,0 +1,50 @@
+name: Publish Docs
+
+on:
+  workflow_dispatch:
+
+jobs:
+  deploy-docs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Setup python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.8'
+
+      - name: Install poetry using pip
+        run: pipx install poetry==1.8.0
+
+      - name: Get major version only
+        id: version_major
+        run: echo "version_major=v$(node -p "require('./packages/jspsych/package.json').version" | awk -F. '{print $1}')" >> "$GITHUB_ENV"
+        
+      - name: Config git
+        run: |
+          git config --global user.name docs-bot
+          git config --global user.email docs@jspsych.org
+
+      - name: Deploy docs
+        run: npm run docs:deploy ${{ env.version_major }} latest
+
+      - name: Switch to gh-pages branch
+        run: git checkout gh-pages
+
+      - name: Push gh-pages branch
+        uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: gh-pages
+
+
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -16,29 +16,33 @@ jobs:
    name: Release
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4

-      - name: Setup Node.js 16
-        uses: actions/setup-node@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
        with:
-          node-version: 16
+          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Download Turborepo cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules/.cache/turbo
-          key: ${{ runner.os }}-node-16-turbo-${{ hashFiles('node_modules/.cache/turbo') }}
+          key: ${{ runner.os }}-node-20-turbo-${{ hashFiles('node_modules/.cache/turbo') }}
          restore-keys: |
-            ${{ runner.os }}-node-16-turbo-
+            ${{ runner.os }}-node-20-turbo-
+
+      - name: Check types
+        run: npm run tsc
+
+      - name: Build packages
+        run: npm run build

      - name: Run tests
        run: npm run test -- --ci --maxWorkers=2
-        env:
-          NODE_OPTIONS: "--max-old-space-size=4096" # Increase heap size for jest

      - name: Create Release Pull Request or Publish Packages
        id: changesets
@ -52,58 +56,70 @@ jobs:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Pack Dist Archive
-        if: steps.changesets.outputs.published == 'true'
        run: npm run build:archive

      - name: Upload Release Assets
-        uses: actions/github-script@v4
-        if: steps.changesets.outputs.published == 'true'
+        uses: actions/github-script@v7
        with:
          script: |
            const fs = require("fs");

-            const publishedPackages = ${{ steps.changesets.outputs.publishedPackages }};
            const { owner, repo } = context.repo;
            const distFile = "dist.zip";
+            const assetName = "jspsych.zip";

-            let errorMessage;
-            for (const { name, version } of publishedPackages) {
-              const tag = `${name}@${version}`;
-              // Only upload the dist archive for the core package, plugins, and extensions
-              if (name === "jspsych" || name.includes("/plugin-") || name.includes("/extension-")) {
-                console.log(`Uploading dist archive release asset for ${tag}`);
-                try {
-                  // https://docs.github.com/en/rest/reference/repos#get-a-release-by-tag-name
-                  const releaseId = (
-                    await github.request("GET /repos/{owner}/{repo}/releases/tags/{tag}", {
-                      owner,
-                      repo,
-                      tag,
-                    })
-                  ).data.id;
+            /**
+            * Returns all recent releases without a dist archive asset, up to (excluding) the first release
+            * that has a dist archive asset.
+            **/
+            async function fetchReleasesWithoutDistArchive() {
+              const releasesWithoutDistArchive = [];

-                  // https://octokit.github.io/rest.js/v18#repos-upload-release-asset
-                  await github.repos.uploadReleaseAsset({
-                    owner,
-                    repo,
-                    release_id: releaseId,
-                    name: `jspsych.zip`,
-                    label: "Dist archive (zip)",
-                    headers: {
-                      "content-type": "application/zip",
-                      "content-length": fs.statSync(distFile).size,
-                    },
-                    data: fs.readFileSync(distFile),
-                  });
-                } catch (error) {
-                  console.log(error);
-                  errorMessage = error.message;
+              for await (const response of github.paginate.iterator(github.rest.repos.listReleases, {
+                owner,
+                repo,
+              })) {
+                for (const release of response.data) {
+                  if (!release.assets.some((asset) => asset.name === assetName)) {
+                    releasesWithoutDistArchive.push(release);
+                  } else {
+                    return releasesWithoutDistArchive;
+                  }
                }
              }
+
+              return releasesWithoutDistArchive;
            }

-            if (errorMessage) {
-              core.setFailed(errorMessage);
-            } else {
-              console.log(`Release assets successfully uploaded`);
+            console.log("Collecting recent releases that do not have a dist archive");
+            const releasesWithoutDistArchive = await fetchReleasesWithoutDistArchive();
+
+            if (releasesWithoutDistArchive.length === 0) {
+              console.log("The most recent release already has a dist archive. Skipping asset upload.");
+              return;
+            }
+
+            console.log(`Found ${releasesWithoutDistArchive.length} recent releases without a dist archive.`);
+
+            const distFileSize = fs.statSync(distFile).size;
+            const distFileContents = fs.readFileSync(distFile);
+
+            // Upload dist archive for each release without a dist archive, in reverse order so re-running an
+            // aborted or failed job will pick up where it left off last time
+            for (const release of releasesWithoutDistArchive.reverse()) {
+              console.log(`Uploading dist archive release asset for ${release.tag_name}`);
+
+              // https://octokit.github.io/rest.js/v20#repos-upload-release-asset
+              await github.rest.repos.uploadReleaseAsset({
+                owner,
+                repo,
+                release_id: release.id,
+                name: assetName,
+                label: "Dist archive (zip)",
+                headers: {
+                  "content-type": "application/zip",
+                  "content-length": distFileSize,
+                },
+                data: distFileContents,
+              });
            }
--- a/CITATION.cff
+++ b/CITATION.cff
@ -0,0 +1,47 @@
+cff-version: "1.2.0"
+authors:
+- family-names: Leeuw
+  given-names: Joshua R.
+  name-particle: de
+  orcid: "https://orcid.org/0000-0003-4815-2364"
+- family-names: Gilbert
+  given-names: Rebecca A.
+  orcid: "https://orcid.org/0000-0003-4574-7792"
+- family-names: Luchterhandt
+  given-names: Björn
+  orcid: "https://orcid.org/0000-0002-9225-2787"
+contact:
+- family-names: Leeuw
+  given-names: Joshua R.
+  name-particle: de
+  orcid: "https://orcid.org/0000-0003-4815-2364"
+doi: 10.5281/zenodo.7702307
+message: If you use this software, please cite our article in the
+  Journal of Open Source Software.
+preferred-citation:
+  authors:
+  - family-names: Leeuw
+    given-names: Joshua R.
+    name-particle: de
+    orcid: "https://orcid.org/0000-0003-4815-2364"
+  - family-names: Gilbert
+    given-names: Rebecca A.
+    orcid: "https://orcid.org/0000-0003-4574-7792"
+  - family-names: Luchterhandt
+    given-names: Björn
+    orcid: "https://orcid.org/0000-0002-9225-2787"
+  date-published: 2023-05-11
+  doi: 10.21105/joss.05351
+  issn: 2475-9066
+  issue: 85
+  journal: Journal of Open Source Software
+  publisher:
+    name: Open Journals
+  start: 5351
+  title: "jsPsych: Enabling an Open-Source Collaborative Ecosystem of
+    Behavioral Experiments"
+  type: article
+  url: "https://joss.theoj.org/papers/10.21105/joss.05351"
+  volume: 8
+title: "jsPsych: Enabling an Open-Source Collaborative Ecosystem of
+  Behavioral Experiments"
--- a/README.md
+++ b/README.md
@ -48,15 +48,21 @@ See the [contributing to jsPsych](https://www.jspsych.org/latest/developers/cont

 ## Citation

-If you use this library in academic work, please cite the [paper that describes jsPsych](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y):
+If you use this library in academic work, the preferred citation is:

-de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:10.3758/s13428-014-0458-y
+de Leeuw, J.R., Gilbert, R.A., & Luchterhandt, B. (2023). jsPsych: Enabling an open-source collaborative ecosystem of behavioral experiments. *Journal of Open Source Software*, *8*(85), 5351, [https://joss.theoj.org/papers/10.21105/joss.05351](https://joss.theoj.org/papers/10.21105/joss.05351).
+
+This paper is an updated description of jsPsych and includes all current core team members. It replaces the earlier paper that described jsPsych:
+
+de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:[10.3758/s13428-014-0458-y](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y)
+
+Citations help us demonstrate that this library is used and valued, which allows us to continue working on it.

 ## Contributors

 jsPsych is open source project with [numerous contributors](https://github.com/jspsych/jsPsych/graphs/contributors). 
 The project is currently managed by the core team of Josh de Leeuw ([@jodeleeuw](https://github.com/jodeleeuw)), Becky Gilbert ([@becky-gilbert](https://github.com/becky-gilbert)), and Björn Luchterhandt ([@bjoluc](https://github.com/bjoluc)).

-jsPsych was created by [Josh de Leeuw](http://www.twitter.com/joshdeleeuw).
+jsPsych was created by [Josh de Leeuw](https://www.vassar.edu/faculty/jdeleeuw).

-We're also grateful for the generous support from a [Mozilla Open Source Support award](https://www.mozilla.org/en-US/moss/), which funded development of the library from 2020-2021.
+We're also grateful for the generous support from a [Mozilla Open Source Support award](https://www.mozilla.org/en-US/moss/), which funded development of the library from 2020-2022.
--- a/contributors.md
+++ b/contributors.md
@ -34,6 +34,7 @@ The following people have contributed to the development of jsPsych by writing c
 * kupiqu - https://github.com/kupiqu
 * Daiichiro Kuroki - https://github.com/kurokida
 * Jonas Lambers
+* Max Lovell - https://github.com/max-lovell
 * madebyafox - https://github.com/madebyafox
 * Shane Martin - https://github.com/shamrt
 * Vijay Marupudi - https://github.com/vijaymarupudi
@ -61,3 +62,6 @@ The following people have contributed to the development of jsPsych by writing c
 * Rob Wilkinson - https://github.com/RobAWilkinson
 * Andy Woods - https://github.com/andytwoods
 * Reto Wyss - https://github.com/retowyss
+* Shaobin Jiang - https://github.com/Shaobin-Jiang
+* Haotian Tu - https://github.com/thtTNT
+* Joshua Unrau - https://github.com/joshunrau
--- a/docs/about/about.md
+++ b/docs/about/about.md
@ -2,10 +2,16 @@

 jsPsych is open source project with [numerous contributors](https://github.com/jspsych/jsPsych/graphs/contributors). The project is currently managed by the core team of Josh de Leeuw ([@jodeleeuw](https://github.com/jodeleeuw)), Becky Gilbert ([@becky-gilbert](https://github.com/becky-gilbert)), and Björn Luchterhandt ([@bjoluc](https://github.com/bjoluc)).

-jsPsych was created by [Josh de Leeuw :fontawesome-brands-twitter:](http://www.twitter.com/joshdeleeuw).
+jsPsych was created by [Josh de Leeuw](https://www.vassar.edu/faculty/jdeleeuw).

 ### Citation

-If you use jsPsych please cite the following paper.
+If you use this library in academic work, the preferred citation is:

-de Leeuw, J. R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a web browser. _Behavior Research Methods_, _47_(1), 1-12. [doi:10.3758/s13428-014-0458-y](https://doi.org/10.3758/s13428-014-0458-y).
+de Leeuw, J.R., Gilbert, R.A., & Luchterhandt, B. (2023). jsPsych: Enabling an open-source collaborative ecosystem of behavioral experiments. *Journal of Open Source Software*, *8*(85), 5351, [https://joss.theoj.org/papers/10.21105/joss.05351](https://joss.theoj.org/papers/10.21105/joss.05351).
+
+This paper is an updated description of jsPsych and includes all current core team members. It replaces the earlier paper that described jsPsych:
+
+de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:[10.3758/s13428-014-0458-y](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y)
+
+Citations help us demonstrate that this library is used and valued, which allows us to continue working on it.
--- a/docs/demos/eye-tracking-with-webgazer.html
+++ b/docs/demos/eye-tracking-with-webgazer.html
@ -1,19 +1,19 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-webgazer-init-camera@1.0.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-webgazer-calibrate@1.0.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-webgazer-validate@1.0.2"></script>
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-webgazer-init-camera@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-webgazer-calibrate@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-webgazer-validate@2.0.0"></script>
    <script src="js/webgazer/webgazer.js"></script>
-    <script src="https://unpkg.com/@jspsych/extension-webgazer@1.0.2"></script>
+    <script src="https://unpkg.com/@jspsych/extension-webgazer@1.1.0"></script>
    <link
      rel="stylesheet"
-      href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css"
+      href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css"
    />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
@ -121,7 +121,7 @@
      }

      var begin = {
-        type: jsPsychHtmKeyboardResponse,
+        type: jsPsychHtmlKeyboardResponse,
        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>
@ -142,7 +142,7 @@
      }

      var show_data = {
-        type: jsPsychHtmKeyboardResponse,
+        type: jsPsychHtmlKeyboardResponse,
        stimulus: function() {
          var trial_data = jsPsych.data.getLastTrialData().values();
          var trial_json = JSON.stringify(trial_data, null, 2);
--- a/docs/demos/jspsych-animation-demo.html
+++ b/docs/demos/jspsych-animation-demo.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-animation@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-animation@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <style>
      #jspsych-animation-image {
        height: 80% !important;
--- a/docs/demos/jspsych-audio-button-response-demo-1.html
+++ b/docs/demos/jspsych-audio-button-response-demo-1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.0.1"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
--- a/docs/demos/jspsych-audio-button-response-demo-2.html
+++ b/docs/demos/jspsych-audio-button-response-demo-2.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.0.1"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
@ -30,7 +30,7 @@
    	stimulus: 'sound/roar.mp3',
    	choices: images,
    	prompt: "<p>Which animal made the sound?</p>",
-    	button_html: '<img src="%choice%" />'
+    	button_html: (choice)=>`<img style="cursor: pointer; margin: 10px;" src="${choice}" />`
    };

    timeline.push(trial);
--- a/docs/demos/jspsych-audio-button-response-demo-3.html
+++ b/docs/demos/jspsych-audio-button-response-demo-3.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="docs-demo-timeline.js"></script>
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <!--<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.0.1"></script>-->
+    <script src="../../packages/plugin-audio-button-response/dist/index.browser.js"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <!--<link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />-->
+    <link rel="stylesheet" href="../../packages/jspsych/css/jspsych.css" />
+  </head>
+  <body></body>
+  <script>
+
+    const jsPsych = initJsPsych();
+
+    const 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
+    const images = ['img/lion.png', 'img/elephant.png', 'img/monkey.png']
+
+    const preload = {
+      type: jsPsychPreload,
+      auto_preload: true,
+      images: images
+    }
+
+    const trial = {
+    	type: jsPsychAudioButtonResponse,
+      stimulus: 'sound/telephone.mp3',
+      prompt: '<p>Which key was pressed first?</p>',
+      choices: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'],
+      button_layout: 'grid',
+      grid_rows: 4,
+      grid_columns: 3
+    }
+
+    timeline.push(trial);
+
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
+    } 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
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
--- a/docs/demos/jspsych-audio-keyboard-response-demo-2.html
+++ b/docs/demos/jspsych-audio-keyboard-response-demo-2.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
--- a/docs/demos/jspsych-audio-slider-response-demo-1.html
+++ b/docs/demos/jspsych-audio-slider-response-demo-1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@2.0.1"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
--- a/docs/demos/jspsych-audio-slider-response-demo-2.html
+++ b/docs/demos/jspsych-audio-slider-response-demo-2.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@2.0.1"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
--- a/docs/demos/jspsych-browser-check-demo1.html
+++ b/docs/demos/jspsych-browser-check-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-browser-check@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
--- a/docs/demos/jspsych-browser-check-demo2.html
+++ b/docs/demos/jspsych-browser-check-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-browser-check@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
--- a/docs/demos/jspsych-browser-check-demo3.html
+++ b/docs/demos/jspsych-browser-check-demo3.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-browser-check@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
--- a/docs/demos/jspsych-browser-check-demo4.html
+++ b/docs/demos/jspsych-browser-check-demo4.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-browser-check@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
  </head>
  <body></body>
  <script>
--- a/docs/demos/jspsych-call-function-demo1.html
+++ b/docs/demos/jspsych-call-function-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-call-function@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-call-function@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-call-function-demo2.html
+++ b/docs/demos/jspsych-call-function-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-call-function@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-call-function@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-call-function-demo3.html
+++ b/docs/demos/jspsych-call-function-demo3.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-call-function@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-call-function@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-canvas-button-response-demo1.html
+++ b/docs/demos/jspsych-canvas-button-response-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-canvas-button-response-demo2.html
+++ b/docs/demos/jspsych-canvas-button-response-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-canvas-button-response-demo3.html
+++ b/docs/demos/jspsych-canvas-button-response-demo3.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
@ -22,13 +22,13 @@
    }

    // To use the canvas stimulus function with timeline variables,
-    // the jsPsych.timelineVariable() function can be used inside your stimulus function.
+    // the jsPsych.evaluateTimelineVariable() function can be used inside your stimulus function.
    // In addition, this code demonstrates how to check whether participants' answers were correct or not.
    const circle_procedure = {
      timeline: [{
        type: jsPsychCanvasButtonResponse,
        stimulus: function(c) {
-            filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color'));
+            filledCirc(c, jsPsych.evaluateTimelineVariable('radius'), jsPsych.evaluateTimelineVariable('color'));
        },
        canvas_size: [300, 300],
        choices: ['Red', 'Green', 'Blue'],
--- a/docs/demos/jspsych-canvas-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-canvas-keyboard-response-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-canvas-keyboard-response-demo2.html
+++ b/docs/demos/jspsych-canvas-keyboard-response-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-canvas-slider-response-demo1.html
+++ b/docs/demos/jspsych-canvas-slider-response-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-canvas-slider-response-demo2.html
+++ b/docs/demos/jspsych-canvas-slider-response-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-categorize-animation-demo1.html
+++ b/docs/demos/jspsych-categorize-animation-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-categorize-animation@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <style>
      #jspsych-categorize-animation-stimulus {
        height: 80% !important;
--- a/docs/demos/jspsych-categorize-animation-demo2.html
+++ b/docs/demos/jspsych-categorize-animation-demo2.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-categorize-animation@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <style>
      #jspsych-categorize-animation-stimulus {
        height: 80% !important;
--- a/docs/demos/jspsych-categorize-html-demo1.html
+++ b/docs/demos/jspsych-categorize-html-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-categorize-html@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-categorize-html@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-categorize-image-demo1.html
+++ b/docs/demos/jspsych-categorize-image-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-categorize-image@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-categorize-image@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-cloze-demo1.html
+++ b/docs/demos/jspsych-cloze-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-cloze@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-cloze-demo2.html
+++ b/docs/demos/jspsych-cloze-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-cloze@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-cloze-demo3.html
+++ b/docs/demos/jspsych-cloze-demo3.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-cloze@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-extension-mouse-tracking-demo1.html
+++ b/docs/demos/jspsych-extension-mouse-tracking-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
    <!--<script src="../../packages/extension-mouse-tracking/dist/index.browser.js"></script>-->
-    <script src="https://unpkg.com/@jspsych/extension-mouse-tracking@1.0.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/@jspsych/extension-mouse-tracking@1.1.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-extension-record-video-demo1.html
+++ b/docs/demos/jspsych-extension-record-video-demo1.html
@ -2,13 +2,13 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
    <!-- <script src="../../packages/extension-record-video/dist/index.browser.js"></script> -->
-    <script src="https://unpkg.com/@jspsych/extension-record-video@1.0.1"></script>
+    <script src="https://unpkg.com/@jspsych/extension-record-video@1.1.0"></script>
    <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
-    <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-external-html-demo1.html
+++ b/docs/demos/jspsych-external-html-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-external-html@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-external-html@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-free-sort-demo1.html
+++ b/docs/demos/jspsych-free-sort-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-free-sort@1.0.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-free-sort@2.0.1"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-fullscreen-demo1.html
+++ b/docs/demos/jspsych-fullscreen-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-fullscreen@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-fullscreen@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <style>
      html,
      body {
--- a/docs/demos/jspsych-html-audio-response-demo1.html
+++ b/docs/demos/jspsych-html-audio-response-demo1.html
@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <script src="https://unpkg.com/jspsych@7.3.1"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-audio-response@1.0.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.2"></script>
-  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css">
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.0.0"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
  <style>
    .jspsych-btn {margin-bottom: 10px;}
  </style>
--- a/docs/demos/jspsych-html-audio-response-demo2.html
+++ b/docs/demos/jspsych-html-audio-response-demo2.html
@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <script src="https://unpkg.com/jspsych@7.3.1"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-audio-response@1.0.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.2"></script>
-  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css">
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.0.0"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
  <style>
    .jspsych-btn {margin-bottom: 10px;}
  </style>
--- a/docs/demos/jspsych-html-audio-response-demo3.html
+++ b/docs/demos/jspsych-html-audio-response-demo3.html
@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <script src="https://unpkg.com/jspsych@7.3.1"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-audio-response@1.0.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.2"></script>
-  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css">
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.0.1"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.0.0"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
  <style>
    .jspsych-btn {margin-bottom: 10px;}
  </style>
@ -61,7 +61,7 @@
    },
    prompt: '<p>Click the object the matches the spoken name.</p>',
    choices: ['img/9.gif','img/10.gif','img/11.gif','img/12.gif'],
-    button_html: '<img src="%choice%" style="width:100px; padding: 20px;"></img>'
+    button_html: (choice) => `<img src=${choice} style="width:100px; padding: 20px;"></img>`
  }

  var trial_loop = {
--- a/docs/demos/jspsych-html-button-response-demo1.html
+++ b/docs/demos/jspsych-html-button-response-demo1.html
@ -2,9 +2,9 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-html-button-response-demo2.html
+++ b/docs/demos/jspsych-html-button-response-demo2.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="docs-demo-timeline.js"></script>
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
+    <link rel="stylesheet" href="docs-demo.css" type="text/css">
+  </head>
+  <body></body>
+  <script>
+
+    const jsPsych = initJsPsych();
+
+    const timeline = [];
+
+    const trial = {
+      type: jsPsychHtmlButtonResponse,
+      stimulus: `<div style="width: 600px">
+        <div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
+        <div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
+        <div style="width: 50px; height: 50px; background-color: green; display: inline-block"></div>
+        <div style="width: 50px; height: 50px; background-color: blue; display: inline-block"></div>
+        <div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
+        <div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
+        <div style="width: 50px; height: 50px; background-color: green; display: inline-block"></div>
+        <div style="width: 50px; height: 50px; background-color: blue; display: inline-block"></div>
+        <div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
+        <div style="width: 50px; height: 50px; background-color: gray; display: inline-block"></div>
+      </div>`,
+      choices: ['red', 'green', 'blue'],
+      prompt: "<p>What color should the gray block be?</p>",
+      button_html: (choice) => `<div style="width: 80px; height: 80px; margin: 20px; background-color: ${choice}; cursor: pointer;"></div>`
+    };
+
+    timeline.push(trial);
+
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(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-html-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-html-keyboard-response-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-html-keyboard-response-demo2.html
+++ b/docs/demos/jspsych-html-keyboard-response-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-html-slider-response-demo1.html
+++ b/docs/demos/jspsych-html-slider-response-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-slider-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-slider-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-html-video-response-demo1.html
+++ b/docs/demos/jspsych-html-video-response-demo1.html
@ -2,14 +2,14 @@
 <html>
 <head>
  <script src="docs-demo-timeline.js"></script>
-  <script src="https://unpkg.com/jspsych@7.3.1"></script>
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
  <!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> -->
-  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-video-response@1.0.1"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-video-response@2.0.0"></script>
  <!-- <script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script> -->
-  <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
  <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
-  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css">
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
  <link rel="stylesheet" href="docs-demo.css" type="text/css">
 </head>
 <body></body>
--- a/docs/demos/jspsych-html-video-response-demo2.html
+++ b/docs/demos/jspsych-html-video-response-demo2.html
@ -2,14 +2,14 @@
 <html>
 <head>
  <script src="docs-demo-timeline.js"></script>
-  <script src="https://unpkg.com/jspsych@7.3.1"></script>
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
  <!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> -->
-  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-video-response@1.0.1"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-video-response@2.0.0"></script>
  <!-- <script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script> -->
-  <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
  <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
-  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css">
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
  <link rel="stylesheet" href="docs-demo.css" type="text/css">
 </head>
 <body></body>
--- a/docs/demos/jspsych-html-video-response-demo3.html
+++ b/docs/demos/jspsych-html-video-response-demo3.html
@ -2,15 +2,15 @@
 <html>
 <head>
  <script src="docs-demo-timeline.js"></script>
-  <script src="https://unpkg.com/jspsych@7.3.1"></script>
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
  <!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> -->
-  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-video-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-video-response@1.0.1"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-video-button-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-video-response@2.0.0"></script>
  <!-- <script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script> -->
-  <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
  <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
-  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css">
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
  <link rel="stylesheet" href="docs-demo.css" type="text/css">
 </head>
 <body></body>
--- a/docs/demos/jspsych-iat-html-demo1.html
+++ b/docs/demos/jspsych-iat-html-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-iat-html@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-iat-html@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-iat-image-demo1.html
+++ b/docs/demos/jspsych-iat-image-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-iat-image@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-iat-image@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-image-button-response-demo1.html
+++ b/docs/demos/jspsych-image-button-response-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-image-keyboard-response-demo1.html
+++ b/docs/demos/jspsych-image-keyboard-response-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-image-keyboard-response-demo2.html
+++ b/docs/demos/jspsych-image-keyboard-response-demo2.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-image-slider-response-demo1.html
+++ b/docs/demos/jspsych-image-slider-response-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-image-slider-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-image-slider-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-initialize-camera-demo1.html
+++ b/docs/demos/jspsych-initialize-camera-demo1.html
@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <script src="https://unpkg.com/jspsych@7.3.1"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script>
-  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css">
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
  <style>
    .jspsych-btn {margin-bottom: 10px;}
  </style>
--- a/docs/demos/jspsych-initialize-microphone-demo1.html
+++ b/docs/demos/jspsych-initialize-microphone-demo1.html
@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <script src="https://unpkg.com/jspsych@7.3.1"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.2"></script>
-  <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css">
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.0.0"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css">
  <style>
    .jspsych-btn {margin-bottom: 10px;}
  </style>
--- a/docs/demos/jspsych-instructions-demo-1.html
+++ b/docs/demos/jspsych-instructions-demo-1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-instructions@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-instructions@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-instructions-demo-2.html
+++ b/docs/demos/jspsych-instructions-demo-2.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-instructions@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-instructions@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-instructions-demo-3.html
+++ b/docs/demos/jspsych-instructions-demo-3.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-instructions@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-instructions@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-maxdiff-demo1.html
+++ b/docs/demos/jspsych-maxdiff-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-maxdiff@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-maxdiff@2.0.1"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-mirror-camera-demo1.html
+++ b/docs/demos/jspsych-mirror-camera-demo1.html
@ -3,13 +3,13 @@
  <head>
    <script src="docs-demo-timeline.js"></script>
    <!-- <script src="../../packages/jspsych/dist/index.browser.js"></script> -->
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
    <!-- <script src="../../packages/plugin-mirror-camera/dist/index.browser.js"></script> -->
-    <script src="https://unpkg.com/@jspsych/plugin-mirror-camera@1.0.1"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-mirror-camera@2.0.0"></script>
    <!-- <script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script> -->
-    <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.1"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/@jspsych/plugin-initialize-camera@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-preload-demo1.html
+++ b/docs/demos/jspsych-preload-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-preload-demo2.html
+++ b/docs/demos/jspsych-preload-demo2.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-preload-demo3.html
+++ b/docs/demos/jspsych-preload-demo3.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-preload-demo4.html
+++ b/docs/demos/jspsych-preload-demo4.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-image-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-reconstruction-demo1.html
+++ b/docs/demos/jspsych-reconstruction-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-reconstruction@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-reconstruction@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-resize-demo1.html
+++ b/docs/demos/jspsych-resize-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-resize@1.0.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-resize@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-same-different-html-demo1.html
+++ b/docs/demos/jspsych-same-different-html-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-same-different-html@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-same-different-html@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-same-different-image-demo1.html
+++ b/docs/demos/jspsych-same-different-image-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-same-different-image@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-same-different-image@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-serial-reaction-time-demo1.html
+++ b/docs/demos/jspsych-serial-reaction-time-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-serial-reaction-time-demo2.html
+++ b/docs/demos/jspsych-serial-reaction-time-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html
+++ b/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html
+++ b/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-sketchpad-demo1.html
+++ b/docs/demos/jspsych-sketchpad-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-sketchpad@1.0.3"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-sketchpad@2.0.1"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-sketchpad-demo2.html
+++ b/docs/demos/jspsych-sketchpad-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-sketchpad@1.0.3"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-sketchpad@2.0.1"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-sketchpad-demo3.html
+++ b/docs/demos/jspsych-sketchpad-demo3.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-sketchpad@1.0.3"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-sketchpad@2.0.1"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-demo1.html
+++ b/docs/demos/jspsych-survey-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
-    <link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css">
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
+    <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
@ -16,28 +16,29 @@

    const trial = {
      type: jsPsychSurvey,
-      pages: [
-        [
-          {
-            type: 'html',
-            prompt: 'Please answer the following questions:',
-          },
-          {
-            type: 'multi-choice',
-            prompt: "Which of the following do you like the most?", 
-            name: 'VegetablesLike', 
-            options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'], 
-            required: true
-          }, 
-          {
-            type: 'multi-select',
-            prompt: "Which of the following do you like?", 
-            name: 'FruitLike', 
-            options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'], 
-            required: false,
-          }
+      survey_json: {
+        showQuestionNumbers: false,
+        elements:
+          [
+            {
+              type: 'radiogroup',
+              title: "Which of the following do you like the most?", 
+              name: 'vegetablesLike', 
+              choices: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas', 'Broccoli']
+            }, 
+            {
+              type: 'checkbox',
+              title: "Which of the following do you like?", 
+              name: 'fruitLike', 
+              description: "You can select as many as you want.",
+              choices: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Kiwi', 'Mango'], 
+              showOtherItem: true,
+              showSelectAllItem: true,
+              showNoneItem: true,
+              required: true,
+            },
        ]
-      ],
+      },
    };

    const timeline = [trial];
--- a/docs/demos/jspsych-survey-demo2.html
+++ b/docs/demos/jspsych-survey-demo2.html
@ -3,11 +3,11 @@
  <head>
    <meta charset="utf-8">
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
-    <link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css">
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
+    <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
@ -17,45 +17,60 @@

    const trial = {
      type: jsPsychSurvey,
-      pages: [
-        [
+      survey_json: {
+        showQuestionNumbers: false,
+        title: 'My questionnaire',
+        completeText: 'Done!',
+        pageNextText: 'Continue',
+        pagePrevText: 'Previous',
+        pages: [
          {
-            type: 'text',
-            prompt: "Where were you born?", 
-            placeholder: 'City, State, Country',
-            name: 'birthplace', 
-            required: true,
+            name: 'page1',
+            elements: [
+                {
+                  type: 'text',
+                  title: 'Where were you born?', 
+                  placeholder: 'City, State/Region, Country',
+                  name: 'birthplace', 
+                  size: 30,
+                  isRequired: true,
+                }, 
+                {
+                  type: 'text',
+                  title: 'How old are you?', 
+                  name: 'age', 
+                  isRequired: false,
+                  inputType: 'number',
+                  min: 0,
+                  max: 100,
+                  defaultValue: 0
+                }
+              ]
          },
          {
-            type: 'text',
-            prompt: "How old are you?", 
-            name: 'age', 
-            textbox_columns: 5,
-            required: false,
-          }
-        ],
-        [
-          {
-            type: 'multi-choice',
-            prompt: "What's your favorite color?", 
-            options: ['blue','yellow','pink','teal','orange','lime green','other','none of these'],
-            name: 'FavColor', 
-          }, 
-          {
-            type: 'multi-select',
-            prompt: "Which of these animals do you like? Select all that apply.", 
-            options: ['lion','squirrel','badger','whale'],
-            option_reorder: 'random',
-            columns: 0,
-            name: 'AnimalLike', 
+            name: 'page2',
+            elements: [
+              {
+                type: 'radiogroup',
+                title: "What's your favorite color?", 
+                choices: ['Blue','Yellow','Pink','Teal','Orange','Lime green'],
+                showNoneItem: true,
+                showOtherItem: true,
+                colCount: 0,
+                name: 'FavColor',
+              }, 
+              {
+                type: 'checkbox',
+                title: 'Which of these animals do you like? Select all that apply.', 
+                choices: ['Lion','Squirrel','Badger','Whale', 'Turtle'],
+                choicesOrder: 'random',
+                colCount: 0,
+                name: 'FavAnimals', 
+              }
+            ]
          }
        ]
-      ],
-      title: 'My questionnaire',
-      button_label_next: 'Continue',
-      button_label_back: 'Previous',
-      button_label_finish: 'Submit',
-      show_question_numbers: 'onPage'
+      }
    };

    const timeline = [trial];
--- a/docs/demos/jspsych-survey-demo3.html
+++ b/docs/demos/jspsych-survey-demo3.html
@ -3,11 +3,11 @@
  <head>
    <meta charset="utf-8">
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
-    <link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css">
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
+    <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
@ -17,62 +17,79 @@

    const trial = {
      type: jsPsychSurvey,
-      pages: [
-        [
+      survey_json: {
+        showQuestionNumbers: false,
+        title: 'Likert scale examples',
+        pages: [
          {
-            type: 'likert',
-            prompt: 'I like to eat vegetables.',
-            likert_scale_min_label: 'Strongly Disagree',
-            likert_scale_max_label: 'Strongly Agree',
-            likert_scale_values: [
-              {value: 1},
-              {value: 2},
-              {value: 3},
-              {value: 4},
-              {value: 5}
+            elements: [
+              {
+                type: 'rating',
+                name: 'like-vegetables',
+                title: 'I like to eat vegetables.',
+                description: 'Button rating scale with min/max descriptions',
+                minRateDescription: 'Strongly Disagree',
+                maxRateDescription: 'Strongly Agree',
+                displayMode: 'buttons',
+                rateValues: [1,2,3,4,5]
+              }, 
+              {
+                type: 'rating',
+                name: 'like-cake',
+                title: 'I like to eat cake.',
+                description: 'Star rating scale with min/max descriptions',
+                minRateDescription: 'Strongly Disagree',
+                maxRateDescription: 'Strongly Agree',
+                rateType: 'stars',
+                rateCount: 10,
+                rateMax: 10,
+              },
+              {
+                type: 'rating',
+                name: 'like-cooking',
+                title: 'How much do you enjoy cooking?',
+                description: 'Smiley rating scale without min/max descriptions',
+                rateType: 'smileys',
+                rateCount: 10,
+                rateMax: 10,
+                scaleColorMode: 'colored',
+              }
            ]
-          }, 
-          {
-            type: 'likert',
-            prompt: 'I like to eat fruit.',
-            likert_scale_min_label: 'Strongly Disagree',
-            likert_scale_max_label: 'Strongly Agree',
-            likert_scale_values: [
-              {value: 1},
-              {value: 2},
-              {value: 3},
-              {value: 4},
-              {value: 5}
+          }, {
+            elements: [
+              {
+                type: 'matrix',
+                name: 'like-food-matrix',
+                title: 'Matrix question for rating mutliple statements on the same scale.',
+                alternateRows: true,
+                isAllRowRequired: true,
+                rows: [
+                  {text: 'I like to eat vegetables.', value: 'VeggiesTable'},
+                  {text: 'I like to eat fruit.', value: 'FruitTable'},
+                  {text: 'I like to eat cake.', value: 'CakeTable'},
+                  {text: 'I like to cook.', value: 'CookTable'},
+                ],
+                columns: [{
+                  "value": 5,
+                  "text": "Strongly agree"
+                }, {
+                  "value": 4,
+                  "text": "Agree"
+                }, {
+                  "value": 3,
+                  "text": "Neutral"
+                }, {
+                  "value": 2,
+                  "text": "Disagree"
+                }, {
+                  "value": 1,
+                  "text": "Strongly disagree"
+                }]
+              }
            ]
-          },
-          {
-            type: 'likert',
-            prompt: 'I like to eat meat.',
-            likert_scale_min_label: 'Strongly Disagree',
-            likert_scale_max_label: 'Strongly Agree',
-            likert_scale_values: [
-              {value: 1},
-              {value: 2},
-              {value: 3},
-              {value: 4},
-              {value: 5}
-            ]
-          },  
-          
-        ],
-        [
-          {
-            type: 'likert-table',
-            prompt: ' ',
-            statements: [
-              {prompt: 'I like to eat vegetables', name: 'VeggiesTable'},
-              {prompt: 'I like to eat fruit', name: 'FruitTable'},
-              {prompt: 'I like to eat meat', name: 'MeatTable'},
-            ],
-            options: ['Strongly Disagree', 'Disagree', 'Neutral', 'Agree', 'Strongly Agree'],
          }
        ]
-      ],
+      }
    };

    const timeline = [trial];
--- a/docs/demos/jspsych-survey-demo4.html
+++ b/docs/demos/jspsych-survey-demo4.html
@ -3,11 +3,11 @@
  <head>
    <meta charset="utf-8">
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
-    <link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css">
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
+    <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
@ -15,19 +15,57 @@

    const jsPsych = initJsPsych();

+    const survey_function = (survey) => {
+      // If it's the question page, then hide the buttons and move on automatically.
+      // If it's the feedback page, then show the navigation buttons.
+      function updateNavButtons(sender, options) {
+        if (options.newCurrentPage.getPropertyValue("name") === "feedback") {
+          survey.showNavigationButtons = "bottom";
+        } else {
+          survey.showNavigationButtons = "none";
+        }
+      }
+      survey.onCurrentPageChanging.add(updateNavButtons);
+    }
+
    const trial = {
      type: jsPsychSurvey,
-      pages: [
-        [
-          {
-            type: 'multi-choice',
-            prompt: 'During the experiment, are allowed to write things down on paper to help you?',
-            options: ["Yes", "No"],
-            correct_response: "No",
-            required: true
-          }, 
-        ]
-      ],
+      survey_json: {
+        showQuestionNumbers: false,
+        title: 'Conditional question visibility.',
+        showNavigationButtons: "none",
+        goNextPageAutomatic: true,
+        allowCompleteSurveyAutomatic: true,
+        pages: [{
+          name: 'question',
+          elements: [
+            {
+              type: 'radiogroup',
+              title: 'During the experiment, are you allowed to write things down on paper to help you?',
+              choices: ["Yes", "No"],
+              name: "WriteOK",
+              isRequired: true
+            }
+          ],
+        }, {
+          name: 'feedback',
+          elements: [
+            {
+              type: 'html',
+              name: 'incorrect',
+              visibleIf: '{WriteOK} = "Yes"',
+              html: '<h4>That response was incorrect.</h4><p>Please return to the previous page and try again.</p>'
+            },
+            {
+              type: 'html',
+              name: 'correct',
+              visibleIf: '{WriteOK} == "No"',
+              html: '<h4>Congratulations!</h4>'
+            }
+          ]
+        }]
+      },
+      survey_function: survey_function
    };

    const timeline = [trial];
--- a/docs/demos/jspsych-survey-demo5.html
+++ b/docs/demos/jspsych-survey-demo5.html
@ -3,11 +3,11 @@
  <head>
    <meta charset="utf-8">
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey@0.2.1"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
-    <link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@0.2.1/css/survey.css">
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
+    <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css">
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
@ -15,53 +15,71 @@

    const jsPsych = initJsPsych();

-    const question_info = [
-      {
-        'fruit': 'apples',
-        'Q1_prompt': 'Do you like apples?', 
-        'Q1_type': 'regular'
-      },
-      {
-        'fruit': 'bananas',
-        'Q1_prompt': 'Do you NOT like bananas?', 
-        'Q1_type': 'reverse'
-      },
-    ];
-
-    const survey = {
-      type: jsPsychSurvey,
-      pages:[
-        [
+        // values that change across survey trials - each object represents a single trial
+        const question_variables = [
          {
-            type: 'multi-choice',
-            prompt: jsPsych.timelineVariable('Q1_prompt'),
-            options: ['Yes', 'No'],
-            name: 'Q1'
+            'fruit': 'apples',
+            'Q1_prompt': 'Do you like apples?', 
+            'Q1_type': 'regular',
+            'Q2_word': 'like'
          },
          {
-            type: 'text',
-            prompt: function() {
-              return `What's your favorite thing about ${jsPsych.timelineVariable('fruit')}?`;
-            },
-            name: 'Q2'
-          }
-        ]
-      ],
-      data: {
-        'Q1_prompt': jsPsych.timelineVariable('Q1_prompt'),
-        'Q1_type': jsPsych.timelineVariable('Q1_type'),
-        'fruit': jsPsych.timelineVariable('fruit')                                                        
-      },
-      button_label_finish: 'Continue'                
-    };
+            'fruit': 'pears',
+            'Q1_prompt': 'Do you like pears?', 
+            'Q1_type': 'regular',
+            'Q2_word': 'like'
+          },
+          {
+            'fruit': 'bananas',
+            'Q1_prompt': 'Do you NOT like bananas?', 
+            'Q1_type': 'reverse',
+            'Q2_word': 'hate'
+          },
+        ];

-    const survey_procedure = {
-      timeline: [survey],
-      timeline_variables: question_info,
-      randomize_order: true
-    };
+        // create an array to store all of our survey trials so that we can easily randomize their order
+        survey_trials = [];

-    const timeline = [survey_procedure];
+        // construct the survey trials dynamically using an array of question-specific information
+        for (let i=0; i<question_variables.length; i++) {
+
+          // set up the survey JSON for this trial
+          // any question-specific variables come from the appropriate object in the question_variables array
+          let survey_json = {
+            showQuestionNumbers: false,
+            title: 'Dynamically constructing survey trials.',
+            completeText: 'Next >>',
+            elements: [
+              {
+                type: 'radiogroup',
+                title: question_variables[i].Q1_prompt,
+                choices: ['Yes', 'No'],
+                name: 'Q1'
+              },
+              {
+                type: 'text',
+                title: 'What do you '+question_variables[i].Q2_word+' most about '+question_variables[i].fruit+'?',
+                name: 'Q2'
+              }
+            ]
+          };
+          
+          // set up a survey trial object using the JSON we've just created for this question, 
+          // and add the trial object to the survey trials array
+          survey_trials.push({
+            type: jsPsychSurvey,
+            survey_json: survey_json,
+            data: {
+              'Q1_prompt': question_variables[i].Q1_prompt,
+              'Q1_type': question_variables[i].Q1_type,
+              'Q2_word': question_variables[i].Q2_word,
+              'fruit': question_variables[i].fruit                                                        
+            }  
+          });
+
+        }
+
+    const timeline = jsPsych.randomization.shuffle(survey_trials);

    if (typeof jsPsych !== "undefined") {
      jsPsych.run(generateDocsDemoTimeline(timeline));
--- a/docs/demos/jspsych-survey-demo6.html
+++ b/docs/demos/jspsych-survey-demo6.html
@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <script src="docs-demo-timeline.js"></script>
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
+  <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css" />
+  <link rel="stylesheet" href="docs-demo.css" type="text/css" />
+  <style>
+    /* center the audio player and all image question types in the survey */
+    div.sd-question--image,
+    div.sd-question[data-name="audio-player"] {
+      text-align: center;
+    }
+
+    /* use 'data-name' to select any specific question by name */
+    div[data-name="audio-response"] {
+      text-align: center;
+      margin-top: 30px;
+    }
+  </style>
+</head>
+
+<body></body>
+<script>
+
+  const jsPsych = initJsPsych();
+
+  // Embed HTML, images, videos and audio into the survey
+  const image_video_html_trial_info = {
+    pages: [{
+      elements: [{
+        type: "panel",
+        name: "html-img-panel",
+        description: "This panel contains an HTML element and an image element.",
+        elements: [{
+          type: "html",
+          name: "html",
+          html: "<div style='text-align: center; align-items: center; align-content: center; justify-content: center;'><p style='text-align: center; color: darkgreen; font-size: 2em;'>This demo shows how you can add <em>HTML</em>, <strong>images</strong>, and <sub>video</sub> to your jsPsych survey trial.</p></div>"
+        }, {
+          type: "image",
+          name: "monkey",
+          imageLink: "img/monkey.png",
+          altText: "Monkey",
+          imageWidth: 300
+        }]
+      }, {
+        type: "panel",
+        name: "video-panel",
+        description: "This panel contains a fun fish video.",
+        elements: [{
+          type: "image",
+          name: "jspsych-tutorial",
+          imageLink: "video/fish.mp4",
+          imageWidth: 700,
+          imageHeight: 350
+        }],
+      }]
+    }],
+    widthMode: "static",
+    width: 900,
+    completeText: 'Next'
+  };
+
+  const image_video_html_trial = {
+    type: jsPsychSurvey,
+    survey_json: image_video_html_trial_info
+  };
+
+  // Using images as response options
+  const image_choice_trial_info = {
+    elements: [{
+      type: "imagepicker",
+      name: "animals",
+      title: "Which animals would you like to see in real life?",
+      description: "Please select all that apply.",
+      choices: [{
+        value: "lion",
+        imageLink: "img/lion.png",
+        text: "Lion"
+      }, {
+        value: "monkey",
+        imageLink: "img/monkey.png",
+        text: "Monkey"
+      }, {
+        value: "elephant",
+        imageLink: "img/elephant.png",
+        text: "Elephant"
+      }],
+      showLabel: true,
+      multiSelect: true
+    }],
+    showQuestionNumbers: "off",
+    completeText: 'Next',
+  };
+
+  const image_choice_trial = {
+    type: jsPsychSurvey,
+    survey_json: image_choice_trial_info
+  };
+
+  // Add sound to an HTML element
+  // This also demonstrates response validation
+  const sound_trial_info = {
+    elements: [{
+      type: "html",
+      name: "audio-player",
+      html: "<audio controls><source src='sound/speech_red.mp3' type='audio/mp3'></audio>"
+    },
+    {
+      type: "text",
+      name: "audio-response",
+      title: "Please play the sound above and then type the word that you heard in the box below.",
+      description: "Try getting it wrong to see the response validation.",
+      required: true,
+      validators: [{
+        type: "regex",
+        text: "Oops, that's not correct. Try again!",
+        regex: "[rR]{1}[eE]{1}[dD]{1}"
+      }],
+    }],
+    completeText: "Check my response",
+    showQuestionNumbers: "off"
+  };
+
+  const sound_trial = {
+    type: jsPsychSurvey,
+    survey_json: sound_trial_info
+  }
+
+  const timeline = [image_video_html_trial, image_choice_trial, sound_trial];
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.run(generateDocsDemoTimeline(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-survey-demo7.html
+++ b/docs/demos/jspsych-survey-demo7.html
@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <script src="docs-demo-timeline.js"></script>
+  <script src="https://unpkg.com/jspsych@8.0.3"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+  <script src="../../packages/plugin-survey/dist/index.browser.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
+  <link rel="stylesheet" href="../../packages/plugin-survey/css/survey.css" />
+  <link rel="stylesheet" href="docs-demo.css" type="text/css" />
+</head>
+
+<body></body>
+<script>
+
+  const jsPsych = initJsPsych();
+
+  const timeline = [];
+
+  const text_masking_json = {
+    elements: [
+      {
+        type: "html",
+        name: "intro",
+        html: "<h3>Input masking examples</h3><p>You can use input masking with text questions to add automatic formatting to the participant's answer. The mask types are: currency, decimal, pattern, and datetime. These masks will also restrict the types of characters that can be entered, e.g. only numbers or letters."
+      },
+      {
+        type: "text",
+        name: "currency",
+        title: "Currency:",
+        description: "This currency mask adds a prefix/suffix to the number to indicate the currency. Enter some numbers to see the result.",
+        maskType: "currency",
+        maskSettings: {
+          prefix: "$",
+          suffix: " USD"
+        }
+      },
+      {
+        type: "text",
+        name: "decimal",
+        title: "Decimal:",
+        description: "This numeric mask will specify the number of decimals allowed. You can enter numbers with up to three decimals (precision: 3).",
+        maskType: "numeric",
+        maskSettings: {
+          precision: 3
+        }
+      },
+      {
+        type: "text",
+        name: "phone",
+        title: "Phone:",
+        description: "This pattern mask will format the numbers as a phone number.",
+        maskType: "pattern",
+        maskSettings: {
+          pattern: "+9 (999)-999-9999"
+        }
+      },
+      {
+        type: "text",
+        name: "creditcard",
+        title: "Credit card number:",
+        description: "This pattern mask will format the numbers as a credit card number.",
+        maskType: "pattern",
+        maskSettings: {
+          pattern: "9999 9999 9999 9999"
+        }
+      },
+      {
+        type: "text",
+        name: "licenseplate",
+        title: "License plate number:",
+        description: "A pattern mask can also be used with letters. Enter a license plate number in the format ABC-1234.",
+        maskType: "pattern",
+        maskSettings: {
+          pattern: "aaa-9999"
+        }
+      }
+    ],
+    showQuestionNumbers: false
+  };
+
+  timeline.push({
+    type: jsPsychSurvey,
+    survey_json: text_masking_json
+  });
+
+  if (typeof jsPsych !== "undefined") {
+    jsPsych.run(generateDocsDemoTimeline(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-survey-html-form-demo1.html
+++ b/docs/demos/jspsych-survey-html-form-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-html-form@1.0.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-html-form@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-html-form-demo2.html
+++ b/docs/demos/jspsych-survey-html-form-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-html-form@1.0.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-html-form@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-likert-demo1.html
+++ b/docs/demos/jspsych-survey-likert-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-likert@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-likert-demo2.html
+++ b/docs/demos/jspsych-survey-likert-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-likert@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-multi-choice-demo1.html
+++ b/docs/demos/jspsych-survey-multi-choice-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-multi-choice-demo2.html
+++ b/docs/demos/jspsych-survey-multi-choice-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-multi-select-demo1.html
+++ b/docs/demos/jspsych-survey-multi-select-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-multi-select@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-multi-select@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css" />
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-text-demo1.html
+++ b/docs/demos/jspsych-survey-text-demo1.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-text-demo2.html
+++ b/docs/demos/jspsych-survey-text-demo2.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-text-demo3.html
+++ b/docs/demos/jspsych-survey-text-demo3.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-survey-text-demo4.html
+++ b/docs/demos/jspsych-survey-text-demo4.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-survey-text@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-survey-text@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/docs/demos/jspsych-video-button-response-demo1.html
+++ b/docs/demos/jspsych-video-button-response-demo1.html
@ -2,11 +2,11 @@
 <html>
  <head>
    <script src="docs-demo-timeline.js"></script>
-    <script src="https://unpkg.com/jspsych@7.3.1"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
-    <script src="https://unpkg.com/@jspsych/plugin-video-button-response@1.1.2"></script>
-    <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.1/css/jspsych.css" />
+    <script src="https://unpkg.com/jspsych@8.0.3"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.0.0"></script>
+    <script src="https://unpkg.com/@jspsych/plugin-video-button-response@2.0.0"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych@8.0.3/css/jspsych.css" />
    <link rel="stylesheet" href="docs-demo.css" type="text/css">
  </head>
  <body></body>
--- a/Show More
+++ b/Show More