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

Add live demos for the maxdiff, rdk, reconstruction, and resize plugin.

Browse Source
This commit is contained in:
Daiichiro Kuroki 2021-08-30 15:00:11 +09:00
parent 462c262231
commit bacea1ddcd
10 changed files with 462 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
docs/demos/jspsych-maxdiff-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-button-response.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-maxdiff.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: 'maxdiff',
alternatives: ['apple', 'orange', 'pear', 'banana'],
labels: ['Most Preferred', 'Least Preferred'],
preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </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>

56
docs/demos/jspsych-rdk-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>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.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: "rdk",
coherent_direction: 0,
correct_choice: "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>

61
docs/demos/jspsych-rdk-demo2.html Normal file
View File

@ -0,0 +1,61 @@
<!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>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.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: "rdk",
post_trial_gap: 0,
number_of_dots: 200,
RDK_type: 3,
choices: ["a", "l"],
correct_choice: "a",
coherent_direction: 180,
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>

61
docs/demos/jspsych-rdk-demo3.html Normal file
View File

@ -0,0 +1,61 @@
<!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>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.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: "rdk",
number_of_apertures: 3, //This needs to be set if more than one aperture
trial_duration: 10000,
correct_choice: "a",
RDK_type: 3, //Applied to all apertures if only one value
aperture_width: 200, //Applied to all apertures if only one value
number_of_dots: [50, 200, 100], //Different parameter for each aperture. Array length must equal number_of_apertures
aperture_center_x: [(window.innerWidth/2)-300,window.innerWidth/2,(window.innerWidth/2)+300] //Separate the apertures on the screen (window.innerWidth/2 is the middle of the screen)
};
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>

64
docs/demos/jspsych-reconstruction-demo1.html Normal file
View File

@ -0,0 +1,64 @@
<!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>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-reconstruction.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 sample_function = function(param){
var size = 50 + Math.floor(param*250);
var html = '<div style="display: block; margin: auto; height: 300px;">'+
'<div style="display: block; margin: auto; background-color: #000000; '+
'width: '+size+'px; height: '+size+'px;"></div></div>';
return html;
}
var trial = {
type: 'reconstruction',
stim_function: sample_function,
starting_value: 0.25
}
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/demos/jspsych-resize-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-button-response.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-resize.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: 'resize',
item_width: 3 + 3/8,
item_height: 2 + 1/8,
prompt: "<p>Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen.</p>",
pixels_per_unit: 150
};
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>

11
docs/plugins/jspsych-maxdiff.md
View File

@ -29,8 +29,8 @@ response | object | An object with two keys, `left` and `right`, containing the
## Examples ## Examples
#### Basic example ???+ example "Basic example"
=== "Code"
```javascript ```javascript
var maxdiff_page = { var maxdiff_page = {
type: 'maxdiff', type: 'maxdiff',
@ -39,3 +39,10 @@ var maxdiff_page = {
preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>' preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>'
}; };
``` ```
=== "Demo"
<div style="text-align:center;">
<iframe src="../demos/jspsych-maxdiff-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div>
<a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-maxdiff-demo1.html">Open demo in new tab</a>

38
docs/plugins/jspsych-rdk.md
View File

@ -74,24 +74,26 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
## Example ## Example
#### Setting the correct_choice parameter by linking it to the coherent_direction parameter: ???+ example "Setting the correct_choice parameter by linking it to the coherent_direction parameter"
=== "Code"
```javascript ```javascript
var trial_right = { var trial = {
type: "rdk",
coherent_direction: 0, coherent_direction: 0,
correct_choice: "p" correct_choice: "p"
}; };
var trial_left = {
coherent_direction: 180,
correct_choice: "q"
};
``` ```
=== "Demo"
<div style="text-align:center;">
<iframe src="../demos/jspsych-rdk-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div>
#### Displaying a trial with 2 choices and 1 correct choice <a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-rdk-demo1.html">Open demo in new tab</a>
???+ example "Displaying a trial with 2 choices and 1 correct choice"
=== "Code"
```javascript ```javascript
var test_block = { var trial = {
type: "rdk", type: "rdk",
post_trial_gap: 0, post_trial_gap: 0,
number_of_dots: 200, number_of_dots: 200,
@ -102,18 +104,30 @@ var test_block = {
trial_duration: 1000 trial_duration: 1000
}; };
``` ```
=== "Demo"
<div style="text-align:center;">
<iframe src="../demos/jspsych-rdk-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div>
#### Displaying a trial with multiple apertures <a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-rdk-demo2.html">Open demo in new tab</a>
???+ example "Displaying a trial with multiple apertures"
=== "Code"
```javascript ```javascript
var test_block = { var trial = {
type: "rdk", type: "rdk",
number_of_apertures: 3, //This needs to be set if more than one aperture number_of_apertures: 3, //This needs to be set if more than one aperture
trial_duration: 10000, trial_duration: 10000,
correct_choice: "a",
RDK_type: 3, //Applied to all apertures if only one value RDK_type: 3, //Applied to all apertures if only one value
aperture_width: 200, //Applied to all apertures if only one value aperture_width: 200, //Applied to all apertures if only one value
number_of_dots: [50, 200, 100], //Different parameter for each aperture. Array length must equal number_of_apertures number_of_dots: [50, 200, 100], //Different parameter for each aperture. Array length must equal number_of_apertures
aperture_center_x: [(window.innerWidth/2)-300,window.innerWidth/2,(window.innerWidth/2)+300] //Separate the apertures on the screen (window.innerWidth/2 is the middle of the screen) aperture_center_x: [(window.innerWidth/2)-300,window.innerWidth/2,(window.innerWidth/2)+300] //Separate the apertures on the screen (window.innerWidth/2 is the middle of the screen)
}; };
``` ```
=== "Demo"
<div style="text-align:center;">
<iframe src="../demos/jspsych-rdk-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div>
<a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-rdk-demo3.html">Open demo in new tab</a>

10
docs/plugins/jspsych-reconstruction.md
View File

@ -29,8 +29,8 @@ rt | numeric | The length of time, in milliseconds, that the trial lasted.
## Examples ## Examples
#### Make a block larger and smaller ???+ example "Make a block larger and smaller"
=== "Code"
```javascript ```javascript
var sample_function = function(param){ var sample_function = function(param){
var size = 50 + Math.floor(param*250); var size = 50 + Math.floor(param*250);
@ -46,3 +46,9 @@ var trial = {
starting_value: 0.25 starting_value: 0.25
} }
``` ```
=== "Demo"
<div style="text-align:center;">
<iframe src="../demos/jspsych-reconstruction-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div>
<a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-reconstruction-demo1.html">Open demo in new tab</a>

10
docs/plugins/jspsych-resize.md
View File

@ -26,8 +26,8 @@ scale_factor | numeric | Scaling factor that will be applied to the div containi
## Examples ## Examples
#### Measuring a credit card and resizing the display to have 150 pixels equal an inch. ???+ example "Measuring a credit card and resizing the display to have 150 pixels equal an inch."
=== "Code"
```javascript ```javascript
var inputs = { var inputs = {
type: 'resize', type: 'resize',
@ -37,3 +37,9 @@ var inputs = {
pixels_per_unit: 150 pixels_per_unit: 150
}; };
``` ```
=== "Demo"
<div style="text-align:center;">
<iframe src="../demos/jspsych-resize-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
</div>
<a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-resize-demo1.html">Open demo in new tab</a>