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


{% block title %}


    <h3 class="panel-sub-heading">
        Instructions for one round - The Additions Task </h3>
        </br>
{% endblock %}

{% block content %}


    <div class="instructions well well-lg">
    </br>


        <li>In each round, the <strong>performer</strong> had 45 seconds to perform as many additions as possible (out of seven) for their
            assigned <strong>decider</strong>.</li> </br>

        <li>Each addition consisted of three two-digits numbers. One example is below:</li> </br>

          <table class="table table-bordered text-center" style="width: auto; margin: auto">
                     <tr>
                         <td>21</td>
                         <td>+</td>
                         <td>35</td>
                         <td>+</td>
                         <td>48</td>
                         <td>=</td>
                         <td> 'enter here' </td>
                     </tr>
              </table> <br>


        <li> The performance of the <strong>performer</strong> affected the <strong>decider</strong>'s earnings in a specific way. In particular, the total number of questions
            that the <strong>performer</strong> answered correctly (out of the seven) determined the lottery that got assigned to the <strong>decider</strong>.
            This lottery led to either one of two outcomes (high and low). An example is given below.  </li> <br>

             <table class="table table-bordered text-center" style="width: auto; margin: auto">
                 <tr >
                     <td>Number of correct answers by performer</td>
                     <td>led to</td>
                     <td>Lottery earned by the Decider</td>
                </tr >
                 <tr >
                     <td>0 correct answers</td>
                     <td>--></td>
                     <td>with 20% probability the outcome is ₹500; <br>
                         with 80% the outcome is ₹0.</td>
                </tr>
                <tr>
                     <td>1 correct answer</td>
                    <td>--></td>
                     <td>with 30% probability the outcome is ₹500; <br>
                         with 70% the outcome is ₹0.</td>
                </tr>
                <tr>
                     <td>2 correct answers</td>
                    <td>--></td>
                     <td>with 40% probability the outcome is ₹500; <br>
                         with 60% the outcome is ₹0.</td>
                </tr>
                <tr>
                    <td>3 correct answers</td>
                    <td>--></td>
                    <td>with 50% probability the outcome is ₹500; <br>
                        with 50% the outcome is ₹0.</td>

                 <tr>
                     <td colspan="3">And so on.</td>
                </tr>
             </table></li> </br>
        <li> To help you read the table above, consider the second row of the table. It means that if the performer solves one correct addition, then
            the decider gets assigned a lottery where there is a 30% chance that the decider earns ₹0 and a 70% chance
            that they earn ₹500. For further clarity please look at the picture below:</li> <br>

        <li>  Remember that the <strong> performer </strong> had 45 seconds to solve the additions after which
             the <strong>decider</strong> got to know his/her earnings (outcome) from the lottery.</li> <br>

        <li>  You will get to see the outcome of the lottery (for example above it will be either ₹0 or ₹500), that the decider earned due to the performer for 10 different rounds. </li> <br>

        <li> We will then ask you some questions regarding this interaction between the
        <strong> performer </strong> - <strong> decider </strong> pair for each of the 10 rounds.</li>



    </div>

    <p> {% next_button %} <p>

    <br>

<div class="instructions well well-lg">

<h4 class="panel-sub-heading">
    Illustrative Remainder: Interaction Decider-Performer for one round
        </h4>

            <p align="center"><img  class="center" align="center" width="800" height="300" src="{% static "pictures/Slide0.png" %}"/>

</div>









  {% endblock %}