uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div id="delay-analyser-interactive" class="row mt-3">
    <div class="col-12 text-center">
      <h1 id="heading">{% trans "Delay Analyser" %}</h1>
    </div>
    <div id="instructions" class="col-sm-12 col-md-5 col-lg-6">
      <h2 class="text-center">{% trans "Instructions" %}</h2>
      <ol>
        <li>{% trans "Click on any tile of the grid. This will reveal a small tile of a larger image." %}</li>
        <li>{% trans "If you perceived any delay in the tile being revealed, in other words 'it didn't feel like it appeared instantly' then click on this tile again. The tile will be coloured green, indicating that you have decided there was a perceivable delay." %}</li>
        <li>{% trans "If you made a mistake by clicking it, you can change your mind by clicking again." %}</li>
        <li>{% trans "Repeat this on all other cells to reveal the complete image." %}</li>
        <li>{% trans "View the statistics page to see experiment results." %}</li>
      </ol>
      <div class="text-center">
        <button id="toggle-view" class="btn btn-success btn-lg">
          {% trans "View statistics" %}
        </button>
      </div>
    </div>
    <div class="col-sm-12 col-md-7 col-lg-6">
      <div id="delay-grid"></div>
      <div id="statistics-div">
        <p id="statistics-feedback"></p>
        <table id="statistics-table" class="table">
          <thead>
            <tr>
              <th>{% trans "Not Perceived" %}</th>
              <th>{% trans "Perceived" %}</th>
            </tr>
          </thead>
          <tbody id="statistics-table-values">
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-12 text-center">
      <button id="reset" class="btn btn-danger m-5">
        {% trans "Reset experiment" %}
      </button>
    </div>
    <div id="footer" class="col-12 text-center text-muted pt-5">
      <p>
        <small>
          {% trans "Created by Rhem Munro - Adapted by Jack Morgan" %}
        </small>
      </p>
    </div>
  </div>
{% endblock interactive_html %}

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

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