Skip to main content

FV Decipher Support

All the topics, resources needed for FV Decipher.

 
FocusVision Knowledge Base

Survey Form Image Replacement (FIR)

Using the survey builder? Check out the Display Settings and learn how to apply FIR to your next project.

Overview

The fir attribute requires a survey compat level of 125+

FIR (Form Image Replacement) can be used on your survey to replace the standard form inputs (e.g. radios, checkboxes) with scalable SVG graphics.

The dynamic question version of FIR uses icons and images to replace the browser's form inputs. The fir attribute, in contrast, uses SVG (Scalable Vector Graphics) to replace the form inputs with a finite selection of image styles.

For example, instead of the default form inputs:

...with FIR applied, the inputs above will be transformed into:

1: Adding FIR

FIR can be applied to your survey at the global level (for all questions), or per individual question.

1.1: To the Entire Survey

Use the following attributes to customize FIR for all questions in the survey:

Attribute Description Example

fir

 

Enable or disable FIR

Possible values:
"on" or "off"

Default:
"off"
<survey
    compat="125"
    fir="on"
    ...>
        
firStyle Choose a FIR style

Possible values:
"square", "rounded", "scale" or "fontawesome"

Default:
"rounded"
<survey
    compat="125"
    fir="on"
    firStyle="scale"
    ...>
        
firSize Specify the FIR image size

Possible values:
"standard" or "20px", "large" or "25px", "small" or "15px", or any "##px"

Default:
"20px"
<survey
    compat="125"
    fir="on"
    firSize="30px"
    ...>
        
firColors Select the FIR color palette

Possible values:
4 valid HEX colors (comma-separated)

Default:
"#c7c7c7,#ffffff,#c5d600,#2bbdb9"
(border, base, hover, selected)
<survey
    compat="125"
    fir="on"
    firColors="#000,#fff,#ffffff,#000000"
    ...>
        

You can also update these settings in the project's Display Settings.

1.2: To an Individual Question

Use the following attributes to customize FIR for an individual question:

Attribute Description Example
fir Enable or disable FIR

Possible values:
"on", "off" or "inherit"

Default:
"inherit"
<radio
    label="Q10"
    fir="off"
    shuffle="rows"
    ...>
        
firStyle Choose a FIR style

Possible values:
"square", "rounded", "scale" or "fontawesome" 

Default:
"rounded"
<checkbox
    fir="on"
    firStyle="rounded"
    atleast="1"
    ...>
        

2: FIR Attributes & Options

2.1: fir - Set FIR "on" or "off"

The fir attribute is the main switch for enabling or disabling FIR. This attribute can be applied at the global level (e.g. in the <survey> element) or locally for an individual question (e.g. in a <radio> or <select> question).

FIR is applied to a question if:

  • fir is set to "on" for that question OR
  • fir is set to "inherit" for that question and fir is set to "on" at the global (survey) level

 

Only radio and checkbox form inputs are replaced with images. This includes questions that are positioned side-by-side, below, or include a <noanswer> element.

As illustrated below, when fir="off" is specified (default), the survey's form radio inputs use the browser's standard image:

When fir="on" is specified, the survey's form inputs are the same for all respondents:

The code below produces the question above:

<radio
  label="q1"
  fir="on"
  title="Which of the following categories best describes your age?">
  <comment>select one</comment>
  <row label="r1">Under 18</row>
  <row label="r2">18-24</row>
  <row label="r3">25-34</row>
  ...
</radio>

In the future, FIR will also support text and select drop-down inputs.

2.2: firStyle - Select Which FIR Style to Use

The firStyle attribute controls the overall look of the FIR image. This attribute can be applied at the global level (e.g. in the <survey> element) or locally for an individual question (e.g. in a <radio> or <checkbox> question).

The possible values are: "rounded" (default), "square", "scale" or "fontawesome"

Value Output
firStyle="rounded" fir_rounded.png
firStyle="square" fir_square(1).png
firStyle="scale" fir_updated_style.png

2.3: firColors - Specify the Color Palette

