Skip to main content

FV Decipher Support

All the topics, resources needed for FV Decipher.

 
FocusVision Knowledge Base

Customizing the Button Select Element

1:  Overview

The button select element transforms a single-select or multi-select question into a set of clickable buttons. This style is mobile friendly and provides a great way for respondents to easily select items.

This question's style (colors, size, layout, etc...) can be customized to meet the needs of your project.

2:  Underlying Question Architecture

This dynamic style sits on top of a <radio> or <checkbox> question. See below for an example of the base XML code needed for this style.

Base XML

<radio label="Q1">
  <title>
    Which of these is your favorite?
  </title>
  <row label="r1">Facebook</row>
  <row label="r2">Twitter</row>
  <row label="r3">Diaspora</row>
  <row label="r4">LinkedIn</row>
  <row label="r5">Vine</row>
</radio>

The XML above code produces the following result:

3:  Converting to the Button Select Element

To add the button select style to this question, simply update the <radio> tag as shown below:

<radio label="Q1" uses="atm1d.8">

This change produces the following result:

4:  Customization

This style is extremely configurable and easily modified for your project's needs. Listed below are all of the attributes for the latest version of the dynamic question, Button Select (atm1d.8). This version was made available at the Decipher M29 release.  To view a list of all the latest dynamic questions versions, M29 release.  To view a list of all the latest dynamic questions versions, click here

 

  • atm1d:numCols
    • Number of Columns
    • The number of buttons displayed in one row.  The number of columns is supported for the Multicol layout.
    • Type: String
    • Example: atm1d:numCols="3" displays 3 buttons in one row.

This style only works with atm1d:viewMode="Tiled".

XML:

<radio 
  label="q1"
  atm1d:viewMode="Tiled"
  atm1d:numCols="3"
  uses="atm1d.8">
  <title>Which of these is your favorite?</title>
  <comment>Click on a button to select.</comment>
  <row label="r1">Facebook</row>
  <row label="r2">Twitter</row>
  <row label="r3">Diaspora</row>
  <row label="r4">LinkedIn</row>
  <row label="r5">Vine</row>
</radio>
  • atm1d:showInput
    • Show Form in Button
    • Respondents click a button to select an answer. This attribute determines whether or not the answer form (e.g., radio button or checkbox) shows within the button.  Note: This setting is independent from the FIR setting. Select 1 to show the answer form within buttons. Select 0 to hide the answer form and only show the buttons. The default value is 1.
    • Type: enum
    • Example: atm1d:showInput="0" doesn't display the answer form within the button.

XML:

<radio 
  label="q1"
  atm1d:showInput="0"
  atm1d:viewMode="Tiled"
  uses="atm1d.8">
  <title>Which of these is your favorite?</title>
  <comment>Click on a button to select.</comment>
  <row label="r1">Facebook</row>
  <row label="r2">Twitter</row>
  <row label="r3">Diaspora</row>
  <row label="r4">LinkedIn</row>
  <row label="r5">Vine</row>
</radio>
  • atm1d:viewMode
    • Layout
    • Choose the layout of the buttons.  Select Vertical to align the buttons vertically. Select Tiled to tile the buttons in grid format. Select Horizontal to align the buttons horizontally.
    • Type: enum
    • Example: atm1d:viewmode="Vertical" displays the buttons vertically.
  • atm1d:large_minHeight
    • Minimum Height
    • If Layout if Horizontal: Define the minimum height allowed for larger screens in pixels, em or a percentage (25px, Auto, 1em, or 10%).
    • Default: percentage
    • Type: string
    • Example: atm1d:large_minHeight="25px" displays buttons with a minimum height of 25 pixels for larger screens with horizontal layout.
  • atm1d:large_maxHeight
    • Maximum Height
    • For all layouts: Define the max height allowed for larger screens in pixels, em or a percentage (50px, Auto, 2em, or 20%).
    • Default:  percentage
    • Type: string
    • Example: atm1d:large_maxHeight="50px" displays buttons with a maximum height of 50 pixels for all layouts for larger screens.
  • atm1d:large_minWidth
    • Minimum Width
    • If Layout is Vertical: Define the minimum width allowed for larger screens in pixels, em or a percentage (100px, Auto, 4em, or 40%).
    • Default: percentage
    • Type: string
    • Example: atm1d:large_minWidth="100px" displays buttons with a minimum width of 100 pixels for larger screens with vertical layout.
  • atm1d:large_maxWidth
    • Maximum Width
    • For all layouts:  Define the max width allowed for larger screens in pixels, em or a percentage (200px, Auto, 8em, or 80%).
    • Default: percentage
    • Type: string
    • Exampleatm1d:large_maxWidth="200px" displays buttons with a maximum width of 200 pixels for all layouts for larger screens.
  • atm1d:large_buttonAlign
    • Button Alignment
    • Choose the alignment of buttons in relation to the page for larger screens. Select Left to left-align buttons. Select Center to center-align buttons. Select Right to right-align buttons.
    • Type: enum
    • Example: atm1d:large_buttonAlign="Right" displays buttons in a right alignment in relation to the page for larger screens.

