mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
add virtual chinrest demo
This commit is contained in:
Josh de Leeuw
parent
8afcce533f
commit
bfaad26520
BIN
docs/demos/img/card.png
Normal file
BIN
docs/demos/img/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
57
docs/demos/jspsych-virtual-chinrest-demo1.html
Normal file
57
docs/demos/jspsych-virtual-chinrest-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-virtual-chinrest.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.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: 'virtual-chinrest',
|
||||||
|
blindspot_reps: 3,
|
||||||
|
resize_units: "none"
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
72
docs/demos/jspsych-virtual-chinrest-demo2.html
Normal file
72
docs/demos/jspsych-virtual-chinrest-demo2.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<!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-virtual-chinrest.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.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 preload = {
|
||||||
|
type: 'preload',
|
||||||
|
images: ['img/card.png']
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: function() {
|
||||||
|
var trial_data = jsPsych.data.get().filter({trial_type: 'virtual-chinrest'}).last(1).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: 'virtual-chinrest',
|
||||||
|
blindspot_reps: 3,
|
||||||
|
resize_units: "cm",
|
||||||
|
pixels_per_unit: 50
|
||||||
|
};
|
||||||
|
|
||||||
|
var resized_stimulus = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: `
|
||||||
|
<p>If the measurements were done correctly, the square below should be 10 cm x 10 cm.</p>
|
||||||
|
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||||
|
`,
|
||||||
|
choices: ['Continue']
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, resized_stimulus, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [preload, 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>
|
||||||
72
docs/demos/jspsych-virtual-chinrest-demo3.html
Normal file
72
docs/demos/jspsych-virtual-chinrest-demo3.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<!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-virtual-chinrest.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.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 preload = {
|
||||||
|
type: 'preload',
|
||||||
|
images: ['img/card.png']
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: function() {
|
||||||
|
var trial_data = jsPsych.data.get().filter({trial_type: 'virtual-chinrest'}).last(1).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: 'virtual-chinrest',
|
||||||
|
blindspot_reps: 3,
|
||||||
|
resize_units: "deg",
|
||||||
|
pixels_per_unit: 50
|
||||||
|
};
|
||||||
|
|
||||||
|
var resized_stimulus = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: `
|
||||||
|
<p>If the measurements were done correctly, the square below should take up about 10 degrees of visual angle.</p>
|
||||||
|
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||||
|
`,
|
||||||
|
choices: ['Continue']
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, resized_stimulus, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [preload, 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>
|
||||||
@ -13,7 +13,11 @@ The plugin works in two phases.
|
|||||||
|
|
||||||
## Dependency
|
## Dependency
|
||||||
|
|
||||||
This plugin requires the SVG.js library, available at [https://svgjs.com](https://svgjs.com/docs/3.0/). You must include the library in the `<head>` section of your experiment page.
|
This plugin requires the SVG.js library, available at [https://svgjs.com](https://svgjs.com/docs/3.0/) or via the CDN link below. You must include the library in the `<head>` section of your experiment page.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
## Parameters
|
## Parameters
|
||||||
|
|
||||||
@ -59,47 +63,64 @@ _Note: The deg data are **only** returned if viewing distance is estimated with
|
|||||||
|
|
||||||
## Example
|
## Example
|
||||||
|
|
||||||
|
???+ example "Measure distance to screen and pixel ratio; no resizing"
|
||||||
|
=== "Code"
|
||||||
```javascript
|
```javascript
|
||||||
// two blindspot measurements
|
var trial = {
|
||||||
// measure px2mm, viewing distance and px2deg
|
type: 'virtual-chinrest',
|
||||||
// do not resize the jsPsych content after this trial
|
|
||||||
// note: pixels_per_unit will be ignored since there is no resizing (resize_units: "none")
|
|
||||||
let no_resize = {
|
|
||||||
type: "virtual-chinrest",
|
|
||||||
blindspot_reps: 3,
|
blindspot_reps: 3,
|
||||||
resize_units: "none",
|
resize_units: "none"
|
||||||
pixels_per_unit: 50,
|
|
||||||
};
|
|
||||||
|
|
||||||
// no blindspot task
|
|
||||||
// resize to cm (50 pixels per unit)
|
|
||||||
// measure px2mm, but not viewing distance and px2deg (because blindspot_reps is 0)
|
|
||||||
// note: you may still choose to estimate viewing distance even if resizing to cm or inches
|
|
||||||
let cm_resize = {
|
|
||||||
type: "virtual-chinrest",
|
|
||||||
blindspot_reps: 0,
|
|
||||||
resize_units: "cm",
|
|
||||||
pixels_per_unit: 50,
|
|
||||||
};
|
|
||||||
|
|
||||||
// three blindspot measurements
|
|
||||||
// measure px2mm, viewing distance and px2deg
|
|
||||||
// resize to degrees of visual angle (50 pixels per unit)
|
|
||||||
// don't report viewing distance to subject
|
|
||||||
let deg_resize = {
|
|
||||||
type: "virtual-chinrest",
|
|
||||||
blindspot_reps: 3,
|
|
||||||
resize_units: "deg",
|
|
||||||
pixels_per_unit: 50,
|
|
||||||
viewing_distance_report: "none",
|
|
||||||
};
|
|
||||||
|
|
||||||
// resizing to degrees with no blindspot measurment is not possible
|
|
||||||
// this trial will throw an error
|
|
||||||
let error_trial = {
|
|
||||||
type: "virtual-chinrest",
|
|
||||||
blindspot_reps: 0,
|
|
||||||
resize_units: "deg",
|
|
||||||
pixels_per_unit: 50,
|
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
=== "Demo"
|
||||||
|
This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo1.html">open the demo in a new tab</a>
|
||||||
|
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo1.html">Open demo in new tab</a>
|
||||||
|
|
||||||
|
???+ example "Resizing based on centimeters per pixel"
|
||||||
|
=== "Code"
|
||||||
|
```javascript
|
||||||
|
var trial = {
|
||||||
|
type: 'virtual-chinrest',
|
||||||
|
blindspot_reps: 3,
|
||||||
|
resize_units: "cm",
|
||||||
|
pixels_per_unit: 50
|
||||||
|
};
|
||||||
|
|
||||||
|
var resized_stimulus = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: `
|
||||||
|
<p>If the measurements were done correctly, the square below should be 10 cm x 10 cm.</p>
|
||||||
|
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||||
|
`,
|
||||||
|
choices: ['Continue']
|
||||||
|
}
|
||||||
|
```
|
||||||
|
=== "Demo"
|
||||||
|
This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo2.html">open the demo in a new tab</a>
|
||||||
|
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo2.html">Open demo in new tab</a>
|
||||||
|
|
||||||
|
???+ example "Resizing based on degrees of visual angle per pixel"
|
||||||
|
=== "Code"
|
||||||
|
```javascript
|
||||||
|
var trial = {
|
||||||
|
type: 'virtual-chinrest',
|
||||||
|
blindspot_reps: 3,
|
||||||
|
resize_units: "deg",
|
||||||
|
pixels_per_unit: 50
|
||||||
|
};
|
||||||
|
|
||||||
|
var resized_stimulus = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: `
|
||||||
|
<p>If the measurements were done correctly, the square below should take up about 10 degrees of visual angle.</p>
|
||||||
|
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||||
|
`,
|
||||||
|
choices: ['Continue']
|
||||||
|
}
|
||||||
|
```
|
||||||
|
=== "Demo"
|
||||||
|
This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo3.html">open the demo in a new tab</a>
|
||||||
|
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-virtual-chinrest-demo3.html">Open demo in new tab</a>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user