Creating an adaptive questionnaire

This worksheet describes how to set up a Snap WebHost survey so that devices will see a version of the questionnaire tailored for their screen size.

To do this you need to create a separate Snap WebHost edition for each screen size (for example, for PC, tablet and smartphone) and publish them with the Publish all WebHost editions together option. This puts all the different questionnaires in one published zip file. Snap WebHost will then deliver the appropriate questionnaire according to the size of the device.

Background

The questionnaires are sent to different devices by Snap WebHost. Snap WebHost sorts the editions in order of page size and selects the largest questionnaire that will fit on the device screen.

You can identify the different editions using the paradata variable ID.format.

If you wish to customise the questionnaire look and behaviour for different devices, you can do so by editing the individual questionnaires.

Summary of steps

It is simple to create an adaptive questionnaire

Step 1: Set up the different editions using the default templates
Step 2: Publish your survey
Step 3: Check the survey appears correctly on your device

Step 1: Set up the different editions

This assumes that you have already created a survey with a Snap WebHost edition using the default Web template.

Now follow the below steps to create the other two WebHost editions for the Smart phone and Tablet.

1. Open your survey in Questionnaire – Design Mode window using the   button.
2. Click the Editions and Style Templates button  to display the Editions and Style Templates dialog.
3. Click [New…] to create a new edition, and in the Publication Medium field, select Web and Snap WebHost.
   
4. Select Load Style and select Default Smartphone.qsf from the drop-down list to use the template for a smartphone. (You can also browse for style files by clicking the  button.)
5. Edit the Edition Name to identify the device it is aimed at, e.g. Web:Smartphone.
6. Click [OK] to close the New Survey Edition dialog.
7. Repeat steps 3 and 4 but this time select Default Tablet.qsf from the drop-down list to use the template for a tablet.
8. Edit the Edition Name to identify the device it is aimed at, e.g. Web: Tablet.
9. Click [OK] to return to the Questionnaire – Design Mode window.
   

   Check there are 3 WebHost editions in the Editions and Style Templates dialog box, then click [OK] to return to the Questionniare – Design Mode window.
   Snap creates a new tab with the title being the Edition Name.

   

Step 2: Publish your survey

When publishing your survey, you need to check the Publish all WebHost editions together. This puts all the required files for all visible WebHost editions in a single zip folder. If you do not wish to publish all Snap WebHost editions to a single file, you can hide the ones you do not want. Hidden editions are not visible in the Questionnaire window and will not be published.

Hiding editions you don’t want to publish

1. Click  in the Questionnaire window toolbar to display the Editions and Style Templates dialog.
2. Displayed editions have a check mark in the box next to them. To hide an edition, uncheck the box.
3. Click [OK] to return to the questionnaire. The hidden edition(s) will no longer be listed in the edition tabs at the bottom of the pane and will not be added to the zip file when you publish.

Publishing all the editions to a single file

1. Select File | Publish.
2. Select   in the left-hand column headed Section if it not selected.
3. Select Publish Without Preview as the Output Method.
4. Select  in the left-hand column.

   

5. Select Publish all WebHost editions together.
6. Click [Publish] to publish the survey and create the zip file in the folder you specified.
   You must now upload the survey to the Snap WebHost server so that it is accessible by respondents. (See the section Upload the published survey to Snap WebHost in the Getting Started guide).

Step 3: Check the survey appears correctly on your device

It is a good idea to check that your questionnaire appears as you would expect on your devices. You can either email the survey test link to an account you can access from the device, or type the survey test link into the navigation bar on the device browser.

To get the test link for the survey:

1. Log into Snap WebHost.
2. Select the survey.
3. Either
   • Click the test link and copy the address from your browser’s address bar

   OR

   • Right-click the test link and select the copy link option (The wording for this option will vary depending on your browser.)

   

4. Paste the link into an email and send it to the email account you can access from your device.
5. Click on the link and confirm that the correct questionnaire appears.

Customising your questionnaires

