adding unique id to a stimulus in an image-button-response trial

[jelkastojanov]

Hello everyone!

I am trying to adjust the size of an image depending on the size of the screen each participant is using (or more specifically the window they are viewing). For example, if the window width is beyond 1366 px and if the window height is beyond 768 px, I want the image to be 350x350 px, if the width and height are below these values, I want the image to be 200x200 px).

I have tried to achieve this in the following way:

// Group membership reminder (Square)
            var squareTrial = {
                type: 'image-button-response',
                prompt:'<div class="text-above-image"> In the first part of the study, you were assigned to the SQUARE group. <br> Please acknowledge your group membership before proceeding.</div>',
                stimulus: 'assets/images/Square_group.png',
                stimulus_height: function(){
                    // STANDARD DESKTOP
                    var minWidthMatchDesktop = window.matchMedia("(min-width: 1366px)");
                    var minHeightMatchDesktop = window.matchMedia("(min-height: 768px)");
                    
                    // STANDARD LAPTOP
                    var maxWidthMatchLaptop = window.matchMedia("(max-width: 1365px)");
                    var maxHeightMatchLaptop = window.matchMedia("(max-height: 767px)");

                    if(minWidthMatchDesktop.matches && minHeightMatchDesktop.matches){
                        return 350;
                    } else if (maxWidthMatchLaptop.matches && maxHeightMatchLaptop.matches){
                        return 200;
                    }

                    minWidthMatchDesktop.addListener();
                    minHeightMatchDesktop.addListener();
                    maxWidthMatchLaptop.addListener();
                    maxHeightMatchLaptop.addListener();
                },
                stimulus_width: function(){
                    // STANDARD DESKTOP
                    var minWidthMatchDesktop = window.matchMedia("(min-width: 1366px)");
                    var minHeightMatchDesktop = window.matchMedia("(min-height: 768px)");
                    
                    // STANDARD LAPTOP
                    var maxWidthMatchLaptop = window.matchMedia("(max-width: 1366px)");
                    var maxHeightMatchLaptop = window.matchMedia("(max-height: 767px)");

                    if(minWidthMatchDesktop.matches && minHeightMatchDesktop.matches){
                        return 350;
                    } else if (maxWidthMatchLaptop.matches && maxHeightMatchLaptop.matches){
                        return 200;
                    }

                    minWidthMatchDesktop.addListener();
                    minHeightMatchDesktop.addListener();
                    maxWidthMatchLaptop.addListener();
                    maxHeightMatchLaptop.addListener();
                },
                choices: ['I acknowledge that I am a member of the SQUARE group.']
            };

However, I'd like to move this responsive design attempt to the custom CSS file and access this particular image through a unique id. The standard img tag in HTML is not working (see one attempt below).

Does anyone have any ideas on how to do this? Also, any advice on how to optimize this responsive design attempt would be very helpful!

var squareTrial = {
    type: 'image-button-response',
    prompt:'<div class="text-above-image"> In the first part of the study, you were assigned to the SQUARE group.<br> Please acknowledge your group membership before proceeding.</div>',
    stimulus: '<img src = "assets/images/Square_group.png" id = "squareImage" img>',
    choices: ['I acknowledge that I am a member of the SQUARE group.']
};           

Thank you in advance!

[jodeleeuw]

Hi @jelkastojanov,

One simple solution would be to use the html-button-response plugin instead. This plugin expects the stimulus parameter to be an HTML string, like your final squareTrial example.

[jelkastojanov]

Thank you so much, @jodeleeuw!

[becky-gilbert]

Hi @jelkastojanov, just to expand a bit on Josh's answer: you could use the html-button-response plugin to give your image a unique ID:

var squareTrial = {
    type: 'html-button-response',
    prompt:'<div class="text-above-image"> In the first part of the study, you were assigned to the SQUARE group.<br> Please acknowledge your group membership before proceeding.</div>',
    stimulus: '<img src = "assets/images/Square_group.png" id = "squareImage" />',
    choices: ['I acknowledge that I am a member of the SQUARE group.']
}; 

And then you should be able to use that image ID in your CSS selector.
As far as getting a responsive CSS solution to the image size, one option might be to use a percentage of the viewport height and width:

#squareImage {
  height: 45vh;
  width: 25vw;
}

Another option is to use CSS media queries, which might be more useful if you want to create separate dimension/device categories, rather than always using the same percentage of the viewport height/width. More info here: https://www.learnhowtoprogram.com/lessons/viewports-and-media-queries

Finally, you could look at CSS custom properties (variables), which allow you to use variables inside your CSS. The values of these variables can be set in the CSS and in JavaScript. This is probably overkill for what you need, but it can be useful if you want to re-use the same variable value in multiple places in your CSS rules, and/or if you want to calculate a CSS value based on one or more variables using the CSS calc function. More info and examples here: https://readium.org/readium-css/docs/CSS07-variables.html

I hope this helps. Please let us know if you need further guidance, and if you come up with a good solution to share!

[jelkastojanov]

Hi @becky-gilbert, this is perfect, thank you very much!