XML:

<radio 
  label="q1"
  atm1d:viewMode="Tiled"
  atm1d:large_buttonAlign="Right"
  uses="atm1d.8">
  <title>Which of these is your favorite?</title>
  <comment>Click on a button to select.</comment>
  <row label="r1">Facebook</row>
  <row label="r2">Twitter</row>
  <row label="r3">Diaspora</row>
  <row label="r4">LinkedIn</row>
  <row label="r5">Vine</row>
</radio>
  • atm1d:large_contentAlign
    • Content Alignment
    • Choose the alignment of the content within buttons for larger screens. Select Left to left-align content. Select Center to center-align content. Select Right to right-align content.
    • Type: enum
    • Exampleatm1d:large_contentAlign="Center" center aligns content within buttons for larger screens.
  • atm1d:small_minHeight
    • Minimum Height
    • If Layout is Horizontal: Define the minimum height allowed for smaller screens in pixels, em or a percentage (25px, Auto, 1em, or 10%).
    • Default: percentage
    • Type: string
    • Example: atm1d:small_minHeight="25px" displays buttons with a minimum height of 25 pixels for smaller screens.
  • atm1d:small_maxHeight
    • Maximum Height
    • For all layouts: Define the max height allowed for smaller screens in pixels, em or a percentage (50px, Auto, 2em, or 20%).
    • Default: percentage
    • Type: string
    • Example: atm1d:small_maxHeight="50px" displays buttons with a maximum height of 50 pixels for smaller screens.
  • atm1d:small_minWidth
    • Minimum Width
    • If Layout is Vertical: Define the minimum width allowed for smaller screens in pixels, em or a percentage (100px, Auto, 4em, or 40%).
    • Default: percentage
    • Type: string
    • Example: atm1d:small_minWidth="100px" displays a minimum width of 100 pixels for vertical layouts on smaller screens.
  • atm1d:small_maxWidth
    • Maximum Width
    • For all layouts: Define the max width allowed for smaller screens in pixels, em or a percentage (200px, Auto, 8em, or 80%).
    • Default: percentage
    • Type: string
    • Example: atm1d:small_maxWidth="200px" displays a maximum width of 200 pixels for all layouts on smaller screens.
  • atm1d:small_buttonAlign
    • Button Alignment
    • Choose the alignment of buttons in relation to the page for smaller screens. Select Left to left-align buttons. Select Center to center-align buttons. Select Right to right-align buttons.
    • Type: enum
    • Example: atm1d:small_buttonAlign="Left" displays buttons in a left alignment in relation to the page for smaller screens.
  • atm1d:small_contentAlign
    • Content Alignment
    • Choose the alignment of the content within buttons for smaller screens. Select Left to left-align content. Select Center to center-align content. Select Right to right-align content.
    • Type: enum
    • Example: atm1d:small_contentAlign="Center" center aligns content within buttons for smaller screens.

For Button Select version 6+ (e.g. atm1d.6), you can customize the button icons with any Font-Awesome 4.2 icon. Learn more: Use Custom Font-Awesome Icons.

For example:

In addition to the XML attributes above, the Button Select question style will also consider the following Less variables:

  • @dq-button-bg-color
  • @dq-button-bg-color-hover
  • @dq-button-bg-color-selected
  • @button-text-color
  • @survey-error-bg-color
  • @question-error-text-color
  • @mobile

Override any of these variables with the <themevars> element. For example:

<themevars>
  <themevar name="dq-button-bg-color">#ff0000</themevar>
  <themevar name="button-text-color">#ffffff</themevar>
</themevars>

The code above updates the button background color to #ff0000 (red) and changes the text color to #ffffff (white).

Learn more: The Less Styles System

If you need to modify any other elements of the Button Select style, we encourage you to update the style directly using CSS. Click here to learn how to add custom CSS style code to your survey.

5:  Customizing the Error Messages

If you want to customize specific error messages for the button select element, you can do so by using <res> tags. 

Example:

XML:

<checkbox 
  label="q3"
  cond="condition.skip_featurephone"
  atleast="1"
  uses="atm1d.8">
  <title>New Button Multi-Select Question</title>
  <comment>Select all buttons that apply.</comment>
  <res label="sys_check-error-atLeast-sing-column">Please select at least $(count) answers (you selected $(actual)).</res>
  <row label="r1">Example r1</row>
  <row label="r2">Example r2</row>
  <row label="r3">Example r3</row>
</checkbox>

This is a list of all the available resource tags used to change the error messages in the button single-select and multi-select question types:

<res label="sys_check-error-atLeast-plur-column">Please select at least $(count) answers (you selected $(actual)).</res>
<res label="sys_check-error-atLeast-sing-column">Please select at least $(count) answer (you selected $(actual)).</res>
<res label="sys_check-error-atMost-plur-column">Please select at most $(count) answers (you selected $(actual)).</res>
<res label="sys_check-error-exactly-plur-column">Please select exactly $(count) answers (you selected $(actual)).</res>

6:  What's Next?

Want to customize the button select element even further? Click here to learn more about our XML styling system.