Have an idea?

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

Multiple JavaScript calculations

I've built a kind of configurator where respondents can choose some options both by clicking checkboxes and by selecting in dropdown menus. I have 18 checkboxes and 2 dropdown menus.

Every checkbox and every value of the dropdowns should be connected with a numeric value. I now need to sum up those values and to display the total on the same page. That means, every time the respondents check or uncheck a checkbox or select a dropdown item, the total value should be updated.

Probably I have to use the "SSI_CustomGraphicalCheckbox"-function but how to combine this with the dropdowns?

Thank you very much for your help!
asked Oct 19, 2016 by ingo (340 points)

1 Answer

0 votes
 
Best answer
jQuery's "change" function is great for detecting changes in things like dropdowns.

As a proof of concept, I put a multiselect question and a dropdown question on the same page and used this code:

<input id="test" value="1"></input>

<script>
function SSI_CustomGraphicalCheckbox(graphicalObj, inputObj, bln) {
    update();
}
$('#DropdownQ').change(update);

function update() {
    $('#test').val(Number($('#test').val()) + 1);
}
</script>


("DropdownQ" should be replaced with the name of that select question.)

If you try this code out, you will find that the "update" function is called every time a checkbox is selected / unselected and every time the dropdown is changed.
answered Oct 19, 2016 by Zachary Platinum Sawtooth Software, Inc. (129,350 points)
selected Oct 20, 2016 by ingo
Zachary, thank you very much! It works well. But how can I combine certain values with the checkboxes and dropdowns? E.g. for checkbox 1, add 300, for dropdown 2, add 250, etc.?
And I forgot to add: If the checkbox is unchecked, the corresponding value should be subtracted from the total...
Here's a start on code you can use:

<span id="total">0</span>

<script>
var checkboxValues = [100, 200, 300, 400];
var dropdown1Values = [10, 20, 30, 40];
var dropdown2Values = [1, 2, 3, 4];

$('#DropdownQ1, #DropdownQ2').change(updateTotal);
function SSI_CustomGraphicalCheckbox(graphicalObj, inputObj, bln) {
    updateTotal();
}

function updateTotal() {
    var total = 0;
    
    for (var i = 1; i <= 18; i++) {
        if (SSI_GetValue('CheckQ_' + i)) {
            total += checkboxValues[i - 1];
        }
    }
    
    var combo1 = SSI_GetValue('DropdownQ1');
    if (combo1 > 0) {
        total += dropdown1Values[SSI_GetValue('DropdownQ1') - 1];
    }
    
    var combo2 = SSI_GetValue('DropdownQ2');
    if (combo2 > 0) {
        total += dropdown2Values[SSI_GetValue('DropdownQ2') - 1];
    }
    
    $('#total').text(total);
}
</script>


"CheckQ" should be replaced with the name of the multiselect question.  "DropdownQ1" and "DropdownQ2" should be replaced with the names of the dropdown questions.

Lines 4-6 should be updated with the scores for the different responses.  I have started by defining values for the first four checkboxes and the first four items in each dropdown.
Thank you very much! I hope that I will get this to work. One last problem: I want to combine the total with some kind of "progress bar".  Perhaps I can use a jQuery slider and set its value also with the update function?
I actually helped another user with something quite similar a few days ago that might be helpful:

https://sawtoothsoftware.com/forum/11722/display-incrementing-value-percentage-total-allowable-spend

Instead of using jQuery's slider, I just used this HTML and CSS:

<div id="budgetBarContainer">
    <div id="budgetBar"></div>
</div>

<style>
#budgetBarContainer {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: #ddd;
}
 
#budgetBar {
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: green;
}
</style>


Then, like you said, you can set the value inside the update function:

$('#budgetBar').css('width', (total / 100) + '%');
...