Question about conditional timeline module

[ghost]

Hello everyone,

I am new to jsPsych. These days, I am going to conduct an experiment. This experiment involves letting participants watch several video trials. In each video trial, there exists dots movement. In some video trials, there exists a chasing behavior like a wolf chasing a sheep, while others doesn't. We are going to first let participants indicate if there exists such a chasing behavior. If participants answer yes, then they need to indicate which dot is wolf and which dot is sheep right after the first question being answered; if participants answer no, then they need to answer an attention check question.
The logic of my code can be displayed like the figure: https://imgur.com/58P0EHI

Below is my current code demo. For the moment, my question is that the code doesn't work in the conditional timeline module. That means, it can run but will skip "if_node" part.

Can anyone give me some suggestions on that?
Thanks!

`<script>

    // initialize jsPsych
    var jsPsych = initJsPsych({
        on_finish: function() {
            jsPsych.data.displayData();
        }
    });

    // create timeline
    var timeline = [];

    // enter participant id
    var enter_prolific_id = {
        type: jsPsychSurveyText,
        questions: [{prompt: "What is your Prolific ID?", rows: 1, columns: 10, name: "prolific-id", required: true}]
    };
    timeline.push(enter_prolific_id);

    // full screen
    var full_screen = {
        type: jsPsychFullscreen,
        fullscreen_mode: true
    };
    timeline.push(full_screen);

    // define welcome message trial
    var instructions_block = {
        type: jsPsychInstructions,
        pages: [
            "<p> Please turn off music, cell phone and other devices that might be distracting.</p>" +
            "<p> By click the Next button, the experiment will start.</p>"
        ],
        show_clickable_nav: true
    };
    timeline.push(instructions_block);

    // define instructions trial
    var instructions = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: 
            "<p>In this experiment, several animations will appear on the screen.</p>" +
	        "<p>In each animation, you will see several moving dots with different colors. In some animations, within those moving dots, there exists a <strong>'Wolf'</strong> dot chasing a <strong>'Sheep'</strong> dot.</p>" +
		    "<p>However, in some animations, there does not exist a <strong>'Wolf'</strong> dot chasing a <strong>'Sheep'</strong> dot.</p>" +
		    "<p>First, you have to indicate whether there is a <strong>'Wolf - Sheep'</strong> chasing behavior.</p>" +
            "<p>If yes, the next step is to indicate which dot is <strong>'Wolf'</strong> and which dot is <strong>'Sheep'</strong>.</p>" + 
		    "<p>This will take you only a few minutes.</p>"+
		    "<p>Press <strong>S</strong> key to start!</p>",
        choices: 's',
        post_trial_gap: 2000
    };
    timeline.push(instructions);

    var preload = {
        type: jsPsychPreload,
        auto_preload: true 
    };

    var video_trials = {
        timeline: [
            {
                type: jsPsychVideoKeyboardResponse,
                stimulus: jsPsych.timelineVariable('video'),
                prompt: "<p>Was there a wolf-sheep chasing? If yes, please press button <strong>F</strong>. Or <strong>J</strong> for no.</p>",
                choices: ['f', 'j'],
                correct_response: jsPsych.timelineVariable('correct_response'),
                response_allowed_while_playing: true,
                response_ends_trial: true
            },
            {
                type: jsPsychHtmlButtonResponse,
                stimulus: "<p>Which dot is <strong>wolf</strong>?</p>",
                choices: ['1', '2', '3', '4', '5', '6'],
                prompt: '<p>Please click the above button to answer the question.'
            },
            {
                type: jsPsychHtmlButtonResponse,
                stimulus: "<p>Which dot is <strong>sheep</strong>?</p>",
                choices: ['1', '2', '3', '4', '5', '6'],
                prompt: '<p>Please click the above button to answer the question.'
            }
        ],

        timeline_variables: [
            {video: ["video/absent1.mp4"], correct_response: 'j'},
            {video: ["video/absent2.mp4"], correct_response: 'j'},
            {video: ["video/present1.mp4"], correct_response: 'f'},
            {video: ["video/present2.mp4"], correct_response: 'f'}
        ],
        data: {
            task: 'response',
            correct_response: jsPsych.timelineVariable('correct_response')
        },
        on_finish: function(data){
            data.correct = jsPsych.pluginAPI.compareKeys(data.response, data.correct_response);
        },
        randomize_order: true,
        repetitions: 2
    };

    timeline.push(video_trials);

    var attention = {
        type: jsPsychHtmlButtonResponse,
        stimulus: "<p>Which dot is <strong>green</strong>?</p>",
        choices: ['1', '2', '3', '4', '5', '6'],
        prompt: '<p>Please click the above button to answer the question.'
    };

    var if_node = {
        timeline: [attention],
        conditional_function: function(){
            var data = jsPsych.data.get().last(1).values()[0];
            if(jsPsych.pluginAPI.compareKeys(data.response, 'f')){
                return false;
            } else {
                return true;
            }
        }
    };
    
    jsPsych.run([video_trials, if_node]);
    // start the experiment
    jsPsych.run(timeline);

</script>`

