How to ask "Build Your Own X" question? | XM Community
Skip to main content
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
@tfoster - you have to do this with custom code.
@tfoster,



See: https://www.qualtrics.com/community/discussion/comment/15529#Comment_15529
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

Leave a Reply