mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
Add live demos for the maxdiff, rdk, reconstruction, and resize plugin.
This commit is contained in:
Daiichiro Kuroki
parent
462c262231
commit
bacea1ddcd
57
docs/demos/jspsych-maxdiff-demo1.html
Normal file
57
docs/demos/jspsych-maxdiff-demo1.html
Normal 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
56
docs/demos/jspsych-rdk-demo1.html
Normal 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
61
docs/demos/jspsych-rdk-demo2.html
Normal 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
61
docs/demos/jspsych-rdk-demo3.html
Normal 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
64
docs/demos/jspsych-reconstruction-demo1.html
Normal 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
58
docs/demos/jspsych-resize-demo1.html
Normal 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>
|
||||
@ -29,13 +29,20 @@ response | object | An object with two keys, `left` and `right`, containing the
|
||||
|
||||
## Examples
|
||||
|
||||
#### Basic example
|
||||
???+ example "Basic example"
|
||||
=== "Code"
|
||||
```javascript
|
||||
var maxdiff_page = {
|
||||
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>'
|
||||
};
|
||||
```
|
||||
=== "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>
|
||||
|
||||
```javascript
|
||||
var maxdiff_page = {
|
||||
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>'
|
||||
};
|
||||
```
|
||||
@ -74,46 +74,60 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
|
||||
|
||||
## 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
|
||||
var trial = {
|
||||
type: "rdk",
|
||||
coherent_direction: 0,
|
||||
correct_choice: "p"
|
||||
};
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../demos/jspsych-rdk-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
var trial_right = {
|
||||
coherent_direction: 0,
|
||||
correct_choice: "p"
|
||||
};
|
||||
<a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-rdk-demo1.html">Open demo in new tab</a>
|
||||
|
||||
var trial_left = {
|
||||
coherent_direction: 180,
|
||||
correct_choice: "q"
|
||||
};
|
||||
```
|
||||
???+ example "Displaying a trial with 2 choices and 1 correct choice"
|
||||
=== "Code"
|
||||
```javascript
|
||||
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
|
||||
};
|
||||
```
|
||||
=== "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 2 choices and 1 correct choice
|
||||
<a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-rdk-demo2.html">Open demo in new tab</a>
|
||||
|
||||
```javascript
|
||||
var test_block = {
|
||||
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
|
||||
};
|
||||
```
|
||||
|
||||
#### Displaying a trial with multiple apertures
|
||||
|
||||
```javascript
|
||||
var test_block = {
|
||||
type: "rdk",
|
||||
number_of_apertures: 3, //This needs to be set if more than one aperture
|
||||
trial_duration: 10000,
|
||||
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)
|
||||
};
|
||||
```
|
||||
???+ example "Displaying a trial with multiple apertures"
|
||||
=== "Code"
|
||||
```javascript
|
||||
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)
|
||||
};
|
||||
```
|
||||
=== "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>
|
||||
|
||||
@ -29,20 +29,26 @@ rt | numeric | The length of time, in milliseconds, that the trial lasted.
|
||||
|
||||
## Examples
|
||||
|
||||
#### Make a block larger and smaller
|
||||
???+ example "Make a block larger and smaller"
|
||||
=== "Code"
|
||||
```javascript
|
||||
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;
|
||||
}
|
||||
|
||||
```javascript
|
||||
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
|
||||
}
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../demos/jspsych-reconstruction-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
var trial = {
|
||||
type: 'reconstruction',
|
||||
stim_function: sample_function,
|
||||
starting_value: 0.25
|
||||
}
|
||||
```
|
||||
<a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-reconstruction-demo1.html">Open demo in new tab</a>
|
||||
|
||||
@ -26,14 +26,20 @@ scale_factor | numeric | Scaling factor that will be applied to the div containi
|
||||
|
||||
## 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
|
||||
var inputs = {
|
||||
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
|
||||
};
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../demos/jspsych-resize-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
var inputs = {
|
||||
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
|
||||
};
|
||||
```
|
||||
<a target="_blank" rel="noopener noreferrer" href="../demos/jspsych-resize-demo1.html">Open demo in new tab</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user