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

Property	Required	Type	Description	Default
format	✓	string	The 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
colorBg		string	The background color of the score	rgba(0, 0, 0, 0)
colorText		string	The text color of the score	#000
colorCircle		string	The color of the circle	#000
colorCircleBg		string	The background color of the circle	rgba(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

Property	Required	Type	Description	Default
text	✓	string	The text to be displayed	no 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

Property	Required	Type	Description	Default
label	✓	string	The button text	no default
url	✓	string	The URL the button should link to	no default
isOpenInNewTabEnabled		boolean	If `true` the link will open in a new tab	false
colorBg		string	The background color of the button	#000
colorBgHover		string	The background color of the button on hover	rgba(0,0,0,0.8)
colorBorder		string	The border color of the button	#77baf6ff
colorBorderHover		string	The border color of the button on hover	#93c3ed
colorText		string	The text color of the button	#fff
colorTextHover		string	The text color of the button on hover	#fff
borderRadius		string	The border radius of the button; all corners are the same	18px
borderWidth		string	The border width of the button; all sides are the same	0px
padding		string	The padding of the button; all sides are the same	11px
textCapitalization		string	The text capitalization of the button. Valid values: `capitalize`, `uppercase`, `lowercase`, `none`	uppercase
textAlign		string	The text alignment of the button. Valid values: `start`, `end`, `left`, `right`, `center`, `justify`, `inherit`	center
textLetterSpacing		string	The letter spacing of the button	0.12rem
textLineHeight		string	The line height of the button	1.4rem
fontSize		string	The font size of the button	1.rem
fontFamily		string	The font family for this button. Use the Builder API font families endpoint to get a list of all available values	normal
fontStyle		string	The font style of the button. Valid values: `normal`, `italic`, `oblique`	normal
fontWeight		string	The font weight of the button. Valid values: `normal`, `bold`, `bolder`, `lighter`, `inherit`, `n100`, `n200`, `n300`, `n400`, `n500`, `n600`, `n700`, `n800`, `n900`	n600

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"
}

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

Property	Type	Description	Default
label	string	The label of the share element	Share
messageTitle	string	The message users will share and will see as the title in the share dialogue	(empty)
description	string	The description users will see in the share dialogue as a description	(empty)
url	string	The URL users will share	(empty) (will go to Riddle showcase, riddle.com/view/X)
networks	array	The networks the user can share the result on. See below to get the available social networks.	'facebook', 'whatsapp', 'twitter'
colorBg	string	The background color of the share block	#ffffff00
colorButtonBg	string	The background color of the share button	#000
colorButtonBgHover	string	The background color of the share button on hover	#333
colorButtonIcon	string	The color of the share button icon	#fff
colorButtonIconHover	string	The color of the share button icon on hover	#fff
colorBrandIsEnabled	boolean	If `true` the brand color will be used for the share button	false
colorText	string	The text color of the share block	#000
buttonBorderRadius	string	The border radius of the share button	50%
buttonGap	string	The gap between the share buttons	0.8rem
buttonIconSize	string	The size of the share button icon	2.1rem
buttonSize	string	The size of the share button	3.6rem
textCapitalization	string	The text capitalization of the share block. Valid values: `capitalize`, `uppercase`, `lowercase`, `none`	uppercase
textAlign	string	The text alignment of the share block. Valid values: `start`, `end`, `left`, `right`, `center`, `justify`, `inherit`	inherit
textLetterSpacing	string	The letter spacing of the share block	0.12rem
textLineHeight	string	The line height of the share block	1.4rem
fontFamily	string	The font family for this button. Use the Builder API font families endpoint to get a list of all available values	none
fontSize	string	The font size of the share block	1.6rem
fontStyle	string	The font style of the share block. Valid values: `normal`, `italic`, `oblique`	normal
fontWeight	string	The font weight of the share block. Valid values: `normal`, `bold`, `bolder`, `lighter`, `inherit`, `n100`, `n200`, `n300`, `n400`, `n500`, `n600`, `n700`, `n800`, `n900`	n400

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

Property	Type	Description	Default
areTotalVotesVisible	boolean	If `true` the total number of votes will be displayed	true
isPercentageVisible	boolean	If `true` the percentage of votes will be displayed	true
isVotesNumberVisible	boolean	If `true` the number of votes will be displayed	true
areAnswerImagesHidden	boolean	If `true` the images of the answers will be hidden	false
areMainImagesHidden	boolean	If `true` the main images will be hidden	false

Example Object

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

Add image

Displays an image.

Properties

Property	Required	Type	Description	Default
media	✓	string	The URL of the image	no default

Example Object

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

Add leaderboard

Add a leaderboard to the result page.

Properties

Property	Required	Type	Description	Default
leaderboard	✓	string	The UUID of the leaderboard you want to connect	no 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

Property	Required	Type	Description	Default
marginTop		string	The margin at the top of the block	0
marginBottom		integer	The margin at the bottom of the block	0

Example Object

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

Build RiddlesPreset settings

Build RiddlesUse images