The FIR color settings described below are only available for surveys with compat levels 128 or below.

The firColors attribute controls the color palette for the FIR images. This attribute can only be applied at the global level (e.g. in the <survey> element).

Specify 4 colors (comma-separated) for the border, base, hover and selected colors (respectively). For example:

<survey
    compat="125"
    fir="on"
    firColors="#000,#fff,#ffffff,#000000"
    ...>

The code above produces the following result:

This image is a screenshot of the project's Display Settings options for configuring "Global FIR".

2.4: Declare FIR Colors Globally with Themevars

If you need to apply custom FIR globally, you can use the following available <themevars/>.

<themevars>
<themevar name="fir-border">#A5B312</themevar>
<themevar name="fir-inner">#B3121A</themevar>
<themevar name="fir-inner-hover">#292C96</themevar>
<themevar name="fir-inner-selected">#A65155</themevar>
</themevars>

For example:

<themevars>
  <themevar name="fir-border">#c7c7c7</themevar>
  <themevar name="fir-inner">#FFFFFF</themevar>
  <themevar name="fir-inner-hover">#8DDCDC</themevar>
  <themevar name="fir-inner-selected">#1CBAB9</themevar>
</themevars>

<radio 
  label="Q1"
  firStyle="fa">
  <title>Please select one:</title>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

<checkbox 
  label="Q1a"
  below="Q1">
  <title>Please select all that apply:</title>
  <row label="r1">Checkbox 1</row>
  <row label="r2">Checkbox 2</row>
</checkbox>

The code above produces the following result:

For a full list of FIR attributes click here.

3: Use Custom Font Awesome Icons

Survey must be compat 126+ to use Font Awesome icons with FIR.

Using the survey XML editor, you can update the firStyle attribute to any one of the following values to use Font Awesome icons instead of SVG graphics:
"fa", "fontawesome", "font-awesome".

For example:

<radio label="Q1" firStyle="fontawesome" firRadio="toggle-off" firRadioSelected="toggle-on">
    <title>Please select one:</title>
    <row label="r1">Row 1</row>
    <row label="r2">Row 2</row>
    <row label="r3">Row 3</row>
</radio>

The code above produces the following result:

FIR supports any of the icons found here in Font Awesome version 4.2. As illustrated in the example above, use any of the icons listed by removing the "fa-" prefix.

For example, specify "circle-o" instead of "fa-circle-o".

When the Font Awesome style is used, FIR will use the "hover" and "selected" colors from the firColors attribute.

For example, the following settings will produce firColors="#c7c7c7,#ffffff,#c5d600,#000000" in the survey tag. The color "#c5d600" will be used as the icons default color and the color "#000000" will be used when the icon is selected.

The Font Awesome style will not appear in the Display Settings and can only be added through the XML editor.

3.1: firRadio / firRadioSelected

The firRadio attribute is used to specify which Font Awesome icon to use for radio inputs when they are in the default, unselected, state.

The firRadioSelected attribute is used to specify which Font Awesome icon to use for radio inputs when they have been selected.

For example:

<radio label="Q1" firStyle="fontawesome" firRadio="coffee" firRadioSelected="heart">
    <title>Please select one:</title>
    <row label="r1">Row 1</row>
    <row label="r2">Row 2</row>
    <row label="r3">Row 3</row>
</radio>

The code above produces the following result:

3.2: firCheckbox / firCheckboxSelected

The firCheckbox attribute is used to specify which Font Awesome icon to use for checkbox inputs when they are in the default, unselected, state.

The firCheckboxSelected attribute is used to specify which Font Awesome icon to use for checkbox inputs when they have been selected.

For example:

<radio label="Q1" firStyle="fontawesome" firRadio="coffee" firRadioSelected="heart" firCheckbox="fighter-jet" firCheckboxSelected="rocket">
    <title>Please select one:</title>
    <row label="r1">Row 1</row>
    <row label="r2">Row 2</row>
    <row label="r3">Row 3</row>
</radio>

<note>This question is merged with Q1, so we need to apply icon selection to the MASTER question</note>

