uccser/cs-field-guide

{% extends interactive_mode_template %}

{% load i18n %}
{% load static %}

{% block interactive_html %}
  <div id="interactive-trainsylvania" class="mt-3 text-center">
    <div>
      <p>{% trans "Find your way to <strong>Harbour Station!</strong>" %}</p>
      <p>{% trans "You are currently at:" %}</p>
      <div id="interactive-trainsylvania-image-div"></div>
      <h3 id="interactive-trainsylvania-current-station"></h3>
      <p id="interactive-trainsylvania-train-buttons">
        {% trans "Do you want to travel on:" %}<br>
        <button id="interactive-trainsylvania-train-a" class="btn btn-primary btn-lg interactive-trainsylvania-train-button" disabled="true">{% trans "Train A" %}</button>
        or
        <button id="interactive-trainsylvania-train-b" class="btn btn-primary btn-lg interactive-trainsylvania-train-button" disabled="true">{% trans "Train B" %}</button>
      </p>
      <p id="interactive-trainsylvania-train-success">
        {% trans "Congratulations! You made it!" %}
      </p>
      <button id="interactive-trainsylvania-reset" class="btn btn-danger interactive-trainsylvania-train-button mb-3" disabled="true">{% trans "Start over" %}</button>
    </div>
    <a id="interactive-trainsylvania-image-link" href="{% static 'interactives/trainsylvania/img/' %}"></a>
  </div>
{% endblock interactive_html %}

{% block interactive_css %}
  <link rel="stylesheet" href="{% static 'interactives/trainsylvania/css/trainsylvania.css' %}">
{% endblock interactive_css %}

{% block interactive_js %}
  <script type="text/javascript" src="{% static 'interactives/trainsylvania/js/trainsylvania.js' %}"></script>
{% endblock interactive_js %}