uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div id="interactive-nfa-guesser" class="text-center">
    <h3>{% trans "Practice traversing a NFA" %}</h3>
    <p>{% trans "Traverse the NFA map below with the input sequence and select all the resulting states." %}</p>

    <object id="interactive-nfa-guesser-image" data="{% static 'interactives/nfa-guesser/img/nfa.svg' %}" type="image/svg+xml"></object>

    <div class="interactive-nfa-guesser-header">
      {% trans 'Input sequence: <span id="interactive-nfa-guesser-input-sequence-value"></span>' %}
    </div>

    <div class="interactive-nfa-guesser-header">
        {% trans 'Possible end states:' %}
    </div>
    <div id="interactive-nfa-guesser-answer-options"></div>
    <div>
        <button id="interactive-nfa-guesser-check" class="btn btn-primary btn-lg">{% trans "Check answer" %}</button>
    </div>

    <p id="interactive-nfa-guesser-result"></p>
    <div>
        <button id="interactive-nfa-guesser-show-answer" class="btn btn-secondary btn-sm mb-3 hidden">{% trans "Show answer" %}</button>
    </div>
    <div>
        <button id="interactive-nfa-guesser-new-sequence" class="btn btn-success mb-3">{% trans "Generate new input sequence" %}</button>
    </div>
  </div>
{% endblock interactive_html %}

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

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