Flex

The Flex theme is designed for viewing surveys via mobile devices. Similar to the Device Diverse and Mobile themes, Flex adapts to the width of the respondent's phone and dynamically changes its display to maximize the width of the screen.

Starting in r8.0, Flex is the default survey theme when creating a new survey. For information on changing a survey's theme, see Survey configuration.

Navigation

Survey pages automatically submit where appropriate. If all visible questions are single-select, as soon as the respondent has provided an answer the survey will advance to the next page. In these cases where the survey has automatically advanced, a back button will temporarily appear on the following page, in the bottom left. This is to provide respondents who may have selected the wrong answer the opportunity to navigate back and correct that answer. (If singlepage: y is on app config, no back button will appear in the survey.) Other question types, such as text inputs and multi-select questions, will cause survey pages to display a continue button as soon as a response is provided. The button must be clicked in order to advance to the next page.

Examples

To get the "full experience" for how surveys will respond to different screen sizes, feel free to increase and decrease your browser width to watch how the survey responds to these size changes.

Auto-scrolling tables

Tables display three rows at a time, and feature a scroll bar. As soon as all visible table rows have an input, the table will automatically scroll to reveal the next two table rows. To modify the default displayed rows, use the show_rows tag as shown in T3.

See demo See code Restart demo

If a radio type table has an autoother row, and there are no other questions on the page, the page will not submit automatically. This way, the respondent can selectively use the autoother row without the page automatically submitting before they can input a response. When the last required field is filled, the Continue button will appear, which must be clicked to proceed.

Table customization

The following parameters may be used to modify tables in Device Diverse, Modern, or Flex themes.

show_rows: 4

show_rows: all

Adding mode: textabove to the following example modifies the table so that the row element text, the elements from the list FRUIT, is displayed above their response options.

See demo See code Restart demo

Since example T4 does not specify a number of rows to show at once, the default behavior would be to show three rows at a time. Not including the start scroll tag will cause the table to start scrolling after two rows' responses have been selected (rounding up from 3/2 =1.5 rows).

To begin the table scrolling earlier or later, include start scroll and specify the number of rows to scroll after.

See demo See code Restart demo

Click mode for more information.

Ranking questions

Ranking questions in mobile themes utilize the rank widget. Each option will display the next available rank in its upper right hand corner when hovered over with the cursor (desktop) or when the option has been selected.

See demo See code Restart demo

Tiled

The example below shows a basic tiled table with a step value of 1. Respondents may type a value into the field then increment or decrement as needed, or simply use the +/- buttons to specify the values.

See demo See code Restart demo

For more information on tiled tables, see tiled.

Scale

Flex theme will automatically size buttons and arrange them in a manner to best fit the respondent's screen size. This may not always be desirable, perhaps because response options increment numerically, so it may be necessary to test the option arrangement by changing the width of the browser window.

To always display options in a single row (or column, if the screen is narrow), use the scale: y tag.

See demo See code Restart demo

Minimum width

To specify the minimum width to which an option button can be automatically scaled, use the minwidth parameter, accessible via the template_data tag. If specified, this is the smallest size an option button can become. If two option buttons cannot fit adjacent to each other, they will stack vertically.

See demo See code Restart demo

Tooltips

Tooltips (a.k.a., "mouse overs") can be applied to questions via the explain or settext tags. They work similarly to the instruct tag, but whereas the input of the instruct tag always shows to the respondent, the text from an explain or settext only shows if the respondent hovers over the info icon or underlined text, respectively.

css: .i-instruct::after, .i-rank-instruct::after, .i-table-instruct::after, .i-instruct::before, .i-rank-instruct::before, .i-table-instruct::before {content: "";}

explain

The explain feature in Flex works much the same as it does in other themes. For question/row elements or items used in a ranking question, the buttons include a a blue tooltip in the bottom righthand corner.

See demo See code Restart demo

settext

The settext widget allows SPs to specify a term that, when displayed on screen, is underlined and functions just like an explain tooltip.

See demo See code Restart demo

If there is a pointing device on the platform being used to take the survey, dragging the cursor on the icon or over the accented button area will cause the tooltip to appear. If the device has a touch screen, the icon or accented area must be pressed to reveal the explain text.