Carousel tables display their question-rows as a series of slides that shift horizontally as each question is answered. To create a carousel table, include the carousel: y tag.
Try it!
Details
- The
carousel: ytag can be applied to either single-select tables (type: radio table) or multiselect tables (type: checkbox table). - By default, single-select carousels automatically move to the next slide/question once a response is selected. For multiselect carousels, navigation must be done manually by clicking the arrows, progress "dots," or the slides themselves.
- To modify the default settings of a carousel table, include decorators after the
carousel: ytag; e.g.,carousel: y {arrows: n} {slides: all} {progress: numbers}. - The
mode: verticaltag can be included to display options vertically.
Carousel decorators
| Decorator | Description |
arrows |
Accepts 'y' and 'n' inputs. Setting to 'n' hides the arrows from the respondent. |
delay |
Specifies the time delay in milliseconds (msec) between a respondent selecting an option and the carousel moving to the next slides; defaults to 300 msec. |
marker |
Accepts 'y' and 'n' inputs. Setting to 'n' hides the confirmation check icons in the slides. |
navigate |
For use with single select carousel tables; accepts 'y' and 'n' inputs. Setting to 'n' hides the arrows so that the respondent can navigate using only the progress "dots" or clicking on the next or previously answered slides. |
position |
Specifies the placement of the slides in relation to the options. Accepts inputs of 'before' (default) or 'after'. |
progress |
Specifies how to display the respondent's progress in the table. Accepts inputs of 'dots' (default) or 'numbers' (e.g., 1 / 5). Note that progress dots can be used for navigation through the question-rows, whereas numbers cannot. |
slides |
Specifies how the slides are displayed to the respondent. Setting to '1' shows only the active slide, and setting to 'all' shows as many slides as can fit on the respondent's screen (default). |
Commonly used tags
The following tags are commonly used with carousel tables.
| Tag | Description |
headings |
Creates two or more headings above the table options. These headings are separated by commas and placed on the the polar extremes of the table (e.g., Include |
|
(alias |
Provides instructions to guide the respondent. |
series |
Used with list calls such as optsfrom, rowsfrom, or colsfrom; generates sequential list options within the specified upper and lower bounds. |
|
(alias |
Displays images alongside table rows' text in r9+. Any row elements that require images to be shown with them should include an image decorator referencing its associated image file. |
Tip! To display images with table rows in r8 software versions, use option data decorators.
Additional examples
Multiselect carousel table
Multiselect (checkbox) carousel tables are displayed the same as radio carousel tables, but respondents must manually navigate through the slides/questions. After selecting the options for a slide, respondents move to the next slide or a previous slide by clicking the left and right arrows, the progress "dots," or the slides themselves.
Carousels with vertical options
Carousel tables support mode: vertical, which aligns the options vertically and is useful for respondents on mobile devices. When using vertical mode with headings, the headings are incorporated into the the option button text.
For r8 surveys, mode: vertical must be included to display headings with carousel tables.
Slides as images
Carousel tables also allow you to display images for individual slides. In r9+, this can be accomplished with the show row images: y tag. To do so, apply image decorators to each row element, referencing the corresponding image files uploaded to your survey.
Like other image tags, additional decorators can be applied to the rowsfrom listcall to customize how the images are presented in the table.
Grouping elements with collection headers
Carousel tables can include collection headers with row elements. The headers will be shown in italics above the slides.
Comments
0 comments
Please sign in to leave a comment.