diff --git a/docs/demos/img/iat_old_face.jpg b/docs/demos/img/iat_old_face.jpg
new file mode 100644
index 00000000..3930e061
Binary files /dev/null and b/docs/demos/img/iat_old_face.jpg differ
diff --git a/docs/demos/jspsych-call-function-demo2.html b/docs/demos/jspsych-call-function-demo2.html
index 2955e02d..89b586e2 100644
--- a/docs/demos/jspsych-call-function-demo2.html
+++ b/docs/demos/jspsych-call-function-demo2.html
@@ -3,7 +3,7 @@
 <head>
   <script src="https://unpkg.com/jspsych@7.0.0"></script>
   <script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
-  <script src="https://unpkg.com/@jspsych/plugin-plugin-html-button-response@1.0.0"></script>
+  <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
   <link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
   <style>
       .jspsych-btn {margin-bottom: 10px;}
diff --git a/docs/demos/jspsych-iat-html-demo1.html b/docs/demos/jspsych-iat-html-demo1.html
index e4da132f..a384f468 100644
--- a/docs/demos/jspsych-iat-html-demo1.html
+++ b/docs/demos/jspsych-iat-html-demo1.html
@@ -33,7 +33,7 @@
   
   var trial = {
     type: jsPsychIatHtml,
-    stimulus: 'Golf',
+    stimulus: 'Joyous',
     stim_key_association: 'left',
     html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
     bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
@@ -42,8 +42,8 @@
     trial_duration: 3000, //Only if display_feedback is false
     left_category_key: 'e',
     right_category_key: 'i',
-    left_category_label: ['OLD'],
-    right_category_label: ['YOUNG'],
+    left_category_label: ['OLD', 'GOOD'],
+    right_category_label: ['YOUNG', 'BAD'],
     response_ends_trial: true
   }
 
diff --git a/docs/demos/jspsych-iat-image-demo1.html b/docs/demos/jspsych-iat-image-demo1.html
index 25b70766..0b763085 100644
--- a/docs/demos/jspsych-iat-image-demo1.html
+++ b/docs/demos/jspsych-iat-image-demo1.html
@@ -16,7 +16,7 @@
   var jsPsych = initJsPsych();
 
   var preload_trial = {
-    type: jsPsychPreloadeload,
+    type: jsPsychPreload,
     auto_preload: true
   }
 
@@ -40,7 +40,7 @@
   
   var trial = {
     type: jsPsychIatImage,
-    stimulus: 'img/blue.png',
+    stimulus: 'img/iat_old_face.jpg',
     stim_key_association: 'left',
     html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
     bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
@@ -49,8 +49,8 @@
     trial_duration: 3000, //Only if display_feedback is false
     left_category_key: 'e',
     right_category_key: 'i',
-    left_category_label: ['OLD'],
-    right_category_label: ['YOUNG'],
+    left_category_label: ['OLD', 'GOOD'],
+    right_category_label: ['YOUNG', 'BAD'],
     response_ends_trial: true
   }
 
