Components

Pick'em questions

Free to play
Last updated: March 2021

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.


Basic structure

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.

List questions

Grid questions

Question layout

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 32 and 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.

Color theming

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 white or body copy, this will depend on the background color and creative direction for the game,
  • Correctness indicators - correct green, incorrect red, and void orange darken 2,

Question header

The question header is made up of all the metadata about the question and includes:

  • Question number
  • Question title
  • Question subtext (optional)
  • Correctness indicator

    Correctness indicator states

    Pick’em questions have four associated states:

    • Unscored
    • Correct
    • Incorrect
    • Voided

    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.

    Colors

    Correctness indicator colors are defined by the admin system when creating a game. The default colors are shown below.

    Typography

    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.

    Corners

    The corner radius of the correctness indicator is 2.

      Question options

      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

      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 56 container 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.

        Image overflow

        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.

        List option selected states

        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

        List options with non-player images

        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 40 square.

        Grid options

        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)

        Text variants

        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.

          Text variant selected states

          Image variants

          The image variants for grid options come in three varieties:

          • Image only - where an 80 square 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 8 above where the your pick tag would be in the selected state.
          • Image and value - where the same 80 image 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 8 above the image.
          • Image, value and subtext - where the image size is reduced to a 70 square to provide space for an additional line of subtext between the option value and the image.

            Image variant selected states

            Grid option positioning

            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.

            Image usage in grid options

            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.