How do I add images to a Likert scale?

Question

I am new to both jsPsych and programming in general. I am trying to create a browser-based experiment that displays Likert scales on the user's screen, along with images. Specifically, I would like to measure people's opinions of different colors.

My plan is to represent each color using an image of a colored dot, ex. a red dot to represent the color red. Whenever I present the user with an image, I would like the image to be accompanied by a Likert scale: "I enjoy looking at this color" (Strongly Disagree, Disagree, Neutral, Agree, Strongly Agree). So, the user will view a colored dot on their screen, select their answer on the Likert scale, and then be taken to a new webpage where there is another dot and Likert scale, and so on and so forth.

I know how to construct a Likert scale using the "survey-likert" plugin, but I cannot figure out how to add images to the scale. I have tried this code, but it did not work:

var likert_scale=[ "Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree" ];

var color_trials={ type:'survey-likert', questions:[ {prompt:"I enjoy looking at this color.", labels:likert_scale} ], timeline:[ {stimulus:'img/red.jpeg'}, {stimulus:'img/green.jpeg'}, {stimulus:'img/yellow.jpeg'}, and so on and so forth through all the images };

(By the way, the above code is supposed to have indentations but I cannot figure out how to write them into the stackoverflow text box.)

If anyone knows how to pair images to Likert scales in jsPsych, would you please consider sharing your insights into this problem? Again, I am new to programming and am having a hard time figuring out the answer myself.

Thank you for reading this post!

Answer 1

You can use HTML <img> tags to embed the images into either the prompt or preamble parameter of the survey-likert plugin.

var likert_scale = [ "Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree" ];

var trial_option_1 = {
    type: 'survey-likert',
    preamble: '<img src="img/red.jpeg"></img>',
    questions: [
        {prompt: 'I enjoy looking at this color.', labels: likert_scale}
    ]
}

var trial_option_2 = {
    type: 'survey-likert',
    questions: [
        {
            prompt: '<img src="img/red.jpeg"></img><p>I enjoy looking at this color.</p>', 
            labels: likert_scale
        },
        {
            prompt: '<img src="img/green.jpeg"></img><p>I enjoy looking at this color.</p>', 
            labels: likert_scale
        }
    ]
}