save timelineVariable for each trial - js jsPsych

Question

I am trying to save a timelineVariable in this case border_color. For each trial I am changing the color of the border around a stimulus (randomly selecting it from an array border_color). However I am now struggling to save border(color) for each trial in my data, i.e. I want to when I export it see a column for border color and for it to then have the values in the array (red, blue).

I am still fairly new to js so apologies if this is very obvious. I have tried variations of the following: data: {frame_color: border},

but have had no luck.

I would be grateful for any advice!

var trial = {
      type: "categorize-image",
      stimulus: jsPsych.timelineVariable('stimulus'),
      key_answer: jsPsych.timelineVariable('key_answer'),
      choices: ['space'],
      border: jsPsych.timelineVariable('border_color'),
      stimulus_duration: 1000,
      trial_duration: 1000,
      feedback_duration: false,
      response_ends_trial: false,
      post_trial_gap: 500 , //interstimulusinterval
      on_start: function(trial){$("#jspsych-content").css({'border-color': trial.border[0],'border-style':'solid', 'border-width':'40px'})},
      on_finish: function(){$("#jspsych-content").css({'border-color': "white",'border-style':'solid','border-width':'40px'})},
    };

Answer 1

You can use the data parameter for the trial to add any data that you'd like to the trial. These are the relevant docs from jsPsych.

var trial = {
    ...,
    data: {
        border: jsPsych.timelineVariable('border_color')
    }
}