Have an idea?

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

Randomize Constructed List for each Grid Question in JavaScript

I´m using Sawtooth 9.3

I already asked similiar question for randomize constructed list in grid question using the library Categorization, but now I asking for normal Grid question. How it could be an example code in JavaScript for randomize rows in Grid question?
I´m already using the function randomize(), but it don´t randomize the list for each question.
asked Mar 16, 2017 by Arian

1 Answer

0 votes
Putting this JavaScript in your grid's footer should do the trick:

<script>
$(document).ready(function(){
    // Randomize rows
    $('#[% QuestionName() %]_div .inner_table > tbody > tr:not(:first-child)').sort(function(){
        return Math.random() > 0.5;
    }).each(function(){
        $('#[% QuestionName() %]_div .inner_table > tbody').append($(this));
    });
    
    // Fix alternating colors
    var trs = $('#[% QuestionName() %]_div .inner_table > tbody > tr').length;
    var tds = $('#[% QuestionName() %]_div .inner_table > tbody > tr:first-child > td').length;
    for (var tr = 1; tr <= trs; tr++) {
        var altcolor = (tr % 2) ? 'alt_color1' : 'alt_color2';
        for (var td = 1; td <= tds; td++) {
            $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-child(' + tr + ') > td:nth-child(' + td + ')')
                .removeClass('alt_color1 alt_color2')
                .addClass(altcolor);
        }
    }
})
</script>
answered Mar 16, 2017 by Zachary Platinum Sawtooth Software, Inc. (86,425 points)
It worked, thank you a lot!

And how can I repeat the column labels every 'n' rows? like you did in the fix alternating colors.
<script>
$(document).ready(function(){
    // Randomize rows
    $('#[% QuestionName() %]_div .inner_table > tbody > tr:not(:first-child)').sort(function(){
        return Math.random() > 0.5;
    }).each(function(){
        $('#[% QuestionName() %]_div .inner_table > tbody').append($(this));
    });
    
    // Repeated column headers
    var repeatEveryNRows = 2;
    $('#[% QuestionName() %]_div .inner_table > tbody > tr.column_header_row:not(:first-child)').remove();
    var nonHeaderRows = $('#[% QuestionName() %]_div .inner_table > tbody > tr:not(:first-child)');
    for (var i = repeatEveryNRows; i < nonHeaderRows.length; i += repeatEveryNRows) {
        $(nonHeaderRows[i - 1]).after($('#[% QuestionName() %]_div .inner_table > tbody > tr:first-child').clone());
    }
    
    // Fix alternating colors
    var trs = $('#[% QuestionName() %]_div .inner_table > tbody > tr').length;
    var tds = $('#[% QuestionName() %]_div .inner_table > tbody > tr:first-child > td').length;
    for (var tr = 1; tr <= trs; tr++) {
        var altcolor = (tr % 2) ? 'alt_color1' : 'alt_color2';
        for (var td = 1; td <= tds; td++) {
            $('#[% QuestionName() %]_div .inner_table > tbody > tr:nth-child(' + tr + ') > td:nth-child(' + td + ')')
                .removeClass('alt_color1 alt_color2')
                .addClass(altcolor);
        }
    }
})
</script>


Line 11 should be updated with how often the column label is to be repeated.
Thank you so much!
...