Pick’em questions are the foundations of free to play games within FanDuel. Although there will be game formats that rely on variations of these components the majority of free to play games will use these components as a foundation.
All questions have two key sections:
- Question header
- Question options
These two sections have a number of variants associated with them that allow for a number of different arrangements for the basic pick’em format. Documentation for these sections are split across multiple tabs at the top of this page however example questions and labels for structural elements can be found below.
All questions that are immediately followed by another question should be separated by a small border. This helps break the flow of questions and to demark the two, or more, questions within a game. The space between the bottom of a question and the border should be
24 between the border and the question number of the next question. There should not be a border after the last question in a game.
Colors shown in the documentation images are examples only. In reality the colors for the two sections of a question are controlled by admin tools when creating a game in order to allow for customization for partners.
Default colours are:
- Text - either
body copy, this will depend on the background color and creative direction for the game,
- Correctness indicators - correct
red, and void
orange darken 2,
The question header is made up of all the metadata about the question and includes:
- Question number
- Question title
- Question subtext (optional)
- Correctness indicator
Pick’em questions have four associated states:
All states except unscored have a correctness indicator associated with them and are shown below.
N.B. The correctness indicator should not be confused with a tag and should not be used outside of this question format, as such it is not documented separately.
Correctness indicator colors are defined by the admin system when creating a game. The default colors are shown below.
The type is set to
14 and has a
bold font weight in order to allow for better contrast with as many background colors as possible.
The corner radius of the correctness indicator is
Pick’em questions are incredibly configurable and as such there are quite a few permutations of question option formats. There are two main types of question options available:
- Grid options - displays either 2 or 4 options
- List options - displays 3+ options
Both option types can be configured to show more or less data depending on the use case.
List options have 3 main data points and a select input (either a radio button or checkbox). The data points are as follows:
- Image (optional) - player image, team logo etc. that is set within a
56 x 56container with overflow set to visible*
- Value - the actual data point used for selection e.g. a player name, or team name, set in
14 - zeta / Bold / body copy
- Subtext (optional) - used for clarification or additional data e.g. the player’s associated team, or their position etc., set in
14 - zeta / sub text
When laying out a question with multiple list options the spacing between each question should be
8 between each option.
The reason for the visible overflow is two fold:
- Player images are often taken at different distances and as such shoulders and the tops of heads can sometimes get cut off
- Team logos are not perfectly round or square and when set via CSS to fill the height or width of a container can be clipped. Visible overflow reduces the likelihood of these scenarios occurring.
Again items shown here are for the default light version of components only, actual component selected state colors will be defined in conjunction with the team responsible for branding the game(s).
The tag used to indicate the selected pick should be
16 away from the option value/subtext group and should float with the values. The tag should not wrap onto a separate line if an option value/subtext data point becomes too long for the container, it should instead remain a minimum of
16 from the interactive input element at all times and remain centered within the list option
When using a list option that is not using a player image the container does not fill the entire height of the containing list item. This is so that logos/images that fill the space can have adequate padding around them. Instead those images are housed within a
Grid options have the same data points outlined above for list options, however the way they are laid out does not make for easy customization with overrides and as such there are two different grid option variants.
These two variants are:
- Text - includes Value and Subtext (optional) only
- Image - includes Image, Value (optional), and Subtext (optional)
The value, or value and subtext group, should be positioned so that the value is centered vertically and horizontally within the grid option. The subtext is always positioned
24 above the value and the value subtext group should be pinned centrally if/when the grids expand in height.
The image variants for grid options come in three varieties:
- Image only - where an
80square image is shown in the approximate center of the grid option. The reason for this being the approximate center is due to the fact that the image is actually placed
8above where the your pick tag would be in the selected state.
- Image and value - where the same
80image is accompanied by a text value for the answer option. Text value may be used to provide a written alternative to the image on its own. The text value is placed
8above the image.
- Image, value and subtext - where the image size is reduced to a
70square to provide space for an additional line of subtext between the option value and the image.
Grids options should be positioned
16 away from the outside edges of the screen with an
8 channel running between them (horizontally if two options are present and vertically if four are present). The default/minimum height for all grid options is
168 however if a grid option on one row should need to grow in height (due to a long wrapping value or subtext entry) both grid options within that row should expand to that height. The selection input (radio or checkbox) should always be horizontally centered and
8 from the bottom of the grid option.
Images used within grid options should be shown in such a way as to bring a uniform presentation to specific image types where appropriate and allow some images to present themselves as intended. Player images for example should be contained within a circular frame inside the containers and clip the contents of the image so that there are not any jagged edges showing from the original image.
Images for sports teams should not be contained within a circular container and instead should be set to fill the full square to the maximum (either vertically or horizontally) while maintaining their original aspect ratio. This is also true for any partner images that my need to be used within the grid option layouts. Clipping of sports team logos and brand partner images is generally not allowed by their brand guidelines.