HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

update the html demos to be more illustrative

Browse Source
This commit is contained in:
Josh de Leeuw 2021-10-04 11:02:17 -04:00
parent 3f150a3b77
commit 58f4887217
7 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/demos/jspsych-html-button-response-demo1.html
View File

@ -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 = {

8
docs/demos/jspsych-html-keyboard-response-demo1.html
View File

@ -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 = {

2
docs/demos/jspsych-html-keyboard-response-demo2.html
View File

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

17
docs/demos/jspsych-html-slider-response-demo1.html
View File

@ -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 = {

8
docs/plugins/html-button-response.md
View File

@ -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>

6
docs/plugins/html-keyboard-response.md
View File

@ -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"

15
docs/plugins/html-slider-response.md
View File

@ -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']
};
```