Pular para o conteúdo principal
Base de Conhecimento da FocusVision

Customizing the Card Sort Element

With a Card Sort question, respondents sort things ("Cards") into categories ("Buckets"). There are 2 ways of interacting with this question to move the cards into the buckets. The primary interaction is clicking: respondents simply click on the bucket(s) that apply to the current card. The secondary interaction is dragging: respondents can also drag the cards into the buckets. Drag and drop is secondary because it requires a lot more motor/cognitive skills and it can be more difficult depending on the device interaction.

There are a LOT of settings for Card Sort questions, which we'll get into a bit later, but at a high level, some of the features/options are:

  • Works on single- or multi-select questions, allowing respondents to select either a single or multiple buckets to apply to each card
  • Navigation is optional, so it's up to you to decide whether to allow respondents to go back and change the categorization
  • Showing bucket contents is optional, where if enabled, the respondents will be able to see how many cards are in each bucket

1:  Underlying Question Architecture

The base question types for Card Sort questions are single- or multi-select questions. The cards are rows in the XML and the buckets are columns. Most of the options that can be applied to single- or multi-select questions can also be applied to Card Sort questions, including row/column shuffling, exclusive answers, mandatory vs. optional, etc. These questions do require a minimum of 2 rows and 2 columns.

Example:

XML:

<radio label="q1">
  <title>What do you think of these actors' portrayal of James Bond?</title>
  <row label="r1">Sean Connery</row>
  <row label="r2">George Lazenby</row>
  <row label="r3">Roger Moore</row>
  <row label="r4">Timothy Dalton</row>
  <row label="r5">Pierce Brosnan</row>
  <row label="r6">Daniel Craig</row>
  <col label="c7">Perfect</col>
  <col label="c9">Great</col>
  <col label="c8">So-So</col>
  <col label="c10">Bad</col>
  <col label="c5">Terrible</col>
  <col label="c6">Who?</col>
</radio>

2:  Converting to Card Sort

To convert this to a Card Sort question, simply add uses="cardsort.6" to the question tag.

Example:

Screen Shot 2012-11-12 at 10_46_38 AM.png

XML:

<radio label="q1" uses="cardsort.6">

Note:  I'm only showing the radio tag here as the rest of the question (rows/cols) is the exact same as above.

3:  Customization

From here onward, we’ll be customizing the question away from the default look shown above. To do this, we’ll be working in the XML with customizable variables that are unique to the Card Sort question type. In the examples, I’ll only show the question tag, as we’re not going to be doing anything to the <row>/<col> tags. If you add a Card Sort question using Builder, you’ll notice that there are several new XML variables put into the question tag. You only need to include the ones you want to customize. Here’s a brief description of each:

3.1:  Options

 

XML Description Type Example
cardsort:displayNavigation Toggle showing the navigation (previous, next) buttons Bool (0 = HIDE, 1 = SHOW); default=1 cardsort:displayNavigation="0" hides the nav buttons
cardsort:displayCounter Toggles the card counter on the bucket Bool (0 = HIDE, 1 = SHOW); default=1 cardsort:displayCounter="0" hides the card counter
cardsort:displayProgress Toggles the progress indicator for current versus total cards Bool (0 = HIDE, 1 = SHOW); default=1 cardsort:displayProgress="0" hides the progress indicator
cardsort:animationDuration Sets the duration of the transition (card sliding into place) Integer; value in milliseconds; default=500; 0 to disable cardsort:animationDuration="1000" slows the transition animation to a full second
cardsort:wrapBuckets When enabled, causes the buckets to wrap to the width of the parent container; when disabled, the buckets will always appear in a single row (on desktop), which may result in horizontal scrolling. Used in conjunction with cardsort:bucketsPerRow. Bool (0 = OFF, 1 = ON); default=1 cardsort:wrapBuckets="0" forces the buckets into a single row
cardsort:bucketsPerRow Coupled with the cardsort:wrapBuckets variable, when specified each row will have this many buckets (on desktop only). If the number is zero, the system will automatically calculate the number of buckets per row based on the normal word wrap behavior of the parent element, which may not produce consistent results. Used in conjunction with cardsort:wrapBuckets. Type: Bool (0 = OFF, 1 = ON); default=1  
cardsort:themeFile Use an optional CSS file to define the CSS attributes for the Card Sort question. This option can be set at the folder level for consistency of appearance across all Card Sort questions without needing to configure the variables for each Card Sort instance. URL cardsort:themeFile="custom-card-sort.css" would set the Card Sort question to use the styling defined in the custom-card-sort.css located in the project's static directory
cardsort:automaticAdvance Applies to single-select questions only. When true (default), the cards will automatically advance to the next card after a bucket has been selected. Bool (1 = ON, 0 = OFF); default = 1 cardsort:automaticAdvance="0" will disable the automatic advancement of cards. To show the next card, the "Next" button must be clicked.

