Bamboo Slider is one of the standard templates that has been made available. This template heavily relies on JavaScript and validates to the HTML 4.01 Transitional specification. The name comes from the default color configuration and slide transition. One of the most unique features of this template is that a page is made of a series of slides. By default, each question will occupy its own slide unless you choose otherwise within a question. As the respondent moves through each question on a page, slides will transition in and out of the viewing area.
The following documentation explains how you can customize this template.
Contents |
[edit] Survey Editor
When you are within the survey editor, there is a section called Customize Template for this Survey. This section allows you to configure options that will apply survey-wide or trickle down into your individual pages, questions and answers if they so apply.
[edit] Slide Transition
Slide Transition allows you to specify how you would like individual slides to appear and disappear from the viewing area. As a respondent moves through the survey, clicking the button for the next slide, the next question will appear as the previous question disappears. There are currently three settings for the slide transition:
- Swipe
The current slide will swipe left out of view as the next slide swipes in from the right. The reverse will happen if a user is moving to a previous slide on the page.
- Fade
The current slide will fade to invisible as the requested slide fades into view.
- Instant
The current slide instantly disappears as the requested slide takes its place.
[edit] Survey Width and Height
Survey Width and Survey Height control how large the survey screen appears on a respondents screen. By default, the size of the survey screen is 720 x 400 pixels. The survey screen is the boxed area that questions slide into and out of. It does not include the height of the survey title or any customer header or footer. To change the size of the survey, simply enter the new dimensions into each of these template variables as a number representing the size in pixels.
[edit] Question Numbering
The Question Numbering configuration will, by default, cause each question in your survey to be displayed with a number representing its position in the response. These numbers may change during a response due to conditions or loops. If you do not want your questions to be numbered automatically, set this field to No.
[edit] Date Format
The Date Format field specifies the order in which the year, month and day fields appear in the Dates and Times question type, as well as the separator used between them. The allowed values are:
| YYYY-MM-DD | ISO Standard (default; usable by most respondents) |
| YYYY MM DD | ISO Standard using spaces (looks nicer with Date Input Type = Menu) |
| MM/DD/YYYY | Month first (common in the United States and Canada) |
| MM DD, YYYY | Month first using spaces (looks nicer with Date Input Type = Menu) |
| DD/MM/YYYY | Day first (common throughout much of the world) |
| DD MM YYYY | Day first using spaces (looks nicer with Date Input Type = Menu) |
This field allows you to customize the format on a per-language basis to provide your respondents a format they are familiar with. Please keep in mind that if you do not specify a format in one of the languages, it will default to YYYY-MM-DD which is generally understood by a wide audience.
[edit] Common Language Strings
The common language strings are used on each page of your survey, generally to control the label that appears on various buttons used within a survey response.
[edit] Previous and Next Slide Buttons
The Previous Slide Button and Next Slide Button variables control the text that appears on the buttons that allow your respondent to move backwards and forwards through the various slides that appear on each page of your survey. These fields default to '<' and '>' respectively, which render in HTML as '<' and '>'. You can change these, on a per-language basis, to any HTML you like. For instance, if you wanted to use an image as the button for the next slide, you would enter something similar to:
<img src="http://www.example.com/path/to/next.gif" width="20" height="20" alt=">" border="0">
You will obviously need to tailor the src attribute to point to an image on your server and also adjust the height and width attributes to properly size the image. The image will be aligned at the top of the button, so if you want to adjust it lower, you can add some CSS styling to pad the top by adding the following attribute to the img tag shown above:
style="padding-top: 4px;"
You may need to adjust the '4px' to achieve the proper amount of padding.