Question
How to ask "Build Your Own X" question?
Hey gang,
I have a client that wants to have a "Build Your Own X" question. For the example below, let's look at computers.
Standard Computer Specs:
-1080p screen
-4GB RAM
-128GB Hard Rive
-3 USB Ports
-Base Cost: $450
Options (select which you want)
* Screen (choose 1)
* * 4k ($150+)
* * None
* RAM (choose 1)
* * 8GB ($50+)
* * 12GB ($75+)
* * None
* Hard Drive (choose 1)
* * 256GB ($50+)
* * 512GB ($100+)
* * None
* Exterior (select all that apply)
* * 4 USB Ports ($25+)
* * Silver color ($15+)
* * Levitation Mode ($1000+)
* * None
How could I program this so respondents could choose what they want and have a running total on the same screen depending on what specs they choose? So if they upgraded their Screen and RAM, the screen would change from $450 to $650 in real time.
Does this make sense?
Best,
T
Here's a not-so-efficient solution I cooked up:
Add the following to your Custom Header in Look and Feel settings:
`<script>var TotalPrice = { value: 0, get: function() { return this.value; }, set: function(val) { this.value = val; }, add: function(val) { this.value += val; }}</script>`
This sets a global object to keep track of the total price.
Now create a starting descriptive text question that explains the base cost. Add the following JS code under addOnload():
`TotalPrice.set(450);
document.getElementById("total").innerHTML = '$' + TotalPrice.get().toString();`
This initializes the total price to the base price.
Now create a choice question for each selection. For single-selection questions, add the following code under addOnload():
`
var oldChoice = 0;
this.questionclick = function(event, element)
{
if (element.type == 'radio')
{
getCostByIndex = function(idx)
{
if (idx == 1)
{
return 150;
}
else
{
return 0;
}
}
var selectedChoice = parseInt(this.getSelectedChoices()[0]);
if (selectedChoice != oldChoice)
{
var changeInPrice = getCostByIndex(selectedChoice) - getCostByIndex(oldChoice);
TotalPrice.add(changeInPrice);
oldChoice = selectedChoice;
}
document.getElementById("total").innerHTML = '$' + TotalPrice.get().toString();
}
}`
Change the getCostByIndex function to match whatever prices and however many items you want.
For multiple-selection, use the following code instead:
`
oldChoices = [];
this.questionclick = function(event, element)
{
if (element.type == 'checkbox')
{
getCostByIndex = function(idx)
{
if (idx == 1)
{
return 25;
}
else if (idx == 2)
{
return 15;
}
else if (idx == 3)
{
return 1000;
}
else
{
return 0;
}
}
var selectedChoices = this.getSelectedChoices();
var changeInPrice = 0;
selectedChoices.forEach(function(choiceIdx)
{
if (!oldChoices.includes(choiceIdx))
{
changeInPrice += getCostByIndex(choiceIdx);
}
});
oldChoices.forEach(function(choiceIdx)
{
if (!selectedChoices.includes(choiceIdx))
{
changeInPrice -= getCostByIndex(choiceIdx);
}
});
TotalPrice.add(changeInPrice);
document.getElementById("total").innerHTML = '$' + TotalPrice.get().toString();
oldChoices = this.getSelectedChoices();
}
}`
Again, adjust getCostByIndex as needed.
At the end of the survey, add another descriptive text question and place the following HTML:
`<strong>Your total:</strong> <span id="total">$450</span>`
Basically, every time the respondent clicks on a choice, you get the choice id. If the choice was not selected before, add it's associated cost and subtract the cost of the old selection. Same idea in for multiple-selection, except you only add the cost of any new indices and subtract the cost of indices that are no longer selected.
Preview link: https://certification.ca1.qualtrics.com/jfe/preview/SV_aWBD53UDriNceFf?Q_SurveyVersionID=current&Q_CHL=preview
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.