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

Merge pull request #2 from GEJ1/GEJ1/master

Browse Source 
Gej1/master
This commit is contained in:
Josh de Leeuw 2021-02-18 10:43:42 -05:00 committed by GitHub
commit e2d66c4de1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 118 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,10 +4,6 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- css -->
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css">-->
<!-- SVG.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>

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

@ -105,7 +105,7 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
},
viewing_distance_report: {
type: jsPsych.plugins.parameterType.STRING,
default: "<p>Based on your responses, you are sitting about <span id='distance-estimate' style='font-weight: bold;'></span> from the screen</p><p>Does that seem about right?</p>",
default: "<p>Based on your responses, you are sitting about <span id='distance-estimate' style='font-weight: bold;'></span> from the screen.</p><p>Does that seem about right?</p>",
description:
'If "none" is given, viewing distance will not be reported to the participant',
},
@ -128,24 +128,18 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
}
/* some additional parameter configuration */
var w = window.innerWidth;
var h = window.innerHeight;
const screen_size_px = [w, "x", h];
let trial_data = {
item_width_mm: trial.item_width_mm,
item_height_mm: trial.item_height_mm, //card dimension: 85.60 × 53.98 mm (3.370 × 2.125 in)
};
let config_data = {
let blindspot_config_data = {
ball_pos: [],
slider_clck: false,
};
let aspect_ratio = 1;
let aspect_ratio = trial.item_width_mm / trial.item_height_mm;
aspect_ratio = trial.item_width_mm / trial.item_height_mm;
const start_div_height =
aspect_ratio < 1
? trial.item_init_size
@ -160,7 +154,7 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
let pagesize_content = `
<div id="page-size">
<div id="item" style="border: none; height: ${start_div_height}px; width: ${start_div_width}px; margin: 5px auto; background-color: none; position: relative; background-image: url(${trial.item_path}); background-size: 100% auto; background-repeat: no-repeat;">
<div id="jspsych-resize-handle" style="cursor: nwse-resize; background-color: none; width: ${adjust_size}px; height: ${adjust_size}px; border: 5px solid red; border-left: 0; border-top: 0; position: absolute; bottom: 0; right: 0;">' +
<div id="jspsych-resize-handle" style="cursor: nwse-resize; background-color: none; width: ${adjust_size}px; height: ${adjust_size}px; border: 5px solid red; border-left: 0; border-top: 0; position: absolute; bottom: 0; right: 0;">
</div>
</div>
${trial.adjustment_prompt}
@ -200,15 +194,13 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
</div>
`
/* show first screen */
display_element.innerHTML = `
<div id="content" style="width: 900px; margin: 0 auto;">
${pagesize_content}
</div>
`
display_element.innerHTML = `<div id="content" style="width: 900px; margin: 0 auto;"></div>`
const start_time = performance.now();
startResizePhase();
function startResizePhase() {
display_element.querySelector('#content').innerHTML = pagesize_content;
// Event listeners for mouse-based resize
let dragging = false;
@ -253,20 +245,33 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
display_element.querySelector("#end_resize_phase").addEventListener("click", finishResizePhase);
}
function finishResizePhase() {
// add item width info to data
const item_width_px = getScaledItemWidth();
trial_data["item_width_px"] = Math.round(item_width_px);
const px2mm = convertPixelsToMM(item_width_px);
trial_data["px2mm"] = accurateRound(px2mm, 2);
// check what to do next
if (trial.blindspot_reps > 0) {
get_item_width(); // modifies trial data
configureBlindSpot();
startBlindSpotPhase();
} else {
distanceSetup.px2mm(get_item_width());
endTrial();
}
}
function configureBlindSpot() {
function startBlindSpotPhase() {
// reset the config data in case we are redoing the measurement
blindspot_config_data = {
ball_pos: [],
slider_clck: false,
};
// add the content to the page
document.querySelector("#content").innerHTML = blindspot_content;
// draw the ball and fixation square
drawBall();
// wait for a spacebar to begin the animations
jsPsych.pluginAPI.getKeyboardResponse({
callback_function: startBall,
valid_responses: ['space'],
@ -276,7 +281,6 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
})
}
var ball_position_listener = null;
function startBall() {
ball_position_listener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: recordPosition,
@ -299,17 +303,15 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
function showReport() {
// Display data
display_element.querySelector("#content").innerHTML = report_content;
display_element.querySelector('#distance-estimate').innerHTML = `${Math.round(trial_data["view_dist_mm"] / 10)} cm`
display_element.querySelector('#distance-estimate').innerHTML = `
${Math.round(trial_data["view_dist_mm"] / 10)} cm (${Math.round(trial_data["view_dist_mm"]*0.0393701)} inches)
`
display_element.querySelector("#redo_blindspot").addEventListener('click', configureBlindSpot)
display_element.querySelector("#redo_blindspot").addEventListener('click', startBlindSpotPhase)
display_element.querySelector("#proceed").addEventListener('click', endTrial);
}
function endTrial() {
// finish trial
trial_data.rt = performance.now() - start_time;
display_element.innerHTML = "";
function computeTransformation() {
trial_data.item_width_deg =
(2 *
Math.atan(
@ -357,43 +359,49 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
delete trial_data.px2deg;
delete trial_data.item_width_deg;
}
// NEED TO REMOVE EVENT LISTENERS
jsPsych.finishTrial(trial_data);
jsPsych.pluginAPI.cancelAllKeyboardResponses();
}
function get_item_width() {
const item_width_px = parseFloat(
getComputedStyle(document.querySelector("#item"), null).width.replace(
"px",
""
)
);
function endTrial() {
trial_data["item_width_px"] = distanceSetup.round(item_width_px, 2);
return item_width_px;
// finish trial
trial_data.rt = performance.now() - start_time;
// remove lingering event listeners, just in case
jsPsych.pluginAPI.cancelAllKeyboardResponses();
// compute final data
computeTransformation();
// clear the display
display_element.innerHTML = "";
// finish the trial
jsPsych.finishTrial(trial_data);
}
function getScaledItemWidth() {
return document.querySelector('#item').getBoundingClientRect().width;
}
function drawBall(pos = 180) {
// pos: define where the fixation square should be.
var mySVG = SVG("svgDiv");
const item_width_px = trial_data["item_width_px"];
const rectX = distanceSetup.px2mm(item_width_px) * pos;
const rectX = trial_data["px2mm"] * pos;
const ballX = rectX * 0.6; // define where the ball is
var ball = mySVG.circle(30).move(ballX, 50).fill("#f00");
window.ball = ball;
var square = mySVG.rect(30, 30).move(Math.min(rectX - 50, 950), 50); //square position
config_data["square_pos"] = distanceSetup.round(square.cx(), 2);
config_data["rectX"] = rectX;
config_data["ballX"] = ballX;
blindspot_config_data["square_pos"] = accurateRound(square.cx(), 2);
blindspot_config_data["rectX"] = rectX;
blindspot_config_data["ballX"] = ballX;
}
function animateBall() {
ball
.animate(7000)
.during(function (pos) {
moveX = -pos * config_data["ballX"];
moveX = -pos * blindspot_config_data["ballX"];
window.moveX = moveX;
moveY = 0;
ball.attr({ transform: "translate(" + moveX + "," + moveY + ")" }); //jqueryToVanilla: el.getAttribute('');
@ -404,19 +412,19 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
});
}
function recordPosition(info) {
function recordPosition() {
// angle: define horizontal blind spot entry point position in degrees.
const angle = 13.5;
config_data["ball_pos"].push(distanceSetup.round(ball.cx() + moveX, 2));
var sum = config_data["ball_pos"].reduce((a, b) => a + b, 0);
var ballPosLen = config_data["ball_pos"].length;
config_data["avg_ball_pos"] = distanceSetup.round(sum / ballPosLen, 2);
blindspot_config_data["ball_pos"].push(accurateRound(ball.cx() + moveX, 2));
var sum = blindspot_config_data["ball_pos"].reduce((a, b) => a + b, 0);
var ballPosLen = blindspot_config_data["ball_pos"].length;
blindspot_config_data["avg_ball_pos"] = accurateRound(sum / ballPosLen, 2);
var ball_sqr_distance =
(config_data["square_pos"] - config_data["avg_ball_pos"]) /
(blindspot_config_data["square_pos"] - blindspot_config_data["avg_ball_pos"]) /
trial_data["px2mm"];
var viewDistance = ball_sqr_distance / Math.radians(angle);
trial_data["view_dist_mm"] = distanceSetup.round(viewDistance, 2);
trial_data["view_dist_mm"] = accurateRound(viewDistance, 2);
//counter and stop
var counter = Number(document.querySelector("#click").textContent);
@ -432,17 +440,14 @@ jsPsych.plugins["virtual-chinrest"] = (function () {
}
var distanceSetup = {
round: function (value, decimals) {
return Number(Math.round(value + "e" + decimals) + "e-" + decimals);
},
px2mm: function (item_width_px) {
function convertPixelsToMM(item_width_px){
const px2mm = item_width_px / trial_data["item_width_mm"];
trial_data["px2mm"] = distanceSetup.round(px2mm, 2);
return px2mm;
}
}
function accurateRound(value, decimals){
return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}
};