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

{% block title %}
Thank you for reading the instructions and answering the comprehension questions
{% endblock %}

{% block content %}
<div class="row"></div>
<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">

        <p>
            <strong>

                On the next screen you will start making your first eleven decisions.
            </strong>
            The remaining four decisions are a bit different and will be explained later.
        </p>

        <p>
            <strong>

                Each decision is about one possible content of your bonus file.
            </strong>
            By entering a threshold value, you will instruct us about which of two the options you want.
        </p>

        <p>
            <strong>

                After having made all decisions, you learn about the content of your bonus file —
                {{user_chosen_decision}}.pdf.
            </strong>
            We will
            then give you the option that you instructed us to give you. Therefore, keep in mind that each and every one
            of your decisions could determine your entire bonus from participating in the experiment.
        </p>
        <button id="next_page_btn" class="btn btn-primary px-3" disabled>OK. Please start the experiment</button>
    </div>
</div>

<script>
    let min_time_on_page = js_vars.min_time_on_page
    // Enables the next button after set time
    setTimeout(
        function () {
            document.getElementById("next_page_btn").removeAttribute("disabled")
            // document.getElementById("next_btn_info").style.display = "none"
        },
        min_time_on_page * 1000
    );
</script>

{% endblock %}