Hello qualtrics community,
I'm trying to do an experiment where I give respondents a budget of 100€, and asking them to allocate to 3 purchase options. Option 1 costs 12.5€, Option 2 costs 50€ and Option 3, 25€.
I've tried using a constant sum slider (with 4 grid lines) or a matrix - constant sum (with the max number of potential purchases for each), but in both cases the constant sum options don't make sense.
Haven't found any discussions on this kind of budget allocation, can you please share your knowledge on how I could run this experiment ?
Thanks a lot!
Solved
Budget Allocation - Matrix or Constant sum?
+1Best answer by qualtrics_nerd
Hi atres ,
Please find updated code which works with mobile also:
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 < 100 || sum > 100) {
nextButton.disabled = true;
} else {
nextButton.disabled = false;
}
}
const sliders = document.querySelectorAll('table');
sliders.forEach(function(slider) {
slider.addEventListener('mousemove', updateSum);//for desktop
slider.addEventListener('touchmove', updateSum);//as mobile
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Hope this resolve your query😊!!
+19Hi atres ,
Can you further elaborate your point.
Like the sum of options should be equal to 100 or less than 100 also allowed.
+1Hi qualtrics_nerd,
I would like the respondents to allocate the totality of their 100€ budget, which they could do in 9 possible options (only purchasing option 2 twice, purchasing options 1 six times and option 3 once, etc.)
The thing is that after this first budget allocation question, I will show the respondents some data and then will allow them to make change in their allocation if they wish to do so. So ideally I would like the budget allocation to be dynamic and visual, such as with sliders. Offering the budget allocation in a multiple choice question is the only doable option so far with my knowledge, but it would not be user-friendly.
So my question is: Which kind of question type would you recommend, that would allow dynamic selection of purchase options in a visual manner, without having the respondents do too much math ? Pre-existing sliders don't work because Option 1 (12,5€) could be purchased 8 times, while Option 2 (50€) would only be possible to purchase twice.
Thank you for your help.
+1Hi qualtrics_nerd and other members of the community :) Upping the message in hope to get advice on how to conduct this experiment.
Thanks a lot!
+27If I understand correctly, you want to be able to enter a quantity for each option, calculate a subtotal for that option, and calculate a grand total that should be limited to 100€.
You'll need to write JS to do this. You can use a text entry matrix as the question type.
+19Hi atres ,
I was finally able to implement your requirement using 3 sliders question which are as follows:
Slider 1 (Option 1) having value 12.5 implement in Qualtrics using below setting:
Slider 2 (Option 2) having value 50 implement in Qualtrics using below setting:
Slider 3 (Option 3) having value 25 implement in Qualtrics using below setting:
Add a question under slider 3 of type text and graphic to update sum value and show it respondent dynamically:
In above question add below HTML code in Rich Content Editors HTML Tab:
The sum of above values are :
In Slider 1(Option 1) question add below JS in Qualtrics JS API:
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 < 100 || sum > 100) {
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*/
});
The above JS dynamically updates the value in Text/Graphic question div having id="test" with sum of all three sliders and check the value of sum from all three sliders if it greater than or less than 100 then it disables the next button and enables it, if it is equal to 100.
You will have to integrate it with next part of your question.
Hope it resolves your query😊!!
+1Hello again qualtrics_nerd and the qualtrics community! It worked well during the preview and still do in some browsers, but the javascript sum doesn't automatically update when you fill the survey from the linkedin browser on mobile. Any idea on how to fix this ? Thank you so much !
+19Hi atres ,
Please find updated code which works with mobile also:
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 < 100 || sum > 100) {
nextButton.disabled = true;
} else {
nextButton.disabled = false;
}
}
const sliders = document.querySelectorAll('table');
sliders.forEach(function(slider) {
slider.addEventListener('mousemove', updateSum);//for desktop
slider.addEventListener('touchmove', updateSum);//as mobile
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Hope this resolve your query😊!!
Hello everybody,
I’m having a kind of similar problem (https://community.qualtrics.com/search/activity/topics?userid=31098). Respondents are asked to distribute 40% among 4 Actors. The Sliders are meant to go in steps by 10 which is why I turned away from the “classic” constant sum of qualtrics.
I tried to adapt the solution by
Any ideas on how to adjust the JS?
Thanks a lot in advance!
+19Hi
I have answered this at your original post (https://community.qualtrics.com/search/activity/topics?userid=31098)
Hope it resolved your query😊!!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.