Responses appear uneven for multiple choice with columns | XM Community
Solved

Responses appear uneven for multiple choice with columns

  • 10 May 2021
  • 7 replies
  • 124 views
joeAtSAS

I have a multiple choice question, using columns for responses, where the last option is 'Other' and allows for text entry. If I have an odd number of choices the list appears wonky (super technical term, I know, but see the screenshot below).
image.pngIs there any way to get this to appear without the blank area in the first column?

icon

Best answer by ahmedA 10 May 2021, 18:06

View original

7 replies

A
Rank
Userlevel 7
Badge +21

This is happening because the input text box is a little wider than the other options and hence one of your options is being pushed to the next row.
Try adding this code to addonReady and see if it works:
let all_rows = this.questionContainer.querySelectorAll("tr");
let target_option = all_rows[all_rows.length - 1].querySelector(".LabelContainer");
target_option.style.top = "-" + target_option.getHeight() * 1.1 + "px";

joeAtSAS

Thanks ahmedA . Looks like that may have done the trick:
image.pngThanks for your quick and helpful response.

joeAtSAS

I spoke too soon I think. This solution worked fine for the survey when I was accessing via my laptop. However, it didn't fair so well when I used the mobile version. Here is how the question displays:
image.pngThe text box is covered over by the last option 'Co-worker'.

Without the JS code the question appears as follows by default:
image.pngwhich is also strange because the list has switched order I originally had when the list was vertical. Here Co-worker is the last option. This seems to be reading across column 1 and column 2, then down instead of down column 1, and then across.

A
Rank
Userlevel 7
Badge +21

Yes. It fills column wise.
Here's a hacky workaround, encapsulate the entire code in an if statement:
if(document.querySelector(".LabelContainer").getWidth()/innerWidth > .7){....Code Here....}

However, with the ordering issue, I recommend creating a separate question for mobiles.

joeAtSAS

Thanks for your continued support ahmedA .
I added the code and now have this:
Qualtrics.SurveyEngine.addOnReady(function()
{if(document.querySelector(".LabelContainer").getWidth()/innerWidth > .7){
let all_rows = this.questionContainer.querySelectorAll("tr");
let target_option = all_rows[all_rows.length - 1].querySelector(".LabelContainer");
target_option.style.top = "-" + target_option.getHeight() * 1.1 + "px";}
});
Is this correct? With the code as such, I get the following on my laptop and mobile, respectively:
image.pngimage.png

A
Rank
Userlevel 7
Badge +21

Sorry, that should have been a less than:
Qualtrics.SurveyEngine.addOnReady(function () {
    if (document.querySelector(".LabelContainer").getWidth() / innerWidth < 0.7) {
        let all_rows = this.questionContainer.querySelectorAll("tr");


        let target_option = all_rows[all_rows.length - 1].querySelector(".LabelContainer");


        target_option.style.top = "-" + target_option.getHeight() * 1.1 + "px";
    }
});

However, since you are still facing the ordering issue, I recommend setting up two copies of the same question. One for mobiles and the other for desktop. Then use Device Type display logic appropriately.

joeAtSAS

Thanks again ahmedA . I'm almost there :)
I added a 'mobile' version of the question and I think I'm good there.
Next issue (and I hope/think the last one) is when I have three columns. What changes need to be made to the JS code? I have the following question with three columns and the current JS code applied:
image.png

Leave a Reply


Terms & Conditions