{
    "id": "features",
    "title": "Evaluatly Demo",
    "hash": "demo/features",
    "story": {
        "info": {
            "id": "demo",
            "title": "Evaluatly Demo",
            "lang": "en"
        },
        "env": {
            "back_label": "Back"
        },
        "pages": [
            {
                "page_id": "page_start",
                "items": [
                    { "type": "image", "src": "https://devgutt.github.io/evaluatly/static/img/evaluatly-logo-206x77.png", "alt": "Logo"},
                    { "type": "title", "value": "More than forms. Stories."},
                    { "type": "p", "value": "This demo shows how to use Evaluatly to collect information\nand create engaging experiences."},
                    { "type": "button", "label": "Start Demo", "program": [ {"next_page": true} ]}
                ]
            },
            {
                "items": [
                    { "type": "question", "value": "What's your name?" },
                    { "type": "name", "save_key": "name", "required": true, "autofocus": true },
                    { "type": "p", "value": "Use single-field pages to collect information gradually" }
                ],
                "submit" : { 
                    "label": "Next", 
                    "input_submit": true,
                    "program": [ {"next_page": true} ] 
                }  
            },
            {
                "history": false,
                "env": {
                    "show_back": false
                },
                "items": [
                    { "type": "image", "src": "https://devgutt.github.io/evaluatly/static/img/demo/hand-wave.gif", "width": "100" },
                    { "type": "title", "value": "Hello, {{name|first}}"},
                    { "type": "exec", "delay": 2500, "program": { "next_page": true} }
                ]
            },
            {
                "page_id": "page_fruit",
                "items": [
                    { "type": "question", "value": "Choose a fruit!"},
                    {
                        "type": "radio", "save_key": "fruit", "show_ripple": true,
                        "options": [
                            { "id": "apple", "label": "Apple 🍎" },
                            { "id": "orange", "label": "Orange 🍊" },
                            { "id": "banana", "label": "Banana 🍌" }
                        ]
                    },
                    { "type": "p", "value": "Single choice radio button" }
                ],
                "submit" : { 
                    "input_submit": true,
                    "program": [
                        {"if": [
                            {
                                "cond": {"==": [{"i": "fruit"}, "apple"]},
                                "program": [
                                    {"save": ["fruit_bck_color", "rgba(137, 28, 30, 0.6)"]},
                                    {"save": ["fruit_bck_url", "url(https://devgutt.github.io/evaluatly/static/img/demo/apple.png)"]},
                                    {"save": ["fruit_font_color", "#ffffff"]},
                                    {"save": ["fruit_btn_color", "#496a19"]},
                                    {"save": ["fruit_msg", {"sub": "{{name|first}}, we love apples too!"}]}
                                ]
                            },
                            {
                                "cond": {"==": [{"i": "fruit"}, "orange"]},
                                "program": [
                                    {"save": ["fruit_bck_color", "rgba(202, 230, 255, 0.6)"]},
                                    {"save": ["fruit_bck_url", "url(https://devgutt.github.io/evaluatly/static/img/demo/orange.png)"]},
                                    {"save": ["fruit_font_color", "#012648"]},
                                    {"save": ["fruit_btn_color", "#f3973e"]},
                                    {"save": ["fruit_msg", {"sub": "There is something refreshing about oranges, {{name|first}}!"}]}
                                ]
                            },
                            {
                                "cond": {"==": [{"i": "fruit"}, "banana"]},
                                "program": [
                                    {"save": ["fruit_bck_color", "rgba(248, 193, 70, 0.6)"]},
                                    {"save": ["fruit_bck_url", "url(https://devgutt.github.io/evaluatly/static/img/demo/banana.png)"]},
                                    {"save": ["fruit_font_color", "#3a2a06"]},
                                    {"save": ["fruit_btn_color", "#ff8100"]},
                                    {"save": ["fruit_msg", {"sub": "Banana is our favorite, {{name|first}}!"}]}
                                ]
                            }
                        ]},
                        {"next_page": true}
                    ] 
                }
            },
            {
                "history": false,
                "items": [
                    { "type": "render-If", "value": [
                            { 
                                "cond": {"==": [{"i": "fruit"}, "apple"]},
                                "render": [
                                    { "type": "image", "src": "https://devgutt.github.io/evaluatly/static/img/demo/apple.png", "width": "250px"}
                                ]
                            },
                            { 
                                "cond": {"==": [{"i": "fruit"}, "orange"]},
                                "render": [
                                    { "type": "image", "src": "https://devgutt.github.io/evaluatly/static/img/demo/orange.png", "width": "350px"}
                                ]
                            },
                            { 
                                "cond": {"==": [{"i": "fruit"}, "banana"]},
                                "render": [
                                    { "type": "image", "src": "https://devgutt.github.io/evaluatly/static/img/demo/banana.png", "width": "300px"}
                                ]
                            }
                        ]
                    },
                    { "type": "title", "value": "{{fruit_msg}}" },
                    { "type": "p", "value": "Use the previous answers to personalize the experience" },
                    { "type": "button", "label": "Next", "program": [{"next_page": true}] }
                ]
            },
            {
                "history": false,
                "items": [
                    { "type": "p", "value": "You can use videos too …"},
                    { "type": "render-If", "value": [
                            { 
                                "cond": {"==": [{"i": "fruit"}, "apple"]},
                                "render": [
                                    { "type": "embed", "src": "https://www.youtube.com/embed/oqa8jkJj_IY?controls=0&autoplay=1&rel=0" }
                                ]
                            },
                            { 
                                "cond": {"==": [{"i": "fruit"}, "orange"]},
                                "render": [
                                    { "type": "embed", "src": "https://www.youtube.com/embed/o0VkrIo9q5c?controls=0&autoplay=1&rel=0" }

                                ]
                            },
                            { 
                                "cond": {"==": [{"i": "fruit"}, "banana"]},
                                "render": [
                                    { "type": "embed", "src": "https://www.youtube.com/embed/R7PCxN0T56U?controls=0&autoplay=1&rel=0" }
                                ]
                            }
                        ]
                    },
                    { "type": "title", "value": "{{fruit_msg}}" },
                    { "type": "button", "label": "Next", "program": [{"next_page": true}] }
                ]
            },
            {
                "history": false,
                "style": {
                    "color": {"v": "fruit_font_color"},
                    "background-color": {"v": "fruit_bck_color"},
                    "background-image": {"v": "fruit_bck_url"},
                    "background-size": "auto",
                    "background-repeat": "no-repeat",
                    "background-position": "bottom right"
                },
                "style_content": {
                    "background-color": {"v": "fruit_bck_color"},
                    "padding": "24px 48px"
                },
                "items": [
                    { "type": "p", "value": "… or change the entire page!"},
                    { "type": "title", "value": "{{fruit_msg}}", "style": {
                            "color": {"v": "fruit_font_color"}
                        } 
                    },
                    { "type": "p", "value": "Dynamically customize flow and style to create engaging stories."},
                    { "type": "button", "label": "Next", "program": {"next_page": true}, "style": {
                            "background-color": {"v": "fruit_btn_color"},
                            "color": {"v": "fruit_font_color"}
                        } 
                    },
                    { "type": "link", "label": "Pick another fruit!", "program": [{"previous_page": true}], "style": {
                            "display": "block",
                            "color": {"v": "fruit_btn_color"}
                        } 
                    } 
                ]
            },
            {
                "items": [
                    { "type": "title", "value": "Choose some types"}, 
                    { "type": "check",  "show_ripple": true,
                        "options": [
                            { "save_key": "color-red", "id": "R", "label": "**Red** {{fruit.id}}", "style_container": {"min-width": "50%"} },
                            { "save_key": "color-brown", "id": "B", "label": "**Brown** {{fruit.id}}", "style_container": {"min-width": "50%"} },
                            { "save_key": "color-yellow", "id": "Y", "label": "**Yellow** {{fruit.id}}", "style_container": {"min-width": "50%"} },
                            { "save_key": "color-green", "id": "Y", "label": "**Green** {{fruit.id}}", "style_container": {"min-width": "50%"} }
                        ]
                    },
                    { "type": "p", "value": "Multiple choice checkboxes" }
                ],
                "submit" : { 
                    "label": "Next", 
                    "input_submit": true,
                    "program": [ {"next_page": true} ]
                }
            },
            {
                "style_content": {
                    "align-items": "flex-start",
                    "border": {"sub": "1px solid currentColor"}
                },
                "items": [
                    { "type": "title", "value": "Advanced forms"},
                    { "type": "p", "value": "You can create complex forms with multiple elements."},
                    { "type": "name", "label": "Name", "save_key": "name", "required": true },
                        {
                        "type": "radio", "save_key": "fruit", "label": "Fruit:",
                        "options": [
                            { "id": "apple", "label": "Apple" },
                            { "id": "orange", "label": "Orange" },
                            { "id": "banana", "label": "Banana" }
                        ]
                    },
                    { "type": "check", "label": "Type:",
                        "options": [
                            { "save_key": "color-red", "id": "R", "label": "Red" },
                            { "save_key": "color-brown", "id": "B", "label": "Brown" },
                            { "save_key": "color-yellow", "id": "Y", "label": "Yellow" },
                            { "save_key": "color-green", "id": "G", "label": "Green" }
                        ]
                    }
                ],
                "submit" : { 
                    "label": "Next", 
                    "program": [ {"next_page": true} ]
                }
            },
            {
                "items": [
                    { "type": "title", "value": "Variables"},
                    { "type": "p", "value": "All fields are saved in variables that can be used to personalize the journey, \nmake calculations, or sending information."}, 
                    { "type": "code", "value": "name:  **{{name}}**\nfruit: **{{fruit.label}}**"}, 
                    { "type": "button", "label": "Next", "program": [{"next_page": true} ] }
                ]
            },
            {    
                "items": [
                    { "type": "title", "value": "Programming & Calculations"},
                    { "type": "p", "value": "Create __smart stories__ with conditional jumps, comparisons, navigation,\ncalculations, server communication, and more."}, 
                    { "type": "p", "value": "Check the [Anxiety Test](/evaluatly/demo/psychology/anxiety/) for an example of a scoring test. ✨" },
                    { "type": "button", "label": "Next", "program": [{"next_page": true} ] }
                ]
            },
            {
                "style": {
                    "color": "#4b3f32",
                    "background-image": {"sub": "url(https://devgutt.github.io/evaluatly/static/img/luna-1.png)"},
                    "background-size": "auto",
                    "background-repeat": "no-repeat",
                    "background-position": "top right 10%"
                },
                "style_content": {
                    "background-color": "rgba(237, 219, 245, 0.9)",
                    "padding": "48px",
                    "display": "flex",
                    "border-radius": "10px",
                    "margin": "0 16px",
                    "box-shadow": "0 18px 30px -15px rgba(0,0,0,.4)"
                },
                "items": [
                    { "type": "title", "value": "Thank you!", "style": {"color": "#45015f"}},
                    { "type": "p", "value": "Thank you for using our demo."},
                    { "type": "link", "label": "Back to the website", "program": {"redirect": { "url": "/evaluatly"}},
                        "style": {"color": "#f1574b"} },
                    { "type": "link", "label": "Feedback 👋", "url": "mailto:gustavo.evaluatly@gmail.com",
                        "style": {"color": "#f1574b"} },
                    { "type": "link", "label": "Change theme 💅🏽", "program": {"jump_page": "page_theme"},
                        "style": {"color": "#f1574b"} }
                ]
            },
            {
                "page_id": "page_theme",
                "items": [
                    { "type": "question", "value": "Choose a theme"},
                    {
                        "type": "radio", "save_key": "theme", "show_marker": false,
                        "options": [
                            { "id": "1", "value": "dark", "label": "Dark", "style": {
                                "background-color": "#29272b",
                                "color": "#eae7af"
                            } },
                            { "id": "2", "value": "cool", "label": "Blue", "style": {
                                "background-color": "#d5e4f9",
                                "color": "#173E73"
                            } },
                            { "id": "3", "value": "typewriter", "label": "Typewriter", "style": {
                                "background-color": "#fff",
                                "color": "#422d8e"
                            } },
                            { "id": "0", "value": "index", "label": "Default", "style": {
                                "background-color": "#f5f1ed",
                                "color": "#f1574b"
                            } }
                        ]
                    },
                    { "type": "button", "label": "Restart demo", "program": [{"jump_page": "page_start"}] }
                ],
                "submit" : { 
                    "input_submit": true,
                    "program": [
                        {"console": {"sub": "The new theme is {{theme}}!"}},
                        {"redirect": {
                            "url": {"sub": "/evaluatly/demo/features/{{theme}}.html"} }
                        }
                ]}
            }
        ]
    },
    "theme": {
        "page": {
            "font-family": "google:Lato",
            "font-size": "20px",
            "color": "#4b3f32",
            "background-color": "#f5f1ed"
        },
        "content": {
            "align-items": "center",
            "text-align": "center",
            "justify-content": "center"
        },
        "title": {
            "color" : "#000000"
        },
        "subtitle": {
            "color" : "#000000"
        },
        "question": {
            "color" : "#000000"
        },
        "button": {
            "background-color": "#f1574b",
            "color": "#ffffff",
            "border-radius" : "100px",
            "border-width" : "3px"
        },
        "button:hover": {
            "background-color": "#ffffff",
            "color": "#f1574b"
        },
        "link": {
            "color": "#f1574b"
        },
        "form_submit.inputs": {
            "background-color": "#fff"
        },
        "form_submit .input": {
            "color": "#000"
        },
        "form .option:hover": {
            "color": "#3e306e"
        },
        "form_submit .option:hover": {
            "color": "#3e306e"
        }
    },
    "render": "<html hidden><meta charset=utf-8></html><script src=/evaluatly/js/render.js></script></html><noscript><style>html{display:block !important; white-space:pre}</style></noscript>"
}