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

{% block title %}
    Part 2 - Bonus Questions
{% endblock %}

{% block content %}
<div class="card bg-light m-3"><div class="card-body">

    <p>Remember you were <u>randomly matched with 99 other players</u> at the beginning of the experiment, forming a group of 100.</p>
    <p>Answering the following questions correctly can earn you an additional <b>reward of {{ Constants.b_points }} ECU</b> to be added to your final pay at the end of the experiment. </p>
    <div class="boxed"><span class="important-text"><b><p>You earned {{ earnings }} ECU from the 12 tasks of Part 1.</p>
    {% if treatment < 3 %}
        <p>Your tax due is {{ taxdue }}.</p>
    {% endif %}
    </b></span> </div>

    <table class="table" style="align-content: center">
        <tr style="border-top:2px solid black">
            <td><span class="important-text"><b>
                <br>
                1. How do you think you rank among the 100 players in your group?
                <br>
                <br>
            </b></span></td>
            <td style="vertical-align: middle"><br>{% formfield player.selfrank label='' %}</td>
        </tr>
        <tr style="border-top:2px solid black">
            <td><span class="important-text"><b>
                <br>
                2. What do you think was the average income in your group (you included)?
                <br>
                <br>
            </b></span></td>
            <td style="vertical-align: middle">{% formfield player.meaninc label='' %}</td>
        </tr>
        <tr style="border-top:2px solid black; border-bottom:2px solid black">
            <td><span class="important-text"><b>
                <br>
               3. "Your income is above the average in your group". <br> With what probability do you think this may be true?
                <br>
                <br>
            </b></span></td>
            <td style="vertical-align: middle">
                <div class="controls  field-myInput">
                <div class="input-group slider" data-slider>
                    <input type="range" name="abovemean" value="1"
                        step="1"
                        min="1"
                        max="100"
                        required
                        id="abovemean"
                        class="form-control"
                    />
                    <div class="input-group-append">
                        <span class="input-group-text" data-slider-value title="current value"></span> <span style="font-size:130%">&nbsp; &#37</span>
                    </div>
                </div>
                </div>
            </td>
        </tr>
    </table>
    <p style="font-size: 90%">Note: all other 99 players faced the same 12 tasks as you did, with the same time limit, in the same order, same earnings per task, etc.</p>
</div></div>

    <p>{% next_button %}</p>

<p><button onclick="ReadMore()" type="button">Double-click to Review the payment mechanism</button></p>

<div id="Instructions_Panel">
    {% include Constants.payment_template2 %}
</div>

{% endblock %}