fail to create a repeat practice conditional

[viviantic]

Hello jsPsych team!

Thank you so much for the workshops and tutorial videos. I am creating a reading experiment, referencing @jodeleeuw 's moving window script and the script for the semantic relatedness experiment that @becky-gilbert demonstrated in https://www.youtube.com/watch?v=LP7o0iAALik. However, I failed to replicate a repeat_practice conditional for my experiment. I've checked it using the developer tool, and here's the error message that I got:

I think that there's something wrong regarding how I define the variable of the last_prac_trails, especially the filter part, but I am not sure how to fix it. I was wondering if you could take a look at my script and give me some suggestions on how to revise it. Any comments or suggestions would be greatly appreciated.

`
// create practice_stimuli
var practice_stimuli = [
{words: [,'A','cat','was','chasing','a','dog.'], question: "A dog was chased by a cat.",data: {correct_response: "j",stimulus: "a/cat/was/chasing/a/dog",question: "A dog was chased by a cat."}},

    {words: [,'A','cat','was','chasing','a','mouse'], question: "A mouse was chased by a cow.",data: {correct_response: "f",stimulus: "a/cat/was/chasing/a/cow",question: "A cat was chased by a cow."}},

    {words: [,'A','thief','was','chasing','a','cop.'], question: "A cop was chased by a thief.",data: {correct_response: "j",stimulus: "a/thief/was/chasing/a/cop",question: "A cop was chased by a thief."}},
];

// create practice
var practice = {
	type: "moving-window-button-phrase",
	words: jsPsych.timelineVariable("words"),
	data: jsPsych.timelineVariable("data")
};

// create practice_question
var practice_question = {
	type: "html-keyboard-response",
	stimulus: function() {
            return '<span style="font-size:30px;">' + jsPsych.timelineVariable('question', true) + '</span>';
        },
	choices: ["f", "j"],
	data:jsPsych.timelineVariable("data"),
	post_trial_gap: 500,
    on_finish: function(data) {
            var acc = false;
            if (data.correct_response == jsPsych.pluginAPI.convertKeyCodeToKeyCharacter(data.key_press)) {
                acc = true;
            }
            data.accuracy = acc;
        }
    
        };

//create feedback
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;
    },
    choices: jsPsych.NO_KEYS,
    trial_duration: 2000
    };

//create practice procedure 
var practice_procedure = {
        timeline: [fixation, practice, practice_question, feedback],
        timeline_variables: practice_stimuli,
        randomize_order: true
    };
//create repeat practice message
var repeat_practice_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_practice_conditional = {
        timeline: [repeat_practice_message],
        conditional_function: function() {
            var last_prac_trials = jsPsych.data.get().filter({data:jsPsych.timelineVariable("data")}).last(practice_question.length);
            var n_correct = last_prac_trials.filter({accuracy: true}).count();
            var prop_corr = n_correct/practice_question.length;
            if (prop_corr < 0.6) {
                repeat_prac = true;
                return true;
            } else {
                repeat_prac = false;
                return false;
            }
        }
    }

var instructions_practice_loop = {
        timeline: [instructions, practice_procedure, repeat_practice_conditional],
        loop_function: function() {
            if (repeat_prac == true) {
                return true;
            } else {
                return false;
            }
        }
    }
    timeline.push(instructions_practice_loop);

// run experiment
jsPsych.init({
	timeline: timeline,
	on_finish: function(){
		jsPsych.data.displayData();
	}
});`

[becky-gilbert]

Yes you're right, the issues is with how you're defining last_prac_trials in the conditional function. Specifically, you can't use the jsPsych.timelineVariable function there. The jsPsych.timelineVariable function can only be used inside trial objects that are part of a timeline that uses timeline variables, since the function is used to get information from the associated timeline variables array.

Instead, inside the filter function, you should provide some key-value pair(s) that uniquely identify all of the practice trial data. You could filter on the trial type being "html-keyboard-response", but that would select both the practice_trial trials and the feedback trials, which isn't what you want.

So one way to do this is to first add a 'flag' to the practice_trial data that will make it easier to identify these trials in your filter, like this:

var practice_question = {
  ...
  data: {
    trial_part: "practice_question",
    correct_response: jsPsych.timelineVariable("correct_response"),
    stimulus: jsPsych.timelineVariable("stimulus"),
    question: jsPsych.timelineVariable("question")
  },
  ...
};

Then, in your conditional function, you can filter the data on trial_part: 'practice_question', like this:

var last_prac_trials = jsPsych.data.get().filter({trial_part: 'practice_question'}).last(practice_question.length);

Does that do what you need?

[viviantic]

Thank you for the reply, @becky-gilbert! I did what you suggested. The error message went away, but now for all the practice_questions, no matter I press f or j (to get correct or incorrect responses), I'll only get "Incorrect" as my feedback. Moreover, even if I get all three questions wrong, the repeat_practice_conditional is still not triggered. Any suggestions on how to fix this?

