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

{% block title %}
    End of the Experiment - Results
{% endblock %}

{% block content %}
<div class="card bg-light m-3"><div class="card-body">
    <p>The experiment has now finished.</p>

    <p><b>In Part 1</b> you earned {{ income }} ECU, from which {{ taxdue }} will be deducted as taxes
        to fund further experiments.</p>
    <p><b>In Part 2</b>, a random draw selected <b>Question {{ payquest }}</b> to be the one defining your bonus payment.</p>

    <span style="text-indent:20px">
    {% if payquest == 1 %}
        <p>Question 1: <b>How do you think you rank among the 100 players in your group?</b></p>
        {% if jackpot == 1 %}
            <p style="text-indent:40px">You answered that your <b>income rank was <i>{{ selfrank }}</i></b>, and this is
                <b style="color:darkgreen">CORRECT</b>. You earned {{ bonus }} bonus.</p>
        {% elif jackpot == 0 %}
            <p style="text-indent:40px">You answered that your <b>income rank was <i>{{ selfrank }}</i></b>, and this is
                <b style="color:darkred">INCORRECT</b>. You did not earn a bonus.</p>
        {% endif %}

    {% elif payquest == 2 %}
        <p>Question 2: <b>What do you think was the average income in your group (you included)?</b></p>
        {% if jackpot == 1 %}
            <p style="text-indent:40px">You answered the <b>average income in your group was <i>{{ meaninc }}</i></b>, and this is
                <b style="color:darkgreen">CORRECT</b>.</p>
        {% elif jackpot == 0 %}
            <p style="text-indent:40px">You answered the <b>average income in your group was <i>{{ meaninc }}</i></b>, and this is
                <b style="color:darkred">INCORRECT</b>.</p>
        {% endif %}

    {% elif payquest == 3 %}
        <p>Question 3: <b>With what probability do you think your income may be above the average income in the group?</b></p>
        <p style="text-indent:40px"><b>You reported a {{ abovemean }} &#37 probability of your income being above the average income.</b></p>
        <p>The computer randomly generated a box with a proportion of <b>{{ threshold }} &#37 of purple balls</b>.</p>
        {% if box == 0 %}
            <p>Since the proportion of purple balls in the box (your probability to win the lottery) is smaller than your reported probability you think your
                income is above the group average, <b>your payoff will depend purely on whether your income actually is above the group average</b>:</p>
            {% if jackpot == 1 %}
                <p style="text-indent:40px"><b style="color:darkgreen">TRUE</b>. Your income {{ income }} ECU is <u>ABOVE</u> the group average.</p>
            {% elif jackpot == 0 %}
                <p style="text-indent:40px"><b style="color:darkred">FALSE</b>. Unfortunately, your income {{ income }} ECU is <u>BELOW</u> the group average.
                   </p>
            {% endif %}
        {% elif box == 1 %}
           <p>Since your reported probability of your income being above the group average was smaller than the proportion of
               purple balls in the box, <b>your payoff will depend on the random draw of a ball</b>:</p>
            {% if jackpot == 1 %}
                <p style="text-indent:40px">The computer randomly drew a <b style="color:purple">PURPLE</b> ball, which means <u>you win the bonus</u>.</p>
            {% elif jackpot == 0 %}
                <p style="text-indent:40px">The computer randomly drew an <b style="color:orange">ORANGE</b> ball, which means you do not earn a bonus.</p>
            {% endif %}
        {% endif %}
        <br>
        <p><button onclick="ReadMore()" type="button">Double-click to Review the payment mechanism for Question 3.</button></p>
    {% endif %}
    </span>
    <br>

    <p><span class="important-text">Your final payoff is therefore: {{ income }} ECU - {{ taxdue }} + {{ bonus }} = <b>{{ payoff }} = {{ real }} USD.</b></span></p>
    <p>You will receive this amount plus the participation fee.</p>

    <br>
</div></div>
    <span class="important-text"><p>Thank you for participating!</p></span>
    <p><button onclick="ReadMore()" type="button">(Double-click for a detailed explanation of the payment mechanism for Part 2)</button></p>

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

{% next_button %}
<br>
    <p>This graph summarises the performance of all players in your group. Your position is highlighted in purple:</p>
    <div style="text-align:center">
        {% if matchgroup == 0 %}
            <p><b>Group average income: 48,300 ECU.</b></p>
            {% if correct == 0 %}
                <p><img src="{% static 'experiment/lowgroup_0K.png' %}" /></p>
            {% elif correct == 1 %}
                <p><img src="{% static 'experiment/lowgroup_10K.png' %}" /></p>
            {% elif correct == 2 %}
                <p><img src="{% static 'experiment/lowgroup_20K.png' %}" /></p>
            {% elif correct == 3 %}
                <p><img src="{% static 'experiment/lowgroup_30K.png' %}" /></p>
            {% elif correct == 4 %}
                <p><img src="{% static 'experiment/lowgroup_40K.png' %}" /></p>
            {% elif correct == 5 %}
                <p><img src="{% static 'experiment/lowgroup_50K.png' %}" /></p>
            {% elif correct == 6 %}
                <p><img src="{% static 'experiment/lowgroup_60K.png' %}" /></p>
            {% elif correct == 7 %}
                <p><img src="{% static 'experiment/lowgroup_70K.png' %}" /></p>
            {% elif correct == 8 %}
                <p><img src="{% static 'experiment/lowgroup_80K.png' %}" /></p>
            {% elif correct == 9 %}
                <p><img src="{% static 'experiment/lowgroup_90K.png' %}" /></p>
            {% elif correct == 10 %}
                <p><img src="{% static 'experiment/lowgroup_100K.png' %}" /></p>
            {% elif correct == 11 %}
                <p><img src="{% static 'experiment/lowgroup_110K.png' %}" /></p>
            {% elif correct == 12 %}
                <p><img src="{% static 'experiment/lowgroup_120K.png' %}" /></p>
            {% endif %}
        {% elif matchgroup == 1 %}
            <p><b>Group average income: 57,500 ECU.</b></p>
            {% if correct == 0 %}
                <p><img src="{% static 'experiment/highgroup_0K.png' %}" /></p>
            {% elif correct == 1 %}
                <p><img src="{% static 'experiment/highgroup_10K.png' %}" /></p>
            {% elif correct == 2 %}
                <p><img src="{% static 'experiment/highgroup_20K.png' %}" /></p>
            {% elif correct == 3 %}
                <p><img src="{% static 'experiment/highgroup_30K.png' %}" /></p>
            {% elif correct == 4 %}
                <p><img src="{% static 'experiment/highgroup_40K.png' %}" /></p>
            {% elif correct == 5 %}
                <p><img src="{% static 'experiment/highgroup_50K.png' %}" /></p>
            {% elif correct == 6 %}
                <p><img src="{% static 'experiment/highgroup_60K.png' %}" /></p>
            {% elif correct == 7 %}
                <p><img src="{% static 'experiment/highgroup_70K.png' %}" /></p>
            {% elif correct == 8 %}
                <p><img src="{% static 'experiment/highgroup_80K.png' %}" /></p>
            {% elif correct == 9 %}
                <p><img src="{% static 'experiment/highgroup_90K.png' %}" /></p>
            {% elif correct == 10 %}
                <p><img src="{% static 'experiment/highgroup_100K.png' %}" /></p>
            {% elif correct == 11 %}
                <p><img src="{% static 'experiment/highgroup_110K.png' %}" /></p>
            {% elif correct == 12 %}
                <p><img src="{% static 'experiment/highgroup_120K.png' %}" /></p>
            {% endif %}
        {% endif %}
    </div>

{% endblock %}