uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div class="container">
    <div id="interactive-high-score-boxes">
      <h3 class="text-center">{% trans "High Score Boxes" %}</h3>
      <p class="text-center">{% trans "Clicking a box will reveal its number; your task is to find the highest number and enter it below." %}</p>
      <div id="boxes-container"></div>
      <div class="col-12 text-center">
        <div class="row justify-content-center">
          <strong>{% trans "Highest number:" %}</strong>
        </div>
        <div class="row justify-content-center">
          <input type="number" id="interactive-high-score-boxes-input" placeholder="Enter answer here..." class="form-control col-4 my-2">
        </div>
        <div class="row justify-content-center">
          <button id="submit-button" class="btn btn-primary mb-2">{% trans "Submit" %}</button>
        </div>
        <div class="row justify-content-center">
          <p id="completion-message"></p>
        </div>
        <div class="row justify-content-center">
          <button id="restart-button" class="btn btn-danger">{% trans "Restart" %}</button>
        </div>
      </div>
    </div>
  </div>
{% endblock interactive_html %}

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

{% block interactive_js %}
  <script type="text/javascript">
    var colourful_box_images = [
      "{% static 'interactives/high-score-boxes/img/square1-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square2-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square3-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square4-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square5-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square6-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square7-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square8-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square9-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square10-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square11-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square12-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square13-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square14-200px-rounded.png' %}",
      "{% static 'interactives/high-score-boxes/img/square15-200px-rounded.png' %}",
    ];
  </script>
  <script type="text/javascript" src="{% static 'interactives/high-score-boxes/js/high-score-boxes.js' %}"></script>
{% endblock interactive_js %}