{% 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 make the remaining four decisions (Decisions 12 to 15).
            </strong>
            Each decision is about one possible content of your bonus file. You will instruct us about which of the two
            options you want.
        </p>
        <p>
            <strong>
                After having made these 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">
            OK. Please continue 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 %}