The rank sort question allows visually ranking items where the top of the rank labels is the highest rank and the bottom of the rank labels is the lowest rank on desktop. On mobile, rank labels are shown next to ranked items. A rankable item can be assigned to only one rank and each rank label can have a maximum of one ranked item. The question can be customized for desktop and mobile.
1: Underlying Question Architecture
The rank sort question uses a select (i.e., drop-down) question, where the ranks are the choices and the rankable items are the rows. The question style allows shuffling of rows and noanswers options. The question style does not support open-ended answer fields.
2: Converting to Rank Sort
The rank sort question requires:
- a survey with compat 129+
- at least 2 choices
- at least 2 rows
- the minRanks attribute.
To apply the rank sort question style to a select question add
uses="ranksort.4" to the question tag. The current version of ranksort is the number added after
ranksort. when adding the question via Builder. It is recommended to add the question via Builder so that the most current version number is applied and customize via the XML. If your survey has a lower number than the current version the question was created before a new version was released. If the survey is in testing the version number can be changed to the current version. If the survey is LIVE it is not recommended to change the version as this could break the question style.
Note: To reference the latest ranksort version, click here.
<select label="Q1" minRanks="6" optional="1" shuffle="rows" unique="none,cols" uses="ranksort.4"> <title>Please rank the top 6 most important backpack contents order of 1="most important" to "least important."</title> <choice label="ch1">Rank 1st</choice> <choice label="ch2">Rank 2nd</choice> <choice label="ch3">Rank 3rd</choice> <choice label="ch4">Rank 4th</choice> <choice label="ch5">Rank 5th</choice> <choice label="ch6">Rank 6th</choice> <row label="r1">Body Wash, Liquid Soap, Facial Cleanser</row> <row label="r2">Hair Gel (for female troops to pull hair back)</row> <row label="r3">Combs / Brushes / Bobby Pins (in original packaging, please)</row> <row label="r4">Deodorant (travel size)</row> <row label="r5">Shaving Cream in Tubes / Shaving Soap (No CANS of Shaving Cream!)</row> <row label="r6">Lip Balm / Chap Stick / Carmex / Blistex</row> <row label="r7">Hand & Body Lotion / Moisturizer (travel size)</row> <row label="r8">Sunblock, SPF 45, Zinc, Vitamin E, Aloe Vera Gel</row> <row label="r9">Bug Spray / DEET / Skin-So-Soft</row> <row label="r10">Mouthwash (travel size)</row> <noanswer label="n1">Don't know</noanswer> <noanswer label="n2">Prefer not to say</noanswer> </select>
3: Survey Theme
Colors selected in the dynamic section of the survey theme will apply with a survey compat 115+ and are applied to the rank sort question as shown below.
Font - Default
- The rankable item text.
- The noanswer option text.
- The mobile rankable item text.
- The mobile noanswer option text.
Font - Selected
- The rankable item hovered/ranked text.
- The noanswer option hovered/selected text.
- The rankable item text when dragged from the original list.
- The placeholder text when a rankable item is dragged into the rank label.
- The add/remove/rank icon background/border.
- The mobile ranked item text.
- The mobile noanswer option selected text.
- The mobile rank icon.
Background - Default
- The rankable item background/border.
- The container boxshadow.
- The mobile rankable item background/border.
- The mobile noanswer option background/border.
Background - Selected
- The rankable item background/border when hovered/ranked.
- The noanswer option background/border when hovered/selected.
- The rankable item background/border when dragged from the original list.
- The placeholder background/border when a rankable item is sorted into the rank label.
- The rankable items container box shadow when hovered.
- The add/remove/rank icon.
- The mobile ranked item background/border.
- The mobile noanswer option background/border when ranked.
- The mobile rank icon background/border.
The desktop rank sort question provides two types of user interaction and various options for customizing the style. Options include customization for the rankable items, rank label, containers, hover and selected states as well as when dragging rankable items to the rank labels and dragging ranked items back to the original location.
4.1: Click Interaction
When a rankable item is hovered, an add icon and the next available rank number is shown to indicate the rank number that would be assigned to the rankable item when clicked. When the rankable item has been ranked and is hovered, a remove icon will be shown when hovered over and clicking the ranked item will remove it from the rank.
4.2: Drag and Drop Interaction
Rankable items can be dragged and dropped on the rank labels. Once ranked, the rankable items can be sorted by dragging the rankable items up and down over the rank labels. To remove a ranked item, drag and drop the item to its original location.
The options allow for configuration of the rank label numbers (auto-generated) and rank label text (generated by the ranks or choice text). The options will determine if the respondent will see a rank number next to the container, text in the container, both or none.
4.4: Advance Customization (CSS)
The destktop rank sort question can be customized by modifying the CSS in the XML. Each style variable is prepended with
ranksort:. For example,
ranksort:ranksortContainerCSS to customize the desktop styling. The preview will highlight with a red border the desktop section that can be customized.
Click on the to preview.
The mobile version of the rank sort is optimized for the smaller screen by having a list of rankable items and displaying the rank label next to the rankable item when selected.
5.1: Tap/Click Interaction
Taping on a rankable item will assign the next available rank label. The ranked item will animate and slide to right. The rank is then shown to the left of the ranked item. Rankable items can be tapped on the rank to choose a specific rank. If there are multiple items with the same ranking, an error is generated when trying to proceed to the next page. The duplicated ranked items will have a red border which can be customized.
5.2: Advance Customization (CSS)
The mobile rank sort question can be customized by modifying the CSS in the XML. Each style variable is prepended with
ranksort:mobile_. For example,
ranksort:mobile_ranksortContainerCSS to customize the mobile styling. The preview will highlight with a red border the mobile section that can be customized.
Click on the to preview.
- Demo Survey
- CSS Help:
- CSS Cheat Sheet: http://www.cheatography.com/davechild/cheat-sheets/css2/
- CSS3 Generator: http://css3generator.com
- CSS Gradients: http://www.colorzilla.com/gradient-editor/
Note: The rank sort question style overrides
survey.question.instructions in XML styles.