{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% block styles %}
    <style>
        .otree-timer {
            display: none;
        }
    </style>
{% endblock %}
{% block scripts %}
    <script>
        $(function () {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                if (event.offset.totalSeconds == 45) {
                    $('.otree-timer').show();
                }
            });
        });
    </script>
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}

{% block content %}

    <div class="wrapper">
        <p>
            How many of the {{ Constants.num_rounds}} puzzles do you think you solved correctly?
        </p>
        <div class="row">
            <div class="col-sm-5"> </div>
            <div class="col-sm-2">
                {{ form.belief1 }}
            </div>
            <div class="col-sm-5"> </div>
        </div>


        <p>
            Out of 100 randomly selected participants, how many do you think solved more puzzles correctly than you did?
            (In other words, what is your rank among the 100 participants, with smaller number indicating better performance)
        </p>
        <div class="row">
            <div class="col-sm-5"> </div>
            <div class="col-sm-2">
                {{ form.belief2 }}
            </div>
            <div class="col-sm-5"> </div>
        </div>
    </div>

    </br>
    <div style="text-align:right">
        {% next_button %}
    </div>


{% endblock %}