Card sorts

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 features a cardAccepts 'y' (yes) and 'n' (no) inputs sort widget which allows questions to be answered in this manner.

Cards (the categories or concepts) are defined via lists within the survey source, and appear on-screen to the respondent as visual elements which can be clicked-and-dragged with a mouse. Depending on the implementation of the card sort widget, the Survey Programmer (SP) may also define targets, which are locations to which cards can be dragged. The box where the cards initially appear is called the parent area.

A card sort can have a mismatched number of targets and cards, and different rules can be defined which govern how many cards a respondent is required to place in each target. Card sorts may also have no targets at all, and instead be re-ordered amongst one another.

Try it!

See code See demo Restart demo

Syntax

Card sorts are created via the start card sort widget. Any lists (or spreadsheets) that are used to define the cards and targets are then called in via the cardsfrom and targetsfrom tags, respectively.

start card sort: Question ID
intro: Poses the question to the respondent.
cardsfrom: List or sheet containing elements to sort or reorder
targetsfrom: List or sheet containing target elements
end card sort

Tags

The following tags can be included in card sort widgets.

Layout options

The layout tag specifies the positioning of the cards and the targets. The acceptable inputs 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.

Input	Description	Output
top-bottom	Default; the parent area appears below the target area.
bottom-top	The parent area appears above the target area.
left-right	The parent area appears to the right of the target area.
right-left	The parent area appears to the left of the target area.

Examples

Place mode

A place card sort, so-defined by using the input 'place' on the cardtype tag, has a parent area containing the cards, and target areas where the cards are dragged.

See demo See code Restart demo

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.

See demo See code Restart demo

Sort mode

Sort mode differs from place mode in that there are no targets. This style of card sort allows respondents to create a rank order of the cards. To do this, use the 'sort' input on the cardtype tag. It is possible to require respondents to consider all cards, or just a certain number of cards.

The following example of sort mode features a target area so that cards do not start in a sortable list. Rather, the respondent has to create the list from the card parent area by dragging cards to the target area.

See demo See code Restart demo

Without parent area

The other method of doing a rank-type sort eliminates the parent area. Instead, all cards start out in the target area, and appear in the order they are defined in the source or as specified by an order tag. The respondent then clicks and drags each card into their desired order from first/favorite to last/least favorite.

See demo See code Restart demo

To eliminate the parent area as above, use the nostartarea tag. All cards now appear in the target area, and can be dragged-and-dropped to create a new ordering. With this type of sort, since there are no targets, cards can have variable size. When the page loads, the card sort JavaScript will determine the tallest card, and then all cards will be set to that width. Targets will then be sized based on the cards, such that each target can hold up to the value specified in maxcards/mincards.

Using another list's order

The cardorderfrom tag allows users to apply the order from one list to a different list that is specified by the cardsfrom tag, a listcall similar to the orderfrom tag. In the below example, the ANIMALS list in the card sort will use the positional order from the COLOR list that is shown at Q5A. For example, if at Q5A the order of the options shown is Green, Red, Black, Blue, Gold, then at Q5B the animals shown will have that same positional order: Green Iguana, Red Panda, Black Rhino, Blue Whale, Golden Eagle.

See demo See code Restart demo

Using cards from a derived list

Derived lists are lists that have been used in a previous question that are pulled into a follow up question. In the example below, QA2 uses the inline list provided in QA1 for its cards via 'QA1.options'. Note that the entire list from QA1 is pulled into the card sort, not just the options selected in QA1.

See demo See code Restart demo