Laying out a grid question for a Web survey Snap provides several tools to assist you in laying out questions and adjusting positioning of the separate elements. This worksheet describes adjusting the layout of a grid question. You will learn: How to set the grid boxes so that they are vertically centred How to hide the question number and remove the space left for it How to change the spacing between the grid elements How to adjust the page margins Background When you are creating a survey for the Web, you do not have the same control over the way it looks as you do for a paper survey. Different monitors and different browsers can make surveys look quite different, so it is worth checking it before you put it up on the Web or on Snap WebHost. You also have to consider how the survey will appear in different window sizes, rather than assuming that all the respondents will look at a full-screen window. Grid layouts that look very sensible in the Snap questionnaire design window may look less attractive when published to the Web. This worksheet describes how to adjust the spacing of a grid question which asks how much the respondent likes different sandwich fillings. It assumes that you have already created the grid question for a Web:HTML or Snap WebHost survey using the default Web template and the default styles. The question looks like this: If you published it in preview mode, it would look like this… Summary of steps Step 1: Removing question numbers and centering response boxes vertically Step 2: Adjusting the grid question spacing Step 3: Changing the page settings Step 1: Removing question numbers and centering response boxes vertically The preview shows that the response circles are vertically aligned with the bottom of the row. You can change that by adjusting the alignment. Centre the response boxes vertically Click to switch to Style mode. Select All ‘Grid’ Styles in the drop-down list. Select Alignment from the toolbar topic menu. Select Code Box from the element list. The first box (saying Center in the image) gives the horizontal alignment. The second box (saying Middle in the image) gives the vertical alignment. Set the vertical alignment to Middle. Remove the question numbers from the styles Still in Styles mode, select All Styles from the drop-down list. Select Show from the toolbar topic menu. Select Name (for question numbers) or Grid Name (for grid question numbers) from the element list. Clear the Show box to hide the question numbers. Step 2: Adjusting the grid question spacing The spacing of a grid question is calculated proportionately to the browser window size. This is because you do not know how respondents will be viewing your questionnaire. You can define the amount of available space that is given to each element using the Tabs option. The diagram below shows the element names and the areas they affect. Remove the space left for the hidden question numbers Still in Styles mode, select All Styles from the drop-down list. (If you have switched to design mode in the mean time, remember to click again.) Select Tabs from the toolbar topic menu. Select Name from the element list. Reduce the space for the Name element down to 0%. This will push the questions to the left-hand side of the window. (You can use a different value if you prefer.) Increase the gaps between the grid columns and remove the right-hand space With All ‘Grid’ Styles selected in Style mode, select Tabs from the toolbar topic menu. Select Code Gutter from the element list. Increase the space for the Code Gutter element to 15%. Select Code Verge from the element list. Reduce the space for the Code Verge element down to 0%. This removes the space between the question and the right-hand side of the window. Step 3: Changing the page settings Select File | Publish. Select in the left-hand column and set the Method to publish your questionnaire to Preview only. Click [Publish] to display the questionnaire as it will appear. There’s still space between the edges of the window and the grid question in the published survey. This is set in the Margins option in Questionnaire properties. Click to open the Questionnaire properties dialog. Select in the left hand column. Set all the margins value to 15px and click [OK]. Publish your questionnaire to preview again. Your grid question should now expand to fit the whole of the browser window. Conclusion This worksheet has shown you how to set the space and alignment for grid questions. You may also wish to read worksheet 35 on creating compound grids, or see Snap 11 Help: Hiding question numbers in web surveys and changing associated text. There are also instructions in the User Manual and the help file on how questions look. Select the Help menu in the Map Control Editor or read the section on “Changing an individual question” in the User Manual. If there is a topic you would like a worksheet on, email to snapideas@snapsurveys.com