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.
Explanation of 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.
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.