Skip rest of timeline if participant provides n correct answers (jspsych)

I have n decision trials in a timeline. Correct answers are recorded as data attributes. I want to skip the rest of the timeline if the participant provided a fixed number of correct answers. This calls for a conditional, but mine doesn't work.

var if_node = {
    timeline: [test_procedure],
    conditional_function: function(){
          var data = jsPsych.data.get()
          var correct_count = data.filter({correct: true}).count();
          return correct_count < 2
          }
    }

Reproducible code below (needs jspsych-6).

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="jspsych-6/jspsych.js"></script>
    <script src="jspsych-6/plugins/jspsych-html-keyboard-response.js"></script>
    <script src="jspsych-6/plugins/jspsych-html-button-response.js"></script>
    <link href="jspsych-6/css/jspsych.css" rel="stylesheet" type="text/css"></link>
  </head>
  <body></body>
  <script>

    /* create timeline */
    var timeline = [];

    /* test trials */

    var test_stimuli = [
      { word: "table", data: { false_word: '0' } },
      { word: "tfble", data: { false_word: '1' } },
      { word: "tablw", data: { false_word: '1' } }
    ];

    var trial = {
        type: ["html-button-response"],
        stimulus: jsPsych.timelineVariable('word'),
        choices: ["real", "fake"],
        margin_vertical: "0px",
        margin_horizontal: "8px",
        response_ends_trial: true,
        post_trial_gap: [500],
        data: jsPsych.timelineVariable('data'),
        on_finish: function(data){
          data.correct = data.false_word == data.button_pressed
        }
    };

    var test_procedure = {
      timeline: [trial],
      timeline_variables: test_stimuli
    }
    //timeline.push(test_procedure);

    var if_node = {
    timeline: [test_procedure],
    conditional_function: function(){
          var data = jsPsych.data.get()
          var correct_count = data.filter({correct: true}).count();
          return correct_count < 2
          }
    }

    timeline.push(if_node);

    /* start the experiment */
    jsPsych.init({
      timeline: timeline,
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });
  </script>
</html>

Solution

You can declare a correct_count variable at the beginning of the experiment, and increase that variable by 1 when the trial is correct, then at the if_node, check if that counter is larger than a number, execute the timeline accordingly.

I changed a few things on your code and highlighted my changes with comments. Please see them below.

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="jspsych-6/jspsych.js"></script>
    <script src="jspsych-6/plugins/jspsych-html-keyboard-response.js"></script>
    <script src="jspsych-6/plugins/jspsych-html-button-response.js"></script>
    <link href="jspsych-6/css/jspsych.css" rel="stylesheet" type="text/css"></link>
 
  </head>
  <body></body>
  <script>

    /* create timeline */
    var timeline = [];

    /* here I create correct_count variable to count correct trials */ 
    var correct_count = 0;
    /* test trials */

    var test_stimuli = [
      { word: "table", data: { false_word: '0' } },
      { word: "tfble", data: { false_word: '1' } },
      { word: "tablw", data: { false_word: '1' } }
    ];

    var trial = {
        type: ["html-button-response"],
        stimulus: jsPsych.timelineVariable('word'),
        choices: ["real", "fake"],
        margin_vertical: "0px",
        margin_horizontal: "8px",
        response_ends_trial: true,
        post_trial_gap: [500],
        data: jsPsych.timelineVariable('data'),
        on_finish: function(data){
          data.correct = data.false_word == data.button_pressed
          console.log(data.correct )
          if (data.correct = true){ // here I increment the counter variable if the response is correct
            correct_count++
            console.log(correct_count)
          } 
          
        }
    };

    var test_procedure = {
      timeline: [trial],
      timeline_variables: test_stimuli
    }
    //timeline.push(test_procedure);

    var if_node = {
    timeline: [test_procedure],
    conditional_function: function(){
      console.log(correct_count)
      if (correct_count < 2) { //here I check if counter is less than 2, if so, keep executing the timeline.
        return true
      }
    }
  }

    timeline.push(if_node);

    /* start the experiment */
    jsPsych.init({
      timeline: timeline,
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });
</script>
</html>