Interactive¶

Processor name: interactive

The term interactive was defined in the Computer Science Field Guide to describe an interactive component of a page. This could be educational game or demostration that is created in HTML, CSS, and JS. Interactives can be small examples to display within the text (for example: animations comparing sorting algorithms) to larger interactives that require a whole page to view (for example: viewing pixels of an image.).

By using the interactive tag, Verto can include or link to an interactive within a page. Verto does not directly include the interactive, but creates Django commands for a Django system to render the interactive or link to interactive as requested.

You can include an interactive using the following text tag:

{interactive slug="binary-cards" type="in-page"}

Required Tag Parameters¶

slug - The slug to the interactive to include/link to. This slug is added to the list of interactives in required_files.
type - Sets the way the interactive is included in the page. Must be set to one of the following values:
- in-page - The interactive is included in the page by including the HTML (this is the preferred method for including an interactive on a page).
- whole-page - Creates a link to the interactive displayed on a separate page (this is the preferred method for including an interactive on a separate page). The link shows a thumbnail of the interactive with text (the text is set using the text parameter). By default, the thumbnail should be a thumbnail.png file found within the interactive’s img folder.
- iframe - The interactive is included in the page by embedding using an iframe. This is used if the interactive is included multiple times on the page to avoid conflicts in JavaScript/CSS.

Optional Tag Parameters¶

text - Boolean flag to indicate whether the interactive has custom text to dispaly.
- If given as true, the the subtitle is the first block of text with the interactive block.
- This is only use with the whole-page value.
- If no text is given, the link uses the text Click to load {{ slug }}.
parameters (used with whole-page and iframe values) - Adds the parameters to interactive link. For example: digits=5&start=BBBBB. Do not include the ? at the start, as this is already included in the output.
thumbnail (optional - used with whole-page value) - Displays an alternative thumbnail for the interactive. When not provided, it defaults to interactives/interactive-slug/img/thumbnail.png, where interactive-slug is the value given for the slug tag parameter (see above).
- If the thumbnail value provided is a relative link (a link that doesn’t start with http:), the link will be rendered with a Django static command. For example, the link:
```
thumbnail-2.png
```
  would be rendered as:
```
{% static 'thumbnail-2.png' %}
```
- Each thumbnail provided is added to the images set in required files stored by Verto. The set of filepaths can be accessed after conversion, see Step 4: Accessing VertoResult data.

The default HTML for an interactive is:

{%- if type == 'in-page' -%}
<remove>
{{ "{% include 'interactive/" }}{{ slug }}{{ "/index.html' %}" }}
</remove>
{% elif type == 'iframe' -%}
<iframe src="{{ "{% url 'interactive' slug='" }}{{ slug }}{{ "' %}" }}{% if parameters %}?{{ parameters }}{% endif %}">
<p>Your browser does not support iframes.</p>
</iframe>
{% elif type == 'whole-page' -%}
<a
   href="{{ "{% url 'interactive' slug='" }}{{ slug }}{{ "' %}" }}{% if parameters %}?{{ parameters }}{% endif %}"
   class="btn btn-interactive-link">
<img class="btn-interactive-link-image"
{% if thumbnail_file_relative %}
{% autoescape false -%}
src="{{ "{% static '" }}{{ thumbnail_file_path }}{{ "' %}" }}"
{%- endautoescape %}
{% else %}
src="{{ thumbnail_file_path }}"
{% endif %}/>
<div class="btn-interactive-whole-page-text">
{% if text -%}
{{ text }}
{% else -%}
Click to load {{ slug }}
{% endif -%}
</div>
</a>
{%- endif -%}

Examples¶

in-page example

Using the following example tag:

{interactive slug="binary-cards" type="in-page"}

The resulting HTML would be:

{% include 'interactive/binary-cards/index.html' %}

whole-page example

Using the following example tag:

{interactive slug="binary-cards" type="whole-page" parameters="digits=5&start=BBBBB" text="true"}

Binary Cards Interactive

{interactive end}

The resulting HTML would be:

<a class="btn btn-interactive-link" href="{% url 'interactive' slug='binary-cards' %}?digits=5&amp;start=BBBBB">
<img class="btn-interactive-link-image" src="{% static 'interactives/binary-cards/img/thumbnail.png' %}" />
<div class="btn-interactive-whole-page-text">
Binary Cards Interactive
</div>
</a>

iframe example

Using the following example tag:

{interactive slug="binary-cards" type="iframe" parameters="digits=5&start=BBBBB"}

The resulting HTML would be:

<iframe src="{% url 'interactive' slug='binary-cards' %}?digits=5&amp;start=BBBBB">
<p>Your browser does not support iframes.</p>
</iframe>

Overriding HTML for Interactives¶

When overriding the HTML for interactives, the following Jinja2 placeholders are available:

{{ type }} - The type of the interactive.
{{ slug }} - The slug of the interactive to include/link to.
{{ text }} - The text to to display to a link to a whole-page interactive.
{{ parameters }} - GET parameters to append to the interactive link.
{{ thumbnail_file_path }} - The location for the path to the thumbnail image.
{{ thumbnail_file_relative }} - If the thumbnail_file_path is a relative link, this is the boolean value True, otherwise False.

Example

This example creates a link to whole-page interactives without a thumbnail.

For example, providing the following HTML:

{% if type == 'in-page' -%}
<div>
{{ "{{% include 'interactive/" }}{{ slug }}{{ "/index.html' %}}" }}
</div>
{% elif type == 'iframe' -%}
<iframe src="{{ "{% url 'interactive' slug='" }}{{ slug }}{{ "' %}" }}{% if parameters %}?{{ parameters }}{% endif %}">
<p>Your browser does not support iframes.</p>
</iframe>
{% elif type == 'whole-page' -%}
<a
   href="{{ "{% url 'interactive' slug='" }}{{ slug }}{{ "' %}" }}{% if parameters %}?{{ parameters }}{% endif %}"
   class="btn btn-interactive-link">
<div class="btn-interactive-whole-page-text">
{% if text -%}
{{ text }}
{% else -%}
Click to load {{ slug }}
{% endif -%}
</div>
</a>
{%- endif -%}

with the following tag:

{interactive slug="binary-cards" type="whole-page" parameters="digits=5&start=BBBBB" thumbnail="binarycards.png" text="true"}

Binary Cards Interactive

{interactive end}

would result in:

<a class="btn btn-interactive-link" href="{% url 'interactive' slug='binary-cards' %}?digits=5&amp;start=BBBBB">
<div class="btn-interactive-whole-page-text">
Binary Cards Interactive
</div>
</a>