Result pages

If you only require a minimal result page with text you need to add a title and description property to the result object.

For quiz:

{
    "results": [
        {
            "minPercentage": 0,
            "maxPercentage": 50,
            "title": "Bad result",
            "description": "You answered less than 50% of the questions correctly"
        },
        {
            "minPercentage": 51,
            "maxPercentage": 100,
            "title": "Good result",
            "description": "You answered more than 50% of the questions correctly"
        }
    ]
}

For any other Riddle type:

{
    "blocks": [...],
    "result": {
        "title": "Thank you!",
        "description": "We are happy to have you here"
    }
}

This default result page consists of:

  • your title and description
  • share buttons, a block which allows the user to share the result on different social networks
  • for quiz: a block which shows the user how many questions they answered correctly
  • for personality: a block which shows the user information about their result personality

In most cases this should suffice - if you want to create advanced result pages similar to the functionality in the Creator keep reading.

Advanced result pages

You can create advanced result pages with texts, images, answered blocks, and more via the API's result builder. See the result page documentation to see how this works in the Creator.

Similar to the Riddle's blocks the result page is also structured in blocks. You can add up to 10 blocks to the result page. To do this send a blocks array in the result object instead of a title and description property:

For poll (or any type which only has one result):

{
    "blocks": [...],
    "result": {
        "blocks": [
            {
                "type": "Text",
                "text": "This is my result page text!"
            },
            ...
        ]
    }
}

For quiz:

{
    "blocks": [...],
    "results": [
        {
            "minPercentage": 0,
            "maxPercentage": 50,
            "blocks": [
                {
                    "type": "Text",
                    "text": "Bad result"
                },
                ...
            ]
        },
        {
            "minPercentage": 51,
            "maxPercentage": 100,
            "blocks": [
                {
                    "type": "Text",
                    "text": "Good result"
                },
                ...
            ]
        }
    ]
}

Every result page block consists of a type property and additional properties depending on the block type. For example here is the content for the text block only with required options:

{
    "type": "Button",
    "label": "My new button!",
    "url": "https://riddle.com"
}

This will create a button with the label "My new button!" which links to https://riddle.com. If we now want to set the optional property isOpenInNewTabEnabled to true the object for this button would look like this:

{
    "type": "Button",
    "label": "My new button!",
    "url": "https://riddle.com",
    "isOpenInNewTabEnabled": true <--- optional property
}

In the next sections all available blocks are listed with their required and optional properties.

Add user's score

Displays the user's score in a given format.

Properties

