Home / Worksheet 53

Using styles to tint alternate rows in a grid question

You can create a style in Snap that creates the same type of question as an existing style but looks different. This can be useful when differentiating grid questions.

This worksheet shows you how to create a simple grid question and then define a coloured style for the first and odd rows of your grid, and a white style for the even rows of your grid.

It also shows you how to set aspects of the style so a coloured row is followed by a white row and vice versa.

You can then create new grid striped grid questions by selecting the new grid first style.

Background

Snap has ten pre-set styles for questions. In questionnaire design mode, you can make changes to these styles, such as adding bold, or changing the spacing.

If you wish to re-use the changes, you can save them as a style. This style is then preserved as part of a questionnaire template and can be used again, for other surveys.

Part of the style definition is what style is used for the next question, or part of a question.

Summary of steps

Creating a grid with alternate coloured rows requires the following steps:

Step 1: Setting up the grid question

Skip this step if you already have a grid question containing at least three rows.

  1. Open Snap and click or select File|New to create a new survey.
  2. Specify the Publication Medium as Web for HTML.
  3. Change to the Questionnaire window if it is not already in that mode.
  4. A space for a title is created automatically in the survey. Type Grid worksheet survey and press [Return].
  5. A space for a sub title is created automatically in the survey. Type Please complete our survey and press [Return].

Create the grid first question

  1. Click the button to the right of the words Multi Choice to display the other style names and select Grid First. This allows you to set up the headings for the first of a series of grid questions.
  2. Type "How did you rate the following?" and press the [Tab] key on your keyboard.

    The cursor moves to the list of codes across the top of the first grid question.

  3. Type "Very good" and press [Tab]. Type "Good" and press [Tab]. Type "OK" and press [Tab]. Type "Poor" and press [Tab]. Type "Very poor" and since this is the last code to be set up, press [ê] instead of [Tab].
  4. Type "Service" and press [Tab]. This creates a new row in the grid. Note that the style at the top has changed to Grid Next.

    Grid next question example

  5. Type "Quality" and press [Tab]. This creates another row of style Grid Next..

Step 2: Setting up the coloured rows

  1. Select the first line of the grid.
  2. Select Background in the toolbar topics list, and then select Answer Area.
  3. Click [Colour] to select the background colour to add to your survey. The grid row is tinted in the selected colour. The name of the style changes to like Grid First.

    Grid next question with background tint

  4. Select the second line of the grid and set the background colour to white.
  5. Select the third line of the grid and set the background colour to the same as the first line.

This sets the three styles that are used to create the grid, the first row and the two rows which alternate colours in the body of the grid.

Step 3: Creating your new tinted styles

  1. Click the Style Mode button on the toolbar to convert the background changes into styles.
  2. Click the button on the toolbar to open the Style Organiser. There are three styles in the left hand column, Q1.a like Grid First, Q1.b like Grid Next and Q1.c like Grid Next. These show the questions with different backgrounds.

    Style organiser with three new grid styles

  3. Select the like Q1.a like Grid First style and click the [Properties] button. Rename it to Striped grid first and click [OK].

    Striped grid first style properties

  4. The other two temporary styles change their name to show that they are associated with the new style.

    List of styles showing generated names

  5. Select the Striped grid Next style. It will show as a white stripe in the preview window.
  6. Click the [Properties] button. Rename it to Grid white Next and click [OK].
  7. Select the like Striped grid Next1 style. It shows as a tinted stripe in the preview window. Click the [Properties] button. Rename it to Grid tint Next and click [OK].

This saves the three temporary styles as permanent styles. They will then be saved if you save the questionnaire as a style template.

Step 4: Setting up the styles so they switch automatically

Now that you have named your three styles, you can set them up so that the grid first style Striped grid First is always followed by a Grid white Next style, and the Grid white Next style is always followed by a Grid tint Next style,. This means that when you select Striped grid First at the start of a style, your whole grid will be striped automatically.

  1. If the Style Organiser dialog isn't open, click to display it.
  2. Select Striped grid First in the style list and click [Properties].
  3. Select Grid white Next in the dropdown list for Next Part. This defines what style the next part of the question will be.

    Style organiser properaties with dropdown list

    By default the Clone Next Part box will be ticked. Leave that as it is. This makes the next line in the grid have the same responses as the previous line.

  4. Click [OK] to save your changes.
  5. Select Grid white Next in the style list and click [Properties].
  6. Select Grid tint Next in the dropdown list for Next Part and click [OK].
  7. Select Grid tint Next in the style list and click [Properties].
  8. Snap may have worked out that the Next Part should have a Grid white Next style. If not, set it.. Click [OK].
  9. Click [OK] to close the Style Organiser dialog.

Step 5: Creating a new grid question using the new styles

  1. Click to go back into design mode.
  2. Press [Return] to start a new question. By default the question will be multi-choice.
  3. Select Striped grid First in the styles list. Create a new grid question as described in Step 1. By default, each time you create a new line with the [Tab] key, the row colour will alternate.

Two striped grid questions

» View more Worksheets