diff --git a/docs/plugins/demos/jspsych-survey-likert-demo1.html b/docs/plugins/demos/jspsych-survey-likert-demo1.html
new file mode 100644
index 00000000..d8b195d7
--- /dev/null
+++ b/docs/plugins/demos/jspsych-survey-likert-demo1.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-likert.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var trial = {
+        type: 'survey-likert',
+        questions: [
+          {
+            prompt: "I like vegetables.", 
+            labels: [
+              "Strongly Disagree", 
+              "Disagree", 
+              "Neutral", 
+              "Agree", 
+              "Strongly Agree"
+            ]
+          }
+        ]
+      };
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
diff --git a/docs/plugins/demos/jspsych-survey-likert-demo2.html b/docs/plugins/demos/jspsych-survey-likert-demo2.html
new file mode 100644
index 00000000..1d064594
--- /dev/null
+++ b/docs/plugins/demos/jspsych-survey-likert-demo2.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-likert.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
+    />
+    <style>
+      .jspsych-btn {
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body></body>
+  <script>
+      var start = {
+        type: 'html-button-response',
+        stimulus: '',
+        choices: ['Run demo']
+      };
+
+      var show_data = {
+        type: 'html-button-response',
+        stimulus: function() {
+          var trial_data = jsPsych.data.getLastTrialData().values();
+          var trial_json = JSON.stringify(trial_data, null, 2);
+          return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
+            <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
+        },
+        choices: ['Repeat demo']
+      };
+
+      var likert_scale = [
+        "Strongly Disagree", 
+        "Disagree", 
+        "Neutral", 
+        "Agree", 
+        "Strongly Agree"
+      ];
+
+      var trial = {
+        type: 'survey-likert',
+        questions: [
+          {prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
+          {prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},
+          {prompt: "I like meat.", name: 'Meat', labels: likert_scale},
+        ],
+        randomize_question_order: true
+      };
+
+      var trial_loop = {
+        timeline: [trial, show_data],
+        loop_function: function() {
+          return true;
+        }
+      };
+
+      if (typeof jsPsych !== "undefined") {
+        jsPsych.init({
+          timeline: [start, trial_loop]
+        });
+      } else {
+        document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+      }
+  </script>
+</html>
diff --git a/docs/plugins/jspsych-survey-likert.md b/docs/plugins/jspsych-survey-likert.md
index 07adb516..f6aa0537 100644
--- a/docs/plugins/jspsych-survey-likert.md
+++ b/docs/plugins/jspsych-survey-likert.md
@@ -27,44 +27,60 @@ question_order | array | An array with the order of questions. For example `[2,0
 
 ## Examples
 
-#### Basic example
+???+ example "Single Question"
+    === "Code"
+        ```javascript
+        var trial = {
+          type: 'survey-likert',
+          questions: [
+            {
+              prompt: "I like vegetables.", 
+              labels: [
+                "Strongly Disagree", 
+                "Disagree", 
+                "Neutral", 
+                "Agree", 
+                "Strongly Agree"
+              ]
+            }
+          ]
+        };
+        ```
 
-```javascript
-var scale_1 = [
-  "Strongly Disagree", 
-  "Disagree", 
-  "Neutral", 
-  "Agree", 
-  "Strongly Agree"
-];
+    === "Demo"
+        <div style="text-align:center;">
+          <iframe src="../demos/jspsych-survey-likert-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+        </div>
 
-var likert_page = {
-  type: 'survey-likert',
-  questions: [
-    {prompt: "I like vegetables.", labels: scale_1}
-  ]
-};
-```
+    <a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-survey-likert-demo1.html">Open demo in new tab</a>
 
-#### Multiple questions in a random order
+???+ example "Multiple questions in a random order"
+    === "Code"
+        ```javascript
+        var likert_scale = [
+          "Strongly Disagree", 
+          "Disagree", 
+          "Neutral", 
+          "Agree", 
+          "Strongly Agree"
+        ];
 
-```javascript
-var scale_1 = [
-  "Strongly Disagree", 
-  "Disagree", 
-  "Neutral", 
-  "Agree", 
-  "Strongly Agree"
-];
+        var trial = {
+          type: 'survey-likert',
+          questions: [
+            {prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
+            {prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},
+            {prompt: "I like meat.", name: 'Meat', labels: likert_scale},
+          ],
+          randomize_question_order: true
+        };
+        ```
 
-var likert_page = {
-  type: 'survey-likert',
-  questions: [
-    {prompt: "I like vegetables.", name: 'Vegetables', labels: scale_1},
-    {prompt: "I like fruit.", name: 'Fruit', labels: scale_1},
-    {prompt: "I like meat.", name: 'Meat', labels: scale_1},
-    {prompt: "I like dairy.", name: 'Dairy', labels: scale_1}
-  ],
-  randomize_question_order: true
-};
-```
+    === "Demo"
+        <div style="text-align:center;">
+          <iframe src="../demos/jspsych-survey-likert-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+        </div>
+
+    <a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-survey-likert-demo2.html">Open demo in new tab</a>
+
+    
