loading x elements...

In this example you will learn:

  • How to use HTML for nicer visuals.
  • How to embed an interactive website in Elody.
  • How to create persistent results that can be inspected after the user closes the Scenario.

The Scenario Plan demonstrating the Rule on this page can be found here: (Tutorial) Improved Presentation.

The Rule

This Rule is pretty large, but most of that is just because it contains large chunks of HTML code:

When you execute this Rule through the Scenario Plan given above, Elody will ask you for permission to access two external websites: d3js.org and example.com.

Developers are free to let their Programs and their HTML Messages access any websites they want, but the user will always be asked for permission first. You can manage your permissions in your settings.

These are the highlights of the Rule:

  • The first message_component it creates consists of HTML. This HTML contains styling that is rendered directly in the browser.
  • The third message_component also consists of HTML, but this one is much more interesting:
    • It loads a script from an external website.
    • It executes Javascript to create an interactive visualization (you can drag and zoom the circle). For security reasons, the HTML code is placed in a secure environment (a sandboxed iframe) to prevent malicious developers from hijacking your browser with Javascript.
    • The field external_domains is set, to explicitly declare that this HTML block requires access to d3js.org. External websites are blocked if you do not explicitly ask for permission in this way.
    • The field scenario_history and related fields are set. What this does is explained below.
  • The fourth message_component demonstrates how you can display a link to external websites. Because the HTML block is captured in a sandboxed iframe for security reasons, this code block is necessary to make links work indirectly.
  • After creating the Message, the Rule also creates a Tag of the Symbol !set_status_message. This overwrites the status Message that Elody displays when it is done running.

You can open the History view to inspect any elements that have been marked with the scenario_history field. There are two ways to do this:

  • If you are in an active Scenario, you can click "STOP SCENARIO" at the top of the page. This will stop the Scenario and take you to the history view.
  • You can open "My Scenarios" from the navigation menu to get a list of all Scenarios you have run or are running, and go to the History view from there.

The History view is permanent, and you can reopen it at any time to view previously created images, or download files, or even to revisit entire interactive webpages. You can use it to save the result of a program execution, so users can open it again after closing the browser window of the active Scenario.

The HTML elements shown here only scratch the surface of what is possible.

If you don't like Elody's chatbot-like format, you can actually use HTML Messages to embed arbitrary control elements, then use those instead of Elody's normal buttons and forms. The documentation of the html_message_component has more details: message_component_html

However, in most cases it is recommended to use Elody's default control mechanisms (Options), because it is easier for developers to work together if they all rely on the same methods. Later parts of the tutorial will show how different developers can collaborate using Options.