Have an idea?

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

How to add non-movable headers when setting up Ranking Drag and Drop question

I have a list of 19 items with 2 headers.  The first header is followed by 12 items and the 2nd header is followed by 7 items.  My client would like to keep the 2 column headers and allow the respondents to click and drag to rank 3 top items.  

I created a ranking question with the predefined list consisting of the 19 items.  

I tried using this code but it did not work.

<script>
$(document).ready(function(){
    // Header info
    var headers = [
        { min: 2, max: 13, label: 'Herd Health Management' },
        { min: 14, max: 20, label: 'Reproductive Health and Genetic' },
       
    ];
     
    // Add headers
    var list = $('input[name=hid_list_[% QuestionName() %]]').val().split(',').map(Number);
    for (var h = headers.length - 1; h >= 0; h--) {
        var header = headers[h];
         
        var includeHeader = false;
        var earliestHeaderItem;
        for (var i = header.max; i >= header.min; i--) {
            if (list.indexOf(i) !== -1) {
                includeHeader = true;
                earliestHeaderItem = i;
            }
        }
         
        if (includeHeader) {
            $('#[% QuestionName() %]_' + earliestHeaderItem).closest('.response_row')
                .before('<div>' + header.label + '</div>');
        }
    }
})
</script>



Any guidance would be greatly appreciated.  Thank you
asked Dec 26, 2017 by ssearcy (160 points)

Your answer

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.
...