Image with Text Response

[MelissaJEvans]

Hi! I'm a first year PhD student at Vanderbilt University.
I'm fairly new to coding but took the moving research online course this summer and thought jsPsych would work for my upcoming project.

My intention is to show participants an image and have them type a sentence in response. Essentially, I want to use the image-button-response plugin but with the addition of a textbox that participants could fill in (and then their responses would be saved).
My goal was to essentially modify the image-button-response plugin, but I couldn't find any plugins beyond survey-text that use a textbox and I haven't been able to easily isolate the part of the code in survey-text that creates a textbox.

in a nutshell: how could I modify image-button-response to place a textbook between the image and button?

Any help would be appreciated!

[becky-gilbert]

Hi @MelissaJEvans, you could modify the image button response plugin to do this. But if I were you, I would use the survey-text plugin and show the image by adding it into the question parameter HTML. Note that if you do it this way, you'll need to manually preload the images.
Feel free to let us know if you need help implementing either of these approaches.

[MelissaJEvans]

@becky-gilbert
Hey! That makes sense, could I just adapt the "prompt" modifier to accept an image instead of a string? I ask because I don't want a question above the image. If so, what would I need to change besides "type"?

Melissa Evans

[becky-gilbert]

@MelissaJEvans sorry for the very slow reply! Not sure if you're still looking for help with this but thought I'd reply anyway. The question prompts take any HTML-formatted text, so if you just want the image to be the question prompt, you can just need to add the HTML that shows the image using the img tag:

var trial = {
  type: 'survey-text',
  questions: [
    {prompt: '<img src="jspsych-6.1.0/examples/img/1.gif">', rows: 1, columns: 40}
  ]
};

jsPsych.init({
  timeline: [trial],
  preload_images: ['jspsych-6.1.0/examples/img/1.gif'] // don't forget to manually preload your images!
});

Sorry again for the slow response, and I hope this helps!