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

blindspot measurement optional

Browse Source
This commit is contained in:
Peter J. Kohler 2021-01-28 20:23:16 -05:00
parent 1f813bc9f3
commit 1555a9e718
2 changed files with 143 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
examples/jspsych-virtual-chinrest.html
View File

@ -1,6 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- jQuery --> <!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
@ -21,16 +24,46 @@
<script> <script>
let trial = { // measure px2mm, viewing distance and px2deg
// do not resize
// note: pixels_per_unit will be ignored
let no_resize = {
type: 'virtual-chinrest', type: 'virtual-chinrest',
blindspot_reps: 3, blindspot_reps: 3,
resize_units: "cm", resize_units: "none",
pixels_per_unit: 50, pixels_per_unit: 50
resize_allowed: false
}; };
// measure px2mm, but not viewing distance and px2deg
// 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: 'virtual-chinrest',
blindspot_reps: 0,
resize_units: "cm",
pixels_per_unit: 50
};
// measure px2mm, viewing distance and px2deg
// resize to degrees of visual angle (50 pixels per unit)
let deg_resize = {
type: 'virtual-chinrest',
blindspot_reps: 3,
resize_units: "deg",
pixels_per_unit: 50
};
// 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
}
jsPsych.init({ jsPsych.init({
timeline: [trial], timeline: [ deg_resize ],
on_finish: function() { jsPsych.data.displayData(); } on_finish: function() { jsPsych.data.displayData(); }
}); });

57
plugins/jspsych-virtual-chinrest.js
View File

