Constant sum slider in steps of 10 | XM Community
Skip to main content
Solved

Constant sum slider in steps of 10

  • April 21, 2023
  • 5 replies
  • 403 views
P
Level 2 ●●
Forum|alt.badge.img+2

Hi everyone,

I would like to ask you a Question about constant sums.

I would like to distribute 40 points (among 4 options) in a Constant Sum.

The respondents should drag the slider to the desired position.

Since educationally disadvantaged groups should also be surveyed, the slider should only be movable in steps of 10. If the slider is closer to 0 than to 10, it should jump to 0. If it is closer to 10 than to 0 or to 20, it should jump to 10, etc. If it is placed exactly in the middle (5, 15, ...) it should be rounded up and jump to the higher 10 step. So the options would be 0, 10, 20, 30, 40. Optionally it would be perfect if the steps could be 0, 10, 20 and 40.

I think there is a similar question already, but it is not available (anymore) - I have already informed the support of the site about it but so far the problem has not been solved.

I am grateful for any tip! Many thanks in advance!

Best answer by qualtrics_nerd

Hi @pi314 ,
You can follow below to steps to achieve the same :
Make the slider questions with below setting :
 

Add below JS  in the above slider question :
 

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
let sum = 0;
let sumDisplay = document.querySelector('#test');
sumDisplay.innerText = sum;
function updateSum() {
 let sliders = document.querySelectorAll("input[type=hidden]");
  let tempSum = 0;
  for (let i = 0; i < sliders.length; i++) {
    let sliderValue = parseFloat(sliders[i].value, 10);
    if (isNaN(sliderValue)) {
      sliderValue = 0;
    }
    tempSum += sliderValue;
  }
  sum = tempSum;
  sumDisplay.innerText = sum;

  // Disable or enable the "NextButton" button based on the sum value
  const nextButton = document.getElementById("NextButton");
  if (sum < 40 || sum > 40) {
    nextButton.disabled = true;
  } else {
    nextButton.disabled = false;
  }
 }


const sliders = document.querySelectorAll('table');
sliders.forEach(function(slider) {
  slider.addEventListener('mousemove', updateSum);
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});


Then create a new text/graphic question and add below html code in its  HTML tab:

 

The sum of above values are : <div id="test"></div>

Hope this resolves your query😊!!
 

MikeW
CxEx
P

5 replies

Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+34
  • Shashi
  • Level 8 ●●●●●●●●
  • April 21, 2023

Instead of slider constant sum question, use Slider question. Add custom validation on slider question such as option A = 40 - (B+C+D)

P
P
Level 2 ●●
Forum|alt.badge.img+2
  • pi314
  • Author
  • Level 2 ●●
  • April 21, 2023

thank you very much!
I don't want to give up on the Constant Sum, as it's easier to see how many points are left at the bottom right.
Are there any other possibilities?
If not, could you explain how to set the custom validation? I only figured this out:

Custom Validation: Question → Option A →  Is less then or equal to → ?

The last step is missing.

Is it maybe possible to display how many points are left?

thanks again!

qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • April 21, 2023

Hi @pi314 ,

I believe you requirement is similar to this request which I have addressed in this question :

 


Hope this resolves your query😊!!

P
qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • Answer
  • April 24, 2023

Hi @pi314 ,
You can follow below to steps to achieve the same :
Make the slider questions with below setting :
 

Add below JS  in the above slider question :
 

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
let sum = 0;
let sumDisplay = document.querySelector('#test');
sumDisplay.innerText = sum;
function updateSum() {
 let sliders = document.querySelectorAll("input[type=hidden]");
  let tempSum = 0;
  for (let i = 0; i < sliders.length; i++) {
    let sliderValue = parseFloat(sliders[i].value, 10);
    if (isNaN(sliderValue)) {
      sliderValue = 0;
    }
    tempSum += sliderValue;
  }
  sum = tempSum;
  sumDisplay.innerText = sum;

  // Disable or enable the "NextButton" button based on the sum value
  const nextButton = document.getElementById("NextButton");
  if (sum < 40 || sum > 40) {
    nextButton.disabled = true;
  } else {
    nextButton.disabled = false;
  }
 }


const sliders = document.querySelectorAll('table');
sliders.forEach(function(slider) {
  slider.addEventListener('mousemove', updateSum);
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});


Then create a new text/graphic question and add below html code in its  HTML tab:

 

The sum of above values are : <div id="test"></div>

Hope this resolves your query😊!!
 

P
P
Level 2 ●●
Forum|alt.badge.img+2
  • pi314
  • Author
  • Level 2 ●●
  • May 8, 2023

Hi @pi314 ,
You can follow below to steps to achieve the same :
Make the slider questions with below setting :
 

Add below JS  in the above slider question :
 

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
let sum = 0;
let sumDisplay = document.querySelector('#test');
sumDisplay.innerText = sum;
function updateSum() {
 let sliders = document.querySelectorAll("input[type=hidden]");
  let tempSum = 0;
  for (let i = 0; i < sliders.length; i++) {
    let sliderValue = parseFloat(sliders[i].value, 10);
    if (isNaN(sliderValue)) {
      sliderValue = 0;
    }
    tempSum += sliderValue;
  }
  sum = tempSum;
  sumDisplay.innerText = sum;

  // Disable or enable the "NextButton" button based on the sum value
  const nextButton = document.getElementById("NextButton");
  if (sum < 40 || sum > 40) {
    nextButton.disabled = true;
  } else {
    nextButton.disabled = false;
  }
 }


const sliders = document.querySelectorAll('table');
sliders.forEach(function(slider) {
  slider.addEventListener('mousemove', updateSum);
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});


Then create a new text/graphic question and add below html code in its  HTML tab:

 

The sum of above values are : <div id="test"></div>

Hope this resolves your query😊!!
 

 

 

Thanks a lot!

 

Adding this chunk allows to use it on mobile devices 😊

  const sliders = document.querySelectorAll("table");
  sliders.forEach(function(slider) {
    // Add touch event listeners
    slider.addEventListener("touchmove", updateSum);
    slider.addEventListener("touchend", updateSum);
    // Add mouse event listeners
    slider.addEventListener("mousemove", updateSum);
  });
});
qualtrics_nerd
Terms & ConditionsAccessibility statement