Skip to main content

FV Decipher Support

All the topics, resources needed for FV Decipher.

 
FocusVision Knowledge Base

Customizing the Card Rating Element

1:  Overview

A card rating question allows respondents to rate cards into categories, buttons. When a card is displayed, a respondent clicks on the category to rate the card.  The card is then moved into the selected button and the card carousel advances to the next card. As an alternative for the desktop, the respondent can also drag and drop a card into a button. Card rating can also allow navigation which enables a respondent to return to a previous card and select a different category.

2:  Card Rating Requirements

The card rating question requires:

  • a minimum of 2 rows and 2 columns
  • a survey with compat 131+
  • attribute fir="off"
  • attribute grouping="rows"

Notes:

  • The IE9 browser does not support animations or transitions.
  • Android 5.0+ is required for browser support of the respondent view.

3:  Underlying Question Architecture

The base question type for Card Rating questions is  single-select grid question. The cards are rows in the XML and the buttons are columns. Most of the options that can be applied to single-select grid question can also be applied to Card Rating questions, including row/column randomization etc.

Example:

<radio
  label="q1"
    <title>How important are these features to your dream car?</title>
  <col label="c1">Must have</col>
  <col label="c2">Nice to have</col>
  <col label="c3">Not necessary</col>
  <row label="r1">Great accelaration</row>
  <row label="r2">Bold color</row>
  <row label="r3">Navigation</row>
  <row label="r4">Parking assist</row>
  <row label="r5">Voice recognition</row>
  <row label="r6">Advanced safety features</row>
  <row label="r7">Auto drive</row>
  <row label="r8"><p>Internet access/Wireless local area network</p></row>
</radio>

4:  Converting to the Card Rating Element

To convert the above to a card rating question, simply add uses="cardrating.1" to the question tag and set the attributes fir="off" and grouping="rows"

Example:

XML

<radio
  label="q4"
  fir="off"
  grouping="rows"
  uses="cardrating.1">
  <title>How important are these features to your dream car?</title>
  <col label="c1">Must have</col>
  <col label="c2">Nice to have</col>
  <col label="c3">Not necessary</col>
  <row label="r1">Great acceleration</row>
  <row label="r2">Bold color</row>
  <row label="r3">Navigation</row>
  <row label="r4">Parking assist</row>
  <row label="r5">Voice Recognition</row>
  <row label="r6">Advanced safety features</row>
  <row label="r7">Auto drive</row>
  <row label="r8">Internet access/Wireless local area network</row>

5:  Customization

Listed below are all of the attributes available for this element. Override them to create a custom look and feel for your card rating question:

Click an attribute to navigate to the details.

5.1:  Attribute Descriptions

