Sawtooth Software Conference 2019 | San Diego, CA, USA | September 23–27
Early-bird pricing ends August 15!

Adding Subheads Within in a Select Question Using jQuery

I've got a study in SSI Web 8 where I am using a constructed list to populate a select question. However, I'd like to break up the display of the question into sections, adding a section title above each section. How do I do this?

For an alternate method that also works with constructed lists, click here.

In SSI Web 8 it makes sense to utilize the jQuery JavaScript library that is already loaded into the surveys. Let's say you had 30 items in your list and you want to visually break them up into three sections of ten items. You want it to say, "Section 1" above the first item, "Section 2" above the 11th item, and "Section 3" above the 21st item. To do that, simply drop this jQuery code into the footer of your question.

<script type="text/javascript">
$(document).ready(function() {
 $('tr.clickable').eq(0).before('<tr><td colspan="2"><h2>Section 1</h2></td></tr>');
 $('tr.clickable').eq(10).before('<tr><td colspan="2"><h2>Section 2</h2></td></tr>');
 $('tr.clickable').eq(20).before('<tr><td colspan="2"><h2>Section 3</h2></td></tr>');

Explanation of code

Line 1 tells the browser to interpret everything that follows this line as JavaScript code.

Line 2 contains a jQuery anonymous function that should only be executed once all of the content on the page has been loaded and rendered on the screen and the document is ready for further interaction.

Line 3 instructs the browser to find a table row tag <tr> that has a CSS class of "clickable" assigned to it (which is the default setting of SSI Web 8 select questions), and then find the first instance of that <tr> and insert a new row above it. In this case it inserts a new row, it combines the first and second columns of that row into one column, and the places a the section number in it that has been styled with an <h2> header tag. Notice that the numbers are a little different than expected, i.e. eq(10). This is because jQuery starts numbering with 0 rather than 1.

Line 4 and line 5 do the same thing as line 3 except it deals with the other two sections.

Line 6 closes the jQuery function.

Line 7 tells the browser that it should stop processing the JavaScript code.

Please note that this script will only work if this is the only question on the page and that it is using the default select question options.

Sawtooth Software

6:30 AM to 5:30 PM Mountain Time
(GMT-6; GMT-7 Autumn/Winter)
Monday through Friday

Phone: +1 801 477 4700
Fax: +1 801 337 7410

SKIM Software

9:00 AM to 5:30 PM Central European
(GMT+2; GMT+1 Autumn/Winter)
Monday through Friday

Phone: +31 10 282 3500
Fax: +31 10 282 3560

Lighthouse Studio

Lighthouse Studio is our flagship software for producing and analyzing online and offline surveys. It contains modules for general interviewing, choice-based conjoint, adaptive choice-based conjoint, adaptive choice analysis, choice-value analysis, and maxdiff exercises.

Try Lighthouse Studio

  Buy Lighthouse Studio