Use virtual chinrest to set the visual angle for the stimuli

[ruchirasakalle]

I am using the visual chinrest plug in to make the size of the stimuli dynamic. I am using the distance from the screen converting it to pixels and then using basic trigonometry to find the pixel for the radius of the circle I want to display. But I am unable to get the data from the visual chin rest trial of the distance to calculate the size of the circle. Appending the code for better help.

`

<script src="../jspsych-dist/dist/jspsych.js"></script> <script src="../jspsych-dist/dist/plugin-html-button-response.js"></script> <script src="../jspsych-dist/dist/plugin-preload.js"></script> <script src="https://pixijs.download/release/pixi.js"></script> <script src="../jspsych-dist/dist/plugin-survey-text.js"></script> <script src="../jspsych-dist/dist/plugin-survey-html-form.js"></script> <script src="../jspsych-dist/dist/plugin-survey-multi-choice.js"></script> <script src="../jspsych-dist/dist/plugin-instructions.js"></script> <script src="../jspsych-dist/dist/plugin-survey-likert.js"></script> <script src="../jspsych-dist/dist/plugin-virtual-chinrest.js"></script> <script src="../jspsych-psychophysics.js"></script> <script>

function set_html_style_1() {
    document.body.style.backgroundColor = 'gray'
}
function set_html_style_2() {
    document.body.style.backgroundColor = 'white'
}
function saveData() {
    const data = jsPsych.data.get().csv();
    const filename = 'experiment_data.csv';
    downloadCSV(data, filename);
}


function downloadCSV(csv, filename) {
    const csvBlob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) {
        // IE 10+
        navigator.msSaveBlob(csvBlob, filename);
    } else {
        // Other browsers
        const link = document.createElement('a');
        link.href = URL.createObjectURL(csvBlob);
        link.setAttribute('download', filename);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
}

const jsPsych = initJsPsych({
    on_finish: function () {
        // Save data to CSV at the end of the experiment
        saveData();
    }
});



const pixi_flag = jsPsych.data.getURLVariable('pixi_flag') === '1' ? true : false;


const instruction = {

    type: jsPsychInstructions,
    show_clickable_nav: true,
    pages: [
        "<div style='text-align: center;'>" +
        "<img src='./img/Uni_logo.png' width='200' height='200'><br><br><br>" +
        "<b>Hello and Welcome to the Experiment</b><br>" +
        "First of all thank you for participating in this experiment!" +
        "  I am Ruchira Sakalle, a masters in Cognitive Science Student at The University of Edinburgh " +
        "Your participation is valuable for my dissertation :) " +
        "Click new to view the instructions and proceed with the experiment!" +
        "</div>",
        "<div style='text-align: center;'>" +
        "<img src='./img/Uni_logo.png' width='200' height='200'><br><br><br>" +
        "In this experiment, you will be presented with a disk accompanied by some sounds, you have to tell how many disks you see by pressing 0 for no disk, 1 for one disk and 2 for 2 disks!" +
        "</div>"
    ]

}

const gender = {
    type: jsPsychSurveyMultiChoice,
    questions: [
        {
            prompt: "<img src='./img/Uni_logo.png' width='200' height='200'><br><br><br>" + "Which Gender do you identify with?",
            name: 'Gender',
            options: ['Female', 'Male', 'Prefer not to say'],
            required: true
        }]
};

const sounds = [ // All the sound files used in this demo
    './sound/beep-10.wav', './sound/beep-10.wav', './sound/beep_20.wav', './sound/beep_20.wav'

];


// Preloading files are needed to present the stimuli accurately.
const preload = {
    type: jsPsychPreload,

    audio: sounds

}
var trial = {
    type: jsPsychVirtualChinrest,
    blindspot_reps: 3,
    resize_units: "cm",
    pixels_per_unit: 60
    
};
const data1 = jsPsych.data.get().filter({ trial_type: "virtual-chinrest" });

// Assuming "view_dist_mm" is the column you want to work with
const radii = data1.select("view_dist_mm").values[0] * 0.1885;


const trial_block1 = [{
    type: jsPsychPsychophysics,
    pixi: pixi_flag,
    on_start: set_html_style_1,
    canvas_height: 500,
    stimuli: [
        {
            obj_type: 'cross',
            line_length: 100,
            line_color: 'black',
            startX: 700,
            startY: 300,
            show_start_time: 50,
            show_end_time: 400
        },

        {
            obj_type: 'circle',
            radius: radii,
            line_color: 'black',
            fill_color: 'black',
            show_start_time: 500, // ms after the start of the trial
            startX: 700,
            startY: 300,
            show_end_time: 530
        },

        {
            obj_type: 'sound',
            file: jsPsych.timelineVariable('third_sound'),
            show_start_time: 510 // ms after the start of the trial




        },


    ],

    
    prompt: "Press 0 ,1 ,2 for number of disks you see",
    choices: ['0', '1', '2']


},

{
    type: jsPsychPsychophysics,
    pixi: pixi_flag,
    on_start: set_html_style_1,
    canvas_height: 500,
    stimuli: [
        {
            obj_type: 'cross',
            line_length: 100,
            line_color: 'black',
            startX: 700,
            startY: 300,
            show_start_time: 10,
            show_end_time: 400


        },

        {
            obj_type: 'sound',
            file: jsPsych.timelineVariable('second_sound'),
            show_start_time: 500 // ms after the start of the trial




        },
        {
            obj_type: 'circle',
            radius: radii,
            line_color: 'black',
            fill_color: 'black',
            show_start_time: 500, // ms after the start of the trial
            startX: 700,
            startY: 300,
            show_end_time: 530
        },

        {
            obj_type: 'sound',
            file: jsPsych.timelineVariable('third_sound'),
            show_start_time: 590 // ms after the start of the trial




        }

    ],
    
    prompt: "Press 0 ,1 ,2 for number of disks you see",
    choices: ['0', '1', '2']

},

{
    type: jsPsychPsychophysics,
    pixi: pixi_flag,
    on_start: set_html_style_1,
    canvas_height: 500,
    stimuli: [
        {
            obj_type: 'cross',
            line_length: 100,
            line_color: 'black',
            startX: 700,
            startY: 300,
            show_start_time: 10,
            show_end_time: 400


        },

        {
            obj_type: 'sound',
            file: jsPsych.timelineVariable('second_sound'),
            show_start_time: 500 // ms after the start of the trial




        }
    ],

    
    prompt: "Press 0 ,1 ,2 for number of disks you see",
    choices: ['0', '1', '2']

},

{
    type: jsPsychPsychophysics,
    pixi: pixi_flag,
    on_start: set_html_style_1,
    canvas_height: 500,
    stimuli: [
        {
            obj_type: 'cross',
            line_length: 100,
            line_color: 'black',
            startX: 700,
            startY: 300,
            show_start_time: 10,
            show_end_time: 400


        },


        {
            obj_type: 'circle',
            radius: radii,
            line_color: 'black',
            fill_color: 'black',
            show_start_time: 500, // ms after the start of the trial
            startX: 700,
            startY: 300,
            show_end_time: 530
        }



    ],

   
    prompt: "Press 0 ,1 ,2 for number of disks you see",
    choices: ['0', '1', '2']

}
];
const shuffledTrials_block1 = jsPsych.randomization.repeat(trial_block1, 1);
const confidence_question = {
    type: jsPsychSurveyLikert,
    questions: [
        {
            prompt: "How confident are you in your response?",
            name: 'Confidence',
            labels: ['Not at all confident', 'Somewhat confident', 'Moderately confident', 'Very confident', 'Completely confident'],
            required: true
        }
    ]
};
const feedback_question = {
    type: jsPsychSurveyText,
    on_start: set_html_style_2,
    
    questions: [
        {
            prompt: "Was the experiment easy to understand?",
            name: 'EasyToUnderstand',
            rows: 2,
            columns: 50,
            required: true
        },
        {
            prompt: "What changes could we make to the experiment to make it easier for you?",
            name: 'Suggestions',
            rows: 5,
            columns: 50,
            required: true
        },
        {
            prompt: "Any other comments or feedback?",
            name: 'OtherComments',
            rows: 5,
            columns: 50,
            required: false // This question is optional, participants can leave it blank if they want
        }
    ]
};
// Create a new timeline containing each trial and the confidence question
const trials_with_confidence1 = [];
// Number of trials you want to run

for (let i = 0; i < shuffledTrials_block1.length; i++) {
    // Add the trial
    trials_with_confidence1.push(shuffledTrials_block1[i]);

    // Add the confidence question after each trial
    trials_with_confidence1.push(confidence_question);
}
const countdown_trial = {
    type: jsPsychHtmlButtonResponse,
    stimulus: '<p>You have successfully completed one block of the experiment. The next part of the experiment will start in <span id="clock">1:00</span>.',
    choices: ['Continue'],
    on_load: function () {
        var wait_time = 1 * 60 * 1000; // in milliseconds
        var start_time = performance.now();
        document.querySelector('button').disabled = true;
        var interval = setInterval(function () {
            var time_left = wait_time - (performance.now() - start_time);
            var minutes = Math.floor(time_left / 1000 / 60);
            var seconds = Math.floor((time_left - minutes * 1000 * 60) / 1000);
            var seconds_str = seconds.toString().padStart(2, '0');
            document.querySelector('#clock').innerHTML = minutes + ':' + seconds_str
            if (time_left <= 0) {
                document.querySelector('#clock').innerHTML = "0:00";
                document.querySelector('button').disabled = false;
                clearInterval(interval);
            }
        }, 250)
    }
}


const var_procedure = {
    timeline: trials_with_confidence1, // Use the shuffled trials array here
    timeline_variables: [
        { second_sound: sounds[0], third_sound: sounds[1] }
    ]

};

const trials_block2 = [{
    type: jsPsychPsychophysics,
    pixi: pixi_flag,
    on_start: set_html_style_1,
    canvas_height: 500,
    stimuli: [
        {
            obj_type: 'cross',
            line_length: 100,
            line_color: 'black',
            startX: 700,
            startY: 300,
            show_start_time: 50,
            show_end_time: 400
        },

        {
            obj_type: 'circle',
            radius: radii,
            line_color: 'black',
            fill_color: 'black',
            show_start_time: 500, // ms after the start of the trial
            startX: 700,
            startY: 300,
            show_end_time: 517
        },
        {
            obj_type: 'circle',
            radius: radii,
            line_color: 'black',
            fill_color: 'black',
            show_start_time: 550, // ms after the start of the trial
            startX: 700,
            startY: 300,
            show_end_time: 567
        },
        {
            obj_type: 'sound',
            file: jsPsych.timelineVariable('third_sound20'),
            show_start_time: 510 // ms after the start of the trial




        },


    ],

    
    prompt: "Press 0 ,1 ,2 for number of disks you see",
    choices: ['0', '1', '2']


},

{
    type: jsPsychPsychophysics,
    pixi: pixi_flag,
    canvas_height: 500,
    stimuli: [
        {
            obj_type: 'cross',
            line_length: 100,
            line_color: 'black',
            startX: 700,
            startY: 300,
            show_start_time: 10,
            show_end_time: 400


        },

        {
            obj_type: 'sound',
            file: jsPsych.timelineVariable('second_sound20'),
            show_start_time: 500 // ms after the start of the trial
        },
        {
            obj_type: 'circle',
            radius: radii,
            line_color: 'black',
            fill_color: 'black',
            show_start_time: 500, // ms after the start of the trial
            startX: 700,
            startY: 300,
            show_end_time: 530
        },
        {
            obj_type: 'circle',
            radius: radii,
            line_color: 'black',
            fill_color: 'black',
            show_start_time: 560, // ms after the start of the trial
            startX: 700,
            startY: 300,
            show_end_time: 590
        },

        {
            obj_type: 'sound',
            file: jsPsych.timelineVariable('third_sound20'),
            show_start_time: 550 // ms after the start of the trial




        }

    ],
    prompt: "Press 0 ,1 ,2 for number of disks you see",
    choices: ['0', '1', '2']

}
];
const trials_with_confidence2 = [];
const shuffledTrials_block2 = jsPsych.randomization.repeat(trials_block2, 1);
for (let i = 0; i < shuffledTrials_block2.length; i++) {
    // Add the trial
    trials_with_confidence2.push(shuffledTrials_block2[i]);

    // Add the confidence question after each trial
    trials_with_confidence2.push(confidence_question);
}
const var_procedure2 = {
    timeline: trials_with_confidence2, // Use the shuffled trials array here
    timeline_variables: [
        { second_sound20: sounds[2], third_sound20: sounds[3] }
    ]

};
const pre_audio = {
    type: jsPsychHtmlButtonResponse,
    stimulus: 'Web Browsers do not allow sound to play without prior interaction with the browser, press continue to allow the browser to play sound',
    choices: ['Continue']
};
jsPsych.run([preload, instruction, gender, trial,pre_audio, var_procedure, countdown_trial, var_procedure2]);

</script> `