Ranking Interface
Ranking Options by Preference
When a Learner has an open Lottery available on their My Lotteries dashboard, they can click that Lottery's Open action button to begin Ranking the Options in order of their preference. This process is only available to Learners while the Lottery's stage status is actively "open".
This step is crucial to the Lottery process, as Learner input is collected in order to create the data that the Lottery algorithm uses when attempting to maximize overall Learner satisfaction.
The Ranking Interface
Header
At the top of the Ranking Interface is a heading that displays the title of the Lottery (as provided by the administrator during its creation), as well as some information about how long ago the Lottery was opened. Under this heading, a brief instructional message is provided for Learners.
Options List
The collection of Options is presented as a stacked list of Option cards, that each have their own controls that can be used to reorder the list.
The list is always presented in ascending numerical order, with the top Option choice (Rank 1) first and the least desired Option residing at the bottom of the list. Moving Options up means a higher preference, and moving them down indicates they are less desirable.
Dragging and Dropping
To move a single Option to another place in the list, click and drag the handle on the left side of the card. The handle is an icon consisting of a collection of 6 dots, arranged in two vertical, 3 dot columns. Hold down the click button on this icon handle, then drag up or down. Release the mouse button once the transparent "ghost" of the dragged option is sitting where you'd like in the list.
Selecting One or More Options
The left side of each Option card also includes a checkbox. You may check more than one Option at a time, and certain controls will become enabled depending on what reordering actions are available. When an Option is checked, the left-hand column expands to include Nudge Up and Nudge Down buttons, represented by an upward chevron icon, and a downward chevron icon, respectively.
Nudging Up or Down
When an Option is checked, and the Nudge Up and Nudge Down buttons are visible, clicking one will nudge the option in the selected direction, effectively swapping it with the Option currently residing in that location.
When multiple Options are checked, the nudge buttons are also available, however, if any gaps exist between the checked Options, they will be removed before the nudge occurs. As an example, let's say you have a list of five options (labelled alphabetically for demonstration).
Option A
Option B
Option C
Option D
Option E
Now let's say you check Options A, C, and D. The list now looks like this, with the checked Options visually highlighted:
[✔] Option A
Option B
[✔] Option C
[✔] Option D
Option E
In this multi-checked state, the Nudge Up buttons will be disabled for the checked Options. This is because one of them cannot move up any higher than it is, as Option A is already the top-most choice. However, it is possible to move the group of checked options downward in the list, using the Nudge Down button on any of the checked Options. Performing this action will result in the following list:
Option B
Option E
[✔] Option A
[✔] Option C
[✔] Option D
This is because before any nudge action, all checked Options are "squashed" together to remove any potential gaps, then moved as a grouped block in the direction of the nudge action.
Move To Top / Move to Bottom
When an Option is checked, the buttons in the page's sticky footer, Move to Top and Move to Bottom become enabled. If there are multiple Options checked, the labels change to say Move All to Top/Bottom. When either of these buttons is clicked, any checked Options will be squashed and grouped together to remove any gaps, then moved t the very top or very bottom of the list.
Direct Move
If you have a single Option checked and would like to move it to a specific Rank number, you can use the input field in the middle of the sticky page footer. Simply type in the destination Rank number, then click the Move button. The list will accommodate for the move by nudging all affected Options up or down by one, depending on whether the action moved the checked Option higher or lower in the list.
You can also perform a direct Move action when multiple Options are checked, and it will behave the same way, but be aware that if there are any gaps between your checked Options, as mentioned above, they will be removed prior to the move action. That means spread out checked Options will be squashed together into a block, then moved to their new destination rank.
Auto-Saving and Manual Saving
After every action that reorders the list, it will be automatically saved. There also exists a manual Save button in the page's sticky footer bar, that can be used to explicitly force the rankings to save. Hovering over this button will display a tooltip that shows the date and time when the rankings were last saved. You can use this tooltip to check and ensure that your rankings are fully stored before leaving the Ranking Interface.
