uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div id="data-bias-container" class="flex-grow-1 d-flex flex-column">
    <h1 class="text-center">{% trans "Data Bias" %}</h1>
    <div class="row justify-content-center">
      <div id="instruction-area" class="col-sm-12 col-md-8 col-lg-8 col-xl-5 text-center mb-3">
        <h5 id="instruction-text">
          {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}
        </h5>
        <div id="background-colour-slider-container" class="container mt-3 d-none">
          <div class="pb-2">
            <div id="background-colour-slider" class="my-3"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center mb-3">
      <button id="next-stage" class="btn btn-primary">{% trans "Next stage" %}</button>
      <button id="start-again" class="btn btn-primary d-none">{% trans "Start again" %}</button>
    </div>
    <div id="circles-area" class="flex-grow-1 mb-3 align-self-center"></div>
  </div>
{% endblock interactive_html %}

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

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