uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div class="container-fluid my-3 text-center">
    <h1 id="data-vis-title" class="col-12">{% trans 'Data Visualisation' %}</h1>
    <div id="data-vis-instructions" class="col-12">
      <div class="col-12">
        {% blocktrans %}
        Find the mode (most common number) of the data below.
        You will have a limited amount of time to view the data.
        {% endblocktrans %}
      </div>
      <button id="button-start" type="button" class="btn btn-success my-1">{% trans 'Start' %}</button>
    </div>
    <div id="data-vis-guesser" class="col-12 d-none">
      <label for="data-vis-selector">{% trans 'What was the mode (most common number) of the data?' %}</label>
      <form class="form-inline justify-content-center">
        <select id="data-vis-selector" class="form-control text-center d-inline mx-2 my-1" size="1">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
        </select>
        <button id="button-submit" type="button" class="btn btn-secondary d-inline mx-2 my-1">{% trans 'Submit' %}</button>
      </form>
    </div>
    <div id="data-vis-next" class="col-12 my-1 d-none">
      <button id="button-next" type="button" class="btn btn-secondary d-inline mx-2">{% trans 'Continue' %}</button>
      <button id="button-quit" type="button" class="btn btn-danger d-inline mx-2">{% trans 'End Game' %}</button>
    </div>
    <div id="data-vis-restart" class="col-12 my-1 d-none">
      <button id="button-restart" type="button" class="btn btn-primary d-inline mx-2">{% trans 'Restart Game' %}</button>
    </div>
    <div id="data-vis-game"class="col-12 d-none">
      <table id="data-vis-grid" class="my-3"></table>
      <canvas id="data-vis-barchart" height="400" width="800" role="img" aria-label="Bar chart showing how many times each value appears in the data."></canvas>
      <canvas id="data-vis-piechart" height="400" width="600" role="img" aria-label="Pie chart showing the relative proportions of each value in the data."></canvas>
    </div>
    <div id="data-vis-results"class="col-12 d-none">
      <table id="data-vis-performance" class="my-3">
        <tr>
          <th>{% trans 'Chart type' %}</th>
          <th>{% trans 'Mode (most common value) of data' %}</th>
          <th>{% trans 'Your answer' %}</th>
        </tr>
      </table>
      <canvas id="data-vis-results-chart" height="400" width="800" role="img" aria-label="Bar chart to compare your performace with different data visualisations."></canvas>
    </div>
  </div>
{% endblock interactive_html %}

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

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