How do I make 'browser zoom level' a condition for taking my survey? | XM Community
Skip to main content
Michael_Cooksey
Administrator
28 days ago
Question

How do I make 'browser zoom level' a condition for taking my survey?

O
Forum|alt.badge.img+1

Hi everybody,
I'm making a facial recognition test using Qualtrics, and I need to ensure the face images are the same size for all users between desktop, laptop and tablets and browsers. For example, I want the survey images to be the same size on both a 27" iMac and a 12" laptop.
A problem I am having is that browser zoom level (modified using 'ctrl and -' or 'ctrl and +' keys) can change the size of the images. Accordingly, my users may begin the survey with variable zoom levels and different image sizes.
Is there a way I can:

  1. Query how big images appear based on users browsers set zoom level.

  2. Create a condition that users can only proceed after a block when they have calibrated their zoom level to meet the survey requirements? (I will make a calibration block with instructions to zoom in and out for this)

Thanks very much
Oly

2 replies

bgooldfed
Level 4 ●●●●
Forum|alt.badge.img+25
  • bgooldfed
  • Level 4 ●●●●
  • 179 replies
  • May 20, 2022

Hi Oliver_Durcan,
Preface: I'm assuming by wanting the images the "same size", you are talking about the relative size of the image on the screen (as opposed to the absolute size of the image in reality). If you're going for absolute size, I'm honestly not sure how to approach it (due to different screen resolutions, pixel density etc).
===
Detecting zoom level is very difficult and there is no universal option that will work across all browsers. If your use-case restricts users to a certain browser(s), you might have a chance at implementing an existing solution (if there is one).
You'd have more luck scaling the images according to the view height / view width of the browser.
Here are some examples:


These examples are using text, but you can use vw and vh on images as well. Eg: https://www.w3spaces-preview.com/bgoold/saved-from-Tryit-2022-05-20.html
===
As far as applying to your survey is concerned, I would suggest trying to write some code which gives each image a custom CSS class and then set up custom CSS for the appropriate vh and vw dimensions:
//JavaScript in Survey questions
jQuery("#"+this.questionId+" img").addClass("face");

//custom CSS
.face {
"height": "40vw", //you may need to experiment with these values
"width": "20vw"
}
If your images have different proportions to one another though, you may not have the luxury of using a single CSS rule and will need to calculate the appropriate width/height in the code instead... which is admittedly becoming quite complex.
Good luck!

O
Forum|alt.badge.img+1

Hi bgooldfed
Thanks for the help here.
Actually, I'm not looking to achieve the 'relative' image size to the screen - I'm looking for the 'absolute' size! All of the images are the same px-width/height, but I am trying to ensure that they have consistently equal dimensions on screen between multiple devices (ie. they are all the same size as a credit card if you were to place the credit card on every participants' screen).
Hopefully, someone else will have some ideas!
Thanks
Oly

Leave a Reply


Terms & Conditions