uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div id="interactive-binary-cards">
          <h3 id="interactive-binary-cards-title" class="text-center mt-2">{% trans "Binary Cards" %}</h3>

          <div id="interactive-binary-cards-container" class="my-2"></div>
          <div id="dot-decimal-count"></div>
          <div id="interactive-options">
            <div class="mb-2">
                <p class="d-inline mr-2">{% trans "Flip all card sides to:" %}</p>
                <button id="flip-to-black" class="btn btn-dark">{% trans "Black" %}</button>
                <button id="flip-to-white" class="btn btn-light">{% trans "White" %}</button>
            </div>
            <div id="cards-input" class="form-group form-inline">
                <label for="cards-to-show" class="mr-2">{% trans "Cards to show:" %}</label>
                <input id="cards-to-show" class="form-control col-md-1 col-4" type="number" step="1">
                <small id="cards-to-show-help" class="form-text text-muted ml-2 d-none">Valid numbers are 1 to 333 (inclusive).</small>
            </div>
            <div id="cards-total" class="form-group form-inline">
                <label for="cards-total-show" class="mr-2">{% trans "Show total number of dots:" %}</label>
                <input id="card-total-show" type="checkbox" class="form-check-input" checked="checked">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock interactive_html %}

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

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