Countdown Constant Sum in Grid question

Question

Dear all,
I would like to implement the Countdown Constant Sum (https://sawtoothsoftware.com/resources/question-library/countdown-constant-sum) in a Grid question.
The grid question's direction is rows. For each row, I want the column values to sum up and to also have this countdown field in the last column.

Does anyone have an idea how to combine these two questions?

Thanks a lot in advance!

Answer 1

Please try adding this script to your grid question:

<script>
$(document).ready(function(){
    // Parameters
    var total = 100;
    var label = 'Remaining';
    
    // Run
    var rows = $('input[name="hid_row_list_[% QuestionName() %]"]').val().split(',');
    var columns = $('input[name="hid_col_list_[% QuestionName() %]"]').val().split(',');
    
    if ($('#[% QuestionName() %]_div .inner_table > tbody').length) {
        $('#[% QuestionName() %]_div .column_header_row').append('<td class="col_label_cell"><div class="grid_options">' + label + '</div></td>');
        rows.forEach(function(row){
            $('#[% QuestionName() %]_r' + row + '_row').append('<td class="input_cell grid_total_cell"><input id="[% QuestionName() %]_' + row + '_countdown" class="gridCountdown total text_input"/></td>');
        });
    }
    else {
        rows.forEach(function(row){
            $('#[% QuestionName() %]_r' + row + '_c' + columns[0]).closest('.mobile_grid_options').append('<div class="input_row"><label class="mobile_grid_label total_label">' + label + '</label><input id="[% QuestionName() %]_' + row + '_countdown" class="gridCountdown total text_input"/></div>');
        });
    }
    $('.gridCountdown').prop('disabled', true);
    
    $('#[% QuestionName() %]_div input').keyup(function(){
        rows.forEach(function(row){
            var remainder = total;
            columns.forEach(function(column){
                remainder -= Number(SSI_GetValue('[% QuestionName() %]_r' + row + '_c' + column)) || 0;
            });
            $('#[% QuestionName() %]_' + row + '_countdown').val(remainder);
        });
    });
    $('#[% QuestionName() %]_div input').keyup();
})
</script>

Line 4 should be updated with your total.  Line 5 should be updated with the label for this new field.

Comments

Thanks a lot! This script works perfectly.