Providing feedback following button response

[SaoirseConnorDesai]

I'm trying to implement a feedback trial based on a button response where the buttons are Yes and No.

I have two practice trials, one where 'Yes' will be the correct answer and the other where 'No' will be correct. I want to give them feedback to say correct or incorrect.

I've looked at the notes on the Dynamic parameters page and tried to implement this but 'correct' is always returned.

Here's my code so far:

        type: 'html-button-response',
        choices: ['Yes', 'No'],
        margin_horizontal: '140px',
        post_trial_gap: 1000,
        stimulus: ["<p align = 'center'><b>Practice problem 1</b></p>" +
            "<p align = 'center'>Please indicate whether you endorse the statement.<br><br> " +
            "<table class='center'>" +
            "<tr><td><b>Tray A</b></td><td><b>Tray B</td></tr> " +
            "<tr><td><p align = 'center'><img src = 'RB-beans/0-10.svg' style='width:auto;max-height:100px;' alt = 'Example tray with 10 beans, all of them white'</p></td>" +
            "<td><p align = 'center'><img src = 'RB-beans/100-100.svg' style='width:auto;max-height:320px;' alt = 'Example tray with 100 beans, all of them red'</p></td></tr>" +
            "</table>" +
            "<p align = 'center'>Choosing Tray B is more likely to win you a red bean.<br>" +
            "<p align = 'center'>Is this correct?<br>"],
         data: {
            correct_response: 'Yes',
            trial_part: 'practice_2_1'
        },
        on_finish: function (data) {
            // Score the response as correct or incorrect.
            if (data.correct = data.response === data.correct_response) {
                data.correct == 0;
            } else {
                data.correct == 1;
            }
        }
    };


    var feedback_2_1 = {
        type: 'html-button-response',
        choices: ['Continue'],
        post_trial_gap: 500, 
        stimulus: function () {
            // The feedback stimulus is a dynamic parameter because we can't know in advance whether
            // the stimulus should be 'correct' or 'incorrect'.
            // Instead, this function will check the accuracy of the last response and use that information to set
            // the stimulus value on each trial.
            var last_trial_correct = jsPsych.data.get().last(1).values(1)[0].correct;
            if (last_trial_correct == 0) {
                return "<p>Correct!</p>"; // the parameter value has to be returned from the function
            } else {
                return "<p>Incorrect!</p>"; // the parameter value has to be returned from the function
            }
        }
    }


    var practice_2_2 = {
        type: 'html-button-response',
        choices: ['Yes', 'No'],
        margin_horizontal: '140px',
        post_trial_gap: 1000,
        stimulus: ["<p align = 'center'><b>Practice problem 2</b></p>" +
            "<p align = 'center'>Please indicate whether you endorse the statement.<br><br> " +
            "<table class='center'>" +
            "<tr><td><b>Tray A</b></td><td><b>Tray B</td></tr> " +
            "<tr><td><p align = 'center'><img src = 'RB-beans/10-10.svg' style='width:auto;max-height:100px;' alt = 'Example tray with 10 beans, all of them white'</p></td>" +
            "<td><p align = 'center'><img src = 'RB-beans/0-100.svg' style='width:auto;max-height:320px;' alt = 'Example tray with 100 beans, all of them red'</p></td></tr>" +
            "</table>" +
            "<p align = 'center'>Choosing Tray B is more likely to win you a red bean.<br>" +
            "<p align = 'center'>Is this correct?<br>"],
        data: {
            correct_response: 'No',
            trial_part: 'practice_2_2'
        },
        on_finish: function (data) {
            // Score the response as correct or incorrect.
            if (data.correct = data.response === data.correct_response) {
                data.correct == 1;
            } else {
                data.correct == 0;
            }
        }
    };

    var feedback_2_2 = {
        type: 'html-button-response',
        choices: ['Continue'],
        post_trial_gap: 500, 
        stimulus: function () {
            // The feedback stimulus is a dynamic parameter because we can't know in advance whether
            // the stimulus should be 'correct' or 'incorrect'.
            // Instead, this function will check the accuracy of the last response and use that information to set
            // the stimulus value on each trial.
            var last_trial_correct = jsPsych.data.get().last(1).values()[0].correct;
            if (last_trial_correct  == 0) {
                return "<p>Correct!</p>"; // the parameter value has to be returned from the function
            } else {
                return "<p>Incorrect!</p>"; // the parameter value has to be returned from the function
            }
        }
    }


    timeline.push(instr_2);
    timeline.push(practice_2_1, feedback_2_1);
    timeline.push(practice_2_2, feedback_2_2);

I've trawled github and the old google group but can't find anything. I guess I need to define what the button presses are somewhere but don't know how to do that.

Any help you can give would be much appreciated!

[jodeleeuw]

Hi @SaoirseConnorDesai,

The data.response value for the HtmlButtonResponse plugin is a number that indicates which button was pressed (docs here). Everything looks good here at first glance, except for how the correct_response is specified in the data parameter for the two trials. Instead of correct_response: 'Yes' try correct_response: 0.

[SaoirseConnorDesai]

Thanks Josh. Since posting I checked that page and tried 0 in the data parameter too but it still doesn't work.

[jodeleeuw]

There's a second issue in your on_finish function that I missed:

on_finish: function (data) {
            // Score the response as correct or incorrect.
            if (data.correct = data.response === data.correct_response) {
                data.correct == 1;
            } else {
                data.correct == 0;
            }
        }

Here the if() statement includes an assignment to data.correct. I think this will always evaluate to true. Instead I think you want

on_finish: function (data) {
            // Score the response as correct or incorrect.
            if (data.response === data.correct_response) {
                data.correct == 1;
            } else {
                data.correct == 0;
            }
        }

[SaoirseConnorDesai]

Thanks @jodeleeuw. I tried this but now it always evaluates to false.

Is my feedback trial also specified correctly?

var feedback_2_2 = {
        type: 'html-button-response',
        choices: ['Continue'],
        post_trial_gap: 500, 
        stimulus: function () {
            // The feedback stimulus is a dynamic parameter because we can't know in advance whether
            // the stimulus should be 'correct' or 'incorrect'.
            // Instead, this function will check the accuracy of the last response and use that information to set
            // the stimulus value on each trial.
            var last_trial_correct = jsPsych.data.get().last(1).values()[0].correct;
            if (last_trial_correct == 0) {
                return "<p>Correct!</p>"; // the parameter value has to be returned from the function
            } else {
                return "<p>Incorrect!</p>"; // the parameter value has to be returned from the function
            }
        }
    }

[jodeleeuw]

This looks OK to me. What version of jsPsych are you using?

Can you try adding console.log(data.response) in the on_finish() function for the practice trials?

[SaoirseConnorDesai]

Shamefully I'm still using 6.1.0. Perhaps that's why?

console.log(data.response) returns undefined