Different JS Code for Moblie vs Desktop in Drag and Drop? | XM Community
Skip to main content

Hello,

I have a pick, group, and rank question where there are a lot of choices, so I added some custom code to increase the length of the box that you drag the options into. On mobile you couldn’t even see the box if you scrolled down to the end of the list. It would be better if I could customize the length of the box by whether a respondent was on a desktop vs. a mobile device. Is there a way to do this with the JS code rather than creating two versions of the question and applying display logic based on whether they are on a mobile device or not?

 

Qualtrics.SurveyEngine.addOnReady(function () {
    qid = this.questionId;
    groups = document.querySelectorAll("oid^='" + qid + "group']");
    groups.forEach((box) => {
        box.style.height = "950px";
    });

Hi @Skolar248 ,

You  can use media queries and then set different sizes for mobile and desktop.
For example as below:

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }


PS: Replace the “body” with proper selector.

Hope this resolves your query😊!!

 

I should add that I have 5 of these on the survey, each with a different number of options. So each of the 5 questions has a custom size, which is why I was changing the size with JS code in each of the individual questions rather than using CSS. I may have to do more research on this one.

Hi @Skolar248 ,

You can try to accommodate your code in below code which runs based on  screen size condition:

 

function myFunction(x) {


  if (x.matches) {
    // If media query matches mobile screen size
    console.log("mobile");

  } else {
    // If media query matches desktop screen size
    console.log("desktop");

  }
}

var x = window.matchMedia("(max-width: 767px)");

myFunction(x);

x.addListener(myFunction);

You can encapsulate your code for mobile and desktop.
Hope this resolves your query😊!!

Leave a Reply


Terms & Conditions