3.2:  Navigation Buttons

XML Description Type Example
cardsort:iconButtonCSS Configure the style of the navigation buttons CSS

cardsort:iconButtonCSS="background: #266c13;" would set the background color of the navigation buttons to #266c13

cardsort:iconButtonDisableCSS Configure the style of the disabled state for the navigation buttons CSS cardsort:iconButtonDisableCSS="background: #ddd;" would set the background color of the navigation buttons to a light grey when they're disabled
cardsort:iconButtonHoverCSS Configure the style of the hover state for the navigation buttons

Note: Mobile devices do not have a hover state, so this won't apply

CSS cardsort:iconButtonHoverCSS="background: #000;" would set the background color of the navigation buttons to black when a respondent hovers over them
cardsort:buttonPreviousHTML Configure the content of the "Previous" navigation button string cardsort:buttonPreviousHTML="BACK" would set the text to say "BACK"
cardsort:buttonNextHTML Configure the content of the "Next" navigation button string cardsort:buttonNextHTML="FORWARD" would set the text to say "FORWARD"

3.3:  Cards

XML Description Type Example
cardsort:cardCSS Customize the appearance of all cards. Unlike most of these variables, this one can be placed in the question tag OR on an individual <row> tag in the event you want to make one look different from the others. CSS cardsort:cardCSS="font-size:24px;" would set the font size in the card to 24px
cardsort:cardDisableCSS Customize the appearance of disabled cards.

Note: Cards cannot become disabled without unique, explicit programming, so it's unlikely you'll need to set this.

CSS cardsort:cardDisableCSS="background: #ddd;" would set the background color of disabled cards to a light grey
cardsort:cardHoverCSS Customize the appearance of hovered cards.

Note: Mobile devices do not have a hover state, so this won't apply

CSS cardsort:cardHoverCSS="border-color: #f80;" would set the border color to orange when a respondent hovers over the card
cardsort:cardSelectCSS Customize the appearance of cards which have at least one selected bucket CSS cardsort:cardSelectCSS="background: #f80;" would set the background color to orange if that card has been put into any bucket already
cardsort:dragAndDrop Enable or disable drag and drop functionality for the cards Bool (1 = ON, 0 = OFF); default = 1 cardsort:dragAndDrop="0" would disable the ability to drag cards onto buckets. The only interaction available would be to click on the bucket to bucketize a card.

3.4:  Buckets

XML Description Type Example
cardsort:bucketCSS Customize the appearance of all buckets. Unlike most of these variables, this one can be placed in the question tag OR on an individual <row> tag in the event you want to make one look different from the others. CSS cardsort:bucketCSS="font-size: 24px;" would set the font size in the bucket to 24px
cardsort:bucketDisableCSS Customize the appearance of disabled buckets CSS cardsort:bucketDisableCSS="background: #ddd;" would set the background of disabled buckets to a light grey
cardsort:bucketHoverCSS Customize the appearance of hovered cards (both mouse cursor hover and drag over hover)

Note: Mobile devices do not have a hover state, so this won't apply

