diff --git a/docs/plugins/demos/jspsych-call-function-demo1.html b/docs/plugins/demos/jspsych-call-function-demo1.html new file mode 100644 index 00000000..f91628b8 --- /dev/null +++ b/docs/plugins/demos/jspsych-call-function-demo1.html @@ -0,0 +1,59 @@ + + + + + + + + + + + + + diff --git a/docs/plugins/demos/jspsych-call-function-demo2.html b/docs/plugins/demos/jspsych-call-function-demo2.html new file mode 100644 index 00000000..b77766eb --- /dev/null +++ b/docs/plugins/demos/jspsych-call-function-demo2.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + diff --git a/docs/plugins/demos/jspsych-call-function-demo3.html b/docs/plugins/demos/jspsych-call-function-demo3.html new file mode 100644 index 00000000..3be45d83 --- /dev/null +++ b/docs/plugins/demos/jspsych-call-function-demo3.html @@ -0,0 +1,71 @@ + + + + + + + + + + + + + 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/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/demos/jspsych-categorize-animation-demo1.html b/docs/plugins/demos/jspsych-categorize-animation-demo1.html new file mode 100644 index 00000000..f28ca694 --- /dev/null +++ b/docs/plugins/demos/jspsych-categorize-animation-demo1.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + diff --git a/docs/plugins/demos/jspsych-categorize-animation-demo2.html b/docs/plugins/demos/jspsych-categorize-animation-demo2.html new file mode 100644 index 00000000..2e3e1a0e --- /dev/null +++ b/docs/plugins/demos/jspsych-categorize-animation-demo2.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + diff --git a/docs/plugins/jspsych-call-function.md b/docs/plugins/jspsych-call-function.md index b1ffba32..888dee53 100644 --- a/docs/plugins/jspsych-call-function.md +++ b/docs/plugins/jspsych-call-function.md @@ -24,58 +24,81 @@ value | any | The return value of the called function. ## Examples -#### Calling a simple function +???+ example "Calling a simple function" + === "Code" + ```javascript + var myfunc = function() { + return 'you called?'; + } -```javascript + var trial = { + type: 'call-function', + func: myfunc + } + ``` -var myfunc = function() { - return 'you called?'; -} + === "Demo" +
+ +
-var trial = { - type: 'call-function', - func: myfunc -} -``` + Open demo in new tab + -#### Using an anonymous function to pass variables +???+ example "Using an anonymous function to pass variables" + === "Code" + ```javascript + var myfunc = function(data){ + // data contains all the experiment data so far, + // so this function could implement code to write + // the data to a database. + console.log(data.values()) + } -```javascript + var trial = { + type: 'call-function', + func: function(){ myfunc(jsPsych.data.get()) } + } + ``` -var myfunc = function(data){ - // data contains all the experiment data so far, - // so this function could implement code to write - // the data to a database. -} + === "Demo" +
+ +
-var trial = { - type: 'call-function', - func: function(){ myfunc(jsPsych.data.get())} -} -``` + Open demo in new tab -#### Async function call - -```javascript -var trial = { - type: 'call-function', - async: true, - func: function(done){ - // can perform async operations here like - // creating an XMLHttpRequest to communicate - // with a server - var xhttp = new XMLHttpRequest(); - xhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { +???+ example "Async function call" + === "Code" + ```javascript + var trial = { + type: 'call-function', + async: true, + func: function(done){ + // can perform async operations here like + // creating an XMLHttpRequest to communicate + // with a server + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { var response_data = xhttp.responseText; // line below is what causes jsPsych to // continue to next trial. response_data // will be stored in jsPsych data object. done(response_data); + } + }; + xhttp.open("GET", "path_to_server_script.php", true); + xhttp.send(); } - }; - xhttp.open("GET", "path_to_server_script.php", true); - xhttp.send(); - } -} -``` \ No newline at end of file + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab + + 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 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 diff --git a/docs/plugins/jspsych-categorize-animation.md b/docs/plugins/jspsych-categorize-animation.md index 88c6a480..6522420e 100644 --- a/docs/plugins/jspsych-categorize-animation.md +++ b/docs/plugins/jspsych-categorize-animation.md @@ -17,7 +17,7 @@ In addition to the [parameters available in all plugins](/overview/plugins#param | frame_time | numeric | 500 | How long to display each image (in milliseconds). | | sequence_reps | numeric | 1 | How many times to show the entire sequence. | | allow_response_before_complete | boolean | false | If true, the subject can respond before the animation sequence finishes. | -| prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press). | +| prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus or the end of the animation depending on the allow_response_before_complete parameter. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press). | | feedback_duration | numeric | 2000 | How long to show the feedback (milliseconds). | | render_on_canvas | boolean | true | If true, the images will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive images in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych. | @@ -34,27 +34,53 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Basic example +???+ example "Basic example" + === "Code" + ```javascript + var animation_trial = { + type: 'categorize-animation', + stimuli: [ + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg' + ], + prompt: `Press the P or Q key.`, + choices: ['p', 'q'], + key_answer: 'q', + }; + ``` + === "Demo" +
+ +
-```javascript -var animation_trial = { - type: 'categorize-animation', - stimuli: ["img/face_3.jpg", "img/face_2.jpg", "img/face_4.jpg", "img/face_1.jpg"], - choices: ['p', 'q'], - key_answer: 'q', -}; -``` + Open demo in new tab -#### Giving feedback with `%ANS%` string +???+ example "Giving feedback with `%ANS%` string" + === "Code" + ```javascript + var images = [ + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg' + ]; -```javascript -var animation_trial = { - type: 'categorize-animation', - stimuli: ["img/face_3.jpg", "img/face_2.jpg", "img/face_4.jpg", "img/face_1.jpg"], - choices: ['p', 'q'], - key_answer: 'q', - text_answer: 'Dax', // the label for the sequence is 'Dax' - correct_text: 'Correct! This was a %ANS%.', - incorrect_text: 'Incorrect. This was a %ANS%.' -}; -``` + var animation_trial = { + type: 'categorize-animation', + stimuli: images, + choices: ['p', 'q'], + prompt: `Press the P or Q key.`, + key_answer: 'q', + text_answer: 'Dax', // the label for the sequence is 'Dax' + correct_text: 'Correct! This was a %ANS%.', + incorrect_text: 'Incorrect. This was a %ANS%.' + }; + ``` + === "Demo" +
+ +
+ + Open demo in new tab