{% 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" style="background-color:#d3e9f8;">
    <p>
        In the remainder of the survey, for each of four potential betting situations, you will be presented with 100 Tokens 
        (1 Token is worth 1 Khs, so 100 Tokens will be 100 Khs) to bet/allocate across the 3 different outcomes as you wish.
    </p>
    <p>
        One of these four matches will be randomly drawn at the end of the survey and we will pay you the amount corresponding to your bet 
        (if you bet on the correct outcome).

    </p>
</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="BetIntro_time" id="BetIntro_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>

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

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

</script>
{% endblock %}