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

{% block title %}

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
}
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
</style>
{% endblock %}

{% block content %}
<div class="card info">
    {% formfield player.fav_club label = "Which Premier League Club do you support the most (<i>favourite team</i>)? Please select one club or select None." %}
    {% formfield player.fav_club_rank label = "The Premier League table ranks teams from 1 (<i>best</i>) to 20 (<i>worst</i>) based on their performance. What rank (<i>between 1 and 20</i>) do you think your favourite team will achieve at the end of the league?" %}
    {% formfield player.fav_club_rank_certain label = "How certain are you about your ranking of your favourite team above? Use a scale of 1 (<i>=very uncertain</i>) to 5 (<i>=completely certain</i>) to indicate how certain you are." %}
    {% formfield player.fav_club_support label = "How strongly do you support your favourite team on a scale of 1 (<i>do not support at all</i>) to 5 (<i>support very strongly</i>)?" %}
    {% formfield player.fav_club_years %}
</div>
<br><br>
<div style="display:inline-block; margin:0; float: left;"></div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="QuestionSet2_time" id="QuestionSet2_time" step="0.000001">
{% endblock %}

{% block scripts %}
<script>
var startTime;

$(document).ready(function() {
    startpage_time = Date.now();
});

function endPage() {
    var endpage_time = Date.now();
    page_time = (endpage_time - startpage_time)/1000;
    document.getElementById('QuestionSet2_time').value=page_time;
};

</script>
{% endblock %}