CSS cardsort:bucketHoverCSS="border-color: #f80;" would set the bucket's border color to orange when a user hovers over it
cardsort:bucketSelectCSS Customize the appearance of buckets which have been selected for at least one card CSS cardsort:bucketSelectCSS="background: #f80;" would set the background of the bucket(s) chosen for the current card to orange
cardsort:bucketCountCSS Customize the appearance of card count button on bucket. This button is only enabled when a bucket has cards in it. CSS cardsort:bucketCountCSS="background: #000;" would set the background of the card count button to black
cardsort:bucketCountDisableCSS Customize the appearance of disabled card count button on bucket CSS cardsort:bucketCountDisableCSS=" background: #ddd;" would set the background of disabled card count buttons to light grey
cardsort:bucketCountHoverCSS Customize the appearance of the hover state for the card count buttons

Note: Mobile devices do not have a hover state, so this won't apply

CSS cardsort:bucketCountHoverCSS=" background: #000;" would set the background of disabled card count buttons to black

3.5:  Other

XML Description Type Example
cardsort:progressCSS Set the appearance of the progress indicator (e.g., 3/7) CSS cardsort:progressCSS="font-size: 16px;" would set the font size of the progress indicator to be 16px
cardsort:contentsCardCSS Set the appearance of all cards inside the bucket contents view; these appear when you click on the bucket count to view the cards inside a bucket CSS cardsort:contentsCardCSS="background: #fc6;" would set the background color of the cards inside the bucket
cardsort:completionHTML Set the message content shown when a respondent has sorted all the cards string cardsort:completionHTML="Congrats! You're done here! Move along"
cardsort:completionCSS Change the look of the completion message (see cardsort:completionHTML) CSS cardsort:completionCSS="border: 1px solid #777;" would put a grey border around the completion message

So... still with me? That's a LOT of configurable variables, but luckily, you can make drastic changes by just changing a few of these. Let's try some out!

4:  Customization Example

There are so many customizable aspects to this question type and directions it can be taken that it won't be possible to show every option, but just to get you thinking, here's an example that uses several of the configurable variables.

Example:

Screen Shot 2012-11-12 at 1_41_17 PM.png

XML:

<radio label="q3" uses="cardsort.6"
  cardsort:displayCounter="0"
  cardsort:iconButtonCSS="background: #266c13;"
  cardsort:buttonNextHTML="Forward &lt;i class=&quot;icon-hand-right&quot;&gt;&lt;/i&gt;"
  cardsort:buttonPreviousHTML="&lt;i class=&quot;icon-hand-left&quot;&gt;&lt;/i&gt; Go Back"
  cardsort:bucketCSS="height: 80px; line-height: 80px; background: url('[rel cork-light.png]'); color: #333; font-weight: bold; font-size: 18px; border: 3px solid #81a976; padding: 0"
  cardsort:bucketHoverCSS="background: url('[rel cork.png]'); border: 3px solid #266c13;"
  cardsort:bucketSelectCSS="background: url('[rel cork.png]'); border: 3px solid #266c13;"
  cardsort:cardCSS="background: #fff799; padding: 40px; border: 1px solid #fff143; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3); font-family: 'Noteworthy', 'Comic Sans MS', sans-serif;">

