Group

Place multiple questions inside a group if you need to display them in columns or show/hide them all at once.

Config

• Title

  The title of the group. You can show the value of other questions by writing {{QA}}, {{QB}}, etc

• Help Text

  A description text that goes after the group.

• Tooltip Text

  A question mark will show after the group title with a tooltip text that you can set here.

• Hide Title

  Hide the group title.

• Number of Columns

  Groups can have up to 4 columns. You can drag questions in these columns as needed.

• Is Repeater

  Repeater Groups will show an "Add Row" button that allows users to duplicate all the fields in the group.
  You can set the maximum number of times the rows can be repeated and the label of the "Add Row" button.
  You will need to use the REPEATER function in formulas to get the sum of all the instances in a group:

  REPEATER(@NumberInput)
  This will be the sum of all the instances of @NumberInput.

  If you need to show a calculation inside each repeater instance you can use REPEATER_FORMULA( @GroupElement, formula_with_repeater_items )

  REPEATER_FORMULA(@GroupElement, @Repeater_Field_1 + @Repeater_Field_2)
  This will calculate the sum of each iteration of Repeater_Field_1 and Repeater_Field_2.
  
  Limitations:
  Can't use parentheses in the repeater formula, so no: @X + (@Y - @Z)
  Needs to be: @X + @Y - @Z

• Column Width

  Set the width for each group column

• Background Color

  Set the background color for each group column

• Sticky Column

  Make the group column stick to the top when scrolling

• Conditional Visibility

  Set the visibility of the whole group based on a formula called the Visibility Formula. If the Visibility Formula result is true, the group will be shown in the calculator, otherwise it will be hidden. This allows you to show the group only in certain conditions, for example when another question has a certain value.

Style

Most of the style settings are self-explanatory, but here are a few tips and tricks:

• Image Width

  How wide do you need the image to be in relation to the rest of the calculator?

• Colors

  You can set the Question Text Color, Background Color, Help Text color, by using the color picker. The colors use the Hexadecimal code. If you want to reset a color just delete the value.
  Tip: you can set a color to transparent by typing "transparent" in the color box.

• Field Width

  You can set a width for the field (Full width, One half, One third or One fourth). This allows for multiple Questions to sit side by side. Note that on small screen sizes the questions will be reset to full width for usability purposes.

• Align

  Set how the Question content is align. Inline will set the question title and the content on the same line.
  The "Inline Position" setting helps position the Title and the Content:

  • Left - the Title and the Content are both on the left side
  • Middle - the Title and Content are both on the middle of their containers
  • Ends - The Title is on the left and the Content is on the right side

• Add a CSS attribute based on a Formula

  The result of this formula will be added as an attribute to the ".ic-question" parent element of the field/question.

  The attribute is called "formula-attribute", and you can then use it in CSS code to change the way the question looks based on the formula. For example, you could change the background color of the field/question based on a formula.

  For example you could have the "CSS Attribute Formula" be:

  IF(@FormulaField < 10, 'red' , 'blue' )
  And then in Settings / Design / Custom CSS Code you can add:
  
  .ic-question[formula-field='red'] { background-color: red; }
  .ic-question[formula-field='blue'] { background-color: blue; }
• CSS Class

  Useful for custom CSS/Javascript code. This allows you to change how this particular question looks or works using custom coding.