{ "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://evaluatly.com/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://evaluatly.com/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://evaluatly.com/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://evaluatly.com/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://evaluatly.com/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://evaluatly.com/static/img/demo/apple.png", "width": "250px"} ] }, { "cond": {"==": [{"i": "fruit"}, "orange"]}, "render": [ { "type": "image", "src": "https://evaluatly.com/static/img/demo/orange.png", "width": "350px"} ] }, { "cond": {"==": [{"i": "fruit"}, "banana"]}, "render": [ { "type": "image", "src": "https://evaluatly.com/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](/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://evaluatly.com/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": "/"}}, "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": "/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": "" }