Ending trial when specific button is selected

[steventmartinez]

Hi everyone, I am hoping to end a trial when a specific button is pressed. However, unlike in traditional jsPsychHtmlButtonResponse trials where the button response automatically ends the trial, we need to be able to capture multiple button responses. As a result, I tweaked the jsPsychHtmlButtonResponse plugin by enabling all the buttons after a response is made in order to capture the recording of multiple button presses.

As part of the experimental task, we have 2 button options (e.g., 'Like' and 'Skip'). Ultimately, we want to collect multiple button responses, such that some participants may select the 'Like' button and then the 'Skip' button, but critically, whenever a participant selects the 'Skip' button, the trial should automatically end. What would be the best way to go about this?

Attaching what the trial would look like below. If there is any other information that would be helpful to provide, please let me know. Thank you so much in advance!

var video_trial = {
  type: jsPsychHtmlButtonResponse,
  stimulus: function(){
              var html = 
              '<video autoplay controls muted src="'+jsPsych.timelineVariable('videos')+'"></video>' +
              '<img src="images/image1.png"</img>'
              return html;
          },       
  choices: ['Like', 'Skip'],
  button_html: ['<button class="jspsych-btn">%choice%</button>', '<button class="jspsych-btn">%choice%</button>'],  
  response_ends_trial: false,  /*making this false in order to be able to capture multiple button presses*/
  trial_duration: jsPsych.timelineVariable('video_time'), /*if the participant doesn't select 'Skip', the video should run fully*/
};

[Shaobin-Jiang]

You could wrap the trial in a child timeline and use the loop function to repeat the trial until "Skip" is clicked, but since a video is involved, that would not be ideal. Alternatively, you could do something like this:

var video_trial = {
    type: jsPsychHtmlButtonResponse,
    stimulus: stimulus: function(){
        var html = 
            '<video autoplay controls muted src="'+jsPsych.timelineVariable('videos')+'"></video>' +
            '<img src="images/image1.png"</img>';
        return html;
     },
    choices: ['Like', 'Skip'],
    button_html: ['<button class="jspsych-btn">%choice%</button>', '<button class="jspsych-btn">%choice%</button>'],
    response_ends_trial: false /*making this false in order to be able to capture multiple button presses*/,
    trial_duration: jsPsych.timelineVariable('video_time'),
    on_load: function () {
        // Remove the default event listeners on the buttons
        let btn_group = document.querySelector('#jspsych-html-button-response-btngroup');
        btn_group.innerHTML = btn_group.innerHTML;

        let response = [];

        let start_time = performance.now();

        for (let button of document.querySelectorAll('button')) {
            button.addEventListener('click', function (e) {
                let val = e.target.innerHTML;
                response.push(val);

                if (val == 'Skip') {
                    jsPsych.finishTrial({rt: performance.now() - start_time, response});
                    jsPsych.getDisplayElement().innerHTML = '';
                }
            });
        }
    },
};

[steventmartinez]

Hi @Shaobin-Jiang thank you so much for the helpful feedback! Thanks to your helpful code, I was able to get the button functionality to work, but I am having trouble appending data to the trial data.

In case it helps to see it this way, there are 3 possible outcomes:

1. Participants press the 'Like' button and then the 'Skip' button (data will be correctly appended in the current code)
2. Participants press the 'Skip' button (data will be correctly appended in the current code)
3. Participants press the 'Like' button (data will not be appended in the current code)

In the on_load function below, although the jsPsych.finishTrial({rt: rt, response: response}); code will append data when the 'Skip' button is pressed, I am hoping to find a way to similarly append data to the trial when the 'Like' button is pressed without ending the trial. Would you happen to have any suggestion on how to go about that? Thank you again so much, we really appreciate it!

var video_trial = {
    type: jsPsychHtmlButtonResponse,
    stimulus: stimulus: function(){
        var html = 
            '<video autoplay controls muted src="'+jsPsych.timelineVariable('videos')+'"></video>' +
            '<img src="images/image1.png"</img>';
        return html;
     },
    choices: ['Like', 'Skip'],
    button_html: ['<button class="jspsych-btn">%choice%</button>', '<button class="jspsych-btn">%choice%</button>'],
    response_ends_trial: false /*making this false in order to be able to capture multiple button presses*/,
    trial_duration: jsPsych.timelineVariable('video_time'),
    on_load: function () {
        // Remove the default event listeners on the buttons
        let btn_group = document.querySelector('#jspsych-html-button-response-btngroup');
        btn_group.innerHTML = btn_group.innerHTML;

        let response = [];
        let rt = [];

        let start_time = performance.now();

        for (let button of document.querySelectorAll('button')) {
            button.addEventListener('click', function (e) {
                let val = e.target.innerHTML;
                response.push(val);

                if (val !== "Skip") {
                  liked = 1
                  response.push(liked);
                  rt_liked = performance.now() - start_time, response
                  rt.push(rt_liked);
                }
                
                if (val == 'Skip') {
                    rt_skip = performance.now() - start_time, response
                    rt.push(rt_skip);
                    jsPsych.finishTrial({rt: rt, response: response});
                }
            });
        }
    },
};

[Shaobin-Jiang]

What do you mean by

Participants press the 'Like' button (data will not be appended in the current code)

Not pressing "skip" would not end the trial, hence the absence of any data

[steventmartinez]

I think what's happening is that the RT and response data is being appended to the trial data by the jsPsych.finishTrial({rt: rt, response: response}); line of code, but that line of code only occurs if the 'Skip' button is pressed. I am hoping to find a way to append the RT and response data when only the 'Like' button is pressed.

In other words, it seems that if we take out the jsPsych.finishTrial({rt: rt, response: response}); line of code, RT and response data isn't being appended to the trial data.

[Shaobin-Jiang]

You could just make response and rt global variables (i.e., by declaring from outside of on_load). Then, if the trial ends without "skip" being clicked, just append the data in on_finish.

let response, rt;
var video_trial = {
    type: jsPsychHtmlButtonResponse,
    stimulus: stimulus: function(){
        var html = 
            '<video autoplay controls muted src="'+jsPsych.timelineVariable('videos')+'"></video>' +
            '<img src="images/image1.png"</img>';
        return html;
    },
    choices: ['Like', 'Skip'],
    button_html: ['<button class="jspsych-btn">%choice%</button>', '<button class="jspsych-btn">%choice%</button>'],
    response_ends_trial: false /*making this false in order to be able to capture multiple button presses*/,
    trial_duration: jsPsych.timelineVariable('video_time'),
    on_load: function () {
        // Remove the default event listeners on the buttons
        let btn_group = document.querySelector('#jspsych-html-button-response-btngroup');
        btn_group.innerHTML = btn_group.innerHTML;

        response = [];
        rt = [];

        let start_time = performance.now();

        for (let button of document.querySelectorAll('button')) {
            button.addEventListener('click', function (e) {
                let val = e.target.innerHTML;
                response.push(val);

                if (val !== 'Skip') {
                    liked = 1;
                    response.push(liked);
                    (rt_liked = performance.now() - start_time), response;
                    rt.push(rt_liked);
                }

                if (val == 'Skip') {
                    (rt_skip = performance.now() - start_time), response;
                    rt.push(rt_skip);
                    jsPsych.finishTrial({rt: rt, response: response});
                }
            });
        }
    },
    on_finish: function (data) {
        if (data.response === null) {
            data.response = response;
            data.rt = rt;
        }
        console.log(data);
    },
};

[steventmartinez]

Amazing! Declaring the rt and response variables as global variables and adding the on_finish() code worked wonderfully. Thank you so much for taking the time to help out with this; much appreciated!