{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Period {{subsession.round_number}} of {{Constants.num_rounds}}
{% endblock %}

{% block content %}

{% for color_family in Colors %}
<h1>{{forloop.counter}}</h1>
<h2>Easy</h2>
<div class="row colors" id="colors"  >
    <div class="col-md-3 color_wrapper" align="center">
        
        <h3>Chosen Color</h3>
        <svg width="50%" height="50%">
            <rect width="100%" height="100%" style="fill:{{color_family.0}}" />
            </svg>
    </div>
    <div class="col-md-3 color_wrapper" align="center">
        <h3>Target Color</h3>
        <svg width="50%" height="50%">
            <rect width="100%" height="100%" style="fill:{{color_family.1}}" />
            </svg>
    </div>
</div>

<h2>Hard</h2>
<div class="row colors" id="colors"  >
    <div class="col-md-3 color_wrapper" align="center">
        
        <h3>Chosen Color</h3>
        <svg width="50%" height="50%">
            <rect width="100%" height="100%" style="fill:{{color_family.0}}" />
            </svg>
    </div>
    <div class="col-md-3 color_wrapper" align="center">
        <h3>Target Color</h3>
        <svg width="50%" height="50%">
            <rect width="100%" height="100%" style="fill:{{color_family.2}}" />
            </svg>
    </div>
</div>

    {%endfor%}
    




{% next_button %}
{% endblock %}


{% block scripts %}

    <!-- define a script -->
    <script>
     
          $('.otree-timer').hide();
          $(function () {
          $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 30) {
           
                $('.otree-timer').show();
            }
        });
    });
    </script>
{% endblock %}