trying to add html code around my timelinevariable stimulus

[wxlpmnb]

Beginner here, I'm making a test in which the user has to choose from two buttons based on data that is delivered. i'd like there to be: A short instructions <p> paragraph, as well as a table containing data for the participant to base its choice on.

the 3rd to 5th line are where it happens:

var pdt_essai = {
  type: jsPsychHtmlButtonResponse,
  stimulus: function() {
    var stim = `<p>Hello</p>` + jsPsych.timelineVariable('tableau');
    return stim;
  },
  choices: ['Véhicule 1', 'Véhicule 2'],
  button_html: ['Véhicule 1', 'Véhicule 2'],
  data: {
    task: "choix",
    vehicule1crit: jsPsych.timelineVariable('Vehicule_1'),
    vehicule2crit: jsPsych.timelineVariable('Vehicule_2')
  },
  on_finish: function(data){
    data.vehicule_choisi = (data.response+1);
  }
};

When I use this code, instead of displaying "Hello" and then the content of my timeline variable, it does this:

as you can see, my htlm gets replaced by [object Object] for reasons i can't seem to understand. would anybody know why this happen and how to fix it?

[jodeleeuw]

Hi @wxlpmnb

When timeline variables are referenced inside a function, the correct function to call is jsPsych.evaluateTimelineVariable().

stimulus: function() {
    var stim = `<p>Hello</p>` + jsPsych.evaluateTimelineVariable('tableau');
    return stim;
  },

[wxlpmnb]

Ah, thanks a lot :)