@ -33,16 +33,11 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
default: 100, default: 100,
description: 'After the scaling factor is applied, this many pixels will equal one unit of measurement.' description: 'After the scaling factor is applied, this many pixels will equal one unit of measurement.'
}, },
resize_allowed: {
type: jsPsych.plugins.parameterType.BOOL,
default: false,
description: 'If true, the resize of the screen will be done.'
},
blindspot_reps: { blindspot_reps: {
type: jsPsych.plugins.parameterType.INT, type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Blindspot measurement repetitions', pretty_name: 'Blindspot measurement repetitions',
default: 5, default: 5,
description: 'How many times to measure the blindspot location' description: 'How many times to measure the blindspot location? If 0, blindspot will not detected and viewing distance not computed.'
}, },
prompt_card: { prompt_card: {
type: jsPsych.plugins.parameterType.STRING, type: jsPsych.plugins.parameterType.STRING,
@ -68,7 +63,6 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
'<li>Click the button below to start the animation of the red ball. The <b style="color: red">red ball </b>'+ '<li>Click the button below to start the animation of the red ball. The <b style="color: red">red ball </b>'+
'will disappear as it moves from right to left. Press the “Space” key as soon as the ball disappears from your eye sight.</li>'+ 'will disappear as it moves from right to left. Press the “Space” key as soon as the ball disappears from your eye sight.</li>'+
'</div><br>' '</div><br>'
}, },
card_path: { card_path: {
type: jsPsych.plugins.parameterType.STRING, type: jsPsych.plugins.parameterType.STRING,
@ -77,8 +71,6 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
} }
} }
// Get screen size // Get screen size
var w = window.innerWidth; var w = window.innerWidth;
var h = window.innerHeight; var h = window.innerHeight;
@ -90,7 +82,6 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
let trial_data = { let trial_data = {
"card_width_mm": 85.60, //card dimension: 85.60 × 53.98 mm (3.370 × 2.125 in) "card_width_mm": 85.60, //card dimension: 85.60 × 53.98 mm (3.370 × 2.125 in)
}; };
let config_data = { let config_data = {
@ -100,9 +91,17 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
plugin.trial = function(display_element, trial) { plugin.trial = function(display_element, trial) {
try {
if ( !( trial.blindspot_reps > 0 ) && ( (trial.resize_units == "deg" ) || (trial.resize_units == "degrees" ) ) ) {
throw Error("Blindspot repetitions set to 0, so resizing to degrees of visual angle is not possible!")
} else {
const start_time = performance.now(); const start_time = performance.now();
console.log(trial) if ( trial.blindspot_reps > 0 ) {
button_str = '<button id=blind_spot class="btn btn-primary">'
} else {
button_str = '<button id=proceed class="btn btn-primary">'
}
pagesize_content = pagesize_content =
'<div id="page-size"><br><br>'+ '<div id="page-size"><br><br>'+
@ -110,7 +109,7 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
'<div id="container">'+ '<div id="container">'+
'<div id="slider"></div><br>'+ '<div id="slider"></div><br>'+
'<img id="card" src="' + trial.card_path + '" style="width: 50%">'+ '<img id="card" src="' + trial.card_path + '" style="width: 50%">'+
'<br><br><button id=blind_spot class="btn btn-primary">Click here when you are done!</button>'+ '<br><br>' + button_str + 'Click here when you are done!</button>'+
'</div>'+ '</div>'+
'</div>' '</div>'
@ -133,8 +132,6 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
blindspot_content + blindspot_content +
'</div>' '</div>'
/*// create html for display /*// create html for display
var html = "<body><div id='content'><div id='page-size'><br><br><br><br><br><br>"; var html = "<body><div id='content'><div id='page-size'><br><br><br><br><br><br>";
// html += "<h3> Let’s find out what your monitor size is (click to go into <div onclick='fullScreen(); registerClick();' style='display:inline; cursor:pointer; color: red'><em><u>full screen mode</u></em></div>).</h2>"; // html += "<h3> Let’s find out what your monitor size is (click to go into <div onclick='fullScreen(); registerClick();' style='display:inline; cursor:pointer; color: red'><em><u>full screen mode</u></em></div>).</h2>";
@ -164,26 +161,30 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
html += '<div id="svgDiv" style="width:1000px;height:200px;"></div>'; html += '<div id="svgDiv" style="width:1000px;height:200px;"></div>';
html += "Hit 'space' <div id='click' style='display:inline; color: red; font-weight: bold'>5</div> more times!</div>"; html += "Hit 'space' <div id='click' style='display:inline; color: red; font-weight: bold'>5</div> more times!</div>";
// render // render
display_element.innerHTML = html; */ display_element.innerHTML = html; */
//Event listeners for buttons //Event listeners for buttons
if ( trial.blindspot_reps > 0 ) {
display_element.querySelector('#blind_spot').addEventListener('click', function(){ display_element.querySelector('#blind_spot').addEventListener('click', function(){
configureBlindSpot() configureBlindSpot()
}) })
display_element.querySelector('#start_ball').addEventListener('click', function(){ display_element.querySelector('#start_ball').addEventListener('click', function(){
animateBall() animateBall()
}) })
} else {
// run the two relevant functions to get card_width_mm and px2mm
distanceSetup.px2mm(getCardWidth())
}
if (trial.resize_allowed === true){
display_element.querySelector('#proceed').addEventListener('click', function(){ display_element.querySelector('#proceed').addEventListener('click', function(){
// finish trial // finish trial
trial_data.rt = performance.now() - start_time;
display_element.innerHTML = ''; display_element.innerHTML = '';
trial_data.card_width_deg = 2*(Math.atan((trial_data["card_width_mm"]/2)/trial_data["view_dist_mm"])) * 180/Math.PI trial_data.card_width_deg = 2*(Math.atan((trial_data["card_width_mm"]/2)/trial_data["view_dist_mm"])) * 180/Math.PI
trial_data.px2deg = trial_data["card_width_px"] / trial_data.card_width_deg // size of card in pixels divided by size of card in degrees of visual angle trial_data.px2deg = trial_data["card_width_px"] / trial_data.card_width_deg // size of card in pixels divided by size of card in degrees of visual angle
trial_data.rt = performance.now() - start_time;
let px2unit_scr = 0 let px2unit_scr = 0
switch (trial.resize_units) { switch (trial.resize_units) {
@ -203,24 +204,25 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
if (px2unit_scr > 0) { if (px2unit_scr > 0) {
// scale the window // scale the window
scale_factor = px2unit_scr / trial.pixels_per_unit; scale_factor = px2unit_scr / trial.pixels_per_unit;
console.log(scale_factor, trial_data)
document.getElementById("jspsych-content").style.transform = "scale(" + scale_factor + ")"; document.getElementById("jspsych-content").style.transform = "scale(" + scale_factor + ")";
// pixels have been scaled, so pixels per degree, pixels per mm and pixels per card_width needs to be updated // pixels have been scaled, so pixels per degree, pixels per mm and pixels per card_width needs to be updated
trial_data.px2deg = trial_data.px2deg / scale_factor trial_data.px2deg = trial_data.px2deg / scale_factor
trial_data.px2mm = trial_data.px2mm / scale_factor trial_data.px2mm = trial_data.px2mm / scale_factor
trial_data.card_width_px = trial_data.card_width_px / scale_factor trial_data.card_width_px = trial_data.card_width_px / scale_factor
trial_data.scale_factor = scale_factor
} }
if ( trial.blindspot_reps > 0 ) {
trial_data.win_width_deg = window.innerWidth/trial_data.px2deg trial_data.win_width_deg = window.innerWidth/trial_data.px2deg
trial_data.win_height_deg = window.innerHeight/trial_data.px2deg trial_data.win_height_deg = window.innerHeight/trial_data.px2deg
jsPsych.finishTrial(trial_data); } else {
}) // delete degree related properties
} else{ delete trial_data.px2deg
display_element.querySelector('#proceed').addEventListener('click', function(){ delete trial_data.card_width_deg
end_trial()
})
} }
jsPsych.finishTrial(trial_data);
jsPsych.pluginAPI.cancelAllKeyboardResponses();
})
/* /*
@ -233,6 +235,11 @@ jsPsych.plugins['virtual-chinrest'] = (function() {
}); });
*/ */
} }
} catch (e) {
console.error(e)
}
}
function after_response(response_info){ function after_response(response_info){
// rt.push(response_info.rt); // response time of the key // rt.push(response_info.rt); // response time of the key