uccser/cs-field-guide

{% extends interactive_mode_template %}

{% load static i18n %}

{% block interactive_html %}
    <div id="product-code-check-digit-calculation-interactive" class="container">
        <h1 class="text-center">{% trans "Product Code Check Digit Calculation" %}</h1>

        <div id="window-size-alert">
            <div class="alert alert-warning" role="alert">
                {% trans "This interactive may not fit on your screen, we recommend using it on a large screen or device." %}
            </div>
        </div>

        <p id="instructions">
            {% trans "Select the type of product code you are calculating the check digit for:" %}
        </p>

        <div id="product-code-check-digit-calculation-interactive-container"></div>

        <div id="options" class="text-center">
            <div>
                <input type="checkbox" id="use-modulo" name="use-modulo">
                <label for="use-modulo">Use modulo 10 at each step</label>
            </div>
            <button id="restart-button" class="btn btn-sm btn-danger">
                {% trans "Restart" %}
            </button>
        </div>
    </div>
{% endblock interactive_html %}

{% block interactive_css %}
    <link rel="stylesheet" href="{% static 'interactives/product-code-check-digit-calculation/css/product-code-check-digit-calculation.css' %}">
{% endblock interactive_css %}

{% block interactive_js %}
    <script type="text/javascript" src="{% static 'interactives/product-code-check-digit-calculation/js/product-code-check-digit-calculation.js' %}"></script>
{% endblock interactive_js %}