Split one slider question into a grid (3x2) display? | XM Community
Skip to main content
Michael_Cooksey
Administrator
19 days ago
Solved

Split one slider question into a grid (3x2) display?

  • January 24, 2025
  • 4 replies
  • 40 views
B
Forum|alt.badge.img+1

Hi--

I was hoping that someone could help me with creating Javascript to split a single slider question into a grid - where statements are divided into different columns, each with their own sliders.

Some background:
I have a multiple-choice question in which I use the “column” alignment to split up answer choices (in my case, photographs) into a 3x2 grid (randomized choice order). I then use carry-forward to bring Displayed Choices to a subsequent slider question, where they answer a slider question for each photograph. I’d really like to display this question in the same way as the MC question -- that is, in a 3x2 grid. 

I know how to split up different questions on a single page:
HTML: <style type="text/css">#Questions{display:flex;}</style>
Java: 
Qualtrics.SurveyEngine.addOnload(function() {
document.getElementById('Questions').style.display = 'flex';
});

But not how to get different *slider* statements into different columns. Because I’m using carry-forward and a randomized choice order, I cannot split the sliders into different questions.

Any help would be much appreciated! 

Best answer by TomG

​@becsy97,

You might not need a library.  If you use a Form Field question as the carryforward question, you can make the Form Field table a grid and change the inputs from “text” to “range”.  The following will give you the basic layout and you can style the grid and sliders as needed.

Qualtrics.SurveyEngine.addOnload(function() {
	var q = jQuery(this.questionContainer);
	q.find("tbody").css({"display":"grid","grid-template-columns":"1fr 1fr"});
	q.find("input[type=text]").attr({"type":"range","min":"0","max":"100"});
});

 

View original

4 replies

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • 2028 replies
  • January 24, 2025

I would strongly recommend against doing this. The problem is that the internal calculations for the Qualtrics slider take into account the width at which the slider starts with. Therefore, even if you are able to get the sliders into different containers, the data may not be reliable.

 

If you really really want it, I would recommend looking at some JS slider libraries online and using those instead.  

B
Forum|alt.badge.img+1
  • becsy97
  • Author
  • 2 replies
  • January 24, 2025

Thank you ​@ahmedA, I’ll look into the JS slider libraries. 

I appreciate the advice!

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5926 replies
  • Answer
  • January 24, 2025

​@becsy97,

You might not need a library.  If you use a Form Field question as the carryforward question, you can make the Form Field table a grid and change the inputs from “text” to “range”.  The following will give you the basic layout and you can style the grid and sliders as needed.

Qualtrics.SurveyEngine.addOnload(function() {
	var q = jQuery(this.questionContainer);
	q.find("tbody").css({"display":"grid","grid-template-columns":"1fr 1fr"});
	q.find("input[type=text]").attr({"type":"range","min":"0","max":"100"});
});

 

B
Forum|alt.badge.img+1
  • becsy97
  • Author
  • 2 replies
  • January 27, 2025

 ​@TomG 

Wow- that’s super handy, thank you!! This works perfectly - and so much easier than what I was trying to do for sure. 

To those who have the same goals / issues: noUiSlider does work well; you can implement the slider within each multiple-choice response and then adjust the Javascript to only display the sliders on the follow-up slider question (aka, not on the initial multiple-choice question). Additional javascript also allows you to disable the buttons in the multiple-choice, as to not confuse participants. 

Leave a Reply


Terms & Conditions