uccser/cs-field-guide

{% extends interactive_mode_template %}

{% load static i18n %}

{% block interactive_html %}
    <div id="qr-code-interactive" class="container">
        <h1 class="text-center">QR Code Generator</h1>

        <div class="row justify-content-center">
            <div class="col-12 col-md-10 col-lg-8">
                <form class='interactive-controls'>
                    <div class="form-row">
                        <div class="form-group col-12 col-sm-6">
                            <label for="qr-code-text-content">Text content</label>
                            <input type="text" class="form-control" id="qr-code-text-content" value="Hello world!" maxlength="100">
                        </div>
                        <div class="form-group col-12 col-sm-6">
                            <label for="qr-code-correction-level">Error correction level</label>
                            <select class="form-control" id="qr-code-correction-level">
                                <option value="L">
                                    Level L (Low)  <!-- 7% of data bytes can be restored -->
                                </option>
                                <option value="M">
                                    Level M (Medium)  <!-- 15% of data bytes can be restored -->
                                </option>
                                <option value="Q">
                                    Level Q (Quartile)  <!-- 25% of data bytes can be restored -->
                                </option>
                                <option value="H">
                                    Level H (High)  <!-- 30% of data bytes can be restored -->
                                </option>
                            </select>
                        </div>
                    </div>
                </form>

                <p>
                    <span class='interactive-controls'>
                        The QR Code below automatically updates to reflect the settings above.
                    </span>
                    Click on a square in the QR Code to invert it and use a QR Code scanning application on your mobile device to see if it's still readable.
                </p>
            </div>
        </div>

        <div id="qr-code-container"></div>

        <div id="statistics" class="row justify-content-center my-3 text-center">
            <div class="col-12 col-md-3">
                <strong>Total bits:</strong> <span id="statistics-total-bits"></span><br>
            </div>
            <div class="col-12 col-md-3">
                <strong>Changed bits:</strong> <span id="statistics-changed-bits"></span>
            </div>
        </div>
        <div class="row justify-content-center my-3">
            <div class="col-12 col-md-3">
                <button id="highlight-changed-button" class="btn btn-block btn-sm btn-info">

                </button>
            </div>
            <div class="col-12 col-md-3">
                <button id="reset-button" class="btn btn-block btn-sm btn-danger">
                    Reset QR Code
                </button>
            </div>
        </div>

        <div id="copyright">
            QR Code is a registered trademark of DENSO WAVE INCORPORATED in Japan and in other countries.
        </div>
    </div>
{% endblock interactive_html %}

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

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