The following provides the available attributes for card rating customizations.

  • cardrating:themename
    • Name of custom theme to apply
    • Type: string
    • Available in the survey editor: no
    • Options:
      • hpush - After selection, cards animate as sliding left or right
      • vstack - After selection, cards animate as dropping below the buttons and then fade out of view.
    • Default interaction: After selection, cards animate as being moved to behind the next card.
    • Example: cardrating:themename="vstack" After selection, the card drops below the buttons and then fades out of view. 
  • cardrating:themepath
    • Path to custom theme CSS file to apply
    • Type: url
    • Available in the survey editor:no
    • Example: cardrating:themepath="<path to custom theme CSS file>"
  • cardrating:animation
    • Speed used to animate certain elements
    • Type:enum
    • Available in the survey editor:no
    • Options: 
      • slow (750 millisecond duration
      • medium (500 millisecond duration)
      • fast (250 millisecond duration)
    • Example:  cardrating:animation="medium"  This is the default.
  • cardrating:previcon
    • Font-Awesome classname of icon used for the previous button
    • Type: string
    • Available in the survey editor: no
    • Examplecardrating:previcon="fa-icon-caret-right" This is the default.
  • cardrating:prevtext
    • Previous button text
    • Type: res
    • Available in the survey editor: no
    • Examplecardrating:prevtext="Back"
  • cardrating:nexticon
    • Font-Awesome classname of icon used for the next button
    • Type: string
    • Available in the survey editor: no
    • Examplecardrating:nexticon="fa-icon-carat-right" This is the default.
  • cardrating:nexttext
    • Text displayed in next button
    • Type: res
    • Available in the survey editor: no
    • Example: cardrating:nexttext="Next"
  • cardrating:dragdrop
    • Allow drag & drop of cards into buttons on desktop devices
    • Type: boolean
    • Available in the survey editor: yes
    • Example: cardrating:dragdrop="1"  allows drag and drop of cards into buttons. This is the default.
  • cardrating:navigation
    • Allows card navigating back and forth so respondents can change answers
    • Type: boolean
    • Available in the survey editor: yes
    • Example: cardrating:navigation="1" This is the default.
  • cardrating:progress
    • Show progress bar below the cards
    • Type: boolean
    • Available in the survey editor: yes
    • Example: cardrating:progress="1" This is the default.
  • cardrating:completion
    • Message to display after all responses are provided
    • Type: res
    • Available in the survey editor: yes
    • Example: cardrating:completion="All done." This is the default.
  • cardrating:btnlayout
    • Defines the layout of the button alignment (vertical, tiled, and horizontal)
    • Type: enum
    • Available in the survey editor: yes
    • Example: cardrating:btnlayout="Horizontal" sets the button layout to horizontal.
  • cardrating:lrg_minheight
    • For Horizontal layouts: Define the minimum height allowed for larger screens in pixels, em or a percentage (25px, Auto, 1em or 10%).  If the unit is not specified, it defaults to %
    • Type: string
    • Available in the survey editor: yes
    • Example:  cardrating:lrg_minheight="25px" displays buttons with a minimum height of 25 pixels for larger screens with horizontal layout.
  • cardrating:lrg_maxheight
    • For all layouts: Define the maximum height allowed for larger screens in pixels, em or percentage (50px, Auto, 2em, or 20%). If the unit is not specified, it defaults to %.
    • Type: string
    • Available in the survey editor: yes
    • Example: cardrating:lrg_maxheight="50px" displays buttons with a maximum height of 50 pixels for larger screens for all layouts.
  • cardrating:lrg_minwidth:
    • For Vertical layouts: Define the minimum width allowed for larger screens in pixels, em or a percentage (100px, Auto, 4em, or 40%). If the unit is not specified, it defaults to %
    • Type: string
    • Available in the survey editor: yes
    • Example: cardrating:larg_minwidth="100px" displays buttons with a minimum width of 100px for larger screens with vertical layout.
  • cardrating:lrg_maxwidth
    • For all layouts:  Define the maximum width allowed for larger screens in pixels, em or percentage (200px, Auto, 8em, or 80%). If the unit is not specified, it defaults to %.
    • Type: string
    • Available in the survey editor: yes
    • Example: cardrating:lrg_maxwidth="200px" displays buttons with a maximum width of 200px for larger screens for all layouts.
  • cardrating:lrg_btnalign
    • Specified the alignment of buttons in relation to the page for larger screens (Left, Center, and Right)
    • Type: enum
    • Available in the survey editor: yes
    • Example: cardrating:lrg_btnalign="Center" center-aligns the buttons for larger screens.
  • cardrating:lrg_cntalign
    • Specifies the alignment of the content within buttons for larger screens (Left, Center, and Right)
    • Type: enum
    • Available in the survey editor: yes
    • Example: cardrating:lrg_cntalign="Center" center-aligns the content within button for larger screens.
  • cardrating:sml_minheight
    • For Horizontal layouts: Sets the minimum height allowed for smaller screens in pixels, em or a percentage (25px, Auto, 1em or 10%). If the unit is not specified, it defaults to %.
    • Type: string
    • Available in the survey editor: yes
    • Example: cardrating:sml_minheight="25px" displays buttons with a minimum height of 25px for smaller screens.
  • cardrating:sml_maxheight
    • Defines the maximum height allowed for smaller screens in pixels, em or a percentage (50px, Auto, 2em, or 20%). If the unit is not specified, it defaults to %.
    • Type: string
    • Available in the survey editor: yes
    • Example cardrating:sml_maxheight="50px" displays buttons with a maximum height of 50px for smaller screens.
  • cardrating:sml_minwidth
    • For Vertical layouts: Defines the minimum width allowed for smaller screens in pixels, em or a percentage (100px, Auto, 4em, or 40%). If the unit is not specified, it defaults to %.
    • Type: string
    • Available in the survey editor: yes
    • Example: cardrating:sml_minwidth="100px" displays buttons with a minimum width of 100 pixels for smaller screens and vertical layout.
  • cardrating:sml_maxwidth
    • Defines the maximum width allowed for smaller screens in pixels, em or a percentage (200px, Auto, 8em, or 80%). If the unit is not specified, it defaults to %.
    • Type: string
    • Available in the survey editor: yes
    • Example: cardrating:sml_maxwidth="200px" displays buttons with a maximum width of 200 pixels for smaller screens
  • cardrating:sml_btnalign
    • Defines the alignment of buttons in relation to the page for smaller screens (Left, Center, Right)
    • Type: enum
    • Available in the survey editor: yes
    • Example: cardrating_sml_btnalign="Left" aligns buttons to the left for smaller screens
  • cardrating:sml_cntalign
    • Defines the alignment of content within buttons for smaller screens (Left, Center, Right)
    • Type: enum
    • Available in the survey editor: yes
    • Example: cardrating:sml_cntalign="Center" aligns contents of buttons in the center for smaller screens.