Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Live calculation on page based on answer

I have a page with 4 select (dropdown) questions.
Respondents are asked to select a number in the dropdown menu for each question.

I want to show respondents an amount of money live on the page, based on their selected answers.

So let's say I have a base amount of €20 and the value of the item shown as Question 1 is €4 per level.
So if a respondent selects the number 1, I want an automatic calculation to show: €24 (base (€20) + 1x€4). If the respondent selects the number three, I want the automatic calculation to show €32 (base (€20) + 3x€4).
I want to combine this for all four select questions on this page.

I understand that I cannot use an Answer Label, since I want this calculation to occur on the same page as where the respondents are selecting their answers. How can I achieve this?
asked Aug 14, 2018 by Marten (170 points)

1 Answer

+1 vote
This JavaScript may help you get started:

<script>
$(document).ready(function(){
    updateDynamicPrice()
    $('select').change(updateDynamicPrice);
})

function updateDynamicPrice() {
    var select1 = SSI_GetValue('SelectQ1');
    var select2 = SSI_GetValue('SelectQ2');
    var select3 = SSI_GetValue('SelectQ3');
    var select4 = SSI_GetValue('SelectQ4');
    // ...
}
</script>


The four "SelectQ" must be replaced with the names of your four select questions.

Line 12 is where the price-calculating logic must go.  I cannot write this without knowing the full logic behind how the price is calculated based off the dropdowns.
answered Aug 14, 2018 by Zachary Platinum Sawtooth Software, Inc. (120,900 points)
Thanks for the quick response!
For the "SelectQ" questions, respondents can select a value from 0 to 5 (for Q1, Q2 and Q4), and 1 to 5 for Q3.
I want to multiply the value of Q1 by €4 and the value of Q2, Q3 and Q4 by €1.
I want to add these numbers to a base amount. I want to obtain this base amount from a list which I will construct, in which the Index is based on an answer to an earlier select question.

And what is the line of code I can input in my text to show the value?
How do the indices of the lists used in the select questions map to these values?  Can I assume that the first item is 0 (except for Q3), then the next item is 1, next 2, and so on?

Your base price is to be determined by a previous question.  What responses to that question result in which base prices?
Correct! So for Q1, Q2 and Q4 the list is 0;1;2;3;4;5 and for Q3 it's 1;2;3;4;5

The question is which amount is closest to the price of their current insurance. 10;15;20;25;30;35;40;Don't know
If they don't know we want to use a national average, that is why I want to construct a seperate list with values which correspond to their answer on the 'base amount question'
Completed script:

<script>
$(document).ready(function(){
    updateDynamicPrice();
    $('select').change(updateDynamicPrice);
})

function updateDynamicPrice() {
    var base = [% SelectQ0 %];
    var select1 = SSI_GetValue('SelectQ1');
    var select2 = SSI_GetValue('SelectQ2');
    var select3 = SSI_GetValue('SelectQ3');
    var select4 = SSI_GetValue('SelectQ4');
    
    var price = base * 5 + 5;
    price += select1 ? (select1 - 1) * 4 : 0;
    price += select2 ? select2 - 1 : 0;
    price += select3;
    price += select4 ? select4 - 1 : 0;
    
    $('.dynamicPrice').text(price);
}
</script>


"SelectQ0" should be replaced with the base price question.

Now place this wherever the price is to be displayed:

<span class="dynamicPrice"></span>
Works great, thanks!
One final question:
How can I format the <span>  in my text as a currency?
I.e. always with two decimals?
I cannot get the .toFixed(2) javascript working.
toFixed should be the right tool for the job.  Perhaps it's just a matter of where to call that function.  Try adding it to line 20 like this:

$('.dynamicPrice').text(price.toFixed(2));
Everything works great. Thanks a lot for all the help!
...