Have an idea?

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

How to add labels to a long list in a Select Question?

A long list of 35 items is used in a Select Question. It is brown down into 6 columns with various # of items for each column (e.g. 6, 4, 5, 7, 6, 7 items for each column). How to add a label to each column and ensure each column has the exact # of item given above?
asked Jun 26 by anonymous

1 Answer

0 votes
Assuming you've already set the select question to use six columns, you can do what you want by adding a script like this to your select question:

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .response_column:nth-child(1)').prepend('<div>Header 1</div>');
    $('#[% QuestionName() %]_div .response_column:nth-child(1)').append($('#[% QuestionName() %]_2').closest('.clickable'));
    $('#[% QuestionName() %]_div .response_column:nth-child(1)').append($('#[% QuestionName() %]_4').closest('.clickable'));
    $('#[% QuestionName() %]_div .response_column:nth-child(1)').append($('#[% QuestionName() %]_6').closest('.clickable'));
    
    $('#[% QuestionName() %]_div .response_column:nth-child(2)').prepend('<div>Header 2</div>');
    $('#[% QuestionName() %]_div .response_column:nth-child(2)').append($('#[% QuestionName() %]_1').closest('.clickable'));
    $('#[% QuestionName() %]_div .response_column:nth-child(2)').append($('#[% QuestionName() %]_3').closest('.clickable'));
    $('#[% QuestionName() %]_div .response_column:nth-child(2)').append($('#[% QuestionName() %]_5').closest('.clickable'));
})
</script>


As-is, this code will define which items belong in the first two columns, but it can be expanded for six columns and thirty-five items.
answered Jun 26 by Zachary Platinum Sawtooth Software, Inc. (129,150 points)
Thank you. I replace QuestionName with the real question name Q2 but got an error message "The function call 'Q2' does not exist."

I forgot to mention that the items within each column need to be randomized.
No changes need to be made to QuestionName.
Thank you. That works. How can the items under each header be randomized?
    $('#[% QuestionName() %]_div .response_column:nth-child(1)').prepend('<div>Header 1</div>');
    var column1 = [2, 4, 6];
    shuffle(column1);
    column1.forEach(function(i){
        $('#[% QuestionName() %]_div .response_column:nth-child(1)').append($('#[% QuestionName() %]_' + i).closest('.clickable'));
    });
Perfect. Thank you!
Hi Zachary, I used the following. The headers and randomization are working but #5 does not stay  under Header 2. The two columns have 5 each. What is wrong? Thanks

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .response_column:nth-child(1)').prepend('<div><b>Header 1</b></div>');
    
    var column1 = [1, 2, 3, 4];
    shuffle(column1);
    column1.forEach(function(i){
        $('#[% QuestionName() %]_div .response_column:nth-child(1)').append($('#[% QuestionName() %]_' + i).closest('.clickable'));
    });
})

</script>

<script>
$(document).ready(function(){   
    $('#[% QuestionName() %]_div .response_column:nth-child(2)').prepend('<div><b>Header 2</b></div>');
   
    var column1 = [5, 6, 7, 8, 9, 10];
    shuffle(column1);
    column1.forEach(function(i){
        $('#[% QuestionName() %]_div .response_column:nth-child(2)').append($('#[% QuestionName() %]_' + i).closest('.clickable'));
    });
})

</script>
This seems to be working for me:

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .response_column:nth-child(1)').prepend('<div>Header 1</div>');
    var column1 = [1, 2, 3, 4];
    shuffle(column1);
    column1.forEach(function(i){
        $('#[% QuestionName() %]_div .response_column:nth-child(1)').append($('#[% QuestionName() %]_' + i).closest('.clickable'));
    });
    
    $('#[% QuestionName() %]_div .response_column:nth-child(2)').prepend('<div>Header 2</div>');
    var column2 = [5, 6, 7, 8, 9, 10];
    shuffle(column2);
    column2.forEach(function(i){
        $('#[% QuestionName() %]_div .response_column:nth-child(2)').append($('#[% QuestionName() %]_' + i).closest('.clickable'));
    });
})

function shuffle(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}
</script>
Perfect! Thanks again.
...