From 84f64934e07a056d04e1bafef16d98946a50e20f Mon Sep 17 00:00:00 2001 From: kurokida Date: Fri, 27 Aug 2021 15:26:10 +0900 Subject: [PATCH] Create live demos for the IAT and image-button/keyboard/slider plugins. --- .../plugins/demos/jspsych-iat-html-demo1.html | 66 +++++++++++++++++ .../demos/jspsych-iat-image-demo1.html | 72 +++++++++++++++++++ .../jspsych-image-button-response-demo1.html | 63 ++++++++++++++++ ...jspsych-image-keyboard-response-demo1.html | 63 ++++++++++++++++ ...jspsych-image-keyboard-response-demo2.html | 63 ++++++++++++++++ .../jspsych-image-slider-response-demo1.html | 62 ++++++++++++++++ docs/plugins/jspsych-iat-html.md | 50 +++++++------ docs/plugins/jspsych-iat-image.md | 50 +++++++------ docs/plugins/jspsych-image-button-response.md | 24 ++++--- .../jspsych-image-keyboard-response.md | 51 +++++++------ docs/plugins/jspsych-image-slider-response.md | 25 ++++--- 11 files changed, 498 insertions(+), 91 deletions(-) create mode 100644 docs/plugins/demos/jspsych-iat-html-demo1.html create mode 100644 docs/plugins/demos/jspsych-iat-image-demo1.html create mode 100644 docs/plugins/demos/jspsych-image-button-response-demo1.html create mode 100644 docs/plugins/demos/jspsych-image-keyboard-response-demo1.html create mode 100644 docs/plugins/demos/jspsych-image-keyboard-response-demo2.html create mode 100644 docs/plugins/demos/jspsych-image-slider-response-demo1.html diff --git a/docs/plugins/demos/jspsych-iat-html-demo1.html b/docs/plugins/demos/jspsych-iat-html-demo1.html new file mode 100644 index 00000000..d4264ee3 --- /dev/null +++ b/docs/plugins/demos/jspsych-iat-html-demo1.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + diff --git a/docs/plugins/demos/jspsych-iat-image-demo1.html b/docs/plugins/demos/jspsych-iat-image-demo1.html new file mode 100644 index 00000000..2c147aa8 --- /dev/null +++ b/docs/plugins/demos/jspsych-iat-image-demo1.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + diff --git a/docs/plugins/demos/jspsych-image-button-response-demo1.html b/docs/plugins/demos/jspsych-image-button-response-demo1.html new file mode 100644 index 00000000..6c5d74c8 --- /dev/null +++ b/docs/plugins/demos/jspsych-image-button-response-demo1.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + diff --git a/docs/plugins/demos/jspsych-image-keyboard-response-demo1.html b/docs/plugins/demos/jspsych-image-keyboard-response-demo1.html new file mode 100644 index 00000000..e39de7a6 --- /dev/null +++ b/docs/plugins/demos/jspsych-image-keyboard-response-demo1.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + diff --git a/docs/plugins/demos/jspsych-image-keyboard-response-demo2.html b/docs/plugins/demos/jspsych-image-keyboard-response-demo2.html new file mode 100644 index 00000000..06cd7520 --- /dev/null +++ b/docs/plugins/demos/jspsych-image-keyboard-response-demo2.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + diff --git a/docs/plugins/demos/jspsych-image-slider-response-demo1.html b/docs/plugins/demos/jspsych-image-slider-response-demo1.html new file mode 100644 index 00000000..eeca33c2 --- /dev/null +++ b/docs/plugins/demos/jspsych-image-slider-response-demo1.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + diff --git a/docs/plugins/jspsych-iat-html.md b/docs/plugins/jspsych-iat-html.md index bd69950c..c88e7ade 100644 --- a/docs/plugins/jspsych-iat-html.md +++ b/docs/plugins/jspsych-iat-html.md @@ -35,30 +35,28 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -```javascript -var trial_block = { - type: 'iat-html', - stimulus: 'Golf', - stim_key_association: 'left', - html_when_wrong: 'X', - bottom_instructions: '

If you press the wrong key, a red X will appear. Press the other key to continue

', - force_correct_key_press: true, - display_feedback: true, - 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'], - response_ends_trial: true -} +???+ example "Displaying IAT question using html" + === "Code" + ```javascript + var trial = { + type: 'iat-html', + stimulus: 'Golf', + stim_key_association: 'left', + html_when_wrong: 'X', + bottom_instructions: '

If you press the wrong key, a red X will appear. Press the other key to continue

', + force_correct_key_press: true, + display_feedback: true, + 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'], + response_ends_trial: true + } + ``` + === "Demo" +
+ +
-var timeline = []; -timeline.push(trial_block); - -jsPsych.init({ - timeline: timeline, - on_finish: function() { - jsPsych.data.displayData(); - } -}); -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-iat-image.md b/docs/plugins/jspsych-iat-image.md index 943b503b..1075bc6b 100644 --- a/docs/plugins/jspsych-iat-image.md +++ b/docs/plugins/jspsych-iat-image.md @@ -35,30 +35,28 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -```javascript -var trial_block = { - type: 'iat-image', - stimulus: 'img/blue.png', - stim_key_association: 'left', - html_when_wrong: 'X', - bottom_instructions: '

If you press the wrong key, a red X will appear. Press the other key to continue

', - force_correct_key_press: true, - display_feedback: true, - 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'], - response_ends_trial: true -} +???+ example "Displaying IAT question using image files" + === "Code" + ```javascript + var trial_block = { + type: 'iat-image', + stimulus: 'img/blue.png', + stim_key_association: 'left', + html_when_wrong: 'X', + bottom_instructions: '

If you press the wrong key, a red X will appear. Press the other key to continue

', + force_correct_key_press: true, + display_feedback: true, + 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'], + response_ends_trial: true + } + ``` + === "Demo" +
+ +
-var timeline = []; -timeline.push(trial_block); - -jsPsych.init({ - timeline: timeline, - on_finish: function() { - jsPsych.data.displayData(); - } -}); -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-image-button-response.md b/docs/plugins/jspsych-image-button-response.md index 10a4f3bd..85745247 100644 --- a/docs/plugins/jspsych-image-button-response.md +++ b/docs/plugins/jspsych-image-button-response.md @@ -36,13 +36,19 @@ stimulus | string | The path of the image that was displayed. ## Examples -#### Displaying question until subject gives a response +???+ example "Displaying question until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'image-button-response', + stimulus: 'img/happy_face_1.png', + choices: ['Happy', 'Sad'], + prompt: "

