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"
}
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
Property | Required | 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 | Required | 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 right of the block | 0 |
Example Object
{
"type": "Text",
"text": "This is my result page text!",
"marginTop": 2,
"marginBottom": 2
}