That looks pretty scary, so let's dissect it line-by-line.

  • cardsort:displayCounter="0"
    • I didn't want respondents to click on the buckets to see what they'd already put into them, so I turned off the bucket counter
  • cardsort:iconButtonCSS="background: #266c13;"
    • Set the nav button background to a dark green. No need to set the disabled state unless you want to, since it will automatically reduce the opacity for the disabled state
  • cardsort:buttonNextHTML="Forward &lt;i class=&quot;icon-hand-right&quot;&gt;&lt;/i&gt;"
    • Ouch, right? Well, it's really not so bad. A lot of that code is due to needing to escape HTML entitities. Say what? Yeah... so it would look this easy if we didn't need to escape all the brackets: Forward <i class="icon-hand-right"></i>
    • To get that hand icon, we're using Font Awesome's cool icon font. Check out more at: http://fortawesome.github.com/Font-Awesome/
  • cardsort:buttonPreviousHTML="&lt;i class=&quot;icon-hand-left&quot;&gt;&lt;/i&gt; Go Back"
    • Same as the previous one. Looks a lot nicer like: <i class="icon-hand-left"></i> Go Back
  • cardsort:bucketCSS="height: 80px; line-height: 80px; background: url('[rel cork-light.png]'); color: #333; font-weight: bold; font-size: 18px; border: 3px solid #81a976; padding: 0"
    • Here we're adjusting what the buckets look like in their default state, adding the cork background, light green border, and adjusting the sizing
  • cardsort:bucketHoverCSS="background: url('[rel cork.png]'); border: 3px solid #266c13;"
    • When the user hovers over the bucket, I want it to look exactly like it will when selected, so I'm setting this and the next configurable variable to have the same settings, with a full-contrast cork background and a darker green border
  • cardsort:bucketSelectCSS="background: url('[rel cork.png]'); border: 3px solid #266c13;"
    • See previous explanation. :-)
  • cardsort:cardCSS="background: #fff799; padding: 40px; border: 1px solid #fff143; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3); font-family: 'Noteworthy', 'Comic Sans MS', sans-serif;">
    • To go with the "bulletin board" look, I thought it would be cool to have the cards look like sticky notes, so I set the background color, used a sillier font, and gave it a drop shadow to add some dimension

5:  Customizing the Error Messages

if you want to customize specific error messages for the card sort element, you can do so by using <res> tags. 

Example:

XML:

<checkbox 
  label="q2"
  cond="condition.skip_featurephone"
  atleast="2"
  uses="cardsort.6">
  <title>New Card Sort Multi-Select Question</title>
  <comment>Place each card into the buckets that apply.</comment>
  <res label="sys_check-error-atLeast-plur-row">Please select at least $(count) bucket for this card (you selected $(actual)).</res>
  <row label="r1">Card 1</row>
  <col label="c1">Bucket 1</col>
  <col label="c2">Bucket 2</col>
  <col label="c3">Bucket 3</col>
</checkbox>

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

  <res label="sys_noAnswerSelected">Please select a bucket for this card.</res>

  <res label="sys_check-error">Please select $(which) $(count) bucket for this card (you selected $(actual)).</res>

  <res label="sys_check-error-atLeast-plur-column">Please select at least $(count) buckets for this card (you selected $(actual)).</res>
  <res label="sys_check-error-atLeast-plur-row">Please select at least $(count) buckets for this card (you selected $(actual)).</res>
  <res label="sys_check-error-atLeast-sing-column">Please select at least $(count) bucket for this card (you selected $(actual)).</res>
  <res label="sys_check-error-atLeast-sing-row">Please select at least $(count) bucket for this card (you selected $(actual)).</res>
  <res label="sys_check-error-atMost-plur-column">Please select at most $(count) buckets for this card (you selected $(actual)).</res>
  <res label="sys_check-error-atMost-plur-row">Please select at most $(count) buckets for this card (you selected $(actual)).</res>
  <res label="sys_check-error-atMost-sing-column">Please select at most $(count) bucket for this card (you selected $(actual)).</res>
  <res label="sys_check-error-atMost-sing-row">Please select at most $(count) bucket for this card (you selected $(actual)).</res>
  <res label="sys_check-error-exactly-plur-column">Please select exactly $(count) buckets for this card (you selected $(actual)).</res>
  <res label="sys_check-error-exactly-plur-row">Please select exactly $(count) buckets for this card (you selected $(actual)).</res>
  <res label="sys_check-error-exactly-sing-column">Please select exactly $(count) bucket for this card (you selected $(actual)).</res>
  <res label="sys_check-error-exactly-sing-row">Please select exactly $(count) bucket for this card (you selected $(actual)).</res>

6:  References