Show prompt in survey-text in two lines

[xliu382]

Hi, I'm using survey-text to present a question and would like to have my prompt displayed in two lines. I tried {prompt: [jsPsych.timelineVariable('q'), '<br><br>' ,jsPsych.timelineVariable('a')], columns: 6, required: true}, but the two commas around <br> were identified and displayed as strings too. Sorry I'm very new to JavaScript and this may be a very simple question. Here's my full code:

var timeline = [];
var questions = ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'];
var answers = ['A1', 'A2', 'A3','A4', 'A5', 'A6'];
var s1 = answers.map((answer,i) => ({answer, question: questions[i]}));
var s2 = jsPsych.randomization.sampleWithoutReplacement(s1, 4);
var s2q = s2.map(function(a) {return a.question;});
var s2a = s2.map(function(a) {return a.answer;});

var search_trial = {
    timeline_variables: [
        {data: s2[0], q: s2q[0], a: s2a[0]},
        {data: s2[1], q: s2q[1], a: s2a[1]},
        {data: s2[2], q: s2q[2], a: s2a[2]},
        {data: s2[3], q: s2q[3], a: s2a[3]},
    ],
    timeline: [
        {type: 'html-button-response',
        stimulus: jsPsych.timelineVariable('q'),
        choices: ['search icon'],
        button_html: ['<button class="jspsych-btn"><img src="jspsych-6.0.5/img/search_icon.png" width = "40"></button>'], 
        prompt: '<p style= "font-size: 15px; line-height: 12px;">[Click the search icon to get the answer.]</p>',
        data: jsPsych.timelineVariable('data')
        },
        {type: 'survey-text',
        questions: [
            {prompt: [jsPsych.timelineVariable('q'), '<br><br>' ,jsPsych.timelineVariable('a')], columns: 6, required: true},
        ],
        button_label: ['submit'],
        data: jsPsych.timelineVariable('data'),     
        preamble: '<p style="font-size: 15px; line-height: 12px;">[Type your answer and press submit.] </p>',
        }
    ],
};

I would also like to add a word "Answer" before the actual answer - "Answer: A1" - below the "Q1" and above the placeholder, as well as expanding the line distance between the question and search icon on first page (maybe by adding an extra blank line between them?). I suppose their solutions are the same as to the first question though.

Thank you!!

[jodeleeuw]

Hi @xliu382,

You can use a function-as-parameter to achieve this. Unfortunately we haven't yet implemented support for making the individual parts of the questions array functions, so you have to do it at the level of the questions parameter.

questions: function(){
	return [
		{prompt: jsPsych.timelineVariable('q', true) + "<br><br>" + jsPsych.timelineVariable('a', true), columns: 6, required: true}
	]
}

[xliu382]

Thank you so much!