Using timeline variables for prompts in survey-multi-choice

[holgerMitterer]

I am setting up a familiarity rating task (for L2 speakers), I use a survey-multi-choice template,
There is a large array of words, and that is used in a procedure as timeline_variables
For the rating task, I set the prompt like this (see below), assuming that the prompt will change every time
the trial is called, since I use function() {}

  questions: [
    {
      prompt: function() {
        return '<div style="font-size: 24px;">\
                How well do you know the word:\
              </div><div style="font-size:32px;font-weight:bold;">' + jsPsych.evaluateTimelineVariable('word') + 
              '</div>'
      },
      name: 'familiarity',
      options: [
        "I do not know this word",
        "I have seen this word before, but do not know its meaning",
        "I have a vague idea what it means",
        "I know what it means",
        "I could use this word correctly myself"
      ],
      required: true
    }
  ],

However, when used in a procedure, I always see the first word, as if the function is only evaluated once.
Weirdly enough, in the same trial, I send the same timeline variable to the console in the on_start function.

on_start: function() {
    trialCounter++;
    if (trialCounter % breakAfterEvery === 0) {
      time4break = true;
    } else {
      time4break = false;
    }
    console.log('started trial with ' + jsPsych.evaluateTimelineVariable('word'))
 },

This loops nicely through the words, I get the output:

started trial with house
started trial with beautiful

Why is there a disconnect the value of
jsPsych.evaluateTimelineVariable('word') used in the prompt and
jsPsych.evaluateTimelineVariable('word') used in the on_start function.
And how can I get the prompt to change?

Kind regards,
Holger

[daveshenal]

Hii Holger,

The disconnect is because survey-multi-choice evaluates the questions array before on_start runs, not during it. So your function() wrapper does get called, but its called at question build time when the timeline variable hasnt advanced yet.

on_start fires at the right moment in the trial lifecycle, which is why it logs correctly.

The fix is to use the on_load or data workaround. Move the prompt construction into a place that runs at the correct time. The cleanest solution for survey-multi-choice is to use a dynamic trial object

{
  type: jsPsychSurveyMultiChoice,
  on_start: function(trial) {
    const word = jsPsych.evaluateTimelineVariable('word');
    trial.questions = [
      {
        prompt: `<div style="font-size: 24px;">How well do you know the word:</div>
                 <div style="font-size:32px;font-weight:bold;">${word}</div>`,
        name: 'familiarity',
        options: [
          "I do not know this word",
          "I have seen this word before, but do not know its meaning",
          "I have a vague idea what it means",
          "I know what it means",
          "I could use this word correctly myself"
        ],
        required: true
      }
    ];
  }
}

By setting trial.questions inside on_start, you are constructing the prompt at the same point in the lifecycle where your console.log works so evaluateTimelineVariable returns the correct word for that trial.