diff --git a/docs/demos/jspsych-instructions-demo-2.html b/docs/demos/jspsych-instructions-demo-2.html
index 2a5d0303..9f80e810 100644
--- a/docs/demos/jspsych-instructions-demo-2.html
+++ b/docs/demos/jspsych-instructions-demo-2.html
@@ -17,7 +17,7 @@
 
   var preload_trial = {
     type: jsPsychPreload,
-    auto_preload: true
+    images: ['img/con2.png']
   }
 
   var start = {
diff --git a/docs/demos/jspsych-reconstruction-demo1.html b/docs/demos/jspsych-reconstruction-demo1.html
index ded6f813..c8707786 100644
--- a/docs/demos/jspsych-reconstruction-demo1.html
+++ b/docs/demos/jspsych-reconstruction-demo1.html
@@ -42,7 +42,7 @@
   }
 
   var match_item = {
-    type: jsPsychHtmKeyboardResponse,
+    type: jsPsychHtmlKeyboardResponse,
     stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
       '<div style="display: block; position: absolute; top: '+(150 - 210/2)+'px; left:'+(150 - 210/2)+'px; background-color: #000000; '+
       'width: 210px; height: 210px;"></div></div>',
diff --git a/docs/demos/jspsych-survey-likert-demo2.html b/docs/demos/jspsych-survey-likert-demo2.html
index 7b9fb0d0..37c401f5 100644
--- a/docs/demos/jspsych-survey-likert-demo2.html
+++ b/docs/demos/jspsych-survey-likert-demo2.html
@@ -45,7 +45,7 @@
       ];
 
       var trial = {
-        type: jsPsychSurveyLIkert,
+        type: jsPsychSurveyLikert,
         questions: [
           {prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
           {prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},
diff --git a/docs/demos/jspsych-visual-search-circle-demo2.html b/docs/demos/jspsych-visual-search-circle-demo2.html
index 9ee8123e..3900a95e 100644
--- a/docs/demos/jspsych-visual-search-circle-demo2.html
+++ b/docs/demos/jspsych-visual-search-circle-demo2.html
@@ -51,8 +51,7 @@
 
       var trial = {
         type: jsPsychVisualSearchCircle,
-        target: 'img/elephant.png',
-        foil: ['img/lion.png', 'img/monkey.png'],
+        stimuli: ['img/elephant.png', 'img/lion.png', 'img/monkey.png'],
         fixation_image: 'img/fixation.gif',
         target_present_key: 'e',
         target_absent_key: 'n',
diff --git a/docs/demos/sound/hammer.mp3 b/docs/demos/sound/hammer.mp3
new file mode 100644
index 00000000..bd6c8730
Binary files /dev/null and b/docs/demos/sound/hammer.mp3 differ
diff --git a/docs/demos/sound/sound.mp3 b/docs/demos/sound/sound.mp3
new file mode 100644
index 00000000..a58f850c
Binary files /dev/null and b/docs/demos/sound/sound.mp3 differ
diff --git a/docs/demos/sound/speech_blue.mp3 b/docs/demos/sound/speech_blue.mp3
new file mode 100644
index 00000000..8ea9f0a4
Binary files /dev/null and b/docs/demos/sound/speech_blue.mp3 differ
diff --git a/docs/demos/sound/speech_green.mp3 b/docs/demos/sound/speech_green.mp3
new file mode 100644
index 00000000..aa08b80a
Binary files /dev/null and b/docs/demos/sound/speech_green.mp3 differ
diff --git a/docs/demos/sound/speech_joke.mp3 b/docs/demos/sound/speech_joke.mp3
new file mode 100644
index 00000000..ddd17faa
Binary files /dev/null and b/docs/demos/sound/speech_joke.mp3 differ
diff --git a/docs/demos/sound/speech_red.mp3 b/docs/demos/sound/speech_red.mp3
new file mode 100644
index 00000000..d9e5989a
Binary files /dev/null and b/docs/demos/sound/speech_red.mp3 differ
diff --git a/docs/demos/sound/tone.mp3 b/docs/demos/sound/tone.mp3
new file mode 100644
index 00000000..02034e41
Binary files /dev/null and b/docs/demos/sound/tone.mp3 differ
diff --git a/docs/plugins/animation.md b/docs/plugins/animation.md
index 8b4f837d..3cdea870 100644
--- a/docs/plugins/animation.md
+++ b/docs/plugins/animation.md
@@ -43,8 +43,8 @@ response | array | An array, where each element is an object representing a resp
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-animation-demo.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-animation-demo.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
         
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-animation-demo.html">Open demo in new tab</a>
\ No newline at end of file
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-animation-demo.html">Open demo in new tab</a>
\ No newline at end of file
diff --git a/docs/plugins/audio-button-response.md b/docs/plugins/audio-button-response.md
index 141e101a..21da7f95 100644
--- a/docs/plugins/audio-button-response.md
+++ b/docs/plugins/audio-button-response.md
@@ -49,10 +49,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
 	=== "Demo"
 		<div style="text-align:center;">
-			<iframe src="/demos/jspsych-audio-button-response-demo-1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+			<iframe src="../../demos/jspsych-audio-button-response-demo-1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
 		</div>
 
-	<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-audio-button-response-demo-1.html">Open demo in new tab</a>
+	<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-audio-button-response-demo-1.html">Open demo in new tab</a>
 
 ???+ example "Using custom button HTML to use images as buttons"
 	=== "Code"
@@ -68,7 +68,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
 	=== "Demo"
 		<div style="text-align:center;">
-			<iframe src="/demos/jspsych-audio-button-response-demo-2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+			<iframe src="../../demos/jspsych-audio-button-response-demo-2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
 		</div>
 
-	<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-audio-button-response-demo-2.html">Open demo in new tab</a>
\ No newline at end of file
+	<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-audio-button-response-demo-2.html">Open demo in new tab</a>
\ No newline at end of file
diff --git a/docs/plugins/audio-keyboard-response.md b/docs/plugins/audio-keyboard-response.md
index e462921d..b01f0ce9 100644
--- a/docs/plugins/audio-keyboard-response.md
+++ b/docs/plugins/audio-keyboard-response.md
@@ -48,10 +48,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 	
 	=== "Demo"
 		<div style="text-align:center;">
-			<iframe src="/demos/jspsych-audio-keyboard-response-demo-1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+			<iframe src="../../demos/jspsych-audio-keyboard-response-demo-1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
 		</div>
 
-	<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-audio-keyboard-response-demo-1.html">Open demo in new tab</a>
+	<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-audio-keyboard-response-demo-1.html">Open demo in new tab</a>
 
 
 ???+ example "Play a sound with no user response; trial ends after sound plays"
@@ -67,7 +67,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
 	=== "Demo"
 		<div style="text-align:center;">
-			<iframe src="/demos/jspsych-audio-keyboard-response-demo-2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+			<iframe src="../../demos/jspsych-audio-keyboard-response-demo-2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
 		</div>
 
-	<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-audio-keyboard-response-demo-2.html">Open demo in new tab</a>
+	<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-audio-keyboard-response-demo-2.html">Open demo in new tab</a>
diff --git a/docs/plugins/audio-slider-response.md b/docs/plugins/audio-slider-response.md
index b90216e5..57349975 100644
--- a/docs/plugins/audio-slider-response.md
+++ b/docs/plugins/audio-slider-response.md
@@ -54,10 +54,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
 	=== "Demo"
 		<div style="text-align:center;">
-			<iframe src="/demos/jspsych-audio-slider-response-demo-1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+			<iframe src="../../demos/jspsych-audio-slider-response-demo-1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
 		</div>
 
-	<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-audio-slider-response-demo-1.html">Open demo in new tab</a>
+	<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-audio-slider-response-demo-1.html">Open demo in new tab</a>
 
 ???+ example "No response allowed until audio finishes; subject must interact with slider to continue"
 	=== "Code"
@@ -74,7 +74,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
 	=== "Demo"
 		<div style="text-align:center;">
-			<iframe src="/demos/jspsych-audio-slider-response-demo-2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+			<iframe src="../../demos/jspsych-audio-slider-response-demo-2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
 		</div>
 
-	<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-audio-slider-response-demo-2.html">Open demo in new tab</a>
\ No newline at end of file
+	<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-audio-slider-response-demo-2.html">Open demo in new tab</a>
\ No newline at end of file
diff --git a/docs/plugins/call-function.md b/docs/plugins/call-function.md
index 3a8fa1a3..96c43df9 100644
--- a/docs/plugins/call-function.md
+++ b/docs/plugins/call-function.md
@@ -39,10 +39,10 @@ value | any | The return value of the called function.
 
 	=== "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-call-function-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-call-function-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-call-function-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-call-function-demo1.html">Open demo in new tab</a>
     
 
 ???+ example "Using an anonymous function to pass variables"
@@ -63,10 +63,10 @@ value | any | The return value of the called function.
 
 	=== "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-call-function-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-call-function-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-call-function-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-call-function-demo2.html">Open demo in new tab</a>
 
 ???+ example "Async function call: wait for data to be saved to a server"
 	=== "Code"
@@ -115,9 +115,9 @@ value | any | The return value of the called function.
   		```
 	=== "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-call-function-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-call-function-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-call-function-demo3.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-call-function-demo3.html">Open demo in new tab</a>
 
 
diff --git a/docs/plugins/canvas-button-response.md b/docs/plugins/canvas-button-response.md
index 58214449..00d5d837 100644
--- a/docs/plugins/canvas-button-response.md
+++ b/docs/plugins/canvas-button-response.md
@@ -70,10 +70,10 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-canvas-button-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-canvas-button-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-canvas-button-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-canvas-button-response-demo1.html">Open demo in new tab</a>
 
 ???+ example "Using an anonymous stimulus function"
     === "Code"
@@ -106,10 +106,10 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-canvas-button-response-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-canvas-button-response-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-canvas-button-response-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-canvas-button-response-demo2.html">Open demo in new tab</a>
 
 
 ???+ example "Using the canvas stimulus function with timeline variables, and recording the correctness of responses"
@@ -154,7 +154,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-canvas-button-response-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-canvas-button-response-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-canvas-button-response-demo3.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-canvas-button-response-demo3.html">Open demo in new tab</a>
diff --git a/docs/plugins/canvas-keyboard-response.md b/docs/plugins/canvas-keyboard-response.md
index db59a0bc..3e3291c6 100644
--- a/docs/plugins/canvas-keyboard-response.md
+++ b/docs/plugins/canvas-keyboard-response.md
@@ -50,10 +50,10 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-canvas-keyboard-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-canvas-keyboard-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-canvas-keyboard-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-canvas-keyboard-response-demo1.html">Open demo in new tab</a>
     
 ???+ example "Draw circle, no response allowed"
     === "Code"
@@ -78,7 +78,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
             
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-canvas-keyboard-response-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-canvas-keyboard-response-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-canvas-keyboard-response-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-canvas-keyboard-response-demo2.html">Open demo in new tab</a>
diff --git a/docs/plugins/canvas-slider-response.md b/docs/plugins/canvas-slider-response.md
index ca105154..c309c3e4 100644
--- a/docs/plugins/canvas-slider-response.md
+++ b/docs/plugins/canvas-slider-response.md
@@ -61,10 +61,10 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-canvas-slider-response-demo1.html" width="90%;" height="550px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-canvas-slider-response-demo1.html" width="90%;" height="550px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-canvas-slider-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-canvas-slider-response-demo1.html">Open demo in new tab</a>
 
 
 ???+ example "Draw two squares with additional parameters"
@@ -99,9 +99,9 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-canvas-slider-response-demo2.html" width="90%;" height="550px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-canvas-slider-response-demo2.html" width="90%;" height="550px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-canvas-slider-response-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-canvas-slider-response-demo2.html">Open demo in new tab</a>
 
 
diff --git a/docs/plugins/categorize-animation.md b/docs/plugins/categorize-animation.md
index c9a56c40..dbdd496e 100644
--- a/docs/plugins/categorize-animation.md
+++ b/docs/plugins/categorize-animation.md
@@ -52,10 +52,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-categorize-animation-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-categorize-animation-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-categorize-animation-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-categorize-animation-demo1.html">Open demo in new tab</a>
 
 ???+ example "Giving feedback with `%ANS%` string"
     === "Code"
@@ -80,7 +80,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-categorize-animation-demo2.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-categorize-animation-demo2.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-categorize-animation-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-categorize-animation-demo2.html">Open demo in new tab</a>
diff --git a/docs/plugins/categorize-html.md b/docs/plugins/categorize-html.md
index fcb91640..e5870705 100644
--- a/docs/plugins/categorize-html.md
+++ b/docs/plugins/categorize-html.md
@@ -52,7 +52,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-categorize-html-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-categorize-html-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-categorize-html-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-categorize-html-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/categorize-image.md b/docs/plugins/categorize-image.md
index b0582db3..b49b62d0 100644
--- a/docs/plugins/categorize-image.md
+++ b/docs/plugins/categorize-image.md
@@ -53,7 +53,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-categorize-image-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-categorize-image-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-categorize-image-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-categorize-image-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/cloze.md b/docs/plugins/cloze.md
index 860b59c5..50610fe9 100644
--- a/docs/plugins/cloze.md
+++ b/docs/plugins/cloze.md
@@ -33,10 +33,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-cloze-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-cloze-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-cloze-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-cloze-demo1.html">Open demo in new tab</a>
 
 
 ???+ example "More elaborate example (with check against correct solution, custom error handling and modified button text)"
@@ -52,7 +52,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-cloze-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-cloze-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-cloze-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-cloze-demo2.html">Open demo in new tab</a>
diff --git a/docs/plugins/external-html.md b/docs/plugins/external-html.md
index 5f58b715..8dd6af5b 100644
--- a/docs/plugins/external-html.md
+++ b/docs/plugins/external-html.md
@@ -70,7 +70,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-external-html-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-external-html-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-external-html-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-external-html-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/free-sort.md b/docs/plugins/free-sort.md
index 998ff6a2..b3ae552f 100644
--- a/docs/plugins/free-sort.md
+++ b/docs/plugins/free-sort.md
@@ -55,8 +55,8 @@ rt | numeric | The response time in milliseconds for the participant to finish a
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-free-sort-demo1.html" width="90%;" height="700px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-free-sort-demo1.html" width="90%;" height="700px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-free-sort-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-free-sort-demo1.html">Open demo in new tab</a>
 
diff --git a/docs/plugins/fullscreen.md b/docs/plugins/fullscreen.md
index 667ecf5d..352ea3b9 100644
--- a/docs/plugins/fullscreen.md
+++ b/docs/plugins/fullscreen.md
@@ -56,7 +56,7 @@ success | boolean | true if the browser supports fullscreen mode (i.e., is not S
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-fullscreen-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-fullscreen-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-fullscreen-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-fullscreen-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/html-button-response.md b/docs/plugins/html-button-response.md
index 1de80b16..f5fe9292 100644
--- a/docs/plugins/html-button-response.md
+++ b/docs/plugins/html-button-response.md
@@ -34,18 +34,19 @@ stimulus | string | The HTML content that was displayed on the screen.
     === "Code"
 
         ```javascript
-		var trial = {
-			type: jsPsychHtmlButtonResponse,
-			stimulus: '<p>Running</p>',
-			choices: ['Healthy', 'Unhealthy'],
-			prompt: "<p>Is this activity healthy or unhealthy?</p>"
-		};
-		```
-	=== "Demo"
+        var trial = {
+          type: jsPsychHtmlButtonResponse,
+          stimulus: '<p>Running</p>',
+          choices: ['Healthy', 'Unhealthy'],
+          prompt: "<p>Is this activity healthy or unhealthy?</p>"
+        };
+        ```
+        
+		=== "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-html-button-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-html-button-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-html-button-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-button-response-demo1.html">Open demo in new tab</a>
 
 
diff --git a/docs/plugins/html-keyboard-response.md b/docs/plugins/html-keyboard-response.md
index cda5be1c..b24439ed 100644
--- a/docs/plugins/html-keyboard-response.md
+++ b/docs/plugins/html-keyboard-response.md
@@ -40,10 +40,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 		```
 	=== "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-html-keyboard-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-html-keyboard-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-html-keyboard-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-keyboard-response-demo1.html">Open demo in new tab</a>
 
 ???+ example "Showing a 1 second fixation cross; no response allowed"
     === "Code"
@@ -57,7 +57,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
 	=== "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-html-keyboard-response-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-html-keyboard-response-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-html-keyboard-response-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-keyboard-response-demo2.html">Open demo in new tab</a>
diff --git a/docs/plugins/html-slider-response.md b/docs/plugins/html-slider-response.md
index f8d0a71e..45efe9a3 100644
--- a/docs/plugins/html-slider-response.md
+++ b/docs/plugins/html-slider-response.md
@@ -50,7 +50,7 @@ slider_start | numeric | The starting value of the slider.
 
 	=== "Demo"
         <div style="text-align:center;">
-            <iframe src="../plugins/demos/jspsych-html-slider-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-html-slider-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-html-slider-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-slider-response-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/iat-html.md b/docs/plugins/iat-html.md
index 7bff6641..96b1ce99 100644
--- a/docs/plugins/iat-html.md
+++ b/docs/plugins/iat-html.md
@@ -40,7 +40,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```javascript
         var trial = {
             type: jsPsychIatHtml,
-            stimulus: 'Golf',
+            stimulus: 'Joyous',
             stim_key_association: 'left',
             html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
             bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
@@ -49,14 +49,14 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
             trial_duration: 3000, //Only if display_feedback is false
             left_category_key: 'e',
             right_category_key: 'i',
-            left_category_label: ['OLD'],
-            right_category_label: ['YOUNG'],
+            left_category_label: ['OLD','GOOD'],
+            right_category_label: ['YOUNG','BAD'],
             response_ends_trial: true
         }
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-iat-html-demo1.html" width="90%;" height="650px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-iat-html-demo1.html" width="90%;" height="650px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-iat-html-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-iat-html-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/iat-image.md b/docs/plugins/iat-image.md
index 5e35f5a4..c32d5fdb 100644
--- a/docs/plugins/iat-image.md
+++ b/docs/plugins/iat-image.md
@@ -40,7 +40,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```javascript
         var trial_block = {
           type: jsPsychIatImage,
-          stimulus: 'img/blue.png',
+          stimulus: 'img/iat_old_face.jpg',
           stim_key_association: 'left',
           html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
           bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
@@ -49,14 +49,14 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
           trial_duration: 3000, //Only if display_feedback is false
           left_category_key: 'e',
           right_category_key: 'i',
-          left_category_label: ['OLD'],
-          right_category_label: ['YOUNG'],
+          left_category_label: ['OLD','GOOD'],
+          right_category_label: ['YOUNG','BAD'],
           response_ends_trial: true
         }
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-iat-image-demo1.html" width="90%;" height="650px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-iat-image-demo1.html" width="90%;" height="650px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-iat-image-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-iat-image-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/image-button-response.md b/docs/plugins/image-button-response.md
index 95bf06bf..9898c7d8 100644
--- a/docs/plugins/image-button-response.md
+++ b/docs/plugins/image-button-response.md
@@ -50,7 +50,7 @@ stimulus | string | The path of the image that was displayed.
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-image-button-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-image-button-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-image-button-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-image-button-response-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/image-keyboard-response.md b/docs/plugins/image-keyboard-response.md
index 4775698f..b435bfba 100644
--- a/docs/plugins/image-keyboard-response.md
+++ b/docs/plugins/image-keyboard-response.md
@@ -35,7 +35,6 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
 ???+ example "Displaying trial until subject gives a response"
     === "Code"
-
         ```javascript
         var trial = {
             type: jsPsychImageKeyboardResponse,
@@ -46,14 +45,13 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-image-keyboard-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-image-keyboard-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-image-keyboard-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-image-keyboard-response-demo1.html">Open demo in new tab</a>
 
 ???+ example "Displaying image for a fixed duration; no response allowed"
     === "Code"
-
         ```javascript
         var trial = {
             type: jsPsychImageKeyboardResponse,
@@ -65,7 +63,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-image-keyboard-response-demo2.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-image-keyboard-response-demo2.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-image-keyboard-response-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-image-keyboard-response-demo2.html">Open demo in new tab</a>
diff --git a/docs/plugins/image-slider-response.md b/docs/plugins/image-slider-response.md
index 9ac4a229..c4aabefe 100644
--- a/docs/plugins/image-slider-response.md
+++ b/docs/plugins/image-slider-response.md
@@ -55,7 +55,7 @@ slider_start | numeric | The starting value of the slider.
         
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-image-slider-response-demo1.html" width="90%;" height="850px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-image-slider-response-demo1.html" width="90%;" height="850px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-image-slider-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-image-slider-response-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/instructions.md b/docs/plugins/instructions.md
index 66ced9da..76caf208 100644
--- a/docs/plugins/instructions.md
+++ b/docs/plugins/instructions.md
@@ -49,10 +49,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-instructions-demo-1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-instructions-demo-1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-instructions-demo-1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-instructions-demo-1.html">Open demo in new tab</a>
 
 #### Including images
 
@@ -74,10 +74,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-instructions-demo-2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-instructions-demo-2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-instructions-demo-2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-instructions-demo-2.html">Open demo in new tab</a>
 
 #### Changing Button Text
 
@@ -100,7 +100,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-instructions-demo-3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-instructions-demo-3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-instructions-demo-3.html">Open demo in new tab</a>
\ No newline at end of file
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-instructions-demo-3.html">Open demo in new tab</a>
\ No newline at end of file
diff --git a/docs/plugins/maxdiff.md b/docs/plugins/maxdiff.md
index d34fcff9..8cf8b1b8 100644
--- a/docs/plugins/maxdiff.md
+++ b/docs/plugins/maxdiff.md
@@ -31,7 +31,6 @@ response | object | An object with two keys, `left` and `right`, containing the
 
 ???+ example "Basic example"
     === "Code"
-
         ```javascript
         var maxdiff_page = {
             type: jsPsychMaxdiff,
@@ -42,8 +41,8 @@ response | object | An object with two keys, `left` and `right`, containing the
         ```    
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-maxdiff-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-maxdiff-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-maxdiff-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-maxdiff-demo1.html">Open demo in new tab</a>
 
diff --git a/docs/plugins/preload.md b/docs/plugins/preload.md
index e44e607f..9b89cc9c 100644
--- a/docs/plugins/preload.md
+++ b/docs/plugins/preload.md
@@ -72,10 +72,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-preload-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-preload-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-preload-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-preload-demo1.html">Open demo in new tab</a>
 
 ???+ example "Manually preloading an image"
     === "Code"
@@ -99,10 +99,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-preload-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-preload-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-preload-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-preload-demo2.html">Open demo in new tab</a>
 
 ???+ example "Loading files in batches"
     === "Code"
@@ -170,10 +170,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-preload-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-preload-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-preload-demo3.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-preload-demo3.html">Open demo in new tab</a>
 
 ???+ example "Showing a detailed error message for debugging loading issues"
     === "Code"
@@ -188,10 +188,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-preload-demo4.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-preload-demo4.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-preload-demo4.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-preload-demo4.html">Open demo in new tab</a>
 
 
 For more examples, see the `jspsych-preload.html` file in the `/examples` folder of the release and the [Media Preloading](../overview/media-preloading) documentation page.
\ No newline at end of file
diff --git a/docs/plugins/reconstruction.md b/docs/plugins/reconstruction.md
index 89ce12dc..4f685bb9 100644
--- a/docs/plugins/reconstruction.md
+++ b/docs/plugins/reconstruction.md
@@ -61,7 +61,7 @@ rt | numeric | The length of time, in milliseconds, that the trial lasted.
 
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-reconstruction-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-reconstruction-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-reconstruction-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-reconstruction-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/resize.md b/docs/plugins/resize.md
index 931732ce..1d9d61ea 100644
--- a/docs/plugins/resize.md
+++ b/docs/plugins/resize.md
@@ -28,7 +28,6 @@ scale_factor | numeric | Scaling factor that will be applied to the div containi
 
 ???+ example "Measuring a credit card and resizing the display to have 150 pixels equal an inch."
     === "Code"
-
         ```javascript
         var inputs = {
             type: jsPsychResize,
@@ -40,7 +39,7 @@ scale_factor | numeric | Scaling factor that will be applied to the div containi
         ```
     === "Demo"
         <div style="text-align:center;">
-            <iframe src="/demos/jspsych-resize-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+            <iframe src="../../demos/jspsych-resize-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-resize-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-resize-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/same-different-html.md b/docs/plugins/same-different-html.md
index 9c88e430..a2e150d8 100644
--- a/docs/plugins/same-different-html.md
+++ b/docs/plugins/same-different-html.md
@@ -60,7 +60,7 @@ Additionally, if `first_stim_duration` is  null, then the following data is also
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-same-different-html-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-same-different-html-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-same-different-html-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-same-different-html-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/same-different-image.md b/docs/plugins/same-different-image.md
index 887e7e5f..a2f4d0c9 100644
--- a/docs/plugins/same-different-image.md
+++ b/docs/plugins/same-different-image.md
@@ -60,7 +60,7 @@ Additionally, if `first_stim_duration` is  null, then the following data is also
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-same-different-image-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-same-different-image-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-same-different-image-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-same-different-image-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/serial-reaction-time-mouse.md b/docs/plugins/serial-reaction-time-mouse.md
index 0b2b4a6a..d9677b4d 100644
--- a/docs/plugins/serial-reaction-time-mouse.md
+++ b/docs/plugins/serial-reaction-time-mouse.md
@@ -65,10 +65,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-serial-reaction-time-mouse-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-serial-reaction-time-mouse-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-serial-reaction-time-mouse-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-serial-reaction-time-mouse-demo1.html">Open demo in new tab</a>
 
 ???+ example "A 2x2 grid with extra space and different colors"
     === "Code"
@@ -108,7 +108,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-serial-reaction-time-mouse-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-serial-reaction-time-mouse-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-serial-reaction-time-mouse-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-serial-reaction-time-mouse-demo2.html">Open demo in new tab</a>
diff --git a/docs/plugins/serial-reaction-time.md b/docs/plugins/serial-reaction-time.md
index 190c79b1..bf375af0 100644
--- a/docs/plugins/serial-reaction-time.md
+++ b/docs/plugins/serial-reaction-time.md
@@ -81,10 +81,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-serial-reaction-time-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-serial-reaction-time-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-serial-reaction-time-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-serial-reaction-time-demo1.html">Open demo in new tab</a>
 
 ???+ example "2x2 grid with feedback"
     === "Code"
@@ -142,7 +142,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-serial-reaction-time-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-serial-reaction-time-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-serial-reaction-time-demo2.html">Open demo in new tab</a>
\ No newline at end of file
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-serial-reaction-time-demo2.html">Open demo in new tab</a>
\ No newline at end of file
diff --git a/docs/plugins/survey-html-form.md b/docs/plugins/survey-html-form.md
index 57d2d3b5..a35f4343 100644
--- a/docs/plugins/survey-html-form.md
+++ b/docs/plugins/survey-html-form.md
@@ -39,10 +39,10 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-html-form-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-html-form-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-html-form-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-html-form-demo1.html">Open demo in new tab</a>
 
 ???+ example "Using the autofocus parameter"
     === "Code"
@@ -58,7 +58,7 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-html-form-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-html-form-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-html-form-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-html-form-demo2.html">Open demo in new tab</a>
diff --git a/docs/plugins/survey-likert.md b/docs/plugins/survey-likert.md
index 1276e500..055de72f 100644
--- a/docs/plugins/survey-likert.md
+++ b/docs/plugins/survey-likert.md
@@ -50,10 +50,10 @@ question_order | array | An array with the order of questions. For example `[2,0
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-likert-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-likert-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-likert-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-likert-demo1.html">Open demo in new tab</a>
 
 ???+ example "Multiple questions in a random order"
     === "Code"
@@ -80,9 +80,9 @@ question_order | array | An array with the order of questions. For example `[2,0
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-likert-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <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>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-likert-demo2.html">Open demo in new tab</a>
 
     
diff --git a/docs/plugins/survey-multi-choice.md b/docs/plugins/survey-multi-choice.md
index 54427b2f..a960f6f5 100644
--- a/docs/plugins/survey-multi-choice.md
+++ b/docs/plugins/survey-multi-choice.md
@@ -51,10 +51,10 @@ question_order | array | An array with the order of questions. For example `[2,0
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-multi-choice-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-multi-choice-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-multi-choice-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-multi-choice-demo1.html">Open demo in new tab</a>
 
 ???+ example "Horizontal Question Alignment"
     === "Code"
@@ -83,7 +83,7 @@ question_order | array | An array with the order of questions. For example `[2,0
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-multi-choice-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-multi-choice-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-multi-choice-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-multi-choice-demo2.html">Open demo in new tab</a>
diff --git a/docs/plugins/survey-multi-select.md b/docs/plugins/survey-multi-select.md
index 9a8f9c5e..94e687e6 100644
--- a/docs/plugins/survey-multi-select.md
+++ b/docs/plugins/survey-multi-select.md
@@ -55,7 +55,7 @@ question_order | array | An array with the order of questions. For example `[2,0
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-multi-select-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-multi-select-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-multi-select-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-multi-select-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/survey-text.md b/docs/plugins/survey-text.md
index 5cdaf468..9abe5065 100644
--- a/docs/plugins/survey-text.md
+++ b/docs/plugins/survey-text.md
@@ -40,10 +40,10 @@ question_order | array | An array with the order of questions. For example `[2,0
     
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-text-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-text-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-text-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-text-demo1.html">Open demo in new tab</a>
 
 ???+ example "Multiple questions, with an optional placeholder and a required question"
     === "Code"
@@ -60,10 +60,10 @@ question_order | array | An array with the order of questions. For example `[2,0
     
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-text-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-text-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-text-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-text-demo2.html">Open demo in new tab</a>
 
 ???+ example "Naming questions to improve readability of the stored data"
     === "Code"
@@ -80,10 +80,10 @@ question_order | array | An array with the order of questions. For example `[2,0
     
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-text-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-text-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-text-demo3.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-text-demo3.html">Open demo in new tab</a>
 
     
 ???+ example "Using the preamble and a longer textbox response"
@@ -103,8 +103,8 @@ question_order | array | An array with the order of questions. For example `[2,0
     
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-survey-text-demo4.html" width="90%;" height="800px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-survey-text-demo4.html" width="90%;" height="800px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-survey-text-demo4.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-survey-text-demo4.html">Open demo in new tab</a>
 
diff --git a/docs/plugins/video-button-response.md b/docs/plugins/video-button-response.md
index bf010dfa..037e6067 100644
--- a/docs/plugins/video-button-response.md
+++ b/docs/plugins/video-button-response.md
@@ -60,7 +60,7 @@ stimulus | array | The `stimulus` array. This will be encoded as a JSON string w
     
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-video-button-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-video-button-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-video-button-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-video-button-response-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/video-keyboard-response.md b/docs/plugins/video-keyboard-response.md
index 67e309ab..292e07bf 100644
--- a/docs/plugins/video-keyboard-response.md
+++ b/docs/plugins/video-keyboard-response.md
@@ -55,7 +55,7 @@ stimulus | array | The `stimulus` array. This will be encoded as a JSON string w
     
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-video-keyboard-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-video-keyboard-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-video-keyboard-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-video-keyboard-response-demo1.html">Open demo in new tab</a>
diff --git a/docs/plugins/video-slider-response.md b/docs/plugins/video-slider-response.md
index 3345553b..a68edf43 100644
--- a/docs/plugins/video-slider-response.md
+++ b/docs/plugins/video-slider-response.md
@@ -65,8 +65,8 @@ start | numeric | The start time of the video clip.
     
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-video-slider-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-video-slider-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-video-slider-response-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-video-slider-response-demo1.html">Open demo in new tab</a>
 
diff --git a/docs/plugins/virtual-chinrest.md b/docs/plugins/virtual-chinrest.md
index aae94155..3a0d4c83 100644
--- a/docs/plugins/virtual-chinrest.md
+++ b/docs/plugins/virtual-chinrest.md
@@ -65,7 +65,6 @@ _Note: The deg data are **only** returned if viewing distance is estimated with
 
 ???+ example "Measure distance to screen and pixel ratio; no resizing"
     === "Code"
-
         ```javascript
         var trial = {
             type: jsPsychVirtualChinrest,
@@ -74,13 +73,12 @@ _Note: The deg data are **only** returned if viewing distance is estimated with
         };
         ```
     === "Demo"
-        This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo1.html">open the demo in a new tab</a>
+        This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-virtual-chinrest-demo1.html">open the demo in a new tab</a>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-virtual-chinrest-demo1.html">Open demo in new tab</a>
 
 ???+ example "Resizing based on centimeters per pixel"
     === "Code"
-
         ```javascript
         var trial = {
           type: jsPsychVirtualChinrest,
@@ -99,13 +97,12 @@ _Note: The deg data are **only** returned if viewing distance is estimated with
         }
         ```
     === "Demo"
-        This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo2.html">open the demo in a new tab</a>
+        This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-virtual-chinrest-demo2.html">open the demo in a new tab</a>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-virtual-chinrest-demo2.html">Open demo in new tab</a>
 
 ???+ example "Resizing based on degrees of visual angle per pixel"
     === "Code"
-
         ```javascript
         var trial = {
           type: jsPsychVirtualChinrest,
@@ -124,6 +121,6 @@ _Note: The deg data are **only** returned if viewing distance is estimated with
         }
         ```
     === "Demo"
-        This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo3.html">open the demo in a new tab</a>
+        This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-virtual-chinrest-demo3.html">open the demo in a new tab</a>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo3.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-virtual-chinrest-demo3.html">Open demo in new tab</a>
diff --git a/docs/plugins/visual-search-circle.md b/docs/plugins/visual-search-circle.md
index b7b4e3e2..fa8d769b 100644
--- a/docs/plugins/visual-search-circle.md
+++ b/docs/plugins/visual-search-circle.md
@@ -69,10 +69,10 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
     
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-visual-search-circle-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-visual-search-circle-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-visual-search-circle-demo1.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-visual-search-circle-demo1.html">Open demo in new tab</a>
 
 ???+ example "Variety of different distractors"
     === "Code"
@@ -87,8 +87,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
         var trial = {
           type: jsPsychVisualSearchCircle,
-          target: 'img/elephant.png',
-          foil: ['img/lion.png', 'img/monkey.png'],
+          stimuli: ['img/elephant.png', 'img/lion.png', 'img/monkey.png'],
           fixation_image: 'img/fixation.gif',
           target_present_key: 'e',
           target_absent_key: 'n',
@@ -98,7 +97,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 
     === "Demo"
         <div style="text-align:center;">
-          <iframe src="/demos/jspsych-visual-search-circle-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+          <iframe src="../../demos/jspsych-visual-search-circle-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
         </div>
 
-    <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-visual-search-circle-demo2.html">Open demo in new tab</a>
+    <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-visual-search-circle-demo2.html">Open demo in new tab</a>
