Create Predictor

When building a predictor you can add:

GuessTheScore / PickTheWinner

These both types are configuration-wise exactly the same. The only difference is that GuessTheScore has a different UI/intention than PickTheWinner. Both work in the same way - a new item gets added to build.blocks, consisting of:

  • title: the question title
  • items: the predictor items

Example:

{
    "title": "Who will win?",
    "type": "PickTheWinner",
    "items": [
        {
            "title": "Team A"
        },
        {
            "title": "Team B"
        },
    ]
}

The example below is very basic - if you want to go beyond that, the following optional properties can be set for each item in items:

  • backgroundImage: the URL of the background image
  • logo: the URL of the logo image; e.g. logo of a sports team
  • backgroundColor: the background color of the item
  • textColor: the text color of the item

Example with all optional properties set:

{
    "title": "Who will win?",
    "type": "PickTheWinner",
    "items": [
        {
            "title": "Team A",
            "backgroundImage": "https://www.example.com/image.jpg",
            "logo": "https://www.example.com/logo.jpg",
            "backgroundColor": "#FF0000",
            "textColor": "#FFFFFF"
        },
        {
            "title": "Team B",
            "backgroundImage": "https://www.example.com/image.jpg",
            "logo": "https://www.example.com/logo.jpg",
            "backgroundColor": "#0000FF",
            "textColor": "#FFFFFF"
        }
    ]
}

Note: Using both a background image and a color does not make sense; it is only written here to show all possible properties. Please choose one of both.

Result page

In a predictor only one result page is allowed which is specified in build.result. Basic results have a title and description property.

Example:

{
    "title": "Thank you!",
    "description": "We are happy to have you here"
}

If you want to create complex result pages with texts, images, answered blocks, ... click here to learn how to build advanced result pages.

Full example

{
    "type": "Predictor",
    "build": {
        "title": "Predictor example (Builder API)",
        "blocks": [
            {
                "title": "Who will win?",
                "type": "PickTheWinner",
                "items": [{
                        "title": "Team A",
                        "backgroundColor": "#FF0000",
                        "textColor": "#FFFFFF"
                    },
                    {
                        "title": "Team B",
                        "backgroundColor": "#0000FF",
                        "textColor": "#FFFFFF"
                    }
                ]
            },
            {
                "title": "What will be the score?",
                "type": "GuessTheScore",
                "items": [
                    {
                        "title": "Team A"
                    },
                    {
                        "title": "Team B"
                    }
                ]
            }
        ],
        "result": {
            "title": "Thank you!",
            "description": "We are happy to have you here"
        }
    }
}

Next steps

Now that you know the basics of building a predictor, you might want to learn how to:

Table of Contents