Progress bar behaves incorrectly when used with conditional_function / loop_function

[Shaobin-Jiang]

When used with conditional_function and the timeline is skipped

let jsPsych = initJsPsych({
    show_progress_bar: true,
    message_progress_bar: (progress) => `${progress * 100}`,
});

let trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: 'Trial 1',
};

let child_timeline = {
    type: jsPsychHtmlKeyboardResponse,
    timeline: [{stimulus: 'Trial 2.1'}, {stimulus: 'Trial 2.2'}],
    conditional_function: function () {
        return false;
    },
};

jsPsych.run([trial, child_timeline, trial]);

In this case, when the second trial is finished, the progress ends at 0.75.

When used with loop_function and the timeline is looped

let jsPsych = initJsPsych({
    show_progress_bar: true,
    message_progress_bar: (progress) => `${progress * 100}`,
});

let trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: 'Trial 1',
};

let counter = 0;
let child_timeline = {
    type: jsPsychHtmlKeyboardResponse,
    timeline: [{stimulus: 'Trial 2.1'}, {stimulus: 'Trial 2.2'}],
    loop_function: function () {
        // loop the timeline twice
        counter++;
        return counter < 2;
    },
};

jsPsych.run([trial, child_timeline, trial]);

Progress increases with a 0.25 step and reaches 1 just before the second trial runs.