Story

Story element that contains a set of pages.

Attributes

info

Information attributes:

id optional

Story Id.

title optional

Story title.

lang optional

Language code of the story.

env

Environment attributes:

back_label optional

The label of the back button.

brand optional

Brand attributes:

show

Show or hide the brand. The default is true.

txt

Text of the brand. Defaults to Evaluatly's brand.

Accepts text formatting and variables.

logo optional

Logo attributes:

img

The URL of the logo image.

Images can be of the type JPEG, GIF, PNG, SVG, ICO, and BMP.

program optional

One or more commands to be executed when the logo is clicked.

width optional

Width of the logo.

height optional

Height of the image.

alt optional

Text description of the logo image.

style optional

Style to be applied to the logo as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Use the show_logo page attribute to control the display of the logo on a specific page.

progress optional

Progress bar attributes:

show

Indicates whether or not to show the progress bar on the pages. Defaults to false.

qtd optional

The quantity used to evaluate the progress. Defaults to the number of pages.

pages

List of pages of the story.

Example

{
    "info": {
        "id": "story_1",
        "title": "The Story",
        "lang": "en"
    },
    "logo": {
        "img" : "/img/logo.png",
        "program": {"jump_page": "page_start"},
        "width": "100px"
    },
    "env": {
        "back_label": "Back"
    },
    "pages": [
        {
            "page_id": "page_start",
            "items": [
                { "type": "title", "value": "The Story" },
                { "type": "p", "value": "Now this is the story all about how..." },
                { "type": "button", "label": "Next", "program": {"next_page": true} }
            ]
        },
        {
            "page_id": "page_end",
            "items": [
                { "type": "title", "value": "The end" }
            ]
        }
    ]
}