In SSI Web 8 you can add a Cell Input Label by editing a row item (If your Question Direction is set to Row on the Format Tab. If it is set to Column then you can add labels to your column items). However, this will give each option in the row the same label. To edit these labels and give each cell a different label you can use the jQuery JavaScript library that is comes with SSI Web 8. Begin by adding Cell Input Labels to each row (or column). Your grid question should then look something like the following picture.Next, create a list for each row (or column) containing the labels that should be shown to respondents. For the grid shown above you will want 5 lists, one for each row. The lists are shown below.
Now that everything is set up, you are ready to add the JavaScript that will apply the labels given in the list to the cells of the grid. Go to Advanced > HTML <head> and add the following JavaScript:
<script type="text/javascript">
$(document).ready(function() {
var listArray = [
[% ListLabelsArray(GridLabelsRow1)%],
[% ListLabelsArray(GridLabelsRow2)%],
[% ListLabelsArray(GridLabelsRow3)%],
[% ListLabelsArray(GridLabelsRow4)%],
[% ListLabelsArray(GridLabelsRow5)%]
];
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 5; j++) {
var selector = '.grid_r' + i + '.grid_c' + j + ' .grid_cell_text';
$(selector).html(listArray[i-1][j-1]);
}
}
});
</script>
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.
- Lines 3 through 9 creates an array of the labels, pulling directly from the pre-defined lists using SSI Script.
- Lines 10 through 15 are for loops that will iterate through the array created in lines 3 through 9. The first loop will cycle through the lists, the second loop through items in a list.
- Line 12 creates a selector that jQuery can use to find the cell label for the current loop iteration. If the grid was column oriented instead of grid oriented then the line would become
var selector = '.grid_r' + j + '.grid_c' + i + ' grid_cell_text'; - Line 13 relabels the cell so it contains the correct label from the correct list.
- Line 16 closes the anonymous function.
- Line 17 tells the browser that it should stop processing the JavaScript code.
- If the JavaScript works correctly then the grid question will now look like
Please note that this script will only work if this is the only grid question on the page and that it is using the default grid question options.