Home / Resources / Worksheets / Worksheet 77

Improving web surveys: layout and highlighting

This worksheet describes how to put an image next to a grid question in a two column layout, and also tells you how to switch on row highlighting so that the grid rows are highlighted when the cursor moves over them. (This highlights response boxes for all multi-choice questions.)

Finally, it describes how to insert an image into your own questionnaire

The sample survey used for this worksheet contains a question, the image of a report cover, and then a grid question about the image. You can download it here.

Background

You can set the number of columns in your questionnaire in the Questionnaire Properties dialog. You can also set individual questions to use the full page width, irrespective of the number of columns. This allows you to mix single-column questions with multi-column questions. In this example, the question on page one will occupy the full page width. The image and question grid on page two will be laid out over two columns.

Summary of steps

Step 1: Set the columns in the survey, and set individual questions to span all the columns

  1. Click Questionnaire properties button to open the Questionnaire Properties dialog.
  2. Select Margins in the left hand column and set the Columns to 2.

    QP: margins for Web HTML showing 2 columns

  3. Click [OK]. When you return to the questionnaire, the questions will look narrower, to fit into the new width.
  4. Select the first question in the example survey, and then select Columns in the toolbar topics.

  5. Click [Full Page]. The questions spread across the full width of the page.

Step 2: Set the color to highlight questions and grid rows

  1. Click Questionnaire properties button to open the Questionnaire Properties dialog if it is not open.
  2. Select Page in the left hand column.

    QP: Page style area for an HTML questionnaire

  3. Click the Row highlighting drop-down list, and select a color from the palette.
  4. Click [OK] to save your changes.
  5. Publish the questionnaire in Preview only mode to see how the questions will be laid out. (Select File|Publish or press [Ctrl] + [Shift] + [W] and then select Preview only as the Output Method.)

    Archive survey dialog with raw data check box highlighted

The image and grid question will appear next to each other. The grid question rows are highlighted when you move over them with the mouse.

Inserting an image into a survey

The survey supplied with the worksheet includes this image. If you would like to add an image to your own survey, follow these steps.

  1. Open your questionnaire.
  2. Place the cursor at the point where you wish to insert the image. If it is not being included as part of a question then create a separate question for the image. The Title, Sub-title or Instruction question styles are the most suitable, as they do not require any response.
  3. Set the toolbar topic to Font.

    Tool bar topic: Font: Design mode

  4. Click the [Insert...] button and select Image… from the menu.
  5. Choose the image you want to insert. Snap will then display the image in the Insert Image dialog box.
  6. Use the Zoom control to enlarge or reduce the image. This will affect the size of the image as it will appear in your Snap questionnaire. For example, setting the zoom to 50% will mean that the image appears at half the height and half the width. It normally produces better results if you change the image size in a dedicated graphics program.
  7. To select a different image, click the [Browse...] button.
  8. When you are happy with the image and the size setting, click the [OK] button. The image will then appear in the questionnaire.

Conclusion

This worksheet has described how to insert a graphic in a questionnaire, and put a grid question next to it. It also describes how to use the highlighting feature (available in Snap 10.18 and later versions) to highlight questions in a selected color when the mouse is over them.

If you wish to change the web page layout by changing the standard buttons (as shown in the example survey), see the worksheet Customising the toolbar on a web survey.

For more information about the Page properties dialog, see the reference topic: Page properties dialog.

Poll from Snap Surveys ...

 

If there is a topic you would like a worksheet on, email to snapideas@snapsurveys.com

» View more Worksheets