Is this person happy or sad?

" + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'image-button-response', - stimulus: 'img/happy_face_1.png', - choices: ['Happy', 'Sad'], - prompt: "

Is this person happy or sad?

" -}; -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-image-keyboard-response.md b/docs/plugins/jspsych-image-keyboard-response.md index 1fcd20b3..bee7474b 100644 --- a/docs/plugins/jspsych-image-keyboard-response.md +++ b/docs/plugins/jspsych-image-keyboard-response.md @@ -33,26 +33,37 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Displaying trial until subject gives a response +???+ example "Displaying trial until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'image-keyboard-response', + stimulus: 'img/happy_face_1.png', + choices: ['e', 'i'], + prompt: "

Is this person happy or sad? Press 'e' for happy and 'i' for sad.

", + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'image-keyboard-response', - stimulus: 'img/happy_face_1.png', - choices: ['e', 'i'], - prompt: "

Is this person happy or sad? Press 'e' for happy and 'i' for sad.

", - response_ends_trial: false -}; -``` + Open demo in new tab -#### Displaying image for a fixed duration; no response allowed +???+ example "Displaying image for a fixed duration; no response allowed" + === "Code" + ```javascript + var trial = { + type: 'image-keyboard-response', + stimulus: 'img/happy_face_1.png', + choices: jsPsych.NO_KEYS, + prompt: "

Study this face for 5 seconds.

", + trial_duration: 5000 + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'image-button-response', - stimulus: 'img/happy_face_1.png', - choices: jsPsych.NO_KEYS, - prompt: "

Study this face for 5 seconds.

", - trial_duration: 5000 -}; -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-image-slider-response.md b/docs/plugins/jspsych-image-slider-response.md index b9f56976..f15f0cef 100644 --- a/docs/plugins/jspsych-image-slider-response.md +++ b/docs/plugins/jspsych-image-slider-response.md @@ -41,14 +41,19 @@ slider_start | numeric | The starting value of the slider. ## Examples -#### Displaying trial until subject gives a response +???+ example "Displaying trial until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'image-slider-response', + stimulus: 'img/happy_face_1.png', + labels: ['happy', 'sad'], + prompt: "

How happy/sad is this person?

", + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'image-slider-response', - stimulus: 'img/happy_face_1.png', - labels: ['happy', 'sad'], - prompt: "

How happy/sad is this person?

", - response_ends_trial: false -}; -``` + Open demo in new tab