How can I change the specification for the width/height of images within the stimulus-section of plugin-html-slider-response.js?

[OberSchmetteBennett]

Hello everyone,

right now I try to edit the image specification within the mentioned plugin. I did not change anything within the plugin itself but tried the classic way within my experimental file. This is the defined trial within my file:

var trial_option_1 = {
        type: jsPsychHtmlSliderResponse,
        stimulus: function() {
            var rand_images = jsPsych.randomization.sampleWithoutReplacement(images,2);
            return `<div style="width:1000px;">
                    <p>Wie ähnlich sind sich die beiden Bilder?</p>
                    <div style="width:500; float: left;">
                        **<img src="` + rand_images[0]  + `" />**
                    </div>
                    **<div style="width:500; float: right;">**
                        <img src="` + rand_images[1]  + `" />
                    </div>
                    </div>`;
        },
        require_movement: true,
        labels: ['gar nicht ähnlich', 'etwas ähnlich', 'sehr ähnlich']
    };

As you can see I already tried to specify the style here but due to the fact that another list contains additional information about the images, this list does not consider my specification. The list with the additional information must not be changed.
My idea was to use a separate cs.file for changing the standardized specification of the plugin. Within this cs.file I have the following specifications:

#jspsych-html-slider-response-stimulus {
  width: 300px;
  height: auto;
  position: absolute;
  top: 5%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  }

Unfortunately it is not working and I do not know whether I need two specifications because I want to show two pictures each trial.
Is there another way to solve this problem? Do I have to hardcode the plugin itself do you have an idea?

If you need additional Information or more details, write me! :)

Thank you very much and best regards
OberSchmetteBennett

[jodeleeuw]

Hi @OberSchmetteBennett,

What happens with the current implementation? Can you share a screenshot?

If you need to control the size of the images in the HTML, you might want to set the style='width:500px;' directly on the <image> tag, instead of the <div> containers.

[OberSchmetteBennett]

Hi Jodeleeuw,

Currently both pictures are presented in different sizes and not side by side. Because of copyright I can't send a picture from the experiment itself but I made a sketch:

Is the image tag within the html-slider-response plugin? I am still relatively new to this and I did not see it in the parameter list from the website: https://www.jspsych.org/7.0/plugins/html-slider-response/

Thank you very much!

Best regards
OberSchmetteBennett