uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div class="container">
    <div class="row text-center">
      <div class="col-12">
        <div id="interactive-regular-expression-filter">
          <h3>{% trans "Regular Expression Filter" %}</h3>

          <button id="interactive-regular-expression-filter-load" class="btn btn-primary">{% trans "Load word file (2.8MB)" %}</button>
          <button id="interactive-regular-expression-filter-load-more" class="btn btn-sm btn-primary d-none">{% trans 'Load more' %}</button>

          <div id="interactive-regular-expression-filter-loading">
            <h6>{% trans "Loading word file..." %}</h6>
          </div>

          <div class="row justify-content-center">
            <div class="col-8"  id="interactive-regular-expression-filter-controls">
              <h5>{% trans "Regular Expression" %}</h5>
              <input id="interactive-regular-expression-filter-regex" type="text" placeholder="Enter expression here" class="form-control mb-2">
              <button id="interactive-regular-expression-filter-filter" class="btn btn-primary btn-expand">{% trans "Filter words" %}</button>

              <p id="interactive-regular-expression-filter-feedback"></p>
            </div>

            <div class="col-6">
              <p id="interactive-regular-expression-filter-words" class="text-left">
              </p>
            </div>
          </div>

          <a id="interactive-regular-expression-filter-link" href="./"></a>
        </div>
      </div>
    </div>
  </div>
{% endblock interactive_html %}

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

{% block interactive_js %}
  <script type="text/javascript">
    var words_file_location = "{% static 'interactives/regular-expression-filter/en-words.txt' %}";
  </script>
  <script type="text/javascript" src="{% static 'interactives/regular-expression-filter/js/regular-expression-filter.js' %}"></script>
{% endblock interactive_js %}