How do I add alternate row shading in Grid questions? (Power Surveys)

Row shading is very helpful for participants when answering Grid questions because it makes it easier for participants to keep track of what attribute they are providing an answer to. Though most communities have alternate row shading in Grid questions, you may want to change these colors, or in some situations the look and feel of the community may not have any shading defined at all.

Note: This script will not work for visual questions. 

Detailed Steps

Adding and setting up questions:

1. Click on the Questionnaire tab of your survey.
2. Create a flat Single Choice Grid or flat Multi Choice Grid.

Prepare the script in Notepad:

1. Open Notepad or a similar text editor.
2. Copy and paste the script found in the Script section below into Notepad.
3. Determine the colours you'd like to use and find the hexidecimal colour code for them. You can reference here for colour codes.
   Note: Hexidecimal colour codes start with the '#' symbol, and are followed by a series of 6 characters, 0-9 or A-F (e.g. #9AB3F0)
4. [HEADER ROW COLOUR] should be replaced with the hexidecimal colour code used for the header (top) row in the grid.
5. [ODD ROW COLOUR] should be replaced with the hexidecimal colour code used for the first, after the header, and subsequent odd numbered rows in the grid.
6. [EVEN ROW COLOUR] should be replaced with the hexidecimal colour code used for the remaining, even numbered, rows in the grid.

Script:

<!--

Script Name: How do I add alternate row shading in grid questions ? 

To ensure your script works as expected, always copy the original script from the script library found in the support portal. Failure to use the most up to date script from the script library may cause unexpected results. 

-->

<style>
td.ResponseGridHeaderTd {
  background-color: [HEADER ROW COLOUR];
}

tr.ResponseGridTr td.ResponseGridTdLabelCol, 
tr.ResponseGridTr td.ResponseGridTd {
  background-color: [ODD ROW COLOUR];
}

tr.ResponseGridTrAlternate td.ResponseGridTdLabelColAlternate, 
tr.ResponseGridTrAlternate td.ResponseGridTdAlternate {
  background-color: [EVEN ROW COLOUR];
}
</style>

Script Usage:

1. Go to the survey and find the grid question you created previously.
2. In the Scripting section, click Edit Scripts.
3. Copy the modified script from Notepad into the Style script tab.
4. Click Save.
5. Click Validate and test your survey.

More Information

For more information, please see our WebHelp topic Grid.