update the html demos to be more illustrative

Author: jodeleeuw

docs/demos/jspsych-html-button-response-demo1.html

@@ -32,9 +32,9 @@
 
   var trial = {
     type: jsPsychHtmlButtonResponse,
-    stimulus: '<p>Running</p>',
-    choices: ['Healthy', 'Unhealthy'],
-    prompt: "<p>Is this activity healthy or unhealthy?</p>"
+    stimulus: '<p style="font-size:48px; color:red;">GREEN</p>',
+    choices: ['Red', 'Green', 'Blue'],
+    prompt: "<p>What color is the ink?</p>"
   };
 
   var trial_loop = {

docs/demos/jspsych-html-keyboard-response-demo1.html

@@ -32,10 +32,10 @@
   };
 
   var trial = {
-    type: jsPsychHtmKeyboardResponse,
-    stimulus: '<p>Running</p>',
-    choices: ['e', 'i'],
-    prompt: "<p>Is this activity healthy or unhealthy?</p><p>Press 'e' for healthy and 'i' for unhealthy.</p>"
+    type: jsPsychHtmlKeyboardResponse,
+    stimulus: '<p style="font-size:48px; color:green;">BLUE</p>',
+    choices: ['r', 'g', 'b'],
+    prompt: "<p>Is the ink color (r)ed, (g)reen, or (b)lue?</p>"
   };
 
   var trial_loop = {

docs/demos/jspsych-html-keyboard-response-demo2.html

@@ -32,7 +32,7 @@
   };
 
   var trial = {
-    type: jsPsychHtmKeyboardResponse,
+    type: jsPsychHtmlKeyboardResponse,
     stimulus: '<p style="font-size: 48px;">+</p>',
     choices: jsPsych.NO_KEYS,
     trial_duration: 1000,

docs/demos/jspsych-html-slider-response-demo1.html

@@ -32,11 +32,20 @@
   };
 
   var trial = {
-    type: jsPsychHtmSliderResponse,
-    stimulus: '<p>Running</p>',
+    type: jsPsychHtmlSliderResponse,
+    stimulus: `<div style="width:500px;">
+      <p>How likely is it that team A will win this match?</p>
+      <div style="width:240px; float: left;">
+        <p>TEAM A</p>
+        <p>10 wins, 5 losses, 6 draws</p>
+      </div>
+      <div style="width:240px; float: right;">
+        <p>TEAM B</p>
+        <p>6 wins, 4 losses, 11 draws</p>
+      </div>
+    </div>`,
     require_movement: true,
-    labels: ['healthy', 'unhealthy'],
-    prompt: "<p>How healthy/unhealthy is this activity?</p>"
+    labels: ['100% chance that team A wins', '50% chance that team A wins', '0% chance that team A wins']
   };
 
   var trial_loop = {

docs/plugins/html-button-response.md

@@ -32,16 +32,14 @@ stimulus | string | The HTML content that was displayed on the screen.
 
 ???+ example "Displaying question until subject gives a response"
     === "Code"
-
         ```javascript
         var trial = {
           type: jsPsychHtmlButtonResponse,
-          stimulus: '<p>Running</p>',
-          choices: ['Healthy', 'Unhealthy'],
-          prompt: "<p>Is this activity healthy or unhealthy?</p>"
+          stimulus: '<p style="font-size:48px; color:red;">GREEN</p>',
+          choices: ['Red', 'Green', 'Blue'],
+          prompt: "<p>What color is the ink?</p>"
         };
         ```
-        
 		=== "Demo"
         <div style="text-align:center;">
             <iframe src="../../demos/jspsych-html-button-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>

docs/plugins/html-keyboard-response.md

@@ -33,9 +33,9 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         ```javascript
         var trial = {
             type: jsPsychHtmlKeyboardResponse,
-            stimulus: '<p>Running</p>',
-            choices: ['e', 'i'],
-            prompt: "<p>Is this activity healthy or unhealthy?</p><p>Press 'e' for healthy and 'i' for unhealthy.</p>"
+            stimulus: '<p style="font-size:48px; color:green;">BLUE</p>',
+            choices: ['r', 'g', 'b'],
+            prompt: "<p>Is the ink color (r)ed, (g)reen, or (b)lue?</p>"
         };
 		```
 	=== "Demo"

docs/plugins/html-slider-response.md

@@ -41,10 +41,19 @@ slider_start | numeric | The starting value of the slider.
         ```javascript
         var trial = {
             type: jsPsychHtmlSliderResponse,
-            stimulus: '<p>Running</p>',
+            stimulus: `<div style="width:500px;">
+                <p>How likely is it that team A will win this match?</p>
+                <div style="width:240px; float: left;">
+                    <p>TEAM A</p>
+                    <p>10 wins, 5 losses, 6 draws</p>
+                </div>
+                <div style="width:240px; float: right;">
+                    <p>TEAM B</p>
+                    <p>6 wins, 4 losses, 11 draws</p>
+                </div>
+                </div>`,
             require_movement: true,
-            labels: ['healthy', 'unhealthy'],
-            prompt: "<p>How healthy/unhealthy is this activity?</p>"
+            labels: ['100% chance that team A wins', '50% chance that team A wins', '0% chance that team A wins']
         };
         ```