{% extends "global/Page.html" %}
{% load static otree %}

{% block title %} Control Questions {% endblock %}

{% block content %}

    <div class="otree-form-errors alert alert-danger">
        You have not answered the control questions correctly. Please adjust your answers in the form.
        You have one attempt remaining.
    </div>

    <div class="card bg-light instructions">
        <div class="card-body">
            {% formfield player.question1 label="What is the target position of each slider?" %}
            <hr>
            {% formfield player.question2 label="How many rounds do you have to complete to earn 2 USD?" %}
            <hr>
            {% formfield player.question3 label="How many USD do you earn if you complete 5 rounds?" %}
            <hr>
            {% formfield player.question4 label="How many USD do you earn if you complete 15 rounds?" %}
            <hr>
            {% if player.treatment == "2" %}
                {% formfield player.question6 label="How many rounds do you have to complete to receive the gold badge?" %}
                <hr>
            {% endif %}
            {% formfield player.question5 label="How many rounds can you maximally complete?" %}
        </div>
    </div>
    <button value="True" id="proceed" class="btn btn-primary btn-large">Next</button>

{% endblock %}

{% block scripts %}
{% endblock %}

{% block styles %}

    <style type="text/css">
    .otree-btn-next  {
        position: relative;
        left: 700px;
    }
    #proceed {
        float: right;
    }

    </style>

{% endblock %}