mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +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
|
||||
|
||||
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
|
||||
|
||||
@ -59,47 +63,64 @@ _Note: The deg data are **only** returned if viewing distance is estimated with
|
||||
|
||||
## Example
|
||||
|
||||
???+ example "Measure distance to screen and pixel ratio; no resizing"
|
||||
=== "Code"
|
||||
```javascript
|
||||
// two blindspot measurements
|
||||
// measure px2mm, viewing distance and px2deg
|
||||
// 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",
|
||||
var trial = {
|
||||
type: 'virtual-chinrest',
|
||||
blindspot_reps: 3,
|
||||
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,
|
||||
resize_units: "none"
|
||||
};
|
||||
```
|
||||
=== "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