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 inrequired_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 thetext
parameter). By default, the thumbnail should be athumbnail.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 }}
.
- If given as
parameters
(used withwhole-page
andiframe
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 withwhole-page
value) - Displays an alternative thumbnail for the interactive. When not provided, it defaults tointeractives/interactive-slug/img/thumbnail.png
, whereinteractive-slug
is the value given for theslug
tag parameter (see above).If the
thumbnail
value provided is a relative link (a link that doesn’t start withhttp:
), 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 theimages
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&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&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 awhole-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 thethumbnail_file_path
is a relative link, this is the boolean valueTrue
, otherwiseFalse
.
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&start=BBBBB">
<div class="btn-interactive-whole-page-text">
Binary Cards Interactive
</div>
</a>