PropertyRequiredTypeDescriptionDefault
formatstringThe format in which the user's score should be displayed, valid values: Score (displays the user's score in an absolute number), ScoreTotalScore (displays the user's score in relation to the total score), ScorePoints ( displays the user's score in points), Percentage (displays the user's score in percentage)no default
colorBgstringThe background color of the scorergba(0, 0, 0, 0)
colorTextstringThe text color of the score#000
colorCirclestringThe color of the circle#000
colorCircleBgstringThe background color of the circlergba(0,0,0,0.1)

Example object

{
    "type": "ResultScore",
    "format": "Score",
    "colorBg": "#fff",
    "colorText": "#000",
    "colorCircle": "#000",
    "colorCircleBg": "#fff"
}

Add text

Displays a regular text block. You can use HTML tags in the text.

Tip: Use dynamic variables here to personalize the result page text to user input.

Properties

PropertyRequiredTypeDescriptionDefault
textstringThe text to be displayedno default

Example object

{
    "type": "Text",
    "text": "This is my result page text!"
}

Add button

Displays a call to action button that links to a specified URL on click.

Tip: Use dynamic variables in the label or URL.

Properties

PropertyRequiredTypeDescriptionDefault
labelstringThe button textno default
urlstringThe URL the button should link tono default
isOpenInNewTabEnabledbooleanIf true the link will open in a new tabfalse
colorBgstringThe background color of the button#000
colorBgHoverstringThe background color of the button on hoverrgba(0,0,0,0.8)
colorBorderstringThe border color of the button#77baf6ff
colorBorderHoverstringThe border color of the button on hover#93c3ed
colorTextstringThe text color of the button#fff
colorTextHoverstringThe text color of the button on hover#fff
borderRadiusstringThe border radius of the button; all corners are the same18px
borderWidthstringThe border width of the button; all sides are the same0px
paddingstringThe padding of the button; all sides are the same11px
textCapitalizationstringThe text capitalization of the button. Valid values: capitalize, uppercase, lowercase, noneuppercase
textAlignstringThe text alignment of the button. Valid values: start, end, left, right, center, justify, inheritcenter
textLetterSpacingstringThe letter spacing of the button0.12rem
textLineHeightstringThe line height of the button1.4rem
fontSizestringThe font size of the button1.rem
fontFamilystringThe font family for this button. Use the Builder API font families endpoint to get a list of all available valuesnormal
fontStylestringThe font style of the button. Valid values: normal, italic, obliquenormal
fontWeightstringThe font weight of the button. Valid values: normal, bold, bolder, lighter, inherit, n100, n200, n300, n400, n500, n600, n700, n800, n900n600

Example object

{
    "type": "Button",
    "label": "Click me!",
    "url": "https://riddle.com",
    "isOpenInNewTabEnabled": true,
    "colorBg": "_colorBg",
    "colorBgHover": "#fff",
    "colorBorder": "#fff",
    "colorBorderHover": "#fff",
    "colorText": "#fff",
    "colorTextHover": "#fff",
    "borderRadius": "5px",
    "borderWidth": "5px",
    "padding": "5px",
    "textCapitalization": "lowercase",
    "textAlign": "inherit",
    "textLetterSpacing": "20px",
    "textLineHeight": "20px",
    "fontFamily": "Arial",
    "fontSize": "20px",
    "fontStyle": "oblique",
    "fontWeight": "bolder"
}

Add share to social block

Displays a share block that allows users to share the result on different social networks.

You can customize the share messages, URLs and all of the share block's design properties.

Properties

PropertyRequiredTypeDescriptionDefault
labelstringThe label of the share elementShare
messageTitlestringThe message users will share and will see as the title in the share dialogue(empty)
descriptionstringThe description users will see in the share dialogue as a description(empty)
urlstringThe URL users will share(empty) (will go to Riddle showcase, riddle.com/view/X)
networksarrayThe networks the user can share the result on. See below to get the available social networks.'facebook', 'whatsapp', 'twitter'
colorBgstringThe background color of the share block#ffffff00
colorButtonBgstringThe background color of the share button#000
colorButtonBgHoverstringThe background color of the share button on hover#333
colorButtonIconstringThe color of the share button icon#fff
colorButtonIconHoverstringThe color of the share button icon on hover#fff
colorBrandIsEnabledbooleanIf true the brand color will be used for the share buttonfalse
colorTextstringThe text color of the share block#000
buttonBorderRadiusstringThe border radius of the share button50%
buttonGapstringThe gap between the share buttons0.8rem
buttonIconSizestringThe size of the share button icon2.1rem
buttonSizestringThe size of the share button3.6rem
textCapitalizationstringThe text capitalization of the share block. Valid values: capitalize, uppercase, lowercase, noneuppercase
textAlignstringThe text alignment of the share block. Valid values: start, end, left, right, center, justify, inheritinherit
textLetterSpacingstringThe letter spacing of the share block0.12rem
textLineHeightstringThe line height of the share block1.4rem
fontFamilystringThe font family for this button. Use the Builder API font families endpoint to get a list of all available valuesnone
fontSizestringThe font size of the share block1.6rem
fontStylestringThe font style of the share block. Valid values: normal, italic, obliquenormal
fontWeightstringThe font weight of the share block. Valid values: normal, bold, bolder, lighter, inherit, n100, n200, n300, n400, n500, n600, n700, n800, n900n400

Example object

{
    "type": "Share",
    "title": "Share this poll!",
    "description": "This is a description",
    "networks": ["fb", "linkedin"]
}

Add answered blocks

Displays a block that shows the user what they answered and how many votes each answer got (if enabled).

Properties

PropertyRequiredTypeDescriptionDefault
areTotalVotesVisiblebooleanIf true the total number of votes will be displayedtrue
isPercentageVisiblebooleanIf true the percentage of votes will be displayedtrue
isVotesNumberVisiblebooleanIf true the number of votes will be displayedtrue
areAnswerImagesHiddenbooleanIf true the images of the answers will be hiddenfalse
areMainImagesHiddenbooleanIf true the main images will be hiddenfalse

Example Object

{
    "type": "AnsweredBlocks",
    "areTotalVotesVisible": true
}

Add image

Displays an image.

Properties

PropertyRequiredTypeDescriptionDefault
mediastringThe URL of the imageno default

Example Object

{
    "type": "Media",
    "media": "https://www.example.com/image.jpg"
}

Add leaderboard

Add a leaderboard to the result page.

Properties

PropertyRequiredTypeDescriptionDefault
leaderboardstringThe UUID of the leaderboard you want to connectno default

Example Object

{
    "type": "Leaderboard",
    "leaderboard": "hQ3SYWur"
}

Offset any block with margins

If you want to create a gap between two result page builder blocksblocks, e.g. to emphasize a certain block, you can use margins to better position the blocks.

Note: The margin does not work with pixel values! Instead we use the coordinate system just as in the Creator to position the blocks. This means that sending "marginTop: 2" will result in a block offset by 2 units. We recommend you to play around and see what works best for your design.

Properties

PropertyRequiredTypeDescriptionDefault
marginTopstringThe margin at the top of the block0
marginBottomintegerThe margin at the bottom of the block0

Example Object

{
    "type": "Text",
    "text": "This is my result page text!",
    "marginTop": 2,
    "marginBottom": 2
}