<checkbox label="Q1a" below="Q1">
    <title>Please select all that apply:</title>
    <row label="r1">Checkbox 1</row>
    <row label="r2">Checkbox 2</row>
</checkbox>

The code above produces the following result:

3.3: Declare Font Awesome Icons Globally with Themevars

If you need to apply custom Font Awesome icons globally, then you can declare the attributes in the survey tag or use <themevars/>.

For example, we can achieve the same result as above with the following code:

<themevars>
  <themevar name="fir-radio">coffee</themevar>
  <themevar name="fir-radio-selected">heart</themevar>
  <themevar name="fir-checkbox">fighter-jet</themevar>
  <themevar name="fir-checkbox-selected">rocket</themevar>
</themevars>

<radio
  label="Q1"
  firStyle="fa">
  <title>Please select one:</title>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

<checkbox
  label="Q1a"
  below="Q1">
  <title>Please select all that apply:</title>
  <row label="r1">Checkbox 1</row>
  <row label="r2">Checkbox 2</row>
</checkbox>

The code above produces the following result:

We can also declare the firRadio, firRadioSelected, firCheckbox, and firCheckboxSelected attributes in the main survey tag to achieve the same result:

<survey
  ...
  fir="on"
  firStyle="fa"
  firSize="25px"
  firColors="#c7c7c7,#ffffff,#c5d600,#000000"
  firRadio="coffee"
  firRadioSelected="heart"
  firCheckbox="fighter-jet"
  firCheckboxSelected="rocket">

<radio
  label="Q1"
  firStyle="fa">
  <title>Please select one:</title>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

<checkbox
  label="Q1a"
  below="Q1">
  <title>Please select all that apply:</title>
  <row label="r1">Checkbox 1</row>
  <row label="r2">Checkbox 2</row>
</checkbox>

The code above produces the same result.

You can combine FIR styles! For example, use "square" globally and use "fontawesome" locally at the question level.

3.4: Override Icons for Button Select

Only Button Select version 6 (atm1d.6) can use custom Font Awesome icons.

The custom dynamic question style, Button Select, can also be customized to use Font Awesome icons. For example, we can update the single-select version of Button Select using firRadio and firRadioSelected:

<radio
  label="Q1"
  firRadio="toggle-off"
  firRadioSelected="toggle-on"
  uses="atm1d.6">
  <title>Please select one:</title>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

The code above produces the following result:

4: Technical Considerations

4.1: Fallback for Lack of SVG Support

When a web browser does not support SVG, all FIR styles will be replaced with and default to the following Font Awesome icons:

       

These icons will still inherit the "hover" and "selected" colors specified in the main <survey> element's firColors attribute.

4.2: Dynamic Questions and FIR

FIR can be applied to dynamic questions. Special CSS classes have been added to hide FIR when FIR cannot be applied to the dynamic question. For example, using the dynamic question style "fir" will take precedence of the global FIR images.

To hide FIR for a specific question, specify fir="off" at the question. For example:

<radio label="Q10" uses="somespecialstyle.2" fir="off">

4.3: Builder Support

You can control whether to use FIR and what style to apply from within the project's Display Settings.

Use these settings to control how FIR is displayed to respondents. Don't forget to test your end result!

Learn more: Display Settings

5: Remove Ability to De-Select Radio Inputs

In compat 133+ surveys, when FIR is applied to a single-select question, a respondent has the ability to de-select a radio input.

To remove this functionality completely, add the following code to your survey's XML:

<style name="respview.client.js" wrap="ready" mode="after"><![CDATA[
$ (".cell").addClass("no-uncheck");
]]></style>

To remove this functionality for a specific question, add the following code to your survey's XML:

Update "QQQ" with the label of your question.

<style name="respview.client.js" wrap="ready" mode="after"><![CDATA[
$ ("#question_QQQ .cell").addClass("no-uncheck");
]]></style>

What's Next?

Looking for the dynamic question version of FIR? Learn more about Working with Form Image Replacement.

Need to further customize your project? Check out the XML Style System.