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

Merge pull request #2042 from kurokida/docs-demos

Browse Source 
Create live demos for jspsych-html-* plugins
This commit is contained in:
Becky Gilbert 2021-08-04 13:10:22 -07:00 committed by GitHub
commit 75f3164f29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 292 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/plugins/demos/jspsych-html-button-response-demo1.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
<style>
.jspsych-btn {margin-bottom: 10px;}
</style>
</head>
<body></body>
<script>
var start = {
type: 'html-button-response',
stimulus: '',
choices: ['Run demo']
};
var show_data = {
type: 'html-button-response',
stimulus: function() {
var trial_data = jsPsych.data.getLastTrialData().values();
var trial_json = JSON.stringify(trial_data, null, 2);
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
},
choices: ['Repeat demo']
};
var trial = {
type: 'html-button-response',
stimulus: '<p>Running</p>',
choices: ['Healthy', 'Unhealthy'],
prompt: "<p>Is this activity healthy or unhealthy?</p>"
};
var trial_loop = {
timeline: [trial, show_data],
loop_function: function() {
return true;
}
};
if (typeof jsPsych !== "undefined") {
jsPsych.init({
timeline: [start, trial_loop]
});
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

57
docs/plugins/demos/jspsych-html-keyboard-response-demo1.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
<style>
.jspsych-btn {margin-bottom: 10px;}
</style>
</head>
<body></body>
<script>
var start = {
type: 'html-button-response',
stimulus: '',
choices: ['Run demo']
};
var show_data = {
type: 'html-button-response',
stimulus: function() {
var trial_data = jsPsych.data.getLastTrialData().values();
var trial_json = JSON.stringify(trial_data, null, 2);
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
},
choices: ['Repeat demo']
};
var trial = {
type: 'html-keyboard-response',
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>"
};
var trial_loop = {
timeline: [trial, show_data],
loop_function: function() {
return true;
}
};
if (typeof jsPsych !== "undefined") {
jsPsych.init({
timeline: [start, trial_loop]
});
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

57
docs/plugins/demos/jspsych-html-keyboard-response-demo2.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
<style>
.jspsych-btn {margin-bottom: 10px;}
</style>
</head>
<body></body>
<script>
var start = {
type: 'html-button-response',
stimulus: '',
choices: ['Run demo']
};
var show_data = {
type: 'html-button-response',
stimulus: function() {
var trial_data = jsPsych.data.getLastTrialData().values();
var trial_json = JSON.stringify(trial_data, null, 2);
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
},
choices: ['Repeat demo']
};
var trial = {
type: 'html-keyboard-response',
stimulus: '<p style="font-size: 48px;">+</p>',
choices: jsPsych.NO_KEYS,
trial_duration: 1000,
};
var trial_loop = {
timeline: [trial, show_data],
loop_function: function() {
return true;
}
};
if (typeof jsPsych !== "undefined") {
jsPsych.init({
timeline: [start, trial_loop]
});
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

58
docs/plugins/demos/jspsych-html-slider-response-demo1.html Normal file
View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-slider-response.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
<style>
.jspsych-btn {margin-bottom: 10px;}
</style>
</head>
<body></body>
<script>
var start = {
type: 'html-button-response',
stimulus: '',
choices: ['Run demo']
};
var show_data = {
type: 'html-button-response',
stimulus: function() {
var trial_data = jsPsych.data.getLastTrialData().values();
var trial_json = JSON.stringify(trial_data, null, 2);
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
},
choices: ['Repeat demo']
};
var trial = {
type: 'html-slider-response',
stimulus: '<p>Running</p>',
require_movement: true,
labels: ['healthy', 'unhealthy'],
prompt: "<p>How healthy/unhealthy is this activity?</p>"
};
var trial_loop = {
timeline: [trial, show_data],
loop_function: function() {
return true;
}
};
if (typeof jsPsych !== "undefined") {
jsPsych.init({
timeline: [start, trial_loop]
});
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

26
docs/plugins/jspsych-html-button-response.md
View File

@ -30,13 +30,21 @@ stimulus | string | The HTML content that was displayed on the screen.
## Examples
#### Displaying question until subject gives a response
???+ example "Displaying question until subject gives a response"
=== "Code"
```javascript
var trial = {
type: 'html-button-response',
stimulus: '<p>Running</p>',
choices: ['Healthy', 'Unhealthy'],
prompt: "<p>Is this activity healthy or unhealthy?</p>"
};
```
=== "Demo"
<div style="text-align:center;">
<iframe src="../plugins/demos/jspsych-html-button-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
</div>
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-html-button-response-demo1.html">Open demo in new tab</a>
```javascript
var trial = {
type: 'html-button-response',
stimulus: '<p>Running</p>',
choices: ['Healthy', 'Unhealthy'],
prompt: "<p>Is this activity healthy or unhealthy?</p>"
};
```

48
docs/plugins/jspsych-html-keyboard-response.md
View File

@ -28,24 +28,36 @@ 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: 'html-keyboard-response',
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>"
};
```
=== "Demo"
<div style="text-align:center;">
<iframe src="../plugins/demos/jspsych-html-keyboard-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div>
```javascript
var trial = {
type: 'html-keyboard-response',
stimulus: '<p>Running</p>',
choices: ['e', 'i'],
prompt: "<p>Is this activity healthy or unhealthy? Press 'e' for healthy and 'i' for unhealthy.</p>"
};
```
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-html-keyboard-response-demo1.html">Open demo in new tab</a>
#### Showing a 1 second fixation cross; no response allowed
???+ example "Showing a 1 second fixation cross; no response allowed"
=== "Code"
```javascript
var trial = {
type: 'html-keyboard-response',
stimulus: '<p style="font-size: 48px;">+</p>',
choices: jsPsych.NO_KEYS,
trial_duration: 1000,
};
```
=== "Demo"
<div style="text-align:center;">
<iframe src="../plugins/demos/jspsych-html-keyboard-response-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div>
```javascript
var trial = {
type: 'html-keyboard-response',
stimulus: '<p style="font-size: 48px;">+</p>',
choices: jsPsych.NO_KEYS,
trial_duration: 1000,
};
```
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-html-keyboard-response-demo2.html">Open demo in new tab</a>

25
docs/plugins/jspsych-html-slider-response.md
View File

@ -35,11 +35,20 @@ slider_start | numeric | The starting value of the slider.
## Examples
```javascript
var trial = {
type: 'html-slider-response',
stimulus: '<p>Running</p>',
labels: ['healthy', 'unhealthy'],
prompt: "<p>How healthy/unhealthy is this activity?</p>"
};
```
???+ example "Displaying question until subject move the slider"
=== "Code"
```javascript
var trial = {
type: 'html-slider-response',
stimulus: '<p>Running</p>',
require_movement: true,
labels: ['healthy', 'unhealthy'],
prompt: "<p>How healthy/unhealthy is this activity?</p>"
};
```
=== "Demo"
<div style="text-align:center;">
<iframe src="../plugins/demos/jspsych-html-slider-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
</div>
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-html-slider-response-demo1.html">Open demo in new tab</a>