diff --git a/docs/plugins/demos/jspsych-canvas-keyboard-response-demo1.html b/docs/plugins/demos/jspsych-canvas-keyboard-response-demo1.html
new file mode 100644
index 00000000..d8d9212d
--- /dev/null
+++ b/docs/plugins/demos/jspsych-canvas-keyboard-response-demo1.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/plugins/demos/jspsych-canvas-keyboard-response-demo2.html b/docs/plugins/demos/jspsych-canvas-keyboard-response-demo2.html
new file mode 100644
index 00000000..bd67d37f
--- /dev/null
+++ b/docs/plugins/demos/jspsych-canvas-keyboard-response-demo2.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/plugins/jspsych-canvas-keyboard-response.md b/docs/plugins/jspsych-canvas-keyboard-response.md
index f0347839..09d4265d 100644
--- a/docs/plugins/jspsych-canvas-keyboard-response.md
+++ b/docs/plugins/jspsych-canvas-keyboard-response.md
@@ -29,40 +29,56 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
## Examples
-### Draw rectangle and wait for response
+???+ example "Draw rectangle and wait for response"
+ === "Code"
+ ```javascript
+ function drawRect(c){
+ var ctx = c.getContext('2d');
+ ctx.beginPath();
+ ctx.rect(30, 30, 200, 50);
+ ctx.stroke();
+ }
-```javascript
-function drawRect(c){
- var ctx = c.getContext('2d');
- ctx.beginPath();
- ctx.rect(30, 30, 200, 50);
- ctx.stroke();
-}
+ var trial = {
+ type: 'canvas-keyboard-response',
+ canvas_size: [300, 300],
+ stimulus: drawRect,
+ choices: ['e','i'],
+ prompt: 'Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.
',
+ data: {shape: 'rectangle'}
+ }
+ ```
+ === "Demo"
+
+
+
-var trial = {
- type: 'canvas-keyboard-response',
- stimulus: drawRect,
- choices: ['e','i'],
- prompt: 'Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.
',
- data: {shape: 'rectangle'}
-}
-```
+ Open demo in new tab
+
+???+ example "Draw circle, no response allowed"
+ === "Code"
+ ```javascript
+ function drawCirc(c){
+ var ctx = c.getContext('2d');
+ ctx.beginPath();
+ ctx.arc(100, 75, 50, 0, 2 * Math.PI);
+ ctx.stroke();
+ }
-### Draw circle, no response allowed
+ var trial = {
+ type: 'canvas-keyboard-response',
+ canvas_size: [300, 300],
+ stimulus: drawCirc,
+ prompt: 'No key response is accepted
The stimulus disappears after 3 seconds.
',
+ choices: jsPsych.NO_KEYS,
+ trial_duration: 3000,
+ data: {shape: 'circle', radius: 50}
+ }
+ ```
+
+ === "Demo"
+
+
+
-```javascript
-function drawCirc(c){
- var ctx = c.getContext('2d');
- ctx.beginPath();
- ctx.arc(100, 75, 50, 0, 2 * Math.PI);
- ctx.stroke();
-}
-
-var trial = {
- type: 'canvas-keyboard-response',
- stimulus: drawCirc,
- choices: jsPsych.NO_KEYS,
- trial_duration: 1000,
- data: {shape: 'circle', radius: 50}
-}
-```
\ No newline at end of file
+ Open demo in new tab