Still working on it, still new bugs every time I reupload and try to run it.

I have tried to split the code into several parts, basically taking virtual_chinrest and posting the main part of it in a code block to begin before the experiment

// Add the new properties to the existing “data” variable

data.dataType = “configurationData”;

data.ballPosition = ;

data.fullScreenClicked = false;

data.sliderClicked = false;

// Define a distanceSetup object

const distanceSetup = {};

distanceSetup.round = function (value, decimals) {

return Number(Math.round(value + “e” + decimals) + “e-” + decimals);

};

distanceSetup.px2mm = function (cardImageWidth) {

const cardWidth = 85.6; //card dimension: 85.60 × 53.98 mm (3.370 × 2.125 in)

const px2mm = cardImageWidth / cardWidth;

data.px2mm = distanceSetup.round(px2mm, 2);

return px2mm;

};

// Function to configure blind spot

function configureBlindSpot() {

drawBall();

$(“#blind-spot”).css({ visibility: “visible” });

$(document).on(“keydown”, recordPosition);

}

// Function to draw the ball animation

function drawBall(pos = 180) {

const mySVG = SVG(“svgDiv”);

const cardWidthPx = getCardWidth();

const rectX = distanceSetup.px2mm(cardWidthPx) * pos;

const ballX = rectX * 0.6;

let ball = mySVG.circle(30).move(ballX, 50).fill(“#f00”);

window.ball = ball;

let square = mySVG.rect(30, 30).move(Math.min(rectX - 50, 950), 50);

// Save square position data

data.squarePosition = distanceSetup.round(square.cx(), 2);

data.rectX = rectX;

data.ballX = ballX;

}

// Function to animate the ball

function animateBall() {

ball.animate(7000)

.during(function (pos) {

moveX = -pos * data.ballX;

window.moveX = moveX;

moveY = 0;

ball.attr({ transform: “translate(” + moveX + “,” + moveY + “)” });

})

.loop(true, false)

.after(function () {

animateBall();

});

$(“#start”).attr(“disabled”, true);

}

// Function to record position data

function recordPosition(event, angle = 13.5) {

if (event.keyCode == 32) {

data.ballPosition.push(distanceSetup.round(ball.cx() + moveX, 2));

const sum = data.ballPosition.reduce((a, b) => a + b, 0);

const ballPosLen = data.ballPosition.length;

data.avgBallPos = distanceSetup.round(sum / ballPosLen, 2);

const ball_sqr_distance = (data.squarePosition - data.avgBallPos) / data.px2mm;

const viewDistance = ball_sqr_distance / Math.radians(angle);

data.viewDistance_mm = distanceSetup.round(viewDistance, 2);

let counter = Number($(“#click”).text());

counter = counter - 1;

$(“#click”).text(Math.max(counter, 0));

if (counter <= 0) {

ball.stop();

$(document).off(“keydown”, recordPosition);

// Add next step to advance in the experiment here

} else {

ball.stop();

animateBall();

}

}

}

// Helper function to convert degrees to radians

Math.radians = function (degrees) {

return degrees * Math.PI / 180;

};

// Helper function to get card width

function getCardWidth() {

const cardWidth = 0; // Assign a default value (e.g., 0)

then running

python configureBlindSpot()

before the experiment and

`python animateBall()`

before the routine

while finally running

`python recordPosition()`

at the end of routine.

This has thus far only let to dispair. Can any one tell me if they have successfully implemented something similar in their experiments.

I really hope I can get some help here as I feel I am getting pretty deep into a rabbit hole