From df92593ec750267c81d4ef241e9d1e00993580ca Mon Sep 17 00:00:00 2001
From: Daiichiro Kuroki <32691644+kurokida@users.noreply.github.com>
Date: Fri, 9 Jul 2021 11:52:28 +0900
Subject: [PATCH] Create live demos for canvas-slider-response
---
.../jspsych-canvas-slider-response-demo1.html | 70 ++++++++++++
.../jspsych-canvas-slider-response-demo2.html | 76 +++++++++++++
.../plugins/jspsych-canvas-slider-response.md | 106 ++++++++++--------
3 files changed, 208 insertions(+), 44 deletions(-)
create mode 100644 docs/plugins/demos/jspsych-canvas-slider-response-demo1.html
create mode 100644 docs/plugins/demos/jspsych-canvas-slider-response-demo2.html
diff --git a/docs/plugins/demos/jspsych-canvas-slider-response-demo1.html b/docs/plugins/demos/jspsych-canvas-slider-response-demo1.html
new file mode 100644
index 00000000..37197c3f
--- /dev/null
+++ b/docs/plugins/demos/jspsych-canvas-slider-response-demo1.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/plugins/demos/jspsych-canvas-slider-response-demo2.html b/docs/plugins/demos/jspsych-canvas-slider-response-demo2.html
new file mode 100644
index 00000000..41804372
--- /dev/null
+++ b/docs/plugins/demos/jspsych-canvas-slider-response-demo2.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/plugins/jspsych-canvas-slider-response.md b/docs/plugins/jspsych-canvas-slider-response.md
index e96942e9..1623601a 100644
--- a/docs/plugins/jspsych-canvas-slider-response.md
+++ b/docs/plugins/jspsych-canvas-slider-response.md
@@ -36,54 +36,72 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
## Examples
-### Draw two squares
+???+ example "Draw two squares"
+ === "Code"
+ ```javascript
+ var colors = ['#FF3333', '#FF6A33'];
-```javascript
-var colors = [#'FF3333', '#FF6A33'];
+ function twoSquares(c) {
+ var ctx = c.getContext('2d');
+ ctx.fillStyle = colors[0];
+ ctx.fillRect(200, 70, 40, 40);
+ ctx.fillStyle = colors[1];
+ ctx.fillRect(260, 70, 40, 40);
+ }
-function twoSquares(c) {
- var ctx = c.getContext('2d');
- ctx.fillStyle = colors[0];
- ctx.fillRect(200, 70, 40, 40);
- ctx.fillStyle = colors[1];
- ctx.fillRect(260, 70, 40, 40);
-}
+ var trial = {
+ type: 'canvas-slider-response',
+ stimulus: twoSquares,
+ labels: ['0','10'],
+ canvas_size: [150, 500],
+ prompt: 'How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)
',
+ data: {color1: colors[0], color2: colors[1]}
+ }
+ ```
-var trial = {
- type: 'canvas-slider-response',
- stimulus: twoSquares,
- labels: ['0','10'],
- canvas_size: [200, 500],
- prompt: 'How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)
',
- data: {color1: colors[0], color2: colors[1]}
-}
-```
+ === "Demo"
+
+
+
-### Draw two squares with additional parameters
+ Open demo in new tab
-```javascript
-var colors;
-function twoSquares(c, colors) {
- var ctx = c.getContext('2d');
- ctx.fillStyle = colors[0];
- ctx.fillRect(200, 70, 40, 40);
- ctx.fillStyle = colors[1];
- ctx.fillRect(260, 70, 40, 40);
-}
+???+ example "Draw two squares with additional parameters"
+ === "Code"
+ ```javascript
+ var colors;
+
+ function twoSquares(c, colors) {
+ var ctx = c.getContext('2d');
+ ctx.fillStyle = colors[0];
+ ctx.fillRect(200, 70, 40, 40);
+ ctx.fillStyle = colors[1];
+ ctx.fillRect(260, 70, 40, 40);
+ }
+
+ var trial = {
+ type: 'canvas-slider-response',
+ stimulus: function(c) {
+ colors = ['darkred', 'cyan'];
+ twoSquares(c, colors);
+ },
+ labels: ['Exactly
the same','Totally
different'],
+ canvas_size: [200, 500],
+ prompt: 'How different would you say the colors of these two squares are?
',
+ on_finish: function(data) {
+ data.color1 = colors[0];
+ data.color2 = colors[1];
+ }
+ };
+
+ ```
+
+ === "Demo"
+
+
+
+
+ Open demo in new tab
+
-var trial = {
- type: 'canvas-slider-response',
- stimulus: function(c) {
- colors = ['darkred', 'cyan'];
- twoSquares(c, colors);
- },
- labels: ['Exactly
the same','Totally
different'],
- canvas_size: [200, 500],
- prompt: 'How different would you say the colors of these two squares are?
',
- on_finish: function(data) {
- data.color1 = colors[0];
- data.color2 = colors[1];
- }
-};
-```
\ No newline at end of file