If you are using SSI Web v8 (not Lighthouse Studio 9 or later, or Discover), you can use the following jQuery script. Say we have a list of items that we want to break up into subheadings. This could be in a grid question, an select question, an ACBC or CBC question or whatever. We can insert a new row into our tables by targetting the row just after where we would like to insert the header and utilizing the .before() function in jQuery to insert a new row that will contain our header.
For example: In our list, we wrap out items in Span tags as follows:
Item 1 : <span class="alist">Aliens</span>
Item 2 : <span class="alist">Apples</span>
Item 3 : <span class="alist">Androids</span>
Item 4 : <span class="alist">Ambulances</span>
Item 5 : <span class="alist"></span>
Item 6 : <span class="blist">Basketballs</span>
Item 7 : <span class="blist">Boards</span>
Item 8 : <span class="blist">Blades</span>
Item 9 : <span class="blist">Bakeries</span>
Item 10 : <span class="blist">Banks</span>
Item 11 : <span class="clist">Camels</span>
Item 12 : <span class="clist">Corks</span>
Item 13 : <span class="clist">Cakes</span>
Item 14 : <span class="clist">Cinders</span>
Item 15 : <span class="clist">Capes</span>
Wrapping our list items in tags allow us to add a class to each item that we can target using jQuery. Once we have these items specified, we can then add some jQuery code to our study to add the headers:
<script>
$(function(){
$(".alist:first").closest("tr").before("<tr><td colspan='5'
class='subheader'>A Header</tr></td>")
$(".blist:first").closest("tr").before("<tr><td colspan='5' class='subheader'>B Header</tr>>/td>")
$(".clist:first").closest("tr").before("<tr><td colspan='5' class='subheader'>C Header</tr></td>")
});
</script>
The result of this code will give you subheaders in your table that is robust to whether some items are missing or even a whole category (e.g. all B items are missing). This code will not work properly if the list items from different categories are scrambled together.
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 will only be executed once the page is fully loaded. This code is shorthand for $(document).ready(function(){
Line 3-5 There are three jQuery functions to note on each of these lines. First portion $(".alist:first") This selects only the first element that has class "alist". The second function .closest("tr"), broadens the selection by looking backwards to the nearest table row ("tr") element that is a parent of the current selector. Finally, the .before() function contains the code that we are inserting into the table. In this example, we are inserting a new row, a cell that spans 5 columns that contains the text of the header. I also chose to give the cell a class "subheader" so that I could style it using CSS later.
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.