Get event listener on button click and then save it on local .csv file

[aleargio]

Hello everyone! I apologize for my bad english, its not my firs language.
For my experiment I need to record when the user clicks on a button that I have created and to save that record on a local .csv file. I'm trying to implement this action via addEventListener because I need that this button changes when the user clicks on it. I'm using Survey Html Form plugin because I need to record text input, too.
Here a little piece of my code:

`
let IGesp2 = {

timeline: [{
    type: jsPsychSurveyHtmlForm,
    preamble: jsPsych.timelineVariable('stimulus'),
    html: function(){
    return '<div><button type="button" name="bottone"><img id ="cuore" name = "cuore1" src="foto mod/cuore.jpg" 
    addEventListener("click", cambia)/></button> <input type="text" name="risposta"></input></div>'},
    button_label: 'Avanti',
}],
timeline_variables: [...], }
    function cambia() {document.getElementById('cuore').src="foto mod/cuore1.jpg";}`

I've tried to search other solutions but I don't really know how to implement this using jsPsych.
Thank you,
Alessia

[aleargio]

@jodeleeuw can you help me? After 3 days I'm still stuck 😢

[ChristopheBossens]

You should add an onclick attribute to the button. In your current code you are adding javaScript code within your image which does not work :)

html: function(){ 
return '<div><button type="button" name="bottone" onclick="cambia()"><img id ="cuore" name = "cuore1" src="foto mod/cuore.jpg"/></button> <input type="text" name="risposta"></input></div>'}

[aleargio]

I've tried to change the location of the onclick attribute and it changes the img anyway. I want that the button changes when the user clicks on it and that this interaction with the button is saved on a local .csv file because I need to see if the user clicks on this button or not.
Also, I need to set the stimulus_duration for each stimulus on Survey Html Form plugin. I've tried to add the function inside the survey-html-form.js file but it didn't work. I don't know if this can help but the stimulus is an img. I've tried to use the image-button-response plugin but it didn't work for my needs.

[ChristopheBossens]

For adding the interaction with the button you can use the following code:

    let button_rt, trial_start_time;
    
    var trial = {
        type: jsPsychSurveyHtmlForm,
        preamble: 'hello',
        html: function(){
            return '<div><button type="button" name="bottone" onclick="cambia()"><img id ="cuore" name = "cuore1" src="1.jpg" /></button> <input type="text" name="risposta"></input></div>'
        },
        button_label: 'Avanti',

        on_load : function(){
            button_rt = null;
            trial_start_time = performance.now();
        },
        on_finish : function(data){
            data.button_rt = button_rt;
        }
    }

    function cambia() {
        document.getElementById('cuore').src="2.jpg";
        if(button_rt != null)
            button_rt = performance.now() - trial_start_time
    }

So you basically have two global variables button_rt and trial_start_time. In your trial you can use the on_load function to initialize these variables at the start of a trial. Your cambia() function calculates the reaction time when the button has been pressed (but only the first time). Finally, you can use the on_finish function to add the reaction time to the data of that trial. If you now save it locally it will contain that reaction time.

You mentioned setting the stimulus_duration. Do you mean that the whole trial should only last a specific amount of time, or that the stimulus (displayed using the html function) should only be visible for a specific amount of time?

[aleargio]

I've tried to add the code you wrote before and it works! But it saves only "null" in the column "button_rt".
For the stimulus_duration, I mean that each stimulus should be visible for one minute.

[ChristopheBossens]

Sorry, my mistake. I think you have to chance

button_rt != null

to

button_rt == null

in the if-statement so that it only updates the button_rt when it is initially null (so you will get a reaction time for the first click).

About the stimulus_duration: do I understand correctly that after one minute, the button and the image (which you define in the html property) should disappear, but the participant should still press the proceed button to go to the next trial?

[aleargio]

Now it works, thank you! Yes, you understand correctly. I need that the image, the button and the texbox disappear but they can click on the proceed button anyways.

[ChristopheBossens]

Something like this should work. At the start of your trial you set a timeout function that will call after the specified time in milliseconds (here it is still set to 2 seconds). In the on_finish function you remove the timeout function, otherwise it will still get called on a subsequent trial and might mess with the rest of your experiment.

let timeoutId;

    var trial = {
        type: jsPsychSurveyHtmlForm,
        preamble: 'hello',
        html: function(){
            return '<div id="stimulus"><button type="button" name="bottone" onclick="cambia()"><img id ="cuore" name = "cuore1" src="1.jpg" /></button> <input type="text" name="risposta"></input></div>'
        },
        button_label: 'Avanti',

        on_load : function(){
            button_rt = null;
            trial_start_time = performance.now();
            timeoutId = setTimeout(removeStimulus, 2000);
        },
        on_finish : function(data){
            clearTimeout(timeoutId);
            data.button_rt = button_rt;
        }
    }

    function removeStimulus(){
      document.getElementById('stimulus').remove();
    }