Question counter for nested timeline

[Stella-xyl]

Hi,

I'm trying to add counter number as '(Question 1/5)' '(Question 2/5)' for each question. I found a possible solution here: https://groups.google.com/g/jspsych/c/MH9GFxhj4q8, but I'm not sure where to put the for loop. Here's my code and I think I put it in a wrong place because thei will not change and is always 1:

var trial = {
    timeline_variables: [ 
        {data: 'Q1'},
        {data: 'Q2'},
        {data: 'Q3'},
        {data: 'Q4'},
        {data: 'Q5'}
    ],
    timeline: [ { 
        timeline: [
            {type: 'survey-text',
            questions: function(){
                for (var i = 1; i <= 5; i++) {
                    return [{ prompt: '(Question' + i + '/5)' + '<br>' + jsPsych.timelineVariable('data', true), columns: 6, required: true}]
                }
            },
            button_label: ['submit'],
            data: jsPsych.timelineVariable('data')
            }
        ],
    }, get_ready]    
};
timeline.push(trial);

Thank you!

[jodeleeuw]

Hi @Stella-xyl ,

Are you intending for each question to be on a separate page, or do you want all questions on a single page?

[Stella-xyl]

I want each question to be on a separate page.

[Stella-xyl]

Thank you both for your help! This discussion forum is amazing!

[becky-gilbert]

One way to do this is to have a variable that you use to track the question number across trials during the task, and use the current value of that variable as your question number in the prompt (instead of i). You can initialize this variable to 1 and increase it by 1 in the trial's on_finish function.

var timeline = []
var question_number = 1;
var trial = {
    timeline_variables: [ 
        {data: 'Q1'},
        {data: 'Q2'},
        {data: 'Q3'},
        {data: 'Q4'},
        {data: 'Q5'}
    ],
    timeline: [
        {
            type: 'survey-text',
            questions: function(){
                return [{ prompt: '(Question ' + question_number + '/5)' + '<br>' + jsPsych.timelineVariable('data', true), columns: 6, required: true}]
            },
            button_label: 'submit',
            data: jsPsych.timelineVariable('data'),
            on_finish: function() {
                question_number++;
            }
        }
    ]  
};
timeline.push(trial);

Is that what you wanted?

[Stella-xyl]

Yes! This is exactly what I wanted. Thank you!