The revised script is here:
`
// create practice_stimuli
var practice_stimuli = [
{words: [,'A','cat','was','chasing','a','dog.'], question: "A dog was chased by a cat.",data: {correct_response: "j",stimulus: "a/cat/was/chasing/a/dog",question: "A dog was chased by a cat."}},

    {words: [,'A','cat','was','chasing','a','mouse'], question: "A mouse was chased by a cow.",data: {correct_response: "f",stimulus: "a/cat/was/chasing/a/cow",question: "A cat was chased by a cow."}},

    {words: [,'A','thief','was','chasing','a','cop.'], question: "A cop was chased by a thief.",data: {correct_response: "j",stimulus: "a/thief/was/chasing/a/cop",question: "A cop was chased by a thief."}},
];

// create practice
var practice = {
	type: "moving-window-button-phrase",
	words: jsPsych.timelineVariable("words"),
	data: jsPsych.timelineVariable("data")
};

// create practice_question
var practice_question = {
	type: "html-keyboard-response",
	stimulus: function() {
            return '<span style="font-size:30px;">' + jsPsych.timelineVariable('question', true) + '</span>';
        },
	choices: ["f", "j"],
	data: {
                trial_part: "practice_question",
                correct_response: jsPsych.timelineVariable("correct_response"),
                stimulus: jsPsych.timelineVariable("stimulus"),
                question: jsPsych.timelineVariable("question")
             },
	post_trial_gap: 500,
    on_finish: function(data) {
            var acc = false;
            if (data.correct_response == jsPsych.pluginAPI.convertKeyCodeToKeyCharacter(data.key_press)) {
                acc = true;
            }
            data.accuracy = acc;
        }
    
        };

//create feedback
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;
    },
    choices: jsPsych.NO_KEYS,
    trial_duration: 2000
    };

//create practice procedure 
var practice_procedure = {
        timeline: [fixation, practice, practice_question, feedback],
        timeline_variables: practice_stimuli,
        randomize_order: true
    };
//create repeat practice message
var repeat_practice_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_practice_conditional = {
        timeline: [repeat_practice_message],
        conditional_function: function() {
            var last_prac_trials = jsPsych.data.get().filter({trial_part: 'practice_question'}).last(practice_question.length);
            var n_correct = last_prac_trials.filter({accuracy: true}).count();
            var prop_corr = n_correct/practice_question.length;
            if (prop_corr < 0.6) {
                repeat_prac = true;
                return true;
            } else {
                repeat_prac = false;
                return false;
            }
        }
    }

var instructions_practice_loop = {
        timeline: [instructions, practice_procedure, repeat_practice_conditional],
        loop_function: function() {
            if (repeat_prac == true) {
                return true;
            } else {
                return false;
            }
        }
    }
    timeline.push(instructions_practice_loop);

// run experiment
jsPsych.init({
	timeline: timeline,
	on_finish: function(){
		jsPsych.data.displayData();
	}
});`

[becky-gilbert]

Ah, sorry, that was my fault - I told you to add the data to the practice trials like this:

data: {
  trial_part: "practice_question",
  correct_response: jsPsych.timelineVariable("correct_response"),
  stimulus: jsPsych.timelineVariable("stimulus"),
  question: jsPsych.timelineVariable("question")
}

But that doesn't work because, in your practice_stimuli array, the correct_response and stimulus keys are nested inside of the data key, which means that they can't be accessed by the jsPsych.timelineVariable function. So the reason that your responses were always scored as incorrect is because correct_response was never stored in the trial data.

I think the easiest solution is to remove the nested structure from your objects in your practice_stimuli array, like this:

var practice_stimuli = [
        { words: [, 'A', 'cat', 'was', 'chasing', 'a', 'dog.'], question: "A dog was chased by a cat.", correct_response: "j", stimulus: "a/cat/was/chasing/a/dog", question: "A dog was chased by a cat." },
        { words: [, 'A', 'cat', 'was', 'chasing', 'a', 'mouse'], question: "A mouse was chased by a cow.", correct_response: "f", stimulus: "a/cat/was/chasing/a/cow", question: "A cat was chased by a cow." },
        { words: [, 'A', 'thief', 'was', 'chasing', 'a', 'cop.'], question: "A cop was chased by a thief.", correct_response: "j", stimulus: "a/thief/was/chasing/a/cop", question: "A cop was chased by a thief." },
    ];

A second issue is that, inside of your repeat_practice_conditional, you're using the value of practice_question.length to get the number of practice trials. But practice_question is actually your trial object, and the length of an object is undefined, so your prop_cor value was undefined (which means that your repeat practice message was never shown and the value of repeat_prac was never changed to true). So you just need to change that to be the length of your practice stimuli array:

var prop_corr = n_correct / practice_stimuli.length;

I hope that helps! Let us know if it's working now.

[viviantic]

It worked like a charm! Thank you so much, @becky-gilbert!
jsPsych is super! You guys are amazing!