Have an idea?

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

Subheaders within a mutli-select question

Say I want to select which football teams I like to root for and I use the select question. The typical layout would look this this:

--Denver
--Kansas City
--Oakland
--San Diego
--New Orleans
--Carolina
--Tampa Bay
--Atlanta

However, I want to have sub-headers to give it a slight "hierarchy" look:

AFC West
--Denver
--Kansas City
--Oakland
--San Diego

NFC South
--New Orleans
--Carolina
--Tampa Bay
--Atlanta


How can I make this happen in the preformatted select question type. Doing free format works, but if I can mitigate user error is setting up the numeric equivalents, I'd like to explore that.


Preemptive thanks to Zachary and/or Paul Moon as I am sure they'll be the first to respond :)
asked Apr 11, 2016 by WTW_cal Bronze (1,435 points)
I would have supplied a similar solution Justin Luster provided me with a few years ago. This solution, along with Zachary's both work beautifully.

1 Answer

+2 votes
Ha ha.  Looks like I've got Paul beat today.

I would do this with jQuery's 'before' or 'after' functions, like so:

<script type="text/javascript">
$(document).ready(function(){
    $('#SelectQ_div > .question_body .response_column > div:nth-child(1)')
        .before('<div>AFC West</div>');
    $('#SelectQ_div > .question_body .response_column > div:nth-child(6)')
        .before('<br><div>NFC South</div>');
})
</script>


You can change the "nth-child" value to modify where to place the text in the list.
answered Apr 11, 2016 by Zachary Platinum Sawtooth Software, Inc. (94,150 points)
How can we get this working when using randomized response options.
Two options come to mind, both involving doing the randomization yourself rather than in the select question.  The first option that comes to mind would be to use constructed lists.

You'd start with one big predefined "FootballTeamsList."  Then you'd create constructed lists for each subsection.

ADD(FootballTeamsList, 1, 4)
Randomize()


Then you could create a final constructed list that adds together all of the earlier constructed lists.

ADD(AfcWestList)
ADD(NfcSouthList)


Now when you use this list in the select question, the items have been randomized, but are still grouped within their subsections.
The other option for randomizing subsections would be to randomize them yourself with JavaScript.  There are some nice jQuery methods for moving page elements around.  I can help you write that code if you decide this is the right option for you.
...