If you want to change the default look of your questionnaires, you can edit them independently and then publish them together. You can set up the different editions to look and behave quite differently.

• Setting up different graphics for different editions 
• Changing the questions or text for different editions
• Using different routing in different editions
• Checking your survey has the correct content for different devices.

Setting up different graphics for different editions

If you want to use separate graphics for different devices, you must do this by placing them in the background, rather than inserting them directly.

It is best to create separate images of the correct size, rather than attempting to resize the graphic.

1. Create the different graphics that you wish to use for the large and small screens.
2. Check that the Questionnaire Window is in Design Mode   and that the toolbar topic is set to Background.

   

3. Select the area that you wish to have a background image in the third drop-down list (highlighted above). Click the [Picture] button. The Picture dialog appears.
4. Click [Browse] and browse for the appropriate picture file for that edition.
5. Set the horizontal and vertical alignment.
6. Select Fixed. This ensures that the image will appear at the size you have created it.

   

7. Change to the other edition and repeat with a different picture in the background.
8. Click  to save the changes to the questionnaire.

If you have applied a color and an image, the color will be displayed in areas where the image does not fill the space. The background preview area on the toolbar will be split showing the color alone on the top half.

Changing the questions or text for different editions

If you want to have less text in one edition of your survey, you can provide different versions of the text, and show the one that is appropriate for that edition.

1. Create the different instructions (or questions).

   

2. Right-click the item you wish to hide and select Hide Variable in the dropdown list.
3. Change to the other edition by selecting the appropriate tab at the bottom of the screen.

   

4. Hide the text (or questions) that you do not want in that edition.
5. Click  to save the changes to the questionnaire.
   Remember that you will need to change the routing if you route through hidden questions.

Using different routing in different editions

You can choose which questions are displayed using routing based on the ID.format variable.

You need to look at the ID.format variable to see the code for an edition.

1. Click  on the Snap toolbar to display the Variables window.
2. Scroll to find the ID.format variable and double-click to open it.

   

3. Take note of which Code represents which edition.

Setting up the routing

1. Create the different questions.
2. Select the one you wish to appear in that edition.
3. Right-click the mouse and select Routing Rules from the context menu or click  on the Questionnaire window toolbar. The Routing Rules dialog appears.

   

4. Click [Add] to create a new routing rule.
   Select Conditionally Ask Question from the Type box and click [OK].
   
5. The Rule Details dialog appears.

   

6. Type ID.format=1 (replacing 1 with the Code representing your edition). This means that the question will be shown if the questionnaire format is the Web: Snap WebHost edition in the survey in this worksheet.
7. Click  to save the changes to the questionnaire.

Remember that you will need to change the routing if you hide any questions that have routing on or are being routed to.

Checking your survey has the correct content for different devices

You can check your survey content for each device by previewing each edition.

1. Open your survey in Questionnaire – Design Mode window using the  button.
2. Select File | Publish to display the Publish Questionnaire dialog.
3. Select  in the left-hand column headed Section if it not selected.
4. Select Preview Only as the Output Method. The Preview will open a new window and display this edition of your survey as it would appear in a web browser.
5. Click [Publish] to preview that edition of your survey on the desktop. Check that you have chosen the correct questions and images for that edition. Check that any routing works. (The default web edition will be fixed width, whereas the smartphone and tablet editions will stretch to fit the screen.)
6. Go back to Snap and change to the edition for a different device by clicking the tabs at the bottom of the screen.
7. Repeat the preview check for each edition you have created.

Conclusion

This worksheet has described how to create an adaptive questionnaire for Snap WebHost, so people browsing the survey on different devices can see different versions of the questionnaire.

If you would like to find out more about questionnaire layout, see the worksheet: Preparing surveys for smartphones.

If you would like to find out more about routing, see: Introduction to routing.

If you would like to find out about providing surveys for mobile devices using Snap Mobile Anywhere, see the Getting Started Guide Getting started with Snap Mobile Anywhere. This is also covered in the worksheet Setting up surveys for Snap Mobile Anywhere.

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