[jodeleeuw]

Hi @freewillbelief,

Right now the video_trials will run before the if_node, and the video_trials includes the two questions about which dot is the wolf and the sheep. When the if_node trial runs, the data value is the data from the last trial asking which dot is the sheep.

I think putting the if_node as part of the video_trials timeline will help solve the problem.

var attention = {
  type: jsPsychHtmlButtonResponse,
  stimulus: "<p>Which dot is <strong>green</strong>?</p>",
  choices: ["1", "2", "3", "4", "5", "6"],
  prompt: "<p>Please click the above button to answer the question.",
};

var if_node = {
  timeline: [attention],
  conditional_function: function () {
    var data = jsPsych.data.get().last(1).values()[0];
    if (jsPsych.pluginAPI.compareKeys(data.response, "f")) {
      return false;
    } else {
      return true;
    }
  },
};

var video_trials = {
  timeline: [
    {
      type: jsPsychVideoKeyboardResponse,
      stimulus: jsPsych.timelineVariable("video"),
      prompt:
        "<p>Was there a wolf-sheep chasing? If yes, please press button <strong>F</strong>. Or <strong>J</strong> for no.</p>",
      choices: ["f", "j"],
      correct_response: jsPsych.timelineVariable("correct_response"),
      response_allowed_while_playing: true,
      response_ends_trial: true,
    },
    if_node, /** note the inclusion of the if_node here **/
    {
      type: jsPsychHtmlButtonResponse,
      stimulus: "<p>Which dot is <strong>wolf</strong>?</p>",
      choices: ["1", "2", "3", "4", "5", "6"],
      prompt: "<p>Please click the above button to answer the question.",
    },
    {
      type: jsPsychHtmlButtonResponse,
      stimulus: "<p>Which dot is <strong>sheep</strong>?</p>",
      choices: ["1", "2", "3", "4", "5", "6"],
      prompt: "<p>Please click the above button to answer the question.",
    },
  ],

  timeline_variables: [
    { video: ["video/absent1.mp4"], correct_response: "j" },
    { video: ["video/absent2.mp4"], correct_response: "j" },
    { video: ["video/present1.mp4"], correct_response: "f" },
    { video: ["video/present2.mp4"], correct_response: "f" },
  ],
  data: {
    task: "response",
    correct_response: jsPsych.timelineVariable("correct_response"),
  },
  on_finish: function (data) {
    data.correct = jsPsych.pluginAPI.compareKeys(
      data.response,
      data.correct_response
    );
  },
  randomize_order: true,
  repetitions: 2,
};

In this version of the code the attention check should only run if they answer f on the previous trial. However, the other two questions will still run no matter what. You can put them inside their own timeline with a conditional_function to ensure that they only run in certain situations, just like the current if_node.

[ghost]

Dear Prof. Dr. Joshua R. de Leeuw,

Thanks for your reply and help. Now, I solved it based on your suggestions.