Sawtooth Software: The Survey Software of Choice

Add Custom Option Labels on a Grid Question

I have a grid question that contains check boxes and I want to put a custom label next to each check box.

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.

1421 list1
1421 list2
1421 list3
1421 list4
1421 list5

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';

Explanation of code

  1. Line 1 tells the browser to interpret everything that follows this line as JavaScript code.
  2. 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.
  3. Lines 3 through 9 creates an array of the labels, pulling directly from the pre-defined lists using SSI Script.
  4. 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.
  5. 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';
  6. Line 13 relabels the cell so it contains the correct label from the correct list.
  7. Line 16 closes the anonymous function.
  8. Line 17 tells the browser that it should stop processing the JavaScript code.
  9. If the JavaScript works correctly then the grid question will now look like
1421 grid2

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.

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

We are open!

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