Displaying images as options using the new 'survey' plugin?

[amyxli]

Hello,

Would anyone know whether it is possible to display images as options using the new 'survey' plugin in jsPsych version 7.2 -- e.g., with type: 'multi-select'?

I am having trouble getting options to show up as images, rather than just strings. For example, using the below code the image 'solarsystem' is displayed properly, but 'jupiter', 'mars', and 'saturn' are displayed as strings (e.g., option is literally the text <img src="img/jupiter.jpg"></img>).

var trial= {
    type: jsPsychSurvey,
    pages: [
      [
        {
          type: 'html',
          prompt: '<img src="img/solarsystem.jpg"></img>'
        },
        {
          type: 'multi-select',
          prompt: 'Which is your favourite planet?',
          options: ['<img src="img/jupiter.jpg"></img>', '<img src="img/mars.jpg"></img>', '<img src="img/saturn.jpg"></img>'],
          required: true,
          horizontal: true, 
        }
      ]
    ]
  };

This was possible with the plugin 'survey-multi-select', but I am currently needing to use multiple plugin types on a single page/trial (both 'multi-select' and 'multi-choice') and this appears to only be possible with the 'survey' plugin. (If anyone could suggest any workarounds that do not use 'survey', that would also be fantastic.)

Many thanks for any leads!

[StefaniaCionca]

Hi!

Did you find a solution? I am dealing with the same issue right now.

[amyxli]

Hello - yes, I ended up finding a workaround using the survey-html-form plugin (parameter type: jsPsychSurveyHtmlForm). You can then specify the images under the html parameter. E.g., something like the below should work:

html:  '<input type="checkbox"  name="jupiter" id="jupiter" value="checked" >'+
'<img src="img/jupiter.jpg">' + 
'<input type="checkbox"  name="mars" id="mars" value="checked" >'+
'<img src="img/mars.jpg">' + 
'<input type="checkbox"  name="saturn" id="saturn" value="checked" >'+
'<img src="img/saturn.jpg">' 

Hope that helps.

[becky-gilbert]

Hi @amyxli, unfortunately I don't think the current jsPsych survey plugin will allow you to display images as multiple choice options. The survey plugin is using a library called SurveyJS. I checked their docs and don't see a way to tell the multi-select question to treat the option labels as HTML rather than plain text. They do have a separate question type for image selection: https://surveyjs.io/Examples/Library?id=questiontype-imagepicker&platform=Reactjs&theme=defaultV2 However we haven't implemented this question type in the jsPsych plugin. I've created an issue so that we can address this in a future release of the survey plugin: #2758