Skip to main content

Search

Card sorts

  • Updated

A card sort is a historically low-tech exercise in which categories or concepts are written on a series of paper cards. Participants then reorder the cards according to a set of instructions. IntelliSurvey's card sort widget modernizes this method, allowing respondents to interact with visual, drag-and-drop elements on-screen. Card sorts are created via the start card sort widget.

Try it!

To create a card sort, you need to:

  1. Start the widget: Define the start card sort widget and assign its ID.
  2. Set the introduction: Use the intro tag to provide the question text.
  3. Add cards: Specify the answer options with the cardsfrom tag.
  4. Choose the mode:
    • Place mode: If using cardtype: place, include the targetsfrom tag for target options. Also, if using 'place' mode, the tag is not required.
    • Sort mode: If using cardtype: sort, no targets are needed.
  5. Close the widget: Add the end card sort tag after all other tags.

Details

  • Cards represent categories or concepts and are defined in the survey source using lists.
  • Targets are optional locations where cards can be dragged.
  • The parent area is where cards initially appear.
  • Lists or spreadsheets used to define cards and targets are referenced using the cardsfrom and targetsfrom tags, respectively.

  • A card sort can have a different number of cards and targets, with customizable rules to define the minimum or maximum number of cards allowed per target.

  • Card sorts can also exclude targets, allowing respondents to simply reorder the cards within the parent area using cardtype: sort.
  • Autoother options, whether defined as a decorator or with underscores, are not supported in card sorts.

Tags

The following tags can be included in card sort widgets.

Implementation

Tag Description
cardidseparator Specifies the character inserted between the card sort ID and the row ID in the reports and data output.
cardorder Sets the specific order for the cards, overriding any previous ordering on the original list or sheet called in by the cardsfrom tag.
cardorderfrom Uses the order from a different list to organize the current cards, similar to the orderfrom tag.
cardsfrom Specifies the list used to create the cards.
cardtype Defines the card sort type: 'place' (default) or 'sort'.
intro Provides the introductory text for the question.
layout

Specifies the arrangement of the parent and target areas. Options are top-bottom, bottom-top, left-right, and right-left. Note that the first term indicates the position of the target area, and the second term indicates the position of the parent area.
mincards Sets the minimum number of cards required in each target.
maxcards Limits the maximum number of cards accepted in each target.
noanimation Toggles animation for card movement. Accepts 'y' and 'n' inputs.
nostartarea Toggles the presence of a parent area for ranking card sorts. Accepts 'y' and 'n' inputs.
targetsfrom

Specifies the list used to create the targets where the cards are dragged to.
targetorder

Sets a specific order for the targets, overriding prior ordering.
usecardsortid

With the default setting (usecardsortid: y), cards are labeled in the data as Question ID + C + Card Option ID (e.g., QXC1). Here:

  • X is the question number.
  • C is the card ID separator.
  • 1 is the card option ID.

When usecardsortid: n is applied, cards are labeled as Q1, Q2, Q3, where the number corresponds to the card option ID.

Styling

Tag Description
card height Sets the height of the cards in pixels.
card margin

Creates padding (in pixels) between the card contents and their borders.
card style Specifies the custom CSS for card styling.
card width Sets the width of the cards in pixels.
header layout Specifies the location of the target header. Can be 'left' or 'top' (default).
header style Specifies the custom CSS for styling the target header.
parent height Sets the height of the parent area in pixels.
parent style Specifies the custom CSS for styling the parent area.
parent width Sets the width of the parent area in pixels.
target style Specifies the custom CSS for styling the targets.

Additional examples

Setting a max and min number of cards

To enforce a maximum or minimum number of cards that may be dragged to a single target, use maxcards and mincards, respectively.

Using sort mode

Sort mode, unlike place mode, does not include targets. Instead, respondents rank the cards directly using the cardtype: sort tag. You can require ranking of all cards or just a subset.

In the example below, sort mode includes a target area, where respondents drag cards from the parent area to build the sortable list.

Dragging cards into a preferred order

This alternative rank-type sort eliminates the parent area with the nostartarea tag. All cards start in the target area, appearing in the order defined in the source or set by an order tag. The respondent then drags each card to arrange them in their preferred order, from first/favorite to last/least favorite.

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.