jsPsych/examples/jspsych-virtual-chinrest.html
2022-04-08 13:14:51 -04:00

73 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<script src="../packages/jspsych/dist/index.browser.js"></script>
<script src="../packages/plugin-virtual-chinrest/dist/index.browser.js"></script>
<script src="../packages/plugin-html-keyboard-response/dist/index.browser.js"></script>
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css"></link>
</head>
<script>
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
// two blindspot estimates
// measure px2mm, px2deg, viewing distance
// resize to cm (50 pixels per unit)
// note: you may still choose to estimate viewing distance even if resizing to cm or inches
let cm_resize = {
type: jsPsychVirtualChinrest,
blindspot_reps: 2,
resize_units: "cm",
pixels_per_unit: 50,
item_path: 'img/card.png',
};
// one blindspot estimate
// 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: jsPsychVirtualChinrest,
blindspot_reps: 1,
resize_units: "deg",
pixels_per_unit: 50,
viewing_distance_report: 'none'
};
// one blindspot estimate
// estimate viewing distance but do not resize
// note: pixels_per_unit will be ignored
let no_resize = {
type: jsPsychVirtualChinrest,
blindspot_reps: 3,
resize_units: "none",
pixels_per_unit: 50
};
// resizing to degrees with no blindspot measurment (blindspot_reps: 0) is not possible
// this trial will throw an error
let error_trial = {
type: jsPsychVirtualChinrest,
blindspot_reps: 0,
resize_units: "deg",
pixels_per_unit: 50
};
let validation_trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="margin: auto; width: 200px; height: 200px; background-color: black;"></div>',
prompt: '<p>The stimulus above should be 4cm x 4cm if resizing worked properly.</p>'
};
jsPsych.run([cm_resize, validation_trial]); // deg_resize, no_resize, error_trial
</script>
</html>