uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div class="container">
    <div id="interactive-fsa-light" data-iframe-height>

      <div id="interactive-fsa-light-state-text" class="text-center">
        {% trans 'Current state: <span id="interactive-fsa-light-current-state-text"></span>' %}
      </div>

      <div id="interactive-fsa-light-images" class="text-center">
        <img id="interactive-fsa-light-bulb-off" src="{% static 'interactives/fsa-light/img/lightbulb-off.png' %}">
        <img id="interactive-fsa-light-bulb-on" src="{% static 'interactives/fsa-light/img/lightbulb.png' %}">
      </div>

      <div id="interactive-fsa-light-buttons" class="text-center"></div>

      <div class="text-center">
        <button id="interactive-fsa-light-reset" class="btn btn-danger">{% trans "Reset to start state" %}</button>
      </div>
    </div>
  </div>
{% endblock interactive_html %}

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

{% block interactive_js %}
  <script type="text/javascript">
    var fsa_light_config = {
      "available_buttons": ["a"],
      "initial_state": "1",
      "states": {
        "1": {
          "light": "On",
          "destinations": {
            "a": "2"
          }
        },
        "2": {
          "light": "Off",
          "destinations": {
            "a": "3"
          }
        },
        "3": {
          "light": "Off",
          "destinations": {
            "a": "1"
          }
        }
      }
    };
  </script>
  <script type="text/javascript" src="{% static 'interactives/fsa-light/js/fsa-light.js' %}"></script>
{% endblock interactive_js %}