{% 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">
    <strong> Welcome! </strong> <br>
    <p>
        Thank you for your participation. You will earn a GBPXX participation fee for completing this study and additional payments based on your decisions.
    </p>
    <p>
        Please read the instructions carefully before making your decision. The study will take about <strong>ten minutes</strong> to complete.
    </p>
    <p>
        In this study, there will be <strong>one decision</strong> to make and <strong> four questions </strong> to answer about the behavior of participants in a previous study.
    </p>
    <p>
        You will be paid based on the <strong>one decision</strong> made and based on the accuracy of one of your answers to one of the <strong>four questions</strong> about the behavior of participants in a previous study.
    </p>
    <p>
        By clicking "Next", you explicitly give us consent that:
    </p>

    <ul>
        <li>We can collect your anonymized, non-sensitive personal data (e.g. age, gender),</li>
        <li>We can use this personal data for scientific purposes,</li>
        <li>We can store your personal data on safeguarded servers for up to 10 years.</li>
        <li>We can make anonymized data available to other researchers online.</li>
    </ul>
</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="Introduction00_time" id="Introduction00_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('Introduction00_time').value=page_time;
};

</script>
{% endblock %}