- \n
- How to set the grid boxes so that they are vertically centred<\/li>\n
- How to hide the question number and remove the space left for it<\/li>\n
- How to change the spacing between the grid elements<\/li>\n
- How to adjust the page margins<\/li>\n<\/ul>\n
<\/a><\/p>\n
Background<\/h3>\n
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.<\/p>\n
Grid layouts that look very sensible in the Snap questionnaire design window may look less attractive when published to the Web.<\/p>\n
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:<\/p>\n
\n![\"Sandwich](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/swich_quest.png\")
<\/p>\n<\/div>\nIf you published it in preview mode, it would look like this…<\/p>\n
![\"Sandwich](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/swich_def.png\")
<\/div>\n<\/a><\/p>\n
Summary of steps<\/h3>\n
Step 1: Removing question numbers and centering response boxes vertically<\/a>
\nStep 2: Adjusting the grid question spacing<\/a>
\nStep 3: Changing the page settings<\/a><\/p>\n\n<\/a>Step 1: Removing question numbers and centering response boxes vertically<\/h3>\n
The preview shows that the response circles are vertically aligned with the bottom of the row. You can change that by adjusting the alignment.<\/p>\n
Centre the response boxes vertically<\/strong><\/p>\n
- \n
- \n
- \n
- Click
![\"Switch](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/205.png\")
\u00a0to switch to Style mode.<\/li>\n - Select All ‘Grid’ Styles<\/strong> in the drop-down list.<\/li>\n
- Select Alignment <\/strong>from the toolbar topic menu.<\/li>\n
- Select Code Box\u00a0<\/strong>from the element list.
\nThe first box (saying Center <\/strong>in the image) gives the horizontal alignment.
\nThe second box (saying Middle <\/strong>in the image) gives the vertical alignment.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n![\"All](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/all_grd_st_alg_box.png\")
<\/div>\n- \n
- Set the vertical alignment to Middle<\/strong>.<\/li>\n<\/ol>\n
Remove the question numbers from the styles<\/strong><\/p>\n
- \n
- Still in Styles mode, select All Styles<\/strong> from the drop-down list.<\/li>\n
- Select Show <\/strong>from the toolbar topic menu.<\/li>\n
- Select Name (for question numbers) or Grid Name (for grid question numbers) from the element list.\n
![\"All](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/all_styl_show_name.png\")
<\/div>\n<\/li>\n- Clear the Show <\/strong>box to hide the question numbers.<\/li>\n<\/ol>\n<\/div>\n
\n<\/a>Step 2: Adjusting the grid question spacing<\/h3>\n
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 <\/strong>option. The diagram below shows the element names and the areas they affect.<\/p>\n
![\"blank_mc_top_lab\"](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/blank_mc_top_lab.png\")
<\/p>\nRemove the space left for the hidden question numbers<\/strong><\/p>\n
- \n
- Still in Styles mode, select All Styles<\/strong> from the drop-down list. (If you have switched to design mode in the mean time, remember to click \u00a0again.)<\/li>\n
- Select Tabs <\/strong>from the toolbar topic menu.<\/li>\n
- Select Name from the element list.\n
![\"All](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/all_st_tab_name.png\")
<\/div>\n<\/li>\n- Reduce the space for the Name <\/strong>element down to 0%<\/strong>. This will push the questions to the left-hand side of the window. (You can use a different value if you prefer.)<\/li>\n<\/ol>\n
Increase the gaps between the grid columns and remove the right-hand space<\/strong><\/p>\n
- \n
- With All ‘Grid’ Styles<\/strong> selected in Style mode, select Tabs <\/strong>from the toolbar topic menu.<\/li>\n
- Select Code Gutter\u00a0<\/strong>from the element list.\n
![\"All](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/all_grd_st_tabs_gut.png\")
<\/div>\n<\/li>\n- Increase the space for the Code Gutter <\/strong>element to 15%<\/strong>.<\/li>\n
- Select Code Verge\u00a0<\/strong>from the element list.\n
![\"All](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/all_grd_st_tabs_ver.png\")
<\/div>\n<\/li>\n- Reduce the space for the Code Verge<\/strong> element down to 0%. This removes the space between the question and the right-hand side of the window.<\/li>\n<\/ol>\n<\/div>\n
\n<\/a>Step 3: Changing the page settings<\/h3>\n
- \n
- Select File | Publish<\/strong>.<\/li>\n
- Select
![\"Output](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/18604.gif\")
\u00a0in the left-hand column and set the Method <\/strong>to publish your questionnaire to Preview only<\/strong>.\n\n![\"Output](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/outpt_prev_sandw.png\")
<\/p>\n<\/div>\n<\/li>\n- Click [Publish]<\/strong> to display the questionnaire as it will appear.\n
\n![\"Sandwich](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/swich_wd_marg.png\")
<\/p>\n<\/div>\nThere’s still space between the edges of the window and the grid question in the published survey. This is set in the Margins <\/strong>option in Questionnaire properties<\/strong>.<\/li>\n
- Click
![\"Questionnaire](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/18614.gif\")
\u00a0to open the Questionnaire properties dialog.<\/li>\n- Select
![\"Margins](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/18599.gif\")
\u00a0in the left hand column.<\/li>\n- Set all the margins value to 15px <\/strong>and click [OK]<\/strong>.\n
\n![\"Margins](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/margins_prop_swh1col.png\")
<\/p>\n<\/div>\n<\/li>\n- Publish your questionnaire to preview again. Your grid question should now expand to fit the whole of the browser window.\n
\n![\"Sandwich](\"https:\/\/www.snapsurveys.com\/support-snap11\/wp-content\/uploads\/2013\/08\/swich_na_marg.png\")
<\/p>\n<\/div>\n<\/li>\n<\/ol>\n<\/div>\n<\/a><\/p>\n
Conclusion<\/h3>\n
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<\/a>, or\u00a0see Snap 11 Help:\u00a0Hiding question numbers in web surveys and changing associated text<\/a>.<\/p>\n
There are also instructions in the User Manual and the help file on how questions look. Select the Help <\/strong>menu in the Map Control Editor or read the section on “Changing an individual question” in the User Manual.<\/p>\n
If there is a topic you would like a worksheet on, email to snapideas@snapsurveys.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
- Select
- Select Code Gutter\u00a0<\/strong>from the element list.\n
- Select Tabs <\/strong>from the toolbar topic menu.<\/li>\n
- Select Show <\/strong>from the toolbar topic menu.<\/li>\n
- Still in Styles mode, select All Styles<\/strong> from the drop-down list.<\/li>\n
- Select Alignment <\/strong>from the toolbar topic menu.<\/li>\n
- Click
- \n