Has anyone combined an image with the jsPsychSurveyHtmlForm? And read in variables into that input function?

[csavasegal]

To add more detail:

Is there a plug-in (or a way to create one easily) that combines an image file with the jsPsychSurveyHtmlForm plugin?

And more importantly, have people had success reading in variables into the html component of the jsPsychSurveyHtmlForm plugin?
So rather than this:
html: '<p> <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>',

Something like this:
<p>${jsPsych.timelineVariable('name')} <input name="second" type="text" /></p>

It doesn't seem to work for me, but I am a fan of the 'response' save out for this plug in.

Thanks!!

[becky-gilbert]

Hi @csavasegal, you can add an image element directly into the html string, e.g.

{
  type: jsPsychSurveyHtmlForm,
  html: '<div><img src="img/my_image.png"/></div><p><input name="first" type="text" /></p>'
}

And you can use variables to generate the value of the html parameter by turning it into a dynamic parameter (i.e. a function that returns the value that should be used on that trial).

{
  type: jsPsychSurveyHtmlForm,
  html: function() {
    return '<p>'+jsPsych.timelineVariable('name')+'<input name="second" type="text" /></p>';
  }
}

Note: with older versions of jsPsych (before v6.3), you need to add a second true argument when using the jsPsych.timelineVariable function inside of another function, e.g. jsPsych.timelineVariable('name', true)'.

Does this work for you?

[csavasegal]

@becky-gilbert Yes, this works great - thank you I really appreciate it!

Just as a follow-up if it helps someone else:
I wanted to dynamically return both an image and text so I did so like this:

{
            type: jsPsychSurveyHtmlForm,
            html: function() {
                text_here = '<p>'+jsPsych.timelineVariable('name')+'<input name="second" type="text" /></p>'
                var html_img = `
                    <img src="${jsPsych.timelineVariable('face')}">`
                return [html_img,text_here]
  }
        },

And my timeline variables were as follows:

timeline_variables: [
        { face: 'images/img1.jpeg', name: 'Alex' },
        { face: 'images/img2.jpeg', name: 'Jim' },
    ]

[becky-gilbert]

Hi @csavasegal, it's hard to know what the problem is without seeing exactly what your code looks like. Maybe you have two return statements? If so, you need to combine everything into one HTML string and then return that.

Also I think you need double quotes in the HTML string before and after the jsPsych.timelineVariable('face') in the image source, as well as a closing > for the img tag.

Does this work, and is this what you are trying to do?

{
  //...
  html: function() {
   return '<div><img src="'+jsPsych.timelineVariable('face')+'"/><p>'+jsPsych.timelineVariable('name')+'<input name="second" type="text" /></p></div>'
  }
}

[becky-gilbert]

Ah thanks for including your code - yes one problem is that the value of the html parameter has to be a string, whereas you were returning an array. So you need to combine the two strings into one and then return that.

[csavasegal]

Sorry I didn't see your response, so I had edited my initial post.
This is really helpful - thanks again! :)