practice response feedback for survey-multi-choice

[y-j-huang]

I'm trying to evaluate the response accuracy of practice trials and repeat if the participants don't pass a threshold. I ran into a few problems:

1. the data.correct_response seems to be undefined. I wonder if that's because I didn't define it correctly for the stimuli. I couldn't find how to do that though.
2. jsPsych.data.getLastTrialData().values()[0].accuracy seems to be undefined as well. "feedback" just throw an error and doesn't appear. In the debuger, the error is related to an undefined variable
3. repeat_prac_conditional also throw an error related to undefined variable

I feel I might have made a silly mistake somewhere but I cannot figure out where. I'd appreciate some feedback very much!

var timeline = []; 

var practice_info = [{questions: [{prompt: "I like vegetables", name: 'Vegetables', options: ["Yes", "No"],  correct_response: "Yes", required: true}]},
{questions:[{prompt: "I like fruits", name: 'Fruits', options: ["Yes", "No"], correct_response: "Yes", required: true}]}
];

var practice_trial = {
    type: 'survey-multi-choice',
    questions: jsPsych.timelineVariable('questions'),
    prompt: jsPsych.timelineVariable('prompt'),
    options: jsPsych.timelineVariable('options'),
    required: jsPsych.timelineVariable('required'),
    data:{trial_part: 'practice',
       correct_response: jsPsych.timelineVariable('correct_response')},
    on_finish: function(data) {
            var acc = false;
            if (data.correct_response == data.responses) {
                acc = true;
            }
            data.accuracy = acc;
            console.log(data.correct_response);
        }
};
 
 
var feedback = {
        type: 'html-keyboard-response',
        stimulus: function() {
            var feedback_text = '<span style="color:red;font-size:30px;">Incorrect.</span>';
            var last_resp_acc = jsPsych.data.getLastTrialData().values()[0].accuracy;
            if (last_resp_acc == true) {
                feedback_text = '<span style="color:green;font-size:30px;">Correct!</span>'
            }
            return feedback_text;
            console.log(last_resp_acc);
        },
        choices: jsPsych.NO_KEYS,
        trial_duration: 2000
    };

var practice = {
    timeline: [practice_trial, feedback]
    timeline_variables: practice_info,
}

timeline.push(practice);


var repeat_prac_message = {
        type: 'html-button-response',
        stimulus: '<p>You did not make enough correct responses to continue.</p>'+
                  '<p>Now you will have a chance to repeat the instructions and practice trials again.</p>',
        choices: ['Next']
    };

    var repeat_prac_conditional = {
        timeline: [repeat_prac_message],
        conditional_function: function() {
            var last_prac_trials = jsPsych.data.get().filter({trial_part:'practice'}).last(practice_info.length);
            var n_correct = last_prac_trials.filter({accuracy: true}).count();
            var prop_corr = n_correct/practice_info.length;
            if (prop_corr < 0.8) {
                repeat_prac = true;
                return true;
            } else {
                repeat_prac = false;
                return false;
            }
        }
    }
    
timeline.push(repeat_prac_conditional)

[jodeleeuw]

Hi @y-j-huang ,

It looks like your timeline variables array is not quite right. You've currently got it as:

var practice_info = [
	{
		questions: [
			{prompt: "I like vegetables", name: 'Vegetables', options: ["Yes", "No"],  correct_response: "Yes", required: true}
		]
	},
	{
		questions: [
			{prompt: "I like fruits", name: 'Fruits', options: ["Yes", "No"], correct_response: "Yes", required: true}
		]
	}
];

I added some indentation to make the structure of the variable clear. With this structure there is only 1 timeline variable per trial: questions. Everything else is nested within the questions variable.

You'll want to move the correct_response option out of this variable:

var practice_info = [
	{
		questions: [
			{prompt: "I like vegetables", name: 'Vegetables', options: ["Yes", "No"],   required: true}
		],
		correct_response: "Yes",
	},
	{
		questions: [
			{prompt: "I like fruits", name: 'Fruits', options: ["Yes", "No"], required: true}
		],
		correct_response: "Yes",
	}
];

Note that the way you've defined the trial object is also not quite right:

var practice_trial = {
    type: 'survey-multi-choice',
    questions: jsPsych.timelineVariable('questions'),
    prompt: jsPsych.timelineVariable('prompt'),
    options: jsPsych.timelineVariable('options'),
    required: jsPsych.timelineVariable('required'),
    data:{trial_part: 'practice',
       correct_response: jsPsych.timelineVariable('correct_response')},
    on_finish: function(data) {
            var acc = false;
            if (data.correct_response == data.responses) {
                acc = true;
            }
            data.accuracy = acc;
            console.log(data.correct_response);
        }
};

The prompt, options, and required parameters are all nested under questions. So it should look like this:

var practice_trial = {
    type: 'survey-multi-choice',
    questions: jsPsych.timelineVariable('questions'),
    data: {
	trial_part: 'practice',
	correct_response: jsPsych.timelineVariable('correct_response')
    },
    on_finish: function(data) {
        var acc = false;
        if (data.correct_response == data.responses) {
            acc = true;
        }
        data.accuracy = acc;
        console.log(data.correct_response);
   }
};

[y-j-huang]

Thank you! That fixed the problem of reference for data.correct_response. It seems that data.responses is not the correct way to refer to the results because it's an object not a string for comparison. Is there a way to refer to the the string?

[jodeleeuw]

You can convert the string-based representation back to an object via JSON.stringify(data.responses). Then you can look at the object to find the field with the answer.

[y-j-huang]

Thank you!