How to use Buttons

Rather than using radio buttons or check boxes the answer options are displayed as clickable buttons.

   

Options

Button Size

  • Button Height – Set the height of the button on the screen.  The size can be specified in the following units: px (pixels), pt (points), em (relative to font) and % (percentage).
  • Button Width – Set the width of the button on the screen.  The size can be specified in the following units: px (pixels), pt (points), em (relative to font) and % (percentage).

Button Layout

  • Number of buttons per row – Buttons will be arranged in rows with each row containing a set number of buttons, for example, if there were 8 possible answers and the number of buttons per row was set to 4, you would have 2 rows of buttons with 4 buttons in each row.
  • Button Top Spacing – The space between the top of the buttons and the bottom of the question text.


                  

  • Button Spacing – The spacing around each button.
  • Position of open ended row (top/bottom) – If the question has any open ended rows, these will not be converted into buttons.  Instead you have the option for them to be displayed above or below the buttons.

Button Styling

  • Button Colour – The background colour of the buttons before they are clicked.
  • Button Colour (clicked) – The background colour of the buttons after they are clicked/answered.
  • Fade button on hover – Whether the button fades when a respondent places their mouse over the button (on/off).
  • Button Fade Time– The number of milliseconds (ms) to fade the button for. 500ms = ½ second.
  • Rounded Corners – Select whether the buttons have rounded corners instead of square.
  • Use Images as Background – Select this option to use an image as a button.  This effectively used the image as the button.
 

Using images as button background.   

Not using images as button background.   

 

  • Image Auto Size – Images used on a button will  automatically have the same width as the button width.

Button Text Styling

  • Text colour – The colour of the text displayed on the button.
  • Vertical alignment of text – The positioning of the text within the button. (Top / Middle / Bottom)
  • Copy Editor Text Styling – Select whether to use the text styling set in the Research Studio questionnaire editor or to use the iQuest text options detailed below.
  • Button Text Size – Set the font size for the text displayed on the buttons.
  • Button Text Weight – Set the font weight (normal, bold, bolder, lighter) for the text displayed on the buttons.
  • Button Text Style - Set the font style (normal, italic, oblique) for the text displayed on the buttons.
  • Horizontal alignment of text - Set the alignment (left, right, center) for the text displayed on the buttons.
  • Hide button text. – Allows for text entered to describe the answer to be hidden.  This is useful when using images for buttons the text used for analysis is hidden on the button.

Yes and No text in editor

Text hidden on the buttons

                                                    

Button Border

  • Button Border – Select whether each button has a 3D grey border around it.
  • Border Width – The width of the border around the buttons.

Button Behaviour (Single Choice only)

  • Auto Next – Automatically advance to the next question when a selection is made.

Quick Mode

  • Quick Mode – This allows you to choose pre-defined styling for the buttons from a drop-down list.
  • Select Style – Choose the styling option from the list below.

Note: Quick mode select the styling you can still set Height and Width using the Button Size options.

Advanced

  • Debug – For advanced users only, this option will display JavaScript errors as they occur in an internet browser.

Still need help? Contact Us Contact Us